:root { --ease: cubic-bezier(.22,.61,.36,1); }
  html { scroll-behavior: smooth; scroll-padding-top: 84px; }
  body { -webkit-font-smoothing: antialiased; }

  .grain::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>"); }

  .h-display{ letter-spacing:-.035em; line-height:.95; }
  .eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }

  [data-reveal data-float]{ opacity:0; transform:translateY(24px); }
  .revealed[data-reveal data-float]{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0ms); }

  .navlink{ position:relative; }
  .navlink::after{ content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .32s var(--ease); }
  .navlink:hover::after, .navlink[aria-current="true"]::after{ transform:scaleX(1); transform-origin:left; }

  .btn-dark{ transition:transform .28s var(--ease), background-color .28s var(--ease); will-change:transform; }
  .btn-dark:hover .arrow{ transform:translateX(3px); }
  .arrow{ transition:transform .28s var(--ease); }

  .track-playhead{ animation: scrub 9s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes scrub{ 0%{left:0%} 50%{left:100%} 100%{left:0%} }
  .clip{ transition:transform .3s var(--ease); }
  .clip:hover{ transform:translateY(-2px); }

  .marquee{ animation: slide 30s linear infinite; }
  .marquee:hover{ animation-play-state: paused; }
  @keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

  .reel-play{ transition: transform .35s var(--ease); }
  .reel:hover .reel-play{ transform:scale(1.07); }

  .card-lift{ transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
  .card-lift:hover{ transform:translateY(-4px); }

  .chip{ transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
  .card-lift:hover .chip{ transform:translateY(-1px); }

  .work-card{ transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .work-card.is-hidden{ display:none; }
  .work-card.is-enter{ opacity:0; transform:translateY(14px) scale(.985); }

  .acc-panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .42s var(--ease); }
  .acc-panel > div{ overflow:hidden; }
  .acc[aria-expanded="true"] + .acc-panel{ grid-template-rows:1fr; }
  .acc-icon{ transition: transform .35s var(--ease); }
  .acc[aria-expanded="true"] .acc-icon{ transform:rotate(180deg); }

  .float-slow{ animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

  .wa{ box-shadow:0 14px 34px -12px rgba(27,28,24,.5); transition: transform .3s var(--ease); }
  .wa:hover{ transform:scale(1.06); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    [data-reveal data-float]{ opacity:1 !important; transform:none !important; transition:none !important; }
    .track-playhead{ animation:none; left:38%; }
    .marquee, .float-slow{ animation:none; }
    *{ animation-duration:.001ms !important; transition-duration:.06s !important; }
  }

  /* ============ PREMIUM MOTION LAYER ============ */
  @media (pointer:fine){ html.has-cursor body{ cursor:none; } html.has-cursor a, html.has-cursor button, html.has-cursor input, html.has-cursor select, html.has-cursor textarea, html.has-cursor label, html.has-cursor [data-magnetic]{ cursor:none; } }
  #cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:30px; height:30px; transform:translate(-3px,-3px); transition:transform .12s var(--ease), opacity .3s, filter .28s var(--ease); filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
  #cursor svg{ display:block; width:100%; height:100%; }
  #cursorDot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:7px; height:7px; border-radius:2px; background:#D0FF00; border:1.5px solid #1B1C18; transform:translate(-50%,-50%) rotate(45deg); transition:width .24s var(--ease),height .24s var(--ease),background-color .24s var(--ease); }
  #cursor.is-hover{ filter:drop-shadow(0 3px 8px rgba(208,255,0,.6)); }
  #cursor.is-hover .pen-nib{ fill:#D0FF00; }
  #cursor.is-hover + #cursorDot, #cursorDot.is-hover{ width:11px; height:11px; }
  #cursor.is-down{ transform:translate(-3px,-3px) scale(.82); }
  @media (pointer:coarse){ #cursor,#cursorDot{ display:none; } body{ cursor:auto; } }

  /* floating ambient icons */
  .floaties{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .floatie{ position:absolute; opacity:.14; color:#1B1C18; animation:drift var(--dur,16s) ease-in-out infinite; animation-delay:var(--dl,0s); }
  .floatie.lime{ color:#7FA000; opacity:.22; }
  @keyframes drift{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-26px) rotate(calc(var(--r,0deg) + 8deg)); } }

  /* entrance — whole screens float up in */
  [data-float]{ opacity:0; transform:translateY(40px) scale(.985); }
  .revealed[data-float]{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }

  /* hero load choreography */
  .pageload [data-hero]{ opacity:0; transform:translateY(28px); }
  .loaded [data-hero]{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--hd,0ms); }

  /* quote popup */
  #quotePop{ position:fixed; z-index:9000; right:20px; bottom:20px; width:min(340px,calc(100vw - 40px));
    transform:translateY(24px) scale(.96); opacity:0; pointer-events:none;
    transition:transform .55s var(--ease), opacity .55s var(--ease); }
  #quotePop.show{ transform:none; opacity:1; pointer-events:auto; }
  @media (max-width:640px){ #quotePop{ right:12px; left:12px; bottom:88px; width:auto; } }
  .pop-glow{ animation:popglow 3.5s ease-in-out infinite; }
  @keyframes popglow{ 0%,100%{ box-shadow:0 20px 50px -20px rgba(27,28,24,.55); } 50%{ box-shadow:0 20px 60px -18px rgba(208,255,0,.5); } }

  @media (prefers-reduced-motion: reduce){
    body{ cursor:auto !important; }
    #cursor,#cursorDot{ display:none !important; }
    .floatie{ animation:none !important; }
    [data-float]{ opacity:1 !important; transform:none !important; transition:none !important; }
    .pageload [data-hero]{ opacity:1 !important; transform:none !important; }
    .pop-glow{ animation:none !important; }
  }


  /* --- quote dock: avatar + safety --- */
  #quotePop .writeline{ opacity:1; transform:none; filter:none; }
  #quotePop .qp-card{ position:relative; }
  .qp-av{ position:relative; width:44px; height:44px; flex:0 0 44px; border-radius:9999px;
    display:grid; place-items:center; overflow:hidden;
    background:linear-gradient(140deg,#2A2C25 0%,#1B1C18 60%);
    box-shadow:0 0 0 1.5px rgba(208,255,0,.35), 0 0 0 4px rgba(244,244,240,.05); }
  .qp-av img{ width:100%; height:100%; object-fit:cover; display:block; }
  .qp-av .qp-mono{ font-family:Outfit,sans-serif; font-weight:800; font-size:15px;
    letter-spacing:-.02em; color:#D0FF00; }
  .qp-dot{ position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:9999px;
    background:#D0FF00; border:2.5px solid #1B1C18; }
  .qp-dot::after{ content:""; position:absolute; inset:-2px; border-radius:9999px;
    background:#D0FF00; opacity:.5; animation:qpping 2.2s cubic-bezier(0,0,.2,1) infinite; }
  @keyframes qpping{ 0%{ transform:scale(.85); opacity:.55; } 70%,100%{ transform:scale(2); opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .qp-dot::after{ animation:none; opacity:0; } }


  /* ---- booking / calendar ---- */
  .cal-frame{ position:relative; width:100%; border-radius:18px; overflow:hidden;
    border:1px solid #DEDED5; background:#fff; min-height:560px; }
  .cal-frame iframe{ width:100%; height:100%; min-height:560px; border:0; display:block; }
  .cal-fallback{ position:absolute; inset:0; display:grid; place-items:center; padding:32px; text-align:center;
    background:repeating-linear-gradient(135deg,#F4F4F0 0 12px,#EFEFE8 12px 24px); }
  .cal-frame.live .cal-fallback{ display:none; }
  @media (max-width:640px){ .cal-frame, .cal-frame iframe{ min-height:640px; } }
  .meet-dot{ width:7px; height:7px; border-radius:9999px; background:#D0FF00; }
  .price-card{ transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
  .price-card:not(.featured):hover{ transform:translateY(-6px); border-color:#1B1C18; box-shadow:0 40px 70px -40px rgba(27,28,24,.4); }
  .price-card.featured:hover{ transform:translateY(-6px); }
  .price-card:hover .price-glow{ opacity:.5; transition:opacity .5s var(--ease); }
  /* ---- extra signature animations ---- */
  /* service cards: light sweep on hover */
  .sweep{ position:relative; overflow:hidden; }
  .sweep::before{ content:""; position:absolute; top:0; left:-75%; width:50%; height:100%; z-index:1; pointer-events:none;
    background:linear-gradient(100deg,transparent 0%,rgba(208,255,0,.16) 50%,transparent 100%); transform:skewX(-18deg); transition:none; opacity:0; }
  .sweep:hover::before{ animation:sweep 1s var(--ease); }
  @keyframes sweep{ 0%{ left:-75%; opacity:1; } 100%{ left:130%; opacity:1; } }

  /* animated vertical connector line in process */
  .proc-line{ transform-origin:top; transform:scaleY(0); }
  .proc-line.grow{ transform:scaleY(1); transition:transform 1.1s var(--ease); }

  /* eyebrow diamond pulse */
  .eyebrow-live::before{ content:"◆ "; color:#7FA000; }
  @keyframes barpulse{ 0%,100%{ transform:scaleY(1); opacity:.5; } 50%{ transform:scaleY(1.9); opacity:1; } }
  .eq span{ display:inline-block; width:3px; margin:0 1px; background:#D0FF00; border-radius:2px; animation:barpulse 1s ease-in-out infinite; }
  .eq span:nth-child(2){ animation-delay:.15s } .eq span:nth-child(3){ animation-delay:.3s } .eq span:nth-child(4){ animation-delay:.45s }
  /* ================= GRADIENT SYSTEM (brand) ================= */
  :root{ --grad: linear-gradient(115deg,#D0FF00 0%,#A8E000 35%,#FF6A1A 100%);
         --grad-soft: linear-gradient(115deg,rgba(208,255,0,.18),rgba(255,106,26,.14)); }
  .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .grad-chip{ background:var(--grad); color:#1B1C18; }
  .grad-ring{ position:relative; }
  .grad-ring::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
    background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
  .grad-bar{ background:var(--grad); }

  /* ================= ANIM 1: word-by-word headline reveal ================= */
  /* smooth write-on text reveal (words + lines) */
  .word{ display:inline-block; opacity:0; transform:translateY(.42em); filter:blur(6px); will-change:opacity,transform,filter; }
  .revealed .word{ opacity:1; transform:none; filter:blur(0); transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease); }
  .writeline{ opacity:0; transform:translateY(.3em); filter:blur(4px); }
  .revealed.writeline, .revealed .writeline{ opacity:1; transform:none; filter:blur(0); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); transition-delay:var(--wd,0ms); }

  /* ================= ANIM 2: 3D tilt cards ================= */
  .tilt{ transform-style:preserve-3d; transition:transform .35s var(--ease), box-shadow .35s var(--ease); will-change:transform; }
  .tilt-inner{ transform:translateZ(28px); }

  /* ================= ANIM 3: scroll-drawn connector path ================= */
  .draw-path{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); }
  .draw-path.drawn{ transition:stroke-dashoffset 1.6s var(--ease); stroke-dashoffset:0; }

  /* stat ring */
  .ring-track{ stroke:#DEDED5; } .ring-fill{ stroke-dasharray:170; stroke-dashoffset:170; transform:rotate(-90deg); transform-origin:center; }
  .ring-fill.on{ transition:stroke-dashoffset 1.6s var(--ease); }

  /* floating tool icons — global usage */
  .floaties{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .floatie{ position:absolute; opacity:.13; color:#1B1C18; animation:drift var(--dur,17s) ease-in-out infinite; animation-delay:var(--dl,0s); }
  .floatie.on-dark-ic{ color:#F4F4F0; opacity:.10; }
  .floatie.lime{ color:#7FA000; opacity:.2; }

  /* join-team premium glow border */
  .glow-card{ position:relative; }
  .glow-card::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:var(--grad); opacity:.35; z-index:-1; filter:blur(14px); }

  @media (prefers-reduced-motion: reduce){
    .word,.writeline{ opacity:1 !important; transform:none !important; filter:none !important; }
    .tilt{ transform:none !important; }
    .draw-path{ stroke-dashoffset:0 !important; }
    .ring-fill{ stroke-dashoffset:42 !important; }
  }
  /* by-the-numbers typewriter band */
  .numline{ background:linear-gradient(115deg,rgba(208,255,0,.22) 0%,rgba(244,244,240,.9) 42%,rgba(255,106,26,.14) 100%);
    background-size:180% 180%; animation:numshift 16s ease-in-out infinite; border:1px solid var(--line,#DEDED5); }
  @keyframes numshift{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
  .numline-inner{ background:rgba(244,244,240,.55); backdrop-filter:blur(2px); }
  .caret{ display:inline-block; width:2px; height:1.05em; margin-left:3px; vertical-align:-2px; background:#1B1C18; animation:caretblink 1s steps(1) infinite; }
  @keyframes caretblink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
  @media (prefers-reduced-motion: reduce){ .numline{ animation:none } .caret{ animation:none; opacity:1 } }
  /* work filter tabs — explicit states so JS toggling never breaks contrast */
  .tab{ transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
  .tab.tab-off{ background:rgba(244,244,240,.06); border-color:rgba(244,244,240,.15); color:#F4F4F0; font-weight:500; }
  .tab.tab-off:hover{ border-color:#D0FF00; background:rgba(244,244,240,.10); }
  .tab.tab-on{ background:var(--grad); background-size:200% 100%; border-color:transparent; color:#1B1C18; font-weight:600; animation:gradshift 9s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .tab.tab-on{ animation:none; } }
  /* ---- blurred orbiting tool tiles (hero background) ---- */
  .orbit-wrap{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .orbit{ position:absolute; left:50%; top:46%; width:min(880px,116vw); aspect-ratio:1; transform:translate(-50%,-50%);
    animation:orbitspin 46s linear infinite; }
  .orbit.rev{ animation-duration:64s; animation-direction:reverse; width:min(620px,86vw); }
  @keyframes orbitspin{ from{ transform:translate(-50%,-50%) rotate(0deg) } to{ transform:translate(-50%,-50%) rotate(360deg) } }
  .otile{ position:absolute; left:50%; top:50%; width:104px; height:104px; margin:-52px 0 0 -52px;
    display:grid; place-items:center; border-radius:24px;
    background:linear-gradient(150deg,rgba(27,28,24,.10),rgba(27,28,24,.03));
    border:1px solid rgba(27,28,24,.07); color:#1B1C18;
    filter:blur(3px); opacity:.30; }
  .otile.lit{ background:linear-gradient(150deg,rgba(208,255,0,.30),rgba(208,255,0,.06)); border-color:rgba(208,255,0,.35); filter:blur(2px); opacity:.45; }
  .otile.near{ filter:blur(1.2px); opacity:.42; }
  .otile > span{ display:block; animation:otilespin 46s linear infinite reverse; }
  .orbit.rev .otile > span{ animation-duration:64s; animation-direction:normal; }
  @media (max-width:640px){ .otile{ width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:18px; } }
  @media (prefers-reduced-motion: reduce){ .orbit,.otile > span{ animation:none !important; } }
  /* ---- orbiting blurred tool tiles (hero bg) ---- */
  .orbit-stage{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .orb{ position:absolute; left:50%; top:46%; width:0; height:0;
        animation:orbSpin var(--dur,44s) linear infinite; animation-delay:var(--dl,0s); }
  .orb.rev{ animation-direction:reverse; }
  .orb > span{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) translateY(calc(-1 * var(--r,300px))); }
  .orb > span > i{ display:grid; place-items:center; width:var(--s,64px); height:var(--s,64px);
        border-radius:9999px; background:rgba(255,255,255,.62); color:#5F6B3A;
        border:1px solid rgba(27,28,24,.07);
        box-shadow:0 10px 26px -14px rgba(27,28,24,.20);
        backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
        opacity:var(--o,.6);
        animation:orbSpinRev var(--dur,44s) linear infinite; animation-delay:var(--dl,0s); }
  .orb > span > i.accent{ background:rgba(208,255,0,.20); border-color:rgba(127,160,0,.22); color:#5F7A00; }
  .orb > span > i.solid{ background:rgba(27,28,24,.86); border-color:transparent; color:#D0FF00; }
  .orb > span > i svg{ width:44%; height:44%; }
  .orb.rev > span > i{ animation-direction:normal; }
  .orb.rev{ animation-direction:reverse; }
  @keyframes orbSpin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
  @keyframes orbSpinRev{ from{ transform:rotate(0deg) } to{ transform:rotate(-360deg) } }
  @media (max-width:900px){ .orb > span > i{ --s:46px; opacity:.5; } }
  @media (prefers-reduced-motion: reduce){ .orb, .orb > span > i{ animation:none !important; } }
  /* ---- mobile hardening ---- */
  html,body{ max-width:100%; overflow-x:hidden; }
  img,svg,video{ max-width:100%; }
  @media (max-width:640px){
    /* tighter orbit so blurred tiles never crowd the copy */
    .orb > span > i{ --s:40px !important; }
    .orb{ top:38%; }
    .orbit-stage{ opacity:.55; }
    /* comfortable tap targets */
    a,button,input,select,textarea,[role="tab"]{ min-height:44px; }
    a.navlink,footer a,.sr-only{ min-height:0; }
    /* horizontal-scroll strips instead of squashed grids */
    .scroll-x{ display:flex; overflow-x:auto; gap:.5rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
    .scroll-x::-webkit-scrollbar{ display:none; }
    .scroll-x{ scrollbar-width:none; }
    .scroll-x > *{ flex:0 0 auto; min-width:44%; scroll-snap-align:start; }
    /* headline sizing safety */
    h1,h2{ overflow-wrap:break-word; hyphens:auto; }
  }
  :focus-visible{ outline:2px solid #1B1C18; outline-offset:3px; border-radius:6px; }
  .on-dark :focus-visible{ outline-color:#D0FF00; }