/* ============================================================
   Daniel Bello — portfolio, pure HTML/CSS/JS recreation
   ============================================================ */
:root{
  --bg:            #E7E1D8;   /* page background        */
  --dark:          #322F29;   /* dark cards + dark text */
  --light:         #F1EFE9;   /* light cards / pills    */
  --gold:          #FDBC41;   /* accent / CTA           */
  --button:        #DFD8CC;   /* "Contact me" button    */
  --dark-whiter:   #3D3A33;   /* lighter dark surface   */
  --muted:         #8b857b;   /* muted labels           */
  --line:          rgba(50,47,41,.10);
  --radius-lg:     32px;
  --radius-md:     20px;
  --radius-sm:     12px;
  --maxw:          1280px;
  --pad:           40px;
  --font-head:     "General Sans","Inter",system-ui,sans-serif;
  --font-body:     "Inter",system-ui,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--dark);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* ---------- shared cards ---------- */
.dark-card{background:var(--dark);color:var(--light);border-radius:var(--radius-md)}
.light-card{background:var(--light);border-radius:var(--radius-lg)}

/* ---------- "+" dotted grid overlay ---------- */
.plus-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(241,239,233,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(241,239,233,.06) 1px, transparent 1px);
  background-size:100px 100px;
  mask-image:radial-gradient(circle at 30% 40%, #000 0%, transparent 75%);
}
.plus-grid--light{
  background-image:
    linear-gradient(to right, rgba(50,47,41,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(50,47,41,.07) 1px, transparent 1px);
  mask-image:none;
}

/* ---------- glows ---------- */
.glow{position:absolute;pointer-events:none;filter:blur(70px);opacity:.55}
.glow--gold{width:460px;height:340px;top:-40px;left:-40px;
  background:radial-gradient(circle,#c9a15f 0%,transparent 70%)}
.glow--warm{width:620px;height:420px;top:-60px;right:12%;
  background:radial-gradient(circle,#b7a179 0%,transparent 70%)}

/* The static artwork of a dark card (the exported svg) is its idle state; the
   comet cross-fades with it while the cursor is inside.
   - .hero__bg / .cta__glow : the artwork (visible when idle)
   - .comet                 : the cursor-following comet (visible on hover) */
.comet{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;z-index:1}
.comet__dot{position:absolute;left:0;top:0;border-radius:50%;
  transform:translate3d(-50%,-50%,0);pointer-events:none;
  mix-blend-mode:screen;will-change:transform}
@media (prefers-reduced-motion:reduce){.comet{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:19px 24px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn--gold{background:var(--gold);color:#2a2410}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(253,188,65,.35)}
.btn__plus{opacity:.6;font-weight:400}

/* ============================================================
   HEADER  (Figma: 1400x67, gap 10)
   ============================================================ */
/* The slot reserves 20px (top offset) + 67px (header) so that pinning the
   header — which takes it out of the flow — never shifts the page. */
.hdr-slot{padding-top:20px;height:87px}

/* NB: centering must NOT use transform — the pin animation uses transform
   and would otherwise cancel the horizontal centering. */
.hdr{
  position:relative;margin:0 auto;
  width:calc(100% - 40px);max-width:1400px;
  display:flex;align-items:center;gap:10px;height:67px;
}
/* the pinned state is defined further down, next to the merge rules */
@keyframes hdrDrop{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}

/* two-class selector so it wins over .hdr__icon{display:flex} regardless of order */
.hdr .hdr__icon--off{display:none}

/* burger — hidden on desktop, shown on mobile. Also acts as the close (X). */
.hdr__burger{display:none;flex:0 0 auto;width:63px;height:63px;border:0;background:transparent;
  border-radius:12px;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;transition:background .2s ease}
.hdr__burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--dark);
  transition:transform .28s ease, opacity .2s ease}
.hdr__burger:hover{background:var(--bg)}
/* morph into an X while the menu is open — no hover state for the X */
.hdr__burger.is-open span:first-child{transform:translateY(4px) rotate(45deg)}
.hdr__burger.is-open span:last-child{transform:translateY(-4px) rotate(-45deg)}
.hdr__burger.is-open:hover{background:transparent}

/* ============================================================
   MOBILE MENU  (matches Figma 1:1667)
   Beige page overlay behind the header. Only two things go dark:
   the header's contact pill, and the menu card with the links.
   ============================================================ */
.mmenu{position:fixed;inset:0;z-index:150;background:var(--bg);
  padding:95px 16px 16px;                 /* 16 + 67 + 12 gap under the header */
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease}
.mmenu.is-open{opacity:1;visibility:visible}
.mmenu[hidden]{display:none}
/* the dark menu card — fills the rest of the screen */
.mmenu__panel{flex:1 1 auto;background:var(--dark);border-radius:20px;
  padding:56px 16px 28px;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;gap:48px}
.mmenu__links{display:flex;flex-direction:column;align-items:center;gap:25px;width:100%}
.mmenu__link{font-family:var(--font-body);font-weight:400;font-size:26px;line-height:1.4;
  text-transform:uppercase;color:var(--light);text-align:center;width:100%;transition:opacity .2s ease}
.mmenu__link:hover{opacity:.7}
.mmenu__socials{display:flex;flex-direction:column;gap:16px;width:100%}
.mmenu__social{display:flex;align-items:center;justify-content:center;gap:10px;height:63px;
  border:1px solid rgba(241,239,233,.2);border-radius:12px;color:var(--light);
  font-size:14px;text-transform:uppercase;transition:background .2s ease}
.mmenu__social svg{width:24px;height:24px}
.mmenu__social:hover{background:rgba(241,239,233,.06)}

/* keep the header above the overlay so it stays visible and in place.
   NB: only z-index here — setting `position` again would override the
   `position:fixed` of .hdr--pinned, since both are single-class selectors
   and this rule comes later in the file. */
.hdr{z-index:210}
.hdr__contact{transition:background .3s ease}
/* While the menu is open the whole bar goes dark as one rounded plate — logo
   included — instead of only the contact pill. Works the same pinned or not. */
body.mmenu-open .hdr{background:var(--dark);border-radius:12px}
body.mmenu-open .hdr__ava img,
body.mmenu-open .hdr__contact{background:transparent}
body.mmenu-open .hdr__burger span{background:var(--light)}
/* the hairline dividers flip to light at the same 14% opacity */
body.mmenu-open .hdr--pinned .hdr__menu::before,
body.mmenu-open .hdr--pinned .hdr__contact::before{background:rgba(241,239,233,.14)}
/* logo swap: dark mark by default, light one while the menu is open */
.hdr__logo--light{display:none}
body.mmenu-open .hdr__logo--dark{display:none}
body.mmenu-open .hdr__logo--light{display:block}
/* prevent background scroll while the menu is open (JS pads for scrollbar) */
body.mmenu-open{overflow:hidden}
.hdr__ava{position:relative;flex:0 0 auto;width:67px;height:67px}
/* Figma 103:2148 — 67px light tile, the 52px mark centred inside it */
.hdr__ava img{width:100%;height:100%;object-fit:contain;padding:7px;
  border-radius:12px;background:var(--light)}

.hdr__menu{flex:0 1 618px;min-width:0;background:var(--light);border-radius:12px;
  padding:2px;display:flex;align-items:center;gap:1px}
.hdr__contact{flex:0 1 695px;min-width:0;background:var(--light);border-radius:12px;
  padding:2px;display:flex;align-items:center;gap:1px}

.hdr__item{flex:1 0 0;min-width:0;height:63px;display:flex;align-items:center;justify-content:center;
  padding:22px 30px;border-radius:12px;font-family:var(--font-body);font-size:14px;font-weight:400;
  line-height:1.4;text-transform:uppercase;color:var(--dark);white-space:nowrap;
  transition:background .2s ease}
.hdr__item:hover{background:var(--bg)}
.hdr__icon{flex:0 0 auto;height:63px;display:flex;align-items:center;justify-content:center;
  padding:22px 30px;border-radius:12px;color:var(--dark);transition:background .2s ease}
.hdr__icon svg{width:24px;height:24px;display:block}
.hdr__icon:hover{background:var(--bg)}
.hdr__cta{background:var(--button)}
.hdr__cta:hover{background:#D1CABE}

/* ============================================================
   LAYOUT WRAP
   ============================================================ */
.about,.projects{
  max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);
}

/* ============================================================
   HERO  (Figma: two 695x743 cards, gap 10, top 97)
   ============================================================ */
/* Vertical budget: 20 (slot pad) + 67 (header) + 10 (gap) + 20 (bottom) = 117px,
   so the two cards take exactly the rest of the viewport. */
.hero{
  max-width:1440px;margin:0 auto;padding:10px 20px 20px;
  display:flex;align-items:stretch;gap:10px;
}
.hero__left,.hero__right{position:relative;flex:1 1 0;min-width:0;
  height:calc(100vh - 117px);min-height:540px;max-height:820px;
  border-radius:20px;overflow:hidden}
.hero__left{background:var(--dark);display:flex;flex-direction:column}
.hero__right{background:var(--light)}

/* exported grid + glow, anchored to the top-left of the card (695x384) */
.hero__bg{position:absolute;left:0;top:0;width:695px;max-width:100%;height:auto;
  pointer-events:none;z-index:1;will-change:opacity}
/* holds the comet dots; the artwork above is the idle state */
.hero__glow{position:absolute;inset:0;pointer-events:none;z-index:1}

.hero__body{position:relative;z-index:2;flex:1 1 auto;width:100%;padding-top:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3vh,34px)}
.hero__body h1{width:100%;font-family:var(--font-head);font-weight:500;
  font-size:clamp(36px,4.51vw,65px);
  line-height:1.2;letter-spacing:-1.3px;color:var(--light);text-align:center}
.hero__divider{position:relative;width:100%;height:13px}
.hero__divider::before{content:"";position:absolute;top:6px;left:0;right:0;height:1px;
  background:rgba(241,239,233,.10)}
.hero__divider::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:13px;height:13px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23F1EFE9' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E") center/13px 13px no-repeat}
.hero__sub{width:581px;max-width:calc(100% - 80px);font-size:18px;line-height:1.4;
  color:var(--light);opacity:.7;text-align:center}

/* ---------- shared gold CTA button (hero + footer) ---------- */
.btn-call{position:relative;z-index:2;height:60px;
  background:var(--gold);border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;padding:19px 24px;
  font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.4;
  text-transform:uppercase;color:var(--dark);
  transition:filter .25s ease, transform .25s ease}
.btn-call:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-call__p{flex:0 0 auto;width:10px;height:10px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0v10M0 5h10' stroke='%23322F29' stroke-width='1.4'/%3E%3C/svg%3E") center/10px 10px no-repeat}

/* ---------- secondary (outline) button on dark cards ---------- */
.btn-ghost{position:relative;z-index:2;height:60px;
  display:flex;align-items:center;justify-content:center;padding:19px 24px;
  border:1px solid rgba(241,239,233,.2);border-radius:12px;
  font-size:16px;line-height:1.4;text-transform:uppercase;color:var(--light);
  transition:background .25s ease, border-color .25s ease}
.btn-ghost:hover{background:rgba(241,239,233,.06);border-color:rgba(241,239,233,.4)}

/* the pulsing dot is still used by the Pricing block */
.hero__slots-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(253,188,65,.6);animation:slotPulse 2.4s ease-out infinite}
@keyframes slotPulse{
  0%{box-shadow:0 0 0 0 rgba(253,188,65,.55)}
  70%{box-shadow:0 0 0 9px rgba(253,188,65,0)}
  100%{box-shadow:0 0 0 0 rgba(253,188,65,0)}}
@media (prefers-reduced-motion:reduce){.hero__slots-dot{animation:none}}

/* hero footer — one CTA (Figma 128:3392) */
.hero__foot{position:relative;z-index:2;flex:0 0 auto;margin:0 40px 40px;display:flex}
.hero__btn{flex:1 1 auto;margin:0}
/* label + pill sit as one centred group between the two plus signs */
.hero__btn-mid{display:flex;align-items:center;gap:16px}
.hero__btn-label{font-size:18px;line-height:1.4;text-transform:uppercase;color:var(--dark)}
.hero__slotpill{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px 8px 8px;border:1px dashed #B9831E;border-radius:44px}
.hero__slotpill-ava{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  overflow:hidden;background:var(--light)}
.hero__slotpill-ava img{width:100%;height:100%;object-fit:cover;display:block}
.hero__slotpill-txt{font-size:14px;line-height:1.4;text-transform:uppercase;color:#78520C;
  white-space:nowrap}
.hero__btn-label{white-space:nowrap}
.only-mobile{display:none}

/* ---------- stories card ---------- */
.stories__nav{position:absolute;left:40px;top:40px;width:calc(100% - 80px);z-index:3;
  display:flex;flex-direction:column;gap:20px}
.stories__bars{display:flex;align-items:center;gap:14px}
.stories__bar{position:relative;flex:1 0 0;min-width:0;height:3px;border-radius:12px;
  background:rgba(50,47,41,.10);overflow:hidden}
.stories__bar i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:12px;
  background:var(--dark)}
.stories__user{display:flex;align-items:center;gap:14px;height:32px}
/* Figma 103:2279 — 32px dark circle, the mark inset ~3px on each side */
.stories__ava{flex:0 0 auto;width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:var(--dark)}
.stories__ava img{width:100%;height:100%;object-fit:contain;padding:3px}
.stories__name{font-size:16px;line-height:1.4;color:var(--dark)}

/* Instagram-style tap zones */
.stories__tap{position:absolute;top:0;bottom:0;width:50%;z-index:4;
  border:0;background:transparent;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.stories__tap--prev{left:0}
.stories__tap--next{right:0}

/* stages: one visible at a time, cross-fade between them */
.stories__stages{position:absolute;inset:0;z-index:2}
/* the two image rows are centred vertically in the card (below the nav).
   "safe center" keeps a ≥16px gap under the nav on short screens: instead of
   overflowing up into the name, the rows pin below the padding-top. */
.stage{position:absolute;inset:0;opacity:0;visibility:hidden;
  display:flex;flex-direction:column;justify-content:safe center;align-items:flex-start;gap:20px;
  padding:112px 0 24px;                          /* nav bottom ~95px + 16px gap */
  transition:opacity .6s ease, visibility .6s ease}
.stage.is-active{opacity:1;visibility:visible}
.stage__row{position:relative;margin-left:40px;flex:0 0 auto;
  display:flex;align-items:center;gap:20px;height:245px;will-change:transform}
/* max-width:none is essential: the global img{max-width:100%} would squeeze the
   width down to the card while the height stays 245, and `cover` would then
   crop the shot. With it off, width follows the intrinsic ratio, as on desktop. */
.stage__row img{flex:0 0 auto;height:245px;width:auto;max-width:none;
  border-radius:12px;object-fit:cover;background:#e3ddd2}
/* The smooth horizontal drift — runs only while the stage is active.
   JS sets from/to and the duration so that every row covers the SAME distance
   in the same time: identical speed, no row stalling to wait for the other.
   The second row starts further right, so it trails the first instead of the
   two lining up in a grid. */
.stage.is-active .stage__row{
  animation:storyPan var(--row-dur,6s) linear both}
@keyframes storyPan{
  from{transform:translateX(var(--pan-from,0px))}
  to{transform:translateX(var(--pan-to,0px))}}
/* the leading row stays on top if the two ever overlap */
.stage__row--1{z-index:2}
.stage__row--2{z-index:1}

/* ============================================================
   ABOUT
   ============================================================ */
.about{max-width:1400px;margin:0 auto;padding:96px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:60px}

/* left: stat numbers over a faint technical grid.
   Tall rectangular cells (110 x 223) with faint lines and prominent "+" marks
   at the intersections — one cell per number, matching the Figma background. */
/* the exported grid has 3 background-coloured circles that punch "holes" in
   the grid (centres at y 184.5 / 407.5 / 625.5). Each number sits in its hole,
   positioned to the Figma coordinates. */
.about__stats{position:relative;flex:0 0 auto;width:460px;height:760px;overflow:hidden}
.about__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("images/about-bg.svg") 0 0 / 624px 815px no-repeat}
.stat{position:absolute;left:235px;z-index:1;display:flex;flex-direction:column;gap:16px}
.stat:nth-child(2){top:128px}
.stat:nth-child(3){top:342px}
.stat:nth-child(4){top:548px}
.stat__num{font-family:var(--font-head);font-weight:500;font-size:70px;line-height:1.2;
  letter-spacing:-1.4px;color:var(--dark)}
.stat__label{font-size:18px;line-height:1.4;color:var(--dark);opacity:.7}

/* right: text + tags */
.about__content{flex:1 1 auto;min-width:0;max-width:695px;
  display:flex;flex-direction:column;gap:48px}
.about__text{display:flex;flex-direction:column;gap:24px}
.about__title{font-family:var(--font-head);font-weight:500;font-size:48px;line-height:1.25;
  letter-spacing:-.96px;color:var(--dark)}
.about__content p{font-size:20px;line-height:1.4;color:var(--dark);opacity:.7;max-width:625px}

/* tags — design-system pill (16px upper, r96, icon 24px) */
.tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tag{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:22px 30px;border-radius:96px;background:var(--light);
  font-family:var(--font-body);font-size:16px;line-height:1.4;text-transform:uppercase;
  color:var(--dark);transition:transform .55s ease, opacity .55s ease}
.tag svg,.tag img{width:24px;height:24px;flex:0 0 auto;display:block}
.tag--dark{background:rgba(50,47,41,.05)}

/* ============================================================
   PROJECTS
   ============================================================ */
/* section label. .section-label is the outer variant used by Pricing / FAQ;
   .projects__label sits INSIDE the cases card (Figma 103:2944). */
.section-label{width:822px;max-width:calc(100% - 40px);margin:80px auto 0;
  display:flex;flex-direction:column;gap:32px}
.projects__label{width:930px;max-width:calc(100% - 40px);margin:0 auto 80px;
  display:flex;flex-direction:column;gap:32px}
.projects__tag,.section-label__tag{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:500;color:var(--dark)}
.section-label__tag{font-size:18px;line-height:1.25;letter-spacing:-.36px}
.projects__tag{font-size:18px;line-height:1.25;letter-spacing:-.36px}
.projects__tag .dot,.section-label__tag .dot{flex:0 0 auto;width:8px;height:8px;
  border-radius:50%;background:var(--dark)}
.projects__rule,.section-label__rule{height:1px;width:100%;background:rgba(50,47,41,.14)}

/* ============================================================
   HOW IT WORKS  (Figma 100:669)
   Section: 930 column, gap 48 title→cards, 80 bottom.
   Cards: 3 equal, gap 10, bg #F1EFE9, r20, padding 32, inner gap 16.
   ============================================================ */
.how{width:930px;max-width:calc(100% - 40px);margin:0 auto;padding-bottom:96px;
  display:flex;flex-direction:column;gap:40px;align-items:flex-start}
/* H2, centred across the column (Figma 103:2501) */
.how__heading{width:100%;font-family:var(--font-head);font-weight:500;font-size:48px;
  line-height:1.25;letter-spacing:-.96px;color:var(--dark);text-align:center}

.how__row{width:100%;display:flex;align-items:stretch;gap:10px}
.how__card{flex:1 0 0;min-width:0;background:var(--light);border-radius:20px;padding:32px;
  display:flex;flex-direction:column;align-items:flex-start;gap:32px}

/* The illustrations hold at frame 0 until their card scrolls into view, then
   play from the start — otherwise you arrive mid-cycle and miss the motion.
   `.in` is added by the entrance observer in script.js. */
.how__viz *{animation-play-state:paused}
.how__card.in .how__viz *{animation-play-state:running}

/* decorative grid plate — 239x191, 36.343px pitch, plus marks at the crossings */
.how__viz{width:239px;max-width:100%;height:191px;overflow:hidden;flex:0 0 auto;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='37'%3E%3Cpath d='M2.6 0v5.4M0 2.7h5.2' stroke='%23322F29' stroke-opacity='.55' stroke-width='.9'/%3E%3C/svg%3E"),
    linear-gradient(to right, rgba(50,47,41,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(50,47,41,.22) 1px, transparent 1px);
  background-size:36.343px 36.343px, 36.343px 100%, 100% 36.343px;
  background-position:0 14.72px, 2.58px 0, 0 16.17px;
  background-repeat:repeat, repeat-x, repeat-y;
  opacity:.3;
  /* the plate fades out toward the right and bottom, as in the design */
  mask-image:linear-gradient(to bottom, #000 62%, transparent 100%),
             linear-gradient(to right, #000 72%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%),
                     linear-gradient(to right, #000 72%, transparent 100%);
  -webkit-mask-composite:source-in}

/* card 1 "Subscribe" — three client slots, two of them taken.
   Same thin-line language as the grid plates it replaces. */
.how__viz--slots{background:none;opacity:1;mask-image:none;-webkit-mask-image:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.how__viz--slots svg{width:100%;height:100%}
.slot{fill:none;stroke:#D5CFC6;stroke-width:1}
.slot--open{stroke:#C5C5C5;stroke-dasharray:6 5}      /* the free slot */
.slot-fill{fill:var(--bg);
  transform-box:fill-box;transform-origin:bottom;
  animation:slotA 6s cubic-bezier(.4,0,.2,1) infinite}
.slot-fill--2{animation-name:slotB}
/* NB: animate the `r` geometry, not transform:scale — a scaled SVG shape gets
   promoted to a composited layer, rasterised once and stretched, which makes
   the dots look soft. Animating r keeps them vector-crisp at every frame. */
.slot-dot{fill:#C5BEB3;shape-rendering:geometricPrecision;
  animation:slotDotA 6s cubic-bezier(.4,0,.2,1) infinite}
.slot-dot--2{animation-name:slotDotB}
/* separate keyframes (not a delay) so both slots empty out in sync */
@keyframes slotA{
  0%{transform:scaleY(0)}12%{transform:scaleY(1)}
  86%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes slotB{
  0%,6%{transform:scaleY(0)}20%{transform:scaleY(1)}
  86%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes slotDotA{
  0%,8%{opacity:0;r:1.5px}16%{opacity:1;r:5.5px}
  86%{opacity:1;r:5.5px}94%,100%{opacity:0;r:1.5px}}
@keyframes slotDotB{
  0%,16%{opacity:0;r:1.5px}24%{opacity:1;r:5.5px}
  86%{opacity:1;r:5.5px}94%,100%{opacity:0;r:1.5px}}
@media (prefers-reduced-motion:reduce){
  .slot-fill,.slot-dot{animation:none;transform:none;opacity:1}}

/* card 2 "Request" (Figma 102:1621) — a checklist board: 36px circle + bar,
   gap 8, row pitch 51. The stack shifts up by exactly one pitch, so the rows
   land where the previous ones were and the loop restarts without a jump. */
.how__viz--queue{background:none;opacity:1;mask-image:none;-webkit-mask-image:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.how__viz--queue svg{width:100%;height:100%}
.q-ring{fill:none;stroke:#C5C5C5;stroke-width:1}
.q-bar{fill:none;stroke:#C5C5C5;stroke-width:1;stroke-dasharray:6 5}
.q-ring-on{fill:var(--bg);stroke:#C5C5C5;stroke-width:1}
.q-bar-on{fill:var(--bg);stroke:#C5C5C5;stroke-width:1}
.q-check{fill:none;stroke:#C5BEB3;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;animation:qCheck 4.4s cubic-bezier(.4,0,.2,1) infinite}
.q-stack{animation:qShift 4.4s cubic-bezier(.4,0,.2,1) infinite}
.q-active{animation:qOut 4.4s cubic-bezier(.4,0,.2,1) infinite}
/* order matters: the ticked row leaves first (80%), leaving the top slot empty,
   only then do the pending rows pull up into it (80→92%) */
@keyframes qShift{
  0%,80%{transform:translateY(0)}
  92%,100%{transform:translateY(-51px)}}
/* the ticked row slides out to the right, then returns while invisible */
@keyframes qOut{
  0%,70%{opacity:1;transform:translateX(0)}
  80%{opacity:0;transform:translateX(30px)}
  81%,88%{opacity:0;transform:translateX(0)}
  96%,100%{opacity:1;transform:translateX(0)}}
/* the tick draws itself in each cycle (stroke-dashoffset stays vector-crisp);
   it resets while the row is invisible, so the new row arrives unticked */
@keyframes qCheck{
  0%{stroke-dashoffset:20}
  20%,88%{stroke-dashoffset:0}
  89%,100%{stroke-dashoffset:20}}
@media (prefers-reduced-motion:reduce){
  .q-stack,.q-active{animation:none;transform:none;opacity:1}
  .q-check{animation:none;stroke-dashoffset:0}}

/* card 3 "Receive" — an artboard that assembles itself: header, hero, two
   columns land one after another, hold, then the screen clears and repeats. */
.how__viz--build{background:none;opacity:1;mask-image:none;-webkit-mask-image:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.how__viz--build svg{width:100%;height:100%}
.a-frame{fill:none;stroke:#C5C5C5;stroke-width:1}
.a-block{fill:var(--bg);stroke:#C5C5C5;stroke-width:1;opacity:0;
  animation:buildIn 5.5s cubic-bezier(.4,0,.2,1) infinite}
.a-block--2{animation-delay:.35s}
.a-block--3{animation-delay:.7s}
.a-block--4{animation-delay:.95s}
/* translate only — no scale, so the edges stay vector-crisp */
@keyframes buildIn{
  0%,3%{opacity:0;transform:translateY(6px)}
  10%,78%{opacity:1;transform:translateY(0)}
  88%,100%{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .a-block{animation:none;opacity:1;transform:none}}

.how__text{width:100%;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.how__head-row{width:100%;display:flex;align-items:center;gap:8px}
.how__badge{flex:0 0 auto;width:32px;height:32px;border-radius:31px;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:500;font-size:16px;line-height:1.4;color:var(--dark)}
/* H5 inside the cards (Figma 103:2542) — 18px, not 26 */
.how__title{font-family:var(--font-head);font-weight:500;font-size:18px;line-height:1.25;
  letter-spacing:-.36px;color:var(--dark);white-space:nowrap}
.how__desc{width:100%;font-size:18px;line-height:1.4;color:rgba(50,47,41,.7)}

.projects{max-width:1400px;margin:24px auto 60px;padding:56px 20px 90px;overflow:hidden}

/* each project: a centred 930 text block, then a wider image body */
.project{padding-top:120px}
/* :first-of-type, not :first-child — the label is the card's first child now */
.project:first-of-type{padding-top:0}
.project.is-hidden{display:none}

/* "View more projects" (Figma 103:2987) — 384x60 dark pill, centred */
.projects__more{display:flex;align-items:center;justify-content:space-between;
  width:384px;max-width:calc(100% - 40px);height:60px;margin:56px auto 0;
  padding:19px 24px;border:0;border-radius:12px;cursor:pointer;
  background:var(--dark);color:var(--light);
  font-family:var(--font-body);font-size:16px;line-height:1.4;text-transform:uppercase;
  transition:filter .25s ease, transform .25s ease}
.projects__more:hover{filter:brightness(1.14);transform:translateY(-1px)}
.projects__more-p{flex:0 0 auto;width:10px;height:10px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0v10M0 5h10' stroke='%23F1EFE9' stroke-width='1.4'/%3E%3C/svg%3E") center/10px 10px no-repeat}
.project__text{width:930px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.project__title{font-family:var(--font-head);font-weight:500;font-size:48px;line-height:1.25;
  letter-spacing:-.96px;color:var(--dark)}
.project__desc{font-size:18px;line-height:1.4;color:rgba(50,47,41,.7)}
.project__rule{height:1px;width:100%;background:rgba(50,47,41,.12)}
.project__tags{display:flex;flex-wrap:wrap;gap:10px}
.project__tags .tag{background:var(--bg);padding:14px 20px;font-size:14px;text-transform:none}

.project__body{display:flex;flex-direction:column;gap:16px;margin-top:56px}
.project__row{display:flex;align-items:stretch;justify-content:center;gap:16px}
/* each image sits in its own #E7E1D8 rounded container, centred with a frame */
.project__cell{background:var(--bg);border-radius:20px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.project__cell img,.project__cell video{display:block;max-width:86%;max-height:82%;
  width:auto;height:auto;object-fit:contain;border-radius:6px}
.project__row--full .project__cell{width:100%;max-width:1360px;aspect-ratio:1360/900}
.project__row--split .project__cell{flex:1 1 0;min-width:0;aspect-ratio:672/453}

/* ============================================================
   PRICING — one plan, one button
   ============================================================ */
.pricing{width:822px;max-width:calc(100% - 40px);margin:40px auto 0}
/* card: 56/56/32 padding, 40 between the three groups */
.plan{position:relative;overflow:hidden;border-radius:20px;padding:56px 56px 32px;
  display:flex;flex-direction:column;gap:40px}
/* grid + glow, bleeding 20px past the right edge (Figma 130:5139) */
.plan__bg{position:absolute;top:0;right:-20px;width:695px;height:auto;max-width:none;
  pointer-events:none;z-index:0}
.plan>*:not(.plan__bg){position:relative;z-index:1}

.plan__head{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.plan__badge{display:inline-flex;align-items:center;padding:8px 16px;border-radius:41px;
  background:#655B48;color:var(--light);
  font-size:14px;line-height:1.4;text-transform:uppercase}
.plan__price{display:flex;align-items:baseline;gap:24px;white-space:nowrap}
.plan__now{font-family:var(--font-head);font-weight:500;font-size:64px;line-height:1.1;
  letter-spacing:-1.28px;color:var(--light)}
.plan__was-wrap{display:flex;align-items:flex-end;gap:8px}
.plan__was{font-family:var(--font-head);font-weight:500;font-size:64px;line-height:1.1;
  letter-spacing:-1.28px;color:var(--light);opacity:.3;text-decoration:line-through}
.plan__per{font-size:18px;line-height:1.4;color:rgba(241,239,233,.7)}
.plan__note{font-size:16px;line-height:1.4;color:rgba(241,239,233,.7)}

/* dashed box, 4 rows filled column by column (4 left, 3 right) */
.plan__list{list-style:none;display:grid;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;grid-auto-columns:1fr;gap:14px 32px;
  padding:25px;border:1px dashed rgba(241,239,233,.22);border-radius:20px}
.plan__list li{position:relative;padding-left:24px;white-space:nowrap;
  font-size:16px;line-height:1.4;color:var(--light)}
.plan__list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' stroke='%23FDBC41' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat}

.plan__foot{display:flex;flex-direction:column;gap:16px}
.plan__btn{width:100%}
.plan__guarantee{font-size:14px;line-height:1.4;text-align:center;color:rgba(241,239,233,.7)}

/* ============================================================
   FAQ — native details/summary, works without JS
   ============================================================ */
.faq{width:822px;max-width:calc(100% - 40px);margin:96px auto 0}
/* H2, centred (Figma 130:5245) */
.faq__heading{font-family:var(--font-head);font-weight:500;font-size:48px;line-height:1.25;
  letter-spacing:-.96px;color:var(--dark);text-align:center;margin-bottom:40px}
.faq__list{display:flex;flex-direction:column;gap:16px}

/* each item is its own light card, 88px tall when closed.
   The padding lives on the summary, not the card, so the whole width of the
   row is clickable — including what used to be dead space at the edges. */
.faq__item{background:var(--light);border-radius:16px;padding:0;overflow:hidden}
.faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:32px;
  font-family:var(--font-head);font-weight:500;font-size:18px;line-height:1.25;
  letter-spacing:-.36px;color:var(--dark);
  transition:opacity .2s ease}
/* open: the summary gives 24px before the rule, matching the Figma gap */
.faq__item[open] .faq__q{padding-bottom:24px}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{opacity:.7}

/* plus that loses its vertical bar when open, becoming a minus */
.faq__icon{flex:0 0 auto;position:relative;width:24px;height:24px;margin-left:auto}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--dark);
  border-radius:1px}
.faq__icon::before{left:4.25px;top:11.25px;width:15.5px;height:1.5px}
.faq__icon::after{top:4.25px;left:11.25px;width:1.5px;height:15.5px;
  transition:transform .25s ease;transform-origin:center}
.faq__item[open] .faq__icon::after{transform:scaleY(0)}

.faq__rule{display:block;width:736px;max-width:calc(100% - 64px);height:1px;margin:0 32px;
  background:repeating-linear-gradient(to right,
    rgba(50,47,41,.28) 0 4px, transparent 4px 8px)}
.faq__a{margin:24px 32px 0;padding-bottom:32px;
  font-size:16px;line-height:1.4;color:#3D3A33;opacity:.8}

/* ============================================================
   CONTACT
   ============================================================ */
/* Figma 1:932 — CTA card: 132/96 padding, left 561px, right 338px.
   Same wrapper width as the hero (1440 / 20px gutters) so the cards line up. */
.cta{max-width:1440px;margin:0 auto;padding:140px 20px 0}
.cta__card{position:relative;overflow:hidden;border-radius:var(--radius-md);
  display:flex;align-items:flex-start;justify-content:space-between;gap:48px;
  padding:132px 96px}

/* Background geometry copied 1:1 from Figma 1:952.
   Grid (1:953 "bg-footer"): the exported 699x373 svg, anchored to the card's
   top-left at x -3.5 / y -18 — it does NOT span the full card.
   Gradient (1:1000): 1446x1346 box at x 63 / y -784, inner 884x1160 rotated 60deg,
   so only its lower part spills into the top of the card.
   The whole layer sits ABOVE the text, as in Figma — that's what tints "great" warm. */
.cta__bg{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
/* the exported gradient doubles as the comet's "idle" state — JS fades it out on hover */
.cta__glow{will-change:opacity}
/* the comet itself lives UNDER the content so it never washes over the buttons */
.cta__under{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  border-radius:inherit}
/* the export is already cropped to the visible part (699x373 minus the -3.5/-18 offset) */
.cta__grid{position:absolute;left:0;top:0;width:696px;height:355px;max-width:none}
/* exported gradient: its own origin sits at x 63 of the card (matches Figma 1:1000) */
.cta__glow{position:absolute;left:63px;top:0;width:1337px;height:562px;max-width:none}

.cta__left{position:relative;z-index:2;display:flex;flex-direction:column;gap:40px;
  align-items:flex-start;flex:0 0 561px;max-width:561px}
.cta__body{display:flex;flex-direction:column;gap:24px;width:100%}
.cta__title{font-family:var(--font-head);font-weight:500;font-size:70px;line-height:1.2;
  letter-spacing:-1.4px;color:var(--light);word-break:break-word}
.cta__lead{font-size:18px;line-height:1.4;color:rgba(241,239,233,.7);max-width:474px}

/* the label + pill need more room than the old 448px slot */
.cta__btn{width:100%;max-width:561px}
.cta__ask{font-size:16px;line-height:1.4;color:rgba(241,239,233,.7)}
.cta__ask a{color:var(--light);text-decoration:underline;transition:opacity .2s ease}
.cta__ask a:hover{opacity:.8}

.cta__right{position:relative;z-index:2;display:flex;flex-direction:column;gap:48px;
  flex:0 0 338px;max-width:338px}
.cta__block{display:flex;flex-direction:column;gap:16px}
.cta__k{font-family:var(--font-head);font-weight:500;font-size:18px;line-height:1.25;
  letter-spacing:-.36px;color:var(--light)}
.cta__mail{font-size:18px;line-height:1.4;color:rgba(241,239,233,.7);
  text-decoration:underline;transition:color .2s ease}
.cta__mail:hover{color:var(--light)}
.cta__soc{display:flex;align-items:center;justify-content:center;gap:10px;
  height:63px;padding:22px 30px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(241,239,233,.2);color:var(--light);
  font-size:14px;line-height:1.4;text-transform:uppercase;
  transition:background .25s ease, border-color .25s ease}
.cta__soc:hover{background:rgba(241,239,233,.06);border-color:rgba(241,239,233,.4)}
.cta__soc svg{width:24px;height:24px;flex:0 0 24px}

/* Figma 1:1003 — centred, 14px, 70% opacity, 20px above / 32px below */
.footer{display:flex;align-items:center;justify-content:center;
  padding:20px 20px 32px;
  font-size:14px;line-height:1.4;text-align:center;color:rgba(50,47,41,.7)}

/* ============================================================
   SCROLL / ENTRANCE ANIMATIONS
   ============================================================ */
[data-anim]{opacity:0;will-change:transform,opacity;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
[data-anim="fade-up"]{transform:translateY(38px)}
[data-anim="fade-down"]{transform:translateY(-24px)}
[data-anim="zoom"]{transform:scale(.965)}
[data-anim].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .stories__row,.stories__bar i{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- pinned: the three pills merge into one bar ----------
   At rest the header is logo / menu / contact as separate light pills.
   Once the hero is scrolled past it becomes one compact bar: gaps close, the
   background moves to the bar itself and the children go transparent. */
.hdr__ava img,.hdr__menu,.hdr__contact{
  transition:background .3s ease, box-shadow .3s ease, border-radius .3s ease}
/* width comes from the content: each item is text + 32px padding, and the bar
   hugs the result instead of stretching to a fixed track */
.hdr.hdr--pinned{position:fixed;top:8px;left:0;right:0;z-index:210;
  animation:hdrDrop .45s cubic-bezier(.22,.61,.36,1) both;
  gap:0;padding:2px;background:var(--light);border-radius:12px;
  box-shadow:0 10px 30px rgba(50,47,41,.10);
  width:fit-content;max-width:calc(100% - 40px);margin-left:auto;margin-right:auto}
.hdr--pinned .hdr__ava{width:63px;height:63px}
.hdr--pinned .hdr__ava img{background:transparent;border-radius:0;padding:6px}
/* nothing stretches — every block and item sizes to its own content */
.hdr--pinned .hdr__menu,.hdr--pinned .hdr__contact{
  background:transparent;border-radius:0;padding:0;box-shadow:none;flex:0 0 auto}
.hdr--pinned .hdr__item{flex:0 0 auto;padding:22px 32px}
/* hairline dividers: logo | menu | socials — as the first flex child of each
   block, so they inherit the row and need no extra markup */
.hdr--pinned .hdr__menu::before,
.hdr--pinned .hdr__contact::before{
  content:"";flex:0 0 1px;align-self:center;width:1px;height:32px;margin:0 12px;
  background:rgba(50,47,41,.14)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .hdr__item,.hdr__icon{padding:22px 18px}
  .hero__body h1{letter-spacing:-1px}
  .hero__body{padding-top:32px}
  .hero__foot{margin:0 32px 32px}
}
@media (max-width:1024px){
  :root{--pad:28px}
  .hdr__icon{padding:22px 12px}
  .cta__card{padding:96px 48px;gap:40px}
  .cta__title{font-size:52px;letter-spacing:-1.04px}
  .cta__left{flex:1 1 auto;max-width:none}
  .cta__right{flex:0 0 300px}
  .project__title{font-size:40px}
  /* ===== About — mobile (Figma 1:1249): centred text, boxed stats, centred tags ===== */
  .about{flex-direction:column;align-items:center;gap:48px;padding:72px 24px}
  .about__content{display:contents}           /* unwrap so text / stats / tags reorder */
  .about__text{order:1;width:100%;align-items:center;text-align:center;gap:24px}
  .about__title{font-size:36px;letter-spacing:-.72px}
  .about__content p{font-size:18px;max-width:none}
  .about__grid{display:none}
  /* stats in a bordered box with dividers + corner "+" marks */
  .about__stats{order:2;position:relative;width:100%;max-width:460px;height:152px;overflow:visible;
    border:1px solid rgba(50,47,41,.1);display:flex;flex-direction:row;flex-wrap:nowrap;
    align-items:center;justify-content:space-between;padding:0 8px;gap:0}
  /* the "+" corner marks live on a ::before that extends 7px past the box,
     so each cross is centred on a corner and shows in full (a background on
     the box itself would be clipped to the border-box and only show a quarter) */
  .about__stats::before{content:"";position:absolute;inset:-7px;pointer-events:none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23322F29' stroke-opacity='.45'/%3E%3C/svg%3E") 0 0/14px 14px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23322F29' stroke-opacity='.45'/%3E%3C/svg%3E") 100% 0/14px 14px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23322F29' stroke-opacity='.45'/%3E%3C/svg%3E") 0 100%/14px 14px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23322F29' stroke-opacity='.45'/%3E%3C/svg%3E") 100% 100%/14px 14px no-repeat}
  .stat{position:static;left:auto;top:auto;flex:1 1 0;min-width:0;height:100%;padding:0 14px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
  .stat + .stat{border-left:1px solid rgba(50,47,41,.12)}
  .stat__num{font-size:32px;letter-spacing:-.64px}
  .stat__label{font-size:14px}
  /* tags — centred, lowercase, 14px */
  .tags{order:3;width:100%;justify-content:center;gap:10px}
  .tag{padding:16px 20px;font-size:14px;gap:10px;text-transform:none}
  .tag svg,.tag img{width:24px;height:24px}
}
@media (max-width:900px){
  /* consistent 16px gutters everywhere */
  .hdr{width:calc(100% - 32px)}
  .hdr-slot{padding-top:16px;height:83px}

  /* header collapses to: avatar + Contact me + burger */
  .hdr__menu{display:none}
  .hdr .hdr__icon{display:none}
  .hdr__burger{display:flex}
  .hdr__contact{flex:1 1 auto;gap:4px}
  .hdr__cta{flex:1 1 auto}
  /* pinned bar keeps the full width here — hugging the content would leave a
     narrow pill floating over the page */
  .hdr.hdr--pinned{width:calc(100% - 32px);max-width:none}
  .hdr--pinned .hdr__contact{flex:1 1 auto}
  /* the CTA takes the slack so the burger lands on the right edge.
     Needs the two-class selector to beat .hdr--pinned .hdr__item{flex:0 0 auto} */
  .hdr--pinned .hdr__cta{flex:1 1 auto}

  /* stacked hero — dark card (text + button), then stories card */
  .hero{flex-direction:column;padding:12px 16px 16px;gap:16px}   /* 12px gap under header */
  .hero__left,.hero__right{width:100%;flex:none;max-height:none}
  .hero__left{height:auto;min-height:0}
  .hero__right{height:675px;min-height:0}      /* Figma stories-mobile = 675px */
  .hero__body{padding:96px 20px 0;gap:26px}   /* Figma: body starts 96px from card top */
  .hero__body h1{font-size:clamp(30px,8.4vw,40px);letter-spacing:-.02em}
  .hero__divider{display:none}                 /* no divider on mobile */
  .hero__sub{width:100%;max-width:none;padding:0 8px}
  .hero__bg{width:100%}
  .hero__foot{margin:32px 16px 16px}
  .hero__btn{padding:19px 16px}
  .hero__btn-mid{gap:10px}
  .hero__btn-label{font-size:16px}
  .hero__slotpill{padding:6px 12px 6px 6px;gap:6px}
  .hero__slotpill-txt{font-size:12px}
  /* shorter labels on phones — e.g. "Claim a slot" instead of the full one */
  .only-desktop{display:none}
  .only-mobile{display:inline}
  /* stories — match Figma stories-mobile (full 245px images, rows at 121/386) */
  .stage{padding:96px 0 20px}                   /* clears the mobile nav, centres rows */
  .stage__row{gap:20px;height:245px;margin-left:20px}
  .stage__row img{height:245px;max-width:none}
  .stories__nav{left:20px;top:20px;width:calc(100% - 40px)}
  /* One rhythm on phones: every section opens with 80px of air and adds no
     bottom spacing of its own, so gaps never stack up to 120–130px. */
  .about{padding:80px 16px 0}
  /* projects — mobile (Figma 1:1355): left-aligned text, one image column */
  .section-label{width:100%;max-width:none;align-items:center;gap:16px;
    margin:80px auto 0;padding:0 16px}
  .section-label__rule{width:calc(100% - 32px)}
  /* the label is inside the card now — the card's own padding is the gutter */
  .projects__label{width:100%;max-width:none;align-items:center;gap:16px;margin:0 auto 32px}
  .how{width:100%;max-width:none;margin:80px auto 0;padding:0 16px;gap:32px}
  .how__heading{font-size:32px;letter-spacing:-.64px}
  .how__row{flex-direction:column;gap:12px}
  .how__card{padding:24px 20px;gap:24px}
  /* keep the artwork at its natural 239x191 so it sits flush left with the
     text — stretching the box letterboxed the svg and centred it */
  .how__viz{width:239px;max-width:100%;height:191px}
  .how__viz--slots,.how__viz--queue,.how__viz--build{justify-content:flex-start}
  .how__title{white-space:normal}
  .how__desc{font-size:16px}
  .how__desc br{display:none}
  /* pricing / faq — single column on phones */
  .pricing,.faq{width:100%;max-width:none;margin:24px auto 0;padding:0 16px}
  .plan{padding:32px 20px;gap:32px}
  /* keep the whole price on one line — shrink the type instead of stacking */
  .plan__price{gap:12px}
  .plan__now,.plan__was{font-size:34px;letter-spacing:-.68px}
  .plan__was-wrap{gap:6px}
  .plan__per{font-size:15px}
  .plan__badge{font-size:12px;padding:7px 14px}
  .plan__note{font-size:15px}
  .plan__list{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;
    gap:12px;padding:20px}
  .plan__list li{white-space:normal}
  /* the label + pill already fill the width here — drop the decorative plus
     signs so everything stays on one line down to small phones */
  .plan__btn{padding:19px 16px;justify-content:center}
  .plan__btn .btn-call__p{display:none}
  .plan__bg{width:520px;right:-40px}
  .faq{margin:80px auto 0}
  .faq__heading{font-size:32px;letter-spacing:-.64px;margin-bottom:24px}
  .faq__list{gap:12px}
  .faq__item{padding:0}
  .faq__q{font-size:16px;gap:12px;padding:20px}
  .faq__item[open] .faq__q{padding-bottom:16px}
  .faq__rule{margin:0 20px;max-width:calc(100% - 40px)}
  .faq__a{font-size:15px;margin:16px 20px 0;padding-bottom:20px}
  .projects{margin:80px 16px 0;padding:24px 16px 48px}
  .project{padding-top:56px}
  .project:first-of-type{padding-top:0}   /* the label's margin is the gap now */
  .project__text{gap:24px}
  .project__title{font-size:26px;letter-spacing:-.52px}
  .project__desc{font-size:14px;line-height:1.4;color:rgba(50,47,41,.7)}
  .project__tags{justify-content:flex-start}
  .project__body{margin-top:32px;gap:16px}
  .project__row{flex-direction:column;gap:16px}          /* every image in its own row */
  /* reset the desktop flex/aspect so stacked cells don't collapse — all images show */
  .project__row--full .project__cell,.project__row--split .project__cell{
    flex:0 0 auto;width:100%;max-width:none;aspect-ratio:311/216}
  /* ===== CTA — mobile (Figma 1:1595): stacked, centred, 56/16 padding ===== */
  .cta{padding:80px 16px 0}
  .cta__card{flex-direction:column;align-items:stretch;gap:56px;padding:56px 16px}
  .cta__left{flex:0 0 auto;max-width:none;width:100%;gap:40px;align-items:center;text-align:center}
  .cta__title{font-size:40px;line-height:1.25;letter-spacing:-.8px}
  .cta__lead{font-size:16px;max-width:none}
  /* same treatment as the Pricing button: drop the plus signs so the label
     and the pill stay on one line on phones */
  .cta__btn{width:100%;max-width:none;padding:19px 16px;justify-content:center}
  .cta__btn .btn-call__p{display:none}
  .cta__right{flex:0 0 auto;max-width:none;width:100%;gap:32px;align-items:center}
  .cta__block{width:100%;text-align:center}
  .cta__block--soc{gap:16px}
  /* Figma 1:1614 — same grid; gradient frame moves to x -247 / y -974,
     which puts the exported svg's own origin at -247 / -190 */
  .cta__glow{left:-247px;top:-190px}
}
@media (max-width:560px){
  .hdr__contact{flex:1 1 auto}
  .hero__body h1{font-size:40px;letter-spacing:-.6px}
  .hero__sub{font-size:15px}
  .hero__btn{padding:19px 14px}
  /* narrow phones: tighten label + pill so the row still fits on one line
     (checked down to a 320px screen, i.e. a 248px card) */
  .hero__btn-label{font-size:14px}
  .hero__btn-mid{gap:8px}
  .hero__slotpill{padding:5px 10px 5px 5px;gap:5px}
  .hero__slotpill-txt{font-size:11px}
  .plan__btn,.cta__btn{padding:19px 10px}
  .project__title{font-size:26px}
  .cta__title{font-size:36px;letter-spacing:-.72px}
  .btn{font-size:12px;padding:16px 20px}
}