/* ==========================================================================
   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}
html.is-locked{overflow:hidden;touch-action:none;overscroll-behavior:none}

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);
  min-height:min(94svh,880px);   /* svh keeps hero content clear of the mobile URL bar */
  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)}

/* ---------- PROOF CARDS (work page) -------------------------------------
   A visitor decides in about two seconds whether a studio can build. So
   the screenshot leads — full width, real, captured from the live product
   — then one line, then four hard facts they can check. The long-form
   case study sits behind a disclosure, because depth should be available
   without being the first thing anyone has to read.
   ----------------------------------------------------------------------- */
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.pf{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--smoke);border:1px solid var(--line);
  transition:transform .45s var(--ease-out),border-color .35s,box-shadow .45s}
.pf:hover{transform:translateY(-6px);border-color:var(--amber-line);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.75)}

/* the screenshot */
.pf__shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--coal);flex:none;border-bottom:1px solid var(--line)}
.pf__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1s var(--ease-out)}
.pf:hover .pf__shot img{transform:scale(1.045)}
/* a soft amber wash on hover, so it reads as interactive rather than decorative */
.pf__shot::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(0deg,rgba(242,184,75,.16),transparent 55%);
  transition:opacity .45s}
.pf:hover .pf__shot::after{opacity:1}
.pf__open{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;color:var(--void);background:var(--amber);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease-out)}
.pf:hover .pf__open{opacity:1;transform:none}

/* the second, smaller screenshot some projects carry */
.pf__thumb{position:relative;margin:0;overflow:hidden;border-bottom:1px solid var(--line);
  aspect-ratio:16/7;background:var(--coal)}
.pf__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.82;
  transition:opacity .45s,transform 1s var(--ease-out)}
.pf:hover .pf__thumb img{opacity:1;transform:scale(1.03)}

.pf__b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.pf__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
/* who owns this project — stated per card, not left to the section heading */
.pf__rel{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;margin-right:auto;
  color:var(--ash);background:rgba(255,255,255,.045);border:1px solid var(--line-2)}
.pf__top .wk__cat{margin-right:10px}
.cs__dl dd a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-line)}
.cs__dl dd a:hover{border-bottom-color:var(--amber)}
.pf h3{font-size:1.3rem;margin-bottom:10px}
.pf__one{font-size:.94rem;color:var(--ash);line-height:1.62;margin-bottom:18px}

/* the four checkable facts */
.pf__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;padding:0;list-style:none}
.pf__chips li{
  font-size:.775rem;line-height:1;padding:8px 12px 8px 26px;border-radius:999px;
  color:var(--bone);background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  position:relative;transition:border-color .3s,background .3s}
.pf__chips li::before{
  content:"";position:absolute;left:11px;top:50%;width:8px;height:5px;
  border-left:1.8px solid var(--amber);border-bottom:1.8px solid var(--amber);
  transform:translateY(-70%) rotate(-45deg)}
.pf:hover .pf__chips li{border-color:var(--amber-line);background:rgba(242,184,75,.06)}

.pf__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto}
.pf__url{font-family:var(--f-mono);font-size:.7rem;color:var(--ash-2);word-break:break-all}

/* long-form case study, folded away */
.pf__more{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.pf__more summary{
  cursor:pointer;list-style:none;font-size:.82rem;font-weight:600;color:var(--ash);
  display:flex;align-items:center;gap:9px;transition:color .25s}
.pf__more summary::-webkit-details-marker{display:none}
.pf__more summary::before{
  content:"";width:7px;height:7px;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s}
.pf__more[open] summary::before{transform:rotate(-135deg) translateY(-2px)}
.pf__more summary:hover{color:var(--amber)}
.pf__more .cs__dl{margin-top:18px;margin-bottom:0}

.cs__dl{display:flex;flex-direction:column;gap:13px}
.cs__dl>div{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline}
.cs__dl dt{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ash-2);padding-top:2px}
.cs__dl dd{font-size:.86rem;color:var(--ash);line-height:1.62;margin:0}
.cs__res{color:var(--ash-2);font-style:italic}

.cs-note{text-align:center;padding:22px 26px;border-radius:var(--r-lg);
  border:1px dashed var(--line);background:rgba(255,255,255,.015)}
.cs-note p{font-size:.9rem;color:var(--ash);margin:0}
.cs-note a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-line)}
.cs-note a:hover{border-bottom-color:var(--amber)}

@media (max-width:900px){
  .pf-grid{grid-template-columns:1fr;gap:22px}
  .cs__dl>div{grid-template-columns:1fr;gap:3px}
  .cs__dl dt{padding-top:0}
  .pf__open{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pf,.pf__shot img,.pf__thumb img,.pf__open{transition:none}
  .pf:hover{transform:none;box-shadow:none}
  .pf:hover .pf__shot img,.pf:hover .pf__thumb img{transform:none}
}
}

/* ---------- 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}
/* the social page runs a five-step rhythm rather than a four-step build */
.steps:has(> :nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr));max-width:1180px;gap:14px}
.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}

/* brief: budget + timeline, folded away so the form reads as short */
.mod__more{border-top:1px solid var(--line);margin-top:2px;padding-top:14px}
.mod__more summary{
  cursor:pointer;list-style:none;font-size:.85rem;font-weight:600;color:var(--ash);
  display:flex;align-items:center;gap:8px;padding:2px 0;transition:color .2s}
.mod__more summary::-webkit-details-marker{display:none}
.mod__more summary::before{
  content:"";width:7px;height:7px;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.mod__more[open] summary::before{transform:rotate(45deg)}
.mod__more summary:hover{color:var(--bone)}
.mod__more .f-grid{margin-top:16px}

/* brief: the "just message us instead" escape hatch under the form */
.mod__alt{text-align:center;margin-top:16px}
.mod__alt a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-line)}
.mod__alt a:hover{border-bottom-color:var(--amber)}

/* 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}
  .nav__act .navauth{display:none}       /* logged-in chip moves into the drawer on mobile */
  .drawer .navauth{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:15px 4px;border-bottom:1px solid var(--line);font-family:var(--f-display)}
  .drawer .navauth__name{font-size:1.3rem;font-weight:600;color:var(--bone)}
  .drawer .navauth__lnk{font-size:1.05rem}
  .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;min-height:86svh}
  .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}

/* ================================================================
   MOBILE HARDENING — audit phase 17 (touch, overflow, readability)
   ================================================================ */
/* long words / URLs must never push the layout sideways */
p,h1,h2,h3,h4,a,button,span,li,td,.wk__go,.rvw__body{overflow-wrap:anywhere}
img,svg,video,canvas{max-width:100%}
html{overflow-x:clip}

@media (max-width:768px){
  /* iOS auto-zooms any input under 16px — force 16 */
  input,select,textarea{font-size:16px !important}
  /* comfortable one-thumb touch targets */
  .btn{min-height:48px}
  .nav__links a,.drawer a,.foot a,.nav__act a{min-height:44px;display:flex;align-items:center}
  /* trust metrics: clean 2-up (values already live in the HTML) */
  .trust__grid{grid-template-columns:1fr 1fr}
  /* full-width primary/secondary CTAs, one per row on the hero */
  .hero__cta{flex-direction:column;align-items:stretch;gap:12px}
  .hero__cta .btn{width:100%;justify-content:center}
  /* calmer motion + tighter rhythm on phones */
  .ticker__row{animation-duration:64s}
  .sect{padding-block:clamp(48px,11vw,68px)}
  .head{margin-bottom:clamp(26px,7vw,38px)}
}
@media (max-width:420px){
  .hero h1,.h-hero{font-size:clamp(2rem,9vw,2.7rem);line-height:1.08}
}
@media (prefers-reduced-motion:reduce){
  .ticker__row{animation:none}
  .fog__bloom{animation:none}
}

/* ---------- About / team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;max-width:var(--wrap);margin:0 auto}
.tm{background:var(--smoke);border:1px solid var(--line);border-radius:18px;padding:30px 24px;text-align:center;transition:border-color .3s,transform .3s}
.tm:hover{border-color:var(--amber-line);transform:translateY(-4px)}
.tm__face{width:88px;height:88px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#ffe6ad,var(--amber) 55%,#a9762a);box-shadow:0 0 0 1px rgba(242,184,75,.5),0 10px 24px -10px rgba(242,184,75,.5)}
.tm__face img{width:100%;height:100%;object-fit:cover}
.tm__face span{font-family:var(--f-display);font-weight:800;font-size:1.7rem;color:#241701}
.tm__name{font-family:var(--f-display);font-size:1.15rem;margin-bottom:4px}
.tm__role{color:var(--ash);font-size:.9rem;line-height:1.45}
.tm__ln{display:inline-block;margin-top:12px;color:var(--amber);font-size:.85rem;font-family:var(--f-mono)}
.tm__ln:hover{text-decoration:underline}

/* ---------- About — rich founder cards + trust blocks (v14) ---------- */
.team-grid{align-items:stretch}
.team-grid .rv:nth-child(2){transition-delay:.08s}
.team-grid .rv:nth-child(3){transition-delay:.16s}
.tm--rich{text-align:left;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.tm--rich .tm__top{display:flex;align-items:center;gap:14px}
.tm--rich .tm__face{width:64px;height:64px;margin:0;flex:none}
.tm--rich .tm__face span{font-size:1.25rem}
.tm__id{min-width:0}
.tm--rich .tm__name{margin:0 0 3px}
.tm__title{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);font-weight:500}
.tm__dept{color:var(--ash);font-size:.88rem;line-height:1.4;margin-top:2px}
.tm__bio{color:var(--bone);opacity:.86;font-size:.94rem;line-height:1.62}
.tm__note{margin:2px 0;border-left:2px solid var(--amber-line);padding:3px 0 3px 14px;color:var(--bone);font-style:italic;font-size:.9rem;line-height:1.55;opacity:.92}
.tm__tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.tm__tags li{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.04em;color:var(--ash);border:1px solid var(--line-2);border-radius:100px;padding:4px 10px}
.tm--rich .tm__ln{margin-top:0}
.tm__contact{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-top:4px}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--wrap);margin:0 auto}
@media(max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.value-grid{grid-template-columns:1fr}}
.value-c{position:relative;background:var(--smoke);border:1px solid var(--line);border-radius:16px;padding:24px 22px;overflow:hidden;transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.value-c::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(242,184,75,.10),transparent 60%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.value-c:hover{border-color:var(--amber-line);transform:translateY(-5px);box-shadow:0 20px 46px -26px rgba(242,184,75,.45)}
.value-c:hover::before{opacity:1}
.value-c h4{font-family:var(--f-display);font-size:1.05rem;margin-bottom:8px;position:relative}
.value-c p{color:var(--ash);font-size:.92rem;line-height:1.58;position:relative}
/* staggered reveal for the value cards */
.value-grid .rv{transition-delay:0s}
.value-grid .rv:nth-child(2){transition-delay:.06s}
.value-grid .rv:nth-child(3){transition-delay:.12s}
.value-grid .rv:nth-child(4){transition-delay:.18s}
.value-grid .rv:nth-child(5){transition-delay:.24s}
.value-grid .rv:nth-child(6){transition-delay:.30s}

.proof-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:var(--wrap);margin:30px auto 0;padding:16px 26px;border:1px solid var(--line-2);border-radius:100px;background:var(--smoke)}
.proof-strip span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;color:var(--bone);text-transform:uppercase;opacity:.85}
.proof-strip b{color:var(--amber);font-weight:600}

.trust-note{max-width:var(--narrow);margin:0 auto;text-align:center}
.trust-note blockquote{font-family:var(--f-display);font-size:clamp(1rem,2.4vw,1.2rem);color:var(--bone);border:none;margin:22px 0 0;padding:0}

/* Google review CTA (reviews section) */
.rvw__gg{text-align:center;margin-top:30px}
.rvw__gg-g{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285F4;font-family:var(--f-display);font-weight:800;font-size:.82rem;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.rvw__gg .btn__ar{color:var(--amber)}


/* ============================================================
   FLOATING WHATSAPP
   Bottom-right on desktop, above the thumb on mobile. Collapses to
   a circle on small screens so it never covers content.
   ============================================================ */
.wafab{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px 12px 15px;border-radius:999px;
  background:#1FA855;color:#fff;text-decoration:none;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .2s}
.wafab svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wafab:hover{transform:translateY(-3px);background:#25BE61;
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.18) inset}
.wafab:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:640px){
  .wafab{right:16px;bottom:16px;padding:13px;gap:0}
  .wafab span{display:none}
}
@media (prefers-reduced-motion:reduce){.wafab{transition:none}.wafab:hover{transform:none}}


/* an inline link inside body copy — used sparingly, e.g. the founder signal
   on the home page, where a whole section would over-weight one person */
.inline-ln{color:var(--amber);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--amber-line);transition:border-color .25s}
.inline-ln:hover{border-bottom-color:var(--amber)}