@font-face{font-family:"Outfit";font-weight:100 900;font-display:swap;src:url(assets/fonts/outfit-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/exo-2-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:100 900;font-display:swap;src:url(assets/fonts/exo-2-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-weight:300;font-display:swap;src:url(assets/fonts/kalam-latin-300-normal.woff2) format("woff2")}

:root{
  --gold:#e6a24a;
  --gold-hi:#eeae5a;
  --charcoal:#070e13;
  --ink:#f3f4f6;
  --text:#d5d8dd;
  --muted:#b3b8bf;
  --line:rgba(230,162,74,.45);
  --hair:rgba(200,206,214,.32);
  /* the whole desktop layout is drawn on a 1536 × 1024 grid; 1u = 1 reference pixel */
  --lu:min(calc(100vw / 1536), calc(100vh / 1024), 1px);
  --u:var(--lu);
  --sans:"Outfit",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --hand:"Kalam","Segoe Print","Bradley Hand",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{background:var(--charcoal);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.page{position:relative;width:100%;overflow:hidden;background:var(--charcoal)}
.stage{position:relative;width:calc(1536 * var(--u));height:calc(950 * var(--u));margin:0 auto}
.hero-bg{position:absolute;left:50%;top:0;width:calc(2400 * var(--u));height:calc(1024 * var(--u));transform:translateX(-50%);background:url(assets/hero-bg.jpg) center/100% 100% no-repeat}

/* ---------- header ---------- */
.topbar{position:absolute;inset:0 0 auto 0;height:calc(140 * var(--u))}
.brand{position:absolute;left:calc(66 * var(--u));top:calc(30 * var(--u));display:block;line-height:0}
.brand img{display:block;width:calc(330 * var(--u));height:auto}

.nav{position:absolute;top:calc(34 * var(--u));right:calc(68 * var(--u));display:flex;align-items:center;height:calc(46 * var(--u))}
.nav a{font-size:calc(18.5 * var(--u));font-weight:320;color:#eef0f2;margin-right:calc(49 * var(--u))}
.nav a:nth-child(2){margin-right:calc(51 * var(--u))}
.nav a:hover{color:var(--gold)}
.nav .btn-outline{margin:0 0 0 0;display:inline-flex;align-items:center;justify-content:center;width:calc(173 * var(--u));height:calc(47 * var(--u));border:calc(1.6 * var(--u)) solid var(--gold);border-radius:calc(3 * var(--u));color:var(--gold);font-size:calc(17.5 * var(--u));font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.nav .btn-outline:hover{background:rgba(230,162,74,.1);color:var(--gold-hi)}

/* ---------- hero copy ---------- */
.hero{position:absolute;left:calc(83 * var(--u));top:calc(196 * var(--u));width:calc(720 * var(--u))}
.eyebrow{font-size:calc(16.5 * var(--u));font-weight:400;letter-spacing:.36em;text-transform:uppercase;color:#d9dce1;margin-left:calc(1 * var(--u))}
.headline{margin-top:calc(2 * var(--u));margin-left:calc(-2 * var(--u));font-weight:360;font-size:calc(79 * var(--u));line-height:calc(77 * var(--u));letter-spacing:calc(-1.1 * var(--u));word-spacing:calc(-3 * var(--u));color:#f6f6f7;white-space:nowrap}
.headline .gold{color:var(--gold)}
.lede{margin-top:calc(13 * var(--u));width:calc(528 * var(--u));font-size:calc(22.2 * var(--u));line-height:calc(30 * var(--u));font-weight:340;color:var(--text)}

.coming-soon{margin-top:calc(42 * var(--u));display:flex;align-items:center;justify-content:center;width:calc(330 * var(--u));height:calc(59 * var(--u));border:calc(2 * var(--u)) solid var(--gold);border-radius:calc(2 * var(--u));color:var(--gold);font-size:calc(22.5 * var(--u));font-weight:380;letter-spacing:.31em;text-indent:.31em;text-transform:uppercase;background:rgba(5,10,14,.18)}
.note{margin-top:calc(15 * var(--u));font-size:calc(18 * var(--u));font-weight:320;color:#d2d5da}

.signup{position:relative;margin-top:calc(19 * var(--u));display:flex;width:calc(429 * var(--u));height:calc(56 * var(--u))}
.signup input{flex:1;min-width:0;height:100%;padding:0 calc(20 * var(--u));background:rgba(10,16,22,.78);border:calc(1 * var(--u)) solid rgba(150,160,172,.38);border-right:0;border-radius:calc(2 * var(--u)) 0 0 calc(2 * var(--u));color:#f1f2f4;font:inherit;font-size:calc(19.5 * var(--u));font-weight:300}
.signup input::placeholder{color:#a7adb5}
.signup input:focus{outline:none;border-color:var(--gold)}
.signup button{width:calc(61 * var(--u));height:100%;border:0;border-radius:0 calc(2 * var(--u)) calc(2 * var(--u)) 0;background:var(--gold);color:#16120c;display:grid;place-items:center;cursor:pointer}
.signup button svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
.signup button:hover{background:var(--gold-hi)}
.signup-msg{position:absolute;left:0;top:calc(100% + 8 * var(--u));font-size:calc(14 * var(--u));color:var(--gold);white-space:nowrap}

/* ---------- handwritten annotation ---------- */
.scribble{position:absolute;left:calc(1387 * var(--u));top:calc(190 * var(--u));color:rgba(222,227,234,.82);font-family:var(--hand);font-weight:300;font-size:calc(25.5 * var(--u));line-height:calc(30.2 * var(--u));transform:rotate(-1deg);transform-origin:left top}
.scribble span{display:block;white-space:nowrap;letter-spacing:calc(.2 * var(--u))}
.scribble-arrow{display:block;width:calc(44 * var(--u));height:calc(33 * var(--u));margin:calc(14 * var(--u)) 0 0 calc(-17 * var(--u));opacity:.85}

/* ---------- feature strip ---------- */
.features{position:absolute;left:0;right:0;top:calc(757 * var(--u));height:calc(146 * var(--u))}
.feature{position:absolute;top:0;height:100%}
.feature:nth-child(1){left:calc(101 * var(--u))}
.feature:nth-child(2){left:calc(409 * var(--u))}
.feature:nth-child(3){left:calc(706 * var(--u))}
.feature:nth-child(4){left:calc(1004 * var(--u))}
.feature:nth-child(5){left:calc(1281 * var(--u))}
.feature:not(:first-child)::before{content:"";position:absolute;left:calc(-75 * var(--u));top:0;bottom:0;width:calc(1.2 * var(--u));background:var(--line)}
.feature:nth-child(2)::before{left:calc(-75 * var(--u))}
.feature:nth-child(3)::before{left:calc(-75 * var(--u))}
.feature:nth-child(4)::before{left:calc(-74 * var(--u))}
.feature:nth-child(5)::before{left:calc(-75 * var(--u))}
.ico{display:block;width:calc(59 * var(--u));height:calc(59 * var(--u));margin:calc(-3 * var(--u)) 0 0 calc(-3 * var(--u));fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ico .dots{fill:var(--gold);stroke:none}
.feature h2{margin-top:calc(12 * var(--u));font-size:calc(16.8 * var(--u));font-weight:430;letter-spacing:.03em;text-transform:uppercase;color:#f3f4f6;white-space:nowrap}
.feature p{margin-top:calc(6 * var(--u));font-size:calc(18 * var(--u));line-height:calc(25 * var(--u));font-weight:310;color:#c0c5cc;white-space:nowrap}

/* ---------- light running along the building's steel contours ---------- */
.trace{position:absolute;left:0;top:0;width:calc(1536 * var(--u));height:calc(1024 * var(--u));pointer-events:none;mix-blend-mode:screen;overflow:visible}
.trace-glow path,.trace-core path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:150 1300;stroke-dashoffset:150;animation:trace-run 9s cubic-bezier(.45,.05,.4,1) infinite;animation-delay:calc(var(--d) + 3.1s)}
.trace-glow path{stroke:#f3a748;stroke-width:4.5;opacity:.95}
.trace-core path{stroke:#fff6e6;stroke-width:1.6}
.word-trace path{fill:none;stroke:#ffe2a0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes trace-run{
  0%{stroke-dashoffset:150;opacity:0}
  3%{opacity:1}
  22%{stroke-dashoffset:-1000;opacity:1}
  24%,100%{stroke-dashoffset:-1000;opacity:0}
}
@media (prefers-reduced-motion:reduce){.trace{display:none}}

/* ---------- smaller screens: same look, stacked ---------- */
@media (max-width:900px){
  :root{--u:1px}
  .page{height:auto;min-height:100vh;padding:calc(20px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px))}
  .hero-bg{background-position:64% 0;background-size:auto 820px;background-repeat:no-repeat}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,19,.55) 0%,rgba(7,14,19,.25) 30%,rgba(7,14,19,.85) 62%,var(--charcoal) 80%)}
  .stage{width:auto;height:auto}
  .hero-bg{left:0;width:100%;height:100%;transform:none;background-size:auto 820px;background-position:64% 0}
  .topbar,.hero,.scribble,.features,.brand,.nav{position:relative;inset:auto;left:auto;right:auto;top:auto}
  .topbar{height:auto;display:flex;flex-direction:column;gap:22px}
  .brand img{width:220px}
  .nav{height:auto;flex-wrap:wrap;gap:12px 26px}
  .nav a,.nav a:nth-child(2){margin:0;font-size:16px}.nav .btn-outline{width:auto;height:40px;padding:0 16px;font-size:14px;border-width:1.5px}
  .hero{width:auto;margin-top:170px}.eyebrow{font-size:13px;letter-spacing:.3em}
  .headline{font-size:clamp(40px,11vw,62px);line-height:1.05;white-space:normal}
  .lede{width:auto;max-width:34em;font-size:18px;line-height:1.55}
  .coming-soon{width:100%;max-width:330px;height:54px;font-size:18px}
  .signup{width:100%;max-width:429px;height:52px}
  .signup input{font-size:16px;padding:0 16px}.signup button{width:56px}
  .signup button svg{width:22px;height:22px}
  .scribble{display:none}
  .trace{display:none}
  .features{height:auto;margin-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:34px 22px}
  .feature{position:relative;left:auto!important;height:auto}
  .feature::before{display:none}
  .ico{width:44px;height:44px;margin:0}
  .feature h2{margin-top:14px;font-size:15px}.feature p{font-size:15px;line-height:1.5;white-space:normal}
  .feature p br{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ======================= About section =======================
   Same content frame as the home section (its text column to its
   nav button), laid out as a flowing grid so it never overlaps. */
.ab{
  --gold:#e3a14f;--ink:#f1f3f5;--text:#c9cdd2;--bg:#050f17;--hair:rgba(150,162,174,.22);
  --font:"Exo 2",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --t:max(calc(var(--lu) * .92), .86px);        /* type & spacing scale */
  position:relative;width:100%;font-family:var(--font);background:var(--bg);color:var(--ink)
}
.ab ol{list-style:none}
.ab :focus-visible{outline-color:var(--gold)}
.ab-in{position:relative;width:calc(1384 * var(--lu));margin-left:calc(50% - 685 * var(--lu))}
.ab-eyebrow{font-size:calc(13.5 * var(--t));font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* hero text */
.ab-hero{padding:calc(56 * var(--t)) 0 calc(44 * var(--t));border-bottom:1px solid var(--hair)}
.ab-hero h1{margin-top:0;white-space:nowrap;font-weight:260;font-size:calc(64 * var(--t));line-height:.92;letter-spacing:.036em;text-transform:uppercase;color:#f4f5f6}
.ab-hero h1 span{color:var(--gold)}
.ab-sub{margin-top:calc(10 * var(--t));font-size:calc(26 * var(--t));line-height:1.15;font-weight:270;letter-spacing:.035em;color:#dfe2e6}
.ab-rule{display:block;margin-top:calc(23 * var(--t));width:calc(59 * var(--t));height:2px;background:var(--gold)}
.ab-intro{margin-top:calc(22 * var(--t));font-size:calc(21 * var(--t));line-height:1.4;font-weight:300;letter-spacing:.025em;color:#d3d7dc}

/* journey */
.ab-journey{padding:calc(26 * var(--t)) 0 calc(30 * var(--t));border-bottom:1px solid var(--hair)}
.ab-journey .ab-in{display:grid;grid-template-columns:minmax(0,21%) minmax(0,1fr);column-gap:calc(36 * var(--t))}
.ab-journey h2{margin-top:calc(14 * var(--t));font-size:calc(28 * var(--t));line-height:1.13;font-weight:300;letter-spacing:.02em;color:#eef0f2}
.ab-steps{--imgh:calc(82 * var(--t));--gap:calc(48 * var(--t));position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);padding-top:calc(4 * var(--t))}
.ab-steps::before{content:"";position:absolute;left:0;right:0;top:calc(4 * var(--t) + var(--imgh) + 12 * var(--t));height:1px;background:linear-gradient(90deg,rgba(227,161,79,.55) 94%,rgba(227,161,79,.12))}
.step{position:relative;min-width:0}
.step img{display:block;width:100%;height:var(--imgh);object-fit:cover}
.step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--imgh) * .78);right:calc(var(--gap) / -2 - 4px);width:calc(9 * var(--t));height:calc(9 * var(--t));border-top:1.6px solid var(--gold);border-right:1.6px solid var(--gold);transform:rotate(45deg)}
.node{position:absolute;left:calc(4 * var(--t));top:calc(var(--imgh) + 12 * var(--t) - 21.5 * var(--t));width:calc(43 * var(--t));height:calc(43 * var(--t));border-radius:50%;border:1.5px solid var(--gold);background:#07121a;display:grid;place-items:center}
.node svg{width:64%;height:64%;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step h3{margin:calc(30 * var(--t)) 0 0 calc(54 * var(--t));font-size:calc(11.6 * var(--t));line-height:1.25;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#f0f2f4}
.step p{margin:calc(6 * var(--t)) 0 0 calc(4 * var(--t));font-size:calc(13.2 * var(--t));line-height:1.13;font-weight:350;letter-spacing:.015em;color:var(--text)}

/* why */
.ab-why{position:relative;padding:calc(14 * var(--t)) 0 calc(22 * var(--t));background:linear-gradient(90deg,#06111a 0%,#08131b 60%,#0b161e 100%);overflow:hidden}
.ab-why-bg{position:absolute;right:0;top:0;bottom:0;width:calc(480 * var(--lu));background:url(assets/about/why-bg.jpg) right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.ab-why .ab-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.35fr);align-items:start}
.ab-why-head{padding-right:calc(30 * var(--t));border-right:1.5px solid var(--gold);align-self:stretch}
.ab-why h2{margin-top:calc(4 * var(--t));font-size:calc(21.5 * var(--t));line-height:1.06;font-weight:330;letter-spacing:.03em;color:#eef0f2}
.ab-why-head p:not(.ab-eyebrow){margin-top:calc(4 * var(--t));font-size:calc(13.4 * var(--t));line-height:1.15;font-weight:350;letter-spacing:.012em;color:var(--text)}
.why-item{position:relative;margin-top:calc(22 * var(--t));padding:0 calc(22 * var(--t)) 0 calc(48 * var(--t))}
.why-item + .why-item::before{content:"";position:absolute;left:0;top:0;bottom:calc(-4 * var(--t));width:1px;background:var(--hair)}
.why-item + .why-item{padding-left:calc(40 * var(--t))}
.why-ico{display:block;width:calc(46 * var(--t));height:calc(46 * var(--t));margin-left:calc(-2 * var(--t));fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{margin-top:calc(11 * var(--t));font-size:calc(13 * var(--t));font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.why-item p{margin-top:calc(6 * var(--t));font-size:calc(13 * var(--t));line-height:1.18;font-weight:350;letter-spacing:.015em;color:var(--text)}
.why-quote{position:relative;margin-top:calc(14 * var(--t));padding-left:calc(70 * var(--t))}
.qmark{position:absolute;left:0;top:calc(-2 * var(--t));width:calc(40 * var(--t));height:calc(30 * var(--t));fill:var(--gold)}
.why-quote blockquote{font-style:italic;font-weight:300;font-size:calc(17.5 * var(--t));line-height:1.22;letter-spacing:.015em;color:#e4e7eb}
.why-quote figcaption{display:flex;align-items:center;gap:calc(17 * var(--t));margin-top:calc(12 * var(--t));font-size:calc(11 * var(--t));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#e8eaed}
.why-quote figcaption span{width:calc(55 * var(--t));height:1.5px;background:var(--gold)}

/* closing tagline, spans the same frame */
.ab-tagline{display:flex;align-items:flex-start;padding:calc(18 * var(--t)) calc(50% - 699 * var(--lu)) calc(30 * var(--t)) calc(50% - 699 * var(--lu));background:var(--bg);border-top:1px solid var(--hair)}
.ab-tagline .rule{flex:1;height:1px;margin-top:calc(16 * var(--t));background:rgba(200,206,214,.32)}
.ab-tagline p{position:relative;padding:calc(13 * var(--t)) calc(16 * var(--t)) 0;font-family:"Outfit",var(--font);font-size:calc(13.5 * var(--t));font-weight:400;letter-spacing:.345em;text-indent:.345em;text-transform:uppercase;color:#9ea4ac;white-space:nowrap}
.ab-tagline p::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(200,206,214,.32)}

/* let the small text columns wrap naturally instead of fixed breaks */
.step p br,.why-item p br,.ab-why-head p br,.why-quote blockquote br,.ab-journey h2 br{display:none}
.step h3,.why-item h3,.ab-journey h2{text-wrap:balance}
.step p,.why-item p,.ab-why-head p,.why-quote blockquote{text-wrap:pretty}

/* tablet & phone: stack */
@media (max-width:900px){
  .ab{--t:1px}
  .ab-in{width:auto;margin:0 22px}
  .ab br{display:none}
  .ab-hero{padding:44px 0 36px}
  .ab-hero h1{font-size:clamp(34px,9vw,54px);line-height:1.04;white-space:normal}
  .ab-sub{font-size:20px;line-height:1.35}.ab-intro{font-size:17px;line-height:1.55}
  .ab-journey{padding:38px 0}
  .ab-journey .ab-in{display:block}
  .ab-steps{--imgh:130px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));row-gap:34px}
  .ab-steps::before,.step::after{display:none}
  .node{width:40px;height:40px;top:calc(130px - 20px)}
  .step h3{margin:30px 0 0;font-size:12px}.step p{margin:6px 0 0;font-size:14px;line-height:1.5}
  .ab-why{padding:38px 0 44px}
  .ab-why-bg{width:100%;opacity:.4}
  .ab-why .ab-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-why-head{border:0;padding:0}
  .ab-why h2{font-size:21px;line-height:1.25}.ab-why-head p:not(.ab-eyebrow){font-size:14px;line-height:1.55}
  .why-item,.why-item + .why-item{margin:0;padding:0}
  .why-item + .why-item::before{display:none}
  .why-item p{font-size:14px;line-height:1.5}
  .why-quote{margin:0;padding-left:56px}.qmark{width:36px;height:27px}
  .why-quote blockquote{font-size:17px;line-height:1.45}
  .ab-tagline{padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px))}
  .ab-tagline .rule{min-width:16px}
  .ab-tagline p{white-space:normal;text-align:center;font-size:10.5px;letter-spacing:.28em;text-indent:.28em;padding:10px 10px 0}
}