/* ==========================================================================
   ChinnA's Events — components.css
   Reusable UI: preloader, navbar, mobile menu, buttons, scroll cue,
   footer, brand lockup, floating WhatsApp.
   ========================================================================== */

/* --------------------------------------------------
   PRELOADER
   -------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  background: var(--ink-deep);
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
html.no-js .preloader{ display:none; }

.preloader__mark{ text-align:center; }
.preloader__logo{
  width: clamp(190px, 40vw, 300px);
  height:auto; margin-inline:auto;
}
.preloader__rule{
  display:block; width: 140px; height:1px; margin:1.6rem auto 0;
  background: var(--line-dark);
}
.preloader__rule i{
  display:block; height:100%; width:0; background: var(--gold);
  animation: pl-draw 1s var(--ease) forwards;
}
@keyframes pl-draw{ to{ width:100%; } }


/* --------------------------------------------------
   NAVBAR
   -------------------------------------------------- */
.nav{
  position:fixed; inset: 0 0 auto 0; z-index:1000;
  height: var(--nav-h);
  display:flex; align-items:center;
  color: var(--on-dark);
  transition: background-color .5s var(--ease), color .5s var(--ease),
              box-shadow .5s var(--ease), backdrop-filter .5s;
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: currentColor; opacity:0;
  transition: opacity .5s var(--ease);
}

.nav.is-stuck{
  background: rgba(13,13,12,.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
          backdrop-filter: saturate(140%) blur(16px);
}
.nav.is-stuck::after{ opacity:.16; }

/* Nav flips to ink-on-ivory over light sections */
.nav.is-stuck.nav--light{
  background: rgba(247,243,237,.92);
  color: var(--on-light);
}
.nav.is-stuck.nav--light::after{ opacity:.14; }

.nav__inner{
  width:100%; max-width: var(--maxw); margin-inline:auto;
  padding-inline: var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

/* Brand — the two logo artworks are stacked and cross-faded with the nav theme */
.brand{ position:relative; display:block; line-height:0; flex:none; }
.brand__logo{
  height: clamp(46px, 4.6vw, 66px);
  width:auto;
  transition: opacity .45s var(--ease);
}
.brand__logo--light{
  position:absolute; inset:0 auto 0 0;
  opacity:0;
}
.nav--light .brand__logo--dark{ opacity:0; }
.nav--light .brand__logo--light{ opacity:1; }

/* Links */
.nav__links{ display:flex; align-items:center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.nav__link{
  position:relative;
  font-size:.75rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  padding-block:.4rem;
  opacity:.85;
  transition: opacity .35s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin:right;
  transition: transform .55s var(--ease);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after{ transform: scaleX(1); transform-origin:left; }

.nav__actions{ display:flex; align-items:center; gap:1rem; }

/* Hamburger */
.burger{
  display:none;
  width:40px; height:40px;
  position:relative; margin-right:-8px;
}
.burger span{
  position:absolute; left:9px; width:22px; height:1px;
  background: currentColor;
  transition: transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:23px; width:14px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ width:22px; transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 1024px){
  .nav__links{ display:none; }
  /* Scoped to .nav so it outranks the later `.btn { display:inline-flex }` rule. */
  .nav .nav__cta{ display:none; }
  .burger{ display:block; }
}


/* --------------------------------------------------
   MOBILE MENU
   -------------------------------------------------- */
.menu{
  position:fixed; inset:0; z-index:999;
  background: var(--ink-deep);
  color: var(--on-dark);
  display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
  opacity:0;
  transition: opacity .5s var(--ease);
}
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; }

.menu__nav{ display:flex; flex-direction:column; gap:.35rem; }
.menu__link{
  display:flex; align-items:baseline; gap:1rem;
  font-family: var(--serif); font-weight:300;
  font-size: clamp(2rem, 9vw, 3.1rem);
  line-height:1.22;
  padding-block:.28rem;
  border-bottom:1px solid var(--line-dark-soft);
  opacity:0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .35s;
}
.menu.is-open .menu__link{ opacity:1; transform:none; }
.menu.is-open .menu__link:nth-child(1){ transition-delay:.10s }
.menu.is-open .menu__link:nth-child(2){ transition-delay:.16s }
.menu.is-open .menu__link:nth-child(3){ transition-delay:.22s }
.menu.is-open .menu__link:nth-child(4){ transition-delay:.28s }
.menu.is-open .menu__link:nth-child(5){ transition-delay:.34s }
.menu.is-open .menu__link:nth-child(6){ transition-delay:.40s }
.menu__link em{
  font-family: var(--sans); font-style:normal;
  font-size:.625rem; font-weight:500; letter-spacing:.22em;
  color: var(--gold);
}
.menu__link:hover{ color: var(--gold-soft); }

.menu__foot{ margin-top: clamp(2rem, 6vh, 3.25rem); }
.menu__meta{
  margin-top:1.5rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--on-dark-muted);
}
.menu__meta a{ color: var(--gold-soft); }


/* --------------------------------------------------
   BUTTONS
   -------------------------------------------------- */
.btn{
  --btn-fg: var(--ink);
  --btn-bg: var(--gold);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 1.075rem 2.1rem;
  font-size:.71rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border:1px solid var(--btn-bg);
  transition: color .45s var(--ease), border-color .45s var(--ease);
  isolation:isolate;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover::before{ transform: translateY(0); }
.btn span{ transition: transform .5s var(--ease); }
.btn:hover span{ transform: translateX(5px); }

.btn--gold:hover{ color: var(--gold); border-color: var(--ink); }

.btn--ghost{
  --btn-fg: var(--on-dark);
  --btn-bg: transparent;
  border-color: rgba(241,236,228,.42);
}
.btn--ghost::before{ background: var(--ivory); }
.btn--ghost:hover{ color: var(--ink); border-color: var(--ivory); }

.btn--outline{
  --btn-fg: currentColor;
  --btn-bg: transparent;
  border-color: currentColor;
  opacity:.9;
}
.btn--outline::before{ background: var(--gold); }
.btn--outline:hover{ color: var(--ink); border-color: var(--gold); opacity:1; }

.btn--sm{ padding: .78rem 1.4rem; font-size:.65rem; letter-spacing:.18em; }


/* --------------------------------------------------
   SCROLL CUE
   -------------------------------------------------- */
.scroll-cue{
  display:inline-flex; align-items:center; gap:1rem;
  font-size:.625rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color: rgba(241,236,228,.72);
  transition: color .4s;
}
.scroll-cue:hover{ color: var(--gold-soft); }
.scroll-cue__line{
  position:relative; display:block; width:1px; height:42px;
  background: rgba(241,236,228,.22); overflow:hidden;
}
.scroll-cue__line::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:45%;
  background: var(--gold);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}


/* --------------------------------------------------
   FOOTER
   -------------------------------------------------- */
.footer{
  background: var(--ink-deep);
  color: var(--on-dark);
  padding-top: clamp(4rem, 8vw, 7rem);
}

/* --- Reveal-on-scroll -------------------------------------------------
   The footer is pinned behind the page and is uncovered as the last
   section slides up off it. `main` carries a bottom margin the height of
   the footer, which is the window the footer shows through.
   `.footer-reveal` is set by JS only when the footer actually fits in the
   viewport, so phones and short windows keep the normal document flow. */
.js.footer-reveal main{
  position:relative;
  z-index:1;
  margin-bottom: var(--footer-h, 0px);
}
.js.footer-reveal .footer{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:0;
}
/* Content drifts up slightly as it is uncovered — set by JS, 0 when idle. */
.js.footer-reveal .footer > *{
  transform: translate3d(0, var(--rev, 0px), 0);
}
@media (prefers-reduced-motion: reduce){
  .js.footer-reveal .footer > *{ transform:none !important; }
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.5fr .8fr .9fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer__logo{ width: clamp(210px, 24vw, 280px); height:auto; }
.footer__tagline{
  margin-top:1.75rem;
  font-family: var(--serif); font-style:italic; font-weight:300;
  font-size:1.22rem; color: rgba(241,236,228,.72);
}
.social{ display:flex; flex-wrap:wrap; gap:1.35rem; margin-top:1.9rem; }
.social a{
  font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--on-dark-muted);
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition: color .35s, border-color .35s;
}
.social a:hover{ color: var(--gold-soft); border-color: var(--gold); }

.footer__h{
  font-family: var(--sans);
  font-size:.625rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color: var(--gold);
  margin-bottom:1.6rem;
}
.footer__col li + li{ margin-top:.85rem; }
.footer__col a,
.footer__contact li{
  font-size:.9rem; font-weight:300;
  color: var(--on-dark-muted);
  transition: color .35s;
}
.footer__col a:hover{ color: var(--ivory); }

.footer__bar{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-block: 1.75rem;
  border-top:1px solid var(--line-dark-soft);
  font-size:.72rem; letter-spacing:.1em;
  color: rgba(241,236,228,.42);
}

@media (max-width: 980px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; align-items:center; text-align:center; }
  .footer__brand .social{ justify-content:center; }
}
@media (max-width: 520px){
  /* Phones: brand on top, Navigate and Services side by side, Contact across the
     full width (the email is too long for half a phone). A single stacked column
     made the footer taller than one and a half screens. */
  .footer{ padding-top: 3rem; }
  .footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
    padding-bottom: 2.25rem;
    text-align:left;
  }
  .footer__logo{ width: 168px; }
  .footer__tagline{ margin-top: 1rem; font-size: 1.05rem; }
  .social{ margin-top: 1.1rem; gap: 1.1rem; }
  .footer__grid > :last-child{ grid-column: 1 / -1; }   /* Contact */
  .footer__h{ margin-bottom: 1rem; }
  .footer__col li + li{ margin-top: .6rem; }
  .footer__bar{ justify-content:center; text-align:center; padding-block: 1.25rem; }
}


/* --------------------------------------------------
   FLOATING ACTIONS
   Contact stack bottom-right, back-to-top bottom-left.
   All three are hidden while the footer is on screen — it carries the same
   links, and they would otherwise sit on top of the footer's bottom bar.
   -------------------------------------------------- */
.fabs{
  position:fixed; z-index:900;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  display:flex; flex-direction:column; gap:.7rem;
}

.fab,
.to-top{
  position:relative;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(14px) scale(.9);
  transition: transform .55s var(--ease), opacity .45s var(--ease),
              visibility .45s, background-color .4s, color .4s, filter .3s;
}
.fabs.is-on .fab,
.to-top.is-on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.fabs.is-on .fab--call{ transition-delay:.06s; }

.fab svg{ width:26px; height:26px; fill: currentColor; }

/* Official WhatsApp green; gold for Call so the two read as distinct actions. */
.fab--wa{ background:#25D366; color:#fff; }
.fab--call{ background: var(--gold); color: var(--ink); }
.fab:hover{ filter: brightness(1.08); transform: translateY(-2px); }
.fab--wa:hover{ background:#1EBE5A; }

/* --- Back to top, with a scroll-progress ring --- */
.to-top{
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  position:fixed; z-index:900;
  width:52px; height:52px;
  background: var(--ink-deep);
  color: var(--gold-soft);
}
.to-top:hover{ background: var(--gold); color: var(--ink); }

.to-top__ring{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform: rotate(-90deg);
  overflow:visible;
}
.to-top__track{ fill:none; stroke: rgba(184,155,94,.22); stroke-width:1.5; }
.to-top__bar{
  fill:none; stroke: var(--gold); stroke-width:1.5; stroke-linecap:round;
  transition: stroke .4s;
}
.to-top:hover .to-top__bar{ stroke: var(--ink); }

.to-top__arrow{
  width:19px; height:19px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* --- Shared tooltip --- */
.fab__tip{
  position:absolute; right: calc(100% + 12px); top:50%;
  transform: translateY(-50%) translateX(8px);
  white-space:nowrap;
  background: var(--ink-deep);
  color: var(--ivory);
  border:1px solid var(--line-dark);
  padding:.5rem .85rem;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fab__tip--right{
  right:auto; left: calc(100% + 12px);
  transform: translateY(-50%) translateX(-8px);
}
.fab:hover .fab__tip,
.to-top:hover .fab__tip{ opacity:1; transform: translateY(-50%); }

@media (max-width: 640px){
  .fab, .to-top{ width:48px; height:48px; }
  .fab svg{ width:23px; height:23px; }
  .fabs{ gap:.6rem; }
  .fab__tip{ display:none; }
}


/* ==========================================================================
   LEAD POPUP
   Native <dialog>: focus trapping, Esc and an inert page come free.
   Ivory panel with navy as the accent — tabs, headings, the image
   overlay — so this is one of the places the secondary colour lives.
   ========================================================================== */
.lead{
  padding:0; border:0; margin:auto;
  width: min(980px, 94vw);
  max-width:none; max-height:none;
  background:transparent;
  color: var(--on-light);
  overflow:visible;
}
.lead::backdrop{
  background: rgba(9,14,24,.66);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity:0;
  transition: opacity .38s ease;
}
.lead.is-open::backdrop{ opacity:1; }
.lead [hidden]{ display:none !important; }

.lead__panel{
  display:grid;
  grid-template-columns: .82fr 1.18fr;
  grid-template-rows: minmax(0, 1fr);
  /* Fixed height on desktop: both tabs share one frame, so switching
     between them never makes the dialog jump. The form scrolls if needed. */
  height: min(88vh, 720px);
  background: var(--ivory);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
  opacity:0;
  transform: translateY(16px) scale(.985);
  transition: opacity .38s var(--ease), transform .55s var(--ease-out);
}
.lead.is-open .lead__panel{ opacity:1; transform:none; }

/* --- left: image + proof --- */
.lead__visual{ position:relative; background: var(--navy); overflow:hidden; }
.lead__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .7s var(--ease);
  filter: var(--img-grade);
}
.lead__img.is-on{ opacity:1; }
.lead__visual::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(23,42,70,.95) 0%, rgba(23,42,70,.6) 42%, rgba(23,42,70,.12) 100%);
}
.lead__visual-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  color: var(--ivory);
}
.lead__kicker{
  font-size:.64rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-soft);
}
.lead__quote{
  margin-top:.65rem;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(1.5rem, 2.2vw, 2rem); line-height:1.15;
}
.lead__proof{
  list-style:none; margin:1.3rem 0 0; padding:1.1rem 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.3rem;
  border-top:1px solid rgba(247,243,234,.2);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(247,243,234,.72);
}
.lead__proof b{
  margin-right:.35rem;
  font-family: var(--serif); font-weight:500; font-size:1.05rem; letter-spacing:0;
  color: var(--ivory);
  font-variant-numeric: lining-nums; font-feature-settings:"lnum" 1;
}

/* --- right: form --- */
.lead__body{
  position:relative; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.lead__close{
  position:absolute; top:.9rem; right:.9rem;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.5rem; line-height:1;
  color: var(--navy);
  border:1px solid rgba(23,42,70,.18);
  transition: background-color .3s, color .3s, border-color .3s;
}
.lead__close:hover{ background: var(--navy); color: var(--ivory); border-color: var(--navy); }

.lead__title{
  margin-top:.55rem; padding-right:2.75rem;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(1.8rem, 2.8vw, 2.45rem); line-height:1.05;
  color: var(--navy);
}
.lead__title em{ font-style:italic; color: var(--gold-deep); }

.lead__tabs{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top: 1.35rem; padding:4px;
  border-radius:999px;
  background: rgba(23,42,70,.07);
}
.lead__tab{
  padding:.72rem .6rem; border-radius:999px;
  font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(23,42,70,.62);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.lead__tab:hover{ color: var(--navy); }
.lead__tab.is-on{ background: var(--navy); color: var(--ivory); }
.lead__tab:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.lead__form{ margin-top:1.35rem; }
.lead__set{ border:0; padding:0; margin:0; min-width:0; }
.lead__legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lead__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; }

.field{ display:flex; flex-direction:column; gap:.42rem; min-width:0; }
.field--full{ grid-column: 1 / -1; }
.field > span{
  font-size:.6rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(23,42,70,.74);
}
.field input,
.field select,
.field textarea{
  width:100%;
  font: inherit; font-size:.92rem; color: var(--ink);
  padding:.72rem .85rem;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(23,42,70,.16);
  border-radius:6px;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field input::placeholder,
.field textarea::placeholder{ color: rgba(23,23,23,.36); }
.field textarea{ resize:vertical; min-height:84px; }
.field select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.2rem;
  background: rgba(255,255,255,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23172A46' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; background-color:#fff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(23,42,70,.12);
}
/* Errors only show once someone has tried to send, not while they type. */
.lead__form.was-validated :invalid{ border-color:#B4483C; box-shadow: 0 0 0 3px rgba(180,72,60,.1); }

.lead__consent{ margin-top:1rem; font-size:.72rem; line-height:1.55; color: rgba(23,23,23,.55); }
.lead__submit{ margin-top:1.1rem; width:100%; justify-content:center; }
.lead__submit[disabled]{ opacity:.6; pointer-events:none; }
.lead__error{ margin-top:.75rem; font-size:.8rem; color:#B4483C; }
.lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- success state --- */
.lead__done{ text-align:center; padding: clamp(2rem, 6vh, 4rem) 0 1rem; outline:none; }
.lead__done-mark{
  width:64px; height:64px; margin:0 auto; border-radius:50%;
  display:grid; place-items:center;
  background: var(--navy); color: var(--gold-soft); font-size:1.5rem;
}
.lead__done-title{
  margin-top:1.1rem;
  font-family: var(--serif); font-weight:400; font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--navy);
}
.lead__done-text{ margin:.7rem auto 0; max-width:34ch; font-size:.95rem; line-height:1.65; color: rgba(23,23,23,.7); }
.lead__done .btn{ margin-top:1.6rem; }

/* --- phones & small tablets: bottom sheet, no image --- */
@media (max-width: 860px){
  .lead{ width:100%; margin: auto 0 0; }
  .lead__panel{
    display:flex; flex-direction:column;
    height:auto; max-height: 94vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(48px);
  }
  .lead__visual{ display:none; }
  .lead__body{ flex:1 1 auto; }
}
@media (max-width: 520px){
  .lead__grid{ grid-template-columns:1fr; }
  .lead__tab{ letter-spacing:.1em; font-size:.66rem; }
}

/* The send button never scrolls out of view. The event tab is taller than the
   panel on most laptops, and a primary action hidden below a scroll is a lost
   lead. The body gives up its bottom padding so the bar sits flush. */
.lead__body{
  --lead-pad: clamp(1.75rem, 3vw, 2.75rem);
  padding: var(--lead-pad) var(--lead-pad) 0;
}
.lead__actions{
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 calc(-1 * var(--lead-pad));
  padding: 1.5rem var(--lead-pad) clamp(1.25rem, 2.4vw, 1.9rem);
  background: linear-gradient(to bottom, rgba(247,243,234,0) 0, var(--ivory) 1.25rem);
}
.lead__actions .lead__consent{ margin-top:0; }
.lead__done{ padding-bottom: var(--lead-pad); }