/* Ported from the original static site's <style> block */
  body{ background:#FAF9F6; color:#1A1A1A; overflow-x:hidden; }

  /* ---- legibility pass: darken/weight up small & light text slightly, same sizes & layout ---- */
  p.font-light, .text-mutedtext, p{ font-weight:380; }
  .opacity-70{ opacity:0.82; }
  .opacity-80{ opacity:0.88; }
  footer{ color:rgba(250,249,246,0.86) !important; }
  footer .opacity-70{ opacity:0.88; }
  footer .text-\[13px\]{ color:rgba(250,249,246,0.92); }

  .interactive-stage{ opacity:0; transform:translateY(50px) scale(0.98); transition:opacity 1s cubic-bezier(.25,1,.5,1), transform 1s cubic-bezier(.25,1,.5,1); will-change:transform,opacity; }
  .interactive-stage.is-visible{ opacity:1; transform:translateY(0) scale(1); }

  /* ---- custom cursor dot ---- */
  .cursor-dot, .cursor-ring{
    position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
    border-radius:50%; transform:translate(-50%,-50%); will-change:transform;
  }
  .cursor-dot{ width:7px; height:7px; background:#C5A880; }
  .cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(197,168,128,0.55); transition:width .25s ease, height .25s ease, border-color .25s ease, opacity .25s ease; }
  .cursor-ring.hovering{ width:50px; height:50px; border-color:rgba(26,26,26,0.45); }
  body.no-custom-cursor .cursor-dot, body.no-custom-cursor .cursor-ring{ display:none; }
  @media (hover:none){ .cursor-dot, .cursor-ring{ display:none; } }

  /* ============ 3D FLOATING TOOL ILLUSTRATION (hero) — real photos ============ */
  .tool-scene-wrap{
    position:relative; aspect-ratio:4/5; perspective:1600px;
  }
  .tool-ambient{
    position:absolute; inset:6%; border-radius:50%;
    background:radial-gradient(closest-side, rgba(197,168,128,0.16), rgba(197,168,128,0.05) 55%, transparent 75%);
    filter:blur(6px); pointer-events:none;
  }
  .tool-scene{
    position:absolute; inset:0; transform-style:preserve-3d;
  }
  .tool-item{
    position:absolute; left:var(--x); top:var(--y); width:var(--w);
    transform-style:preserve-3d; will-change:transform;
  }
  .tool-inner{ transform-style:preserve-3d; will-change:transform; cursor:pointer; }
  .tool-photo{
    position:relative; width:100%; aspect-ratio:1/1;
    filter:drop-shadow(0 22px 26px rgba(17,20,26,0.38)) drop-shadow(0 4px 10px rgba(17,20,26,0.24));
  }
  .tool-photo img{
    width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
    -webkit-mask-image: radial-gradient(circle, #000 56%, rgba(0,0,0,.88) 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(circle, #000 56%, rgba(0,0,0,.88) 70%, rgba(0,0,0,0) 100%);
    background: radial-gradient(circle, #dfe3e8, #aab1ba);
  }
  .tool-photo::after{
    content:''; position:absolute; top:6%; left:16%; width:36%; height:20%; border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.6), rgba(255,255,255,0) 72%);
    pointer-events:none; mix-blend-mode:screen;
  }
  @media (max-width:1023px){
    .tool-scene-wrap{ aspect-ratio:1/1; }
    .tool-scene{ transform:scale(0.86); }
  }
  @media (max-width:640px){
    .tool-scene{ transform:scale(0.72); }
  }

  /* ============ SERVICE SCENES — full-bleed scroll story ============ */
  .svc-scene{
    position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
    overflow:hidden; perspective:1400px; padding:60px 24px;
  }
  .svc-bg-wrap{ position:absolute; inset:0; overflow:hidden; }
  .svc-bg-img{
    position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover;
    filter:grayscale(20%) contrast(1.08) brightness(.92);
    transform:scale(1); transition:transform 6s cubic-bezier(.2,.6,.2,1);
    will-change:transform;
  }
  .svc-scene.in-view .svc-bg-img{ transform:scale(1.12); }
  .svc-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,0.5) 0%, rgba(26,26,26,0.72) 100%); }
  .svc-content{ position:relative; z-index:2; max-width:760px; text-align:center; }
  .svc-stage{ transform:rotateX(14deg) translateY(20px) scale(.93); opacity:0; transition:transform 1s cubic-bezier(.22,.85,.3,1), opacity 1s ease; transform-origin:bottom center; }
  .svc-scene.in-view .svc-stage{ transform:rotateX(0) translateY(0) scale(1); opacity:1; }
  .svc-stage > *{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
  .svc-scene.in-view .svc-stage > *{ opacity:1; transform:translateY(0); }
  .svc-stage > *:nth-child(1){ transition-delay:.05s; }
  .svc-stage > *:nth-child(2){ transition-delay:.16s; }
  .svc-stage > *:nth-child(3){ transition-delay:.27s; }
  .svc-stage > *:nth-child(4){ transition-delay:.38s; }
  .svc-badge{
    display:inline-flex; align-items:center; gap:10px; padding:8px 18px; margin-bottom:22px;
    border:1px solid rgba(197,168,128,0.5); color:#E4D3B8; font-family:'Cinzel',serif;
    font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  }
  .svc-title{ font-family:'Cinzel',serif; color:#FAF9F6; font-size:clamp(1.6rem,4vw,2.6rem); font-weight:500; line-height:1.25; letter-spacing:.01em; margin-bottom:18px; }
  .svc-desc{ color:rgba(250,249,246,0.78); font-size:.9rem; line-height:1.75; font-weight:300; max-width:560px; margin:0 auto 28px; }
  .svc-cta{
    display:inline-block; border:1px solid rgba(250,249,246,0.4); color:#FAF9F6; padding:14px 30px;
    font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; transition:all .3s ease;
  }
  .svc-cta:hover{ background:#C5A880; border-color:#C5A880; color:#1A1A1A; }

  /* right-hand progress rail */
  .svc-rail{ position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; gap:10px; }
  .svc-rail .rail-dot{ width:7px; height:7px; border-radius:50%; background:rgba(26,26,26,0.25); cursor:pointer; transition:all .3s ease; }
  .svc-rail .rail-dot.active{ background:#C5A880; height:22px; border-radius:4px; }
  .svc-rail{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
  .svc-rail.show{ opacity:1; pointer-events:auto; }

  .svc-scene-num{ position:absolute; bottom:34px; left:34px; z-index:2; font-family:'Cinzel',serif; color:rgba(250,249,246,0.55); font-size:.7rem; letter-spacing:.25em; }

  ::selection{ background:#C5A880; color:#fff; }
  @media (prefers-reduced-motion: reduce){
    .interactive-stage{ opacity:1; transform:none; transition:none; }
    .svc-stage, .svc-stage > *, .svc-bg-img{ transition:none; }
  }

  /* ============ RESPONSIVE HARDENING — phones / tablets / small laptops ============ */
  html, body{ max-width:100%; overflow-x:hidden; }
  img, svg{ max-width:100%; }
  .tool-photo img{ max-width:none; } /* keep 3D tool photos filling their circular frame */
  .svc-bg-img{ max-width:none; } /* keep full-bleed Ken Burns image oversized on purpose */

  /* right-hand service progress rail: decorative on desktop, hidden below tablet to avoid clutter/overlap */
  @media (max-width:900px){
    .svc-rail{ display:none; }
  }

  /* full-bleed service scenes: tighten padding + text sizing on small screens */
  @media (max-width:640px){
    .svc-scene{ padding:40px 18px; min-height:100svh; }
    .svc-badge{ font-size:.6rem; padding:6px 14px; margin-bottom:16px; }
    .svc-desc{ font-size:.84rem; line-height:1.65; }
    .svc-cta{ padding:12px 22px; font-size:.62rem; }
    .svc-scene-num{ bottom:18px; left:18px; font-size:.62rem; }
  }

  /* floating chat / whatsapp / back-to-top: keep them from crowding small screens */
  @media (max-width:480px){
    .float-chat-label{ display:none; }
  }

  /* header logo: scale down gracefully on very narrow phones */
  @media (max-width:380px){
    header .max-w-7xl > a svg{ width:36px; height:31px; }
    header .max-w-7xl > a span.font-serif{ font-size:0.95rem; }
  }

  /* tool scene: extra breakpoint for small phones so floating tools stay inside the frame */
  @media (max-width:420px){
    .tool-scene{ transform:scale(0.6); }
  }

  /* prevent any accidental fixed-width overflow from long words in hero/quote copy */
  h1, h2, h3, p{ overflow-wrap:break-word; word-break:break-word; }