/* ==========================================================================
   DHARMIKAM — ASK US ANYTHING
   The open invitation that follows the "come to" panel, and the sheet it
   opens.

   It stands between two dark bands — the panel's foot settles into --deep and
   the film band opens in it — so this one is dark too, and the page keeps its
   rhythm rather than flashing a pale strip between them. The copy is the
   cream the film band uses, the mark is the site's gold.

   Self-contained: this sheet adds the .ask-us and .au-* namespaces and
   nothing else. The popup itself — surface, fields, validation, answer — is
   built from css/form-kit.css, as the other two sheets are.
   ========================================================================== */

/* ==========================================================================
   1. THE INVITATION
   ========================================================================== */
.ask-us{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(66px,8vw,1px) 0;
  text-align:center;
  color:rgba(236,244,239,.82);
  /* opens and closes in the green its neighbours hold, lifting a little in
     the middle so the band is not a flat block of colour */
  background:linear-gradient(180deg,var(--deep) 0%,#16351F 42%,#14311D 62%,var(--deep) 100%);
}

.ask-us .blob--ask-a{
  width:min(44vw,520px);aspect-ratio:1;top:-30%;left:-10%;
  background:radial-gradient(circle,rgba(45,106,79,.55),transparent 66%);
  opacity:.5;
}
.ask-us .blob--ask-b{
  width:min(38vw,460px);aspect-ratio:1;bottom:-32%;right:-8%;
  background:radial-gradient(circle,rgba(192,153,63,.34),transparent 66%);
  opacity:.5;
}
/* the slow warmth behind the copy the film band also breathes with */
.ask-us__glow{
  position:absolute;z-index:-1;top:50%;left:50%;
  width:min(74vw,760px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(226,200,138,.13),transparent 66%);
  animation:pulseGlow 12s ease-in-out infinite;
  pointer-events:none;
}

.ask-us__inner{
  position:relative;z-index:1;
  max-width:720px;margin-inline:auto;
}

.ask-us__mark{
  display:block;width:34px;height:34px;
  margin:0 auto clamp(1rem,1.6vw,1.35rem);
  color:var(--gold-soft);
}
.ask-us__mark svg{width:100%;height:100%;display:block}

.ask-us__title{
  margin:0 0 .6rem;
  color:var(--cream);
}
.ask-us__lead{
  margin:0 auto clamp(1.8rem,2.8vw,2.4rem);
  max-width:56ch;
  color:rgba(236,244,239,.8);
}

/* The button keeps the site's own .btn-ayur; on a dark band it takes the gold
   the other dark bands give their calls, so it carries from across the page. */
.ask-us__cta{position:relative;display:inline-flex}
.ask-us__cta::before{
  content:"";position:absolute;z-index:-1;
  top:50%;left:50%;width:215%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(226,200,138,.26),transparent 66%);
  animation:pulseGlow 9s ease-in-out infinite;
  pointer-events:none;
}

/* ==========================================================================
   2. ITS SHEET
   Everything the popup is made of comes from css/form-kit.css; only its width
   and a little of its rhythm are its own.
   ========================================================================== */
.au-modal .modal-dialog{max-width:min(800px,94vw)}

@media (min-width:768px){
  .au-modal .dh-grid{gap:clamp(.8rem,1.4vw,1.1rem)}
  .au-modal textarea.dh-input{min-height:120px}
}

/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */
@media (max-width:767.98px){
  .ask-us{padding:clamp(54px,11vw,84px) 0}
  .ask-us__mark{width:30px;height:30px}
  .ask-us__cta,
  .ask-us__cta .btn-ayur{width:100%}
}

@media (max-width:575.98px){
  .ask-us .blob--ask-a,
  .ask-us .blob--ask-b{opacity:.4}
}

/* ==========================================================================
   4. PRINT
   ========================================================================== */
@media print{
  .ask-us{background:#fff;color:#000;padding:1.5rem 0}
  .ask-us__title{color:#000}
  .ask-us__lead{color:#000}
  .ask-us__glow,.ask-us__cta{display:none}
}