/* =========================================================
   The Uni Concierge
   Header follows Rubeus: transparent over the hero, centred
   links, one accent pill. Everything below follows PathWise:
   warm cream ground, Caslon headings with an italic accent
   word, 6px radii, small body type, warm-dark bands.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Reduced motion removes travel, not feedback: colour, opacity and focus
   transitions stay so the interface still responds visibly. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pcard:hover, .btn:active { transform: none; }
  .form-success { animation: none; }
  .skip-link { transition: none; }
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — sampled from PathWise */
  --cream:      #fffdf9;   /* page ground */
  --cream-2:    #f7f3ec;   /* alternating section */
  --ink:        #2f2c25;   /* warm dark: bands, footer, dark cards */
  --ink-2:      #44413b;
  --line:       #e7e1d6;
  --line-dark:  rgba(255, 253, 249, .16);

  /* Type — muted clears 4.5:1 on cream, cream-2 and white */
  --text:       #222222;
  --text-muted: #6b665c;
  --on-dark:    #fffdf9;
  --on-dark-mut:#b8b2a5;

  /* Accent — the Rubeus header pill, used sparingly below it */
  --accent:     #e7a97a;
  --accent-ink: #2a2118;

  /* Focus ring: accent is too pale on cream, so light surfaces use ink */
  --focus: var(--ink);

  /* PathWise sets headings in Libre Caslon Condensed, which is Webflow-
     licensed; Libre Caslon Display is its free sibling, with the Text cut
     supplying the italic that Display has no companion for. */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-italic:  "Libre Caslon Text", Georgia, serif;
  --font-body:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --header-h: 92px;
  --shell:   1200px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 8vw, 6.5rem);
  --radius:  6px;          /* PathWise runs tight radii throughout */
  --radius-lg: 12px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Dark surfaces flip the focus ring to the accent, which reads clearly on ink */
.site-header, .hero, .cta, .site-footer, .pcard--dark {
  --focus: var(--accent);
}

/* ---------- Base ---------- */
body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: fixed;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 300;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: none; }

section[id] { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

/* ---------- Type primitives ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow--light { color: var(--on-dark-mut); }
.eyebrow--center { justify-content: center; }

/* Caslon headings, with one word set in italic — PathWise's signature */
.section__title, .hero__title, .cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}
.section__title em, .hero__title em, .cta__title em {
  font-family: var(--font-italic);
  font-style: italic;
}

.section__title { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.05rem); }

.section__lede {
  color: var(--text-muted);
  max-width: 52ch;
  font-size: .9375rem;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-pad-y: .8rem;
  --btn-pad-x: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { --btn-pad-y: .58rem; --btn-pad-x: 1.1rem; font-size: .8125rem; }
.btn--block { width: 100%; }

.btn--accent  { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #f0bc94; }

.btn--dark    { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: #423e35; }

.btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--on-dark); }

.btn--outline-light { border: 1px solid var(--line-dark); color: var(--on-dark); }
.btn--outline-light:hover { background: rgba(255, 253, 249, .1); border-color: rgba(255, 253, 249, .4); }

.btn--ghost-dark {
  color: var(--on-dark);
  border: 1px solid var(--line-dark);
  background: rgba(255, 253, 249, .05);
}
.btn--ghost-dark:hover { background: rgba(255, 253, 249, .12); }

/* Small arrow link used on cards */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: auto;
  padding-block-start: 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.link-arrow--light { color: var(--on-dark); }
.pcard:hover .link-arrow svg { transform: translateX(3px); }

/* =========================================================
   Header — Rubeus
   ========================================================= */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  color: var(--on-dark);
  border-block-end: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(47, 44, 37, .9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-block-end-color: var(--line-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  flex: none;
}
.brand__mark { display: inline-flex; color: currentColor; }
.brand__mark svg { width: 30px; height: 30px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-inline: auto;
  font-size: 1rem;
}
.site-nav a {
  position: relative;
  color: var(--on-dark-mut);
  padding-block: .35rem;
  transition: color .2s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .28s var(--ease);
}
.site-nav a:hover { color: var(--on-dark); }
.site-nav a:hover::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: .7rem; flex: none; }


.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
}
.nav-burger span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--on-dark);
  border-radius: 2px;
  transition: transform .28s var(--ease);
}
/* Half the gap plus half the bar, so the two bars meet as an X */
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.header-cta { --btn-pad-y: .72rem; --btn-pad-x: 1.35rem; font-size: .9375rem; }

/* =========================================================
   Hero — PathWise
   ========================================================= */
.hero {
  position: relative;
  padding-block-start: var(--header-h);
  background: var(--cream);
}

/* To use a different photograph, replace images/hero.jpg (and the smaller
   images/hero-sm.jpg served to narrow screens). The gradient underneath
   stays as the fallback while the photo loads. */
/* Fills the hero. It used to be a fixed height that stopped short of the
   hero's own bottom padding, which left a band of bare cream under the
   photograph that read as a gap. */
.hero__media {
  position: absolute;
  inset: 0;
  background-image:
    var(--hero-photo, url("images/hero.jpg")),
    linear-gradient(150deg, #4b4739 0%, #2f2c25 55%, #262319 100%);
  background-size: cover;
  background-position: center 32%;
}
@media (max-width: 48rem) {
  .hero__media { background-image: var(--hero-photo, url("images/hero-sm.jpg")), linear-gradient(150deg, #4b4739, #262319); }
}

/* Two scrims: a vertical one to seat the headline and footer edge, and a
   directional one so the left column stays legible over a busy photo. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(31, 29, 21, .82) 0%, rgba(31, 29, 21, .55) 34%, rgba(31, 29, 21, .12) 62%),
    linear-gradient(180deg, rgba(31, 29, 21, .55) 0%, rgba(31, 29, 21, .2) 38%, rgba(31, 29, 21, .7) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* Both columns sit toward the bottom of the row, level with each other.
     Safe to run this low now that the photo fills the whole hero rather
     than stopping at a fixed height above it. */
  align-items: end;
  min-height: clamp(30rem, 62vh, 40rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* A container so the headline can be sized against the column it sits in
   rather than the viewport — that is what keeps it to two lines. */
.hero__lead { color: var(--on-dark); container-type: inline-size; }
/* Small text over a photograph needs full strength, not the muted tone
   that works on flat dark bands. */
.hero .eyebrow--light { color: var(--on-dark); }
.hero .eyebrow--light::before { opacity: .8; }
/* "University and scholarship" measures 9.66em, so 10cqw keeps it inside
   the column with a little slack. Below the floor it wraps again, which
   is the right behaviour on very narrow phones. */
.hero__title {
  margin-block-start: 1rem;
  font-size: clamp(2.15rem, 10cqw, 4.15rem);
  color: var(--on-dark);
}
.hero__line { display: block; }

/* The card lifts the supporting copy off the image, as PathWise does.
   Capped narrow so it stays a compact panel rather than a wide slab,
   and sits to the outer edge to leave the photograph visible. */
/* Narrowed to hug the text instead of leaving slack on the right after
   the shorter line and the buttons. The secondary button below is set
   tighter specifically so the pair still clears the container-query
   threshold and stays side by side rather than stacking. justify-self:
   end anchors the right edge to the column, so this narrower box keeps
   the same right position and only its left edge moves. */
.hero__card {
  width: 100%;
  max-width: 25rem;
  justify-self: end;
  padding: 1.75rem;
  container-type: inline-size;
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -34px rgba(38, 35, 25, .7);
}

/* This is now the only supporting line on the page, so it carries full
   text colour and reads as a statement rather than a caption. */
.hero__lede { font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
/* Side by side at every width above the mobile stack. The pair needs
   ~368px at default padding but the card drops to 358px of content
   around a 1000px viewport, so trim the padding to keep them on one row. */
.hero__cta { display: flex; flex-wrap: nowrap; gap: .5rem; margin-block-start: 1.5rem; }
.hero__cta .btn { --btn-pad-x: 1.1rem; }
/* Its label is shorter than the primary button's, so equal padding would
   read as proportionally roomier. .865rem keeps padding-to-text-width
   the same ratio as the primary button instead. */
.hero__cta .btn--outline { --btn-pad-x: .865rem; }

/* The pair now needs ~330px. A container query measures the content box,
   so this threshold excludes the card's padding. Below it they would
   overflow, so stack instead — keyed to the card, not the viewport,
   because the card narrows independently of screen width. */
@container (max-width: 20.5rem) {
  .hero__cta { flex-wrap: wrap; }
  .hero__cta .btn { width: 100%; }
}

/* =========================================================
   Sections
   ========================================================= */
.section { padding-block: var(--section); }
.section--alt { background: var(--cream-2); }

/* The first section sits tight under the hero — a full section's padding
   there reads as a gap rather than as rhythm. */
.hero + .section { padding-block-start: clamp(2.25rem, 4vw, 3.25rem); }

/* Two full sections back to back otherwise stack a full bottom padding
   and a full top padding into one oversized gap. Flat 32.5px each side
   for an exact 65px gap, rather than a viewport-scaled value. */
.section + .section { padding-block-start: 32.5px; }
.section:has(+ .section) { padding-block-end: 32.5px; }

.section__head { margin-block-end: clamp(2.25rem, 4vw, 3.25rem); }
.section__head .section__title { margin-block-start: .9rem; }
/* Centers just the heading line, independent of the eyebrow above it —
   used where the eyebrow stays left while the title is centered. Also
   swaps balance's near-equal line lengths for plain greedy wrapping,
   which fills the first line before breaking — these two headings read
   better with the longer line on top. */
.section__title--center { text-align: center; text-wrap: wrap; }

/* Both headings fit on one line above ~410-445px on their own; below
   that, greedy wrap leaves an orphaned last word ("you" / "most") alone
   on the second line. These forced breaks land one word earlier instead,
   only in the narrow band where a second line is unavoidable. */
.services-break, .why-break { display: none; }
@media (max-width: 25rem) { .services-break { display: inline; } }
@media (max-width: 27.5rem) { .why-break { display: inline; } }
.section__head--center { text-align: center; max-width: 44rem; margin-inline: auto; }
.section__head--center .section__lede { margin-inline: auto; margin-block-start: 1rem; }

/* ---------- Programs / service cards ---------- */
.programs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.pcard {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover {
  transform: translateY(-3px);
  border-color: #d9d0bf;
  box-shadow: 0 18px 38px -26px rgba(47, 44, 37, .5);
}

.pcard__media {
  position: relative;
  height: 9.5rem;
  margin-block-end: 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
}
/* Same treatment as the hero photo: a vignette plus a bottom-weighted
   scrim in the site's ink colour, so the two photos read as part of this
   page rather than as flat, unrelated stock crops. */
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A plain colour can't sit in a comma-separated background list, only
     gradients can — this flat-stop gradient is a uniform tint layer. */
  background:
    linear-gradient(rgba(38, 35, 25, .18), rgba(38, 35, 25, .18)),
    linear-gradient(180deg, rgba(38, 35, 25, .06) 30%, rgba(38, 35, 25, .52) 100%),
    radial-gradient(120% 100% at 50% 0%, transparent 30%, rgba(38, 35, 25, .4) 100%);
}
/* Distinct art per card so the row reads as two things, not one repeated */
/* cover crops each photo to the box's existing 9.5rem-tall, fluid-width
   shape while keeping the photo's own proportions intact — the box's
   size is unchanged, only its background content is. The photo layer is
   listed first (multiple backgrounds paint top-first), with the old
   gradient behind it as a fallback if the image fails to load. */
.pcard__media--a {
  background: url("images/card-university.jpg") center / cover,
              linear-gradient(145deg, #6f7560 0%, #3f4335 100%);
}
.pcard__media--b {
  background: url("images/card-saudi.jpg") center / cover,
              linear-gradient(145deg, #e7a97a 0%, #b4794b 55%, #6b4a2e 100%);
  filter: brightness(1.05);
}

.pcard__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
}
.pcard__body { margin-block-start: .6rem; font-size: .875rem; color: var(--text-muted); }

.pcard--dark {
  justify-content: center;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
.pcard--dark:hover { border-color: var(--ink); box-shadow: 0 20px 42px -24px rgba(38, 35, 25, .7); }
.pcard--dark .pcard__body { color: var(--on-dark-mut); }
.pcard--dark .link-arrow { margin-block-start: 0; }

/* ---------- Reasons ---------- */
.reasons {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
  text-align: center;
}
/* Drops the middle card below the other two so the row isn't a flat,
   uniform line — deliberate contrast, only once there's a row to offset
   within (auto-fit collapses to one column below that). */
@media (min-width: 48rem) {
  .reason--offset { margin-block-start: clamp(2rem, 6vw, 3.5rem); }
}
.reason__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-inline: auto;
  margin-block-end: 1.1rem;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
}
.reason__icon svg { width: 22px; height: 22px; }
.reason__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
.reason__body { margin-block-start: .6rem; font-size: .875rem; color: var(--text-muted); }

/* =========================================================
   Contact
   ========================================================= */
.contact {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.contact__intro .section__title { margin-block-start: .9rem; }
.contact__intro .section__lede { margin-block-start: 1rem; }

.contact__points { margin-block-start: 1.75rem; display: grid; gap: .7rem; font-size: .875rem; }
.contact__points li { display: flex; align-items: flex-start; gap: .65rem; }
.contact__points li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-block-start: .15em;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2118' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / .65rem no-repeat;
}

.contact__formwrap {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form { display: grid; gap: 1.1rem; }
.hp { position: absolute; left: -9999px; }

.field { display: grid; gap: .4rem; }
.field label { font-size: .8125rem; font-weight: 500; }
.field__hint { font-size: .75rem; color: var(--text-muted); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .75rem .9rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .875rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #9d968a; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(47, 44, 37, .12);
}
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: #b0574c; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-inline-end: 2.4rem; cursor: pointer; }
.select-wrap select:invalid { color: #9d968a; }
.select-wrap select option { color: var(--text); }
.select-wrap__arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  width: .45rem;
  height: .45rem;
  margin-block-start: -.32rem;
  border-inline-end: 1.5px solid var(--text-muted);
  border-block-end: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.form__note { font-size: .75rem; color: var(--text-muted); text-align: center; }
.form__error {
  padding: .7rem .9rem;
  border-radius: var(--radius);
  background: #f7e9e6;
  border: 1px solid #e0c2bc;
  color: #8a3f34;
  font-size: .8125rem;
}
/* The surrounding text and links share one colour here, so the link
   needs its own affordance to read as clickable. */
.form__error a { text-decoration: underline; text-underline-offset: 2px; }

.form-success[hidden] { display: none; }
.form-success {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .4rem;
  padding-block: clamp(2rem, 5vw, 3.25rem);
  animation: rise .5s var(--ease) both;
}
.form-success__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-block-end: .5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.form-success h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.form-success p { font-size: .875rem; color: var(--text-muted); max-width: 30ch; }

/* =========================================================
   Closing CTA
   ========================================================= */
.cta { background: var(--ink); color: var(--on-dark); padding-block: clamp(2.5rem, 5vw, 4rem); }
.cta__inner { text-align: center; max-width: 44rem; margin-inline: auto; margin-block-start: .9rem; }
.cta__title {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.05rem);
  color: var(--on-dark);
}
.cta__lede { margin-block-start: 1rem; font-size: .9375rem; color: var(--on-dark-mut); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-block-start: 1.75rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--ink-2);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.site-footer__top {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-block-end: clamp(2.25rem, 4.5vw, 3rem);
  border-block-end: 1px solid var(--line-dark);
}
@media (min-width: 52rem) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
.site-footer__tagline {
  margin-block-start: .9rem;
  max-width: 32ch;
  font-size: .875rem;
  color: var(--on-dark-mut);
}

.site-footer__cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
/* Tight gap plus link padding keeps the rhythm while giving each
   footer link a comfortable tap target. */
.site-footer__col { display: grid; align-content: start; gap: .1rem; }
.site-footer__col h4 {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-block-end: .5rem;
}
.site-footer__col a {
  padding-block: .45rem;
  font-size: .875rem;
  color: var(--on-dark-mut);
  justify-self: start;
  transition: color .2s var(--ease);
}
.site-footer__col a:hover { color: var(--accent); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: 1.75rem;
  font-size: .75rem;
  color: var(--on-dark-mut);
}

/* =========================================================
   Motion
   ========================================================= */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Scoped to .js so that with scripting blocked the page renders fully
   rather than staying invisible at opacity 0. .reveal fires on scroll
   into view; .reveal-onload fires immediately after page load instead,
   regardless of whether it's in the viewport yet. */
.js .reveal, .js .reveal-onload {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-in, .js .reveal-onload.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-onload { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 60rem) {
  .header-cta { display: none; }
  .nav-burger { display: flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(47, 44, 37, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--line-dark);
    font-size: 1rem;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path .35s var(--ease), opacity .25s var(--ease);
  }
  .site-nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .site-nav a { padding-block: .9rem; border-block-end: 1px solid var(--line-dark); }
  .site-nav a::after { display: none; }
}

@media (max-width: 40rem) {
  /* On phones the photo stays a fixed band at the top so the card can
     overlap its lower edge onto the cream. */
  .hero__media { inset-block-end: auto; height: 26rem; }
  .hero__inner { min-height: 0; padding-block-start: 4.5rem; }
  /* At 16px, "…Middle East, from" needs ~339px to keep "from" on the
     first line with "East," — more than the card's padding alone can
     give back, so the hero's own shell gutter is trimmed too. */
  .hero .shell { padding-inline: .75rem; }
  .hero__card { padding: 1.5rem .75rem; }
  .hero__lede { font-size: 1rem; text-align: center; }
  /* The desktop copy forces a break after "East," — drop it here so
     "from" can join that line now that there's room for it, and the
     text wraps on its own instead. */
  .hero__lede-break { display: none; }
}

@media (max-width: 30rem) {
  .hero__cta .btn, .cta__actions .btn { width: 100%; }
}