/* ==========================================================================
   LZ WORTH — Stylesheet v4  ("Fog Room")
   Near-black room. Full-bleed photography dissolving into the page.
   Amber is the only colour. Everything centred on its axis.

   v4 fixes legibility. The five photographs range from luminance 39 to 122
   where the type sits, and white text cannot survive the bright end on
   gradients alone — so every photograph now carries a graduated
   blur-and-darken veil beneath its text.

   1 tokens · 2 base · 3 type · 4 layout · 5 cursor · 6 progress
   7 nav · 8 controls · 9 FOG + VEIL · 10 hero · 11 ticker
   12 service cards · 13 detail blocks · 14 work · 15 process
   16 promise · 17 reviews · 18 faq · 19 cta · 20 fine print
   21 footer · 22 modal + form · 23 auth page · 24 motion · 25 responsive
   ========================================================================== */

/* ---------- 1. TOKENS --------------------------------------------------- */
:root{
  --void:#08090B;
  --coal:#0E1014;
  --smoke:#14171C;
  --smoke-2:#1B1F26;

  --amber:#F2B84B;
  --amber-hi:#FFD489;
  --amber-dim:rgba(242,184,75,.14);
  --amber-line:rgba(242,184,75,.34);

  --bone:#F4F2ED;
  --ash:#9A9DA6;
  --ash-2:#6E727B;

  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);

  --f-display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --wrap:1140px;
  --narrow:760px;
  --gut:24px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:26px;
  --nav-h:68px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. BASE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--f-body);font-size:16.5px;line-height:1.64;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(242,184,75,.10), transparent 70%),
    radial-gradient(700px 500px at 92% 100%, rgba(242,184,75,.045), transparent 72%);
}
body > *{position:relative;z-index:1}
body.is-locked{overflow:hidden}

img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
::selection{background:var(--amber);color:#1A1201}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:6px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--amber);color:#1A1201;padding:12px 18px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:700;
}
.skip:focus{left:0}
[hidden]{display:none !important}

/* ---------- 3. TYPE ----------------------------------------------------- */
.h-hero{font-size:clamp(2.4rem,6.2vw,4.9rem);line-height:1.12;letter-spacing:-.042em}
.h-xl  {font-size:clamp(1.95rem,4vw,3.05rem)}
.h-lg  {font-size:clamp(1.6rem,2.7vw,2.2rem)}
.h-md  {font-size:clamp(1.18rem,1.6vw,1.38rem);letter-spacing:-.022em}
.h-sm  {font-size:1.05rem;letter-spacing:-.014em}

.lede{font-size:clamp(1.02rem,1.3vw,1.14rem);color:var(--ash);line-height:1.68}
.small{font-size:.9rem;color:var(--ash)}
.tiny{font-size:.79rem;color:var(--ash-2)}
.amber{color:var(--amber)}

.glow{position:relative;font-style:normal;color:var(--amber-hi);white-space:nowrap}
.glow::after{
  content:"";position:absolute;left:-6%;right:-6%;top:12%;bottom:12%;z-index:-1;
  background:radial-gradient(closest-side,rgba(242,184,75,.32),transparent 78%);
  filter:blur(14px);
}

.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before,.eyebrow::after{
  content:"";width:26px;height:1px;background:currentColor;opacity:.45;flex:none;
}

/* ---------- 4. LAYOUT --------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:clamp(58px,7.4vw,102px);position:relative}
.sect--tight{padding-block:clamp(42px,5vw,64px)}
.sect--panel{background:var(--coal);border-block:1px solid var(--line)}
.grid{display:grid;gap:18px}
.head{max-width:var(--narrow);margin:0 auto clamp(32px,4.2vw,52px);text-align:center}
.head .h-xl,.head .h-lg{margin:18px 0 16px}
.head .lede{margin-inline:auto}
.row-c{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- 5. CURSOR --------------------------------------------------- */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;z-index:350;pointer-events:none;
  border-radius:50%;translate:-50% -50%;opacity:0;transition:opacity .3s;
}
.cursor{width:6px;height:6px;background:var(--amber);box-shadow:0 0 12px 2px rgba(242,184,75,.7)}
.cursor-ring{
  width:34px;height:34px;border:1px solid var(--amber-line);
  transition:opacity .3s,width .28s var(--ease-out),height .28s var(--ease-out),background .28s,border-color .28s;
}
body.cursor-on .cursor,body.cursor-on .cursor-ring{opacity:1}
body.cursor-on.cursor-hot .cursor-ring{width:56px;height:56px;background:rgba(242,184,75,.10);border-color:var(--amber)}
body.cursor-on.cursor-hot .cursor{opacity:.35}
@media (hover:hover) and (pointer:fine){
  body.cursor-on,body.cursor-on a,body.cursor-on button,body.cursor-on summary,body.cursor-on label{cursor:none}
  body.cursor-on input,body.cursor-on textarea,body.cursor-on select{cursor:text}
}

/* ---------- 6. SCROLL PROGRESS ----------------------------------------- */
.prog{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(242,184,75,0),var(--amber),var(--amber-hi));
}

/* ---------- 7. NAV ----------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:110;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(8,9,11,.55);
  backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav.is-stuck{background:rgba(8,9,11,.9);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:18px;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;font-size:1.1rem;flex:none}
.brand__mark{width:34px;height:34px;flex:none;object-fit:contain;transition:transform .5s var(--ease-out)}
.brand:hover .brand__mark{transform:translateY(-2px) rotate(-6deg) scale(1.07)}
.brand__lz{color:var(--amber)}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav__links a{
  position:relative;padding:9px 12px;border-radius:9px;
  font-size:.915rem;font-weight:500;color:var(--ash);transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease-out);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--bone)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__act{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}

.burger{
  display:none;width:40px;height:40px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);border-radius:10px;
  align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:16px;height:1.5px;background:var(--bone);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--bone);border-radius:2px;transition:top .25s,transform .25s}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:108;
  background:rgba(8,9,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:26px var(--gut) 44px;display:none;flex-direction:column;gap:2px;overflow-y:auto;
}
.drawer.is-open{display:flex}
.drawer a,.drawer > button{
  padding:15px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;
  text-align:left;font-family:var(--f-display);font-size:1.3rem;font-weight:600;cursor:pointer;
  opacity:0;transform:translateY(10px);animation:drawerIn .45s var(--ease-out) forwards;
}
.drawer.is-open > *:nth-child(1){animation-delay:.04s}
.drawer.is-open > *:nth-child(2){animation-delay:.08s}
.drawer.is-open > *:nth-child(3){animation-delay:.12s}
.drawer.is-open > *:nth-child(4){animation-delay:.16s}
.drawer.is-open > *:nth-child(5){animation-delay:.2s}
.drawer.is-open > *:nth-child(6){animation-delay:.24s}
.drawer.is-open > *:nth-child(7){animation-delay:.28s}
.drawer .btn{margin-top:20px;justify-content:center;border-bottom:0;text-align:center}
@keyframes drawerIn{to{opacity:1;transform:none}}

/* ---------- 8. CONTROLS ------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:100px;
  font-size:.93rem;font-weight:600;letter-spacing:-.006em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease-out),background .25s,border-color .25s,box-shadow .3s,color .25s,opacity .25s;
}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease-out);
}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn > *{position:relative}
.btn[disabled]{opacity:.45;pointer-events:none}

.btn--gold{background:var(--amber);color:#1A1201;box-shadow:0 8px 28px -10px rgba(242,184,75,.75)}
.btn--gold:hover{background:var(--amber-hi);box-shadow:0 14px 38px -12px rgba(242,184,75,.9)}
.btn--ghost{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--bone)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:var(--amber-line)}
.btn--bare{background:rgba(8,9,11,.45);border-color:var(--line-2);color:var(--bone);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--bare:hover{border-color:var(--amber);color:var(--amber);background:rgba(8,9,11,.65)}
.btn--lg{padding:16px 28px;font-size:.98rem}
.btn--sm{padding:9px 16px;font-size:.85rem}
.btn--block{width:100%}
.btn__ar{transition:transform .28s var(--ease-out)}
.btn:hover .btn__ar{transform:translateX(4px)}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:100px;
  background:rgba(8,9,11,.55);border:1px solid var(--line-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--f-mono);font-size:.71rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone);
}
.dot{width:6px;height:6px;border-radius:50%;background:#3FD07E;flex:none;box-shadow:0 0 0 3px rgba(63,208,126,.16)}
.dot--pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(63,208,126,.16)}50%{box-shadow:0 0 0 7px rgba(63,208,126,.03)}}

.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tag{
  font-family:var(--f-mono);font-size:.685rem;letter-spacing:.05em;
  padding:5px 10px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ash);
  transition:border-color .25s,color .25s;
}
.tag:hover{border-color:var(--amber-line);color:var(--amber)}

/* ==========================================================================
   9. FOG + VEIL — the signature, rebuilt for legibility
   Layers, bottom to top:
     -3  a blurred bloom of the photo, spilling past the frame
     -2  the photograph, focal point pushed up so its lower half is empty
      1  cursor light
      2  fog__veil — graduated backdrop blur + darken beneath the text
      2  fog gradients + side vignette
      3  the text
   ========================================================================== */
.fog{position:relative;isolation:isolate;overflow:hidden;background:var(--void)}
.fog__img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 34%}
.fog__bloom{
  position:absolute;inset:-10% -6%;z-index:-3;
  filter:blur(56px) saturate(1.35) brightness(.9);
  opacity:.4;transform:scale(1.06);
  object-fit:cover;width:112%;height:120%;
}

/* THE FIX: blurs and darkens the photograph itself under the text, ramping
   from full strength at the bottom to nothing near the top. Gradients alone
   could not hold up over images brighter than roughly luminance 100. */
.fog__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  backdrop-filter:blur(8px) brightness(.62) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) brightness(.62) saturate(1.1);
  mask-image:linear-gradient(0deg,#000 0%,#000 42%,rgba(0,0,0,.6) 64%,rgba(0,0,0,.24) 84%,transparent 96%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 42%,rgba(0,0,0,.6) 64%,rgba(0,0,0,.24) 84%,transparent 96%);
}
/* tint fallback where backdrop-filter is unavailable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fog__veil{background:linear-gradient(0deg,rgba(6,7,9,.94) 0%,rgba(6,7,9,.88) 40%,rgba(6,7,9,.5) 70%,transparent 92%)}
}

.fog::before,.fog::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.fog::before{
  top:0;height:24%;
  background:linear-gradient(180deg,var(--void) 0%,rgba(8,9,11,.5) 34%,rgba(8,9,11,.2) 70%,transparent 100%);
}
.fog::after{
  bottom:0;height:44%;
  background:linear-gradient(0deg,var(--void) 0%,rgba(8,9,11,.72) 24%,rgba(8,9,11,.34) 62%,transparent 100%);
}
.fog__sides{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--void),rgba(8,9,11,.35) 10%,transparent 26%,transparent 74%,rgba(8,9,11,.35) 90%,var(--void));
}

/* type sitting on a photograph earns its own separation */
.on-img{position:relative;z-index:3;text-align:center}
.on-img h1,.on-img h2{text-shadow:0 2px 30px rgba(0,0,0,.88),0 1px 3px rgba(0,0,0,.9)}
.on-img .lede{color:#DDDEE2;text-shadow:0 1px 18px rgba(0,0,0,.92)}
/* On a photograph the label carries its own darkened lozenge, so it stays
   legible wherever the headline length happens to push it. */
.on-img .eyebrow{
  color:var(--amber-hi);
  padding:7px 17px;border-radius:100px;
  background:rgba(8,9,11,.5);
  border:1px solid rgba(255,212,137,.26);
  backdrop-filter:blur(14px) brightness(.5) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) brightness(.5) saturate(1.1);
}
.on-img .eyebrow::before,.on-img .eyebrow::after{display:none}

/* fog band used for the feature sections */
.band__media{position:relative;height:clamp(430px,58vw,700px)}
.band__body{
  position:absolute;inset:auto 0 0 0;z-index:3;
  padding-bottom:clamp(34px,4.6vw,62px);
}
.band__body .wrap{max-width:var(--narrow)}
.band__cap{position:absolute;top:clamp(18px,3vw,30px);left:50%;translate:-50% 0;z-index:3}

/* ---------- 10. HERO --------------------------------------------------- */
.hero{
  min-height:min(94vh,880px);
  display:flex;flex-direction:column;justify-content:flex-end;
  margin-top:calc(var(--nav-h) * -1);padding-top:var(--nav-h);
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 32%;will-change:transform}
.hero__spot{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,40%),rgba(242,184,75,.18),transparent 70%);
  opacity:0;transition:opacity .5s;
}
.hero:hover .hero__spot{opacity:1}
.hero__body{padding-block:clamp(44px,7vw,90px) clamp(34px,4.4vw,52px)}
.hero__body .wrap{max-width:900px}
.hero h1{margin:22px auto 20px;max-width:17ch}
.hero .lede{max-width:610px;margin-inline:auto}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center}

.word{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.12;padding-bottom:.16em;margin-bottom:-.16em}
.word > span{display:inline-block;transform:translateY(115%);transition:transform .8s var(--ease-out)}
.is-lit .word > span{transform:none}

.trust{position:relative;z-index:3;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(8,9,11,.6),var(--void))}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
.trust__grid li{padding:22px 12px;border-left:1px solid var(--line)}
.trust__grid li:first-child{border-left:0}
.trust b{display:block;font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.035em;color:var(--bone)}
.trust span{display:block;margin-top:4px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ash-2)}

/* ---------- 11. TICKER ------------------------------------------------- */
.ticker{
  overflow:hidden;padding-block:14px;background:var(--coal);border-block:1px solid var(--line);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__row{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:var(--ash-2);
  padding-inline:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:20px;
}
.ticker__row span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--amber);opacity:.6}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 12. SERVICE CARDS ------------------------------------------ */
.svc3{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 24px 26px;border-radius:var(--r-lg);
  background:var(--smoke);border:1px solid var(--line);
  transition:transform .4s var(--ease-out),border-color .35s,background .35s;
}
.svc::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,0%),rgba(242,184,75,.13),transparent 72%);
}
.svc::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  transform:scaleX(0);transition:transform .55s var(--ease-out);
}
.svc:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--smoke-2)}
.svc:hover::before{opacity:1}
.svc:hover::after{transform:scaleX(1)}
.svc > *{position:relative}
.svc__n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;color:var(--amber);text-transform:uppercase}
.svc__ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin:18px 0;
  background:var(--amber-dim);border:1px solid var(--amber-line);
  transition:transform .45s var(--ease-out),background .35s;
}
.svc:hover .svc__ico{transform:translateY(-2px) scale(1.06);background:rgba(242,184,75,.2)}
.svc__ico svg{width:23px;height:23px;stroke:var(--amber);stroke-width:1.6;fill:none}
.svc h3{margin-bottom:10px}
.svc p{font-size:.93rem;color:var(--ash);line-height:1.62}
.svc__list{margin:18px 0 22px;display:flex;flex-direction:column;gap:9px;width:100%}
.svc__list li{font-size:.855rem;color:var(--ash);padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.svc__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--amber)}
.svc__go svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;transition:transform .3s var(--ease-out)}
.svc:hover .svc__go svg{transform:translateX(4px)}

/* ---------- 13. DETAIL BLOCKS ----------------------------------------- */
.pts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:960px;margin-inline:auto}
.pt{
  position:relative;overflow:hidden;text-align:left;padding:24px 22px;border-radius:var(--r-md);
  background:var(--smoke);border:1px solid var(--line);
  transition:transform .35s var(--ease-out),border-color .3s,background .3s;
}
.pt:hover{transform:translateY(-4px);border-color:var(--amber-line);background:var(--smoke-2)}
.pt em{display:block;font-family:var(--f-mono);font-style:normal;font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.pt b{display:block;font-family:var(--f-display);font-size:1.06rem;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.pt span{display:block;font-size:.885rem;color:var(--ash);line-height:1.62}

.lanes{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lane{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:28px 22px;border-radius:var(--r-lg);
  background:var(--smoke);border:1px solid var(--line);
  transition:transform .38s var(--ease-out),border-color .3s,background .3s;
}
.lane:hover{transform:translateY(-5px);border-color:var(--amber-line);background:var(--smoke-2)}
.lane__k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.lane h3{margin-bottom:10px}
.lane p{font-size:.9rem;color:var(--ash);line-height:1.62;margin-bottom:18px}
.lane ul{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;width:100%}
.lane li{font-size:.85rem;color:var(--ash);padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.lane .tags{margin-top:auto}

/* ---------- 14. WORK --------------------------------------------------- */
.work{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wk{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--smoke);border:1px solid var(--line);
  transition:transform .4s var(--ease-out),border-color .3s;
}
.wk:hover{transform:translateY(-6px);border-color:var(--amber-line)}
.wk__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--coal)}
.wk__img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease-out)}
.wk:hover .wk__img img{transform:scale(1.06)}
.wk__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--smoke) 2%,rgba(20,23,28,.55) 30%,transparent 72%)}
.wk__b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;text-align:center}
.wk__top{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.wk__cat{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.wk h3{font-size:1.1rem;margin-bottom:9px}
.wk p{font-size:.875rem;color:var(--ash);line-height:1.6;margin-bottom:18px}
.wk__go{margin-top:auto;font-family:var(--f-mono);font-size:.73rem;color:var(--ash);display:inline-flex;align-items:center;justify-content:center;gap:6px;word-break:break-all;transition:color .25s}
.wk__go::after{content:"↗";color:var(--amber);font-family:var(--f-body)}
.wk:hover .wk__go{color:var(--bone)}

/* ---------- 15. PROCESS ------------------------------------------------ */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1040px;margin-inline:auto;padding-top:44px}
.steps::before{
  content:"";position:absolute;top:19px;left:12%;right:12%;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 5px,transparent 5px 11px);
}
.steps::after{
  content:"";position:absolute;top:19px;left:12%;height:2px;border-radius:2px;width:0;
  background:linear-gradient(90deg,var(--amber),var(--amber-hi));
  box-shadow:0 0 14px 1px rgba(242,184,75,.55);transition:width 1.8s var(--ease-out);
}
.steps.is-in::after{width:76%}
.step{position:relative;text-align:center;padding:0 8px}
.step__n{
  position:absolute;top:-44px;left:50%;translate:-50% 0;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--void);border:1px solid var(--amber-line);
  font-family:var(--f-mono);font-size:.82rem;color:var(--amber);
  transition:background .35s,transform .4s var(--ease-out),box-shadow .35s,color .35s;
}
.step:hover .step__n{background:var(--amber);color:#1A1201;transform:translate(-50%,-3px);box-shadow:0 8px 22px -8px rgba(242,184,75,.8)}
.step__d{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);margin-bottom:10px}
.step h3{font-size:1.06rem;margin-bottom:9px}
.step p{font-size:.875rem;color:var(--ash);line-height:1.6}

/* ---------- 16. PROMISE ------------------------------------------------ */
.prom{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prom__c{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 20px;border-radius:var(--r-md);background:var(--smoke);border:1px solid var(--line);
  transition:transform .35s var(--ease-out),border-color .3s,background .3s;
}
.prom__c:hover{transform:translateY(-4px);border-color:var(--amber-line);background:var(--smoke-2)}
.prom__ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--amber-dim);border:1px solid var(--amber-line)}
.prom__ico svg{width:20px;height:20px;stroke:var(--amber);stroke-width:1.7;fill:none}
.prom__c h3{font-size:1.02rem;margin:16px 0 9px}
.prom__c p{font-size:.865rem;color:var(--ash);line-height:1.58}

/* ---------- 17. REVIEWS ------------------------------------------------ */
.rvw__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-bottom:26px}
.rvw__avg{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--f-display);font-weight:700;letter-spacing:-.03em}
.rvw__avg b{font-size:1.9rem}
.rvw__avg span{font-size:.85rem;color:var(--ash-2);font-family:var(--f-body);font-weight:500}

.stars{display:inline-flex;gap:3px;line-height:1}
.stars svg{width:17px;height:17px;fill:var(--line-2)}
.stars svg.on{fill:var(--amber)}

.rvw__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1040px;margin-inline:auto}
.rvw__c{
  display:flex;flex-direction:column;gap:13px;padding:24px 22px;border-radius:var(--r-md);
  background:var(--smoke);border:1px solid var(--line);text-align:left;
  transition:transform .35s var(--ease-out),border-color .3s;
}
.rvw__c:hover{transform:translateY(-3px);border-color:var(--amber-line)}
.rvw__c p{font-size:.92rem;color:var(--bone);line-height:1.66}
.rvw__who{display:flex;align-items:center;gap:11px;margin-top:auto}
.rvw__ini{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--amber-dim);border:1px solid var(--amber-line);
  font-family:var(--f-mono);font-size:.76rem;color:var(--amber);text-transform:uppercase;
}
.rvw__who b{display:block;font-size:.9rem;font-weight:600;font-family:var(--f-body)}
.rvw__who span{display:block;font-size:.76rem;color:var(--ash-2)}

.rvw__empty{
  max-width:520px;margin:0 auto;padding:40px 26px;border-radius:var(--r-lg);text-align:center;
  background:var(--smoke);border:1px dashed var(--line-2);
}
.rvw__empty h3{font-size:1.12rem;margin-bottom:10px}
.rvw__empty p{font-size:.9rem;color:var(--ash);margin-bottom:22px}
.rvw__note{margin-top:28px;text-align:center;font-size:.78rem;color:var(--ash-2)}

/* star picker */
.rate{display:flex;gap:6px}
.rate button{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,background .2s,transform .2s var(--ease-out);
}
.rate button:hover{transform:translateY(-2px);border-color:var(--amber-line)}
.rate svg{width:19px;height:19px;fill:var(--line-2);transition:fill .2s}
.rate button.on svg{fill:var(--amber)}

/* ---------- 18. FAQ --------------------------------------------------- */
.faq{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--smoke);overflow:hidden;transition:border-color .3s,background .3s}
.faq details:hover{border-color:var(--line-2)}
.faq details[open]{border-color:var(--amber-line);background:var(--smoke-2)}
.faq summary{
  display:flex;align-items:center;gap:16px;padding:19px 22px;cursor:pointer;list-style:none;text-align:left;
  font-family:var(--f-display);font-size:1.03rem;font-weight:600;letter-spacing:-.02em;transition:color .22s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary i{
  flex:none;margin-left:auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);position:relative;
  transition:transform .38s var(--ease-out),border-color .25s,background .25s;
}
.faq summary i::before,.faq summary i::after{
  content:"";position:absolute;top:50%;left:50%;width:10px;height:1.5px;
  background:currentColor;translate:-50% -50%;border-radius:2px;transition:opacity .25s;
}
.faq summary i::after{rotate:90deg}
.faq details[open] summary{color:var(--amber)}
.faq details[open] summary i{background:var(--amber);border-color:var(--amber);color:#1A1201;rotate:180deg}
.faq details[open] summary i::after{opacity:0}
.faq__a{padding:0 22px 22px;font-size:.925rem;color:var(--ash);line-height:1.7;text-align:left}
.faq details[open] .faq__a{animation:fade .45s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 19. CTA ---------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:radial-gradient(700px 340px at 50% -12%,rgba(242,184,75,.24),transparent 68%),var(--coal);
  padding:clamp(40px,5.4vw,70px) clamp(24px,4.4vw,56px);text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,var(--amber-line),transparent 40%,transparent 60%,rgba(242,184,75,.2));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;-webkit-mask-composite:xor;pointer-events:none;
}
.cta > *{position:relative}
.cta h2{margin:18px auto 16px;max-width:22ch}
.cta p{color:var(--ash);max-width:540px;margin-inline:auto}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.cta__meta{margin-top:26px;font-family:var(--f-mono);font-size:.73rem;letter-spacing:.09em;color:var(--ash-2)}

/* ---------- 20. FINE PRINT -------------------------------------------- */
.fine{background:var(--coal);border-top:1px solid var(--line)}
.fine__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:920px;margin:0 auto}
.fine__c{padding:22px;border-radius:var(--r-md);text-align:left;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.fine__c h3{font-size:.96rem;margin-bottom:8px;color:var(--bone)}
.fine__c p{font-size:.85rem;color:var(--ash);line-height:1.62}
.fine__note{max-width:820px;margin:26px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:.79rem;color:var(--ash-2);line-height:1.68;text-align:center}

/* ---------- 21. FOOTER ------------------------------------------------- */
.foot{background:var(--void);border-top:1px solid var(--line);padding-block:clamp(44px,5.4vw,66px) 26px}
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.foot__about p{color:var(--ash);font-size:.89rem;line-height:1.64;margin:14px 0 18px;max-width:330px}
.foot h4{font-family:var(--f-mono);font-size:.69rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ash-2);margin:0 0 15px;font-weight:500}
.foot__col li{margin-bottom:11px}
.foot__col a,.foot__col span,.foot__col button{font-size:.89rem;color:var(--ash);transition:color .2s,padding-left .25s;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit}
.foot__col a:hover,.foot__col button:hover{color:var(--amber);padding-left:4px}
.foot__soc{display:flex;gap:9px}
.foot__soc a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:background .25s,border-color .25s,transform .3s var(--ease-out)}
.foot__soc a:hover{background:var(--amber);border-color:var(--amber);transform:translateY(-3px)}
.foot__soc svg{width:17px;height:17px;fill:none;stroke:var(--ash);stroke-width:1.7;transition:stroke .25s}
.foot__soc a:hover svg{stroke:#1A1201}
.foot__bot{margin-top:clamp(32px,4vw,46px);padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:.79rem;color:var(--ash-2)}
.foot__bot nav{display:flex;gap:18px}
.foot__bot a:hover{color:var(--amber)}

/* ==========================================================================
   22. MODAL — sign in, project brief, write a review
   ========================================================================== */
.mod{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:flex-start;justify-content:center;
  padding:clamp(16px,5vh,64px) var(--gut);overflow-y:auto;
  background:rgba(4,5,7,.74);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mod.is-open{display:flex;animation:modIn .3s var(--ease-out)}
@keyframes modIn{from{opacity:0}to{opacity:1}}
.mod__box{
  width:100%;max-width:600px;position:relative;
  border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:radial-gradient(600px 260px at 50% -10%,rgba(242,184,75,.16),transparent 70%),var(--coal);
  padding:clamp(28px,3.6vw,42px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  animation:boxIn .42s var(--ease-out);
}
@keyframes boxIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.mod__x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);cursor:pointer;
  display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s;
}
.mod__x:hover{background:rgba(255,255,255,.1);border-color:var(--amber-line);transform:rotate(90deg)}
.mod__x svg{width:15px;height:15px;stroke:var(--bone);stroke-width:2;fill:none}
.mod__head{text-align:center;margin-bottom:26px}
.mod__head h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:14px 0 10px}
.mod__head p{font-size:.92rem;color:var(--ash)}

.steps-mini{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px}
.steps-mini i{width:26px;height:3px;border-radius:2px;background:var(--line-2);transition:background .4s var(--ease-out),width .4s var(--ease-out)}
.steps-mini i.on{background:var(--amber);width:40px}

/* form primitives */
.f-grid{display:grid;gap:15px}
.f-2{grid-template-columns:1fr 1fr}
.field{text-align:left}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px;color:var(--ash)}
.field .req{color:var(--amber)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  font-family:var(--f-body);font-size:.94rem;color:var(--bone);
  transition:border-color .22s,box-shadow .22s,background .22s;
}
.field textarea{min-height:106px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--coal);color:var(--bone)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(242,184,75,.16);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--ash-2)}
.field.err input,.field.err select,.field.err textarea{border-color:#E4674F;box-shadow:0 0 0 3px rgba(228,103,79,.16)}
.field__err{display:none;margin-top:6px;font-size:.79rem;color:#F08A73}
.field.err .field__err{display:block}
.f-hint{font-size:.78rem;color:var(--ash-2);margin-top:7px}

/* multi-select chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{
  padding:9px 15px;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--ash);
  font-size:.86rem;font-weight:500;
  transition:background .22s,border-color .22s,color .22s,transform .22s var(--ease-out);
}
.chips button:hover{transform:translateY(-2px);border-color:var(--amber-line);color:var(--bone)}
.chips button.on{background:var(--amber);border-color:var(--amber);color:#1A1201;font-weight:600}

.mod__foot{display:flex;gap:10px;align-items:center;margin-top:26px}
.mod__foot .btn{flex:1}
.mod__foot .btn--ghost{flex:0 0 auto}

/* recap before sending */
.recap{display:flex;flex-direction:column;padding:18px 20px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line);text-align:left;margin-bottom:20px}
.recap > div{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.recap > div:last-child{border-bottom:0}
.recap b{flex:0 0 34%;color:var(--ash-2);font-weight:500}
.recap span{flex:1;color:var(--bone)}

/* signed-in strip */
.who{
  display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:var(--r-md);
  background:rgba(242,184,75,.07);border:1px solid var(--amber-line);margin-bottom:22px;text-align:left;
}
.who__ini{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--amber);color:#1A1201;font-family:var(--f-mono);font-size:.76rem;font-weight:500;text-transform:uppercase}
.who b{display:block;font-size:.9rem}
.who span{display:block;font-size:.77rem;color:var(--ash)}
.who button{margin-left:auto;background:none;border:0;color:var(--ash-2);font-size:.79rem;cursor:pointer;text-decoration:underline;flex:none;font-family:inherit}
.who button:hover{color:var(--amber)}

/* success panel */
.done{text-align:center}
.done__tick{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:var(--amber-dim);border:1px solid var(--amber-line)}
.done__tick svg{width:28px;height:28px;stroke:var(--amber);stroke-width:2.2;fill:none}
.done h2{font-size:1.5rem;margin-bottom:12px}
.done p{font-size:.93rem;color:var(--ash);margin-bottom:22px}

/* ---------- 23. AUTH PAGE --------------------------------------------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth__form{display:flex;flex-direction:column;justify-content:center;padding:44px clamp(24px,5vw,72px)}
.auth__inner{width:100%;max-width:400px;margin-inline:auto}
.auth__inner h1{font-size:clamp(1.8rem,3.2vw,2.35rem);margin:18px 0 12px}
.auth__side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4.4vw,58px)}
.auth__side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.auth__side::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.6),rgba(8,9,11,.94))}
.auth__side blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:600;letter-spacing:-.028em;line-height:1.26}
.auth__side ul{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.auth__side li{position:relative;padding-left:26px;font-size:.9rem;color:var(--ash)}
.auth__side li::before{content:"";position:absolute;left:0;top:.36em;width:15px;height:15px;border-radius:50%;background:var(--amber-dim);border:1px solid var(--amber-line)}
.auth__side li::after{content:"";position:absolute;left:4.5px;top:.68em;width:6px;height:3px;border-left:1.6px solid var(--amber);border-bottom:1.6px solid var(--amber);rotate:-45deg}
.gbtn{
  display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  padding:14px 20px;border-radius:100px;cursor:pointer;
  background:var(--bone);border:1px solid transparent;font-size:.95rem;font-weight:600;color:#141414;
  transition:transform .25s var(--ease-out),box-shadow .3s;
}
.gbtn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(0,0,0,.7)}
.gbtn svg{width:19px;height:19px;flex:none}
.auth__or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ash-2);font-size:.76rem;font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--line)}
.note{margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);text-align:left;background:var(--amber-dim);border:1px solid var(--amber-line);font-size:.83rem;color:var(--amber-hi);line-height:1.58}
.note code{font-family:var(--f-mono);font-size:.95em;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px}

.oops{min-height:78vh;display:grid;place-items:center;text-align:center;padding:60px var(--gut)}
.oops__n{font-family:var(--f-display);font-size:clamp(5rem,17vw,11rem);line-height:.86;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--amber-line)}

/* ---------- 24. MOTION ------------------------------------------------ */
.rv{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out)}
.rv.is-in{opacity:1;transform:none;filter:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none;filter:none}
  .ticker__row{animation:none}
  .word > span{transform:none}
  .cursor,.cursor-ring{display:none}
  .steps::after{width:76%}
}

/* ---------- 25. RESPONSIVE ------------------------------------------- */
@media (max-width:1080px){
  .foot__grid{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .foot__about{grid-column:1/-1}
  .prom,.rvw__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 18px;padding-top:0}
  .steps::before,.steps::after{display:none}
  .step__n{position:relative;top:0;left:0;translate:none;margin:0 auto 14px}
}
@media (max-width:940px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__act .btn--ghost{display:none}
  .svc3,.lanes,.work,.pts{grid-template-columns:1fr}
  .fine__grid{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth__side{order:-1;padding:36px 24px;min-height:280px}
  .auth__side ul{display:none}
  .hero{min-height:88vh}
  .band__media{height:clamp(400px,72vw,520px)}
}
@media (max-width:680px){
  :root{--gut:18px;--r-xl:20px;--r-lg:16px}
  body{font-size:16px}
  /* the highlighted phrase must wrap on a narrow screen; the radial light
     behind it only reads on a single line */
  .glow{white-space:normal}
  .glow::after{display:none}
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__grid li:nth-child(3){border-left:0}
  .trust__grid li:nth-child(n+3){border-top:1px solid var(--line)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__bot{flex-direction:column;align-items:flex-start}
  .hero h1{max-width:none}
  .fog__bloom{filter:blur(46px) saturate(1.4) brightness(.8)}
  .fog__veil{backdrop-filter:blur(18px) brightness(.3) saturate(1.1);-webkit-backdrop-filter:blur(18px) brightness(.3) saturate(1.1)}
  .rvw__list{grid-template-columns:1fr}
  .cursor,.cursor-ring{display:none}
  .f-2{grid-template-columns:1fr}
  .mod__foot{flex-wrap:wrap}
  .mod__foot .btn{flex:1 1 100%}
  .recap > div{flex-direction:column;gap:3px}
  .recap b{flex:none}
}
@media (max-width:420px){
  .prom,.steps{grid-template-columns:1fr}
  .btn--lg{padding:14px 22px;font-size:.94rem}
}

/* ---------- cloud: review stars, write form, nav auth ---------- */
.rvw__stars{display:inline-flex;gap:2px;margin-bottom:10px}
.rvw__stars svg{fill:var(--line-2)}
.rvw__stars svg.on{fill:var(--amber)}
.rvw__body{color:var(--bone);line-height:1.62;font-size:.95rem}
.rvw__form{max-width:560px;margin:0 auto;background:var(--smoke);border:1px solid var(--line-2);border-radius:18px;padding:26px}
.rvw__form h3{margin-bottom:14px}
.rvw__rate{display:flex;gap:6px;margin-bottom:14px;font-size:1.75rem;line-height:1}
.rvw__rate button{background:none;border:0;color:var(--line-2);cursor:pointer;padding:0;transition:color .15s,transform .15s}
.rvw__rate button.on{color:var(--amber)}
.rvw__rate button:hover{transform:scale(1.12)}
.rvw__form textarea,.rvw__form input{width:100%;background:var(--void);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;color:var(--bone);font:inherit;margin-bottom:12px}
.rvw__form textarea:focus,.rvw__form input:focus{outline:none;border-color:var(--amber)}
.rvw__actions{display:flex;gap:10px;flex-wrap:wrap}
.rvw__msg{margin-top:10px;font-size:.85rem;color:var(--ash)}
.navauth{display:inline-flex;align-items:center;gap:14px}
.navauth__name{font-weight:600;color:var(--bone);font-size:.9rem}
.navauth__lnk{background:none;border:0;color:var(--amber);font:inherit;font-size:.86rem;cursor:pointer;padding:0;text-decoration:none}
.navauth__lnk:hover{text-decoration:underline}

/* ---------- cloud: PREMIUM review cards ---------- */
.rvw__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.rvw__c{
  position:relative;overflow:hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.008) 42%),
    linear-gradient(var(--smoke-2), var(--smoke));
  border:1px solid var(--amber-line);
  border-radius:20px;padding:26px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 24px 55px -34px rgba(0,0,0,.95);
  transition:transform .4s var(--ease-out),border-color .4s,box-shadow .4s;
}
.rvw__c::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,184,75,.55),transparent)}
.rvw__c::after{content:"";position:absolute;width:200px;height:200px;top:-70px;right:-50px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,184,75,.16),transparent 70%);pointer-events:none}
.rvw__c:hover{transform:translateY(-5px);border-color:var(--amber);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 34px 66px -32px rgba(0,0,0,.95),0 0 46px -8px rgba(242,184,75,.28)}
.rvw__body{position:relative;z-index:1;color:var(--bone);font-size:1.02rem;line-height:1.6;margin:12px 0 4px}
.rvw__who{display:flex;align-items:center;gap:13px;margin-top:18px;position:relative;z-index:1}
.rvw__ini,.rvw__pic{width:46px;height:46px;border-radius:50%;flex:none}
.rvw__ini{display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1rem;color:#241701;
  background:linear-gradient(145deg,#ffe6ad,var(--amber) 52%,#a9762a);
  box-shadow:0 0 0 1px rgba(242,184,75,.6),0 8px 18px -7px rgba(242,184,75,.6),0 1px 1px rgba(255,255,255,.4) inset}
.rvw__pic{object-fit:cover;box-shadow:0 0 0 2px var(--amber),0 8px 18px -7px rgba(242,184,75,.55)}
.rvw__meta b{display:block;color:var(--bone);font-weight:600;letter-spacing:-.01em}
.rvw__meta span{color:var(--ash);font-size:.82rem}
.rvw__stars svg{fill:rgba(255,255,255,.14)}
.rvw__stars svg.on{fill:var(--amber);filter:drop-shadow(0 0 5px rgba(242,184,75,.5))}
.rvw__avg b{background:linear-gradient(145deg,#ffe6ad,var(--amber));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}