/* ==========================================================================
   STUDIO PORTFOLIO — design system
   Warm putty ground + acid accent, heavy grotesque display, card-rail layout.
   Author: original build. No third-party site source reused.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --bg:        #d6d2c5;
  --bg-warm:   #dedbd0;
  --card:      rgba(255,255,255,.28);
  --card-line: rgba(20,20,20,.08);
  --ink:       #141414;
  --ink-2:     #46443d;
  --ink-3:     #757268;
  --acid:      #f2f229;
  --dark:      #070707;
  --dark-2:    #101010;
  --dark-card: rgba(255,255,255,.05);
  --paper:     #f7f6f1;

  --rail-w: 17.5rem;
  --gutter: clamp(1.25rem, 3vw, 3.5rem);
  --radius:  14px;
  --radius-lg: 22px;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

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

/* 2. RESET ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--acid); color:var(--ink); }

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

/* 3. TYPE ------------------------------------------------------------------ */
.display{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h-xl{ font-size:clamp(2.75rem,6.4vw,6.25rem); }
.h-lg{ font-size:clamp(2.25rem,4.6vw,4.25rem); }
.h-md{ font-size:clamp(1.5rem,2.2vw,2.125rem); letter-spacing:-.025em; }
.h-sm{ font-size:clamp(1.125rem,1.5vw,1.4rem); letter-spacing:-.02em; }

.lead{ font-size:clamp(1rem,1.15vw,1.125rem); color:var(--ink-2); line-height:1.62; }
.small{ font-size:.875rem; color:var(--ink-2); }

/* Eyebrow pill */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.44rem 1rem;
  border:1.5px solid var(--ink);
  border-radius:100px;
  font-family:var(--f-display);
  font-weight:700; font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.eyebrow--light{ border-color:rgba(255,255,255,.5); color:#fff; }

/* Split-text primitives (JS injects) */
.line-mask{ display:block; overflow:hidden; }
.line-inner{ display:block; will-change:transform; }

/* 4. BUTTONS --------------------------------------------------------------- */
.btn{
  --btn-bg:var(--acid); --btn-fg:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:1rem 1.9rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border-radius:10px;
  font-family:var(--f-display); font-weight:800; font-size:1rem;
  letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); border-radius:inherit;
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--acid); }
.btn:hover::after{ transform:translateY(0); }
.btn--ghost{ --btn-bg:transparent; box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover{ color:var(--bg); }
.btn--sm{ padding:.72rem 1.25rem; font-size:.875rem; }

/* 5. CARD SURFACE ---------------------------------------------------------- */
.surface{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
}

/* 6. LEFT RAIL ------------------------------------------------------------- */
.rail{
  position:fixed; top:0; left:0; z-index:60;
  width:var(--rail-w); height:100dvh;
  padding:1.1rem;
  display:flex; flex-direction:column; gap:.6rem;
  pointer-events:none;
}
.rail.is-live{ pointer-events:auto; }
/* each card flies in from its hero counterpart — JS drives x/y + blur.
   In flight the cards are ghosts over the hero, so they must not eat clicks. */
.rail > *{ pointer-events:none; opacity:0; will-change:transform,filter,opacity; }
.rail.is-live > *{ pointer-events:auto; }

.rail-head{ padding:.9rem 1rem 1rem; }
.rail-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.wordmark{
  display:inline-flex; align-items:flex-start;
  background:var(--acid); padding:.3rem .55rem .34rem; border-radius:7px;
  font-family:var(--f-display); font-weight:900; font-size:1.4rem;
  letter-spacing:-.045em; line-height:1;
}
.wordmark sup{ font-size:.5em; line-height:1; margin-left:.1em; }
.rail-social{ display:flex; gap:.35rem; }
.ic-btn{
  width:26px; height:26px; display:grid; place-items:center;
  background:var(--ink); color:var(--bg); border-radius:6px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.ic-btn:hover{ background:var(--acid); color:var(--ink); transform:translateY(-2px); }
.ic-btn svg{ width:12px; height:12px; fill:currentColor; }
.rail-blurb{ margin-top:1.1rem; font-size:.8rem; line-height:1.5; color:var(--ink-2); }

/* stats */
.rail-stats{ display:grid; grid-template-columns:1fr 1fr; }
.stat{ padding:1rem .9rem; text-align:left; }
.stat + .stat{ border-left:1px solid var(--card-line); }
.stat-fig{
  font-family:var(--f-display); font-weight:800; font-size:1.65rem;
  color:var(--acid); line-height:1; letter-spacing:-.04em;
  -webkit-text-stroke:.9px rgba(20,20,20,.5);
}
.stat-label{
  margin-top:.5rem; font-family:var(--f-display); font-weight:700;
  font-size:.72rem; line-height:1.25; letter-spacing:-.01em;
}

/* nav */
.rail-nav{ padding:.5rem; flex:0 0 auto; }
.rail-nav a{
  position:relative; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .7rem; border-radius:9px;
  font-family:var(--f-display); font-weight:800; font-size:.82rem;
  letter-spacing:.005em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.rail-nav a .nav-bg{
  position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--acid); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease);
}
.rail-nav a{ isolation:isolate; }
.rail-nav a:hover .nav-bg,
.rail-nav a.is-active .nav-bg{ transform:scaleX(1); }
.rail-nav svg{ width:15px; height:15px; flex:none; }

/* marquee */
.rail-marquee{ overflow:hidden; padding:.85rem 0; }
.marquee-track{ display:flex; gap:1.6rem; width:max-content; will-change:transform; }
.marquee-track span{
  font-family:var(--f-display); font-weight:800; font-size:.82rem;
  letter-spacing:-.01em; color:var(--ink); opacity:.72; white-space:nowrap;
}

/* email */
.rail-mail{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.72rem .9rem; width:100%; text-align:left;
  font-size:.82rem; color:var(--ink-2);
  transition:color .3s var(--ease);
}
.rail-mail:hover{ color:var(--ink); }
.rail-mail svg{ width:14px; height:14px; flex:none; stroke:currentColor; }
.rail-cta{ width:100%; }

/* 7. PAGE SHELL ------------------------------------------------------------ */
.shell{ position:relative; }
.section{ position:relative; padding:clamp(5rem,11vh,8.5rem) var(--gutter); }
.wrap{ max-width:82rem; margin-inline:auto; }

@media (min-width:1100px){
  .shell{ padding-left:var(--rail-w); }
  .hero{ margin-left:calc(var(--rail-w) * -1); }
}

/* 8. PRELOADER ------------------------------------------------------------- */
.preload{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; background:var(--bg);
}
.preload-mark{
  display:flex; gap:clamp(.1rem,.5vw,.6rem);
  width:100%; justify-content:center; align-items:center;
}
/* each letter gets its own mask so it can slide up from nothing */
.preload-mark span{
  display:block; overflow:hidden;
  padding-block:.04em;          /* breathing room so glyph tops never clip */
}
.preload-mark i{
  display:block; font-style:normal;
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(4.5rem,32vw,34rem); line-height:.8;
  letter-spacing:-.05em; color:var(--acid);
  transform:translateY(110%);
}
.preload-bar{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:2.2rem;
  height:2px; background:rgba(20,20,20,.14); overflow:hidden;
}
.preload-bar i{
  display:block; height:100%; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
}

/* 9. HERO ------------------------------------------------------------------ */
.hero{
  position:relative; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(1rem,3vh,2.2rem) var(--gutter) 2.2rem;
  overflow:hidden;
}
/* wordmark sits in flow so the nav can never collide with it */
.hero-mark{
  display:flex; justify-content:center; gap:clamp(.2rem,.9vw,1rem);
  pointer-events:none; position:relative; z-index:1;
}
.hero-mark span{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(5rem,23.5vw,21rem); line-height:.78;
  letter-spacing:-.05em; color:var(--acid);
}
.hero-portrait{
  position:absolute; left:50%; bottom:0; translate:-50% 0;
  width:clamp(360px,52vw,860px); z-index:2; pointer-events:none;
}
.hero-portrait img{ width:100%; height:auto; }

.hero-inner{ position:relative; z-index:3; display:contents; }
/* translucent bar keeps the nav readable where it crosses the portrait */
.hero-nav{
  position:relative; z-index:3;
  display:none; align-items:center; justify-content:space-between;
  gap:1rem; margin:clamp(1rem,3vh,2rem) auto 0; width:100%;
  padding:.85rem clamp(1.2rem,2.5vw,2.2rem);
  background:rgba(255,255,255,.26);
  border:1px solid var(--card-line);
  backdrop-filter:blur(10px);
  border-radius:100px;
  font-family:var(--f-display); font-weight:800; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.01em;
}
.hero-nav a{ position:relative; }
.hero-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.hero-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hero-nav .sep{ width:1px; height:14px; background:rgba(20,20,20,.28); }
@media (min-width:1100px){ .hero-nav{ display:flex; } }

.hero-grid{
  position:relative; z-index:3;
  margin-top:auto;            /* pin the content row to the bottom of the hero */
  display:grid; gap:1.5rem;
  grid-template-columns:1fr;
  align-items:end;
}
@media (min-width:1100px){
  .hero-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) minmax(0,.9fr); }
}
.hero-title{ position:relative; text-align:center; }
/* soft scrim guarantees the light headline reads over the portrait at any width */
.hero-title::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; translate:-50% -50%;
  width:118%; aspect-ratio:1.9/1;
  background:radial-gradient(ellipse at center,rgba(6,6,6,.34) 0%,rgba(6,6,6,.14) 42%,rgba(6,6,6,0) 68%);
  pointer-events:none;
}
.hero-title h1{
  max-width:15ch; margin-inline:auto;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.4rem,4.9vw,4.4rem); line-height:.94; letter-spacing:-.04em;
  color:var(--paper);
  text-shadow:0 2px 26px rgba(0,0,0,.35);
}
.hero-cta{ display:flex; gap:.7rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }

.hero-badges{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.badge-card{ display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; }
.badge-fig{
  font-family:var(--f-display); font-weight:800; font-size:2.1rem;
  color:var(--acid); line-height:1; letter-spacing:-.04em;
  -webkit-text-stroke:.9px rgba(20,20,20,.5);
}
.badge-txt{ font-family:var(--f-display); font-weight:700; font-size:.78rem; line-height:1.25; }

.hero-attrs{ padding:1rem 1.2rem; }
.hero-attrs li{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--f-display); font-weight:800; font-size:1.1rem;
  letter-spacing:-.02em; color:var(--ink);
}
.hero-attrs li + li{ margin-top:.45rem; }
.hero-attrs .dot{ width:16px; height:16px; flex:none; fill:var(--acid); }
.hero-note{ font-size:.9rem; line-height:1.55; color:var(--ink-2); max-width:24rem; }
.hero-sig{ font-size:.95rem; line-height:1.6; }

/* 10. JOURNEY -------------------------------------------------------------- */
.journey{ position:relative; }
.journey-head{ max-width:44rem; }
.journey-head .eyebrow{ margin-bottom:1.4rem; }
.journey-head p{ margin-top:1.5rem; max-width:28rem; }

.timeline{ position:relative; margin-top:clamp(3rem,8vh,6rem); }
.timeline-svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.timeline-path{
  fill:none; stroke:var(--ink); stroke-width:1.6;
  stroke-linecap:round;
}
.timeline-node{ fill:var(--acid); stroke:var(--ink); stroke-width:1.4; }

.tl-row{ position:relative; display:grid; grid-template-columns:1fr; margin-bottom:clamp(2rem,6vh,4.5rem); }
@media (min-width:900px){
  /* Scattered across the surface: varied horizontal offsets and an uneven
     vertical rhythm, so no two cards share a column or a step height. */
  .tl-row{ display:block; }
  .tl-row .tl-card{ margin-left:var(--tl-x,0); }
  .tl-row:nth-of-type(1){ --tl-x:57%; margin-bottom:2rem;   }
  .tl-row:nth-of-type(2){ --tl-x:1%;  margin-bottom:5.5rem; }
  .tl-row:nth-of-type(3){ --tl-x:55%; margin-bottom:2.5rem; }
  .tl-row:nth-of-type(4){ --tl-x:3%;  margin-bottom:6.5rem; }
  .tl-row:nth-of-type(5){ --tl-x:58%; margin-bottom:3rem;   }
  .tl-row:nth-of-type(6){ --tl-x:0;   margin-bottom:0;      }
}
/* more opaque than the other surfaces so the path reads as passing behind */
.tl-card{
  padding:1.6rem 1.7rem 1.4rem; max-width:27rem;
  background:rgba(233,230,220,.94);
}
.tl-year{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.6rem,4.4vw,4rem); line-height:.85; letter-spacing:-.05em;
  color:var(--acid); -webkit-text-stroke:1px rgba(20,20,20,.18);
}
.tl-card h3{ margin-top:.9rem; }
.tl-card p{ margin-top:.6rem; color:var(--ink-2); font-size:.95rem; }
.tl-foot{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.tl-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:rgba(20,20,20,.1); display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:.9rem;
}
.tl-meta{ font-size:.86rem; line-height:1.3; }
.tl-meta b{ font-weight:600; display:block; }
.tl-meta span{ color:var(--ink-3); }
.tl-foot .btn{ margin-left:auto; }

/* 11. PROJECTS (dark, pinned horizontal) ----------------------------------- */
.work{ background:var(--dark); color:var(--paper); }
.work .lead{ color:rgba(247,246,241,.62); }
.work-head{
  display:grid; gap:2rem; align-items:start;
  padding:clamp(4.5rem,10vh,7rem) var(--gutter) clamp(2.5rem,6vh,4rem);
}
@media (min-width:960px){ .work-head{ grid-template-columns:1.5fr 1fr; gap:4rem; } }
.work-head h2{ color:var(--paper); }

.work-viewport{ overflow:hidden; padding-bottom:clamp(4rem,9vh,7rem); }
.work-track{ display:flex; gap:1.2rem; padding-inline:var(--gutter); width:max-content; }
.work-card{
  position:relative; width:min(78vw,26rem); aspect-ratio:3/3.55;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--dark-2); border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.6rem; isolation:isolate;
}
.work-card-media{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform .8s var(--ease);
}
.work-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(5,5,5,.94) 8%,rgba(5,5,5,.35) 55%,rgba(5,5,5,.15));
}
.work-card:hover .work-card-media{ transform:scale(1); }
.work-num{
  position:absolute; top:1.1rem; left:1.1rem;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);
  font-family:var(--f-display); font-weight:700; font-size:.78rem;
}
.work-tags{ position:absolute; top:1.1rem; right:1.1rem; display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.work-tags span{
  padding:.32rem .68rem; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  font-size:.7rem; font-weight:500; white-space:nowrap;
}
.work-card h3{ font-family:var(--f-display); font-weight:800; font-size:1.75rem; letter-spacing:-.03em; }
.work-card p{ margin-top:.5rem; font-size:.9rem; color:rgba(247,246,241,.66); max-width:20rem; }
.work-arrow{
  position:absolute; right:1.4rem; bottom:1.4rem;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; background:var(--acid); color:var(--ink);
  transition:transform .4s var(--ease);
}
.work-card:hover .work-arrow{ transform:rotate(45deg) scale(1.06); }
.work-arrow svg{ width:16px; height:16px; stroke:currentColor; }

/* 12. CAPABILITIES --------------------------------------------------------- */
.capa{ text-align:center; overflow:hidden; }
.capa-giant{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(3.5rem,13.5vw,12rem); line-height:.82; letter-spacing:-.05em;
  color:var(--ink);
}
.capa-body{ margin-top:clamp(2rem,6vh,4rem); }
.capa-body .eyebrow{ margin-bottom:1.6rem; }
.capa-statement{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem,3.4vw,3rem); line-height:1.14; letter-spacing:-.035em;
  max-width:52rem; margin-inline:auto;
}
.capa-chip{
  display:inline-grid; place-items:center; vertical-align:middle;
  width:1.55em; height:1.15em; margin:0 .12em;
  border-radius:.28em; background:var(--acid);
}
.capa-chip svg{ width:.7em; height:.7em; }

.capa-body,.capa-giant{ position:relative; z-index:2; }

/* 13. SERVICES ------------------------------------------------------------- */
.svc-head{ max-width:38rem; }
.svc-head p{ margin-top:1.4rem; }
.svc-grid{
  margin-top:clamp(2.5rem,7vh,4.5rem);
  display:grid; gap:.9rem; grid-template-columns:1fr;
  padding:.9rem; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.16); border:1px solid var(--card-line);
}
@media (min-width:900px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-card{ padding:1.8rem 1.6rem; display:flex; flex-direction:column; }
.svc-icon{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--acid); border-radius:9px; margin-bottom:1rem;
}
.svc-icon svg{ width:20px; height:20px; }
.svc-card h3{ font-family:var(--f-display); font-weight:800; font-size:1.4rem; letter-spacing:-.03em; }
.svc-price{
  margin-top:1.5rem; font-family:var(--f-display); font-weight:800;
  font-size:2.2rem; letter-spacing:-.04em; line-height:1;
}
.svc-price small{ font-size:.9rem; font-weight:500; color:var(--ink-2); letter-spacing:0; }
.svc-card > p{ margin-top:1.2rem; color:var(--ink-2); font-size:.95rem; }
.svc-list{ margin-top:1.6rem; display:grid; gap:.8rem; }
.svc-list li{ display:flex; gap:.7rem; font-size:.95rem; line-height:1.45; }
.svc-list svg{ width:14px; height:14px; flex:none; margin-top:.28rem; }
.svc-foot{
  margin-top:auto; padding-top:1.8rem;
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.9rem; color:var(--ink-2); line-height:1.45;
}
.svc-foot svg{ width:15px; height:15px; flex:none; margin-top:.18rem; stroke:currentColor; }

/* 14. CTA ------------------------------------------------------------------ */
.cta-title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3rem,8.5vw,7.5rem); line-height:.94; letter-spacing:-.045em;
}
.cta-title .ghost{ color:rgba(255,255,255,.62); }
.cta-body{ margin-top:clamp(2rem,6vh,3.5rem); max-width:30rem; }
.cta-chat{ display:flex; align-items:center; gap:.9rem; margin-top:2.5rem; }
.cta-avatar{ width:46px; height:46px; border-radius:50%; background:rgba(20,20,20,.12); flex:none; }
.cta-bubble{
  padding:.85rem 1.3rem; border-radius:100px;
  background:var(--card); border:1px solid var(--card-line);
  font-size:1rem;
}
.cta-actions{ margin-top:1rem; margin-left:calc(46px + .9rem); }

/* 15. TESTIMONIALS --------------------------------------------------------- */
.tst-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.tst-progress{ display:flex; gap:.3rem; }
.tst-progress i{
  display:block; width:34px; height:4px; border-radius:100px;
  background:rgba(20,20,20,.18); transition:background .4s var(--ease);
}
.tst-progress i.on{ background:var(--acid); }

.tst-viewport{
  position:relative; margin-top:clamp(2.5rem,7vh,4rem);
  overflow:hidden; cursor:grab; touch-action:pan-y;
}
.tst-viewport.is-drag{ cursor:grabbing; }
.tst-track{ display:flex; gap:1.1rem; width:max-content; will-change:transform; }
.tst-card{
  width:min(88vw,38rem); padding:2.2rem 2.2rem 2rem;
  display:flex; flex-direction:column;
}
.tst-card > svg.q{ width:34px; height:34px; align-self:flex-end; }
.tst-card h3{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.4rem,2.2vw,2rem); letter-spacing:-.035em; line-height:1.05; }
.tst-quote{ margin-top:1.4rem; font-size:1.02rem; line-height:1.6; color:var(--ink-2); }
.tst-person{ display:flex; align-items:center; gap:.9rem; margin-top:auto; padding-top:2.5rem; }
.tst-avatar{ width:52px; height:52px; border-radius:50%; background:rgba(20,20,20,.1); flex:none; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; }
.tst-person b{ display:block; font-weight:600; font-size:1rem; }
.tst-person span{ display:block; font-size:.9rem; color:var(--ink-3); }

.drag-cue{
  position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:5;
  width:86px; height:86px; border-radius:50%; background:var(--acid);
  display:grid; place-items:center; pointer-events:none;
  font-family:var(--f-display); font-weight:800; font-size:.82rem; letter-spacing:.04em;
  transition:opacity .3s var(--ease), scale .3s var(--ease);
}
.tst-viewport.is-drag .drag-cue{ opacity:0; scale:.8; }

/* 16. FAQ ------------------------------------------------------------------ */
.faq-mark{ position:relative; margin-bottom:clamp(2rem,7vh,5rem); }
.faq-mark svg{ width:100%; height:auto; }
.faq-grid{ display:grid; gap:.7rem; grid-template-columns:1fr; margin-top:clamp(2.5rem,7vh,4rem); }
@media (min-width:900px){ .faq-grid{ grid-template-columns:1fr 1fr; gap:.7rem 1rem; } }
.faq-item{ overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.35rem 1.5rem; text-align:left;
  font-family:var(--f-display); font-weight:800; font-size:clamp(.95rem,1.2vw,1.1rem);
  letter-spacing:-.02em;
}
.faq-ic{ position:relative; width:16px; height:16px; flex:none; }
.faq-ic::before,.faq-ic::after{
  content:""; position:absolute; inset:50% 0 auto; height:2px; background:var(--ink);
  translate:0 -50%; transition:transform .4s var(--ease);
}
.faq-ic::after{ rotate:90deg; }
.faq-item.open .faq-ic::after{ transform:scaleX(0); }
.faq-a{ height:0; overflow:hidden; }
.faq-a p{ padding:0 1.5rem 1.5rem; color:var(--ink-2); font-size:.95rem; max-width:34rem; }

/* 17. FOOTER --------------------------------------------------------------- */
.foot{
  padding:2.5rem var(--gutter);
  border-top:1px solid var(--card-line);
  display:flex; gap:1rem; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  font-size:.85rem; color:var(--ink-2);
}

/* 18. MOBILE NAV ----------------------------------------------------------- */
.mnav{
  position:fixed; z-index:70; left:var(--gutter); right:var(--gutter); bottom:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.6rem .6rem .6rem 1rem;
  background:rgba(214,210,197,.86); backdrop-filter:blur(14px);
  border:1px solid var(--card-line); border-radius:100px;
}
@media (min-width:1100px){ .mnav{ display:none; } }
.mnav .wordmark{ font-size:1.05rem; }

.msheet{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  padding:var(--gutter); display:flex; flex-direction:column; gap:.4rem;
  justify-content:center;
  clip-path:inset(0 0 100% 0); pointer-events:none;
}
.msheet.open{ pointer-events:auto; }
.msheet a{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2rem,9vw,3.2rem); letter-spacing:-.04em; text-transform:uppercase;
}
.msheet-close{ position:absolute; top:var(--gutter); right:var(--gutter); font-size:1rem; }

/* 19. REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rail > *{ opacity:1; transform:none; filter:none; }
  .preload{ display:none; }
  .preload-mark span,.line-inner{ transform:none !important; }
}