/* =============================================================================
   CMD Tourism & Trade: shared design system
   One stylesheet for every page. Do not invent page-specific files.

   TOKENS
   --ink --ink-2 --orange --amber --yellow --cream --sand --line --muted --white
   --grad (amber → orange)  --shadow  --radius / --radius-sm / --radius-lg
   --max 1240px  --header-h 84px  --font-h  --font-b

   LAYOUT
   .container            centered 1240px column
   .section              112px / 72px vertical rhythm
   .section--white|sand|ink|cream
   .section-head         eyebrow + heading + intro (add .center to center)
   .split                equal 2-col, stacks ≤860px
   .split--top           align start
   .split--42 / --58     2fr/3fr and 7/5-ish splits
   .cluster              flex wrap row with gap
   .stack                vertical stack with gap

   TYPE
   .eyebrow              uppercase orange label + 28px gradient rule (::before)
   .eyebrow--light       yellow label for dark surfaces
   .hl                   amber→orange gradient text (hero highlight word)
   .lead                 larger intro paragraph
   .muted                secondary colour
   .kicker               small orange uppercase (cards, not the ruled eyebrow)

   ACTIONS
   .btn .btn--primary    orange fill, ink text
   .btn--outline         ink outline on light
   .btn--outline-light   white outline on dark / photos
   .btn--dark            ink fill, white text (use on the orange CTA panel)
   .btn--outline-dark    ink outline (use on the orange CTA panel)
   .btn-row              wrapping button row
   .link-arrow           text link + arrow icon (svg.icon inside)

   ICONS
   svg.icon              24px, stroke 1.75, currentColor (pair with .icon--sm 18px)
   .icon-tile            cream rounded square, orange stroke
   .icon-tile--sm / --lg

   CHROME
   .util-bar .util-bar__inner .util-bar__meta .util-bar__social
   .site-header (.is-scrolled adds shadow, set by JS)
   .site-header__inner
   .brand .brand__mark .brand__words .brand__name .brand__sub
   .brand--on-dark       white wordmark; mark sits on a white plate
   .nav-toggle           hamburger, hidden ≥861px
   .site-nav .is-open    mobile drawer (JS). Without .js on <html>, nav stays visible.
   .header-cta           desktop “Partner with us”
   .nav-cta              same button inside the drawer (mobile only)
   a.is-active           current nav item

   HOME HERO
   .hero .hero-sky .hero__veil .hero__layout .hero__copy
   .trust-row            icon + short fact list
   .next-event           glassy card
   .next-event__kicker .next-event__title .next-event__meta .next-event__theme

   INNER PAGE HERO  (about, services, destinations, events, gallery, news, contact,
                     food tour). foodtour-2026 uses .page-hero--tall (560px)
                     and .page-hero__overlay--warm
   .page-hero .page-hero__media .page-hero__overlay .page-hero__inner
   .breadcrumb

   STATS
   .stats-band           pulls the card up over the hero
   .stats .stat .stat__num .stat__suffix .stat__label

   MEDIA
   .media                rounded frame; img uses object-fit: cover
   .media--16x10 .media--4x3 .media--1x1 .media--3x2 .media--3x4
   .media--native        intrinsic size, max-width 100% (required for
                         foodtour-group.jpg: never full-bleed that file)
   .is-dim               muted photo for placeholder cards

   ABOUT
   .about-grid .collage .collage__main .collage__accent .collage__float
   .mini-grid .mini-card
   .vm-grid .vm-card .vm-card--ink .vm-card--cream     vision / mission
   .leader-grid .leader-card .portrait
   .team-placeholder

   SERVICES
   .service-grid         4-col (8th tile .service-card--cta is the dark closer)
   .service-card .service-card__top .service-card__num
   .service-index        sticky pill row
   .service-index__list .pill
   .service-block .service-block--flip .service-block__media .service-block__body
   .points               checklist (li > svg.icon + text)

   EVENTS
   .feature-layout .feature-card .feature-card__bg .feature-card__body
   .feature-side .side-card .side-card__media .side-card__body
   .tag .tag--on-dark
   .event-row .date-block .date-block__day .date-block__mon
   .event-wide .event-wide__media .event-wide__body
   .programme-grid
   .info-bar .info-bar__item .info-bar__label
   .expect-grid .expect-card
   .benefit-list
   .reg-chips .reg-chip .reg-chip--light
   .package-grid
   .past-strip
   .signup-panel .signup-form          event alerts + newsletter (UI only)

   PROCESS (dark sections)
   .process .steps .step .step__num .process__media

   TIMELINE
   .timeline .timeline__item .timeline__dot .timeline__year

   PARTNERS / DESTINATIONS
   .partner-grid .partner-tile
   .logo-wall .logo-slots .logo-slot
   .dest-teaser .dest-points
   .country-grid .country-chip .country-chip__region
   .region-block
   .country-cards .country-card .country-card__head .country-card__initial
   .tint-amber .tint-orange .tint-ink .tint-sand
   .badge .badge--solid
   .map-placeholder .map-panel
   .more-card

   GALLERY
   .bento .bento__item .bento__cap          home strip
   .filters .chip .chip.is-active           filter row
   .gallery-grid .g-tile .g-tile--wide .g-tile--tall .g-cap
   [data-category] items. JS adds .is-hidden. Do not ship that class in HTML.
   Suggested categories: forums | delegates | food  (chip data-filter="all"|those)

   NEWS
   .article-feature .article-feature__media .article-feature__body
   .insight-grid .news-grid
   .card .card__media .card__body .card--placeholder

   CONTACT
   .desk-grid .desk-card
   .contact-layout
   .form .form-grid .field .field--full .check
   .info-panel
   .map-panel                        map panel; dashed only when empty

   PLACEHOLDERS
   .ph                               dashed, muted inline placeholder
   .ph--block                        block version
   .placeholder                      dashed panel
   .placeholder-card                 dashed card (team, past event, packages)

   CTA + FOOTER
   .cta-band .cta-panel              omit the whole band on contact.html
   .site-footer .footer-grid .footer-title .footer-links
   .footer-brand .footer-social .footer-office .footer-bottom

   UTILITIES
   .sr-only .skip-link .center .center-row .mt-sm .mt-md .mt-lg
   .section--tight-top       less padding under the overlapping stats band
   .card__media--contain     letterbox (required for foodtour-group.jpg)
   .side-card__media--native intrinsic photo, never a cover crop
   .brand__plate             white plate behind the mark in .brand--on-dark

   JS HOOKS (assets/js/main.js)
   html.js                 added by a one-liner in <head> so mobile nav can hide
   .site-header.is-scrolled
   .site-nav.is-open + .nav-toggle[aria-expanded]
   .chip.is-active + .is-hidden on [data-category]

   BREAKPOINTS: 1100px, 860px, 560px
   ============================================================================= */

:root {
  --ink: #0f0f12;
  --ink-2: #1b1b21;
  --orange: #f28c00;
  --amber: #f5a800;
  --yellow: #ffc400;
  --cream: #fff7e8;
  --sand: #f7f3ec;
  --line: #e8e2d6;
  --muted: #5e5e6a;
  --white: #ffffff;
  --grad: linear-gradient(120deg, var(--amber), var(--orange));
  --grad-hot: linear-gradient(110deg, var(--yellow), var(--amber) 42%, var(--orange));
  --shadow: 0 20px 50px -24px rgba(15, 15, 18, 0.25);
  --shadow-sm: 0 12px 32px -20px rgba(15, 15, 18, 0.35);
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --max: 1240px;
  --header-h: 84px;
  --font-h: "Plus Jakarta Sans", sans-serif;
  --font-b: "Inter", system-ui, sans-serif;
  --pad: 112px;
}

/* ----- Reset & base ----- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

button, input, select, textarea { font-family: inherit; color: inherit; }

h1, h2, h3, h4, p { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--font-h);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.45em;
  color: var(--ink);
}

h1 { font-size: clamp(40px, 4.6vw, 72px); font-weight: 800; }
h2 { font-size: clamp(32px, 2vw + 18px, 44px); }
h3 { font-size: clamp(20px, 1.2vw + 12px, 26px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }

a { color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

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

.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: 16px;
  top: -48px;
  z-index: 80;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { top: 12px; }

/* ----- Layout ----- */

.container {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

.section { padding: var(--pad) 0; }
.section--white { background: var(--white); }
.section--sand { background: var(--sand); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, 0.78); }
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--white); }

.section-head { max-width: 740px; margin-bottom: 40px; }
.section-head p { color: var(--muted); margin: 0; }
.section--ink .section-head p { color: rgba(255, 255, 255, 0.75); }
.center { text-align: center; }
.center.section-head,
.section-head.center { margin-inline: auto; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split--top { align-items: start; }
.split--42 { grid-template-columns: 0.9fr 1.1fr; }
.split--58 { grid-template-columns: 1.15fr 0.85fr; }

.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack { display: grid; gap: 16px; }

.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.center-row { display: flex; justify-content: center; margin-top: 28px; }

.section--tight-top { padding-top: 64px; }

/* ----- Type ----- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: var(--grad-hot);
  flex: none;
}

.eyebrow--light { color: var(--yellow); }

.hl {
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.muted { color: var(--muted); }

.kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ----- Buttons & links ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: #ff9d1a; }

.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.75); color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--ink); }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #2a2a32; }

.btn--outline-dark { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline-dark:hover { background: var(--ink); color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
}

.link-arrow .icon,
.link-arrow .arrow { display: inline-block; transition: transform 0.2s ease; }
.link-arrow:hover .icon,
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ----- Icons ----- */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 18px; height: 18px; }

.icon-tile {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 14px;
  color: var(--orange);
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--grad) border-box;
  border: 1.5px solid transparent;
}

.icon-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-tile--sm .icon { width: 20px; height: 20px; }
.icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }

/* ----- Utility bar ----- */

.util-bar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.4;
}

.util-bar__inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.util-bar a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.util-bar a:hover { color: var(--white); }

.util-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.util-bar__meta a,
.util-bar__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.util-bar__social { display: flex; align-items: center; gap: 4px; }

.util-bar__social a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.util-bar__social a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }

/* ----- Header ----- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(15, 15, 18, 0.35);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand__plate { display: grid; line-height: 0; }
.brand__mark { height: 44px; width: auto; }

.brand__words { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.brand__sub {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.brand--on-dark .brand__name { color: var(--white); }
.brand--on-dark .brand__sub { color: rgba(255, 255, 255, 0.75); }

.brand--on-dark .brand__plate {
  background: var(--white);
  border-radius: 12px;
  padding: 4px;
}

.brand--on-dark .brand__mark { height: 40px; }

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav a:hover { background: var(--sand); }

.site-nav a.is-active { color: var(--orange); }

.header-cta { flex: none; }

/* Beats `.site-nav a` (which also matches this control). */
.site-nav .nav-cta { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ----- Home hero ----- */

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: stretch;
  color: var(--white);
  background: #050505;
  overflow: hidden;
}

/* Home hero sky. Photo URL comes from content (pages.home.sections.hero.image)
   via an inline background-image so admin replace/remove works. Gradient-only
   fallback when no photo is set. Keyframes match the live planeFly animation. */
.hero-sky {
  position: absolute;
  inset: -12% -18%;
  z-index: 0;
  opacity: 0.72;
  background:
    linear-gradient(120deg, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0.22) 46%, rgba(242, 140, 0, 0.16) 100%);
  background-size: 130% auto;
  background-position: 40% 50%;
  background-repeat: no-repeat;
  animation: planeFly 22s ease-in-out infinite;
  will-change: transform, background-position, opacity;
  pointer-events: none;
  filter: saturate(1.08) contrast(1.06);
}

@keyframes planeFly {
  0% {
    transform: scale(1.08) translate3d(-4%, 2%, 0) rotate(-0.6deg);
    background-position: 28% 55%;
    opacity: 0.62;
  }
  25% {
    transform: scale(1.14) translate3d(1%, -1%, 0) rotate(0.4deg);
    background-position: 48% 45%;
    opacity: 0.78;
  }
  50% {
    transform: scale(1.18) translate3d(5%, 1.5%, 0) rotate(0.8deg);
    background-position: 68% 48%;
    opacity: 0.7;
  }
  75% {
    transform: scale(1.12) translate3d(2%, -2%, 0) rotate(-0.3deg);
    background-position: 52% 40%;
    opacity: 0.8;
  }
  100% {
    transform: scale(1.08) translate3d(-4%, 2%, 0) rotate(-0.6deg);
    background-position: 28% 55%;
    opacity: 0.62;
  }
}

/* Left-weighted ink scrim so the headline stays readable.
   The right side stays open for the winglet behind the next-event card. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0) 24%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.78) 0%, rgba(5, 5, 5, 0.46) 30%, rgba(5, 5, 5, 0.12) 52%, rgba(5, 5, 5, 0) 70%);
}

.hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: end;
  min-height: 760px;
  padding: 72px 0 128px;
}

.hero__copy { max-width: 820px; }
.hero h1 {
  color: var(--white);
  margin-bottom: 16px;
  /* Wide enough for three lines: two even lines, then the highlight. */
  max-width: 11.15em;
}

.hero .lead {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(17px, 1.1vw, 19px);
  max-width: 58ch;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  list-style: none;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.trust-row .icon { color: var(--yellow); width: 20px; height: 20px; }

.next-event {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 24px 60px -28px rgba(15, 15, 18, 0.55);
  backdrop-filter: blur(14px);
}

.next-event__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.next-event__title {
  margin: 8px 0 6px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.next-event__meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}

.next-event__theme {
  margin: 0 0 16px;
  font-style: italic;
  color: var(--ink-2);
}

.next-event .btn { width: 100%; }

/* ----- Inner page hero ----- */

.page-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
}

.page-hero--tall { min-height: 560px; }

.page-hero__media { position: absolute; inset: 0; }

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 18, 0.25) 0%, rgba(15, 15, 18, 0.82) 100%);
}

.page-hero__overlay--warm {
  background: linear-gradient(105deg, rgba(62, 28, 0, 0.88) 0%, rgba(15, 15, 18, 0.55) 72%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: min(800px, 100%);
  padding: 128px 0 52px;
}

.page-hero h1 { color: var(--white); font-size: clamp(40px, 4vw, 64px); }

.page-hero .lead { color: rgba(255, 255, 255, 0.86); margin: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.breadcrumb a { color: var(--white); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ----- Stats ----- */

.stats-band {
  position: relative;
  z-index: 3;
  margin-top: -72px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.stat {
  padding: 28px 22px;
  text-align: center;
}

.stat + .stat { border-left: 1px solid var(--line); }

.stat__num {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(36px, 3vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.stat__suffix { color: var(--orange); }

.stat__label {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}

/* ----- Media frames ----- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--16x10 { aspect-ratio: 16 / 10; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1; }
.media--3x4 { aspect-ratio: 3 / 4; }

.media--native {
  background: transparent;
  overflow: visible;
}

.media--native img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.is-dim img { filter: grayscale(0.4) brightness(0.7); }

/* ----- Collage, vision, leadership ----- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.collage {
  position: relative;
  aspect-ratio: 5 / 5.35;
  max-width: 560px;
}

.collage__main {
  position: absolute;
  inset: 0 auto auto 0;
  width: 78%;
  height: 86%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.collage__main img,
.collage__float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__accent {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 46%;
  border-radius: 22px;
  background: var(--grad-hot);
}

.collage__float {
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid var(--white);
  box-shadow: var(--shadow);
  z-index: 1;
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.mini-card {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 16px 14px;
}

.mini-card h3 { font-size: 15px; margin: 0 0 6px; }
.mini-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.vm-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.vm-card h2,
.vm-card h3 { font-size: 28px; }

.vm-card--ink { background: var(--ink); color: rgba(255, 255, 255, 0.82); }
.vm-card--ink h2,
.vm-card--ink h3 { color: var(--white); }

.vm-card--ink::after {
  content: "";
  position: absolute;
  top: -48px;
  right: -48px;
  width: 170px;
  height: 170px;
  border-radius: 40px;
  background: var(--grad-hot);
}

.vm-card--ink > * { position: relative; z-index: 1; }

.vm-card--cream { background: var(--cream); border: 1px solid var(--line); }
.vm-card p:last-child { margin-bottom: 0; }

.leader-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 18px;
  align-items: stretch;
}

.leader-card {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.portrait {
  width: min(100%, 280px);
  max-width: 300px;
  height: auto;
  aspect-ratio: 290 / 461;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
}

.leader-card h3 { margin-bottom: 2px; }
.leader-card .role { margin: 0 0 10px; color: var(--orange); font-weight: 600; font-size: 14.5px; }

/* ----- Service cards & service page ----- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  padding: 22px 20px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(15, 15, 18, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-card__num {
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.service-card h3 { margin: 4px 0 0; font-size: 20px; }
.service-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.service-card .btn,
.service-card .link-arrow { margin-top: auto; align-self: flex-start; }

.service-card--cta {
  background: var(--ink);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.service-card--cta h3 { color: var(--white); }
.service-card--cta p { color: rgba(255, 255, 255, 0.72); }
.service-card--cta .link-arrow,
.feature-card .link-arrow { color: var(--white); }

.service-index {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: rgba(255, 247, 232, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.service-index__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  scrollbar-width: thin;
}

.pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pill:hover,
.pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0;
}

.service-block + .service-block { border-top: 1px solid var(--line); }
.service-block--flip .service-block__media { order: 2; }

.service-block__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sand);
}

.service-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-block__num {
  margin: 0 0 6px;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.points {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 18px 0 8px;
}

.points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
}

.points .icon { width: 20px; height: 20px; color: var(--orange); margin-top: 3px; }

/* ----- Events ----- */

.feature-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.feature-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 540px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.feature-card__bg { position: absolute; inset: 0; }

.feature-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 18, 0.05) 15%, rgba(15, 15, 18, 0.82) 100%);
}

.feature-card__body { position: relative; z-index: 1; padding: 28px; }
.feature-card h3 { color: var(--white); font-size: 32px; margin: 10px 0 8px; }
.feature-card p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.86); }

.feature-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  min-height: 0;
}

.side-card {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.side-card__media {
  position: relative;
  min-height: 100%;
  padding: 0;
  background: var(--ink-2);
  overflow: hidden;
}

.side-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.side-card__media--native {
  display: grid;
  place-items: center;
  padding: 12px;
  background: var(--sand);
}

.side-card__media--native img {
  position: static;
  inset: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  border-radius: 8px;
}

.side-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
}

.side-card .tag {
  white-space: nowrap;
  max-width: 100%;
  letter-spacing: 0.02em;
  font-size: 11px;
  line-height: 1.2;
  color: var(--orange);
}

.side-card h3 { font-size: 18px; margin: 0; }
.side-card p { margin: 0; color: var(--muted); font-size: 14.5px; }

.tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--orange);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag--on-dark {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.event-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.date-block {
  background: var(--ink);
  color: var(--white);
  border-radius: 18px;
  text-align: center;
  padding: 16px 10px 14px;
}

.date-block__day {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.date-block__mon {
  display: block;
  margin-top: 4px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.date-block__year {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.event-wide {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 8px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.event-wide__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--sand);
}

.event-wide__media img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.event-wide__body { padding: 28px 28px 28px 12px; }

.programme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.info-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.info-bar__item { padding: 22px 24px; }
.info-bar__item + .info-bar__item { border-left: 1px solid var(--line); }

.info-bar__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.info-bar__item strong { font-family: var(--font-h); font-size: 18px; letter-spacing: -0.02em; }

.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.expect-card {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.expect-card h3 { font-size: 18px; margin: 12px 0 0; }

.benefit-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 8px 0 0;
}

.benefit-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}

.benefit-list .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.benefit-list .icon { width: 18px; height: 18px; }

.reg-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.reg-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

.reg-chip--light {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.past-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 28px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.past-strip__year {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--orange);
}

/* ----- Process ----- */

.process {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.steps { position: relative; }

.steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--grad);
  opacity: 0.55;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  padding: 12px 0;
}

.step__num {
  position: relative;
  z-index: 1;
  display: block;
  width: 56px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--yellow);
  background: var(--ink);
}

.step h3 { margin: 0 0 4px; font-size: 22px; }
.step p { margin: 0; font-size: 15.5px; }

/* ----- Timeline ----- */

.timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin: 8px 0 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--grad);
}

.timeline__item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 22px;
  padding: 0 0 28px;
}

.timeline__dot {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--orange);
  position: relative;
  z-index: 1;
}

.timeline__year {
  margin: 0 0 4px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.timeline__item h3 { margin: 0 0 4px; font-size: 20px; }
.timeline__item p { margin: 0; color: var(--muted); }

/* ----- Partners & destinations ----- */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.partner-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
}

.section--white .partner-tile { background: var(--sand); }

.logo-wall {
  margin-top: 22px;
  padding: 18px;
  border: 1.5px dashed #d5cdbf;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.45);
}

.logo-wall > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.logo-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.logo-slot {
  height: 68px;
  border-radius: 12px;
  border: 1.5px dashed #ddd4c6;
  background: rgba(255, 255, 255, 0.7);
}

.dest-teaser {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.dest-points {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.dest-points li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
}

.dest-points li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--grad);
}

.dest-points strong { display: block; }

.country-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.country-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.country-chip__region {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.country-chip h3 { font-size: 18px; margin: 0; }
.country-chip p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

.region-block { margin-bottom: 40px; }
.region-block h2 { font-size: clamp(28px, 2vw, 36px); }

.country-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.country-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.country-card__head {
  position: relative;
  min-height: 148px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  overflow: hidden;
}

.country-card__initial {
  position: absolute;
  right: 8px;
  top: -12px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 104px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.country-card__head h3 { position: relative; color: var(--white); margin: 0; font-size: 26px; }

.country-card__body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.country-card__body p { margin: 0; color: var(--muted); font-size: 15px; }

.tint-amber { background: linear-gradient(155deg, #2a2116 0%, #8a5a08 78%, var(--amber)); }
.tint-orange { background: linear-gradient(155deg, #1b1b21 0%, #9a4e00 70%, var(--orange)); }
.tint-ink { background: linear-gradient(155deg, #0f0f12 0%, #3d3428 55%, #c4840a); }
.tint-sand { background: linear-gradient(155deg, #3a2a14 0%, #f5a800 120%); }

.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.badge--solid { background: var(--yellow); }

.country-card__head .badge {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  background: var(--yellow);
  color: var(--ink);
}

.map-placeholder,
.map-panel {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px 20px;
  border: 1.5px dashed #d5cdbf;
  border-radius: var(--radius-lg);
  background: var(--sand);
  color: var(--muted);
}

.map-panel { min-height: 360px; }

.map-placeholder .icon,
.map-panel .icon { color: var(--orange); margin-bottom: 8px; }

.more-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
}

.more-card h2,
.more-card h3 { color: var(--white); margin-bottom: 6px; }

/* ----- Gallery ----- */

.bento {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 260px;
  grid-auto-flow: dense;
  gap: 16px;
}

.bento__item {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-2);
}

.bento__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.bento__item:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
.bento__item:nth-child(3) { grid-column: 3; grid-row: 2; }
.bento__item:nth-child(4) { grid-column: 4; grid-row: 2; }
.bento__item:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
.bento__item:nth-child(6) { grid-column: 3 / span 2; grid-row: 3; }

.bento__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bento__item:hover img { transform: scale(1.04); }

.bento__cap,
.g-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 40px 14px 12px;
  background: linear-gradient(to top, rgba(15, 15, 18, 0.84) 0%, rgba(15, 15, 18, 0.28) 58%, transparent 100%);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  font-style: normal;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.chip:hover { border-color: var(--ink); }

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.gallery-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 12px;
}

.g-tile {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-2);
}

.g-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.g-tile:hover img { transform: scale(1.04); }

.g-tile--wide { grid-column: span 2; }
.g-tile--tall { grid-row: span 2; }

.is-hidden { display: none !important; }

/* ----- News cards ----- */

.article-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-feature__media { min-height: 340px; background: var(--sand); }

.article-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 40px 36px;
}

.insight-grid,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.card__media { aspect-ratio: 16 / 10; background: var(--sand); overflow: hidden; }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__media--contain img { object-fit: contain; background: var(--sand); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 18px 18px 20px;
}

.card h3 { font-size: 20px; margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

.card--placeholder { background: var(--sand); }

/* ----- Contact ----- */

.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.desk-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.desk-card h3 { margin: 8px 0 0; font-size: 20px; }
.desk-card a { font-weight: 600; text-decoration: none; }
.desk-card a:hover { color: var(--orange); }
.desk-card p { margin: 0; color: var(--muted); }

.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 20px;
  align-items: start;
}

.form {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }

.field label,
.check span { font-size: 14px; font-weight: 600; }

.req { color: var(--orange); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: 16px;
  line-height: 1.4;
}

.field textarea { min-height: 140px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--amber);
  border-color: var(--orange);
  outline-offset: 1px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
}

.check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--orange);
}

.info-panel {
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
}

.info-panel h2,
.info-panel h3 { color: var(--white); }

.info-panel a { color: var(--white); }

.footer-office + .footer-office,
.info-panel .office + .office { margin-top: 16px; }

.info-panel .office p { margin: 0; }

.signup-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--cream);
  border: 1px solid #f0e2c4;
}

.signup-panel h2 { font-size: clamp(26px, 2vw, 32px); margin-bottom: 4px; }
.signup-panel p { margin: 0; color: var(--muted); }

.signup-form { display: flex; gap: 8px; flex: 1; max-width: 480px; }

.signup-form input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--white);
  padding: 12px 16px;
  font-size: 16px;
}

.signup-form input:focus {
  outline: 2px solid var(--amber);
  border-color: var(--orange);
}

/* ----- Placeholders ----- */

.ph {
  display: inline-block;
  padding: 8px 12px;
  border: 1.5px dashed #d9c89a;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted);
  font-weight: 500;
}

.ph--block { display: block; }

.placeholder,
.placeholder-card {
  border: 1.5px dashed #d5cdbf;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.4);
  color: var(--muted);
}

.placeholder-card {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 220px;
  padding: 28px 20px;
}

.team-placeholder { min-height: 100%; }

/* ----- Quote ----- */

.quote-block {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
  padding: 12px 12px 0;
}

.quote-mark {
  width: 56px;
  height: 42px;
  display: block;
  margin: 0 auto 12px;
}

.quote-block .ph {
  font-family: var(--font-b);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

.quote-block blockquote {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink-2);
}

.quote-block figcaption { margin-top: 16px; }
.quote-note { margin-top: 14px; color: var(--muted); font-size: 13.5px; }

/* ----- CTA band ----- */

/* Top padding stays 0 when the band continues the section above it
   (that section already has bottom padding). It opens up only where
   the ground colour changes, so the orange panel is not glued to the edge. */
.cta-band { padding: 0 0 88px; background: var(--white); }

.cta-band--sand { background: var(--sand); }
.cta-band--cream { background: var(--cream); }

.section--sand + .cta-band { background: var(--sand); }
.section--cream + .cta-band { background: var(--cream); }
.section--white + .cta-band,
.section--ink + .cta-band { background: var(--white); }

.section--ink + .cta-band { padding-top: 96px; }

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 52px;
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, var(--orange) 0%, var(--amber) 58%, var(--yellow) 130%);
  color: var(--ink);
}

.cta-panel h2 { font-size: clamp(30px, 2.4vw, 40px); max-width: 16ch; margin-bottom: 8px; }
.cta-panel p { margin: 0; max-width: 46ch; font-size: 16.5px; }

/* ----- Footer ----- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.74);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 1.15fr;
  gap: 36px;
}

.site-footer a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }

.footer-title {
  margin: 0 0 16px;
  color: var(--white);
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links { list-style: none; display: grid; gap: 8px; }
.footer-links a { font-size: 15px; }

.footer-brand p { margin: 14px 0 0; font-size: 14.5px; max-width: 36ch; }

.footer-social { display: flex; gap: 8px; margin-top: 16px; }

.footer-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
}

.footer-social a:hover { background: var(--white); color: var(--ink); }

.footer-office { margin-bottom: 14px; }
.footer-office strong { display: block; color: var(--white); font-size: 14px; margin-bottom: 2px; }
.footer-office p { margin: 0; font-size: 14.5px; }

.office-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.office-card {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.office-card h3 { margin: 12px 0 6px; font-size: 22px; }
.office-card p { margin: 0; color: var(--muted); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}

/* ----- Responsive: 1100 ----- */

@media (max-width: 1100px) {
  .brand__mark { height: 36px; }
  .brand__name { font-size: 18px; }
  .brand__sub { letter-spacing: 0.08em; font-size: 8px; }
  .site-nav a { font-size: 12px; padding: 6px 3px; }
  .header-cta { padding-inline: 12px; font-size: 13px; min-height: 42px; }

  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .country-cards { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-auto-rows: 230px; }
  .process { gap: 28px; }
  .feature-card { min-height: 480px; }
}

/* ----- Responsive: 860 ----- */

@media (max-width: 860px) {
  :root { --pad: 72px; }

  .container { width: min(var(--max), calc(100% - 40px)); }

  .nav-toggle { display: inline-grid; }
  html.no-js .nav-toggle { display: none; }
  .header-cta { display: none; }
  .site-header__inner { gap: 12px; }

  .site-nav { margin-left: 0; flex-basis: 100%; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 12px 10px; border-radius: 12px; font-size: 16px; }
  .site-nav .nav-cta {
    display: inline-flex;
    margin-top: 12px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    background: var(--orange);
  }
  .site-nav .nav-cta:hover { background: #ff9d1a; color: var(--ink); }

  /* In flow when JS is unavailable so every link stays reachable. */
  .site-header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding: 10px 0; }
  .site-nav { padding-bottom: 8px; }

  html.js .site-header__inner { flex-wrap: nowrap; height: var(--header-h); padding: 0; }
  html.js .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px 20px 18px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  html.js .site-nav.is-open { display: block; }

  .hero { min-height: 0; }
  .hero__layout {
    grid-template-columns: 1fr;
    min-height: 0;
    /* Bottom padding clears the stats card, which still tucks up by 72px. */
    padding: 56px 0 144px;
    gap: 28px;
  }
  .hero__veil {
    background:
      linear-gradient(to top, rgba(5, 5, 5, 0.42) 0%, rgba(5, 5, 5, 0) 22%),
      linear-gradient(90deg, rgba(5, 5, 5, 0.62) 0%, rgba(5, 5, 5, 0.28) 42%, rgba(5, 5, 5, 0.06) 68%, rgba(5, 5, 5, 0) 82%);
  }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .about-grid,
  .split,
  .split--42,
  .split--58,
  .process,
  .dest-teaser,
  .feature-layout,
  .contact-layout,
  .leader-grid,
  .vm-grid,
  .article-feature,
  .event-wide { grid-template-columns: 1fr; }

  .service-block,
  .service-block--flip { grid-template-columns: 1fr; gap: 24px; }
  .service-block--flip .service-block__media { order: 0; }

  .leader-card { grid-template-columns: 1fr; justify-items: start; }

  .feature-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .side-card { grid-template-columns: 42% minmax(0, 1fr); }

  .event-row {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 16px;
  }

  .partner-grid,
  .programme-grid,
  .expect-grid,
  .desk-grid,
  .insight-grid,
  .news-grid { grid-template-columns: 1fr 1fr; }

  .info-bar { grid-template-columns: 1fr 1fr; }
  .info-bar__item:nth-child(odd) { border-left: 0; }
  .info-bar__item:nth-child(3),
  .info-bar__item:nth-child(4) { border-top: 1px solid var(--line); }
  .info-bar__item:nth-child(even) { border-left: 1px solid var(--line); }

  .logo-slots { grid-template-columns: repeat(3, 1fr); }
  .package-grid { grid-template-columns: 1fr; }
  .country-grid { grid-template-columns: 1fr 1fr; }

  .bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
    grid-auto-flow: dense;
  }
  .bento__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .bento__item:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 220px; }
  .bento__item:last-child { grid-column: 1 / -1; }

  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; grid-auto-flow: dense; }
  .g-tile--wide { grid-column: span 2; }

  .cta-panel { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .section--ink + .cta-band { padding-top: 64px; }

  /* Nav is a drawer below 860px, so the wordmark can be readable again.
     The 1100px rule shrinks it only to fit the desktop link row. */
  .brand__mark { height: 40px; }
  .brand__name { font-size: 22px; }
  .brand__sub { font-size: 10px; letter-spacing: 0.1em; }
  .signup-panel { flex-direction: column; align-items: stretch; }
  .signup-form { max-width: none; }
  .more-card { flex-direction: column; align-items: flex-start; }
  .past-strip { grid-template-columns: 1fr; gap: 8px; }
  .footer-bottom { flex-direction: column; }

  .section--tight-top { padding-top: 48px; }

  .page-hero { min-height: 380px; }
  .page-hero--tall { min-height: 460px; }
  .page-hero__inner { padding-top: 96px; }
}

/* ----- Responsive: 560 ----- */

@media (max-width: 560px) {
  .container { width: min(var(--max), calc(100% - 32px)); }

  .service-grid,
  .partner-grid,
  .programme-grid,
  .expect-grid,
  .desk-grid,
  .insight-grid,
  .news-grid,
  .country-cards,
  .country-grid,
  .office-grid,
  .mini-grid { grid-template-columns: 1fr; }

  .info-bar { grid-template-columns: 1fr; }
  .info-bar__item + .info-bar__item { border-left: 0; border-top: 1px solid var(--line); }

  .form-grid { grid-template-columns: 1fr; }
  .logo-slots { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-flow: dense; }
  .g-tile--wide,
  .g-tile--tall { grid-column: auto; grid-row: span 1; min-height: 220px; }

  .side-card { grid-template-columns: 1fr; height: auto; }
  .side-card__media { height: 180px; min-height: 180px; }
  .side-card__body { padding: 14px 16px 16px; }
  .side-card__media--native { height: auto; min-height: 0; }
  .side-card__media--native img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 240px;
  }

  .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .signup-form { flex-direction: column; }
  .signup-form .btn { width: 100%; }

  .hero__layout { padding-top: 40px; }
  .trust-row { flex-direction: column; align-items: flex-start; }

  .next-event { padding: 20px 18px 18px; }
  .next-event__title { font-size: 20px; line-height: 1.2; }
  .next-event__meta { line-height: 1.4; }

  .stat { padding: 20px 12px; }
  .stat__num { font-size: 32px; }
  .stat__label { font-size: 13px; line-height: 1.35; }

  .bento { grid-auto-rows: 200px; gap: 10px; }
  .bento__item:first-child { min-height: 220px; }
  .bento__cap {
    font-size: 12.5px;
    line-height: 1.25;
    padding: 28px 10px 10px;
  }

  .footer-brand .brand__sub { font-size: 10px; letter-spacing: 0.08em; }
  .office-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .hero-sky { animation: none !important; }
}

/* =============================================================================
   Page rules merged from the former _extra stylesheets.
   Kept at the end so they win the same way they did when linked after
   styles.css. Selectors are limited to components that exist on one page,
   except .card .kicker, which restores the shared eyebrow inside any card.
   The gallery letterbox (.g-tile--native) is not carried over: the Food Tour
   guests photo is a normal single-column cover tile.
   ============================================================================= */

/* ----- Services ----- */

/* Anchors must clear the sticky header (84px) and the sticky service index. */
.service-block {
  scroll-margin-top: 168px;
}

/* ----- Destinations ----- */

.dest-filters .chip { cursor: default; }

.dest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.dest-grid .country-card { min-width: 0; height: 100%; }

.dest-grid .country-card__head.wash-orange {
  background: linear-gradient(155deg, #1c140e 0%, #a35200 68%, #f28c00);
}

.dest-grid .country-card__head.wash-amber {
  background: linear-gradient(158deg, #2a2116 0%, #8a5a08 76%, #f5a800);
}

.dest-grid .country-card__head.wash-ink {
  background: linear-gradient(155deg, #0f0f12 0%, #3a2414 54%, #e07000);
}

.dest-grid .country-card__head.wash-orange-2 {
  background: linear-gradient(148deg, #2a160c 0%, #c46208 72%, #ffb03a);
}

.dest-grid .country-card__head.wash-amber-2 {
  background: linear-gradient(164deg, #1a140c 0%, #9a6410 70%, #e8b23a);
}

.dest-grid .country-card__head.wash-ink-2 {
  background: linear-gradient(150deg, #121218 0%, #4a3018 48%, #d4780a);
}

.dest-grid .country-card__head.wash-orange-3 {
  background: linear-gradient(142deg, #1a120c 0%, #b85c08 62%, #f5a000);
}

.country-card--more {
  background: var(--ink);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.country-card--more .country-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 20px;
  background: var(--ink);
}

.country-card--more h3 {
  color: var(--white);
  font-size: 26px;
  margin: 0;
}

.country-card--more .country-card__body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}

.country-card--more .btn {
  margin-top: auto;
  align-self: flex-start;
}

.based {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.based__offices {
  display: grid;
  gap: 16px;
  align-content: start;
}

.based .office-card h3 { margin-top: 12px; }

.based .map-panel {
  min-height: 320px;
  height: auto;
}

.map-panel.map-panel--embed,
.map-panel.map-panel--coverage,
.map-panel.map-panel--image,
.map-panel:has(iframe) {
  display: block;
  place-items: stretch;
  text-align: left;
  padding: 0;
  border: 0;
  background: var(--sand);
  color: inherit;
  overflow: hidden;
  min-height: 360px;
  height: 360px;
}

.based .map-panel.map-panel--embed,
.based .map-panel.map-panel--coverage,
.based .map-panel.map-panel--image {
  min-height: 400px;
  height: 420px;
}

.map-panel.map-panel--embed iframe,
.map-panel:has(iframe) iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  border-radius: inherit;
}

.map-panel.map-panel--coverage .africa-map {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: #d9d3c7;
}

.map-panel.map-panel--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.africa-map .leaflet-popup-content {
  margin: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
}

.africa-map .leaflet-popup-content a {
  font-weight: 700;
}

@media (max-width: 1100px) {
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .based { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .dest-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Events ----- */

.event-feature {
  display: grid;
  grid-template-columns: 45% minmax(0, 1fr);
  min-height: 360px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.event-feature__media {
  position: relative;
  min-height: 360px;
}

.event-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-feature__media .date-block {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  width: 112px;
  box-shadow: 0 12px 28px -16px rgba(15, 15, 18, 0.85);
}

.event-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 32px 36px;
}

.event-feature__body h3 { margin-bottom: 8px; }
.event-feature__body p { margin: 0 0 0.65em; }
.event-feature__body .cluster { margin-top: 4px; }
.event-feature__body .btn-row { margin-top: 16px; }

.event-wide {
  grid-template-columns: clamp(200px, 36%, 420px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.event-wide__media {
  position: relative;
  padding: 0;
  background: var(--sand);
}

.event-wide .event-wide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
}

.event-wide__body {
  padding: 28px 32px;
  min-width: 0;
}

.event-past .placeholder-card {
  min-height: 120px;
  padding: 16px 20px;
}

@media (max-width: 860px) {
  .event-feature { grid-template-columns: minmax(0, 1fr); }
  .event-feature__body { padding: 24px 20px 28px; }

  .event-wide { grid-template-columns: minmax(0, 1fr); }

  .event-wide__media {
    aspect-ratio: 768 / 513;
    width: 100%;
    max-width: 420px;
  }
}

/* ----- News and contact ----- */

/* Feature photo covers the stretched column. min-height keeps a
   band when the columns stack and the image is taken out of flow. */
.article-feature__media {
  position: relative;
  align-self: stretch;
  min-height: 340px;
}

.article-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The shared arrow link pins itself to the bottom of equal-height cards.
   On the feature story it should sit with the excerpt. */
.article-feature__body .link-arrow {
  margin-top: 8px;
}

/* .card p is more specific than .kicker, so category labels would
   otherwise render as body copy. Restore the orange eyebrow. */
.card .kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
}

/* Long desk emails must wrap inside a two-column card below 860px. */
.desk-card a {
  overflow-wrap: anywhere;
}

/* Shown only when a category chip hides every card in the grid.
   With JS off, nothing is .is-hidden, so the note stays hidden. */
.news-empty {
  display: none;
  margin: 8px 0 0;
}

.news-archive:not(:has(.news-grid > :not(.is-hidden))) .news-empty {
  display: block;
}

/* Contact hero: handshake.jpg is tall; keep the faces in frame. */
.page-hero__media img.hero-faces {
  object-position: center 15%;
}

/* ----- FoodTour 2026 ----- */

.photo-frame {
  margin: 0;
  min-width: 0;
}

.photo-frame .media {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.photo-frame figcaption {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}

.past-edition {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.past-edition__poster {
  width: 260px;
  max-width: 100%;
}

.past-edition__copy { min-width: 0; }

.past-edition__copy .past-strip__year { margin: 0 0 6px; }
.past-edition__copy .kicker { margin: 0 0 8px; }
.past-edition__copy h3 { margin: 0 0 8px; }
.past-edition__copy p { margin: 0 0 0.75em; }
.past-edition__copy .link-arrow { margin-top: 4px; }

@media (max-width: 860px) {
  .past-edition { grid-template-columns: minmax(0, 1fr); }
  .past-edition__poster { width: min(260px, 100%); }
}

/* ----- Home: fewer photos (edit round 2) ----- */

.about-photo {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 42%;
}

.feature-card .feature-card__when {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
}

.side-card.side-card--text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: auto;
  padding: 22px 22px 20px;
  background: var(--sand);
  grid-template-columns: minmax(0, 1fr);
}

.side-card.side-card--text .side-card__body {
  flex: 1;
  width: 100%;
  padding: 0;
  gap: 6px;
}

.side-card__meta {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.side-card.side-card--text h3 { font-size: 20px; }
.side-card.side-card--text .link-arrow { margin-top: auto; }

.steps.steps--row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 36px;
}

.steps.steps--row::before { content: none; }

.steps.steps--row .step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.steps.steps--row .step__num {
  width: auto;
  background: transparent;
}

.section--band { padding: 80px 0; }
.section--band .section-head { margin-bottom: 0; }
.section--band .center-row { margin-top: 22px; }

.insight-grid .card__body { padding: 26px 24px 24px; gap: 10px; }

.insight-grid .card--placeholder {
  border: 1.5px dashed #d5cdbf;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.place-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 860px) {
  .steps.steps--row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 0;
    margin-top: 28px;
  }

  .steps.steps--row .step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 12px 0;
  }

  .side-card.side-card--text { height: auto; }
  .section--band { padding: 64px 0; }
}

@media (max-width: 560px) {
  .about-photo img { aspect-ratio: 16 / 11; }
  .insight-grid .card__body { padding: 20px 18px 18px; }
  .side-card.side-card--text { padding: 18px 16px 16px; }
}