/* Mr. Comet — shared site styles (all pages except legal/404, which use legal.css).
   Self-hosted fonts, no third-party requests. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   Mr. Comet — tokens
   ============================================================ */
:root{
  --void:#0B0A12;        /* deep space  */
  --void-2:#131120;      /* raised space surface */
  --ink:#17151C;         /* warm near-black text */
  --ink-soft:#5A5550;    /* muted body text on paper */
  --paper:#F6F3EE;       /* warm white */
  --paper-2:#EFEAE2;     /* soft grey-beige */
  --line:#E2DBD0;        /* hairline on paper */
  --line-dark:#26232F;   /* hairline in space */

  --comet:#FF6B35;       /* hot ember core — the one accent */
  --comet-deep:#B23809;  /* darker ember for text on warm-white (AA 4.5:1) */
  --ion:#6E8BFF;         /* cool ion tail — used sparingly */
  --glow:rgba(255,107,53,.45);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
  --radius:14px;

  --step--1:clamp(.82rem,.8rem + .1vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.3rem);
  --step-3:clamp(2.1rem,1.6rem + 2.5vw,3.4rem);
  --step-4:clamp(2.5rem,1.7rem + 4vw,5.6rem);

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  font-feature-settings:"ss01" 1;
  -webkit-font-smoothing:antialiased;
}
html{overflow-x:clip}
h1,h2,h3,h4{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  color:inherit;
}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--comet);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;left:12px;top:-60px;z-index:200;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;
  transition:top .2s var(--ease);
}
.skip:focus{top:12px}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(84px,12vw,150px);position:relative}
.section--paper2{background:var(--paper-2)}
.section--space{background:var(--void);color:var(--paper)}
.section--space h1,.section--space h2,.section--space h3{color:var(--paper)}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:var(--step--1);color:var(--ink-soft);
  font-weight:500;margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--comet);flex:none}
.section--space .eyebrow,.pagehero .eyebrow{color:#B9B4C4}

.lede{
  max-width:52ch;color:var(--ink-soft);font-size:var(--step-1);line-height:1.5;
}
.section--space .lede,.pagehero .lede{color:#C7C2D2}

/* reveal-on-scroll base state (JS adds .in) */
.reveal>*{opacity:0;transform:translateY(18px)}
.reveal.in>*{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in>*:nth-child(2){transition-delay:.06s}
.reveal.in>*:nth-child(3){transition-delay:.12s}
.reveal.in>*:nth-child(4){transition-delay:.18s}

/* line-mask headline reveal */
.lines .ln{display:block;overflow:hidden}
.lines .ln>span{display:block;transform:translateY(102%)}
.lines.in .ln>span{transform:none;transition:transform 1s var(--ease)}
.lines.in .ln:nth-child(2)>span{transition-delay:.09s}
.lines.in .ln:nth-child(3)>span{transition-delay:.18s}
.lines.in .ln:nth-child(4)>span{transition-delay:.27s}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-weight:500;font-size:var(--step-0);letter-spacing:-.01em;
  will-change:transform;transition:transform .3s var(--ease),background .3s var(--ease);
  min-height:48px;
}
.btn__l{display:inline-block;will-change:transform}
.btn--accent{--bg:var(--comet);--fg:#20120B}
.btn--accent:hover{--bg:#ff7d4d}
.btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, currentColor 24%, transparent)}
.btn--ghost:hover{--bg:color-mix(in srgb, currentColor 7%, transparent)}
.btn--lg{padding:18px 34px;min-height:56px}

.txtlink{position:relative;font-weight:500}
.txtlink::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.txtlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   Custom cursor (desktop, pointer:fine only)
   ============================================================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:120;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1px solid #fff;transition:background .25s var(--ease)}
.cursor-dot{width:5px;height:5px;background:#fff;transform:translate(-50%,-50%)}
.cursor.is-active{background:rgba(255,255,255,.08)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);
  color:var(--paper);
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(246,243,238,.82);backdrop-filter:blur(14px);
  color:var(--ink);padding-block:14px;box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;gap:11px;font-family:"Space Grotesk";font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
.brand svg{width:26px;height:26px;flex:none;overflow:visible}
.brand .core{fill:var(--comet)}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:.96rem;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--comet)}
.nav.is-stuck .nav-links a[aria-current="page"]{color:var(--comet-deep)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav .btn{padding:11px 20px;min-height:42px;font-size:.94rem}
.nav.is-stuck .btn--ghost{--fg:var(--ink)}

.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){bottom:17px}
.menu-open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:95;background:var(--void);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:var(--gutter);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
}
.menu-open .mobile-menu{clip-path:inset(0 0 0 0)}
.mobile-menu a{font-family:"Space Grotesk";font-size:clamp(2rem,9vw,3rem);font-weight:600;letter-spacing:-.02em;padding:8px 0;opacity:0;transform:translateY(20px)}
.menu-open .mobile-menu a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-open .mobile-menu a:nth-child(1){transition-delay:.12s}
.menu-open .mobile-menu a:nth-child(2){transition-delay:.18s}
.menu-open .mobile-menu a:nth-child(3){transition-delay:.24s}
.menu-open .mobile-menu a:nth-child(4){transition-delay:.3s}
.menu-open .mobile-menu a:nth-child(5){transition-delay:.36s}
.mobile-menu a[aria-current="page"]{color:var(--comet)}

@media (max-width:860px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:block}
}

/* ============================================================
   Hero — the astronomical scene fills the hero as one immersive
   full-bleed cover, not an isolated badge beside the text. A scrim
   gradient (not a card) keeps the headline legible over the scene.
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--void);color:var(--paper);overflow:hidden;
  padding-block:clamp(120px,16vh,170px) clamp(56px,8vh,90px);
}
.hero__scene{position:absolute;inset:0;z-index:0}
#comet-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero__scene-fallback{
  position:absolute;inset:0;z-index:0;background:#020106;
  /* static, asymmetric black-hole approximation for no-canvas / no-JS only —
     prefers-reduced-motion gets a real still frame from the canvas itself */
  background:
    radial-gradient(ellipse 46% 30% at 66% 42%,rgba(255,225,190,.55) 0,rgba(255,150,90,.28) 22%,transparent 46%),
    radial-gradient(ellipse 60% 16% at 70% 47%,rgba(255,180,120,.32) 0,transparent 60%),
    radial-gradient(circle at 66% 46%,#030204 0 15%,rgba(3,2,4,.95) 17%,transparent 18%),
    radial-gradient(ellipse 70% 40% at 66% 46%,rgba(120,110,180,.08),transparent 70%),
    #020106;
}
.hero__scene-fallback::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(1.1px 1.1px at 18% 24%,#fff,transparent),radial-gradient(1px 1px at 76% 16%,#fff,transparent),radial-gradient(1px 1px at 84% 72%,#fff,transparent),radial-gradient(1px 1px at 14% 78%,#fff,transparent),radial-gradient(1px 1px at 40% 60%,#fff,transparent);
}
.hero::after{ /* cinematic scrim so the headline/CTAs stay legible over the scene */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,10,18,.92) 0%,rgba(11,10,18,.72) 32%,rgba(11,10,18,.26) 54%,transparent 72%);
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__copy{max-width:30ch}
.hero h1{
  font-size:var(--step-4);font-weight:600;max-width:14ch;
  text-wrap:balance;color:var(--paper);
}
.hero h1 .soft{color:var(--comet)}
.hero__sub{margin-top:22px;max-width:42ch;color:#C7C2D2;font-size:var(--step-1);line-height:1.5}
.hero__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.hero__scroll{
  margin-top:clamp(40px,6vw,64px);
  display:flex;align-items:center;gap:12px;font-size:.8rem;color:#A6A1B2;letter-spacing:.02em;
}
.hero__scroll i{width:1px;height:34px;background:linear-gradient(var(--comet),transparent);display:block;animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){
  .hero{min-height:min(92svh,780px)}
  .hero::after{background:linear-gradient(190deg,rgba(11,10,18,.94) 0%,rgba(11,10,18,.8) 34%,rgba(11,10,18,.32) 58%,transparent 80%)}
  .hero__copy{max-width:none}
}

/* ============================================================
   Page hero (secondary pages — Services, Work, How it works, Pricing, Contact)
   ============================================================ */
.pagehero{
  position:relative;overflow:hidden;background:var(--void);color:var(--paper);
  padding-block:clamp(140px,20vh,190px) clamp(56px,8vw,90px);
}
.pagehero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 480px at 84% 0%,rgba(255,107,53,.14),transparent 60%),
    radial-gradient(700px 520px at 6% 100%,rgba(110,139,255,.1),transparent 62%),
    var(--void);
}
.pagehero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:radial-gradient(1.4px 1.4px at 22% 28%,#fff,transparent),radial-gradient(1.2px 1.2px at 68% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 42% 72%,#fff,transparent),radial-gradient(1px 1px at 88% 60%,#fff,transparent),radial-gradient(1.3px 1.3px at 14% 80%,#fff,transparent);
}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{font-size:var(--step-3);max-width:20ch;text-wrap:balance}
.pagehero .lede{margin-top:20px;max-width:56ch;font-size:var(--step-1)}
.pagehero__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.crumb{position:relative;z-index:2;font-size:.85rem;color:#A6A1B2;margin-bottom:22px}
.crumb a{color:#A6A1B2}
.crumb a:hover{color:var(--paper)}

/* ============================================================
   Section head
   ============================================================ */
.s-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(48px,7vw,80px)}
.s-head h2{font-size:var(--step-3);max-width:16ch;text-wrap:balance}
@media (max-width:820px){.s-head{grid-template-columns:1fr;gap:20px}}

/* ============================================================
   Services — editorial grid
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.section--paper2 .svc-grid{background:var(--line);border-color:var(--line)}
.svc{
  background:var(--paper);padding:34px 28px 30px;min-height:210px;
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background .4s var(--ease);
  transform-style:preserve-3d;
}
.section--paper2 .svc{background:var(--paper-2)}
.svc::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(340px 200px at var(--mx,50%) var(--my,0%),var(--glow),transparent 70%)}
.svc:hover::before{opacity:.5}
.svc__n{width:34px;height:34px;color:var(--comet)}
.svc__n svg{width:100%;height:100%}
.svc h3{font-size:1.14rem;font-family:"Space Grotesk";font-weight:600}
.svc p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.svc-grid{grid-template-columns:1fr}}

/* ============================================================
   How it works — sticky sequence
   ============================================================ */
.how{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px)}
.how__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:22px}
.how__sticky h2{font-size:var(--step-3)}
.how__rail{position:relative;padding-left:34px}
.how__rail::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--line)}
.how__rail i.prog{position:absolute;left:8px;top:8px;width:1px;background:var(--comet);height:0}
.how__step{padding:clamp(40px,9vh,90px) 0;position:relative;opacity:.38;transition:opacity .5s var(--ease)}
.how__step.active{opacity:1}
.how__step .dot{position:absolute;left:-34px;top:calc(clamp(40px,9vh,90px) + 6px);width:17px;height:17px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.section--paper2 .how__step .dot{background:var(--paper-2)}
.how__step.active .dot{background:var(--comet);box-shadow:0 0 0 5px var(--glow)}
.how__step .k{font-family:"Space Grotesk";font-size:.82rem;color:var(--ink-soft);margin-bottom:10px}
.how__step h3{font-size:var(--step-2);margin-bottom:12px}
.how__step p{max-width:44ch;color:var(--ink-soft)}
@media (max-width:820px){
  .how{grid-template-columns:1fr;gap:10px}
  .how__sticky{position:static;height:auto;padding-bottom:20px}
  .how__step{opacity:1}
  .how__rail i.prog{display:none}
}

/* ============================================================
   Services story — pinned scroll scene (home page)
   Design → Launch → Keep orbiting.
   JS (ScrollTrigger.matchMedia) adds .is-pinned only when it
   actually sets up a pin; otherwise this is a plain stacked list —
   readable, unpinned, on small screens / short viewports / reduced
   motion / no JS. The scene (site preview) lives OUTSIDE the swapping
   panels and is never part of the crossfade, so it's on screen for
   the entire sequence — nothing to go blank between stages.
   ============================================================ */
/* tighter than the generic .section padding: while pinned this section
   fills the viewport below the fixed nav, so generous decorative padding
   just steals room the heading/stage need to actually fit */
.story{padding-block:clamp(90px,11vh,120px) clamp(32px,5vh,52px)}
.story__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:center}
.story__head h2{font-size:var(--step-3)}
.story__dots{display:flex;gap:9px;margin-top:22px}
.story__dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s var(--ease),transform .3s var(--ease)}
.section--paper2 .story__dots i{background:var(--paper)}
.story__dots i.active{background:var(--comet);transform:scale(1.25)}
.story__links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.story__links a{font-size:.86rem;color:var(--ink-soft);font-weight:500}
.story__links a:hover{color:var(--comet-deep)}
.story__stage{display:flex;flex-direction:column;gap:16px}

/* the persistent scene: one website preview that stays put while the
   copy beneath it advances. Sized to actually fill the card — not a
   170px icon lost in a tall empty box. */
.story__scene{position:relative;width:100%}
.story__scene .mini-frame{
  position:relative;width:100%;max-width:400px;border-radius:10px;overflow:hidden;
  background:var(--void-2);box-shadow:0 20px 44px -28px rgba(20,15,25,.55);
}
.story__scene .browser-bar{height:22px;padding:0 10px;gap:4px}
.story__scene .browser-bar i{width:5px;height:5px}
.story__scene .screen{aspect-ratio:16/10;position:relative;overflow:hidden}
.story__scene .screen .site{position:absolute;inset:0;overflow:hidden}
.story__sweep{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.4) 48%,rgba(255,107,53,.55) 53%,transparent 70%);
}
.story__orbit{position:absolute;inset:0;pointer-events:none}
.story__orbit span{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--comet);opacity:0;box-shadow:0 0 0 4px var(--glow)}
.story__orbit span:nth-child(1){top:-4px;right:14%;animation:orbitPulse 2.6s ease-in-out infinite}
.story__orbit span:nth-child(2){bottom:22%;left:-4px;animation:orbitPulse 2.6s ease-in-out .5s infinite}
.story__orbit span:nth-child(3){bottom:-4px;right:28%;animation:orbitPulse 2.6s ease-in-out 1s infinite}
@keyframes orbitPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@media (max-height:720px){.story__scene .mini-frame{max-width:280px}}

/* the copy beneath the scene — sized to its own content, no forced
   bottom-anchored link and no oversized padding manufacturing empty space */
.story__panels{position:relative}
.story__panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.6vw,26px) clamp(18px,2.6vw,28px);display:flex;flex-direction:column;gap:10px;
}
.story__n{font-family:"Space Grotesk";font-size:.82rem;color:var(--comet-deep);letter-spacing:.04em}
.story__panel h3{font-size:var(--step-2)}
.story__panel p{color:var(--ink-soft);max-width:46ch}
.story__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:2px 0 0;padding:0}
.story__tags li{font-size:.76rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.section--paper2 .story__tags li{background:var(--paper)}
.story__panel .txtlink{align-self:flex-start;font-size:.92rem}
@media (min-width:520px){
  .story__panels.is-pinned{height:var(--story-panels-h,250px)}
  .story__panels.is-pinned .story__panel{position:absolute;inset:0;margin:0}
}
@media (max-width:519px){.story__grid{grid-template-columns:1fr}}

/* ============================================================
   Portfolio
   ============================================================ */
.work{display:flex;flex-direction:column;gap:clamp(70px,12vw,150px)}
.proj{display:grid;grid-template-columns:1fr;gap:26px}
.proj__frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--void-2);box-shadow:0 40px 90px -50px rgba(20,15,25,.6);
  will-change:transform;
}
.browser-bar{height:38px;background:#1c1a27;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid #000}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#3a3746;display:block}
.browser-bar i:nth-child(1){background:#ff6b5722}
.screen{aspect-ratio:16/10;position:relative;overflow:hidden}
.screen>.parallax{position:absolute;inset:-8% 0;will-change:transform}
.proj__meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.proj__meta h3{font-size:var(--step-2)}
.proj__meta .tag{font-size:.82rem;color:var(--ink-soft)}
.proj__meta p{flex-basis:100%;max-width:56ch;color:var(--ink-soft);margin-top:4px}
.proj__view{margin-top:8px;display:inline-flex;color:var(--comet-deep)}

/* generated "website" compositions — a plausible site anatomy, not a skeleton */
.site{position:absolute;inset:0;display:flex;flex-direction:column;padding:5% 6%;gap:5%;
  --fg:#fff;--panel:rgba(255,255,255,.12);--bar:rgba(255,255,255,.28);--accent:var(--comet)}
.site--a{background:radial-gradient(120% 120% at 85% 0,#1c6f8f,#0d1b3f 60%)}
.site--b{background:linear-gradient(160deg,#f6efe3,#e9dcc6);--fg:#1b1b1b;--panel:rgba(20,18,16,.11);--bar:rgba(20,18,16,.22);--accent:#b23809}
.site--c{background:radial-gradient(120% 130% at 10% 0,#3c2130,#191320 62%)}
.site .s-nav{display:flex;align-items:center;gap:3%;height:7%}
.site .s-nav i{height:26%;flex:0 0 8%;background:var(--bar);border-radius:2px}
.site .s-nav i.dot{flex-basis:5%;aspect-ratio:1;height:auto;border-radius:50%;background:var(--accent)}
.site .s-nav i.cta{margin-left:auto;flex-basis:16%;height:52%;border-radius:999px;background:var(--accent)}
.site .s-hero{flex:1;display:flex;gap:6%}
.site .s-copy{flex:1.1;display:flex;flex-direction:column;justify-content:center;gap:6%}
.site .s-copy b{display:block;height:12%;border-radius:3px;background:var(--bar)}
.site .s-copy b:nth-child(2){width:88%}
.site .s-copy b:nth-child(3){width:64%;background:var(--panel)}
.site .s-copy .s-btn{margin-top:4%;width:34%;height:15%;border-radius:999px;background:var(--accent)}
.site .s-media{flex:1;border-radius:8px;background:
  linear-gradient(140deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),var(--panel)}
.site .s-cards{display:flex;gap:5%;height:26%}
.site .s-cards div{flex:1;border-radius:6px;background:var(--panel)}
.site .s-cards div:first-child{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}

/* ============================================================
   Infra / performance
   ============================================================ */
.infra .lede{margin-bottom:56px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--void);padding:34px 26px}
.stat .v{font-family:"Space Grotesk";font-size:clamp(2rem,4vw,2.9rem);font-weight:600;letter-spacing:-.03em}
.stat .v .u{color:var(--comet);font-size:.5em;margin-left:2px}
.stat .l{font-size:.86rem;color:#B7B2C2;margin-top:8px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.stats{grid-template-columns:1fr}}
.infra__row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.infra__row div{border-top:1px solid var(--line-dark);padding-top:18px}
.infra__row h3{font-size:1rem;font-family:"Space Grotesk";font-weight:600;margin-bottom:6px}
.infra__row p{font-size:.88rem;color:#B7B2C2}
@media (max-width:820px){.infra__row{grid-template-columns:1fr}}

/* ============================================================
   Pricing — one offer, disclosed plainly beside the number
   ============================================================ */
.price-offer{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  max-width:640px;padding:clamp(36px,6vw,56px) clamp(28px,5vw,48px);
  display:flex;flex-direction:column;gap:16px;
}
.section--paper2 .price-offer{background:var(--paper)}
.price-offer__amt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-offer__from{font-size:var(--step-0);color:var(--ink-soft)}
.price-offer__num{font-family:"Space Grotesk";font-size:clamp(3rem,6vw,4.2rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.price-offer__label{font-size:1.05rem;font-weight:500}
.price-offer__note{font-size:.95rem;color:var(--ink-soft);max-width:52ch;font-weight:500}
.price-offer__scope{color:var(--ink-soft);max-width:56ch}
.price-offer__cta{margin-top:8px;display:flex;flex-wrap:wrap;gap:14px}
.fineprint{margin-top:26px;max-width:70ch;font-size:.82rem;line-height:1.6;color:var(--ink-soft)}
.fineprint a{color:var(--comet-deep)}

/* ============================================================
   Why
   ============================================================ */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.why h2{font-size:var(--step-3);max-width:14ch}
.why__list{list-style:none;margin:0;padding:0}
.why__list li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.why__list li:last-child{border-bottom:1px solid var(--line)}
.why__list b{font-family:"Space Grotesk";font-weight:600;font-size:1rem;min-width:8ch}
.why__list span{color:var(--ink-soft);font-size:.94rem}
@media (max-width:820px){.why{grid-template-columns:1fr}}

/* ============================================================
   Promise cards
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:var(--paper);display:flex;flex-direction:column;gap:12px}
.section--paper2 .quote{background:var(--paper)}
.quote h3{font-family:"Space Grotesk";font-weight:600;font-size:1.1rem}
.quote p{font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
@media (max-width:900px){.quotes{grid-template-columns:1fr;max-width:480px}}

/* ============================================================
   Final CTA
   ============================================================ */
.final{position:relative;overflow:hidden;text-align:left}
.final__streak{position:absolute;right:-10%;top:-20%;width:80%;height:140%;pointer-events:none;opacity:.9}
.final h2{font-size:var(--step-4);max-width:14ch;text-wrap:balance;position:relative;z-index:2}
.final p{margin-top:22px;color:#C7C2D2;max-width:44ch;position:relative;z-index:2}
.final__cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2}
.final__note{margin-top:22px;color:#A6A1B2;font-size:.88rem;position:relative;z-index:2}

/* ============================================================
   Contact reassurance list
   ============================================================ */
.reassure{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2}
.reassure li{display:flex;gap:12px;font-size:.92rem;color:#C7C2D2}
.reassure li svg{width:19px;height:19px;color:var(--comet);flex:none;margin-top:2px}
@media (max-width:820px){.reassure{grid-template-columns:1fr}}

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--void);color:var(--paper);padding-block:70px 34px;position:relative;overflow:hidden}
.foot__comet{position:absolute;top:0;left:-20%;width:22%;height:2px;background:linear-gradient(90deg,transparent,var(--comet));filter:blur(.3px)}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot .foot-h{font-family:"Space Grotesk";font-size:.82rem;color:#A6A1B2;font-weight:600;margin:0 0 16px;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot a{font-size:.9rem;color:#C7C2D2}
.foot ul a{display:inline-block;padding:9px 0}
.foot a:hover{color:var(--paper)}
.foot__brand{display:flex;flex-direction:column;gap:14px}
.foot__brand p{font-size:.88rem;color:#B7B2C2;max-width:34ch}
.foot__id{font-style:normal;font-size:.8rem;line-height:1.7;color:#A6A1B2;max-width:34ch}
.foot__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:.8rem;color:#A6A1B2}
.foot__bar a{display:inline-block;padding:8px 2px}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ============================================================
   Reduced motion
   ============================================================ */
/* no-JS / script-failure safety: never leave content hidden */
html:not(.js) .reveal>*,html:not(.js) .lines .ln>span{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal>*,.lines .ln>span{opacity:1!important;transform:none!important}
  .hero__scroll i{animation:none}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}