/* ============================================================
   PARAMOUNT ASIA (PASIA) — Shared site chrome + component library
   Built on tokens.css. Used by every inner page so the header,
   footer, search, forms and components are identical everywhere.
   Namespaces: site-* (chrome) · sf-* (search) · pg-* (page shell)
   Never redefines a token; only composes them.
   ============================================================ */

/* ---------- a11y helpers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--deep-forest); font-weight: 700;
  padding: .6em 1em; border-radius: var(--r-md); transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 12px; color: var(--deep-forest); }

/* keep the focus ring visible on dark (forest) surfaces */
.site-header :focus-visible, .pg-hero :focus-visible, .c-hero :focus-visible,
.site-foot :focus-visible, .site-drawer :focus-visible, .sf-overlay :focus-visible {
  outline-color: var(--gold-bright);
}

/* ---------- ALERTS (semantic state surfaces) ---------- */
.alert { display: flex; gap: var(--s-3); align-items: flex-start; border: 1px solid; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--text-sm); }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-ink); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-ink); }

/* ============================================================
   HEADER / TOPBAR
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--deep-forest);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header-in {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 72px; padding-block: .55rem;
}
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.site-brand img { height: 44px; width: auto; }
.site-brand .wm { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: #fff; line-height: 1.1; }
.site-brand .wm span {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-bright); margin-top: 3px;
}
.site-nav { display: flex; gap: clamp(1rem, 2vw, 1.9rem); align-items: center; }
.site-nav a {
  color: rgba(255,255,255,.78); font-size: var(--text-sm); font-weight: 500;
  padding: .4em 0; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; border-color: var(--gold); }

.site-tools { display: flex; align-items: center; gap: var(--s-2); }

/* search trigger (collapsed state, opens the panel) */
.sf-trigger {
  display: inline-flex; align-items: center; gap: .55em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72); border-radius: var(--r-pill);
  padding: .5em .9em; font-size: var(--text-sm); font-family: var(--sans); cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sf-trigger:hover { background: rgba(255,255,255,.14); color: #fff; border-color: var(--gold); }
.sf-trigger svg { width: 17px; height: 17px; }
.sf-trigger .kbd {
  font-size: .7rem; font-weight: 600; padding: .1em .45em; border-radius: 6px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.12);
}

.site-lang { display: flex; align-items: center; gap: 2px; }
.site-lang a {
  font-size: var(--text-xs); font-weight: 600; color: rgba(255,255,255,.6);
  padding: .35em .55em; border-radius: var(--r-pill);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.site-lang a:hover { color: #fff; }
.site-lang a[aria-current="true"] { background: rgba(201,154,71,.22); color: var(--gold-bright); }

.site-header .btn { font-size: var(--text-sm); padding: .78em 1.35em; }

/* hamburger */
.site-burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md); align-items: center; justify-content: center;
}
.site-burger:hover { background: rgba(255,255,255,.1); }
.site-burger span, .site-burger span::before, .site-burger span::after {
  content: ""; display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--dur-normal) var(--ease-out-soft), opacity var(--dur-fast) ease;
}
.site-burger span::before { transform: translateY(-7px); }
.site-burger span::after  { transform: translateY(5px); }
.site-burger[aria-expanded="true"] span { background: transparent; }
.site-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.site-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 1024px) {
  .site-nav { display: none; }
  .sf-trigger .label, .sf-trigger .kbd { display: none; }
  .site-burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .site-header .btn.book { display: none; }
  .site-brand .wm span { display: none; }
}
/* smallest phones (320-374): tighten header chrome so nothing overflows */
@media (max-width: 374px) {
  .site-header-in { gap: var(--s-1); }
  .site-tools { gap: 4px; }
  .site-lang a { padding: .35em .4em; }
}

/* ---------- mobile drawer ---------- */
.site-drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--deep-forest); color: #fff;
  padding: var(--s-5) var(--gutter);
  transform: translateY(-100%); transition: transform var(--dur-normal) var(--ease-out-soft);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3);
}
.site-drawer.open { transform: none; }
.site-drawer-top { display: flex; justify-content: flex-end; margin-bottom: var(--s-2); }
.site-drawer nav { display: flex; flex-direction: column; }
.site-drawer nav a {
  color: rgba(255,255,255,.85); font-family: var(--display); font-size: var(--text-xl);
  padding: .55em 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-drawer nav a:hover { color: var(--gold-bright); }
.site-drawer .drawer-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.site-drawer .drawer-lang { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.site-drawer .drawer-lang a { color: rgba(255,255,255,.7); font-weight: 600; padding: .4em .8em; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); }
.site-drawer .drawer-lang a[aria-current="true"] { background: var(--gold-tint-20); color: var(--gold-bright); }

/* ============================================================
   SPOTIFY-STYLE LIVE SEARCH
   ============================================================ */
.sf-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(8,26,23,.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-normal) ease, visibility var(--dur-normal);
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(1rem, 8vh, 7rem) var(--gutter) 2rem;
}
.sf-overlay.open { opacity: 1; visibility: visible; }
.sf-modal {
  width: 100%; max-width: 640px;
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); overflow: hidden;
  transform: translateY(-14px) scale(.98); transition: transform var(--dur-normal) var(--ease-out-soft);
}
.sf-overlay.open .sf-modal { transform: none; }
.sf-inputwrap { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.sf-inputwrap svg { width: 21px; height: 21px; color: var(--ink-faint); flex: none; }
.sf-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: var(--text-lg); color: var(--ink); padding: .3em 0;
}
.sf-input::placeholder { color: var(--ink-faint); }
.sf-esc { font-size: .7rem; font-weight: 700; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 6px; padding: .2em .5em; background: var(--mist); }
.sf-results { max-height: min(58vh, 520px); overflow-y: auto; padding: var(--s-2) 0 var(--s-3); }
.sf-group-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); padding: var(--s-3) var(--s-4) var(--s-1);
}
.sf-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: .6em var(--s-4); cursor: pointer; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent;
}
.sf-item:hover, .sf-item.active { background: var(--forest-tint-05); border-left-color: var(--gold); color: var(--ink); }
.sf-item .sf-thumb {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--surface-2); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold-tint-20);
}
.sf-item .sf-thumb.square { border-radius: var(--r-sm); box-shadow: none; }
.sf-item .sf-ico {
  width: 42px; height: 42px; border-radius: var(--r-md); flex: none; display: grid; place-items: center;
  background: var(--forest-tint-10); color: var(--forest);
}
.sf-item .sf-ico svg { width: 20px; height: 20px; }
.sf-item .sf-meta { min-width: 0; }
.sf-item .sf-title { font-weight: 600; font-size: var(--text-base); line-height: 1.2; }
.sf-item .sf-title mark { background: var(--gold-tint-20); color: var(--gold-deep); padding: 0 .1em; border-radius: 3px; }
.sf-item .sf-sub { font-size: var(--text-sm); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-item .sf-go { margin-left: auto; color: var(--ink-faint); flex: none; }
.sf-empty { padding: var(--s-5) var(--s-4); text-align: center; color: var(--ink-faint); }
.sf-hint { display: flex; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-4) 0; }
.sf-hint .chip { cursor: pointer; }
.sf-foot {
  display: flex; gap: var(--s-4); align-items: center; justify-content: center;
  padding: var(--s-3); border-top: 1px solid var(--line); background: var(--mist);
  font-size: var(--text-xs); color: var(--ink-faint);
}
.sf-foot .k { font-weight: 700; border: 1px solid var(--line); border-radius: 5px; padding: .1em .45em; background: var(--paper); margin-right: .3em; }

/* inline search (Find-a-Helper hero) reuses .sf-modal styles via .sf-inline */
.sf-inline { position: relative; }
.sf-inline .sf-inputwrap { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-s); }
.sf-inline .sf-inputwrap:focus-within { border-color: var(--gold); }
.sf-inline .sf-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); max-height: 380px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast);
}
.sf-inline.open .sf-results { opacity: 1; visibility: visible; transform: none; }

/* ============================================================
   PAGE HERO (photo + ridge overlay — pattern ~90%, photo subtle)
   ============================================================ */
.pg-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--deep-forest); color: #fff;
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.pg-hero.tall { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 8vw, 6rem); }
/* subtle background photo layer */
.pg-hero-photo {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
/* deep-forest wash kept ~90% so only a hint of the photo shows through */
.pg-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(8,47,42,.90), rgba(8,26,23,.94));
}
.pg-hero-ridge { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pg-hero-ridge svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.pg-hero .eyebrow.on-dark { margin-bottom: var(--s-3); }
.pg-hero h1 { color: #fff; font-size: var(--text-3xl); max-width: 20ch; }
.pg-hero.tall h1 { font-size: var(--text-hero); max-width: 16ch; }
.pg-hero h1 em { font-style: italic; color: var(--gold-bright); font-weight: 500; }
.pg-hero .lede { color: rgba(255,255,255,.82); font-size: var(--text-lg); max-width: 56ch; margin-top: var(--s-3); }
.pg-hero.center { text-align: center; }
.pg-hero.center .c-hero-copy, .pg-hero.center .pg-hero-copy { margin-inline: auto; }
.pg-hero.center h1, .pg-hero.center .lede { margin-inline: auto; }
.pg-hero.center .eyebrow { justify-content: center; }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; font-size: var(--text-sm); }
.crumbs a { color: rgba(255,255,255,.7); }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs .sep { color: rgba(255,255,255,.4); }
.crumbs [aria-current="page"] { color: #fff; }
/* breadcrumb on light */
.crumbs.on-light a { color: var(--pine); }
.crumbs.on-light .sep { color: var(--ink-faint); }
.crumbs.on-light [aria-current="page"] { color: var(--ink-soft); }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.head { max-width: 64ch; margin-bottom: var(--s-6); }
.head.center { margin-inline: auto; text-align: center; }
.head.center .eyebrow { justify-content: center; }
.head h2 { font-size: var(--text-3xl); margin: var(--s-3) 0; }
.head p { color: var(--ink-soft); font-size: var(--text-lg); }
.section.tint { background: var(--paper); }
.section.tint-2 { background: var(--surface-2); }

/* ============================================================
   FORMS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: .4em; margin-bottom: var(--s-3); }
.field > label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field .req { color: var(--danger); }
.field .hint { font-size: var(--text-xs); color: var(--ink-faint); }
.input, .select, .textarea {
  font-family: var(--sans); font-size: var(--text-base); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: .72em .9em; width: 100%;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint-10);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f7b76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center; padding-right: 2.4em;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--danger); }
.field .err { font-size: var(--text-xs); color: var(--danger); }
.checkline { display: flex; align-items: flex-start; gap: .6em; font-size: var(--text-sm); color: var(--ink-soft); }
.checkline input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--forest); flex: none; }

/* ============================================================
   CHIPS / FILTERS / TABS
   ============================================================ */
.chipset { display: flex; flex-wrap: wrap; gap: .55em; }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  padding: .5em 1em; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink-soft); border: 1.5px solid var(--line);
  cursor: pointer; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.chip:hover { border-color: var(--pine); color: var(--forest); }
.chip[aria-pressed="true"], .chip.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.chip .x { font-weight: 700; opacity: .7; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  padding: var(--s-3); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-s);
}
.filter-bar .select { width: auto; min-width: 160px; }
.filter-side { display: grid; gap: var(--s-4); }
.filter-side .fs-group { border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); }
.filter-side .fs-group:last-child { border-bottom: 0; }
.filter-side h4 { font-family: var(--sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-2); }

.tabs { display: flex; gap: .3em; border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); flex-wrap: wrap; }
.tab {
  padding: .7em 1.1em; font-weight: 600; font-size: var(--text-base); color: var(--ink-soft);
  border: 0; background: transparent; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--forest); }
.tab[aria-selected="true"] { color: var(--forest); border-bottom-color: var(--gold); }

/* ============================================================
   CARDS · HELPER CARD (canonical, reused site-wide)
   ============================================================ */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-s); }

.hcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); box-shadow: var(--shadow-s); display: flex; flex-direction: column;
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease, transform var(--dur-normal) var(--ease-out-soft);
}
.hcard:hover { border-color: var(--gold); box-shadow: var(--shadow-m); transform: translateY(-3px); }
.hcard .top { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.hcard .avatar { width: 60px; height: 60px; border-radius: 50%; flex: none; object-fit: cover;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--gold-tint-20); }
.hcard .who h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.hcard .who .sub { font-size: var(--text-sm); color: var(--ink-faint); }
.hcard .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.hcard .foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: auto; }
.hcard .foot .ref { font-size: var(--text-xs); color: var(--ink-faint); }

.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   STAT BAND · NOTE / CALLOUT · PLACEHOLDER BADGE
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); }
.stat { text-align: center; }
.stat .n { font-family: var(--display); font-size: var(--text-3xl); font-weight: 600; color: var(--forest); }
.stat .n em { font-style: normal; color: var(--gold-deep); }
.stat .l { font-size: var(--text-sm); color: var(--ink-soft); margin-top: .2em; }

.note { font-size: var(--text-sm); color: var(--ink-soft); }
.note strong { color: var(--forest); }
.callout {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--forest-tint-05); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--r-md); padding: var(--s-4);
}
.callout svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; }

/* placeholder / client-to-supply badge — makes gaps visible to the client */
.ph-badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .04em; padding: .3em .7em; border-radius: var(--r-pill);
  background: repeating-linear-gradient(45deg, var(--gold-tint-10), var(--gold-tint-10) 7px, transparent 7px, transparent 14px);
  color: var(--gold-deep); border: 1px dashed var(--gold);
}
.ph-badge::before { content: "◆"; font-size: .7em; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pager { display: flex; gap: .35em; justify-content: center; align-items: center; margin-top: var(--s-6); }
.pager a, .pager span {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6em; border-radius: var(--r-md); border: 1.5px solid var(--line);
  color: var(--ink-soft); font-weight: 600; font-size: var(--text-sm); background: var(--paper);
}
.pager a:hover { border-color: var(--pine); color: var(--forest); }
.pager [aria-current="page"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-s); }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th, .table td { text-align: left; padding: .9em 1.1em; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.table thead th { background: var(--forest); color: #fff; font-weight: 600; letter-spacing: .02em; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--forest-tint-05); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot { background: var(--deep-forest); color: rgba(255,255,255,.66); margin-top: var(--section-y); }
.site-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-5); padding-block: var(--s-7) var(--s-5); }
.site-foot img { height: 52px; margin-bottom: var(--s-3); }
.site-foot .about { font-size: var(--text-sm); max-width: 34ch; }
.site-foot h3 { color: #fff; font-family: var(--sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s-3); }
.site-foot ul { list-style: none; padding: 0; display: grid; gap: .6em; }
.site-foot a { color: rgba(255,255,255,.66); font-size: var(--text-sm); transition: color var(--dur-fast) ease; }
.site-foot a:hover { color: var(--gold-bright); }
.site-foot-legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; font-size: var(--text-xs);
}
.site-foot-legal strong { color: #fff; font-weight: 600; }
@media (max-width: 860px) { .site-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-foot-grid { grid-template-columns: 1fr; } }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--whatsapp); color: #fff; padding: .9em 1.3em; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--text-sm); box-shadow: var(--shadow-m);
  transition: transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-normal) ease;
}
.wa-float:hover { transform: translateY(-3px); color: #fff; box-shadow: var(--shadow-lift); }
.wa-float svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .wa-float span { display: none; } .wa-float { padding: .9em; } }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }