/* =========================================================================
   Foxpels Landing — stylesheet
   Static, no build step. Design system as CSS custom properties.
   ========================================================================= */

:root {
  /* Palette */
  --bg:         #F7F4EE;
  --bg-alt:     #F1EDE2;
  --card:       #FCFAF5;
  --ink:        #1A1A1A;
  --green:      #1F4E32;
  --green-dark: #163B25;
  --teal:       #0F5257;
  --rust:       #9A3B26;
  --rust-dark:  #7E2F1D;
  --gold:       #C9A227;
  --gold-light: #E0BB44;
  --cream:      #F7F4EE;

  /* Text on ink/green fields */
  --on-dark:      rgba(247,244,238,0.88);
  --on-dark-soft: rgba(247,244,238,0.65);

  /* Type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', system-ui, 'Segoe UI', sans-serif;

  /* Layout */
  --maxw: 1160px;
  --header-h: 60px;
  --section-pad: clamp(72px, 10vw, 128px);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--teal); text-underline-offset: 3px; }
::selection { background: rgba(201,162,39,0.25); }

/* Scroll offset so anchored sections clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--green); color: var(--cream);
  padding: 10px 16px; border-radius: 2px; text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rust); outline-offset: 1px;
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 1080px; }
.section { padding: var(--section-pad) 24px; }
.section--alt { background: var(--bg-alt); }
.section > .wrap { padding: 0; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Shared type ---------- */
.kicker {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 14px;
}
.section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15;
  color: var(--ink); text-wrap: balance; margin-bottom: 52px;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  letter-spacing: 0.03em; padding: 15px 30px; border: none; border-radius: 2px;
  transition: background-color 0.2s ease;
}
.btn--primary { background: var(--rust); color: var(--cream); }
.btn--primary:hover { background: var(--rust-dark); }
.btn--green { background: var(--green); color: var(--cream); }
.btn--green:hover { background: var(--green-dark); }

.link-arrow {
  display: inline-block; align-self: flex-start; text-decoration: none;
  color: var(--rust); font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(154,59,38,0.4); padding: 4px 0;
  transition: border-color 0.2s ease;
}
.link-arrow span { transition: transform 0.2s ease; display: inline-block; }
.link-arrow:hover { border-bottom-color: var(--rust); }
.link-arrow:hover span { transform: translateX(3px); }

.link-underline {
  text-decoration: none; color: var(--teal); font-size: 15px; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(15,82,87,0.4); padding: 4px 0; white-space: nowrap;
  transition: border-color 0.2s ease;
}
.link-underline:hover { border-bottom-color: var(--teal); }

/* =========================================================================
   NAV
   ========================================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(247,244,238,0.96);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(26,26,26,0.12);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(247,244,238,0.98);
  box-shadow: 0 6px 24px -12px rgba(26,26,26,0.35);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: 0.01em; color: var(--green); }
.brand__by { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,26,26,0.55); }

.nav-desktop { display: flex; align-items: center; gap: 28px; }
.nav-desktop__link {
  text-decoration: none; color: var(--ink); font-size: 15px; letter-spacing: 0.02em;
  transition: color 0.15s ease;
}
.nav-desktop__link:hover { color: var(--rust); }
.nav-desktop__cta {
  text-decoration: none; background: var(--green); color: var(--cream);
  font-size: 14px; letter-spacing: 0.04em; padding: 9px 18px; border-radius: 2px;
  transition: background-color 0.2s ease;
}
.nav-desktop__cta:hover { background: var(--green-dark); }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(26,26,26,0.25); border-radius: 2px;
  width: 44px; height: 44px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  background: var(--bg); border-bottom: 1px solid rgba(26,26,26,0.12);
  padding: 8px 24px 20px; flex-direction: column;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile:not([hidden]) { display: flex; }
.nav-mobile__link {
  text-decoration: none; color: var(--ink); font-size: 18px; padding: 13px 4px;
  border-bottom: 1px solid rgba(26,26,26,0.08);
}
.nav-mobile__cta {
  text-decoration: none; margin-top: 18px; background: var(--green); color: var(--cream);
  text-align: center; font-size: 16px; letter-spacing: 0.04em; padding: 14px 18px; border-radius: 2px;
}

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; background: var(--ink); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(20,24,20,0.85) 0%, rgba(20,24,20,0.48) 38%,
    rgba(20,24,20,0.12) 65%, rgba(20,24,20,0.28) 100%);
}
.hero__content {
  position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 140px 24px 96px; padding-left: max(24px, env(safe-area-inset-left));
}
.hero__text { max-width: 720px; margin-left: clamp(0px, 3vw, 48px); }
.hero__kicker {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247,244,238,0.78); margin-bottom: 20px;
}
.hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--cream); text-wrap: balance;
}
.hero__sub {
  margin-top: 24px; max-width: 540px;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--on-dark);
}
.hero__tagline {
  margin-top: 18px; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.6vw, 23px); color: rgba(247,244,238,0.85);
}
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hero__email {
  color: rgba(247,244,238,0.9); font-size: 16px;
  text-decoration: underline; text-decoration-color: rgba(247,244,238,0.4);
}
.hero__email:hover { color: var(--cream); text-decoration-color: var(--cream); }

/* =========================================================================
   THREE SIGNATURES
   ========================================================================= */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 22px; }

.sig-card { background: var(--card); border: 1px solid rgba(26,26,26,0.10); padding: 34px 30px 38px; }
.sig-card--one   { border-top: 3px solid var(--green); }
.sig-card--two   { border-top: 3px solid var(--teal); }
.sig-card--three { border-top: 3px solid var(--rust); }
.sig-card__badge { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.sig-icon { display: inline-flex; width: 26px; height: 26px; }
.sig-icon svg { width: 100%; height: 100%; }
.sig-icon--gold { color: var(--gold); }
.sig-icon--teal { color: var(--teal); }
.sig-icon--rust { color: var(--rust); }
.sig-card__tier { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.sig-card__tier--gold { color: var(--gold); }
.sig-card__tier--teal { color: var(--teal); }
.sig-card__tier--rust { color: var(--rust); }
.sig-card__title { font-family: var(--serif); font-weight: 600; font-size: 26px; margin-bottom: 14px; }
.sig-card__title--green { color: var(--green); }
.sig-card__title--teal  { color: var(--teal); }
.sig-card__title--rust  { color: var(--rust); }
.sig-card__body { font-size: 16px; line-height: 1.65; color: rgba(26,26,26,0.8); }

.fee-line {
  margin: 56px auto 0; max-width: 640px; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--green);
}

/* =========================================================================
   WHO WE WORK WITH
   ========================================================================= */
.pathway {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid rgba(26,26,26,0.10); padding: 34px 30px 32px;
}
.section--alt .pathway { background: var(--bg); }
.pathway__icon { display: inline-flex; width: 30px; height: 30px; color: var(--teal); margin-bottom: 24px; }
.pathway__icon svg { width: 100%; height: 100%; }
.pathway__title { font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--ink); margin-bottom: 12px; }
.pathway__body { flex: 1; font-size: 16px; line-height: 1.65; color: rgba(26,26,26,0.8); margin-bottom: 26px; }

/* =========================================================================
   FEATURED EXPERIENCES
   ========================================================================= */
.feature {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.feature--first  { margin-bottom: clamp(64px, 8vw, 110px); }
.feature--second { max-width: 1080px; margin-left: auto; }
.feature__media { aspect-ratio: 4 / 3; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__text { padding-top: clamp(0px, 2vw, 28px); }
.feature__tier { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.feature__tier--teal { color: var(--teal); }
.feature__tier--gold { color: var(--gold); }
.feature__title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15; color: var(--ink); margin-bottom: 20px;
}
.feature__body { font-size: 17px; line-height: 1.7; color: rgba(26,26,26,0.82); margin-bottom: 18px; }
.feature__note {
  font-size: 15px; line-height: 1.6; color: var(--green);
  border-left: 2px solid var(--green); padding-left: 14px; margin-bottom: 24px;
}

/* =========================================================================
   OPERATING CREDIBILITY (WAARI)
   ========================================================================= */
.credibility { background: var(--green); color: var(--cream); padding: clamp(72px, 10vw, 120px) 24px; }
.credibility__kicker {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.credibility__lede {
  max-width: 760px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.5;
  color: rgba(247,244,238,0.95); margin-bottom: 48px;
}
.stats {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px);
  border-top: 1px solid rgba(247,244,238,0.2); padding-top: 40px; margin-bottom: 40px;
}
.stat__value { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 4vw, 54px); line-height: 1; color: var(--cream); }
.stat__label { margin-top: 10px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); }
.credibility__assurance {
  font-size: 16px; line-height: 1.6; color: rgba(247,244,238,0.8);
  border-left: 2px solid var(--gold); padding-left: 16px; max-width: 560px;
}

/* =========================================================================
   FOUNDER'S NOTE
   ========================================================================= */
.founder { max-width: 660px; margin: 0 auto; }
.founder__kicker { text-align: center; }
.founder__photo-wrap { display: flex; justify-content: center; margin-bottom: 36px; }
.founder__photo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(26,26,26,0.12);
}
.founder__note {
  font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.65; color: rgba(26,26,26,0.88);
}
.founder__sig { margin-top: 34px; text-align: center; }
.founder__name { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--green); }
.founder__role { margin-top: 6px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,26,26,0.55); }
.founder__linkedin {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  text-decoration: none; color: var(--teal); font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
}
.founder__linkedin svg { width: 18px; height: 18px; }
.founder__linkedin:hover { color: var(--green); }

/* =========================================================================
   PART OF EARTH ABROAD
   ========================================================================= */
.parent-band {
  background: var(--bg-alt);
  border-top: 1px solid rgba(26,26,26,0.08);
  border-bottom: 1px solid rgba(26,26,26,0.08);
  padding: clamp(48px, 6vw, 72px) 24px;
}
.parent-band__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.parent-band__logo { width: 72px; height: 72px; flex: none; border-radius: 4px; }
.parent-band__text { flex: 1; min-width: 280px; font-size: 16px; line-height: 1.65; color: rgba(26,26,26,0.8); }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.contact__title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1; color: var(--ink); margin: 0 0 32px;
}
.contact__email {
  display: inline-block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px); color: var(--green); text-decoration: none;
  border-bottom: 2px solid rgba(31,78,50,0.3); padding-bottom: 4px; word-break: break-word;
  transition: border-color 0.2s ease;
}
.contact__email:hover { border-bottom-color: var(--green); }
.contact__channels { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.contact__whatsapp {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--teal); font-size: 18px; font-weight: 600;
}
.contact__whatsapp:hover { color: var(--green); }
.contact__whatsapp-icon { display: inline-flex; width: 22px; height: 22px; color: #25D366; }
.contact__whatsapp-icon svg { width: 100%; height: 100%; }
.contact__whatsapp-tag { font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,26,26,0.5); }
.contact__tel { font-size: 15px; color: rgba(26,26,26,0.6); text-decoration: none; }
.contact__tel:hover { color: var(--teal); text-decoration: underline; }
.contact__reply { margin-top: 36px; font-size: 15px; color: rgba(26,26,26,0.6); }

.contact-form {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--card); border: 1px solid rgba(26,26,26,0.10); padding: clamp(24px, 3vw, 40px);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,26,26,0.6); }
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: inherit; font-size: 16px; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid rgba(26,26,26,0.3); padding: 10px 2px; border-radius: 0;
}
.contact-form textarea { resize: vertical; }
.contact-form .btn { margin-top: 8px; text-align: center; }
.form-status { font-size: 15px; color: var(--green); }
.form-status[hidden] { display: none; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--ink); color: var(--cream); padding: clamp(56px, 7vw, 88px) 24px 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; margin-bottom: 56px; }
.site-footer__brand-line { display: flex; align-items: baseline; gap: 10px; }
.site-footer__brand-name { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--cream); }
.site-footer__brand-by { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,244,238,0.5); }
.site-footer__tagline { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 17px; color: rgba(247,244,238,0.7); }
.site-footer__nav { display: flex; flex-direction: column; gap: 12px; }
.site-footer__link { text-decoration: none; color: rgba(247,244,238,0.75); font-size: 15px; transition: color 0.15s ease; }
.site-footer__link:hover { color: var(--cream); }
.site-footer__link--gold { color: var(--gold); margin-top: 6px; text-decoration: underline; text-decoration-color: rgba(201,162,39,0.5); }
.site-footer__link--gold:hover { color: var(--gold-light); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid rgba(247,244,238,0.15); padding-top: 28px;
}
.site-footer__legal { font-size: 13px; color: rgba(247,244,238,0.5); }
.site-footer__social {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid rgba(247,244,238,0.3); border-radius: 2px; color: rgba(247,244,238,0.8);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__social:hover { border-color: var(--cream); color: var(--cream); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
  .site-footer__top { flex-direction: column; gap: 36px; }
}
@media (max-width: 480px) {
  .hero__content { padding: 120px 20px 72px; }
  .hero__text { margin-left: 0; }
  .btn--primary { width: 100%; text-align: center; }
  .hero__actions { gap: 16px; }
}

/* =========================================================================
   CREATIVE ELEVATION + EXPERIENCES REBUILD  (appended)
   All vanilla; respects prefers-reduced-motion; no-JS safe.
   ========================================================================= */

/* ---------- Header logo ---------- */
:root { --header-h: 72px; }
.brand { gap: 13px; align-items: center; }   /* vertical-centre the "by Earth Abroad" next to the mark */
.brand__logo {
  height: 54px; width: auto; display: block;
  transition: height 0.25s ease;
}
.site-header.is-scrolled .brand__logo { height: 46px; }
.brand__by { position: relative; top: 1px; }  /* optical centre */
@media (max-width: 480px) { .brand__logo { height: 42px; } .brand__by { display: none; } }

/* ---------- Film grain (hero) ---------- */
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero__content { z-index: 2; }

/* ---------- Hero carousel: soft crossfade + Ken Burns on the active slide ---------- */
.hero__media { will-change: transform; }   /* parallax target (JS sets translateY) */
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform-origin: 58% 42%;
  transition: opacity 2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; z-index: 1; }
.js .hero__slide.is-active { animation: kenburns 8.5s ease-out both; }
@keyframes kenburns {
  0%   { transform: scale(1.03); }
  100% { transform: scale(1.16); }
}
.no-js .hero__slide:first-child { opacity: 1; }

/* ---------- Hero staggered line reveal ---------- */
.js .hero__text > .reveal { transition-duration: 0.9s; }
.js .hero__text > .reveal:nth-child(1) { transition-delay: 0.05s; }
.js .hero__text > .reveal:nth-child(2) { transition-delay: 0.18s; }
.js .hero__text > .reveal:nth-child(3) { transition-delay: 0.34s; }
.js .hero__text > .reveal:nth-child(4) { transition-delay: 0.46s; }
.js .hero__text > .reveal:nth-child(5) { transition-delay: 0.58s; }

/* ---------- Hero headline word mask (progressive; JS wraps words) ---------- */
.hero__title.is-split { opacity: 1 !important; transform: none !important; }
.hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__title .word > i {
  display: inline-block; font-style: inherit; transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__title.is-visible .word > i { transform: translateY(0); }

/* ---------- Hero scroll cue ---------- */
.hero__scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(247,244,238,0.5);
  border-radius: 14px; z-index: 2; display: block;
}
.hero__scroll-cue span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; border-radius: 2px;
  background: rgba(247,244,238,0.85); transform: translateX(-50%);
}
.js .hero__scroll-cue span { animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 12px); } }
@media (max-width: 480px) { .hero__scroll-cue { display: none; } }

/* ---------- Stagger utility for grids ---------- */
.js .stagger > .reveal:nth-child(1) { transition-delay: 0.0s; }
.js .stagger > .reveal:nth-child(2) { transition-delay: 0.09s; }
.js .stagger > .reveal:nth-child(3) { transition-delay: 0.18s; }
.js .stagger > .reveal:nth-child(4) { transition-delay: 0.27s; }
.js .stagger > .reveal:nth-child(5) { transition-delay: 0.36s; }
.js .stagger > .reveal:nth-child(6) { transition-delay: 0.45s; }

/* ---------- Image reveal + hover zoom ---------- */
.img-mask { overflow: hidden; position: relative; }
.img-mask img { transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.js .reveal .img-mask img { transform: scale(1.1); }
.js .reveal.is-visible .img-mask img { transform: scale(1); }

/* ---------- Card hover lifts ---------- */
.sig-card, .pathway {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.sig-card:hover, .pathway:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -26px rgba(26,26,26,0.5);
}

/* =========================================================================
   SECTION 4 · EXPERIENCES (THE WORK)
   ========================================================================= */
.standfirst {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.5; color: rgba(26,26,26,0.7);
  max-width: 620px; margin-bottom: clamp(48px, 6vw, 76px);
}

/* Featured region + tier star (reuse .feature*) */
.feature__region {
  font-size: 14px; letter-spacing: 0.06em; color: rgba(26,26,26,0.55);
  margin-bottom: 20px;
}
.feature__tier { display: inline-flex; align-items: center; gap: 7px; }
.tier-star { color: var(--gold); font-size: 14px; }
.feature__tier--gold { color: var(--green); }

/* Portfolio grid */
.portfolio { margin-top: clamp(72px, 9vw, 120px); }
.portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px);
}
.pcard {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid rgba(26,26,26,0.10); overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(26,26,26,0.55); }
.pcard__media { aspect-ratio: 4 / 3; position: relative; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard:hover .img-mask img { transform: scale(1.06); }
.pcard__chip {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 9px; border-radius: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.pcard__chip svg { width: 13px; height: 13px; }
.pcard__chip--gold { background: rgba(31,78,50,0.92); }
.pcard__chip--gold svg { color: var(--gold-light); }
.pcard__chip--teal { background: rgba(15,82,87,0.92); }
.pcard__chip--rust { background: rgba(154,59,38,0.94); }
.pcard__waitlist {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 2px;
  background: rgba(26,26,26,0.62); color: var(--cream);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.pcard__title {
  font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.2;
  color: var(--ink); margin-bottom: 8px;
}
.pcard__region { font-size: 13px; letter-spacing: 0.04em; color: rgba(26,26,26,0.5); margin-bottom: 14px; }
.pcard__hook { flex: 1; font-size: 15.5px; line-height: 1.6; color: rgba(26,26,26,0.8); margin-bottom: 22px; }
.pcard--rare { border-top: 3px solid var(--rust); }

.link-arrow--sm { font-size: 15px; }
.link-arrow--rust { color: var(--rust); border-bottom-color: rgba(154,59,38,0.4); }

.portfolio__closing {
  margin: clamp(48px, 6vw, 72px) auto 0; max-width: 720px; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--green);
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---------- Count-up stat: hold layout width ---------- */
.stat__value { font-variant-numeric: tabular-nums; }

/* ---------- Honeypot ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Subtle paper texture on cream sections ---------- */
.section, .parent-band { position: relative; }
.section-title, .standfirst, .kicker, .cards-grid, .feature, .portfolio, .founder, .contact-grid { position: relative; z-index: 1; }

/* ---------- Reduced motion: kill the cinematic layer ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__media img { animation: none; transform: none; }
  .hero__title .word > i { transform: none !important; transition: none; }
  .js .reveal .img-mask img { transform: none; }
  .hero__scroll-cue span { animation: none; }
  .sig-card:hover, .pathway:hover, .pcard:hover { transform: none; }
}

/* =========================================================================
   ELEVATION v2 — more assertive + the pieces skipped in v1  (appended)
   ========================================================================= */

/* ---------- Stronger fade-up reveal (bigger travel, softer easing) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.9s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Paper / print grain across the whole site (very subtle) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- Draw-in accent rule under every section title ---------- */
.section-title { position: relative; }
.section-title::after {
  content: ""; display: block; height: 3px; width: 0; margin-top: 20px;
  background: linear-gradient(90deg, var(--gold), var(--rust));
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.js .section-title.reveal:not(.is-visible)::after { width: 0; }
.section-title.is-visible::after,
.no-js .section-title::after { width: 56px; }

/* ---------- Springy pop-in for the tier icons + pathway icons ---------- */
.js .reveal .sig-icon,
.js .reveal .pathway__icon {
  transform: scale(0.4) rotate(-14deg); opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.5s ease 0.15s;
}
.js .reveal.is-visible .sig-icon,
.js .reveal.is-visible .pathway__icon { transform: none; opacity: 1; }

/* ---------- Draw-in underline on inline arrow links (hover) ---------- */
.link-arrow { position: relative; border-bottom-color: transparent !important; }
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  transform: scaleX(0); transform-origin: left; background: currentColor;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }

/* ---------- Section-title & standfirst above the paper texture ---------- */
.hero, .credibility, .site-footer { position: relative; z-index: 1; }

/* ---------- Reduced-motion: disable the new motion too ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; opacity: 1; transition: none; }
  .section-title::after { width: 56px; transition: none; }
  .js .reveal .sig-icon, .js .reveal .pathway__icon { transform: none; opacity: 1; transition: none; }
  .link-arrow { border-bottom-color: rgba(154,59,38,0.4) !important; }
  .link-arrow::after { display: none; }
}

/* =========================================================================
   UPGRADE v3 — carousel support, statement band, partner chip, spacing
   ========================================================================= */

/* ---------- Slightly tighter vertical rhythm (less plain white space) ---------- */
:root { --section-pad: clamp(58px, 7.5vw, 108px); }
.section-title { margin-bottom: clamp(34px, 4.2vw, 48px); }

/* ---------- Cinematic full-bleed statement band ---------- */
.statement {
  position: relative; overflow: hidden; background: var(--ink);
  min-height: 60vh; display: flex; align-items: center;
}
.statement__media { position: absolute; left: 0; right: 0; top: -9%; height: 118%; will-change: transform; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
.statement__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,22,18,0.9) 0%, rgba(18,22,18,0.62) 55%, rgba(18,22,18,0.42) 100%);
}
.statement__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.statement__inner { position: relative; z-index: 2; padding: clamp(64px, 9vw, 112px) 24px; }
.statement__quote {
  max-width: 800px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 3.3vw, 40px); line-height: 1.34; color: var(--cream);
  text-wrap: balance;
}
.statement__quote em { font-style: italic; color: var(--gold-light); }
.statement__attr {
  margin-top: 26px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ---------- Waari partner logo chip (dark logo on the green band) ---------- */
.credibility__lede { margin-bottom: 30px; }
.credibility__partner {
  display: inline-block; margin: 0 0 40px; background: var(--cream);
  padding: 15px 26px; border-radius: 8px; line-height: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.credibility__partner img { height: 44px; width: auto; display: block; }
.credibility__partner:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(0,0,0,0.55); }

/* ---------- Earth Abroad logo (parent band) ---------- */
.parent-band__logo { object-fit: contain; }

/* ---------- Form error state ---------- */
.form-error { font-size: 15px; color: var(--rust); }
.form-error[hidden] { display: none; }
.contact-form.is-sending .btn { opacity: 0.6; pointer-events: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__slide.is-active { animation: none; transform: none; }
  .statement__media img { transform: scale(1.04); }
}

/* ---------- Conditional form groups ---------- */
.cond { display: flex; flex-direction: column; gap: 18px; }
.cond[hidden] { display: none; }
.js .cond:not([hidden]) { animation: condIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes condIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.field__opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(26,26,26,0.4); }
@media (prefers-reduced-motion: reduce) { .js .cond:not([hidden]) { animation: none; } }

/* =========================================================================
   UPGRADE v5 — "Liquid glass" on header + tiles
   Keeps each surface's existing cream tone; adds translucency + backdrop
   blur + a specular edge. Soft brand-colour glows sit behind the tile grids
   so the frosted glass refracts colour (the macOS-Tahoe look).
   ========================================================================= */

/* Soft brand-colour glows behind the tile grids (what the glass refracts) */
#signatures {
  background:
    radial-gradient(55% 45% at 12% 16%, rgba(31,78,50,0.09), transparent 62%),
    radial-gradient(50% 45% at 88% 84%, rgba(201,162,39,0.08), transparent 62%),
    var(--bg);
}
#who.section--alt {
  background:
    radial-gradient(52% 45% at 88% 14%, rgba(15,82,87,0.09), transparent 62%),
    radial-gradient(50% 48% at 8% 88%, rgba(154,59,38,0.07), transparent 62%),
    var(--bg-alt);
}
#experiences {
  background:
    radial-gradient(45% 40% at 92% 6%, rgba(201,162,39,0.07), transparent 60%),
    radial-gradient(48% 42% at 6% 42%, rgba(15,82,87,0.07), transparent 60%),
    radial-gradient(50% 40% at 82% 96%, rgba(154,59,38,0.07), transparent 60%),
    var(--bg);
}
#contact {
  background:
    radial-gradient(45% 45% at 90% 20%, rgba(31,78,50,0.07), transparent 62%),
    var(--bg);
}

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {

  /* ---- Header: frosted glass ---- */
  .site-header {
    background: linear-gradient(180deg, rgba(247,244,238,0.70), rgba(247,244,238,0.52));
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.40);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .site-header.is-scrolled {
    background: linear-gradient(180deg, rgba(247,244,238,0.82), rgba(247,244,238,0.62));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 34px -18px rgba(26,26,26,0.45);
  }

  /* ---- Tiles: liquid glass (tint drawn from each tile's own cream) ---- */
  .sig-card, .pathway, .pcard, .contact-form {
    background-color: rgba(252,250,245,0.50);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.50);
    box-shadow: 0 14px 36px -22px rgba(26,26,26,0.42), inset 0 1px 0 rgba(255,255,255,0.65);
  }
  .section--alt .pathway { background-color: rgba(247,244,238,0.42); }

  /* Re-assert the coloured top accents over the glass border */
  .sig-card { border-top-width: 3px; }
  .sig-card--one   { border-top-color: var(--green); }
  .sig-card--two   { border-top-color: var(--teal); }
  .sig-card--three { border-top-color: var(--rust); }
  .pcard--rare     { border-top-width: 3px; border-top-color: var(--rust); }

  /* Specular sheen on the text tiles (image cards keep their photo clean) */
  .sig-card, .pathway { position: relative; }
  .sig-card > *, .pathway > * { position: relative; z-index: 1; }
  .sig-card::after, .pathway::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 44%);
    opacity: 0.7;
  }

  /* Keep the form inputs readable on glass */
  .contact-form input, .contact-form select, .contact-form textarea {
    border-bottom-color: rgba(26,26,26,0.28);
  }
}

/* =========================================================================
   UPGRADE v6 — stronger glass + performance tuning
   ========================================================================= */

/* PERF: drop the fixed, blended paper-grain overlay — a full-viewport
   mix-blend recomposite on every scroll frame was the main source of lag.
   The colour glows + glass now carry the texture. */
body::after { display: none; }

/* PERF: don't keep `will-change` pinned on every reveal element for the whole
   session (memory + compositor churn). Transitions still run fine without it. */
.js .reveal { will-change: auto; }

/* Stronger brand-colour glows behind the tiles → more visible glass refraction */
#signatures {
  background:
    radial-gradient(55% 45% at 12% 16%, rgba(31,78,50,0.15), transparent 60%),
    radial-gradient(50% 45% at 88% 84%, rgba(201,162,39,0.13), transparent 60%),
    var(--bg);
}
#who.section--alt {
  background:
    radial-gradient(52% 45% at 88% 14%, rgba(15,82,87,0.15), transparent 60%),
    radial-gradient(50% 48% at 8% 88%, rgba(154,59,38,0.12), transparent 60%),
    var(--bg-alt);
}
#experiences {
  background:
    radial-gradient(45% 40% at 92% 6%, rgba(201,162,39,0.12), transparent 58%),
    radial-gradient(48% 42% at 6% 42%, rgba(15,82,87,0.12), transparent 58%),
    radial-gradient(50% 40% at 82% 96%, rgba(154,59,38,0.12), transparent 58%),
    var(--bg);
}
#contact {
  background:
    radial-gradient(45% 45% at 90% 20%, rgba(31,78,50,0.12), transparent 60%),
    radial-gradient(40% 40% at 5% 80%, rgba(201,162,39,0.09), transparent 60%),
    var(--bg);
}

/* PERF: the image cards don't need a live backdrop-filter (the photo covers
   most of the tile) — keep them crisp and cheap. */
.pcard {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-color: var(--card);
  border: 1px solid rgba(26,26,26,0.10);
  box-shadow: none;
}
.pcard--rare { border-top: 3px solid var(--rust); }

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  /* Stronger, more see-through, cheaper glass on the plain-background tiles */
  .sig-card, .pathway, .contact-form {
    background-color: rgba(252,250,245,0.40);
    -webkit-backdrop-filter: blur(12px) saturate(1.75);
    backdrop-filter: blur(12px) saturate(1.75);
    border: 1px solid rgba(255,255,255,0.62);
    box-shadow:
      0 18px 44px -24px rgba(26,26,26,0.45),
      inset 0 1px 0 rgba(255,255,255,0.85),
      inset 0 -1px 0 rgba(26,26,26,0.05);
  }
  .section--alt .pathway { background-color: rgba(247,244,238,0.34); }

  /* Brighter specular sheen (glass reflection) */
  .sig-card::after, .pathway::after {
    background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.06) 42%, rgba(255,255,255,0) 62%);
    opacity: 0.92;
  }

  /* Re-assert the tier top accents over the reset border */
  .sig-card { border-top-width: 3px; }
  .sig-card--one   { border-top-color: var(--green); }
  .sig-card--two   { border-top-color: var(--teal); }
  .sig-card--three { border-top-color: var(--rust); }
}

/* PERF: the little badge chips don't need a live blur (they sit on photos) */
.pcard__chip, .pcard__waitlist { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Footer admin-login placeholder text — inert for now, styled subtly */
.site-footer__admin {
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid rgba(247,244,238,0.25);
  font-size: 12px; letter-spacing: 0.05em; color: rgba(247,244,238,0.45);
}