:root{
    --bg: #EFEDEA;
    --ink: #14120F;
    --coral: #FF4A3B;
    --coral-dim: #FFEAE7;
    --line: #E6E2DC;
    --muted: #6B6660;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Abhaya Libre', serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .display{font-family:'Hanken Grotesk',sans-serif;}
  .container-x{max-width:1180px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;}

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-delay-1{transition-delay:.08s;}
  .reveal-delay-2{transition-delay:.16s;}
  .reveal-delay-3{transition-delay:.24s;}
  .reveal-delay-4{transition-delay:.32s;}

  /* nav underline */
  .nav-link{position:relative;}
  .nav-link::after{
    content:'';position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--coral);
    transition:width .3s ease;
  }
  .nav-link:hover::after{width:100%;}

  /* service card */
  .card{
    border:1px solid var(--line);
    background:#fff;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
  }
  .card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 48px -24px rgba(20,18,15,0.18);
    border-color:var(--coral);
  }
  .card .tag{
    color:var(--coral);
    font-style:italic;
    transition:letter-spacing .4s ease;
  }
  .card:hover .tag{letter-spacing:.08em;}

  /* project item */
  .proj{
    overflow:hidden;
    background:#111;
    position:relative;
  }
  .proj img, .proj video{
    transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
    filter:saturate(.85);
  }
  .proj:hover img, .proj:hover video{
    transform:scale(1.06);
    filter:saturate(1.05);
  }
  .proj .proj-label{
    transform:translateY(12px);
    opacity:0;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  }
  .proj:hover .proj-label{transform:translateY(0);opacity:1;}

  /* CTA button */
  .btn-coral{
    background:var(--coral);
    color:#fff;
    transition:transform .3s cubic-bezier(.3,1.4,.4,1), box-shadow .3s ease, background .3s ease;
  }
  .btn-coral:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px -10px rgba(255,74,59,0.55);
    background:#ff3823;
  }
  .btn-coral:active{transform:translateY(0px) scale(.98);}

  /* input focus */
  .field{
    border-bottom:1.5px solid var(--line);
    transition:border-color .3s ease;
    background:transparent;
  }
  .field:focus{outline:none;border-color:var(--coral);}

  /* signature: animated squiggle line drawing itself, echo of the logo stroke */
  .squiggle-path{
    stroke-dasharray:1400;
    stroke-dashoffset:1400;
    animation:draw 2.6s cubic-bezier(.3,.9,.3,1) forwards;
    animation-delay:.3s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  /* hero fade-up sequence */
  .hero-el{opacity:0; transform:translateY(18px); animation:heroUp .9s cubic-bezier(.2,.8,.2,1) forwards;}
  .hero-el.h1{animation-delay:.15s;}
  .hero-el.p1{animation-delay:.4s;}
  .hero-el.cta1{animation-delay:.6s;}
  @keyframes heroUp{ to{opacity:1; transform:translateY(0);} }

  @media (prefers-reduced-motion: reduce){
    .reveal, .hero-el, .squiggle-path, .card, .proj img, .proj video, .proj .proj-label, .btn-coral{
      animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;
    }
  }

  ::selection{background:var(--coral); color:#fff;}