/* ACM Projects — brand tokens */
:root{
  --green:#123C2E;
  --cream:#F7F4EB;
  --char:#202020;
  --deep:#071C15;
  --emerald:#8DB89A;
  --mint:#CFE0D2;
  --cream-70:rgba(247,244,235,.72);
  --cream-50:rgba(247,244,235,.5);
  --cream-14:rgba(247,244,235,.14);
  --char-60:rgba(32,32,32,.68);
  --line-l:rgba(32,32,32,.14);
  --f-sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px;
  --gut:clamp(20px,4.5vw,64px);
  --hdr:92px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--deep);color:var(--cream);font:400 1rem/1.65 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
section[id],.svc[id]{scroll-margin-top:72px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--cream);color:var(--deep);padding:10px 14px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
.display{font:800 clamp(3rem,6.7vw,6.6rem)/.88 var(--f-sans);letter-spacing:-.045em;color:var(--cream)}
.h2{font:700 clamp(2.1rem,4.4vw,3.9rem)/1.02 var(--f-sans);letter-spacing:-.035em;text-wrap:balance}
.h2 em,.serif{font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.h2 em{font-size:1.08em}
.eyebrow{font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-bottom:22px}
.lede{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;max-width:56ch}
.lede.serif{font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.3;font-style:normal}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px;border-radius:8px;font:600 .76rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-line{border:1px solid rgba(247,244,235,.7);color:var(--cream);background:rgba(7,28,21,.25);backdrop-filter:blur(6px)}
.btn-line:hover{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.btn-solid{border:1px solid var(--cream);background:var(--cream);color:var(--deep)}
.btn-solid:hover{background:transparent;color:var(--cream)}
.btn-lg{min-height:56px;padding:0 28px}
.cream .btn-line{border-color:var(--char);color:var(--char);background:transparent}
.cream .btn-line:hover{background:var(--char);color:var(--cream)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s var(--ease),border-color .4s,height .4s}
.hdr-in{height:var(--hdr);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 var(--gut);max-width:1480px;margin:0 auto;transition:height .4s var(--ease)}
.hdr.scrolled{background:rgba(7,28,21,.82);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--cream-14)}
.hdr.scrolled .hdr-in{height:70px}
.hdr-left{display:flex;align-items:center;gap:36px}
.brandtext{font:700 .9rem/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:14px;font:500 .74rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--cream-70);transition:color .25s;padding:8px 0;white-space:nowrap}
.nav a:hover{color:var(--cream)}
.nav span{color:var(--cream-50)}
.hdr-logo{justify-self:center;display:block}
.hdr-logo img{height:76px;width:auto;transition:height .4s var(--ease)}
.hdr.scrolled .hdr-logo img{height:54px}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:28px}
.nav-sec{gap:24px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--cream-14);border-radius:8px;background:transparent;color:var(--cream);place-items:center;cursor:pointer}
.burger i,.burger i::before,.burger i::after{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform .3s var(--ease),background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-6px}.burger i::after{top:6px}
.menu-open .burger i{background:transparent}
.menu-open .burger i::before{top:0;transform:rotate(45deg)}
.menu-open .burger i::after{top:0;transform:rotate(-45deg)}
@media (max-width:1180px){.nav-sec{display:none}}
@media (min-width:901px) and (max-width:1100px){.hdr-left .nav{display:none}}
@media (max-width:900px){
  :root{--hdr:72px}
  .hdr-in{grid-template-columns:46px 1fr 46px}
  .hdr-left .nav,.hdr-right .btn,.brandtext{display:none}
  .hdr-logo{grid-column:2;justify-self:center}
  .hdr-left{grid-column:1}
  .hdr-logo img,.hdr.scrolled .hdr-logo img{height:48px}
  .hdr-right{grid-column:3}
  .burger{display:grid}
}
.mnav{position:fixed;inset:0;z-index:45;background:var(--deep);padding:calc(var(--hdr) + 28px) var(--gut) 32px;display:flex;flex-direction:column;gap:32px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu-open .mnav{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.mnav nav{display:grid;border-top:1px solid var(--cream-14)}
.mnav nav a{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--cream-14);font:700 2rem/1 var(--f-sans);letter-spacing:-.03em;text-decoration:none}
.mnav nav a span{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;color:var(--emerald)}
.mnav .btn{align-self:stretch}
.mnav-foot{margin-top:auto;font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-50)}
body.lock{overflow:hidden}

/* ---------- hero: laptop → Prescott landscape ---------- */
/* The section is taller than the viewport only when JS + motion are available (html.has-scroll);
   the stage stays pinned (sticky) while the visitor scrolls through it. Scrolling is never blocked. */
.hero{position:relative;background:var(--deep)}
.has-scroll .hero{height:calc(100svh + var(--hero-scroll,110vh))}
.hero-stage{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate}
.has-scroll .hero-stage{position:sticky;top:0}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(55% 45% at 50% 46%,rgba(255,214,150,.10),transparent 70%),
  radial-gradient(80% 70% at 50% 40%,#123C2E 0%,#0C2A1F 45%,var(--deep) 80%)}
.hero-bg::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(4,17,12,.55))}
.hero-grid{position:relative;z-index:1;max-width:1480px;height:100%;margin:0 auto;padding:calc(var(--hdr) + 24px) var(--gut) 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:1fr auto 1fr auto;align-items:center;column-gap:clamp(12px,2vw,32px)}
.hero-left{grid-column:1;grid-row:2;align-self:start;margin-top:-5vh;position:relative;z-index:2}
.hero-right{grid-column:3;grid-row:2;align-self:end;text-align:right;margin-bottom:-4vh;position:relative;z-index:2}
/* desktop: with the larger laptop, the right group sits beside the lid (clear of the wider base) and its
   supporting line wraps to the headline's width so it never reaches in toward the screen */
@media (min-width:901px){
  .hero-right{margin-bottom:calc(clamp(12px,1.8vw,22px) + 18px)}
  .hero-right .hero-sub{max-width:calc(3.47 * clamp(3rem,6.7vw,6.6rem));margin-left:auto}
}
.hero-sub{margin-top:18px;font-size:clamp(1rem,1.25vw,1.15rem);color:var(--cream)}
.hero-copy{will-change:opacity,transform}
/* scroll choreography: each block enlarges from its inner edge, so growth carries it outward */
.has-scroll .hero-left{transform-origin:100% 50%}
.has-scroll .hero-right{transform-origin:0% 50%}
.hero-cta{grid-column:1/-1;grid-row:3;justify-self:center;align-self:start;margin-top:40px}

/* laptop (drawn in CSS so it stays crisp at any scale) */
/* laptop ~20% larger than the original 112%-of-column size, capped so the lid always keeps ~28px clear of the
   headline text (text width ≈ 3.47 × the display font size), and centred on the middle column */
.laptop{--lap-w:min(134.4%,936px,calc((min(50vw,740px) - var(--gut) - 3.47 * clamp(3rem,6.7vw,6.6rem) - 28px) * 2 / .87));grid-column:2;grid-row:2;position:relative;width:var(--lap-w);margin-left:calc((100% - var(--lap-w)) / 2);max-width:none;justify-self:start;transform-origin:50% 50%;will-change:transform}
.lid{position:relative;margin:0 6.5%;padding:2% 2% 2.6%;background:linear-gradient(#141617,#0B0C0D);border-radius:18px 18px 6px 6px;box-shadow:0 0 0 1.5px #2b2e30 inset,0 50px 90px -40px rgba(0,0,0,.9)}
.cam{position:absolute;left:50%;top:0;transform:translateX(-50%);width:12%;height:3%;min-height:8px;background:#0B0C0D;border-radius:0 0 8px 8px;z-index:2}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#0d1c16}
.screen-img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* decorative desktop on the laptop screen: 1em = 1% of the screen width, so it scales with the display */
.screen{container-type:inline-size}
.desk{position:absolute;inset:0;font-size:1cqw;color:#fff;pointer-events:none;user-select:none;font-family:var(--f-sans);line-height:1}
.desk-bar{position:absolute;left:0;right:0;top:0;height:2.5em;padding:0 1.6em;display:flex;align-items:center;justify-content:space-between;font-size:1em;background:rgba(10,22,17,.32);backdrop-filter:blur(.8em) saturate(1.1);-webkit-backdrop-filter:blur(.8em) saturate(1.1);box-shadow:0 .06em 0 rgba(255,255,255,.06)}
.desk-bar-l,.desk-bar-r{display:flex;align-items:center;gap:1.5em;font-size:1.22em;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.88)}
.desk-app{font-weight:700;color:#fff}
.desk-bar-r svg{height:.95em;width:auto}
.desk-bar-r svg+svg{height:.95em}
.desk-icons{list-style:none;margin:0;padding:0;position:absolute;top:4.6em;right:2em;display:flex;flex-direction:column;align-items:center;gap:1.1em}
.desk-icons li{display:flex;flex-direction:column;align-items:center;width:10em}
/* folders are real links: icon + label form one target; the ::before extends the hit area without changing the look */
.fold-link{position:relative;display:flex;flex-direction:column;align-items:center;padding:.5em .6em .45em;border-radius:.9em;color:#fff;text-decoration:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,box-shadow .2s ease}
.fold-link::before{content:"";position:absolute;inset:-.55em -1.8em}
.fold-link span{padding:.15em .45em;border-radius:.4em;transition:background-color .2s ease}
.fold-link:hover{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 .08em rgba(255,255,255,.18)}
.fold-link:hover span{background:rgba(10,22,17,.28)}
.fold-link:focus{outline:none}
.fold-link:focus-visible{background:rgba(255,255,255,.16);box-shadow:0 0 0 .22em var(--mint),0 0 0 .4em rgba(7,28,21,.55)}
.fold-link:focus-visible span{background:#3E6B53}
.fold-link:active .fold{transform:scale(.96)}
.fold{transition:transform .15s ease}
.fold{width:6.4em;height:5em;filter:drop-shadow(0 .35em .5em rgba(0,0,0,.35))}
.desk-icons span{margin-top:.55em;font-size:1.3em;font-weight:500;letter-spacing:.01em;text-shadow:0 .08em .3em rgba(0,0,0,.75),0 0 .1em rgba(0,0,0,.6);white-space:nowrap}
.dock{position:absolute;left:50%;bottom:1.1em;transform:translateX(-50%);display:flex;align-items:center;gap:.9em;padding:.75em .9em;border-radius:1.6em;background:rgba(235,240,236,.16);backdrop-filter:blur(1.2em) saturate(1.2);-webkit-backdrop-filter:blur(1.2em) saturate(1.2);border:.08em solid rgba(255,255,255,.2);box-shadow:0 .8em 2em -.6em rgba(0,0,0,.55)}
.d-ic{position:relative;display:grid;place-items:center;width:4.4em;height:4.4em;border-radius:1.05em;font-style:normal;color:#fff;box-shadow:0 .25em .5em rgba(0,0,0,.28),inset 0 .06em 0 rgba(255,255,255,.25)}
.d-ic svg{width:62%;height:62%}
.d-finder{background:linear-gradient(#5E8C70,#2F5A42)}
.d-web{background:linear-gradient(#4A6B78,#24404A)}
.d-mail{background:linear-gradient(#7C8F86,#4A5A53)}
.d-code{background:linear-gradient(#2C2F31,#141617)}
.d-cal{background:linear-gradient(#FBF8F0,#E7E1D2);color:#1C2A23;display:flex;flex-direction:column;justify-content:center;gap:.15em}
.d-cal b{font-size:.85em;font-weight:700;letter-spacing:.06em;color:#8A3B2E}
.d-cal em{font-style:normal;font-size:2em;font-weight:500;line-height:.9}
.d-acm{background:linear-gradient(#1A4D3A,#0B2A1E)}
.d-acm img{width:3.1em;height:auto;display:block}
.d-acm::after{content:"";position:absolute;left:50%;bottom:-.55em;width:.32em;height:.32em;margin-left:-.16em;border-radius:50%;background:rgba(255,255,255,.75)}
.d-sep{width:.08em;height:3.6em;background:rgba(255,255,255,.28);margin:0 .1em}
/* copy of the desktop on the zoom layer: fixed 1000 x 625 design box, scaled onto the screen rect by JS */
/* small screens: larger folders so each one is a comfortable tap target (screen copy via container query, zoom copy via .compact) */
@container (max-width:440px){.desk-icons{font-size:1.55em}}
.scene .desk.compact .desk-icons{font-size:1.55em}
.scene .desk-nav a{pointer-events:auto}
.scene .desk img{position:static;width:3.1em;height:auto;transform:none;will-change:auto}
.scene .desk{inset:auto;left:0;top:0;width:1000px;height:625px;font-size:10px;transform-origin:0 0}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%);pointer-events:none}
.base{position:relative;height:clamp(12px,1.8vw,22px);background:linear-gradient(180deg,#ECEEEF 0%,#CBD0D3 42%,#8C9296 100%);border-radius:2px 2px 16px 16px}
.base span{position:absolute;left:50%;top:0;transform:translateX(-50%);width:16%;height:38%;background:linear-gradient(#A9AEB2,#C7CCD0);border-radius:0 0 8px 8px}
.shadow{position:absolute;left:4%;right:4%;bottom:-26px;height:40px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent);filter:blur(8px);z-index:-1}

/* full-screen landscape layer, clipped to the laptop screen by JS */
.scene{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;visibility:hidden}
.has-scroll .scene{visibility:visible}
.scene img{position:absolute;left:0;top:0;width:2400px;height:1350px;max-width:none;transform-origin:0 0;will-change:transform}
.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,21,.45) 0%,rgba(7,28,21,0) 28%,rgba(7,28,21,0) 55%,rgba(7,28,21,.78) 100%);opacity:var(--end,0)}
.scene-credit{position:absolute;right:16px;bottom:12px;font:500 .62rem/1.3 var(--f-mono);letter-spacing:.06em;color:rgba(247,244,235,.7);text-decoration:none;opacity:var(--end,0);pointer-events:auto}
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);width:22px;height:36px;border:1px solid var(--cream-50);border-radius:12px}
.scroll-cue span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--cream);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;align-content:center;row-gap:clamp(14px,2.6vh,26px);padding:calc(var(--hdr) + 12px) var(--gut) 40px}
  .hero-left,.hero-right,.laptop,.hero-cta{grid-column:1;grid-row:auto;margin:0}
  .hero-left{order:1}
  .laptop{order:2;width:100%;max-width:560px;margin:0 auto}
  .hero-right{order:3}
  .hero-cta{order:4;justify-self:stretch;margin-top:4px}
  .hero-cta .btn{width:100%}
  .display{font-size:clamp(3rem,15vw,5.4rem)}
  .hero-sub{margin-top:10px}
  .scroll-cue{display:none}
}
@media (max-width:900px) and (max-height:700px){.display{font-size:clamp(2.6rem,12vw,4rem)}.hero-sub{font-size:.95rem}}
/* ---------- desktop hero composition: staggered, laptop centred ----------
   Headline high on the left (near the laptop's upper-left corner), laptop in the centre, headline low on the right
   (beside its lower-right corner). Positions are derived from the laptop width (--lapw) and the headline width
   (~3.72 x the display font size, Geist 800), so the stagger holds at every desktop size. */
@media (min-width:901px){
  .hero-grid{
    --padT:calc(var(--hdr) + 8px); --padB:40px;
    --fs:clamp(3rem,6.7vw,6.6rem);              /* .display font size */
    --hw:calc(3.72 * var(--fs));                /* headline block width */
    --lapw:min(51vw,712px,calc((100svh - 230px) * 1.6));
    --lh:calc(var(--lapw) * .6);                /* laptop height incl. base */
    --cy:calc(50% + (var(--padT) - var(--padB)) / 2);   /* laptop centre line */
    display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;
    padding:var(--padT) var(--gut) var(--padB)}
  .laptop{grid-column:1;grid-row:1;width:var(--lapw);max-width:none;margin:0;justify-self:center;align-self:center}
  .hero-left,.hero-right{position:absolute;z-index:4;width:var(--hw);margin:0}
  /* left block: its right edge reaches ~8% in from the laptop's left edge, top a little above the laptop */
  .hero-left{grid-column:auto;grid-row:auto;text-align:left;
    left:max(var(--gut),calc(50% - var(--lapw) * .42 - var(--hw)));
    top:calc(var(--cy) - var(--lh) / 2 - var(--lapw) * .06)}
  /* right block: its left edge sits ~8% in from the laptop's right edge, bottom just below the laptop's base */
  .hero-right{grid-column:auto;grid-row:auto;text-align:right;
    right:max(var(--gut),calc(50% - var(--lapw) * .42 - var(--hw)));
    bottom:calc(100% - var(--cy) - var(--lh) / 2 - var(--lapw) * .03)}
  .hero-sub{margin-top:14px;font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.5;text-wrap:balance}
  .hero-right .hero-sub{max-width:none;margin-left:0}
  /* headlines sit in front of the screen layer, so no letter is ever covered by the laptop */
  .has-scroll .hero-grid{z-index:auto}
  .hero-left,.hero-right{pointer-events:none}   /* text only: never blocks the desktop folders underneath */
}


/* ---------- continuous flow after the hero ----------
   One fixed Prescott backdrop (framed by JS to match the last frame of the laptop zoom) sits behind every
   section; sections are transparent, readability comes from a dark-green dim that deepens after the intro. */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--deep);pointer-events:none}
.backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.js-bg .backdrop img{inset:auto;left:0;top:0;width:2400px;height:1350px;max-width:none;object-fit:fill;transform-origin:0 0}
.backdrop-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,21,.45) 0%,rgba(7,28,21,0) 28%,rgba(7,28,21,0) 55%,rgba(7,28,21,.78) 100%)}
.backdrop-dim{position:absolute;inset:0;opacity:var(--dim,.78);background:
  radial-gradient(120% 90% at 50% 40%,rgba(7,28,21,.78),rgba(7,28,21,.93) 70%),linear-gradient(rgba(7,28,21,.2),rgba(7,28,21,.2))}
/* once the zoom has finished, the hero's own layers step aside and the identical fixed backdrop shows through */
.hero.is-through{background:transparent}
.hero.is-through .hero-bg,.hero.is-through .laptop,.hero.is-through #sceneImg,.hero.is-through .scene-shade{visibility:hidden}

.flow{position:relative;padding:clamp(96px,10vw,144px) 0}
.flow-head{max-width:880px;margin-bottom:clamp(48px,6vw,84px)}
.flow-head.center{margin-left:auto;margin-right:auto;text-align:center}
.flow-head.center .lede{margin-left:auto;margin-right:auto}
.flow-head .lede{margin-top:24px;color:var(--cream-70)}
.flow-head.split{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px}
.flow-head.split .lede{margin:0;max-width:36ch}
.kicker{font:500 .74rem/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-bottom:22px}
.kicker span{color:var(--cream-50);margin:0 .35em}
.mega{font:700 clamp(3rem,7.4vw,6.7rem)/.96 var(--f-sans);letter-spacing:-.045em;max-width:12.5ch;text-wrap:balance}
.h2{font:700 clamp(2.3rem,5vw,4.5rem)/1 var(--f-sans);letter-spacing:-.04em;text-wrap:balance}
.h2 .soft{display:block;margin-top:.35em;font-size:.48em;line-height:1.12;letter-spacing:-.02em;color:var(--mint)}
.h3{font:700 clamp(1.7rem,2.6vw,2.3rem)/1.05 var(--f-sans);letter-spacing:-.03em}
.num{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;color:var(--emerald)}
.glass{background:rgba(7,28,21,.52);border:1px solid rgba(247,244,235,.12);border-radius:12px;backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 30px 80px -50px rgba(0,0,0,.8)}

/* intro */
.intro{padding-top:clamp(96px,10vw,144px);padding-bottom:clamp(80px,8vw,120px)}
.has-scroll .intro{margin-top:-24vh;padding-top:12vh}
.intro .mega{margin-top:4px}
.intro-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 64px;margin-top:clamp(28px,3.5vw,44px)}
.intro .lede{max-width:58ch;color:var(--cream);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.intro-cta{display:flex;flex-wrap:wrap;gap:12px}
.ticker{margin-top:clamp(64px,8vw,104px);border-top:1px solid var(--cream-14);border-bottom:1px solid var(--cream-14);overflow:hidden;background:rgba(7,28,21,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker span{padding:20px 28px;font:500 .78rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-70);white-space:nowrap}
.ticker span::after{content:"";display:inline-block;width:5px;height:5px;margin-left:56px;border-radius:50%;background:var(--emerald);vertical-align:middle}
@keyframes ticker{to{transform:translateX(-50%)}}

/* services: three glass cards, gently stepped like a rising path */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.svc{padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;min-height:100%}
@media (min-width:1001px){.svc:nth-child(2){margin-top:56px}.svc:nth-child(3){margin-top:112px}}
.svc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px}
.ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--cream-14);background:rgba(247,244,235,.04);color:var(--mint)}
.svc h3{font:700 clamp(1.35rem,1.8vw,1.6rem)/1.12 var(--f-sans);letter-spacing:-.02em}
.svc p{margin-top:14px;color:var(--cream-70);font-size:.98rem}
.svc ul{list-style:none;margin:0;padding:26px 0 0;display:grid;gap:9px;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.svc li::before{content:"+ ";color:var(--emerald)}
.svc{transition:border-color .3s,background-color .3s,opacity .9s var(--ease),transform .9s var(--ease)}
.svc:hover{border-color:rgba(207,224,210,.32);background-color:rgba(7,28,21,.62)}
:target.svc,.svc:focus{outline:none}

/* how it works together */
.sys-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.sys-text p{color:var(--cream-70);font-size:clamp(1rem,1.2vw,1.1rem);max-width:54ch}
.sys-text p+p{margin-top:18px}
.chain{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);position:relative}
.chain::before{content:"";position:absolute;left:4%;right:4%;top:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(207,224,210,.4) 12%,rgba(207,224,210,.4) 88%,transparent)}
.chain li{position:relative;padding:28px 26px 30px}
.chain .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(207,224,210,.35);background:var(--deep);font-size:.68rem}
.chain h3{margin-top:26px;font:700 1.4rem/1.1 var(--f-sans);letter-spacing:-.02em}
.chain p{margin-top:10px;color:var(--cream-70);font-size:.95rem}
.chain-note{display:flex;gap:14px;align-items:flex-start;margin-top:36px;max-width:72ch;color:var(--cream-70);font-size:.98rem}
.chain-note .dot{flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--emerald)}

/* work grid */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);align-items:start}
@media (min-width:1001px){.work:nth-child(2){margin-top:48px}.work:nth-child(3){margin-top:96px}}
.work{overflow:hidden;transition:border-color .3s,transform .5s var(--ease),opacity .9s var(--ease)}
.work:hover{border-color:rgba(207,224,210,.32)}
.work-media{position:relative;aspect-ratio:16/11;overflow:hidden;border-bottom:1px solid rgba(247,244,235,.1);display:grid;place-items:center}
.work-media.ngp{background:radial-gradient(90% 90% at 30% 20%,#1d4a39,#0b241b)}
.work-media.ngp .browser{position:absolute;left:8%;top:12%;width:78%}
.browser{border-radius:8px;overflow:hidden;background:#0d1512;border:1px solid var(--cream-14);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.browser .bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;background:#101a16;border-bottom:1px solid var(--cream-14)}
.browser .bar i{width:6px;height:6px;border-radius:50%;background:rgba(247,244,235,.2)}
.browser .bar span{margin-left:8px;padding:3px 8px;border-radius:4px;background:rgba(247,244,235,.06);font:500 .55rem/1 var(--f-mono);letter-spacing:.04em;color:var(--cream-50)}
.browser img{width:100%;height:auto}
.phone{position:absolute;right:7%;bottom:-6%;width:23%;padding:4px;border-radius:16px;background:#0b0c0d;box-shadow:0 0 0 1px #2a2d2f inset,0 24px 40px -16px rgba(0,0,0,.9)}
.phone img{border-radius:12px;width:100%;height:auto}
.work-media.usplus{background:radial-gradient(80% 80% at 50% 35%,#FFFFFF,#F3EEE6)}
.app-logo{width:46%;height:auto;filter:drop-shadow(0 18px 30px rgba(27,35,82,.18))}
.app-icon{width:auto;height:66%;max-width:80%;object-fit:contain}
.work-media.becoming{background:radial-gradient(90% 90% at 70% 20%,#2a5a46,#0e2c21 70%)}
.app-word{font:600 clamp(2rem,3.2vw,2.9rem)/1 var(--f-serif);font-style:italic;letter-spacing:-.01em;color:var(--cream)}
.app-word span{font-family:var(--f-sans);font-style:normal;font-weight:700;color:var(--emerald);margin-left:.05em}
.work-body{padding:24px 26px 28px}
.chip{display:inline-block;padding:6px 10px;border:1px solid rgba(207,224,210,.28);border-radius:999px;font:500 .64rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.work h3{margin-top:16px;font:700 1.55rem/1.08 var(--f-sans);letter-spacing:-.025em}
.work-cat{margin-top:8px;font:500 .7rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-50)}
.work-cat span{margin:0 .3em}
.work-desc{margin-top:14px;color:var(--cream-70);font-size:.95rem}
.link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:600 .74rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--cream-50);transition:border-color .3s}
.link:hover{border-color:var(--cream)}

/* process: zig-zag glass rows */
.steps{list-style:none;margin:0 auto;padding:0;display:grid;gap:18px;max-width:1040px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);align-items:center;padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,36px);width:86%}
.steps li:nth-child(even){margin-left:14%}
.step-n{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid rgba(207,224,210,.3);background:rgba(247,244,235,.04);font:500 .78rem/1 var(--f-mono);letter-spacing:.1em;color:var(--mint)}
.steps h3{font:700 clamp(1.3rem,1.8vw,1.6rem)/1.1 var(--f-sans);letter-spacing:-.02em}
.steps p{margin-top:8px;color:var(--cream-70);font-size:.98rem;max-width:68ch}

/* about + trust + faq */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:center}
.about-mark{position:relative;margin:0;aspect-ratio:4/5;display:grid;place-items:center;background:var(--green);border-radius:12px;overflow:hidden;border:1px solid rgba(247,244,235,.12)}
.about-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.about-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,60,46,.55),rgba(7,28,21,.82))}
.about-mark::before{content:"";position:absolute;inset:18px;z-index:2;border:1px solid rgba(247,244,235,.22);border-radius:6px}
.about-mono{position:relative;z-index:2;width:58%;height:auto}
.about-place{position:absolute;z-index:2;left:0;right:0;bottom:36px;text-align:center;font:500 .72rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-70)}
.about-copy .lede{margin-top:26px;color:var(--cream)}
.about-copy p:not(.kicker):not(.lede){margin-top:18px;color:var(--cream-70);max-width:58ch}
.trust{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.trust li{padding:24px 24px 26px}
.trust .kicker{display:block;margin-bottom:12px}
.trust p{color:var(--cream);font-size:1rem;line-height:1.5}
.faq-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:clamp(40px,6vw,96px);align-items:start;margin-top:clamp(96px,10vw,144px);scroll-margin-top:72px}
.faq-head{position:sticky;top:120px}
.faq-head .lede{margin-top:18px;color:var(--cream-70)}
.faq{border-top:1px solid rgba(247,244,235,.3)}
.faq details{border-bottom:1px solid var(--cream-14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:600 clamp(1.05rem,1.4vw,1.18rem)/1.35 var(--f-sans);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:14px;height:14px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1.5px;background:var(--emerald);transition:transform .3s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details div{padding:0 0 24px;color:var(--cream-70);max-width:62ch}

/* inquiry: one command panel */
.inquiry{padding-bottom:clamp(80px,8vw,120px)}
.inq-panel{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start;padding:clamp(28px,4.5vw,64px);background:rgba(7,28,21,.6)}
.inq-copy .lede{margin-top:24px;color:var(--cream-70)}
.inq-points{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;font:500 .76rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-70)}
.inq-points li{display:flex;gap:12px}
.inq-points li::before{content:"";flex:none;width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--emerald)}
.form{position:relative;display:grid;gap:18px;padding:clamp(22px,3vw,36px);border:1px solid var(--cream-14);border-radius:10px;background:rgba(4,17,12,.55)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.fld>span,.fld legend{font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-70);padding:0;margin-bottom:8px}
.fld input,.fld textarea{width:100%;padding:14px 16px;border:1px solid var(--cream-14);border-radius:8px;background:rgba(247,244,235,.04);color:var(--cream);font:400 1rem/1.4 var(--f-sans);transition:border-color .25s,background .25s}
.fld textarea{resize:vertical;min-height:130px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--mint);background:rgba(247,244,235,.07)}
.fld em{display:none;font-style:normal;font-size:.82rem;color:#F2B8A8}
.fld.bad input,.fld.bad textarea{border-color:#F2B8A8}
.fld.bad em{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chips label{cursor:pointer}
.chips label{position:relative}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips label span{display:inline-block;padding:10px 14px;border:1px solid var(--cream-14);border-radius:999px;font-size:.88rem;color:var(--cream-70);transition:all .25s}
.chips input:checked+span{background:var(--cream);border-color:var(--cream);color:var(--deep)}
.chips input:focus-visible+span{outline:2px solid var(--mint);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .btn{justify-self:start;margin-top:6px}
.form .btn[disabled]{opacity:.6;cursor:progress}
.form-status{min-height:1.4em;font-size:.92rem;color:var(--cream-70)}
.form-status.ok{color:var(--mint)}
.form-status.warn{color:#F3D9A4}

/* footer */
.ftr{position:relative;padding:clamp(64px,7vw,96px) 0 36px;background:linear-gradient(rgba(4,17,12,.55),rgba(4,17,12,.92));border-top:1px solid var(--cream-14)}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--cream-14)}
.ftr-statement{font:700 clamp(1.6rem,2.8vw,2.5rem)/1.12 var(--f-sans);letter-spacing:-.03em;max-width:24ch;text-wrap:balance}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding:clamp(40px,5vw,56px) 0}
.ftr-logo img{height:38px;width:auto}
.ftr-brand p{margin-top:20px;color:var(--cream-70);max-width:40ch;font-size:.95rem}
.ftr-col{display:grid;align-content:start;gap:12px}
.ftr-col .kicker{margin-bottom:6px}
.ftr-col a{text-decoration:none;color:var(--cream-70);font-size:.95rem;width:max-content}
.ftr-col a:hover{color:var(--cream)}
.ftr-base{display:grid;grid-template-columns:auto 1fr;gap:16px 40px;padding-top:24px;border-top:1px solid var(--cream-14)}
.ftr-copy{font:500 .72rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-50)}
.ftr-credits{font-size:.74rem;line-height:1.6;color:var(--cream-50);justify-self:end;max-width:90ch;text-align:right}
.ftr-credits a{color:var(--cream-70)}

/* section map (desktop): appears once the hero is done */
.rail{position:fixed;left:22px;top:50%;z-index:40;transform:translate(-8px,-50%);display:grid;gap:10px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.past-hero .rail{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rail a{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(247,244,235,.16);background:rgba(7,28,21,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 .62rem/1 var(--f-mono);letter-spacing:.06em;color:var(--cream-50);text-decoration:none;transition:border-color .3s,color .3s,background-color .3s}
.rail a:hover,.rail a.on{color:var(--cream);border-color:var(--emerald)}
.rail a.on{background:rgba(18,60,46,.85)}
.rail a span{position:absolute;left:42px;top:50%;transform:translate(-4px,-50%);padding:6px 10px;border-radius:6px;border:1px solid rgba(247,244,235,.14);background:rgba(7,28,21,.8);font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.rail a.on span,.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media (max-width:1279px){.rail{display:none}}

/* responsive */
@media (max-width:1000px){
  .svc-grid,.work-grid{grid-template-columns:1fr 1fr}
  .chain,.trust{grid-template-columns:1fr 1fr}
  .chain::before{display:none}
  .sys-grid,.about-grid,.faq-grid,.inq-panel{grid-template-columns:1fr}
  .faq-head{position:static}
  .about-mark{aspect-ratio:16/11;order:2}
  .steps li,.steps li:nth-child(even){width:100%;margin-left:0}
}
@media (max-width:700px){
  .svc-grid,.work-grid,.chain,.trust{grid-template-columns:1fr}
  .has-scroll .intro{margin-top:-14vh;padding-top:8vh}
  .intro-cta{width:100%}.intro-cta .btn{flex:1 1 auto}
  .steps li{grid-template-columns:1fr;gap:16px}
  .step-n{width:46px;height:46px}
  .ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}
  .ftr-base{grid-template-columns:1fr}.ftr-credits{justify-self:start;text-align:left}
  .row{grid-template-columns:1fr}.form .btn{justify-self:stretch}
}

/* reveal motion: restrained fade + rise, staggered within a group */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.pending{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv.pending{opacity:1;transform:none;transition:none}
  .scroll-cue span,.ticker-track{animation:none}
}