@font-face{font-family:"Euclid Circular A";src:url("EuclidCircularA-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
    @font-face{font-family:"Euclid Circular A";src:url("EuclidCircularA-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
    /* Your Baskerville Custom files are italic-only */
    @font-face{font-family:"Baskerville Custom";src:url("baskervi.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
    @font-face{font-family:"Baskerville Custom";src:url("BaskervilleBoldItalicBT.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}

:root{
      --page-bg:#fffbf5;
      --brand:#c79a5a;
      --theme:#a95917;
      --text:#1d1d1f;
      --muted:#6b6b6b;
      --side-gap:5rem;
      --ls-70:.07em;

      /* Animations */
      --ease: cubic-bezier(.22,1,.36,1);
      --dur-s: .45s;
      --dur-m: .7s;
      --reveal-translate: 18px;

      /* Word animation speed (slower) */
      --word-dur: .95s;
      --word-stagger: 140ms;
      --word-stagger-sm: 115ms;

      /* navbar height (will be set after injection) */
      --nav-h: 72px;
    }

    /* GLOBAL */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      background:var(--page-bg);
      color:var(--text);
      font-family:"Euclid Circular A","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      padding-top: var(--nav-h); /* keep content below fixed navbar from navbar.html */
    }
    img,video{max-width:100%;height:auto;display:block}

    /* ===== HERO ===== */
    .support-hero{
      position:relative;width:100%;
      height:90vh;min-height:60svh;min-height:60dvh;
      background:url('../ContactUs-img/contactus.jpg') center / cover no-repeat fixed;
      will-change: background-position;
    }
    .support-hero::before{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.30) 100%);
      pointer-events:none;
    }
    .support-hero .content{
      position:absolute;left:var(--side-gap);right:var(--side-gap);bottom:10vh;z-index:1;color:#fff;
    }
    .support-hero h2{
      font-family:"Libre Baskerville","Times New Roman",serif;
      font-style:normal;
      font-synthesis:none;
      font-weight:700;
      font-size:clamp(36px,7vw,84px);
      line-height:1.05;
      margin:0 0 18px;

      /* Base fade-up in case JS is off */
      opacity:0; transform:translateY(22px);
      animation: fadeUp var(--dur-m) var(--ease) .1s forwards;
    }

    /* CTA */
    .cta{
      display:inline-flex;align-items:center;gap:10px;
      background:#25D366;color:#fff;text-decoration:none;
      padding:12px 20px;border-radius:999px;font-weight:600;
      box-shadow:0 8px 30px rgba(0,0,0,.18);
      will-change: transform, box-shadow;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
      /* Staggered entrance */
      opacity:0; transform:translateY(18px);
      animation: fadeUp var(--dur-m) var(--ease) .28s forwards;
    }
    .cta i{transition: transform .25s var(--ease)}
    .cta:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.22)}
    .cta:hover i{transform:translateX(4px)}

    /* ===== CONTACT + MAP ===== */
    .layout{
      display:grid;
      grid-template-columns:1fr 1fr;
      min-height:100vh;
      overflow:visible;
      margin-bottom:clamp(40px,4vw,80px);
      gap:0;
    }
    .left{
      padding:clamp(20px,4vw,64px);
      display:flex;flex-direction:column;justify-content:center;gap:18px;
    }
    h1{
      font-family:"Baskerville Custom","Libre Baskerville","Times New Roman",serif;
      font-style:italic;font-weight:700;
      font-size:clamp(34px,5.2vw,80px);
      line-height:1.1;color:var(--theme);margin:8px 0 18px;
    }
    .info{display:grid;gap:18px}
    .row{
      display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:flex-start;
      opacity:0; transform:translateY(var(--reveal-translate));
    }
    .icon i{font-size:20px;color:var(--theme)}
    .row strong{color:var(--theme);display:block;margin-bottom:4px}
    .details{color:var(--muted);text-decoration:none;line-height:1.75;font-size:14px;}
    .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:12px 16px;border-radius:14px;text-decoration:none;
      font-weight:700;min-height:48px;
      box-shadow:0 4px 15px rgba(0,0,0,.08);
      transition:transform .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease);
      font-size:14px;
      opacity:0; transform:translateY(var(--reveal-translate));
    }
    .btn:hover{transform:translateY(-1px);filter:brightness(1.05); box-shadow:0 10px 22px rgba(0,0,0,.12)}
    .gmaps{background:#1a73e8;color:#fff}
    .waze{background:#33ccff;color:#fff}

    .contact-socials{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}
    .contact-socials a{
      opacity:0; transform:translateY(var(--reveal-translate));
      transition: transform .18s var(--ease), filter .18s var(--ease);
    }
    .contact-socials a:hover{transform:translateY(-2px); filter:brightness(1.1)}
    .contact-socials i{font-size:24px;color:var(--theme)}
    .contact-socials .xhs{
      width:24px;height:24px;background-color:var(--theme);display:inline-block;
      -webkit-mask:url('../ContactUs-img/xhs_logo.png') center/contain no-repeat;
              mask:url('../ContactUs-img/xhs_logo.png') center/contain no-repeat;
    }

    .map{
      position:relative;width:100%;height:100%;overflow:visible;
      opacity:0; transform:translateY(var(--reveal-translate));
    }
    .map iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

    /* ===== WORDING (PER-WORD) ANIMATION – SLOWER ===== */
    .animate-words .ww{
      display:inline-block;
      opacity:0; transform: translateY(14px) scale(.98); filter: blur(4px);
      will-change: transform, opacity, filter;
      animation: wordIn var(--word-dur) var(--ease) forwards;
      animation-delay: calc(var(--w-index) * var(--word-stagger));
    }
    @media (max-width:640px){
      .animate-words .ww{ animation-delay: calc(var(--w-index) * var(--word-stagger-sm)); }
    }
    @keyframes wordIn{
      50%{ filter: blur(0); }
      to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    /* ===== REVEAL STATE ===== */
    .is-visible{
      opacity:1 !important;
      transform:translateY(0) !important;
      transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
    }

    /* ===== KEYFRAMES ===== */
    @keyframes fadeUp{ to{opacity:1; transform:translateY(0)} }

    /* ===== RESPONSIVE ===== */
    @media (max-width:980px){
      .layout{
        grid-template-columns:1fr;
        grid-template-rows:auto min(60vh,70svh);
        height:auto;
      }
      .map{height:min(60vh,70svh)}
      .left{padding:clamp(18px,5vw,40px)}
      .support-hero{background-attachment:scroll;}
    }

    @media (max-width:768px){
      :root{--side-gap:1.5rem}
      .cta{padding:10px 16px}
      .row{grid-template-columns:22px 1fr}
      .icon i{font-size:18px}
    }

    /* ===== REDUCED MOTION ===== */
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important}
      .support-hero{background-attachment:scroll;}
      .is-visible{opacity:1; transform:none}
      .row,.btn,.contact-socials a,.map{opacity:1; transform:none}
      .animate-words .ww{opacity:1; transform:none; filter:none}
    }