:root{
    --ease: cubic-bezier(.22,.61,.36,1);
  }
  html{scroll-behavior:smooth;}
  body{
    background:#FAFAF8;
    color:#17211B;
    font-family:"Plus Jakarta Sans", sans-serif;
  }
  .font-display{font-family:"Manrope", sans-serif;}

  ::selection{background:#DCFCE7; color:#14532D;}

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid #16A34A;
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* reveal on scroll */
  .reveal{
    opacity:0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal.is-visible{
    opacity:1;
    transform: translateY(0);
  }
  .reveal-img{
    opacity:0;
    transform: scale(1.06);
    transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  }
  .reveal-img.is-visible{
    opacity:1;
    transform: scale(1);
  }
  .stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-img, .stagger > * { transition: none !important; transform:none !important; opacity:1 !important; }
    .hero-scale{ transform:none !important; transition:none !important; }
  }

  /* hero image slow scale-in */
  .hero-scale{
    transform: scale(1.045);
    transition: transform 1.6s var(--ease);
  }
  .hero-scale.is-loaded{ transform: scale(1); }

  /* image hover zoom */
  .img-zoom{ overflow:hidden; }
  .img-zoom img{ transition: transform 1s var(--ease); }
  .img-zoom:hover img{ transform: scale(1.035); }

  /* nav link underline */
  .nav-link{ position:relative; }
  .nav-link::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-4px;
    height:1px; background:#14532D;
    transform: scaleX(0); transform-origin:right;
    transition: transform .35s var(--ease);
  }
  .nav-link:hover::after{ transform: scaleX(1); transform-origin:left; }

  /* buttons */
  .btn-primary{
    background:#14532D; color:#fff;
    transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn-primary:hover{ background:#16A34A; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(20,83,45,.45); }
  .btn-outline{
    border:1px solid #17211B; color:#17211B;
    transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
  }
  .btn-outline:hover{ background:#17211B; color:#fff; transform: translateY(-2px); }

  /* accordion */
  .faq-item[open] summary .faq-icon{ transform: rotate(45deg); }
  .faq-icon{ transition: transform .35s var(--ease); }
  summary::-webkit-details-marker{ display:none; }
  summary{ list-style:none; cursor:pointer; }
  .faq-body{
    display:grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease);
  }
  .faq-item[open] .faq-body{ grid-template-rows: 1fr; }
  .faq-body-inner{ overflow:hidden; }

  /* sticky nav shadow */
  header.scrolled{ box-shadow: 0 1px 0 rgba(23,33,27,.08); }

  /* whatsapp float */
  .wa-float{
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .wa-float:hover{ transform: scale(1.06); box-shadow: 0 12px 28px -8px rgba(20,83,45,.5); }

  /* masonry gallery via columns */
  .masonry{ column-gap: 14px; }
  .masonry > div{ break-inside: avoid; margin-bottom:14px; }

  /* number counters */
  .num-tick{ font-variant-numeric: tabular-nums; }

  /* range input */
  input[type=range]{
    -webkit-appearance:none; appearance:none;
    height:4px; border-radius:999px; background:#DCFCE7;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:999px;
    background:#14532D; cursor:pointer;
    box-shadow: 0 0 0 4px rgba(20,83,45,.12);
    transition: box-shadow .25s var(--ease);
  }
  input[type=range]::-webkit-slider-thumb:hover{ box-shadow: 0 0 0 7px rgba(20,83,45,.16); }
  input[type=range]::-moz-range-thumb{
    width:18px; height:18px; border-radius:999px; border:none;
    background:#14532D; cursor:pointer;
  }

  .mobile-menu{
    transition: max-height .45s var(--ease), opacity .35s var(--ease);
    max-height:0; opacity:0; overflow:hidden;
  }
  .mobile-menu.open{ max-height:520px; opacity:1; }

  .lightbox{
    transition: opacity .3s ease;
  }

  .divider-thin{ height:1px; background: linear-gradient(90deg, transparent, rgba(23,33,27,.14), transparent); }