/* ==========================================================================
   Components — reusable, page-agnostic
   ========================================================================== */

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 32px;
  border: 0;
  font: 700 13px/1 var(--ff-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--c-yellow); color: var(--c-black); }
.btn--primary:hover { background: var(--c-yellow-dark); color: var(--c-black); }
.btn--onDark { border: 2px solid var(--c-white); color: var(--c-white); }
.btn--onDark:hover { background: var(--c-white); color: var(--c-black); }
.btn--outline { border: 2px solid var(--c-teal); border-radius: var(--radius-pill); color: var(--c-black); font-weight: 600; }
.btn--outline:hover { background: var(--c-teal); color: var(--c-black); }
.btn--lg { padding: 19px 54px; font-size: 14px; }
.btn--sm { padding: 13px 24px; font-size: 11.5px; letter-spacing: .1em; }
.btn[disabled], .btn[aria-disabled="true"] { background: #9A9A9A; opacity: .75; cursor: not-allowed; }

/* Text links with a rule ------------------------------------------------ */
.link-rule {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 3px solid var(--c-yellow);
  color: var(--c-black);
  font: 700 12.5px/1 var(--ff-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.link-rule:hover { color: var(--c-red); }
.link-rule--onDark { color: var(--c-white); }
.link-rule--onDark:hover { color: var(--c-yellow); }

/* Eyebrow + section headings ------------------------------------------- */
.eyebrow {
  font: 500 var(--fs-eyebrow)/1 var(--ff-mono);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.eyebrow--red { color: var(--c-red); }
.eyebrow--yellow { color: var(--c-yellow); }
.eyebrow--onDark { color: var(--c-white); }

.section-head { margin-bottom: 44px; }
.section-head__title { margin-bottom: var(--sp-4); }
.section-head__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-muted); }
.section-head--center { text-align: center; }
.section-head--center .section-head__lead { max-width: 720px; margin-inline: auto; }

.rule {
  height: 4px;
  background: var(--c-yellow);
  border: 0;
  margin: 0 0 var(--sp-5);
}
.rule--short { width: 96px; }
.rule--center { margin-inline: auto; }
.rule--wide { width: 100%; max-width: 900px; }

/* Chips ----------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip {
  padding: 10px 15px;
  border: 1px solid var(--c-on-dark-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .16);
  font: 600 13.5px/1 var(--ff-sans);
  color: var(--c-white);
  white-space: nowrap;
}

/* "Slash" bullet lists -------------------------------------------------- */
.slash-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.slash-list__item {
  display: flex;
  gap: var(--sp-3);
  font: 400 var(--fs-meta)/1.4 var(--ff-sans);
  color: var(--c-ink-2);
}
.slash-list__item::before {
  content: "/";
  flex: none;
  font-weight: 800;
  color: var(--c-yellow);
}
.slash-list--teal .slash-list__item::before { color: var(--c-teal); }

/* TBC / pending-content badge ------------------------------------------ */
.badge-tbc {
  display: inline-block;
  padding: 3px 9px;
  background: var(--c-yellow-tint);
  border: 1px dashed #D99F00;
  font: 700 10.5px/1.3 var(--ff-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #6B5200;
  vertical-align: middle;
}

/* Header ---------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 11px var(--sp-10);
  background: var(--c-white);
  box-shadow: 0 1px 0 var(--c-line);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Overlay variant: transparent over a deep hero (home, dual award).
   JS adds .is-solid on hover, focus-within or scroll. */
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  box-shadow: none;
}
.site-header--overlay .site-header__brand-tag,
.site-header--overlay .site-nav__link,
.site-header--overlay .icon-btn { color: var(--c-white); }
.site-header--overlay .icon-btn { border-color: var(--c-on-dark-line); }
.site-header--overlay .site-header__brand-tag { border-left-color: var(--c-on-dark-line); }
.site-header--overlay.is-solid {
  background: var(--c-white);
  box-shadow: var(--shadow-menu);
}
.site-header--overlay.is-solid .site-header__brand-tag,
.site-header--overlay.is-solid .site-nav__link,
.site-header--overlay.is-solid .icon-btn { color: var(--c-black); }
.site-header--overlay.is-solid .icon-btn,
.site-header--overlay.is-solid .site-header__brand-tag { border-color: var(--c-line); }

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  text-decoration: none;
}
.site-header__logo { height: 52px; width: auto; }
.site-header__brand-tag {
  border-left: 1px solid var(--c-line);
  padding-left: var(--sp-4);
  font: 700 var(--fs-label)/1.5 var(--ff-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-black);
}
.site-header__brand-tag span { display: block; font-weight: 600; opacity: .72; }

.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-nav { display: flex; gap: var(--sp-8); }
.site-nav__link {
  padding: 9px 0;
  border-bottom: 3px solid transparent;
  background: none;
  font: 700 15px/1 var(--ff-sans);
  color: var(--c-black);
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] { border-bottom-color: var(--c-red); color: inherit; }
.site-nav__link.is-current { border-bottom-color: var(--c-yellow); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  font-size: 19px;
  color: var(--c-black);
}
.icon-btn--round { width: 42px; height: 42px; border-width: 2px; border-radius: 50%; font-size: 17px; }

/* Mega menu ------------------------------------------------------------- */
.mega {
  position: absolute;
  inset: 100% 0 auto;
  z-index: var(--z-menu);
  padding: 30px var(--sp-10) 34px;
  background: var(--c-white);
  border-top: 1px solid #DEDEDE;
  box-shadow: var(--shadow-menu);
}
.mega[hidden] { display: none; }
.mega__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-6);
}
.mega__title { font: 700 14px/1 var(--ff-sans); letter-spacing: .1em; text-transform: uppercase; }
.mega__hint { font: 400 14px/1 var(--ff-sans); color: var(--c-muted); }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.mega__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: 22px 22px 26px;
  border-radius: var(--radius-md);
  text-align: left;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.mega__card:hover { transform: translateY(-4px); }
.mega__card-title { font: 800 19px/1.15 var(--ff-sans); margin-bottom: var(--sp-2); }
.mega__card-body { font: 400 14.5px/1.4 var(--ff-sans); opacity: .85; }
.mega__card-cta { font: 700 12px/1 var(--ff-sans); letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* Mobile nav ------------------------------------------------------------ */
.mobile-nav {
  position: absolute;
  inset: 100% 0 auto;
  z-index: var(--z-menu);
  padding: 14px var(--gutter) 22px;
  background: var(--c-white);
  border-top: 1px solid #DEDEDE;
  box-shadow: var(--shadow-menu);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__link {
  display: block;
  width: 100%;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
  font: 700 17px/1.2 var(--ff-sans);
  color: var(--c-black);
  text-align: left;
  text-decoration: none;
}
.header-burger { display: none; }

/* Cards ----------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) 30px var(--sp-7);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 5px solid var(--c-yellow);
}
.card__kicker { margin-bottom: var(--sp-3); }
.card__title {
  display: inline-block;
  margin-bottom: var(--sp-4);
  border-bottom: 3px solid transparent;
  font: 800 var(--fs-h3)/1.12 var(--ff-sans);
  color: var(--c-black);
  text-decoration: none;
}
.card__title:hover { border-bottom-color: var(--c-yellow); color: var(--c-black); }
.card__body { margin-bottom: var(--sp-6); font-size: var(--fs-body-sm); color: var(--c-ink-2); }
.card__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}
.card__meta {
  margin-bottom: var(--sp-2);
  font: 700 12px/1 var(--ff-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card__note { margin-bottom: var(--sp-5); font: 400 14px/1.4 var(--ff-sans); color: var(--c-muted-2); }

/* Forms ----------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--sp-5); }
.field--wide { grid-column: span 2; }
.field__label {
  display: block;
  margin-bottom: 9px;
  font: 700 var(--fs-label)/1 var(--ff-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field__req { color: var(--c-red); }
.field__control {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: var(--radius-sm);
  background: var(--c-field-bg);
  font: 500 var(--fs-body-sm)/1.2 var(--ff-sans);
  color: var(--c-black);
}
.field__control:focus-visible { border-color: var(--c-teal); }
.field__error {
  margin-top: 6px;
  font: 500 12.5px/1.35 var(--ff-sans);
  color: var(--c-red);
}
.field__error[hidden] { display: none; }

.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: var(--sp-6) 0;
  font: 400 var(--fs-meta)/1.45 var(--ff-sans);
  color: var(--c-muted);
}
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-teal); }

/* One-time-password verification --------------------------------------- */
.otp { margin-top: 9px; }
.otp__send {
  padding: 9px var(--sp-4);
  border: 1.5px solid var(--c-teal);
  border-radius: 20px;
  font: 700 var(--fs-label)/1 var(--ff-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.otp__send:hover { background: var(--c-teal); }
.otp__row { display: flex; gap: var(--sp-2); align-items: center; }
.otp__input {
  width: 130px;
  padding: 11px var(--sp-3);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 10px;
  background: var(--c-white);
  font: 600 15px/1.2 var(--ff-mono);
  letter-spacing: .18em;
}
.otp__verify {
  padding: 11px 18px;
  border-radius: 20px;
  background: var(--c-teal);
  font: 700 var(--fs-label)/1 var(--ff-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.otp__verify:hover { background: var(--c-teal-ink); color: var(--c-white); }
.otp__hint { margin-top: 7px; font: 400 12.5px/1.35 var(--ff-sans); color: var(--c-muted); }
.otp__hint--error { color: var(--c-red); }
.otp__done {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font: 700 12px/1 var(--ff-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.otp__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--c-teal);
  font: 800 11px/1 var(--ff-sans);
}

/* Modal ---------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--dur-mid) var(--ease);
}
.modal[hidden] { display: none; }
.modal__panel {
  width: 480px;
  max-width: 100%;
  padding: 38px 38px 34px;
  border-radius: 24px;
  background: var(--c-white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 16px rgba(0, 0, 0, .08);
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal__title { font: 800 26px/1.15 var(--ff-sans); margin-bottom: var(--sp-2); color: #000000; letter-spacing: -0.01em; }
.modal__body { margin-bottom: var(--sp-6); font-size: 15.5px; line-height: 1.5; color: #5D5A58; }
.modal__actions { display: flex; gap: 16px; align-items: center; }
.modal__cancel { font: 700 13px/1 var(--ff-sans); color: #6C757D; text-decoration: underline; background: transparent; border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }

/* Footer --------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 66px 0 var(--sp-8);
  background: var(--c-indigo) url("../img/brand-pattern.jpg") center center / cover no-repeat;
  color: var(--c-white);
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.site-footer::before {
  background: url("../img/brand-pattern.jpg") center center / cover no-repeat;
  opacity: .28;
  mix-blend-mode: soft-light;
}
.site-footer::after { background: rgba(10, 10, 30, .42); }
/* Content sits above both overlays. */
.site-footer__inner { position: relative; z-index: 1; }

.site-footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--c-on-dark-line-soft);
}
.site-footer__cta h2 { max-width: 640px; font-size: 36px; line-height: 1.12; letter-spacing: -.005em; }
.site-footer__cta-actions { display: flex; gap: var(--sp-3); flex: none; }
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  padding: var(--sp-10) 0 30px;
}
.site-footer__logo { height: 66px; width: auto; }
.site-footer__address { margin-top: var(--sp-4); max-width: 290px; font-size: var(--fs-body-sm); color: rgba(255, 255, 255, .94); }
.site-footer__col-title {
  margin-bottom: var(--sp-4);
  font: 700 12.5px/1 var(--ff-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-yellow);
}
.site-footer__links { display: flex; flex-direction: column; gap: 9px; }
.site-footer__links a {
  font-size: var(--fs-body-sm);
  line-height: 1.35;
  color: rgba(255, 255, 255, .95);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--c-yellow); text-decoration: underline; }
.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-on-dark-line-soft);
  font: 400 13.5px/1 var(--ff-sans);
  color: rgba(255, 255, 255, .88);
}

/* Chat dock ------------------------------------------------------------ */
.chat-dock {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-dock);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-4);
  max-height: calc(100vh - 48px);
}
.chat-dock__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--c-black);
  box-shadow: var(--shadow-float);
}
.chat-dock__toggle:hover { background: var(--c-yellow-dark); }
.chat-dock__pills {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  animation: fade-up .22s var(--ease) both;
}
.chat-dock__pills[hidden] { display: none; }
.chat-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 18px 11px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  font: 700 14px/1.2 var(--ff-sans);
  color: var(--c-black);
  text-decoration: none;
  white-space: nowrap;
}
.chat-pill:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .24); color: var(--c-black); }
.chat-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
}
.chat-pill__icon--whatsapp { background: #25D366; color: var(--c-white); }
.chat-pill__icon--chat { background: var(--c-teal); color: var(--c-black); }

.chat-panel {
  display: flex;
  flex-direction: column;
  width: 348px;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .26);
  animation: fade-up .3s var(--ease) both;
}
.chat-panel[hidden] { display: none; }
.chat-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  padding: 18px var(--sp-5);
  background: var(--c-teal);
  color: var(--c-black);
}
.chat-panel__avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.chat-panel__name { font: 800 15px/1.2 var(--ff-sans); }
.chat-panel__status { font: 500 12px/1.3 var(--ff-sans); color: rgba(0, 0, 0, .66); }
.chat-panel__close { flex: none; font: 400 22px/1 var(--ff-sans); color: rgba(0, 0, 0, .55); }
.chat-panel__close:hover { color: var(--c-black); }
.chat-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5); }
.chat-panel__greeting {
  margin-bottom: 18px;
  padding: 14px var(--sp-4);
  border-radius: 14px;
  background: var(--c-sand);
  font-size: 15px;
  color: var(--c-ink-1);
}
.chat-panel__prompts { display: flex; flex-direction: column; gap: var(--sp-2); }
.chat-panel__prompt {
  padding: var(--sp-3) 15px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: var(--radius-sm);
  font: 500 14px/1.35 var(--ff-sans);
  text-align: left;
  text-decoration: none;
  color: var(--c-black);
}
.chat-panel__prompt:hover { border-color: var(--c-teal); background: #F2FBFB; }
.chat-panel__foot {
  display: flex;
  gap: var(--sp-2);
  flex: none;
  padding: 14px var(--sp-4);
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.chat-panel__input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) 14px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: var(--radius-lg);
  background: var(--c-field-bg);
  font: 500 14.5px/1.2 var(--ff-sans);
}
.chat-panel__send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-yellow);
  font: 700 17px/1 var(--ff-sans);
}
.chat-panel__send:hover { background: var(--c-yellow-dark); }