/* ===== 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: 'Poppins', -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; }

: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;
}
/* Skip the intro on repeat visits within the same browser session —
   index.html and careerprofiler.html both set .no-intro via the same
   sessionStorage key, so once the intro has played once (on either page) it won't
   replay when navigating between them. */
.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;
}
/* Wraps just the logo image (not the whole padded/centered flex column)
   so the mark's position tracks the image's own edge at every size. */
.preloader-logo-wrap { position: relative; display: inline-block; line-height: 0; }
.preloader-logo-wrap .tm-mark { font-size: 26px; }
/* 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-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
  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);
  /* 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: 18px 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: 10px;
  padding-bottom: 10px;
  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 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity .2s ease;
}
/* ===== Trademark mark, overlaid on the logo image itself rather than
   baked into the asset. The crest artwork sits inset within a lot of
   transparent canvas margin (roughly 11-12% on every side), so the mark
   is positioned as a percentage of the image box to land just outside
   the crest's actual top-right corner instead of out at the canvas
   edge. Each context below sets its own font-size to stay legibly
   proportioned to that instance's logo size. ===== */
.tm-mark {
  position: absolute;
  top: 8%;
  right: 8%;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-text);
  pointer-events: none;
}
.wordmark .tm-mark { font-size: 12px; }
.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);
}
/* Removed on desktop: redundant with the logo, which already links home. */
.wordmark-mark {
  width: clamp(84px, 9.5vw, 116px);
  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: 11px;
  letter-spacing: .2em;
  color: var(--maroon);
  margin-top: 4px;
}

.site-nav {
  display: none;
  /* Only 7 tabs now — plenty of room to let them breathe. flex-wrap stays
     as a safety net for a graceful wrap to a second centered row rather
     than overflowing, but shouldn't trigger at normal desktop widths. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(34px, 4.2vw, 60px);
  justify-self: center;
  grid-column: 2;
}
.site-nav a,
.site-nav .nav-dropdown-trigger {
  position: relative;
  font-size: clamp(15px, 1.25vw, 17px);
  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);
  /* Always on, not just hover/active — hover just thickens it. */
  transform: scaleX(1);
  transform-origin: center;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), height .18s ease;
}
.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 {
  height: 2px;
}

/* ===== 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: 13px;
  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, quicknav taking
     whatever's left in the middle, hamburger pinned to the right — one
     row. Only 3 short items now (Career Profiler moved to the footer),
     so it fits without needing its own line. */
  .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): with 7 tabs now (Curriculum re-added), the base clamp() gap
   and type size still fit this band comfortably — just trim the gap
   slightly rather than the aggressive spacing it used to need for the
   old 13-tab nav. */
@media (min-width: 900px) and (max-width: 1699px) {
  .site-nav { gap: 12px 14px; }
}
/* Right at the 900px floor there still isn't quite room for 7 tabs at the
   larger type size — trim further just in this narrow band. */
@media (min-width: 900px) and (max-width: 1050px) {
  .site-nav { gap: 9px 9px; }
  .site-nav a,
  .site-nav .nav-dropdown-trigger { font-size: 13px; }
}

/* ===== Mobile/tablet quick-nav — sits inline in the header row itself,
   between the logo and the hamburger, on one line. Only 3 short items
   now (Career Profiler moved to the footer's Quick Links column), so it
   fits without wrapping to its own row. A gold underline (not a dot
   separator — dots read as unevenly spaced against variable-width
   words) marks each link. */
.mobile-quicknav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 3.6vw, 20px);
  min-width: 0;
  overflow: hidden;
}
.mobile-quicknav a {
  font-family: var(--font-sans);
  font-size: clamp(10.5px, 2.6vw, 13px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  flex: none;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
@media (max-width: 380px) {
  .mobile-quicknav { gap: 5px; }
  .mobile-quicknav a { font-size: 9.2px; letter-spacing: 0; }
}
@media (max-width: 330px) {
  .mobile-quicknav { gap: 3px; }
  .mobile-quicknav a { font-size: 8.4px; }
}

/* ===== 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-logo-wrap { position: relative; display: inline-block; line-height: 0; }
.footer-logo-wrap .tm-mark { font-size: 20px; }
.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: 13px;
  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-style: italic;
  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 — mobile only. Desktop already has
   the header's cta-pill, the homepage's own inline hero buttons, and
   each page's CTA banner, so the bar is hidden above 900px instead of
   duplicating those. ===== */
.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: 12.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); }
@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; }
}