/* ================== Tokens / base ================== */
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root{
  --brand: #25B9CE;
  --brand-dark:#0f7f7e;
  --ink:#2a3b45;
  --ink-soft:#404040;
  --container: 1180px;

  /* Section 4 colours */
  --why-head:#000000;
  --why-body:#404040;
  --why-divider:#383838a6;
  --why-rule:#e6eef2;
  --why-teal:#25B9CE;
  --serif: "Inria Serif", Georgia, "Times New Roman", serif;
}

html,body{
   /* font-family: "Bona Nova SC", "Bona Nova", serif ; */
      font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
   font-style:normal;
  background:#fff;color:var(--ink);
  overflow-x: hidden;
           /* mobile-safe viewport */

}

/* ===== custom scrollbar (brand) ===== */
*{ scrollbar-width:thin; scrollbar-color: var(--brand) #eef4f6; }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#eef4f6 }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  border-radius:8px; border:2px solid #eef4f6;
}
::-webkit-scrollbar-thumb:hover{ filter:brightness(1.05) }

img{max-width:100%;height:auto;display:block}
a{text-decoration:none}

.avn-container{max-width:var(--container)}
.wow { visibility: hidden; }
  .wow.animate__animated { visibility: visible; }
/* ================== Header ================== */
.avn-header {
 position: relative;
  width: 100%;
  background: #fff;
  z-index: 1000;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  box-shadow: none;
}

.avn-header.is-sticky {
  position: fixed;
  top: 0; left: 0px; right: 0;
  transform: translateY(-100%);
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.avn-header.is-sticky.is-in { transform: translateY(0); }

.avn-burger{
  display:none;
  width:42px; height:36px;
  border:0; background:transparent; padding:0; margin-left:8px;
  position:relative; z-index:1101; /* above panel */
}
.avn-burger span{
  display:block; height:2px; width:100%;
  background:#1e2a31; border-radius:2px;
  position:absolute; left:0; transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.avn-burger span:nth-child(1){ top:9px }
.avn-burger span:nth-child(2){ top:17px }
.avn-burger span:nth-child(3){ top:25px }

.avn-header.menu-open .avn-burger span:nth-child(1){ top:17px; transform:rotate(45deg) }
.avn-header.menu-open .avn-burger span:nth-child(2){ opacity:0 }
.avn-header.menu-open .avn-burger span:nth-child(3){ top:17px; transform:rotate(-45deg) }

/* Base nav layout (desktop visible inline) */
.avn-nav{
  display:flex; gap:16px; align-items:center;
}
.avn-nav a{ margin-left:0 !important; color:#222; text-decoration:none; font-weight:600 }

/* prevent content jump when header turns fixed */
body.has-sticky-pad { padding-top: var(--header-h); }
/* demo layout (optional) */
.avn-header .wrap{
  max-width: var(--container);
   margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 5px;
}
.avn-header .nav a{ margin-left: 16px; text-decoration: none; color: #222; }

/* accessibility: minimize motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .avn-header{ transition: none; }
  .avn-header.is-sticky{ transform: none; }
}
/* ========== Back to top ========== */
.avn-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #18a1a0;
  color: #fff;
  box-shadow: 0 10px 24px rgba(24,161,160,.25);
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1100;
}
.avn-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.avn-to-top:hover.show{
  color: white;
}
.avn-to-top svg { display:block; }

.avn-brand{display:inline-flex;align-items:center}
.avn-logo{height:38px}
.avn-right{gap:14px}
.avn-reach{font-size:13px;color:var(--ink-soft);line-height:1;margin-bottom:3px}
.avn-phone{font-weight:700;color:#22313a;display:inline-flex;align-items:center;font-size: 20px;}
.avn-phone span{color:#0a8aa1}
.avn-phone:hover span{color:#076d7e}
.avn-phone-ic{width:16px;height:16px;object-fit:contain;margin-right:6px;position:relative;top:-1px}
.avn-vg{height:59px}


/* ================== Section 1: Hero ================== */
.avn-hero{position:relative; isolation:isolate; min-height:89vh}
.avn-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.avn-hero-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.50) 100%);
}
.avn-hero-inner{position:absolute; inset:0; display:grid; place-items:center; padding:0 16px; z-index:2}
.avn-hero-stack{ gap:14px; justify-items:center; text-align:center}
.avn-hero-title{
  font-family: "Bona Nova SC", "Bona Nova", serif !important;
  color:#fff; 
  font-weight:400; 
  font-size:45px;
  text-shadow:0 10px 28px rgba(0,0,0,.35);
  margin:10px 0 15px;
}
.avn-hero-eyebrow{
  color:#ffffff; text-shadow:0 6px 18px rgba(0,0,0,.45);
  font-weight:400; letter-spacing:.02em;
  font-size: clamp(12px, 1.2vw, 15px);
}
.avn-hero-config{
  color:#ffffff; font-weight:600; letter-spacing:.02em;
  margin:-2px 0 12px; text-shadow:0 8px 22px rgba(0,0,0,.45);
  font-size: clamp(22px, 1.2vw, 14px);
  font-family: var(--serif) ;
}

.avn-hero-price{
  color:#fff; font-weight:600; line-height:1; letter-spacing:.01em;
  margin:0 0 12px; text-shadow:0 14px 36px rgba(0,0,0,.55);
  font-size: clamp(28px, 6.8vw, 72px);
      font-family: var(--serif) ;
}
.avn-hero-price .rs{ font-weight: 500;font-size: clamp(28px, 6.8vw, 72px);
      font-family: var(--serif) ; }
.avn-hero-price small{ font-weight:500; font-size:.42em; opacity:.95;  font-family: var(--serif) ;}

.avn-hero-location{color:#f2ffff; font-weight:500; letter-spacing:.02em; margin:0 0 12px;
  font-size: clamp(22px, 1.8vw, 20px);
   display:inline-flex;color: white; align-items:center; gap:.1em;  font-family: var(--serif) ; }

.avn-hero-location .avn-loc-ic{
  width:1.55em; height:1.55em; flex:0 0 auto;
  font-family: var(--serif) ;
  text-align: center;
}
.avn-avani .avn-hero-location{color:#000000; font-weight:500; letter-spacing:.02em; margin:0 0 12px;
  font-size: clamp(22px, 1.8vw, 20px);
      display: block;
}
.avn-avani .avn-hero-location .avn-loc-ic{
  width:1.65em; height:1.65em; flex:0 0 auto;
    font-family: var(--serif) ;
}
.avn-hero-form{
  width:min(560px, 100%);
  display:grid; gap:10px; padding:16px;
  background:rgb(255 255 255 / 74%);
  border-radius:14px; 
  /* box-shadow:0 18px 46px rgba(0,0,0,.32); */
  animation: fadeUp .7s ease forwards;
}
.avn-input{
  height:46px; border-radius:8px; border:1px solid #e2e9ee; background:#fff; padding:.55rem .8rem;
  transition: box-shadow .18s ease, transform .18s ease;
               font-weight: 400;
               
}
.avn-input:focus{border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(24,161,160,.16); transform:translateY(-1px)}

/* Button with sheen + subtle lift + ripple container */
.avn-btn{
 padding: 5px 20px;
  border-radius:10px; color:#fff; 
  background:linear-gradient(90deg,#18a1a0,#149090); border:0; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  position:relative; overflow:hidden;
  box-shadow: 0 10px 24px rgba(24,161,160,.25);
               font-weight: 600;
               font-size: 20px;
}
.avn-btn2{
   padding: 5px 20px;
    font-size: 20px;
    border-radius: 10px;
    color: white;
    background: linear-gradient(90deg,#ce5007,#ce50078e)!important;
    box-shadow: 0 10px 24px rgba(240, 143, 64, 0.25);
  }

.avn-btn:hover,.avn-btn2:hover{color: white; transform:translateY(-1px); filter:brightness(1.02) }
.avn-btn:active,.avn-btn2:active{ transform:translateY(0) scale(.995) }
/* sheen */
.avn-btn::after,.avn-btn2::after{
  content:""; position:absolute; top:0; left:-150%; width:150%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 80%);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.avn-btn:hover::after,.avn-btn2:hover::after{ left:150% }

/* ================== Section 2: Highlights ================== */
.avn-highlights{padding:clamp(40px,6vw,88px) 0}
.avn-rule-title{   font-family: "Bona Nova SC", "Bona Nova", serif ;
  text-align:center; color:#25B9CE; font-size:clamp(36px, 2.2vw, 28px); margin:0 0 22px }
.avn-rule-title span{ 
    font-family: "Bona Nova SC", "Bona Nova", serif ;
    font-weight: 400;
  display:inline-block; padding:0 .9rem; position:relative }
.avn-rule-title span:before,
.avn-rule-title span:after{
  content:""; position:absolute; top:50%; width:122px; height:0;
  border-top:2px dotted #7fd0cb;
}
.avn-rule-title span:before{ right:100%; margin-right:.9rem }
.avn-rule-title span:after{  left:100%;  margin-left:.9rem }

.avn-wide{position:relative; margin:0 0 18px; border-radius:8px; overflow:hidden; border:1px solid #e7ecef; background:#f9fbfb}
.avn-wide-img{width:100%}
.avn-wide-mist{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 60%, rgba(0,0,0,.12) 82%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}
.avn-wide-caption{ position:absolute; left:0; right:0; bottom:12%; text-align:center; color:#fff; padding:0 1rem }
.avn-wide-caption h3{
 font-style:normal; font-weight:400;  margin:0;
  font-size:clamp(20px, 2.4vw, 34px); text-shadow:0 8px 20px rgba(0,0,0,.35);
  font-family: "Bona Nova SC", "Bona Nova", serif ;
}
.avn-wide-caption p{ margin:.4rem 0 0; font-weight:600; opacity:.95 ;
               font-weight: 600;
              }

.avn-icons{
  display:grid; grid-template-columns:repeat(7, minmax(120px,1fr));
  gap:22px; align-items:start; padding:12px 6px;
}
.avn-ib{text-align:center; opacity:0; transform:translateY(10px)}
.avn-ib.in{animation:fadeUp .6s ease forwards}
.avn-ib img{width:64px; height:64px; object-fit:contain; margin:0 auto 10px}
.avn-ib-t{font-size:.95rem; line-height:1.2; color:#2a3b45;
               font-weight: 400;
               font-style: normal;
              }


/* ================== Section 3: AVANI elements ================== */
.avn-avani{ background:#EBFFFF; padding:clamp(40px,6vw,88px) 0 }
.avn-avani-intro, .avn-avani-copy{
  max-width:960px; margin:0 auto 18px; text-align:center; color:var(--ink-soft);
  font-size:clamp(14px, 1.05vw, 16px); line-height:32px;
               font-weight: 400;
}
.avn-avani-strip{ display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; margin:0 auto 18px }
.avani-card{
  position:relative; height:clamp(180px, 28vw, 310px); border-radius:1px; overflow:hidden;
  background:var(--img) center/cover no-repeat; box-shadow:0 8px 24px rgba(0,0,0,.08);
    will-change: transform, filter, box-shadow;
  box-shadow: 0 8px 24px rgba(0,0,0,.08), inset 0 0 0 0 rgba(0,0,0,0); /* inset overlay off by default */
   transform .45s cubic-bezier(.2,.8,.2,1)
    box-shadow .45s ease
    filter .45s ease;

}
.avani-card::before,
.avani-card::after {
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              opacity .3s ease,
              letter-spacing .3s ease,
              text-shadow .45s ease;
}
.avani-card::before{
  content:attr(data-label); position:absolute; right:0px; top:5px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:"Bodoni Moda", serif; 
  font-weight:bolder;
  font-size:clamp(30px, 1.05vw, 16px); letter-spacing:.14em;
  color:rgba(255,255,255,.96); text-shadow:0 6px 18px rgba(0,0,0,.45);
}
.avani-card::after{
  content: none !important;
}
.avani-letter {
  position: absolute;
  right: 12px;
  bottom: 10px;
   height: var(--avani-letter-h) !important;
  width: auto !important; 
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45)); /* similar to old text glow */
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}

@media (hover:hover) and (pointer:fine) {
  .avani-card:hover .avani-letter {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 16px 40px rgba(0,0,0,.55));
  }
}
@media (hover:hover) and (pointer:fine) {
  .avani-card:hover {
    transform: translateY(-8px) scale(1.03);
    /* soft lift + subtle dark overlay using inset shadow */
    box-shadow:
      0 18px 40px rgba(0,0,0,.22),
      inset 0 0 0 160px rgba(0,0,0,.12);
    filter: saturate(1.05) contrast(1.02);
  }
  .avani-card:hover::before {
    /* the vertical label nudges for a “live” feel */
    transform: rotate(180deg) translateY(6px);
    letter-spacing: .18em;
    opacity: .95;
  }
  .avani-card:hover::after {
    /* the big corner letter floats up a touch */
    transform: translateY(-4px) scale(1.06);
    text-shadow: 0 16px 40px rgba(0,0,0,.6);
  }
}

/* Keyboard focus — mirrors hover (accessibility) */
.avani-card:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 3px;
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    inset 0 0 0 140px rgba(0,0,0,.12);
}

/* Touch devices — avoid heavy transforms, give a tap feedback */
@media (hover:none) {
  .avani-card { transition: box-shadow .3s ease; }
  .avani-card:active {
    box-shadow:
      0 12px 38px rgba(0,0,0,.20),
      inset 0 0 0 120px rgba(0,0,0,.10);
  }
}
.reveal.in{ 
  animation:fadeUp .7s ease forwards, 
  /* kenburns 9s ease-out forwards */
   }
@keyframes fadeUp{ to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes kenburns{ from{transform:translateY(0) scale(1.001)} to{transform:translateY(0) scale(1.002)} }
@media (hover:hover){ .avani-card:hover{ transform:translateY(-2px) scale(1.02); transition:transform .35s ease } }

.avn-avani-welcome{
  margin:4px 0 0; text-align:center;  font-weight:400;
  color:#25B9CE; font-size:clamp(47px, 2.4vw, 32px);
      font-family: sans-serif;
}

/* ================== Section 4: Why choose… ================== */
.avn-why{ background:#fff; padding:clamp(40px,6vw,88px) 0 }
.avn-why-title{ color:var(--why-teal); margin-bottom:16px }
.avn-why-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;

  padding:20px 0 22px;
}
.avn-why-item{ position:relative; padding:0 8px; text-align:center; opacity:0; transform:translateY(10px) }
.avn-why-item.in{ animation:fadeUp .6s ease forwards }
.avn-why-item:not(:last-child)::after{
  content:""; position:absolute; top:1%; bottom:1%; right:0; border-right:1px solid var(--why-divider);
}
.avn-why-item h3{
  margin:0 0 8px; font-weight:500; font-size:clamp(15px,1.15vw,16px); line-height:1.35; color:var(--why-head);
  font-variant-caps: normal;     /* cancel any small-caps behavior */
  text-transform: none;          /* belt-and-suspenders */
  letter-spacing: normal;
}
.avn-why-item p{ margin:0; font-size:14px; line-height:25px; color:var(--why-body);
               
    text-align: center;
  font-variant-caps: normal;     /* cancel any small-caps behavior */
  text-transform: none;          /* belt-and-suspenders */
  letter-spacing: normal;
 }
.avn-why-sub{
  text-align:center; margin:16px auto 8px;  font-weight:400; color:var(--why-body); font-size:clamp(25px,1.8vw,22px);
      font-family: sans-serif;
          font-style: italic;
}
.avn-why-copy{
  max-width:1100px; margin:0 auto;     text-align: center; color:var(--why-body);
  font-size:clamp(14px,1.02vw,15px); line-height:1.7;
  
}

/* ================= Section 5: CTA over image ================= */
.avn-cta{ position: relative; isolation: isolate; }
.avn-cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center }
.avn-cta-shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.5) 100%);
}
.avn-cta-inner{ position:relative; z-index:2; padding: clamp(48px, 8vw, 110px) 16px }

.avn-cta-lead{
  color:#fff; text-align:center; margin:0 0 14px;
  font-weight:700; letter-spacing:.2px;
  text-shadow:0 10px 28px rgba(0,0,0,.45);
    font-variant-caps: normal;
    text-transform: none;
    letter-spacing: normal;
}

.avn-cta-card{
  margin: 0 auto 18px;
  width:min(860px, 100%);
  display:grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding:14px 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 53%), rgb(255 255 255 / 38%));
  border-radius:14px; border:1px solid rgba(255,255,255,.65);
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  /* backdrop-filter: blur(1px); */
  opacity:0; transform: translateY(12px);
}
.avn-cta-card.in{ animation: fadeUp .7s ease forwards }

.avn-cta-badge{ display:grid; place-items:center;     border-right: 1px solid rgb(255 255 255 / 33%);
   padding-right:8px }
.avn-cta-badge img{ width:120px; height:auto; object-fit:contain }

.avn-cta-form .avn-input{
  height:42px; background:#fff; border:1px solid #cfdae2; border-radius:8px;
}
.avn-cta-form .avn-input:focus{ border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(24,161,160,.16) }

.avn-cta-bottom{ text-align:center; color:#fff; text-shadow:0 12px 32px rgba(0,0,0,.55); }
.avn-cta-bottom h3{ margin:20px 0 4px; font-weight:600; letter-spacing:.2px ;
    font-variant-caps: normal;
    text-transform: none;
    letter-spacing: normal;
  }
.avn-cta-bottom h2{
  margin:20px 0 6px; font-weight:800;
  font-size: clamp(22px, 4.2vw, 40px); letter-spacing:.02em;
      font-family: "Bona Nova SC", "Bona Nova", serif;
}
.avn-cta-call{ margin:0; font-size: clamp(16px, 2.7vw, 26px); font-weight:700 }
.avn-cta-call a{ color:#fff; text-decoration: none }
.avn-cta-call a:hover{ text-decoration: none; }

/* ================= Footer + Back-to-top ================= */
footer{
   margin-top: auto;
}
.avn-footer{
  position: relative;
  background:#0f171b; color:#b9c5cc;
  padding: 16px 0px; /* room for the floating button */
}
.avn-foot-links a{ color:#9eb4bd; margin-left:16px }
.avn-foot-links a:hover{ color:#d9e7ec }

/* Auto popup modal styling */
.avn-modal { border: 0; border-radius: 16px; overflow: hidden; }
.avn-modal-head {
    background: linear-gradient(90deg, #18a1a0, #149090);
  color: #fff;
  padding: 18px 20px;
}
.avn-modal .modal-body { padding: 20px; }
.avn-subtitle { opacity: .9; font-size: .95rem; }

/* Center Bootstrap modal perfectly on desktop + mobile */
.modal.show {
  display: flex !important;          /* override BS default block */
  align-items: center;               /* vertical center */
  justify-content: center;           /* horizontal center */
  min-height: 100svh;                /* mobile-safe viewport height */
  padding: 1rem;                     /* breathing room on tiny screens */
}

/* Remove default margins so flex centering is exact */
.modal.show .modal-dialog {
  margin: 0;
  max-width: min(720px, 92vw);       /* keeps it elegant on desktop/mobile */
  width: 100%;
}

/* Keep content scrollable if it's taller than viewport */
.modal.show .modal-content {
  max-height: 90svh;
  overflow: auto;
}

@media (min-width: 768px){
  :root { --avani-letter-h: clamp(44px, 6.2vw, 82px); }

  .avn-hero-eyebrow{
      position: absolute;
    top: 30px;
    left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
}

    .avn-backdrop{ display:none !important }
  .mt-20{
    margin-top: 20px;
  }
  .mobile-none{
    display: none;
  }

  .text-end{
    margin-top: 10px;
  }

  /* keep the right cluster visible on desktop */
  .avn-right{ display:flex !important; align-items:center; gap:18px }

  /* copy line: smaller, grey, normal case */
  .avn-reach{
   font-family: var(--serif) !important;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.1;
    color: #000000;
    letter-spacing: .02em;
    text-transform: none;
    font-variant-caps: normal;
    margin: 0 0 0px;
  }

  /* phone: big teal, underlined, with left icon */
  .avn-phone{
    display:inline-flex; align-items:center; gap:8px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  .avn-phone span{ color: var(--brand);font-weight: 700;
   font-family: var(--serif) !important;
   }
  .avn-phone:hover span{ color:#1a9eb0 }        /* subtle darken on hover */

  /* phone icon size + alignment */
  .avn-phone-ic{
            width: 40px;
        height: 40px; object-fit:contain;
    margin-right: 7px; position: relative; top: -9px;
  }

  /* VG logo size to balance the block */
  .avn-vg{ height: 60px }
}

@media (min-width: 1300px){
.avn-hero {
    min-height: 110vh;
}


}

@media (max-width: 767.98px){ 
  :root { --avani-letter-h: clamp(23px, 5.2vw, 60px); }
  .desktop-none{
    display: none;
  }
  .mt-20{
    margin-top: 20px;
  }
  .avn-rule-title {
    font-size: clamp(24px, 2.2vw, 28px);
  }
  .avn-hero-location {
    font-size: clamp(16px, 1.8vw, 20px);
 
}
.avn-hero-config {
    font-size: clamp(18px, 1.2vw, 14px);
}
    .avn-burger{ display:block }
  .avn-nav{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(84vw, 360px);
    background: #ffffff;
    box-shadow: -12px 0 40px rgba(0,0,0,.18);
    padding: 82px 20px 20px;           /* room for header */
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1100;
  }
  .avn-nav a{
    font-size: 18px;
    padding: 10px 6px;
    border-bottom: 1px solid #eef2f5;
  }
  .avn-header.menu-open .avn-nav{ transform: translateX(0) }

  /* Backdrop behind the panel */
  .avn-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    z-index: 1099;
  }
  .avn-backdrop[hidden]{ display:none }

  .avn-header .wrap {
    padding: 6px 20px;
}
  .avn-cta-card{ grid-template-columns: 1fr; gap:10px; padding:12px }
  .avn-cta-badge{ border-right:none; padding-right:0 }
  .avn-cta-badge img{ width:100px }

   .avn-icons{ grid-template-columns:repeat(2,1fr) } 
     .avn-right{display:block!important}
  .avn-logo{height:32px}
  .avn-hero {
    min-height: 600px;}
  }     

@media (max-width: 991.98px){
  .avn-why-cards{ grid-template-columns:repeat(2,1fr) }
  .avn-why-item:not(:last-child)::after{ display:none }
  .avn-why-item{ padding:12px 16px; border-bottom:1px solid var(--why-rule) }
  /* .avn-why-item:nth-last-child(-n+1){ border-bottom:none } */

  .avn-avani-strip{ grid-template-columns:repeat(5,1fr) }
  
}

@media (max-width: 575.98px){
   .avn-avani-strip{ grid-template-columns:repeat(5,1fr) } .avani-card{ height:200px }

        .avn-hero-eyebrow{ margin:10px 0 5px 0px ;
    font-size: clamp(9px, 1.2vw, 15px);}

      .avn-hero-location .avn-loc-ic{ width:1.35em; height:1.35em; }
 .avn-hero-location{ margin:0 0 10px }

    .avn-avani .avn-hero-location{color:#000000; font-weight:500; letter-spacing:.02em; margin:0 0 12px;
  text-shadow:0 12px 32px rgba(0,0,0,.6);
  font-size: clamp(22px, 1.8vw, 20px);
      display: block;
}
.avn-avani .avn-hero-location .avn-loc-ic{
  width:1.25em; height:1.25em; flex:0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));  font-family: var(--serif) ;
}

  
  .avn-hero-price{ font-size: clamp(32px, 12vw, 64px) }

  .avn-hero{min-height:76vh}
  .avn-hero-title{font-size:clamp(22px, 6vw, 30px)}
    .avn-hero-stack{ width:min(860px, 96%); }
  /* .avn-hero-stack{width:min(540px, 94%)} */
  .avn-hero-form{width:100%}

  .avn-why-cards{ grid-template-columns:1fr }
  .avn-why-item{ border-bottom:1px solid var(--why-divider) }
  
  /* Header: show both logos (hide phone text) */
  .avn-header{ padding:10px 0 }
  .avn-logo{ height:40px }
  .avn-right{ display:flex !important; align-items:center; gap:8px }
  .avn-right .text-end{ display:none !important }   /* hide "Reach out..." block */
  .avn-vg{ height:46px }                             /* VG logo at right */

  /* Banner image tint stronger at the bottom (like m1) */
  .avn-hero{ min-height:95vh }
  .avn-hero-shade{
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%,
                                         rgba(0,0,0,.45) 100%);
  }
   .avn-icons .avn-ib:last-child {
        grid-column: 1 / -1!important;
        justify-self: center;
    }
  /* Title: uppercase, tighter leading, more tracking */
  .avn-hero-title{
    font-family: "Bona Nova SC", serif !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    font-size: clamp(20px, 6.6vw, 15px);
    line-height: 1.65;
    text-shadow: 0 8px 20px rgba(0,0,0,.40);
    margin-bottom: 12px;
  }


  /* Form card: glassy, wider, rounded like m1 */
  .avn-hero-stack{ width:100% }
  .avn-hero-form{
    width: 92vw;                /* same visual width as m1 */
    padding: 16px;
    border-top: none;           /* remove accent strip on mobile */
    border: 1px solid rgba(255,255,255,.55);
    background: linear-gradient(180deg, rgba(255,255,255,.86),
                                          rgba(255,255,255,.78));
    border-radius: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    gap: 10px;
  }

  /* Inputs + button scale */
  .avn-input{
    height: 48px;
    border-radius: 10px;
    font-size: 18px;
  }
  .avn-input::placeholder{ color:#707d86 }

  .avn-btn{
    height: 48px;
    font-size: 18px;
    border-radius: 10px;
    background: linear-gradient(90deg,#25B9CE,#23a7b7);
    box-shadow: 0 10px 24px rgba(37,185,206,.35);
  }
   
  /* Eyebrow line + title */
  .avn-rule-title{
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .avn-rule-title span{
    padding: 0 12px;
  }
  .avn-rule-title span:before,
  .avn-rule-title span:after{
    width: 28%;
    border-top: 1.5px solid #26B6C7;      /* solid aqua line like m2 */
    border-style: solid;
  }

  /* Image card */
  .avn-wide{
    margin: 4px 0 14px;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
       background: none;
  }
  .avn-wide-img{ width:100%; height:auto; display:block }
  .avn-wide-mist{ display:none }             /* no overlay tint in m2 */
   .avn-why-item:nth-last-child(-n+1){ border-bottom:1px solid;
  }
  
  /* Move caption below image and restyle like the mock */
  .avn-wide-caption{
    position: static;                        /* under the image */
    color: #4b4b4b;
    text-align: center;
    padding: 10px 8px 0;
  }
  .avn-wide-caption h3{
    font-family: "Cinzel","Bona Nova SC",serif; /* classic caps look */
    font-weight: 700;
    font-size: clamp(22px, 5.8vw, 30px);
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: none;
    margin: 0;
  }
  .avn-wide-caption p{ display:none }         /* hidden on mobile in m2 */

  /* Icon grid */
  .avn-icons{
    grid-template-columns: 1fr 1fr;          /* 2 columns on phones */
    gap: 28px 18px;
    padding: 6px 4px 0;
    border-top: 0;
    border-bottom: 0;
    max-width: 520px;
    margin: 0 auto;
  }
  .avn-ib{ opacity:1; transform:none }        /* no reveal delay on phones */

  /* Bigger, teal icons like the screenshot */
  .avn-ib img{
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 10px;
    filter: none;                             /* keep original aqua */
  }

  /* Captions */
  .avn-ib-t{
    font-size: 16.5px;
    line-height: 1.35;
    color: #50555A;
  }
  
  /* background + spacing like the mock */
  .avn-avani{
    background: #e9f7f6;            /* soft mint */
    padding: 24px 0 28px;
  }

  /* intro + copy paragraphs */
  .avn-avani-intro,
  .avn-avani-copy{
    max-width: 92%;
    margin: 0 auto 14px;
    text-align: justify;
    color: #3e4b52;
    font-size: 18.5px;
    line-height: 1.45;
  }

  /* show FIVE narrow panels in ONE row on phones */
  .avn-avani-strip{
    display: grid;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2px;
    margin: 8px 0 14px;
  }

  /* panel size + remove heavy shadows for a clean strip look */
  .avani-card{
    height: 120px !important;
    border-radius: 6px;
    box-shadow: none;
  }

  /* vertical labels on the LEFT edge, tall tracking */
  .avani-card::before{
    right: 0px; top: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .18em;
    font-weight: 700;
    font-size: 16px;                 /* readable but not overpowering */
    color: rgba(255,255,255,.96);
    text-shadow: 0 6px 18px rgba(0,0,0,.40);
  }

  /* big rounded letter centered near the bottom */
  .avani-card::after{
    left: 50%; right: auto; bottom: 12px;
    transform: translateX(-50%);
    font-weight: 900;
    font-size: clamp(34px, 10vw, 54px);
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 10px 26px rgba(0,0,0,.45);
  }

  /* closing line: uppercase aqua with a touch of tracking */
  .avn-avani-welcome{
    margin: 12px 0 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .06em;
    color: #26B6C7;
    font-size: 20px;
    font-family: inherit;            /* keep your project’s font stack */
  }
  .avn-why-item h3 {
    font-weight: 600;

    }
    .avani-letter {
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    width: clamp(34px, 10vw, 60px);
  }
 
}
@media (min-width: 0) and (max-width: 575.98px) {
  /* .avani-card[data-letter="N"] > .avani-letter {
   width: clamp(31px, 11vw, 36px);
}
  .avani-card[data-letter="I"] > .avani-letter {
      width: clamp(5px, 1vw, 39px);
  } */
    
}

/* Bootstrap "md-only" (tablets in Bootstrap terms): 768–991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
   .avn-why-item:nth-child(odd) {
  border-right: 1px solid var(--why-rule);
}
.avn-icons {
    display: grid;
    grid-template-columns: repeat(7, minmax(102px, 1fr));
    gap: 10px;
    align-items: start;
    padding: 12px 6px;
}


}

/* Classic tablet range (portrait + small landscape): 768–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
 
}

/* Generic tablet band (works well across Android/iPad): 600–900px */
@media (min-width: 600px) and (max-width: 900px) {
  
}

/* Tablet portrait only */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
 .avn-why-item:nth-child(odd) {
  border-right: 1px solid var(--why-rule);
}
 .avn-icons .avn-ib:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
   
    
}


.error { color:#d33; font-size:12px;text-align: left;margin-left: 10px; }
.invalid { border-color:#d33; outline: none; }