:root{
      --primary:#1a3c34;
      --accent:#c5a059;
      --light:#f9f7f2;
      --secondary:#004a7c;
      --ink:#111111;

      --easeOut: cubic-bezier(.16, 1, .3, 1);
      --easeSoft: cubic-bezier(.2, .9, .2, 1);
      --dur: 900ms;
      --durLong: 1200ms;
      --durXL: 1400ms;
    }

    body{
      font-family:'Plus Jakarta Sans', sans-serif;
      background: var(--light);
      color:#333;
    }

    h1, h2, h3, .font-serif{ font-family:'Playfair Display', serif; }

    /* ---------- Hero ---------- */
    .hero{
      position: relative;
      background:
        radial-gradient(1200px 600px at 50% 20%, rgba(197,160,89,.20), transparent 60%),
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.50)),
        /*url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&q=80&w=1920');*/
        url('https://cdn.b12.io/client_media/2EJ8whTS/b8702251-037e-11f1-944b-0242ac110002-RNcz-5KDC1vEvZDNwAL9g.jpg?auto=format&fit=crop&q=80&w=1920');
      background-size: cover;
      background-position: center;
      overflow:hidden;
      isolation:isolate;
    }

    /* subtle moving grain */
    .grain::before{
      content:"";
      position:absolute;
      inset:-20%;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity:.25;
      transform: translate3d(0,0,0);
      animation: grainMove 10s linear infinite;
      pointer-events:none;
      z-index:0;
    }
    @keyframes grainMove{
      0%{ transform: translate3d(-2%, -2%, 0); }
      50%{ transform: translate3d(2%, 2%, 0); }
      100%{ transform: translate3d(-2%, -2%, 0); }
    }

    /* soft highlight sweep for hero buttons */
    .shine{
      position:relative;
      overflow:hidden;
    }
    .shine::after{
      content:"";
      position:absolute;
      top:-120%;
      left:-60%;
      width:120%;
      height:240%;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.20) 50%, transparent 65%);
      transform: translateX(-30%) rotate(10deg);
      transition: transform var(--durLong) var(--easeOut);
      pointer-events:none;
    }
    .shine:hover::after{
      transform: translateX(140%) rotate(10deg);
    }

    /* ---------- Nav ---------- */
    .sticky-nav{
      backdrop-filter: blur(12px);
      background-color: rgba(255,255,255,0.92);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .nav-link{
      position:relative;
      transition: color 500ms var(--easeSoft);
    }
    .nav-link::after{
      content:'';
      position:absolute;
      width:0;
      height:2px;
      bottom:-5px;
      left:0;
      background: var(--accent);
      transition: width 650ms var(--easeOut);
      opacity:.95;
    }
    .nav-link:hover{ color: var(--secondary); }
    .nav-link:hover::after{ width:100%; }

    /* ---------- Buttons ---------- */
    .btn-primary{
      background: var(--primary);
      color:#fff;
      transition:
        transform 700ms var(--easeOut),
        background 700ms var(--easeOut),
        box-shadow 900ms var(--easeOut);
      box-shadow: 0 12px 30px rgba(26,60,52,.18);
    }
    .btn-primary:hover{
      background: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 16px 42px rgba(26,60,52,.18);
    }
    .btn-soft{
      transition: transform 700ms var(--easeOut), background 700ms var(--easeOut);
    }
    .btn-soft:hover{ transform: translateY(-2px); }

    /* ---------- Cards / Images ---------- */
    .card{
      transition: transform 900ms var(--easeOut), box-shadow 900ms var(--easeOut);
      will-change: transform;
    }
    .card:hover{
      transform: translateY(-4px);
      box-shadow: 0 18px 55px rgba(0,0,0,.10);
    }

    .img-zoom img{
      transition: transform 1400ms var(--easeOut), filter 1200ms var(--easeOut);
      will-change: transform;
    }
    .img-zoom:hover img{
      transform: scale(1.06);
      filter: saturate(1.06);
    }

    /* ---------- Reveal System (advanced but subtle) ---------- */
    [data-reveal]{
      opacity: 0;
      transform: translate3d(0, 18px, 0) scale(0.995);
      filter: blur(6px);
      transition:
        opacity var(--durLong) var(--easeOut),
        transform var(--durXL) var(--easeOut),
        filter var(--durXL) var(--easeOut);
      will-change: opacity, transform, filter;
    }

    [data-reveal="fade-up"]{ transform: translate3d(0, 22px, 0) scale(0.995); }
    [data-reveal="fade-down"]{ transform: translate3d(0, -18px, 0) scale(0.995); }
    [data-reveal="fade-left"]{ transform: translate3d(24px, 0, 0) scale(0.995); }
    [data-reveal="fade-right"]{ transform: translate3d(-24px, 0, 0) scale(0.995); }
    [data-reveal="zoom"]{ transform: translate3d(0, 10px, 0) scale(0.975); }
    [data-reveal="soft-pop"]{ transform: translate3d(0, 16px, 0) scale(0.985); }

    .is-inview[data-reveal]{
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
      filter: blur(0);
    }

    /* stagger children */
    [data-stagger] > *{
      opacity: 0;
      transform: translate3d(0, 14px, 0);
      filter: blur(3px);
      transition:
        opacity 1000ms var(--easeOut),
        transform 1100ms var(--easeOut),
        filter 1100ms var(--easeOut);
      will-change: opacity, transform, filter;
    }
    .is-inview[data-stagger] > *{
      opacity: 1;
      transform: translate3d(0,0,0);
      filter: blur(0);
    }

    /* divider line reveal */
    .reveal-line{
      position:relative;
    }
    .reveal-line::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-10px;
      width:100%;
      height:2px;
      background: linear-gradient(90deg, transparent, rgba(197,160,89,.9), transparent);
      transform: scaleX(0);
      transform-origin: center;
      opacity: 0;
      transition: transform 1400ms var(--easeOut), opacity 1400ms var(--easeOut);
    }
    .is-inview .reveal-line::after{
      transform: scaleX(1);
      opacity: 1;
    }

    /* ---------- Parallax (very subtle) ---------- */
    [data-parallax]{
      transform: translate3d(0, calc(var(--py, 0px)), 0);
      will-change: transform;
    }

    /* ---------- FAQ ---------- */
    .faq-item summary::-webkit-details-marker{ display:none; }
    .faq-item summary{ list-style:none; }

    /* ---------- Reduced motion ---------- */
    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; }
      [data-reveal], [data-stagger] > *{
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
      [data-parallax]{ transform:none !important; }
    }

    /* ---------- Mobile Menu ---------- */
    .menu-overlay{
      position: fixed;
      inset: 0;
      background: rgba(15, 36, 31, 0.55);
      backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 650ms var(--easeOut);
      z-index: 60;
    }
    .menu-overlay.is-open{
      opacity: 1;
      pointer-events: auto;
    }
    .mobile-drawer{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      transform: translate3d(0, -12px, 0);
      opacity: 0;
      pointer-events: none;
      z-index: 70;
      transition: opacity 650ms var(--easeOut), transform 650ms var(--easeOut);
    }
    .mobile-drawer.is-open{
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0);
    }
    .drawer-panel{
      background: rgba(255,255,255,0.96);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 18px 55px rgba(0,0,0,.12);
    }
    .drawer-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 14px;
      border-radius: 14px;
      color: #1a3c34;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: 12px;
      transition: background 600ms var(--easeOut), transform 600ms var(--easeOut);
    }
    .drawer-link:hover{
      background: rgba(197,160,89,.12);
      transform: translateY(-1px);
    }
    .no-scroll{
      overflow: hidden;
      touch-action: none;
    }

@keyframes float-x {
  0%   { transform: translateX(-10px); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}

.float-x {
  animation: float-x 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

 /* Base reveal animation */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-up {
    animation: fadeUp 0.9s ease forwards;
  }

  /* Delay utilities */
  .delay-1 { animation-delay: 0.15s; }
  .delay-2 { animation-delay: 0.3s; }
  .delay-3 { animation-delay: 0.45s; }
  .delay-4 { animation-delay: 0.6s; }
  .delay-5 { animation-delay: 0.75s; }
  .delay-6 { animation-delay: 0.9s; }
  .delay-7 { animation-delay: 1.05s; }
  .delay-8 { animation-delay: 1.2s; }
  .delay-9 { animation-delay: 1.35s; }
  .delay-10 { animation-delay: 1.5s; }
  .delay-11 { animation-delay: 1.65s; }
  .delay-12 { animation-delay: 1.8s; }

  /* Hide before animation */
  .will-animate {
    opacity: 0;
  }