/* ==========================================================================
   Web Studio by Sim
   Sections in page order. Tokens first — change those, not the rules below.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-var.woff2) format("woff2");font-weight:100 800;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --bg:#08090C;
  --surface:#101218;
  --surface-2:#171A22;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --text:#EDEBE6;
  --white-cool:#F4F6FB;     /* cool-toned white, hero headline only */
  --muted:#8A8F9C;          /* lifted from spec #6E7280 to clear 4.5:1 on --bg */
  --accent:#7C6BFF;
  --accent-2:#4ED8E8;

  --f-display:Satoshi,"Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* One control for every mono label on the site — nav, section numbers,
     buttons, contact meta. Scales 12px on phones to 14px on desktop, so it
     grows where there's room instead of staying tiny on a big screen. */
  --mono:clamp(.75rem, .70rem + .22vw, .875rem);
  /* Supporting body copy: service and process descriptions. 15px -> 17px. */
  --body-sm:clamp(.9375rem, .90rem + .18vw, 1.0625rem);

  --gut:clamp(1.25rem,4vw,4rem);
  --max:1440px;
  --sec-y:clamp(6rem,14vh,11rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-display);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip-link{
  position:fixed;top:-100px;left:var(--gut);z-index:200;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:4px;
  font-family:var(--f-mono);font-size:var(--mono);transition:top .2s
}
.skip-link:focus{top:1rem}

/* ---------- utilities ---------- */
.mono{
  font-family:var(--f-mono);
  font-size:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.7;
  font-weight:400;
}
.muted{color:var(--muted)}
.label{color:var(--muted)}

.section{
  max-width:var(--max);
  margin-inline:auto;
  padding:var(--sec-y) var(--gut);
  border-top:1px solid var(--line);
}
.section__head{margin-bottom:clamp(3rem,7vh,6rem)}
.section__title{font-size:clamp(2rem,4.5vw,4rem);margin-top:1.2rem}

/* ---------- lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor{position:fixed;inset:0;z-index:95;pointer-events:none;display:none}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor__dot{width:6px;height:6px;background:var(--text);margin:-3px 0 0 -3px}
.cursor__ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--line-2);
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             border-color .3s var(--ease);
}
.cursor.is-hover .cursor__ring{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:var(--accent)}
@media (pointer:fine){html.js .cursor{display:block}}

/* ---------- preloader ---------- */
.loader{
  position:fixed;inset:0;z-index:150;background:var(--bg);
  display:grid;align-content:end;padding:var(--gut);
}
.loader__bar{
  position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%
}
.loader__count{font-family:var(--f-mono);font-size:clamp(2.5rem,8vw,5rem);letter-spacing:-.02em;line-height:1}
.loader__word{
  font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-top:.75rem
}
.loader.is-done{transform:translateY(-100%);transition:transform .9s var(--ease)}
html:not(.js) .loader{display:none}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.4rem var(--gut);
  transition:transform .45s var(--ease),background-color .3s,backdrop-filter .3s;
}
.nav.is-stuck{background:rgba(8,9,12,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav.is-hidden{transform:translateY(-105%)}

.nav__mark{display:flex;align-items:baseline;gap:.5rem;line-height:1}
.nav__mark-main{font-weight:700;font-size:1.0625rem;letter-spacing:-.02em}
.nav__mark-sub{font-family:var(--f-mono);font-size:calc(var(--mono) * .85);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.nav__links{display:flex;gap:clamp(1rem,3vw,2.75rem)}
.nav__links a{
  font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color .25s
}
.nav__links a span{transition:opacity .25s}
.nav__links a:hover,.nav__links a.is-active{color:var(--text)}

.nav__status{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:calc(var(--mono) * .9);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)
}
.nav__status .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2);animation:pulse 2.4s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(78,216,232,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(78,216,232,0)}}

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--gut) + 5rem) var(--gut) var(--gut);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%,transparent 30%,rgba(8,9,12,.75) 100%),
    linear-gradient(to top,var(--bg) 2%,rgba(8,9,12,.35) 45%,transparent 75%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:2rem clamp(1rem,3vw,2.5rem);
  align-items:end;
}
.hero__title{
  grid-column:1/9;
  font-size:clamp(2.75rem,8.2vw,8rem);
  line-height:.94;
  letter-spacing:-.035em;
  color:var(--white-cool);
  /* barely-there cool halo — reads as light on the type, not as a glow effect */
  text-shadow:0 0 80px rgba(150,170,255,.14);
}
.hero__title .line{display:block}
/* word-mask reveal scaffolding, injected by main.js */
.hero__title .w{display:inline-block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;vertical-align:top}
.hero__title .wi{display:inline-block;will-change:transform}

.hero__aside{grid-column:10/13;align-self:end}
.hero__aside .mono{color:var(--text);max-width:34ch}
.hero__aside .mono+.mono{margin-top:1rem}

.hero__cta{grid-column:1/9;display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2rem,5vh,3.5rem)}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.9rem;border-radius:100px;overflow:hidden;
  font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;will-change:transform;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transition:transform .5s var(--ease);transform-origin:50% 100%;
}
.btn>*{position:relative;z-index:1}
/* near-black on violet = 5.16:1 (passes AA). White on violet was 3.86:1 and
   failed for text this size — the brand colour is unchanged, only the ink. */
.btn--primary{background:var(--accent);color:var(--bg)}
.btn--primary::before{background:var(--text);transform:scaleY(0);z-index:0}
.btn--primary:hover{color:var(--bg)}
.btn--primary:hover::before{transform:scaleY(1)}
.btn--ghost{border-color:var(--line-2);color:var(--text)}
.btn--ghost::before{background:var(--text);transform:scaleY(0);z-index:0}
.btn--ghost:hover{color:var(--bg);border-color:var(--text)}
.btn--ghost:hover::before{transform:scaleY(1)}
.btn:hover svg{transform:translateX(5px)}

.hero__scroll{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;
  display:grid;justify-items:center;gap:.7rem;color:var(--muted)
}
.hero__scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--line-2),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;inset:0;background:var(--accent);animation:scrollDot 2.2s var(--ease-io) infinite}
@keyframes scrollDot{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* ==========================================================================
   02 · SERVICES
   ========================================================================== */
.svc{position:relative;border-top:1px solid var(--line)}
.svc__row{
  position:relative;display:grid;grid-template-columns:5rem 1fr 1.1fr;
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.75rem,4vh,2.75rem) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
.svc__row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.svc__idx{color:var(--muted);transition:color .35s}
.svc__name{font-size:clamp(1.4rem,2.6vw,2.25rem)}
.svc__desc{color:var(--muted);max-width:48ch;font-size:var(--body-sm);line-height:1.6}
@media (hover:hover){
  .svc__row:hover{padding-left:1.25rem}
  .svc__row:hover::after{transform:scaleX(1)}
  .svc__row:hover .svc__idx{color:var(--accent)}
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{overflow:hidden;padding:clamp(2rem,5vh,3.5rem) 0;border-block:1px solid var(--line);user-select:none}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__set{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem}
.marquee em{
  font-style:normal;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,5.5vw,4.5rem);line-height:1;white-space:nowrap
}
.marquee em.outline{
  color:transparent;-webkit-text-stroke:1px var(--line-2);
}
.marquee i{color:var(--accent);font-size:clamp(.7rem,1.4vw,1.1rem);font-style:normal}

/* ==========================================================================
   03 · ABOUT
   ========================================================================== */
.about{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center
}
/* 3/4 matches the photo's native 1086x1448 exactly, so nothing is cropped */
.about__photo{
  grid-column:span 4;overflow:hidden;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);aspect-ratio:3/4
}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__text{grid-column:span 7}
.about__lead{color:var(--muted);max-width:54ch;margin-top:1.5rem;font-size:var(--body-sm)}
.about__sign{color:var(--muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}

/* ==========================================================================
   05 · FAQ
   ========================================================================== */
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(1.25rem,3vh,1.75rem) 0;cursor:pointer;list-style:none;
  font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:500;letter-spacing:-.01em;
  transition:color .3s
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease),border-color .3s
}
.faq__item summary:hover{color:var(--accent)}
.faq__item summary:hover::after{border-color:var(--accent)}
.faq__item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq__item[open] summary{color:var(--accent)}
.faq__item p{
  color:var(--muted);max-width:64ch;font-size:var(--body-sm);
  padding-bottom:clamp(1.25rem,3vh,1.75rem)
}
.faq__item strong{color:var(--text);font-weight:500}

/* ==========================================================================
   03 · PROCESS
   ========================================================================== */
.process{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,4rem)}
.process__sticky{grid-column:1/6;position:sticky;top:22vh;height:max-content}
.process__blurb{color:var(--muted);margin-top:1.5rem;max-width:34ch;font-size:var(--body-sm)}
.steps{grid-column:7/13;position:relative;padding-left:2.5rem}
.steps__line{position:absolute;left:0;top:.6rem;bottom:2rem;width:1px;background:var(--line)}
.steps__line i{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;display:block}
.step{padding-bottom:clamp(3rem,8vh,5.5rem);position:relative}
.step:last-of-type{padding-bottom:0}
.step__n{color:var(--accent);display:block;margin-bottom:.9rem}
.step h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.9rem}
.step p{color:var(--muted);max-width:44ch;font-size:var(--body-sm)}

/* ==========================================================================
   03 · CONTACT — the point of the page
   ========================================================================== */
.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.contact__title{font-size:clamp(2.5rem,7vw,6.5rem);line-height:.96;letter-spacing:-.035em;margin-top:1.5rem}
.contact__price{color:var(--muted);margin-top:2rem;max-width:52ch}

.contact__blocks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  margin-top:clamp(2.5rem,6vh,4rem)
}
.cblock{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(15rem,34vh,20rem);padding:1.75rem;
  border:1px solid var(--line-2);border-radius:6px;
  transition:border-color .45s var(--ease),color .45s var(--ease);
  will-change:transform;
}
.cblock::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .55s var(--ease)
}
.cblock__label{color:var(--muted);transition:color .4s}
.cblock__value{
  font-size:clamp(1.25rem,2.4vw,2rem);font-weight:500;letter-spacing:-.02em;
  line-height:1.15;word-break:break-word
}
.cblock__arrow{position:absolute;right:1.75rem;bottom:1.75rem;width:34px;height:34px}
.cblock__arrow svg{width:100%;height:100%;transition:transform .5s var(--ease)}
.cblock:hover{border-color:var(--accent);color:var(--bg)}
.cblock:hover::before{transform:scaleY(1)}
.cblock:hover .cblock__label{color:rgba(8,9,12,.72)}
.cblock:hover .cblock__arrow svg{transform:translate(6px,-6px) rotate(-45deg)}

.contact__copy{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.25rem}
.copybtn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.2rem;border:1px solid var(--line-2);border-radius:100px;
  color:var(--muted);transition:color .3s,border-color .3s
}
/* Instagram sits beside the copy button at the same weight — deliberately
   quieter than the two CTA blocks above, which stay the primary action. */
.copybtn--ig::before{content:none}
.copybtn__ico{width:15px;height:15px;flex:none}
.copybtn--ig:hover{color:var(--accent);border-color:var(--accent)}
.copybtn::before{
  content:"";width:13px;height:13px;flex:none;border:1px solid currentColor;
  border-radius:2px;box-shadow:3px -3px 0 -1px var(--bg),3px -3px 0 currentColor
}
.copybtn:hover{color:var(--text);border-color:var(--text)}
.copybtn.is-done{color:var(--accent-2);border-color:var(--accent-2)}
.copybtn.is-done::before{
  width:11px;height:6px;border-width:0 0 1px 1px;border-radius:0;
  transform:rotate(-45deg) translate(1px,-2px);box-shadow:none
}

.contact__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;color:var(--muted);
  margin-top:2.25rem
}
.contact__meta li{display:flex;align-items:center;gap:.6rem}
.contact__meta li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ---------- footer ---------- */
.foot{
  max-width:var(--max);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
  padding:2rem var(--gut) 6rem;border-top:1px solid var(--line);color:var(--muted)
}
.foot__top{transition:color .25s}
.foot__top:hover{color:var(--text)}

/* ---------- floating contact control ----------
   Anchored bottom-LEFT on purpose. Host badges (Netlify, Vercel, Cloudflare)
   all sit bottom-right and would sit on top of the WhatsApp button. */
.pill{
  position:fixed;left:var(--gut);bottom:1.5rem;z-index:85;
  display:flex;align-items:center;gap:.4rem;padding:.4rem;
  background:rgba(23,26,34,.82);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:100px;
  opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.pill.is-on{opacity:1;transform:none;pointer-events:auto}
.pill__mark{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  font-weight:700;font-size:1rem;color:var(--text)
}
.pill__btn{
  display:flex;align-items:center;gap:.55rem;
  padding:.65rem 1.1rem;border-radius:100px;
  font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--surface-2);color:var(--text);
  transition:background-color .3s,color .3s
}
.pill__ico{width:16px;height:16px;flex:none}
.pill__btn:hover{background:var(--text);color:var(--bg)}
.pill__btn--wa{background:var(--accent);color:var(--bg)}
.pill__btn--wa:hover{background:var(--text);color:var(--bg)}

/* ==========================================================================
   REVEAL STATES — only when JS is running, so no-JS users see everything
   ========================================================================== */
html.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* NOTE: the hero words are deliberately NOT pre-hidden here.
   main.js animates them with gsap.from(), so "visible" is their resting state
   and the animation starts from hidden instead of ending there. If the script
   never runs, the headline still shows. */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .hero__title{grid-column:1/13}
  .hero__aside{grid-column:1/13;margin-top:.5rem}
  .hero__cta{grid-column:1/13}
  .process__sticky{grid-column:1/13;position:static}
  .steps{grid-column:1/13;margin-top:3rem}
  .about__photo{grid-column:span 5}
  .about__text{grid-column:span 7}
  /* Three across squeezes the email address past breaking point on a tablet.
     Email and WhatsApp keep the top row, Instagram takes the full width below —
     which also keeps the two primary CTAs paired. */
  .contact__blocks{grid-template-columns:1fr 1fr}
  .contact__blocks .cblock:last-child{grid-column:1/-1;min-height:11rem}
}

/* at the larger mono size the nav runs out of room here, before the mobile
   two-row layout kicks in — drop the status pill first */
@media (max-width:900px){
  .nav__status{display:none}
}

@media (max-width:760px){
  /* one row can't hold the wordmark and all three links at phone widths, so
     give each its own line and spread the links edge to edge — wider tap
     targets as a side effect */
  .nav{flex-wrap:wrap;gap:.7rem;padding:.9rem var(--gut)}
  .nav__mark{flex:0 0 100%;white-space:nowrap}
  .nav__links{flex:0 0 100%;justify-content:space-between;gap:.5rem}
  .nav__links a{padding:.5rem 0}   /* ~19px of text is too small to tap */
  .nav__status{display:none}
  /* nav is now ~2 rows tall — keep the hero clear of it */
  .hero{align-items:center;padding-top:8.5rem}
  .hero__scroll{display:none}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .svc__row{grid-template-columns:3rem 1fr;row-gap:.6rem}
  .svc__desc{grid-column:2/3}
  .about__photo{grid-column:span 12;max-width:16rem;aspect-ratio:3/4}
  .about__text{grid-column:span 12}
  .contact__blocks{grid-template-columns:1fr}
  .cblock{min-height:11rem}
  .contact__meta{flex-direction:column;gap:.5rem}
  .foot{padding-bottom:7rem}
  /* phones get icons only — a full-width bar eats screen and collides with
     whatever badge the host pins to the bottom-right */
  .pill{
    left:var(--gut);right:auto;bottom:1.25rem;
    gap:.65rem;padding:0;background:none;border:0;backdrop-filter:none
  }
  .pill__mark{display:none}
  .pill__btn{
    width:52px;height:52px;padding:0;border-radius:50%;
    justify-content:center;
    border:1px solid var(--line);backdrop-filter:blur(16px);
    box-shadow:0 6px 20px rgba(0,0,0,.35)
  }
  .pill__ico{width:21px;height:21px}
  .pill__lbl{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap
  }
}

/* ==========================================================================
   REDUCED MOTION — everything still works, nothing moves
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.15s!important;scroll-behavior:auto!important
  }
  html.js [data-reveal]{opacity:1;transform:none}
  .cursor,.hero__canvas,.hero__scroll-line::after{display:none}
  .loader{display:none}
  .marquee__track{transform:none!important}
}

/* ==========================================================================
   MAIL CHOOSER
   A bare mailto: link does nothing at all when the OS has no default mail
   client registered — which is the case for most people who use Gmail or
   Outlook in a browser. No error, no prompt, just a dead click. This offers
   the routes that actually work.
   ========================================================================== */
.mailpop{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:var(--gut);background:rgba(4,5,7,.74);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease)
}
.mailpop.is-open{opacity:1;pointer-events:auto}
.mailpop__card{
  width:min(23rem,100%);background:var(--surface);
  border:1px solid var(--line-2);border-radius:10px;padding:1.5rem;
  transform:translateY(12px) scale(.97);transition:transform .32s var(--ease)
}
.mailpop.is-open .mailpop__card{transform:none}
.mailpop__title{color:var(--muted);margin-bottom:1.15rem}
.mailpop__opt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:6px;
  font-size:var(--body-sm);font-weight:500;
  transition:border-color .25s,background-color .25s,color .25s
}
.mailpop__opt+.mailpop__opt{margin-top:.55rem}
.mailpop__opt em{
  font-style:normal;font-family:var(--f-mono);font-size:calc(var(--mono) * .9);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}
.mailpop__opt:hover{border-color:var(--accent);background:var(--surface-2)}
.mailpop__opt:hover em{color:var(--accent)}
.mailpop__cancel{
  display:block;width:100%;margin-top:1.15rem;padding:.65rem;
  color:var(--muted);transition:color .25s
}
.mailpop__cancel:hover{color:var(--text)}