/* =========================================================
   THE AER — coming soon
   Tokens
========================================================= */
:root{
    --forest-950:#1c1a25;
    --forest-900:#152a1c;
    --forest-800:#2d335d;
    --forest-line:rgba(232,228,214,.16);
  
    --navy:#1b3350;
    --ink-muted:#5868f7;
  
    --cream:#fbf9f4;
    --cream-2:#f5f2ea;
  
    --gold-100:#f3e3bd;
    --gold-300:#e4c47f;
    --gold-500:#cea355;
    --gold-600:#b7893c;
  
    --text-on-dark:#f2efe6;
    --text-on-dark-soft:#c7d1c6;
  
    --font-display:'Cormorant Garamond', serif;
    --font-body:'Jost', sans-serif;
  
    --radius-lg:28px;
    --radius-md:16px;
    --radius-full:999px;
  
    --ease:cubic-bezier(.22,1,.36,1);
  }
  
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--text-on-dark);
    background:var(--forest-900);
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;}
  
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }
  
  /* =========================================================
     Layout shell
  ========================================================= */
  .page{
    display:flex;
    min-height:100vh;
    width:100%;
  }
  
  /* =========================================================
     HERO (left column / image side)
  ========================================================= */
  .hero{
    position:relative;
    flex:1.65 1 0%;
    min-height:100vh;
    overflow:hidden;
    background:var(--forest-950);
  }
  
  .hero__media{display:block;position:absolute;inset:0;overflow:hidden;}
  .hero__img{
    width:100%;height:100%;object-fit:cover;object-position:60% 50%;
    transform:scale(1.08);
    animation:kenburns 26s ease-in-out infinite alternate;
  }
  @keyframes kenburns{
    0%{transform:scale(1.08) translate(0,0);}
    100%{transform:scale(1.16) translate(-1.5%,-1%);}
  }
  .hero__scrim{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(10,16,10,.15) 0%, rgba(10,16,10,0) 22%, rgba(10,16,10,0) 68%, rgba(10,16,10,.35) 100%);
    pointer-events:none;
  }
  
  /* ---- logo card, concave cut corner ---- */
  .logo-card{
    position:absolute; top:0; left:0; z-index:5;
    display:flex; align-items:center; gap:22px;
    background:var(--cream);
    padding:26px 56px 40px 40px;
    -webkit-mask-image:radial-gradient(circle 46px at 100% 100%, transparent 45px, #000 46px);
            mask-image:radial-gradient(circle 46px at 100% 100%, transparent 45px, #000 46px);
    animation:dropIn .8s var(--ease) both;
    animation-delay:.15s;
  }
  @keyframes dropIn{
    from{opacity:0; transform:translateY(-18px);}
    to{opacity:1; transform:translateY(0);}
  }
  .logo-card__brand{display:flex;flex-direction:column;color:var(--navy);}
  .logo-card__name{
    font-family:var(--font-display); font-weight:600; font-size:clamp(26px,2.4vw,34px);
    letter-spacing:.03em; line-height:1;
  }
  .logo-card__tagline{
    margin-top:8px; font-size:11px; letter-spacing:.28em; color:#5c6b63; font-weight:500;
  }
  .logo-card__tagline i{color:var(--gold-600); font-style:normal; margin:0 4px;}
  .logo-card__divider{width:1px; align-self:stretch; background:var(--gold-500); opacity:.6;}
  .logo-card__project{display:flex;flex-direction:column;gap:4px;}
  .logo-card__eyebrow{font-size:11px; letter-spacing:.22em; color:#8a948d; font-weight:500;}
  .logo-card__by{font-family:var(--font-display); font-weight:600; font-size:clamp(18px,1.6vw,22px); color:var(--navy);}
  .logo-card__slogan{font-size:10.5px; letter-spacing:.24em; color:var(--gold-600); font-weight:500;}
  
  /* ---- coming soon pill ---- */
  .coming-soon{
    /* position:absolute; top:28%; left:50%; transform:translate(-50%,0); */
    z-index:10;
    background:var(--forest-800);
    border:1px solid rgba(232,197,127,.35);
    padding:7px 15px;
    width: fit-content;
    border-radius:var(--radius-full);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    /* animation:fadeScale 1s var(--ease) both, glow 3.6s ease-in-out infinite 1.2s; */
    animation-delay:.4s, 1.2s;
  }
  .coming-soon span{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(16px,18px,24px);
    color:var(--gold-300);
    /* padding-left:10px; balance letter-spacing */
  }
  @keyframes fadeScale{from{opacity:0; transform:translate(-50%,10px) scale(.94);} to{opacity:1; transform:translate(-50%,0) scale(1);}}
  @keyframes glow{
    0%,100%{box-shadow:0 18px 40px rgba(0,0,0,.35), 0 0 0 rgba(233,197,127,0);}
    50%{box-shadow:0 18px 40px rgba(0,0,0,.35), 0 0 34px rgba(233,197,127,.28);}
  }
  
  .brand-mark{
    position:absolute; left:28px; bottom:28px; z-index:4;
    width:40px;height:40px; border-radius:50%;
    background:#0b1710; color:var(--gold-300);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:15px;
    border:1px solid var(--forest-line);
  }
  
  .hero__mobile-strip{display:none;}
  
  /* =========================================================
     PANEL (right column / form side)
  ========================================================= */
  .panel{
    flex:0 0 clamp(380px, 30vw, 470px);
    background:
      radial-gradient(120% 160% at 100% 0%, rgba(255,255,255,.04), transparent 55%),
      linear-gradient(165deg, var(--forest-800) 0%, var(--forest-900) 45%, var(--forest-950) 100%);
    position:relative;
    border-left:1px solid var(--forest-line);
  }
  .panel__inner{
    padding:64px 56px 40px;
    display:flex; flex-direction:column; gap:34px;
    min-height:100vh;
  }
  
  .eyebrow{
    display:inline-block;
    font-size:12px; letter-spacing:.3em; font-weight:500;
    color:var(--gold-300); margin-bottom:14px;
  }
  .panel__title{
    font-family:var(--font-display); font-weight:500; font-style:normal;
    font-size:clamp(28px,2.5vw,38px); line-height:1.28; margin:0;
    color:var(--text-on-dark);
  }
  .panel__head{opacity:0; animation:riseIn .8s var(--ease) both; animation-delay:.5s;}
  
  /* ---- form ---- */
  .form{display:flex;flex-direction:column;gap:20px; opacity:0; animation:riseIn .8s var(--ease) both; animation-delay:.65s;}
  @keyframes riseIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
  
  .field{
    position:relative;
    display:flex; align-items:center; gap:14px;
    border:1px solid var(--forest-line);
    border-radius:var(--radius-full);
    padding:16px 22px;
    background:rgba(255,255,255,.02);
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  }
  .field--area{border-radius:22px; align-items:flex-start;}
  .field__icon{flex:none; width:18px;height:18px; color:var(--gold-300); opacity:.85;}
  .field__icon--top{margin-top:3px;}
  .field__icon svg{width:100%;height:100%;}
  .field input,
  .field textarea{
    flex:1; min-width:0;
    background:transparent; border:0; outline:0;
    color:var(--text-on-dark);
    font-family:var(--font-body); font-size:15px; font-weight:300;
    resize:none;
  }
  .field textarea{padding-top:2px;}
  .field input::placeholder,
  .field textarea::placeholder{color:#a9b6a6; opacity:.8; font-weight:300;}
  .field:focus-within{
    border-color:var(--gold-500);
    background:rgba(255,255,255,.045);
    box-shadow:0 0 0 4px rgba(206,163,85,.12);
  }

  .field:focus-within input,
  .field:focus-within textarea{
    border: none;
    outline: none;
  }

  .field.field--invalid{border-color:#d9776a; animation:shake .38s var(--ease);}
  @keyframes shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(5px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(3px);}
  }
  
  /* ---- buttons ---- */
  .btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    font-family:var(--font-body); font-weight:600; font-size:13.5px; letter-spacing:.16em;
    cursor:pointer; border:0; text-transform:uppercase;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
  }
  .btn--gold{
    color:#2a2308;
    background:linear-gradient(135deg, var(--gold-100), var(--gold-500) 55%, var(--gold-600));
    border-radius:var(--radius-full);
  }
  .btn--gold:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(183,137,60,.35); filter:brightness(1.03);}
  .btn--gold:active{transform:translateY(0px) scale(.99);}
  .btn--block{width:100%; padding:18px 26px;}
  .btn__icon{width:18px;height:18px;}
  .btn__icon svg{width:100%;height:100%;}
  .btn__arrow{width:18px;height:18px; margin-left:auto; transition:transform .3s var(--ease);}
  .btn:hover .btn__arrow{transform:translateX(5px);}
  
  .submit-btn{overflow:hidden;}
  .submit-btn__spinner{
    display:none; width:16px;height:16px; border-radius:50%;
    border:2px solid rgba(42,35,8,.35); border-top-color:#2a2308;
    animation:spin .7s linear infinite;
  }
  .submit-btn.is-loading .submit-btn__label{opacity:.55;}
  .submit-btn.is-loading .submit-btn__spinner{display:inline-block;}
  @keyframes spin{to{transform:rotate(360deg);}}
  
  .form__note{
    margin:-6px 0 0; font-size:13px; min-height:18px; text-align:center;
    color:var(--gold-300); opacity:0; transition:opacity .3s var(--ease);
  }
  .form__note.is-visible{opacity:1;}
  .form__note.is-error{color:#e59a8f;}
  
  /* ---- footer contact ---- */
  .panel__footer{
    margin-top:auto; display:flex; flex-direction:column; gap:16px;
    opacity:0; animation:riseIn .8s var(--ease) both; animation-delay:.8s;
  }
  .rule{height:1px; background:var(--forest-line); width:100%;}
  .contact-line{display:flex; flex-direction:column; gap:12px;}
  .contact-line__item{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14px; color:var(--text-on-dark-soft);
    transition:color .25s var(--ease), transform .25s var(--ease);
  }
  .contact-line__item svg{width:16px;height:16px; color:var(--gold-300); flex:none;}
  .contact-line__item:hover{color:var(--gold-300); transform:translateX(3px);}
  
  /* =========================================================
     Scroll reveal (generic)
  ========================================================= */
  [data-reveal].in-view{ /* handled by keyframes above already running on load; kept for mobile scroll reveal */ }
  
  /* =========================================================
     RESPONSIVE — tablet / mobile
  ========================================================= */
  @media (max-width: 860px){
    .page{flex-direction:column;}
  
    .hero{
      flex:none; min-height:auto;
      padding-top:132px; /* space for static header row */
    }
  
    .logo-card{
      position:static;
      width:100%;
      -webkit-mask-image:none; mask-image:none;
      padding:22px 24px;
      border-radius:0 0 34px 0;
      gap:16px;
      animation:none; opacity:1;
    }
    .logo-card__tagline{letter-spacing:.22em;}
  
    .hero__media,.hero__scrim{position:absolute; top:0; left:0; right:0; bottom:auto; height:auto;}
    .hero{display:flex; flex-direction:column;}
    .hero__media{position:relative; order:2; height:60vh; min-height:380px;}
    .hero__scrim{position:absolute;}
    .logo-card{order:1;}
    /* .coming-soon{ padding:14px 30px;} */
    /* .coming-soon span{font-size:19px; letter-spacing:.22em;} */
    .brand-mark{left:16px; bottom:16px;}
  
    .hero{padding-top:0;}
  
    .hero__mobile-strip{
      order:3;
      display:flex; flex-direction:column; gap:22px;
      background:linear-gradient(165deg, var(--forest-800), var(--forest-900));
      padding:26px 24px 34px;
    }
    .hero__mobile-strip .contact-line{flex-direction:row; justify-content:space-between; flex-wrap:wrap; gap:14px;}
  
    .panel{flex:none; border-left:0; border-top:1px solid var(--forest-line);}
    .panel__inner{padding:8px 24px 48px; min-height:0;}
    .panel__footer{margin-top:8px;}
  }
  
  @media (max-width: 480px){
    .logo-card__name{font-size:24px;}
    .panel__title{font-size:26px;}
    /* .coming-soon{padding:12px 22px;} */
    /* .coming-soon span{font-size:16px; letter-spacing:.16em;} */
  }
  
  /* focus visibility for a11y */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--gold-300); outline-offset:3px;
  }





  .whatsappBtn{
    position: fixed;
    bottom:60px;
    right: 10px;
    width: 52px;
    height: 52px;
    z-index: 80px;
    border-radius: 999px;
    background-color: #1fb855;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color:white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 2px var(--border-gold);
    z-index: 60;
    transition: transform 0.25s ease;
}
.whatsappBtn:hover{
    transform: scale(1.08);
}
.whatsappBtn a{
    color :white;
}


.section {
    padding: 40px;
    min-height: 300px;
    margin-bottom: 20px;
    max-width: 900px;
}
.heading-website{
    font-size: 2.7rem;
    line-height: 1.2;
}

  @media (max-width: 768px){
    .heading-website{
        font-size: 1.6rem;
    }
  }
.heading-website span{
    color: var(--gold-600);
}



.chips{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:15px;
  margin-top: 40px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px 9px 12px;
  border:1px solid var(--forest-line);
  border-radius:var(--radius-full);
  background:rgba(255,255,255,.03);
  font-size:16px; font-weight:500; letter-spacing:.02em;
  color:var(--text-on-dark-soft);
  opacity:0; transform:translateY(10px);
  animation:chipIn .6s var(--ease) both;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.chip:nth-child(1){animation-delay:.55s;}
.chip:nth-child(2){animation-delay:.65s;}
.chip:nth-child(3){animation-delay:.75s;}
.chip:nth-child(4){animation-delay:.85s;}
.chip:nth-child(5){animation-delay:.95s;}
.chip svg{width:15px;height:15px; flex:none; color:var(--gold-300);}
.chip:hover{
  border-color:var(--gold-500);
  background:rgba(206,163,85,.08);
  color:var(--text-on-dark);
  transform:translateY(-2px);
}
@keyframes chipIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@media (max-width:860px){
  .chips{gap:8px;}
  .chip{font-size:12px; padding:8px 14px 8px 10px;}
}