/* ===================================================================
   DEEPLOY — visual language cloned from thefirstthelast.agency:
   oversized tight-tracked type, pure white/grey/pink/black palette,
   no filled buttons anywhere (text-links w/ underline + arrow only),
   giant stacked cards, scattered floating tags, huge closing wordmark.
=================================================================== */

:root{
  --ink:#1e1e1e;
  --black:#141414;
  --white:#ffffff;
  --grey:#f1f1ef;
  --grey-soft:#f8f8f6;
  --line:#e2e0db;
  --mute:rgba(30,30,30,.46);
  --mute-on-dark:rgba(255,255,255,.45);
  --pink:#fa3ef7;
  --pink-deep:#fc95fb;
  --pink-pale:#fee3fe;
  --gradient: linear-gradient(180deg,var(--white) 0%,var(--pink-pale) 100%);
  --gradient-rev: linear-gradient(0deg,var(--white) 0%,var(--pink-pale) 100%);

  --font:"Switzer","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Switzer","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.32,0,.12,1);
  --t:.5s var(--ease);
  --t-fast:.3s var(--ease);
  --t-slow:.9s var(--ease);

  --z-header:1000;
  --z-menu:1100;
  --z-cursor:1500;

  --gutter:clamp(20px,4vw,64px);
  --container:1400px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  font-weight:400;
  font-size:16px;
  line-height:1.4;
}
body.no-scroll{overflow:hidden;height:100vh;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;padding:0;}
::selection{background:var(--black);color:var(--white);}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.container--wide{max-width:1680px;}

/* ---------- Type ---------- */
.h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,7.5vw,7.4rem);line-height:.92;letter-spacing:-.02em;margin:0;}
.h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4.9vw,4.6rem);line-height:.98;letter-spacing:-.02em;margin:0;}
.h3{font-weight:600;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.1;letter-spacing:-.02em;margin:0;}
.num{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.lead{font-size:clamp(1rem,1.15vw,1.22rem);line-height:1.55;color:var(--mute);font-weight:400;max-width:32em;}
.tag-label{font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--mute);}

/* ---------- Links: the ONLY interactive-affordance style in this system ---------- */
.link{
  display:inline-flex; align-items:baseline; gap:.4em;
  font-weight:500; position:relative; white-space:nowrap;
}
.link__text{position:relative; display:inline-block;}
.link__text::after{
  content:""; position:absolute; left:0; bottom:-.14em; width:0; height:1px;
  background:currentColor; transition:width var(--t-fast);
}
.link:hover .link__text::after{width:100%;}
.link__arrow{width:.85em; height:.85em; flex:0 0 auto; align-self:center; opacity:.45; transform:scale(.78); transition:opacity var(--t-fast), transform var(--t-fast);}
.link:hover .link__arrow{opacity:1; transform:scale(1);}
.link--lg{font-size:clamp(1.1rem,1.7vw,1.6rem);}
.link--sm{font-size:.92rem;}
.link--pink{color:var(--pink);}

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Cursor dot ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--ink); pointer-events:none; z-index:var(--z-cursor);
  transform:translate(-50%,-50%); opacity:0; mix-blend-mode:difference;
  transition:opacity .3s ease, width .25s var(--ease), height .25s var(--ease);
}
.cursor-dot.active{opacity:1;}
.cursor-dot.grow{width:52px;height:52px;background:var(--white);}
.cursor-dot.hide-for-lens{opacity:0;}
@media (hover:none),(pointer:coarse){.cursor-dot{display:none;}}

/* =========================== HEADER =========================== */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:var(--z-header);
  padding:clamp(16px,1.6vw,22px) 0;
  transition:transform var(--t-fast), background var(--t-fast), padding var(--t-fast), box-shadow var(--t-fast);
}
.header.scrolled{background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 var(--line); padding:12px 0;}
.header.hide{transform:translateY(-105%);}
.header__wrap{display:flex; align-items:center; gap:24px;}
.header__logo{width:clamp(108px,8.6vw,128px); flex:0 0 auto; color:var(--ink); transition:opacity var(--t-fast);}
.header__logo:hover{opacity:.6;}
.header__info{flex:0 0 auto; margin-left:clamp(20px,3vw,56px); transition:opacity var(--t-fast);}
.header.scrolled .header__info{opacity:0; pointer-events:none;}
.header__info-title{font-size:.82rem; font-weight:500; margin-bottom:2px;}
.header__info-sub{font-size:.78rem; color:var(--mute);}
@media (max-width:1080px){.header__info{display:none;}}
.header__nav{display:flex; align-items:center; justify-content:center; gap:clamp(16px,1.8vw,32px); flex:1;}
.header__nav a{font-size:.92rem; font-weight:500; position:relative;}
.header__nav a::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:currentColor; transition:width var(--t-fast);}
.header__nav a:hover::after{width:100%;}
@media (max-width:1080px){.header__nav{display:none;}}
.header__connect{flex:0 0 auto;}
@media (max-width:1080px){.header__connect{display:none;}}
.header__burger{display:none; flex-direction:column; justify-content:center; gap:6px; width:30px; height:30px; margin-left:auto; position:relative; z-index:5;}
@media (max-width:1080px){.header__burger{display:flex;}}
.header__burger span{display:block; width:100%; height:1.5px; background:var(--ink); transition:transform var(--t-fast), opacity var(--t-fast);}
.header__burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.header__burger.open span:nth-child(2){opacity:0;}
.header__burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* =========================== MOBILE MENU =========================== */
.menu{
  position:fixed; inset:0; height:100dvh; background:var(--gradient); z-index:var(--z-menu);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--t-slow), visibility var(--t-slow);
}
.menu.open{opacity:1; visibility:visible; pointer-events:auto;}
.menu__wrap{text-align:center;}
.menu__list a{font-family:var(--font-display); font-size:clamp(2rem,7vw,3.4rem); font-weight:500; letter-spacing:-.02em; display:block; padding:.14em 0; opacity:0; transform:translateY(24px); transition:opacity .5s ease, transform .5s ease;}
.menu.open .menu__list a{opacity:1; transform:translateY(0);}
.menu__list a:nth-child(1){transition-delay:.05s;} .menu__list a:nth-child(2){transition-delay:.1s;}
.menu__list a:nth-child(3){transition-delay:.15s;} .menu__list a:nth-child(4){transition-delay:.2s;} .menu__list a:nth-child(5){transition-delay:.25s;}
.menu__foot{margin-top:clamp(30px,5vw,54px); display:flex; flex-direction:column; align-items:center; gap:16px; opacity:0; transition:opacity .6s ease .3s;}
.menu.open .menu__foot{opacity:1;}
.menu__soc{display:flex; gap:16px; font-size:.85rem;}

/* =========================== SCAFFOLDING =========================== */
section{position:relative;}
[data-reveal]{opacity:0; transform:translateY(32px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
[data-reveal].in{opacity:1; transform:translateY(0);}

/* Nav-triggered entrance: section slides in from the side instead of the page scrolling to it */
.nav-slide-in{
  animation:navSlideIn .85s cubic-bezier(.22,.8,.28,1) both;
  transform-origin:right center;
  backface-visibility:hidden;
  will-change:transform, opacity;
}
@keyframes navSlideIn{
  from{opacity:0; transform:perspective(1400px) translateX(42%) rotateY(-52deg) scale(.95);}
  60%{opacity:1;}
  to{opacity:1; transform:perspective(1400px) translateX(0) rotateY(0deg) scale(1);}
}
@media (prefers-reduced-motion: reduce){.nav-slide-in{animation:none;}}
[data-reveal-children] > *{opacity:0; transform:translateY(28px) scale(.98); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
[data-reveal-children].in > *{opacity:1; transform:translateY(0) scale(1);}
[data-reveal-children].in > *:nth-child(1){transition-delay:.03s;}
[data-reveal-children].in > *:nth-child(2){transition-delay:.12s;}
[data-reveal-children].in > *:nth-child(3){transition-delay:.21s;}
[data-reveal-children].in > *:nth-child(4){transition-delay:.3s;}
[data-reveal-children].in > *:nth-child(5){transition-delay:.39s;}
[data-reveal-children].in > *:nth-child(6){transition-delay:.48s;}

/* =========================== HERO =========================== */
.hero{
  min-height:100vh; position:relative; overflow:hidden;
  padding-top:clamp(120px,13.9vw,190px); padding-bottom:clamp(50px,5vw,70px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__bg{position:absolute; inset:0; background:var(--gradient); opacity:.55; z-index:-2;}

.hero__title{
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:.03em .22em;
  padding-right:.02em;
}
.hero__title .icon{
  width:clamp(28px,4.6vw,60px); align-self:flex-end; margin-bottom:.06em; flex:0 0 auto; color:var(--ink);
}
.hero__photo{
  position:relative;
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  margin-top:clamp(26px,3.2vw,44px);
  height:clamp(340px,56vw,860px);
  overflow:hidden;
  cursor:none;
  background:var(--grey-soft);
}
.hero__photo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; -webkit-user-select:none; user-select:none;}
.hero__photo-img--reverse{
  -webkit-mask-image:radial-gradient(circle 0px at 50% 50%, #000 55%, transparent 100%);
  mask-image:radial-gradient(circle 0px at 50% 50%, #000 55%, transparent 100%);
  will-change:mask-image;
}
.hero__dissolve{position:absolute; inset:0; z-index:4; pointer-events:none; display:grid; line-height:0; font-size:0;}
.hero__dissolve-tile{background:var(--white); opacity:0; transition:opacity .18s linear;}
.hero__lens{
  position:absolute; top:0; left:0; width:0; height:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px rgba(20,20,20,.06), 0 24px 44px -14px rgba(0,0,0,.3);
  pointer-events:none; transform:translate(-50%,-50%); opacity:0;
}
@media (hover:none),(pointer:coarse){
  .hero__photo{cursor:auto;}
  .hero__photo-img--reverse,.hero__lens{display:none;}
}

.hero__sub{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
  margin-top:clamp(24px,3vw,40px); padding-top:clamp(20px,2.4vw,30px); border-top:1px solid var(--line);
}
.hero__lead{max-width:26em;}
.hero__meta{display:flex; flex-wrap:wrap; gap:clamp(18px,3.4vw,56px); text-align:left;}
.hero__meta div span{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); margin-bottom:.35em;}
.hero__meta div b{font-size:clamp(1.2rem,1.7vw,1.6rem); font-weight:600; letter-spacing:-.02em;}
.hero__scroll{
  position:absolute; left:50%; bottom:clamp(16px,2.4vw,28px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.72rem; color:var(--mute); letter-spacing:.06em;
}
.hero__scroll i{width:1px; height:34px; background:var(--mute); display:block; position:relative; overflow:hidden;}
.hero__scroll i::after{content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--ink); animation:scrollDrip 1.8s ease-in-out infinite;}
@keyframes scrollDrip{0%{top:-100%;}50%{top:0;}100%{top:100%;}}
@media (max-width:700px){.hero__scroll{display:none;}}

/* =========================== REEL (full-bleed showcase band) =========================== */
.reel{
  height:60vh; min-height:380px; position:relative; overflow:hidden;
  background:var(--black); display:flex; align-items:center; justify-content:center;
}
.reel__word{
  color:var(--white); font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; text-align:center;
  font-size:clamp(2.6rem,8.6vw,8rem); line-height:.95;
}
.reel__word span{display:inline-block; min-width:.4ch;}
.reel__grid{
  position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
}
.reel__caption{
  position:absolute; left:var(--gutter); bottom:clamp(18px,2.4vw,28px); color:var(--white);
  font-size:.8rem; display:flex; align-items:center; gap:.6em;
}
.reel__caption i{width:6px; height:6px; border-radius:50%; background:var(--pink); display:inline-block; animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.reel__link{position:absolute; right:var(--gutter); bottom:clamp(18px,2.4vw,28px); color:var(--white);}

/* =========================== SECTION HEAD (shared editorial header pattern) =========================== */
.section{padding:clamp(70px,9vw,140px) 0;}
.section--tight{padding:clamp(50px,6vw,90px) 0;}
.shead{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:clamp(40px,5.4vw,76px);}
.shead__num{font-size:.85rem; color:var(--mute); font-weight:500; display:block; margin-bottom:.9em;}
.shead h2{max-width:14em;}
.shead .lead{padding-bottom:.3em;}

/* =========================== PRICING — giant sticky stacked cards =========================== */
.stack{position:relative;}
.stack-card{
  position:sticky; top:clamp(80px,9vw,112px);
  min-height:clamp(320px,42vw,560px);
  border-radius:clamp(16px,1.6vw,28px);
  margin-bottom:20px;
  padding:clamp(28px,3.4vw,56px);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(20,20,20,.35);
}
.stack-card__top{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; position:relative; z-index:2;}
.stack-card__num{font-size:.9rem; font-weight:600; opacity:.55;}
.stack-card__badge{font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.5em 1em; border-radius:100px; background:rgba(20,20,20,.06);}
.stack-card__mid{position:relative; z-index:2; text-align:center; padding:.4em 0;}
.stack-card__name{font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; line-height:.92;}
.stack-card__desc{max-width:26em; margin:.5em auto 0; color:inherit; opacity:.55; font-size:clamp(.9rem,1.05vw,1.05rem);}
.stack-card__bottom{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.stack-card__price{display:flex; align-items:baseline; gap:.3em;}
.stack-card__price b{font-family:var(--font-display); font-size:clamp(2rem,3.4vw,3.4rem); font-weight:500; letter-spacing:-.02em;}
.stack-card__price span{font-size:.82rem; opacity:.55;}
.stack-card__features{display:flex; gap:clamp(14px,1.6vw,26px); flex-wrap:wrap; font-size:.86rem; opacity:.75;}
.stack-card__features li{position:relative; padding-left:1.1em;}
.stack-card__features li::before{content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:currentColor;}

.stack-card--1{background:var(--pink-pale); color:var(--ink); z-index:1;}
.stack-card--1 .stack-card__name{font-size:clamp(2.6rem,6.4vw,5.6rem);}
.stack-card--2{
  background:var(--white); color:var(--ink); z-index:2;
  box-shadow:0 0 0 2px var(--ink), 0 30px 70px -40px rgba(20,20,20,.35);
}
.stack-card--2 .stack-card__name{font-size:clamp(2.8rem,7.2vw,6.4rem);}
.stack-card--2 .stack-card__badge{background:var(--pink); color:var(--white);}
.stack-card--3{background:var(--black); color:var(--white); z-index:3;}
.stack-card--3 .stack-card__name{font-size:clamp(2.6rem,6.6vw,5.8rem);}
.stack-card--3 .stack-card__badge{background:rgba(255,255,255,.12);}

.pricing__note{text-align:center; margin-top:clamp(30px,3.4vw,44px); color:var(--mute); font-size:.9rem;}

/* =========================== MORE SERVICES — thin editorial list =========================== */
.more-list{border-top:1px solid var(--line);}
.more-item{
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:clamp(16px,3vw,40px);
  padding:clamp(22px,2.6vw,32px) 0;
}
.more-item__num{font-size:.85rem; color:var(--mute); font-weight:500;}
.more-item h3{margin-bottom:.3em;}
.more-item p{margin:0; color:var(--mute); font-size:.92rem; max-width:36em;}
.more-item__price{text-align:right; font-weight:600; font-size:clamp(1.05rem,1.4vw,1.3rem); letter-spacing:-.02em; white-space:nowrap;}
.more-item__price span{display:block; font-weight:400; font-size:.7rem; color:var(--mute); letter-spacing:0; margin-top:2px;}
@media (max-width:640px){.more-item{grid-template-columns:32px 1fr;} .more-item__price{grid-column:2; text-align:left; margin-top:6px;}}

/* =========================== PROCESS =========================== */
.process{border-top:1px solid var(--line);}
.process-row{
  display:grid; grid-template-columns:80px 1fr auto; align-items:baseline; gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,40px) 0; border-bottom:1px solid var(--line);
}
.process-row__num{font-family:var(--font-display); font-size:clamp(1.4rem,2.2vw,2.2rem); font-weight:500; letter-spacing:-.02em; color:var(--pink-deep);}
@supports (-webkit-text-stroke:1px black){.process-row__num{-webkit-text-stroke:1px var(--ink); color:transparent;}}
.process-row h3{margin-bottom:.35em;}
.process-row p{margin:0; color:var(--mute); font-size:.94rem; max-width:34em;}
.process-row__meta{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); white-space:nowrap;}
@media (max-width:700px){.process-row{grid-template-columns:1fr; gap:8px;} .process-row__meta{order:3;}}

/* =========================== WORK =========================== */
.work-head{position:relative; text-align:center; padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,70px); overflow:hidden;}
.work-head__bg{position:absolute; inset:0; background:linear-gradient(180deg,var(--grey),var(--white)); z-index:-1;}
.work-head h2{font-size:clamp(3.2rem,11vw,10.5rem); line-height:.86; color:var(--pink-deep); letter-spacing:-.02em;}
@supports (-webkit-text-stroke:1px black){.work-head h2{-webkit-text-stroke:1.5px var(--ink); color:transparent;}}
.work__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,24px);}
@media (max-width:820px){.work__grid{grid-template-columns:1fr;}}
.work-card{position:relative; border-radius:clamp(14px,1.4vw,22px); overflow:hidden; aspect-ratio:4/3; isolation:isolate;}
.work-card__mock{position:absolute; inset:0; padding:clamp(18px,2.4vw,30px); display:flex; flex-direction:column; gap:12px;}
.work-card__mock .bar{height:12px; border-radius:4px; background:rgba(20,20,20,.1);}
.work-card__mock .bar.w40{width:40%;} .work-card__mock .bar.w60{width:60%;} .work-card__mock .bar.w80{width:80%;}
.work-card__mock .block{flex:1; border-radius:10px; background:rgba(255,255,255,.55); margin-top:6px;}
.work-card__grad{position:absolute; inset:0 0 0 0; background:linear-gradient(transparent 40%, rgba(20,20,20,.82)); z-index:2;}
.work-card__caption{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(16px,2vw,24px); color:var(--white);}
.work-card__caption span{display:block; font-size:.78rem; opacity:.65; margin-top:.25em;}
.work-card:hover .work-card__mock{transform:scale(1.04); transition:transform var(--t);}

/* =========================== TAG CLOUD (scattered, coordinates borrowed from reference layout logic) =========================== */
.cloud{background:var(--grey); border-radius:clamp(16px,1.6vw,28px); position:relative; overflow:hidden; height:clamp(420px,58vw,720px);}
.cloud__center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:min(90%,44em); z-index:2;}
.cloud__center .h2{font-size:clamp(1.7rem,3vw,3rem);}
.cloud__tag{position:absolute; display:inline-flex; align-items:center; gap:.5em; padding:.65em 1.2em; border-radius:100px; background:var(--white); border:1px solid var(--line); font-size:clamp(.82rem,1.15vw,1.05rem); font-weight:500; white-space:nowrap; z-index:1;}
.cloud__tag::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--pink); flex:0 0 auto;}
@media (max-width:1300px){
  .cloud{
    height:auto; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center;
    gap:10px; padding:clamp(40px,7vw,64px) clamp(20px,5vw,32px);
  }
  .cloud__center{position:static; transform:none; width:100%; margin-bottom:6px;}
  .cloud__tag{position:static;}
}

/* =========================== FAQ =========================== */
.faq{border-top:1px solid var(--line); max-width:900px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item__q{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:clamp(20px,2.4vw,28px) 0; cursor:pointer;}
.faq-item__q h3{font-weight:500; font-size:clamp(1.02rem,1.3vw,1.2rem); letter-spacing:-.01em; transition:transform var(--t-fast), color var(--t-fast); transform-origin:left center;}
@media (hover:hover){
  .faq-item__q:hover h3{transform:translateX(6px);}
  .faq-item__q:hover .faq-item__icon{transform:rotate(90deg) scale(1.12);}
  .faq-item.open .faq-item__q:hover .faq-item__icon{transform:rotate(180deg) scale(1.12);}
}
.faq-item__icon{width:20px; height:20px; flex:0 0 auto; position:relative; transition:transform var(--t-fast);}
.faq-item__icon::before,.faq-item__icon::after{content:""; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .45s var(--ease), opacity .45s var(--ease);}
.faq-item__icon::before{width:13px; height:1.5px;}
.faq-item__icon::after{width:1.5px; height:13px;}
.faq-item.open .faq-item__icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-item.open .faq-item__q .faq-item__icon{transform:rotate(180deg);}
.faq-item__a{
  display:grid; grid-template-rows:0fr; opacity:.6;
  transition:grid-template-rows .5s var(--ease), opacity .4s ease;
}
.faq-item.open .faq-item__a{grid-template-rows:1fr; opacity:1;}
.faq-item__a > p{
  overflow:hidden; min-height:0; margin:0;
  color:var(--mute); font-size:.96rem; line-height:1.6; max-width:38em;
  padding-bottom:0; transform:translateY(-8px); opacity:0;
  transition:padding-bottom .5s var(--ease), transform .45s var(--ease) .05s, opacity .4s ease .05s;
}
.faq-item.open .faq-item__a > p{padding-bottom:clamp(20px,2.4vw,28px); transform:translateY(0); opacity:1;}

/* =========================== CONTACT (dark, giant diagonal wordmark pair) =========================== */
.contact{background:var(--black); color:var(--grey); overflow:hidden; border-radius:clamp(16px,1.6vw,28px); position:relative;}
.contact__inner{padding:clamp(60px,8vw,120px) var(--gutter) clamp(50px,6vw,90px); position:relative;}
.contact__words{position:relative;}
.contact__word{font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; line-height:.86; font-size:clamp(2.6rem,13vw,10.5rem); white-space:nowrap;}
.contact__word--1{text-align:left;}
.contact__word--2{text-align:right; margin-top:-.06em; color:var(--pink);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .contact__word--2{background:linear-gradient(90deg,var(--pink),var(--white)); -webkit-background-clip:text; background-clip:text; color:transparent;}
}
.contact__row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-top:clamp(36px,5vw,64px); padding-top:clamp(24px,3vw,36px); border-top:1px solid rgba(255,255,255,.14);}
.contact__lead{max-width:26em; color:var(--mute-on-dark);}
.contact__links{display:flex; flex-direction:column; gap:.6em; align-items:flex-end; text-align:right;}
.contact__links .link{color:var(--white);}
@media (max-width:700px){
  .contact__row{justify-content:center; text-align:center;}
  .contact__lead{max-width:none;}
  .contact__links{align-items:center; text-align:center; width:100%;}
}
.contact__avail{display:flex; align-items:center; gap:.6em; font-size:.82rem; color:var(--mute-on-dark); margin-top:clamp(20px,2.6vw,30px);}
.contact__avail i{width:6px; height:6px; border-radius:50%; background:#7ee08a; display:inline-block; animation:pulse 1.6s ease-in-out infinite;}

/* =========================== FOOTER =========================== */
.footer{padding-top:clamp(60px,7vw,110px); padding-bottom:clamp(20px,2.6vw,30px); position:relative; overflow:hidden;}
.footer__bg{position:absolute; inset:0; background:var(--gradient-rev); opacity:.4; z-index:-1;}
.footer__line{height:1px; background:var(--ink); width:100%; margin-bottom:clamp(40px,5vw,64px);}
.footer__head{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;}
.footer__col h4{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mute); margin-bottom:1.1em; font-weight:500;}
.footer__col ul li{margin-bottom:.7em;}
.footer__col a{font-size:.96rem; position:relative;}
.footer__col a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width var(--t-fast);}
.footer__col a:hover::after{width:100%;}
.footer__typer-row{margin-top:clamp(50px,6vw,86px); display:flex; align-items:baseline; gap:.4em; font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,2.2rem); font-weight:500; letter-spacing:-.02em;}
.footer__typer{color:var(--pink); border-right:2px solid var(--pink); padding-right:.05em; min-width:1ch; display:inline-block;}
.footer__wordmark{
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  margin-top:clamp(30px,4vw,54px); color:var(--ink); display:block;
}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:clamp(24px,3vw,36px); padding-top:clamp(18px,2.2vw,26px); border-top:1px solid var(--line); font-size:.82rem; color:var(--mute);}
.footer__soc{display:flex; gap:16px;}
.footer__soc a{position:relative;}
.footer__soc a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition:width var(--t-fast);}
.footer__soc a:hover::after{width:100%;}
.footer__top{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);}
.footer__top:hover{background:var(--ink); color:#fff; transform:translateY(-3px);}
.footer__top svg{width:13px; margin:auto;}

/* =========================== PRELOADER =========================== */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--white);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:opacity .85s var(--ease), visibility .85s var(--ease), transform .9s var(--ease);
}
.preloader__bg{position:absolute; inset:0; background:var(--gradient); opacity:.55;}
.preloader__mid{position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.4vw,26px);}
.preloader__logo{
  width:clamp(130px,15vw,200px); color:var(--ink);
  opacity:0; transform:translateY(16px) scale(.96);
  animation:preloaderLogoIn 1s var(--ease) .15s forwards;
}
@keyframes preloaderLogoIn{to{opacity:1; transform:translateY(0) scale(1);}}
.preloader__bar{
  width:clamp(150px,18vw,240px); height:1px; background:rgba(30,30,30,.14);
  position:relative; overflow:hidden;
}
.preloader__bar span{position:absolute; inset:0 100% 0 0; background:var(--ink); transition:right .3s ease-out;}
.preloader__pct{
  font-size:.76rem; letter-spacing:.1em; color:var(--mute);
  font-variant-numeric:tabular-nums; min-width:3ch; text-align:center;
}
.preloader.done{opacity:0; visibility:hidden; pointer-events:none; transform:scale(1.03);}
body.is-loading{overflow:hidden; height:100vh;}