/* ===== Design tokens ===== */
:root {
  --ivory: #F7F2E9;
  --ivory-deep: #F1EAD9;
  --placeholder: #DAD0BC;
  --ink: #201810;
  --muted: #5B4A3A;
  --muted-label: #6E5C48;   /* darkened from spec #8B7A65 for AA contrast */
  --gold: #B8863F;          /* decorative: fills, dividers, marquee bg */
  --gold-numeral: #9C7538;  /* large decorative numerals, AA-large safe */
  --gold-text: #7A5A38;     /* small readable gold text: eyebrows, CTA */
  --maroon: #8C2333;
  --whatsapp: #25D366;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --side-pad: clamp(24px, 6vw, 64px);
  --marquee-h: clamp(46px, 7vw, 58px);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
main p strong { font-weight: 800; color: var(--maroon); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--ivory);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ===== Preloader ===== */
/* Pure CSS, no JS dependency: it always finishes on its own timer, so a
   slow or broken script can never leave it stuck on screen. */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches the sampled background of assets/iiwm-logo.jpeg so the logo
     card blends seamlessly into the screen. */
  background: #FCF0E2;
  animation: preloader-out 3s cubic-bezier(.65, 0, .35, 1) forwards;
}
/* Homepage only: skip the intro on repeat visits within the same
   browser session (index.html sets .no-intro via sessionStorage).
   quiz.html never sets this class, so its preloader is unaffected. */
.no-intro #preloader { display: none; }
#preloader::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 3vw, 28px);
  border: 1px solid rgba(184, 134, 63, .4);
  pointer-events: none;
}
.preloader-corner {
  position: absolute;
  width: clamp(46px, 7vw, 84px);
  height: clamp(46px, 7vw, 84px);
  color: var(--gold);
  opacity: .8;
  pointer-events: none;
}
.preloader-corner svg { width: 100%; height: 100%; display: block; }
.preloader-corner--tl { top: clamp(24px, 4.5vw, 44px); left: clamp(24px, 4.5vw, 44px); }
.preloader-corner--tr { top: clamp(24px, 4.5vw, 44px); right: clamp(24px, 4.5vw, 44px); transform: scaleX(-1); }
.preloader-corner--bl { bottom: clamp(24px, 4.5vw, 44px); left: clamp(24px, 4.5vw, 44px); transform: scaleY(-1); }
.preloader-corner--br { bottom: clamp(24px, 4.5vw, 44px); right: clamp(24px, 4.5vw, 44px); transform: scale(-1, -1); }
.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(12px) scale(.92);
  animation: preloader-in 1s cubic-bezier(.19, 1, .22, 1) .1s forwards;
}
/* The full logo lockup (monogram + institute name baked into the image) —
   sized against the viewport height so the whole portrait card fits above
   the fold on phones. */
.preloader-logo {
  width: clamp(210px, 34vh, 340px);
  max-width: 78vw;
  height: auto;
  animation: preloader-breathe 2.1s ease-in-out .9s infinite;
  /* The JPEG's watercolor wash isn't perfectly flat (#F8E2CB–#FCF2E6), so
     a solid page background alone leaves a faint rectangle at the card's
     edges. Feather ~6% of each edge so the card melts into the screen. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
@keyframes preloader-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes preloader-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.045); opacity: .88; }
}
@keyframes preloader-out {
  0%, 82% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  #preloader { animation: preloader-out 1s linear .4s forwards; }
  .preloader-inner { animation: none; opacity: 1; transform: none; }
  .preloader-logo { animation: none; }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 400;
}
.eyebrow-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  /* auto (not 1fr) on the outer columns: the logo and the Apply Now
     pill always keep their own natural width now, and the nav — the
     only column that should ever flex or wrap — takes whatever space
     is left. With 1fr on the outer columns, a wide unwrapped nav could
     demand more than the available width and the grid would squeeze
     the flanking 1fr tracks all the way down to 0, which visibly
     collapsed the logo to nothing around 900–1150px viewports. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 24px);
  /* Slimmer vertical padding — the enlarged logo mark carries the height.
     Horizontal padding is intentionally narrower than the page's usual
     --side-pad: pulling the logo and Apply Now pill closer to the edges
     frees up real width for the nav list to breathe. */
  padding: 12px clamp(16px, 3vw, 40px);
  background: rgba(247, 242, 233, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(32, 24, 16, .07);
  transition: padding .35s cubic-bezier(.4, 0, .2, 1),
              background-color .35s ease,
              border-color .35s ease;
}
.site-header.is-scrolled {
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(247, 242, 233, .97);
  border-color: rgba(32, 24, 16, .12);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity .2s ease;
}
.wordmark:hover,
.wordmark:focus-visible { opacity: .78; }
.home-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--gold-text);
  border: 1px solid rgba(201, 151, 59, .35);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.home-btn svg { width: 16px; height: 16px; }
.home-btn:hover,
.home-btn:focus-visible {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
@media (min-width: 900px) {
  .home-btn { display: inline-flex; }
}
.wordmark-mark {
  width: clamp(62px, 8vw, 84px);
  height: auto;
  display: block;
}
/* .wordmark-main / .wordmark-sub still style the footer brand block. */
.wordmark-main {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 19px);
  letter-spacing: .01em;
  margin-top: 3px;
  white-space: nowrap;
}
.wordmark-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--maroon);
  margin-top: 4px;
}

.site-nav {
  display: none;
  /* 12 tabs: allow a graceful wrap to a second centered row on narrower
     desktop widths instead of overflowing. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(18px, 2vw, 30px);
  justify-self: center;
  grid-column: 2;
}
.site-nav a,
.site-nav .nav-dropdown-trigger {
  position: relative;
  font-size: clamp(12.5px, 1.05vw, 14px);
  font-weight: 600;
  letter-spacing: .02em;
  padding-bottom: 5px;
  white-space: nowrap;
}
.site-nav a::after,
.site-nav .nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav .nav-dropdown-trigger:hover::after,
.site-nav .nav-dropdown-trigger:focus-visible::after {
  transform: scaleX(1);
}

/* ===== Nav dropdown (e.g. Inner Circle members) ===== */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.nav-dropdown-caret { width: 8px; height: 8px; flex: none; transition: transform .2s ease; }
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret,
.nav-dropdown.is-open .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  margin-top: 14px;
  padding: 8px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 20px 40px -14px rgba(32, 24, 16, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--ivory-deep);
}
.nav-dropdown-menu-photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
  grid-column: 3;
}

.cta-pill {
  display: none;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 11px 26px;
  transition: background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.cta-pill:hover,
.cta-pill:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
}
.menu-toggle span {
  width: 20px;
  height: 1px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

@media (max-width: 899px) {
  /* Grid's centered nav column isn't needed below 900px (site-nav is
     hidden), so switch to flex: logo on the left, header-actions
     (hamburger) pinned to the right — a clean two-item bar. */
  .site-header { display: flex; align-items: center; }
  .header-actions { margin-left: auto; }
}

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .cta-pill { display: inline-block; }
  .menu-toggle { display: none; }
  /* Extra `nav.mobile-quicknav` qualifier beats the unconditional
     `.mobile-quicknav { display: flex }` rule declared further below at
     equal specificity otherwise (that rule would win on source order). */
  nav.mobile-quicknav { display: none; }
}
/* 900–1699px (most laptop screens, incl. the common 1280/1366/1536/1600
   widths): the 13-tab nav's own clamp() sizing still runs too wide to
   fit one row here, so the last tab or two wraps alone onto a lopsided
   second line. Tighten font and gap specifically in this band — wide
   screens (>=1700px) keep the more spacious clamp() values untouched. */
@media (min-width: 900px) and (max-width: 1699px) {
  .site-nav { gap: 9px 9px; }
  .site-nav a,
  .site-nav .nav-dropdown-trigger { font-size: 12px; }
}

/* ===== Mobile/tablet quick-nav — sits inline in the header row itself
   (between the logo and the hamburger), not a separate strip underneath.
   Space is tight next to the logo/hamburger, so type is smaller than a
   dedicated row would allow, and a thin gold dot separates each link
   instead of a wide gap. */
.mobile-quicknav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 5.4vw, 28px);
  min-width: 0;
  overflow: hidden;
}
.mobile-quicknav a {
  font-family: var(--font-sans);
  font-size: clamp(9.5px, 2.6vw, 11.5px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
}
.mobile-quicknav a:not(:last-child)::after {
  content: "\2022";
  position: absolute;
  right: clamp(-21px, -4.6vw, -17px);
  color: var(--gold);
}
@media (max-width: 380px) {
  .mobile-quicknav { gap: 14px; }
  .mobile-quicknav a { font-size: 9px; }
  .mobile-quicknav a:not(:last-child)::after { right: -10px; }
}

/* ===== Mobile / overlay menu ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 44px 44px 110px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu a {
  font-family: var(--font-serif);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 400;
  padding: 16px 0;
  border-bottom: 1px solid rgba(32, 24, 16, .12);
}
.mobile-menu a.mobile-menu-apply {
  font-style: italic;
  color: var(--gold-text);
  border-bottom: none;
}
.menu-close {
  position: absolute;
  top: 20px;
  right: var(--side-pad);
  font-size: 28px;
  line-height: 1;
  padding: 10px;
}
@media (min-width: 900px) {
  .mobile-menu { display: none; }
}

/* ===== Section shared ===== */
.section {
  padding: clamp(32px, 7vw, 76px) var(--side-pad);
  opacity: 1;
  transform: none;
}
/* Reveal-on-scroll is opt-in via the .js class (set by an inline head
   script). Without JS, [data-reveal] sections stay fully visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.65,.3,1), transform .6s cubic-bezier(.2,.65,.3,1);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.section-desc {
  font-size: 15px;
  font-weight: 400;
  max-width: 340px;
  line-height: 1.6;
  color: var(--muted);
}
@media (min-width: 900px) {
  .section-head:not(.section-head--stack) {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .section-head:not(.section-head--stack) .section-desc {
    text-align: right;
  }
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid rgba(32, 24, 16, .12);
  padding: clamp(48px, 8vw, 72px) var(--side-pad) clamp(100px, 12vw, 48px);
}
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.footer-logo { display: block; margin: 0 auto; width: clamp(160px, 14vw, 200px); height: auto; }
.footer-tagline {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 340px;
  margin-top: 10px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.footer-nav a { font-size: 15.5px; letter-spacing: .05em; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--gold-text); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(32, 24, 16, .08);
  font-size: 11px;
  color: var(--muted-label);
}
@media (min-width: 900px) {
  .footer-top { flex-direction: column; align-items: center; }
  .footer-top .footer-cols { width: 100%; }
}

/* ===== Admin login (hidden trigger: 5 clicks on the header wordmark) ===== */
.admin-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 24, 16, .45);
  backdrop-filter: blur(4px);
}
.admin-login-overlay[hidden] { display: none; }
.admin-login-modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--ivory);
  border-radius: 18px;
  padding: 36px 30px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
}
.admin-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  padding: 6px;
}
.admin-login-close:hover, .admin-login-close:focus-visible { color: var(--ink); }
.admin-login-modal h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
  margin: 6px 0 22px;
}
.admin-login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.admin-login-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.admin-login-field input {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(32, 24, 16, .18);
  border-radius: 10px;
  background: var(--ivory-deep, #fff);
  color: var(--ink);
}
.admin-login-field input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.admin-login-submit {
  width: 100%;
  background: var(--gold);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 10px;
  transition: opacity .18s ease;
}
.admin-login-submit:hover, .admin-login-submit:focus-visible { opacity: .88; }
.admin-login-submit:disabled { opacity: .6; cursor: not-allowed; }
.admin-login-error {
  min-height: 18px;
  font-size: 14.5px;
  color: #B3261E;
  margin: 0 0 12px;
}

/* ===== Fixed mobile "Apply Now" bar (desktop already has it in the sticky
   header's cta-pill, so this is hidden at the same breakpoint) ===== */
.mobile-apply-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--side-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 242, 233, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(32, 24, 16, .1);
  box-shadow: 0 -8px 24px rgba(32, 24, 16, .1);
}
.mobile-apply-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  line-height: 1.15;
  background: var(--coral, var(--gold));
  color: #fff;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 10px 6px;
  border-radius: 14px;
  box-shadow: 0 10px 24px -10px rgba(169, 131, 79, .5);
  transition: transform .18s ease;
}
.mobile-apply-bar a:active { transform: scale(.97); }
/* "Watch Video" sits in a flex:1 wrapper (rather than being a direct
   .mobile-apply-bar child like the other two) purely so its "coming
   soon" note can float as a small tooltip above the bar instead of
   pushing the fixed-height bar taller when it appears. */
.mobile-bar-video-wrap { flex: 1; position: relative; display: flex; }
.mobile-bar-video-wrap .video-soon-note {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
  margin-top: 0;
  box-shadow: 0 8px 20px -8px rgba(32, 24, 16, .4);
}
.mobile-bar-video-wrap .video-soon-note::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
@media (min-width: 900px) {
  .mobile-apply-bar { display: none; }
}
body.has-mobile-apply-bar { padding-bottom: 78px; }
@media (min-width: 900px) {
  body.has-mobile-apply-bar { padding-bottom: 0; }
}

/* ===== Persistent floating WhatsApp chat button (site-wide) ===== */
.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: calc(78px + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--whatsapp);
  box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .6);
  transition: transform .18s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible { transform: scale(1.06); }
.whatsapp-float svg { width: 26px; height: 26px; fill: #fff; }
@media (min-width: 900px) {
  .whatsapp-float { bottom: 24px; }
}
body:not(.has-mobile-apply-bar) .whatsapp-float { bottom: 24px; }