/* ==========================================================================
   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{
  /* PDF item 1: the lockup was reading small in the navbar. */
  height: clamp(56px, 5.6vw, 82px);
  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:.78rem; 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; }
/* Current page: the underline stays drawn. */
.nav__link[aria-current="page"]{ opacity:1; }
.nav__link[aria-current="page"]::after{ transform: scaleX(1); }

.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:500;
  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__link[aria-current="page"]{ color: var(--gold-soft); }
.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:.75rem; 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:.85rem; 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:.78rem; 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:.75rem; letter-spacing:.18em; }


/* --------------------------------------------------
   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:500;
  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:.75rem; 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:.75rem; font-weight:500;
  letter-spacing:.24em; 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:400;
  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:.8rem; letter-spacing:.1em;
  color: rgba(241,236,228,.6);
}

@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:.75rem; 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:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-soft);
}
.lead__quote{
  margin-top:.65rem;
  font-family: var(--serif); font-weight:500;
  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:.75rem; 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:500;
  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:.76rem; 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:.75rem; 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:1rem; 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:.8rem; 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:.85rem; 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:500; 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:.75rem; }
}

/* 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); }


/* --- Services required checkboxes (PDF item 23) --- */
.checks{ border:0; padding:0; margin:0; min-width:0; }
.checks legend{ padding:0; }
.checks legend span{
  font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color: rgba(23,42,70,.74);
}
.checks__grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:.5rem .9rem;
  margin-top:.6rem;
}
.check{ display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; }
.check input{
  flex:none; width:18px; height:18px; margin-top:.15rem;
  accent-color: var(--navy);
}
.check span{ font-size:.92rem; line-height:1.45; color: var(--ink); }
@media (max-width: 520px){ .checks__grid{ grid-template-columns: 1fr; } }

/* --- Collaborate side reads differently from the event form (PDF item 29) --- */
.is-collab .lead__tab.is-on{ background: var(--gold-deep); }
.is-collab .lead__title em{ color: var(--navy); }
.lead__panel.is-collab .lead__body,
.contact-form.is-collab{ background: #FBF6EA; }
.is-collab .field input:focus,
.is-collab .field select:focus,
.is-collab .field textarea:focus{
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(143,119,66,.14);
}

/* --- Legal links in the footer bar (PDF item 38) --- */
.footer__legal a{ transition: color .3s; }
.footer__legal a:hover{ color: var(--gold-soft); }
.footer__legal span{ margin-inline:.5rem; opacity:.5; }