/* ============================================================================
   PIXEL FORGE — shared stylesheet
   Strict monochrome · liquid glass · Bricolage Grotesque + Geist
   Tokens mirror config.colors (also written to :root at runtime by applyTheme).
   ============================================================================ */

:root{
  --bg:#050505;
  --surface-1:#0d0d0f;
  --surface-2:#141417;
  --text:#F3F4F6;
  --text-mute:rgba(243,244,246,.60);
  --text-faint:rgba(243,244,246,.38);
  --hairline:rgba(243,244,246,.12);
  --glass:rgba(255,255,255,.045);
  --chrome:#c8ccd2;

  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:Geist,sans-serif;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,80px);
  --section-y:clamp(80px,12vw,180px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur:.7s;

  --radius:16px;
  --z-cursor:99999;
  --z-loader:9000;
  --z-nav:800;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  font-size:clamp(15px,1.05vw,17px);
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--text);color:var(--bg)}

/* --- film grain + vignette (site-wide) ----------------------------------- */
body::before{ /* grain */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{ /* vignette */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);
}
#site-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#site-bg .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}

/* --- typography ---------------------------------------------------------- */
.h-hero,.h1,.h2,.h3,.display{font-family:var(--font-display);font-weight:800;line-height:.95;
  letter-spacing:-.02em;text-wrap:balance}
.h-hero{font-size:clamp(3.4rem,12vw,11rem);font-weight:900;line-height:.86;letter-spacing:-.035em}
.h1{font-size:clamp(2.4rem,6vw,5rem)}
.h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.h3{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:700}
p{max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1.8vw,1.5rem);color:var(--text);line-height:1.4;font-weight:400}
.muted{color:var(--text-mute)}
.faint{color:var(--text-faint)}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--text-mute);
  font-weight:500;font-family:var(--font-body)}
.mono-label{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-faint)}

/* --- layout -------------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative;z-index:2}
.section--tight{padding-block:clamp(56px,8vw,110px)}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:clamp(16px,2vw,28px)}
main{position:relative;z-index:2}

/* --- liquid glass (STATIC elements only — never on .tilt/.magnetic) ------- */
.glass{position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 42%,rgba(255,255,255,.015));
  backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.02),0 24px 60px rgba(0,0,0,.42)}
/* soft specular highlight sweeping the top edge of every glass surface */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.14),transparent 30%);
  opacity:.5;transition:opacity .5s var(--ease);mix-blend-mode:screen}
.glass:hover::before{opacity:.85}
.hairline{height:1px;background:var(--hairline);border:0;width:100%}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.6em;border-radius:100px;
  font-weight:500;letter-spacing:.01em;font-size:.92rem;position:relative;
  border:1px solid var(--hairline);transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform}
.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--primary:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(243,244,246,.28)}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* --- reveal primitives (JS adds .in) ------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
.line-mask{display:inline-block;overflow:hidden;vertical-align:top}
.line-mask > *{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.in .line-mask > *,.line-mask.in > *{transform:none}
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.clip-reveal.in{clip-path:inset(0 0 0 0)}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.word > i{display:inline-block;font-style:inherit;transform:translateY(120%);
  transition:transform .8s var(--ease);transition-delay:calc(var(--i,0)*40ms)}
.in .word > i{transform:none}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .line-mask > *,.word > i{transform:none!important}
  .clip-reveal{clip-path:none!important}
}

/* ==========================================================================
   COMPONENTS  (chrome · cursor · cards · forms · marquee · loader)
   ========================================================================== */

/* --- custom cursor ------------------------------------------------------- */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [data-cursor]{cursor:none}
.pf-cursor-dot,.pf-cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cursor);
  opacity:0;transition:opacity .3s}
.cursor-on .pf-cursor-dot,.cursor-on .pf-cursor-ring{opacity:1}
.pf-cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--text);mix-blend-mode:difference}
.pf-cursor-ring{width:38px;height:38px;border-radius:50%;border:1px solid rgba(243,244,246,.5);
  transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor-hover .pf-cursor-ring{width:60px;height:60px;background:rgba(255,255,255,.06)}
.cursor-down .pf-cursor-ring{width:30px;height:30px}
.cursor-label .pf-cursor-ring{width:74px;height:74px;background:var(--text)}
.cursor-label .pf-cursor-ring::after{content:attr(data-label);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;font-family:var(--font-body)}

/* --- header / nav -------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--gutter);border:0;border-bottom:1px solid var(--hairline);
  border-radius:0;background:rgba(5,5,5,.55)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;
  letter-spacing:.02em;font-size:1rem}
.brand-mark{width:14px;height:14px;background:conic-gradient(from 0deg,#fff,#7a7a80,#fff,#4a4a50,#fff);
  border-radius:3px;box-shadow:0 0 14px rgba(255,255,255,.35)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{position:relative;padding:8px 12px;font-size:.86rem;color:var(--text-mute);transition:color .3s}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;
  background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-link:hover,.nav-link[aria-current]{color:var(--text)}
.nav-link:hover::after,.nav-link[aria-current]::after{transform:scaleX(1)}
.nav-cta{color:var(--text);border:1px solid var(--hairline);border-radius:100px;padding:8px 18px;margin-left:6px}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--text);color:var(--bg)}
.nav-tools{display:flex;align-items:center;gap:12px}
.nav-burger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform .3s,opacity .3s}

/* --- sound toggle -------------------------------------------------------- */
.sound-toggle{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--text-mute);
  letter-spacing:.1em;text-transform:uppercase}
.sound-toggle .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.sound-toggle .eq i{width:2px;height:4px;background:var(--text-mute);transition:height .2s}
.sound-toggle.is-on{color:var(--text)}
.sound-toggle.is-on .eq i{background:var(--text);animation:eq 1s var(--ease) infinite}
.sound-toggle.is-on .eq i:nth-child(2){animation-delay:.15s}
.sound-toggle.is-on .eq i:nth-child(3){animation-delay:.3s}
.sound-toggle.is-on .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.sound-label{display:none}
@media(min-width:920px){.sound-label{display:inline}}

/* --- mobile menu --------------------------------------------------------- */
.site-menu{position:fixed;inset:0;z-index:1000;background:rgba(5,5,5,.94);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(-2%);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.site-menu.open{opacity:1;visibility:visible;transform:none}
.mm-close{position:absolute;top:22px;right:var(--gutter);font-size:2.4rem;line-height:1;color:var(--text)}
.mm-nav{display:flex;flex-direction:column;gap:2px}
.mm-link{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,9vw,3.4rem);
  letter-spacing:-.02em;color:var(--text-mute);line-height:1.08;transition:color .3s,transform .3s;
  opacity:0;transform:translateY(20px)}
.site-menu.open .mm-link{opacity:1;transform:none;transition-delay:calc(.05s + var(--i)*.04s)}
.mm-link:hover,.mm-link[aria-current]{color:var(--text)}
.mm-foot{margin-top:40px;color:var(--text-mute)}
body.menu-open{overflow:hidden}

/* --- footer -------------------------------------------------------------- */
.site-footer{position:relative;z-index:2;border-top:1px solid var(--hairline);padding-block:64px 32px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-word{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.03em}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a,.footer-contact a{color:var(--text-mute);transition:color .3s}
.footer-links a:hover,.footer-contact a:hover{color:var(--text)}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-bottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:20px;border-top:1px solid var(--hairline)}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom{flex-direction:column;gap:8px}}

/* --- scroll progress + page transition + loader -------------------------- */
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--text);
  transform:scaleX(0);transform-origin:left;z-index:calc(var(--z-nav) + 1);mix-blend-mode:difference}
#page-transition{position:fixed;inset:0;z-index:8500;background:var(--bg);pointer-events:none;
  transform:translateY(100%);transition:transform .45s var(--ease)}
body.page-leaving #page-transition{transform:translateY(0)}
#loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--bg);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-word{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,9vw,6rem);
  letter-spacing:-.04em;overflow:hidden}
.loader-word span{display:inline-block;animation:loadRise .9s var(--ease) both}
.loader-bar{width:min(240px,60vw);height:1px;background:var(--hairline);overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;background:var(--text);transform:translateX(-100%);
  animation:loadBar 1.3s var(--ease) forwards}
@keyframes loadRise{from{transform:translateY(110%)}to{transform:none}}
@keyframes loadBar{to{transform:translateX(0)}}

/* --- generic section header --------------------------------------------- */
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,5vw,64px);max-width:60ch}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}

/* --- service cards ------------------------------------------------------- */
.svc-card{padding:28px;display:flex;flex-direction:column;gap:14px;height:100%}
.svc-ico-wrap{width:48px;height:48px;border:1px solid var(--hairline);border-radius:12px;
  display:flex;align-items:center;justify-content:center}
.svc-ico{width:22px;height:22px;color:var(--text)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* --- work cards (3:4 portrait, video previews) --------------------------- */
.work-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.work-grid{grid-template-columns:1fr}}
/* home teaser + fiverr portfolio teaser: all four previews in one row */
#work-teaser,#fiverr-work{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){#work-teaser,#fiverr-work{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#work-teaser,#fiverr-work{grid-template-columns:1fr}}
.work-card{display:block;position:relative;border:1px solid var(--hairline);border-radius:var(--radius);
  overflow:hidden;background:var(--surface-1);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
  will-change:transform;color:inherit;text-decoration:none}
.work-card:hover{transform:translateY(-6px);border-color:rgba(243,244,246,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.work-media{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--surface-2)}
.work-media img,.work-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .6s;filter:saturate(1.05) contrast(1.02)}
.work-card:hover .work-media img,.work-card:hover .work-media video{transform:scale(1.05)}
.play-badge{position:absolute;top:14px;left:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(5,5,5,.5);backdrop-filter:blur(8px);border:1px solid var(--hairline);display:flex}
.play-badge::after{content:"";margin:auto;width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--text)}
.work-meta{position:absolute;left:0;bottom:0;padding:20px;display:flex;flex-direction:column;gap:4px;
  z-index:2;transition:opacity .4s;background:linear-gradient(to top,rgba(5,5,5,.92),rgba(5,5,5,.2) 60%,transparent);width:100%}
.work-hover{position:absolute;inset:0;z-index:3;background:rgba(5,5,5,.72);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.work-card:hover .work-hover,.work-card:focus-within .work-hover{opacity:1;transform:none}
.work-card:hover .work-meta{opacity:0}
.work-tags{display:flex;flex-wrap:wrap;gap:8px}
.work-tags span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  border:1px solid var(--hairline);border-radius:100px;padding:4px 10px}
.work-view{font-weight:600;letter-spacing:.02em}
/* lightbox video */
#lightbox .lb-vid{max-width:min(92vw,520px);max-height:88vh;border:1px solid var(--hairline);border-radius:16px}

/* --- filter chips + lightbox -------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{padding:8px 16px;border:1px solid var(--hairline);border-radius:100px;font-size:.8rem;
  color:var(--text-mute);transition:color .3s,background .3s,border-color .3s}
.chip.active,.chip:hover{color:var(--bg);background:var(--text);border-color:var(--text)}
.work-card.hide{display:none}
#lightbox{position:fixed;inset:0;z-index:9500;display:none;place-items:center;padding:5vw;
  background:rgba(5,5,5,.9);backdrop-filter:blur(10px)}
#lightbox.open{display:grid}
#lightbox img{max-width:100%;max-height:88vh;border:1px solid var(--hairline);border-radius:12px}
#lightbox .lb-close{position:absolute;top:24px;right:32px;font-size:2.2rem;color:var(--text)}

/* --- tiers --------------------------------------------------------------- */
.pricing-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.tier-card{position:relative;padding:32px;display:flex;flex-direction:column;gap:22px;
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-1)}
.tier-card.is-featured{transform:translateZ(0) scale(1.02);border-color:rgba(243,244,246,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
@media(max-width:900px){.tier-card.is-featured{transform:none}}
.tier-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--text);
  color:var(--bg);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:5px 14px;border-radius:100px}
.tier-price{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:-.03em}
.tier-best{min-height:3em}
.tier-feats{display:flex;flex-direction:column;gap:12px;flex:1}
.tier-feats li{position:relative;padding-left:24px;color:var(--text-mute);font-size:.92rem}
.tier-feats li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:1px;background:var(--text)}
.tier-card .btn{margin-top:auto;justify-content:center}

/* --- quote cards / stats / faq / posts ---------------------------------- */
.quote-card{padding:28px;display:flex;flex-direction:column;gap:18px;break-inside:avoid}
.quote-card blockquote{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.35;letter-spacing:-.01em}
.quote-card figcaption{display:flex;flex-direction:column;gap:2px}
.q-author{font-weight:600}
.q-result{color:var(--text)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;flex-direction:column;gap:6px;padding:22px 0;border-top:1px solid var(--hairline)}
.stat-n{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.03em}
.faq-list{display:flex;flex-direction:column;max-width:820px}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,2vw,1.4rem);cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:16px;height:16px;flex:0 0 16px}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--text);inset:0;margin:auto}
.faq-plus::before{width:16px;height:1.5px}.faq-plus::after{width:1.5px;height:16px;transition:transform .3s}
.faq-item[open] .faq-plus::after{transform:scaleY(0)}
.faq-a{overflow:hidden;padding-bottom:24px;max-width:64ch}
.post-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.post-grid{grid-template-columns:1fr}}
.post-card{overflow:hidden}
.post-card a{display:flex;flex-direction:column;gap:12px;padding:26px;height:100%}
.post-card:hover{border-color:rgba(243,244,246,.28)}
.post-date{margin-top:auto}

/* --- marquee ------------------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--hairline);padding:22px 0;white-space:nowrap;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:inline-flex;gap:48px;animation:marq 32s linear infinite}
.marquee__track span{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,4vw,2.6rem);
  letter-spacing:-.02em;color:var(--text-mute);display:inline-flex;align-items:center;gap:48px}
.marquee__track span::after{content:"\25C6";font-size:.6em;color:var(--text-faint)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* --- forms --------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:20px;max-width:620px}
.field{display:flex;flex-direction:column;gap:8px;position:relative}
.field label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.field input,.field textarea,.field select{background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:12px;padding:14px 16px;color:var(--text);transition:border-color .3s;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:rgba(243,244,246,.4)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--error);
  box-shadow:0 0 0 3px rgba(243,244,246,.06)}
.field.invalid .err{display:block}
.err{display:none;color:var(--text-mute);font-size:.76rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn.is-loading{color:transparent;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--bg);
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-done::after{content:"\2713";position:absolute;color:var(--bg);font-weight:700}
.btn.is-done{color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.form-success{color:var(--text);border:1px solid var(--hairline);border-radius:12px;padding:16px;background:var(--surface-1)}

/* --- focus visibility (a11y) -------------------------------------------- */
:focus-visible{outline:2px solid rgba(243,244,246,.7);outline-offset:3px;border-radius:4px}

/* --- responsive nav ------------------------------------------------------ */
@media(max-width:1160px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
/* declutter the top bar on phones — keep social (asked for), icon-only book,
   sound toggle moves out of the way */
@media(max-width:640px){
  .site-header{padding:12px 16px;gap:10px}
  .nav-tools{gap:8px}
  .book-call-label{display:none}
  .book-call{padding:.62em;border-radius:12px}
  .nav-tools .sound-toggle{display:none}
  .nav-tools .social-btn{width:34px;height:34px}
}
@media(max-width:380px){ .nav-tools .nav-social{display:none} }  /* tiniest phones: social in menu */
/* mobile menu footer: book-a-call + social + email */
.mm-foot{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.mm-foot .btn{gap:.5em}
.mm-social .nav-social{display:flex;gap:10px}
.mm-social .social-btn{width:46px;height:46px}
.mm-email{color:var(--text-mute)}

/* ==========================================================================
   HERO + FORGE 3D
   ========================================================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  padding-top:96px}
.forge-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.forge-stage canvas{width:100%;height:100%;display:block}
.hero-spotlight{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(600px circle at var(--sx,50%) var(--sy,40%),rgba(255,255,255,.10),transparent 60%);
  transition:background .2s}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-kicker{letter-spacing:.34em}
.hero-word{font-family:var(--font-display);font-weight:900;line-height:.82;letter-spacing:-.045em;
  font-size:clamp(4rem,20vw,17rem);display:block}
.hero-word .word > i{transition-duration:1.1s}
.hero-tag{max-width:40ch;margin-top:24px;font-size:clamp(1rem,1.6vw,1.35rem);color:var(--text-mute)}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.scroll-cue{position:absolute;bottom:34px;left:var(--gutter);z-index:2;display:flex;align-items:center;gap:12px;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute)}
.scroll-cue::before{content:"";width:34px;height:1px;background:var(--text-mute);
  animation:cue 2s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.4);opacity:.4;transform-origin:left}50%{transform:scaleX(1);opacity:1}}

/* CSS fallback forge (mobile / no-webgl / reduced-motion) */
.css-forge canvas{display:none}
.css-forge::after{content:"";position:absolute;top:50%;left:50%;width:min(46vw,420px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:46% 54% 50% 50%/52% 48% 52% 48%;
  background:conic-gradient(from 210deg,#26272b,#0c0c0e,#4a4c52,#141518,#33353a,#0c0c0e,#26272b);
  filter:blur(2px) contrast(1.1);box-shadow:inset 0 0 60px rgba(255,255,255,.14),0 40px 120px rgba(0,0,0,.6);
  animation:blob 14s var(--ease) infinite}
.css-forge::before{content:"";position:absolute;top:50%;left:50%;width:min(46vw,420px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:46% 54% 50% 50%/52% 48% 52% 48%;z-index:1;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(243,244,246,.05) 22px 23px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(243,244,246,.05) 22px 23px);
  animation:blob 14s var(--ease) infinite}
@keyframes blob{0%,100%{border-radius:46% 54% 50% 50%/52% 48% 52% 48%;rotate:0deg}
  50%{border-radius:54% 46% 55% 45%/48% 55% 45% 52%;rotate:12deg}}
@media(prefers-reduced-motion:reduce){.css-forge::after,.css-forge::before{animation:none}}

/* --- Spline robot hero --------------------------------------------------- */
/* Desktop: robot sits in the RIGHT portion of the hero, enlarged, beside the
   left-aligned wordmark (not behind it). */
.robot-stage{position:absolute;inset:0 -6% 0 34%;z-index:0;pointer-events:none;overflow:visible}
.robot-viewer{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity 1.4s var(--ease);pointer-events:none;transform:scale(1.04);transform-origin:center}
.robot-stage.robot-ready .robot-viewer{opacity:1}
/* soft fade on the robot's left edge so it blends toward the text column */
.robot-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,5,5,.92) 0%,rgba(5,5,5,.4) 22%,rgba(5,5,5,0) 48%),
             radial-gradient(120% 90% at 60% 100%,rgba(5,5,5,.6),transparent 60%)}
@media(max-width:820px){
  /* Mobile: the robot is removed for speed + a cleaner, more responsive hero.
     JS also strips the node so the Spline module never loads on phones. */
  .robot-stage{display:none!important}
}
.robot-loader{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.robot-stage.robot-ready .robot-loader,.robot-stage.robot-failed .robot-loader{opacity:0;visibility:hidden}
.robot-loader .spinner{width:32px;height:32px;border-radius:50%;
  border:2px solid var(--hairline);border-top-color:var(--text);animation:spin .8s linear infinite}
/* CSS fallback (Spline blocked/offline) — chrome orb */
.robot-fallback{position:absolute;top:50%;left:62%;width:min(40vw,380px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:46% 54% 50% 50%/52% 48% 52% 48%;opacity:0;
  background:conic-gradient(from 210deg,#26272b,#0c0c0e,#4a4c52,#141518,#33353a,#0c0c0e,#26272b);
  filter:blur(2px) contrast(1.1);box-shadow:inset 0 0 60px rgba(255,255,255,.14),0 40px 120px rgba(0,0,0,.6);
  animation:blob 14s var(--ease) infinite;transition:opacity 1s}
.robot-stage.robot-failed .robot-fallback{opacity:1}
@media(max-width:820px){.robot-fallback{left:50%;width:min(70vw,340px)}}
/* hero text gets a soft shadow for extra legibility over 3D */
.hero-inner .hero-word,.hero-inner .hero-tag{text-shadow:0 2px 30px rgba(0,0,0,.5)}

/* Mobile hero (robot removed): let content flow instead of forcing 100vh, and
   scale the wordmark so both words sit comfortably on a phone. */
@media(max-width:640px){
  .hero{min-height:auto;padding-top:112px;padding-bottom:56px}
  .hero-word{font-size:clamp(3.4rem,20vw,6.5rem);line-height:.9}
  .hero-tag{margin-top:20px}
  .hero-cta-row{margin-top:26px}
  .hero-cta-row .btn{flex:1 1 auto;justify-content:center}
  .scroll-cue{display:none}
}

/* --- robot companion: a floating character that follows + launches chat --- */
.robot-stage.is-follow{position:fixed;inset:auto;left:34vw;top:62px;width:66vw;height:calc(100vh - 62px);
  right:auto;bottom:auto;z-index:1;pointer-events:none;overflow:visible;
  transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),opacity .5s var(--ease),z-index 0s linear .4s}
/* Gently feather only the far edges so there's no hard rectangular cutout, but
   keep the whole robot — head AND cube base — comfortably inside the frame. The
   mask centre sits low and stays fully opaque high up, so when the robot looks
   UP toward the cursor its head has room and never gets clipped. */
.robot-stage.is-follow .robot-viewer{transform:none;position:relative;z-index:2;
  -webkit-mask:radial-gradient(96% 104% at 50% 46%,#000 72%,transparent 99%);
  mask:radial-gradient(96% 104% at 50% 46%,#000 72%,transparent 99%)}
.robot-stage.is-follow::after{transition:opacity .6s var(--ease)}
/* docked = a compact character, right-of-centre, clear of the edges. Taller
   than wide so there's headroom above and pedestal room below; no boxy panel. */
.robot-stage.is-follow.dock{left:calc(100vw - 312px);top:calc(50vh - 208px);width:262px;height:416px;z-index:600;
  overflow:visible;animation:robotDrift 16s ease-in-out infinite;background:none}
.robot-stage.is-follow.dock::after{opacity:0}
/* the robot bobs + tilts = alive; the slight scale keeps a margin so the head
   has room to look up without touching the frame edge */
.robot-stage.is-follow.dock .robot-viewer{animation:robotFloat 5.5s ease-in-out infinite}
/* tuck (dim, stays visible) when it drifts over real text */
.robot-stage.is-follow.shy{opacity:.42}
.robot-companion .robot-loader .spinner{width:22px;height:22px}

/* "noticing you" reaction — a small curious pop when the cursor/touch nears or
   scrolling starts. Kept within the frame so the head never clips. */
.robot-stage.robot-notice .robot-viewer{animation:robotNotice .7s var(--ease)!important}
@keyframes robotNotice{0%{transform:translateY(0) scale(.9) rotate(0)}
  30%{transform:translateY(-6px) scale(.96) rotate(-2.5deg)}
  62%{transform:translateY(-2px) scale(.92) rotate(1.5deg)}100%{transform:translateY(0) scale(.9) rotate(0)}}

/* grounded contact shadow + soft glow beneath the robot's own cube base — it
   sits on its pedestal instead of hovering on a flame (the model has a solid
   base, so a thruster read wrong). Appears only once the robot has rendered. */
.robot-pedestal{position:absolute;left:50%;bottom:7%;width:56%;height:26px;transform:translateX(-50%);
  z-index:1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.robot-pedestal::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,.28) 45%,transparent 72%);filter:blur(7px)}
.robot-pedestal::after{content:"";position:absolute;left:50%;top:-24%;width:120%;height:150%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(150,190,255,.28),rgba(200,210,225,.08) 42%,transparent 70%);
  filter:blur(6px);z-index:-1}
.robot-stage.robot-ready.dock .robot-pedestal,.robot-companion.robot-ready .robot-pedestal{opacity:1;
  animation:pedestalPulse 5.5s ease-in-out infinite}
@keyframes pedestalPulse{0%,100%{opacity:.9;transform:translateX(-50%) scaleX(1)}
  50%{opacity:.62;transform:translateX(-50%) scaleX(.88)}}

/* clickable hotspot (only in compact/docked mode) + "chat with me" hint */
.robot-click{position:absolute;inset:0;z-index:5;pointer-events:none;background:transparent;border:0;
  cursor:pointer;border-radius:24px}
.robot-stage.is-follow.dock .robot-click,.robot-companion .robot-click{pointer-events:auto}
.robot-hint{position:absolute;left:50%;top:6%;transform:translate(-50%,-100%);z-index:6;pointer-events:none;
  white-space:nowrap;font-family:var(--font-body);font-size:.72rem;letter-spacing:.01em;color:var(--text);
  background:rgba(13,13,15,.92);border:1px solid var(--hairline);border-radius:100px;padding:6px 13px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.robot-hint::after{content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);background:rgba(13,13,15,.92);
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.robot-stage.is-follow.dock:hover .robot-hint,.robot-companion:hover .robot-hint,
.robot-stage.robot-greet .robot-hint,.robot-companion.robot-greet .robot-hint,
.robot-stage.robot-notice .robot-hint,.robot-companion.robot-notice .robot-hint{opacity:1;transform:translate(-50%,-118%)}

/* bob + a slight scale-down so there's a margin around the model (headroom) */
@keyframes robotFloat{0%{transform:translate3d(0,0,0) rotate(0deg) scale(.9)}
  50%{transform:translate3d(2px,-16px,0) rotate(1.8deg) scale(.9)}100%{transform:translate3d(0,0,0) rotate(0deg) scale(.9)}}
@keyframes robotDrift{0%{transform:translate(0,0)}25%{transform:translate(-24px,12px)}
  50%{transform:translate(-12px,30px)}75%{transform:translate(-28px,9px)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){
  .robot-stage.is-follow.dock,.robot-stage.is-follow.dock .robot-viewer,.robot-pedestal{animation:none!important}
  .robot-stage.is-follow.dock .robot-viewer{transform:scale(.9)}
}
/* Mobile: a small, tidy docked companion bottom-right (chat launcher), with
   headroom + pedestal room so the head/base stay in frame. */
@media(max-width:640px){
  .robot-stage.is-follow.dock,.robot-companion.dock{left:auto;right:10px;top:auto;
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:150px;height:238px;animation:none}
  .robot-pedestal{height:16px}
  .robot-hint{font-size:.66rem;padding:5px 10px}
}
/* hide the Spline watermark inside the viewer's shadow DOM (belt-and-braces) */
spline-viewer::part(logo){display:none!important}
spline-viewer::part(watermark){display:none!important}

/* --- generic pane / callout --------------------------------------------- */
.pane{padding:clamp(28px,4vw,48px)}
.big-statement{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1.08;max-width:20ch}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.cta-band{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;
  padding-block:clamp(60px,9vw,120px)}
.cta-band .big-statement{max-width:26ch}

/* --- process page -------------------------------------------------------- */
.proc-step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);
  padding-block:clamp(36px,6vw,72px);border-top:1px solid var(--hairline);align-items:start}
.proc-n{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,10vw,8rem);
  line-height:.8;letter-spacing:-.04em;color:var(--text-faint)}
.proc-del{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.proc-del li{font-size:.76rem;letter-spacing:.06em;color:var(--text-mute);
  border:1px solid var(--hairline);border-radius:100px;padding:6px 14px}
@media(max-width:640px){.proc-step{grid-template-columns:1fr}}

/* --- article body -------------------------------------------------------- */
.article-hero{padding-top:140px}
.article-body{max-width:70ch;margin-inline:auto}
.article-body p{margin-bottom:1.3em;color:var(--text-mute);font-size:1.05rem;line-height:1.7}
.article-body h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);
  margin:1.6em 0 .6em;letter-spacing:-.02em;color:var(--text)}
.article-body blockquote{border-left:2px solid var(--text);padding-left:20px;margin:1.4em 0;
  font-family:var(--font-display);font-size:1.3rem;color:var(--text)}

/* --- testimonials masonry + logos --------------------------------------- */
.masonry{columns:2;column-gap:clamp(16px,2vw,28px)}
.masonry > *{margin-bottom:clamp(16px,2vw,28px)}
@media(max-width:720px){.masonry{columns:1}}
.logos{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.logos span{font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,2.4vw,1.6rem);
  color:var(--text-faint);letter-spacing:-.01em;padding:8px 18px;border:1px solid var(--hairline);border-radius:100px}

/* --- reserve / checkout -------------------------------------------------- */
.reserve-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:920px){.reserve-layout{grid-template-columns:1fr}}
#reserve-grid{grid-template-columns:1fr 1fr}
@media(max-width:620px){#reserve-grid{grid-template-columns:1fr}}
.checkout-panel{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px;padding:28px}
.cart-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hairline);color:var(--text-mute)}
.cart-row-r{display:flex;align-items:center;gap:12px;color:var(--text);white-space:nowrap}
.cart-rm{color:var(--text-faint);font-size:1.2rem;line-height:1;transition:color .3s}
.cart-rm:hover{color:var(--text)}
.cart-total{display:flex;justify-content:space-between;padding-top:16px;font-family:var(--font-display);
  font-weight:800;font-size:1.3rem}
.cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  margin-left:8px;padding:0 5px;border-radius:100px;background:var(--text);color:var(--bg);
  font-size:.66rem;font-weight:700;font-family:var(--font-body)}
[data-add].added{background:var(--text)!important;color:var(--bg)!important}
#checkout-form{opacity:.4;pointer-events:none;transition:opacity .4s}
.checkout-panel.ready #checkout-form{opacity:1;pointer-events:auto}
.reserve-note{font-size:.82rem;color:var(--text-faint)}

/* --- start / questionnaire ---------------------------------------------- */
.q-form{display:flex;flex-direction:column;gap:22px}
.q-card{padding:clamp(22px,3vw,34px)}
.q-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.q-badge{width:28px;height:28px;border-radius:50%;background:var(--text);color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex:0 0 28px;
  font-family:var(--font-display)}
.pkg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.pkg-tiles{grid-template-columns:1fr}}
.pkg-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 18px;cursor:pointer;
  border:1px solid var(--hairline);border-radius:16px;background:rgba(255,255,255,.02);
  transition:transform .4s var(--ease),border-color .4s,background .4s,box-shadow .4s;overflow:hidden}
.pkg-tile:hover{transform:translateY(-4px);border-color:rgba(243,244,246,.28)}
.pkg-tile input{position:absolute;opacity:0;width:1px;height:1px}
.pkg-tile.is-selected{border-color:rgba(243,244,246,.6);background:rgba(255,255,255,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(255,255,255,.08)}
.pkg-check{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--hairline);
  transition:background .3s,border-color .3s;background:rgba(255,255,255,.03)}
.pkg-check::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--bg);font-size:.8rem;font-weight:800;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--ease)}
.pkg-tile.is-selected .pkg-check{background:var(--text);border-color:var(--text)}
.pkg-tile.is-selected .pkg-check::after{opacity:1;transform:scale(1)}
.pkg-kicker{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.pkg-price{font-family:var(--font-display);font-weight:900;font-size:1.9rem;letter-spacing:-.03em}
.pkg-desc{font-size:.85rem;color:var(--text-mute);line-height:1.45}
.pkg-badge{position:absolute;top:0;right:14px;background:var(--text);color:var(--bg);font-size:.58rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:0 0 8px 8px}
.q-more{padding:0}
.q-more > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(22px,3vw,34px);cursor:pointer}
.q-more > summary::-webkit-details-marker{display:none}
.q-more[open] > summary{padding-bottom:6px}
.q-more-body{padding:0 clamp(22px,3vw,34px) clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px}
.q-submit-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:4px}
.form-error{color:var(--text);border:1px solid var(--hairline);border-radius:12px;padding:16px;background:var(--surface-1)}

/* ==========================================================================
   UI ANIMATION ENHANCEMENTS — nothing sits still
   ========================================================================== */
/* button light-sweep on hover */
.btn{overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn:hover::before{left:130%}
.btn--primary::before{background:linear-gradient(100deg,transparent,rgba(0,0,0,.18),transparent)}
.btn:active{transform:scale(.97)}

/* animated service icon */
.svc-card .svc-ico-wrap{transition:transform .5s var(--ease),border-color .4s,background .4s}
.svc-card:hover .svc-ico-wrap{transform:translateY(-3px) rotate(-6deg);border-color:rgba(243,244,246,.35);background:rgba(255,255,255,.05)}
.svc-ico{transition:transform .5s var(--ease)}
.svc-card:hover .svc-ico{transform:scale(1.12)}
.svc-card{transition:transform .5s var(--ease),border-color .4s}
.svc-card:hover{transform:translateY(-5px)}

/* social buttons */
.nav-social{display:flex;gap:6px}
.social-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;color:var(--text-mute);
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s}
.social-btn svg{width:17px;height:17px}
.social-btn:hover{transform:translateY(-2px) scale(1.08);background:var(--text);color:var(--bg);border-color:var(--text)}

/* book-a-call button */
.book-call{padding:.7em 1.15em;font-size:.84rem;gap:.5em}
.book-ico{width:16px;height:16px}
.book-call{position:relative}
.book-call::after{content:"";position:absolute;inset:-3px;border-radius:100px;border:1px solid rgba(255,255,255,.5);
  opacity:0;animation:pulseRing 2.6s var(--ease) infinite}
@keyframes pulseRing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.18)}}

/* card pointer glow (tier / post / quote) */
.tier-card,.post-card,.quote-card{transition:transform .5s var(--ease),border-color .45s,box-shadow .5s}
.tier-card:hover,.post-card:hover,.quote-card:hover{transform:translateY(-5px)}

/* animated brand mark */
.brand-mark{animation:markSpin 8s linear infinite}
@keyframes markSpin{to{filter:hue-rotate(0deg);transform:rotate(360deg)}}
.brand:hover .brand-mark{box-shadow:0 0 22px rgba(255,255,255,.6)}

/* eyebrow tick that draws in */
.eyebrow{position:relative}

/* tier badge shimmer */
.tier-badge,.pkg-badge{background-image:linear-gradient(100deg,#fff,#c8ccd2,#fff);background-size:200% 100%;
  animation:shimmer 3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* scroll-cue + section index micro-motion already handled; reduce for RM */
@media(prefers-reduced-motion:reduce){
  .btn::before,.book-call::after,.brand-mark,.tier-badge,.pkg-badge{animation:none!important;transition:none!important}
}

/* touch: show hover content (no hover on mobile) for work cards */
@media(hover:none){
  .work-card .work-hover{opacity:1;transform:none;background:linear-gradient(to top,rgba(5,5,5,.92),transparent 70%);
    justify-content:flex-end;backdrop-filter:none}
  .work-card .work-meta{opacity:0}
  .work-card:hover{transform:none}
}

/* --- work page: large alternating feature rows -------------------------- */
.work-features{display:flex;flex-direction:column;gap:clamp(56px,9vw,130px)}
.work-feature{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.work-feature.is-flip .work-feature__media{order:2}
.work-feature__media{position:relative;display:block;border-radius:20px;overflow:hidden;
  border:1px solid var(--hairline);aspect-ratio:3/4;max-width:440px;width:100%;margin-inline:auto;
  background:var(--surface-2);transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.work-feature__media:hover{transform:translateY(-6px);box-shadow:0 34px 80px rgba(0,0,0,.55);border-color:rgba(243,244,246,.28)}
.work-feature__media img,.work-feature__media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .8s var(--ease)}
.work-feature__media:hover img,.work-feature__media:hover video{transform:scale(1.05)}
.work-feature__body{display:flex;flex-direction:column;gap:14px}
.work-feature__title{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.work-feature__impact{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--text);line-height:1.15}
.work-feature__body .work-tags{margin-top:6px}
.work-feature__body .btn{align-self:flex-start;margin-top:10px}
@media(max-width:820px){
  .work-feature{grid-template-columns:1fr;gap:22px}
  .work-feature.is-flip .work-feature__media{order:0}
  .work-feature__media{max-width:360px}
}

/* --- guide / setup page -------------------------------------------------- */
.guide-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.guide-jump .chip{cursor:pointer}
.steps{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:step}
.step{display:flex;gap:20px;align-items:flex-start;padding:22px 24px}
.step-n{flex:0 0 40px;width:40px;height:40px;border-radius:12px;border:1px solid var(--hairline);
  background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.step h3{margin-bottom:4px}
.step p{max-width:60ch}
.ilink{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ilink:hover{opacity:.7}
.guide-jump a.chip{scroll-margin-top:100px}
section[id]{scroll-margin-top:90px}

/* --- page-leave/enter fade for content ---------------------------------- */
body:not(.page-ready) main{opacity:0}
main{transition:opacity .5s var(--ease)}
body.page-leaving main{opacity:0}

/* ==========================================================================
   CHAT ASSISTANT  (window.PFChat) — dark/glass, matches the site
   ========================================================================== */
.pf-chat-root{position:fixed;z-index:1200;right:0;bottom:0;pointer-events:none}
.pf-chat-root *{pointer-events:auto}

/* launcher FAB — only shown when the 3D robot ISN'T acting as the launcher */
.pf-chat-fab{position:fixed;right:22px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text);background:linear-gradient(160deg,rgba(30,30,34,.96),rgba(10,10,12,.96));
  border:1px solid var(--hairline);box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.08);
  transition:transform .3s var(--ease),box-shadow .3s,opacity .3s,visibility .3s}
.pf-chat-fab svg{width:28px;height:28px}
.pf-chat-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.pf-chat-fab-dot{position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;
  background:#8fd0ff;box-shadow:0 0 0 0 rgba(143,208,255,.6);animation:pfPulse 2.4s var(--ease) infinite}
@keyframes pfPulse{0%{box-shadow:0 0 0 0 rgba(143,208,255,.55)}70%,100%{box-shadow:0 0 0 12px rgba(143,208,255,0)}}
/* the robot is the launcher on capable desktops → hide the FAB there */
body.has-robot .pf-chat-fab,body.pf-robot-pending .pf-chat-fab,
.pf-chat-root.is-open .pf-chat-fab{opacity:0;visibility:hidden;transform:scale(.6)}

/* panel */
.pf-chat{position:fixed;right:22px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  width:370px;max-width:calc(100vw - 32px);height:min(72vh,580px);display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;background:rgba(13,13,15,.86);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--hairline);
  box-shadow:0 30px 80px rgba(0,0,0,.62),inset 0 1px 1px rgba(255,255,255,.05);
  transform:translateY(16px) scale(.98);opacity:0;transform-origin:bottom right;
  transition:transform .34s var(--ease),opacity .34s var(--ease)}
.pf-chat-root.is-open .pf-chat{transform:none;opacity:1}
.pf-chat[hidden]{display:none}
.pf-chat-head{display:flex;align-items:center;gap:12px;padding:14px 14px 13px;border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.pf-chat-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--hairline)}
.pf-chat-avatar svg{width:22px;height:22px}
.pf-chat-id{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.pf-chat-id strong{font-family:var(--font-display);font-weight:800;font-size:.98rem;letter-spacing:.01em}
.pf-chat-id span{font-size:.72rem;color:var(--text-mute)}
.pf-chat-x{width:34px;height:34px;flex:0 0 34px;border-radius:9px;font-size:1.5rem;line-height:1;color:var(--text-mute);
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.pf-chat-x:hover{background:rgba(255,255,255,.06);color:var(--text)}

.pf-chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--hairline) transparent}
.pf-chat-log::-webkit-scrollbar{width:7px}
.pf-chat-log::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:8px}
.pf-msg{max-width:86%;font-size:.9rem;line-height:1.5;padding:11px 14px;border-radius:15px;animation:pfIn .3s var(--ease)}
@keyframes pfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pf-msg.bot{align-self:flex-start;background:rgba(255,255,255,.055);border:1px solid var(--hairline);
  border-bottom-left-radius:5px;color:var(--text)}
.pf-msg.user{align-self:flex-end;background:var(--text);color:var(--bg);border-bottom-right-radius:5px;font-weight:500}
.pf-msg.bot strong{font-weight:700;color:var(--text)}
.pf-chat-link{color:#8fd0ff;text-decoration:underline;text-underline-offset:2px}
.pf-chat-link:hover{opacity:.82}
.pf-typing{display:flex;gap:5px;align-items:center;padding:14px 16px}
.pf-typing span{width:7px;height:7px;border-radius:50%;background:var(--text-mute);animation:pfBlink 1.1s infinite}
.pf-typing span:nth-child(2){animation-delay:.18s}.pf-typing span:nth-child(3){animation-delay:.36s}
@keyframes pfBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.pf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.pf-chip{font-size:.8rem;padding:8px 13px;border-radius:100px;border:1px solid var(--hairline);
  background:rgba(255,255,255,.03);color:var(--text-mute);text-align:left;line-height:1.3;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.pf-chip:hover{background:rgba(255,255,255,.08);color:var(--text);border-color:rgba(243,244,246,.32);transform:translateY(-1px)}
.pf-more-label{font-size:.74rem;color:var(--text-faint);letter-spacing:.02em;margin:6px 2px -2px}
/* footer CTA row (tap-only bot — no text input) */
.pf-chat-quick{display:flex;gap:8px;flex:0 0 auto;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 14px);
  border-top:1px solid var(--hairline)}
.pf-chat-cta{flex:1;text-align:center;font-size:.82rem;font-weight:600;padding:11px 12px;border-radius:11px;
  background:var(--text);color:var(--bg);transition:opacity .2s,transform .2s}
.pf-chat-cta.ghost{background:transparent;color:var(--text);border:1px solid var(--hairline)}
.pf-chat-cta:hover{transform:translateY(-1px);opacity:.92}
@media(prefers-reduced-motion:reduce){
  .pf-chat,.pf-msg,.pf-chat-fab,.pf-chat-fab-dot,.pf-typing span{animation:none!important;transition:none!important}
}
/* phones: near-full-width sheet, easy to close, never overflows */
@media(max-width:640px){
  .pf-chat-fab{right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:54px;height:54px}
  .pf-chat{right:8px;left:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);width:auto;max-width:none;
    height:min(78vh,600px);border-radius:18px}
  .pf-msg{max-width:90%}
}

/* ==========================================================================
   MOBILE POLISH — spacing, tap targets, no iOS zoom, lighter type
   ========================================================================== */
/* iOS zooms any focused input under 16px — bump form controls on phones */
@media(max-width:640px){
  .qwrap input[type=text],.qwrap input[type=email],.qwrap input[type=tel],.qwrap textarea,.qwrap select,
  .field input,.field textarea,.field select{font-size:16px!important}
  /* comfortable tap targets */
  .nav-burger{width:40px;height:40px}
  .social-btn{width:38px;height:38px}
  .chip{padding:9px 15px}
  .faq-item summary{padding-block:16px}
  /* keep the primary CTA prominent; move Book-a-call into the menu on phones */
  .nav-tools .book-call{display:none}
  .nav-cta-btn{padding:.62em 1em;font-size:.82rem}
  /* headline + lead breathing room */
  .hero{padding-top:88px}
  .hero-tag{max-width:100%}
  .section{padding-block:clamp(56px,14vw,90px)}
  .cta-band{padding:32px 22px}
}
/* very small phones: keep the top bar from crowding */
@media(max-width:400px){
  .nav-cta-btn .btn__arrow{display:none}
  .brand-name{font-size:.92rem}
}