/* =====================================================================
   TRIWAYS — HUB LAYER (category-landing pages)
   Loaded after triways-core.css. Prefix: hub-
   A hub orients; it does not persuade. Same tokens and primitives as the
   homepage, a shorter arc: orientation → directory → routing → method →
   proof → questions → next step.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ORIENTATION HERO — typographic, on ink. No photograph: the directory
   below carries the imagery so the hub never outweighs the homepage.
   ------------------------------------------------------------------- */
.hub-hero {
  background: var(--hb-ink);
  color: var(--hb-champagne);
  padding: clamp(7.5rem, 5.5rem + 8vw, 12.5rem) 0 clamp(3.5rem, 3rem + 4vw, 6.5rem);
  border-bottom: 1px solid var(--hb-line-on-dark);
}
.hub-hero .hb-eyebrow { color: var(--hb-champagne); }
.hub-hero .hb-kicker::after { background: var(--hb-champagne); opacity: 0.5; }
.hub-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}
.hub-crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.hub-crumbs li { display: flex; align-items: center; gap: 0.6rem; color: rgba(244, 240, 232, 0.55); }
.hub-crumbs li + li::before { content: "/"; color: rgba(200, 183, 156, 0.45); }
.hub-crumbs a { color: rgba(244, 240, 232, 0.72); border-bottom: 1px solid transparent; }
.hub-crumbs a:hover, .hub-crumbs a:focus-visible { color: var(--hb-champagne); border-color: rgba(200, 183, 156, 0.5); }
.hub-crumbs [aria-current="page"] { color: var(--hb-champagne); }

.hub-hero__title {
  font-family: var(--hb-serif); font-weight: 500; color: #fff;
  font-size: var(--hb-h1); line-height: 1.04; letter-spacing: 0.002em;
  text-wrap: balance; margin: 0;
}
.hub-hero__answer { border-top: 1px solid var(--hb-line-on-dark); padding-top: 1.5rem; }
.hub-hero__answer p { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.75; color: rgba(244, 240, 232, 0.82); max-width: 34rem; }
.hub-hero__answer p + p { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   2. THE DIRECTORY — an ordered list, one row per spoke.
   Semantic: <ol><li><article><h3><a>. The whole row is clickable through
   a stretched ::after on the heading link, so the accessible name of the
   link is just the spoke's name.
   ------------------------------------------------------------------- */
.hub-index { border-top: 1px solid var(--hb-line); }
.hub-index__item { position: relative; border-bottom: 1px solid var(--hb-line); }
.hub-index__row {
  display: grid;
  grid-template-columns: minmax(200px, 26%) minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3.4vw, 3.25rem);
  align-items: center;
  padding: clamp(1.4rem, 2.4vw, 2.25rem) 0;
}
.hub-index__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-index__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--hb-ease); }
.hub-index__for { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); margin-bottom: 0.7rem; }
.hub-index__name {
  font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink);
  font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem); line-height: 1.1; margin: 0 0 0.75rem;
}
.hub-index__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease), color 0.3s var(--hb-ease); }
.hub-index__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-index__name a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.hub-index__desc { font-size: 1rem; line-height: 1.75; color: var(--hb-text-dim); max-width: 46ch; }
.hub-index__go {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-ink);
}
.hub-index__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hub-index__item:hover .hub-index__media img { transform: scale(1.045); }
.hub-index__item:hover .hub-index__name a,
.hub-index__item:focus-within .hub-index__name a { background-size: 100% 1px; }
.hub-index__item:hover .hub-index__go { color: var(--hb-gold); }
.hub-index__item:hover .hub-index__go .hb-arrow { transform: translateX(4px); }

/* The lead entry — the anchor service — is given more room */
.hub-index__item--lead .hub-index__row { grid-template-columns: minmax(240px, 40%) minmax(0, 1fr) auto; }
.hub-index__item--lead .hub-index__media { aspect-ratio: 16 / 10; }
.hub-index__item--lead .hub-index__name { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); }

/* ---------------------------------------------------------------------
   3. ROUTING — "who's asking". A sticky label beside a definition list,
   not a row of cards.
   ------------------------------------------------------------------- */
.hub-routes { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.hub-routes__head { position: sticky; top: 6.5rem; }
.hub-routes__head .hb-copy { max-width: 26rem; }
.hub-routes__list { border-top: 1px solid var(--hb-line); }
.hub-route { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.6rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--hb-line); }
.hub-route__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: var(--hb-h3); line-height: 1.2; }
.hub-route__body p { color: var(--hb-text-dim); line-height: 1.75; }
.hub-route__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.1rem; }
.hub-routes__note { margin-top: 1.5rem; font-size: 0.9rem; color: var(--hb-text-dim); max-width: 46ch; }

/* ---------------------------------------------------------------------
   4. METHOD — an ordered sequence in a single horizontal run
   ------------------------------------------------------------------- */
.hub-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); }
.hub-step { border-top: 1px solid var(--hb-text); padding-top: 1.1rem; }
.hub-step__ord { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); margin-bottom: 0.8rem; }
.hub-step__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: var(--hb-h3); line-height: 1.15; margin-bottom: 0.6rem; }
.hub-step p { font-size: 0.95rem; line-height: 1.7; color: var(--hb-text-dim); }
.hub-method__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------------------------------------------------------------------
   5. PROOF — on ink, statement left, network marquee below
   ------------------------------------------------------------------- */
.hub-proof__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.hub-proof__head .hb-heading { margin-bottom: 0; }
.hub-proof__head .hb-copy { max-width: 30rem; }

/* ---------------------------------------------------------------------
   6. QUESTIONS
   ------------------------------------------------------------------- */
.hub-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.hub-faq__head { position: sticky; top: 6.5rem; }
.hub-faq .hb-faq { max-width: none; }

/* ---------------------------------------------------------------------
   7. NEXT STEP — one primary action, and the neighbouring hubs
   ------------------------------------------------------------------- */
.hub-close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.hub-close .hb-heading { font-size: var(--hb-h2); color: var(--hb-white); }
.hub-close .hb-copy { max-width: 32rem; margin-bottom: 2.25rem; }
.hub-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.hub-close__direct { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 240, 232, 0.72); display: inline-flex; align-items: center; gap: 0.5rem; }
.hub-close__direct:hover, .hub-close__direct:focus-visible { color: var(--hb-champagne); }
.hub-close__next { border-top: 1px solid var(--hb-line-on-dark); padding-top: 1.25rem; }
.hub-close__next-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-champagne); margin-bottom: 0.5rem; }
.hub-close__next li { border-bottom: 1px solid var(--hb-line-on-dark); }
.hub-close__next a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.95rem 0; font-family: var(--hb-serif); font-size: 1.35rem; color: var(--hb-white); }
.hub-close__next a span { font-family: var(--hb-sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 240, 232, 0.5); transition: color 0.25s var(--hb-ease), transform 0.25s var(--hb-ease); }
.hub-close__next a:hover, .hub-close__next a:focus-visible { color: var(--hb-champagne); }
.hub-close__next a:hover span { color: var(--hb-champagne); transform: translateX(3px); }

/* ---------------------------------------------------------------------
   7b. HERO CTA (on ink) — used where the hub is itself an entry point (/partner/)
   ------------------------------------------------------------------- */
.hub-hero__cta { margin-top: 1.75rem; }
.hub-hero .hb-cta { border-color: var(--hb-champagne); color: var(--hb-champagne); }
.hub-hero .hb-cta:hover, .hub-hero .hb-cta:focus-visible { background: var(--hb-champagne); color: var(--hb-ink); }
.hub-hero .hb-cta--solid { background: var(--hb-champagne); color: var(--hb-ink); }
.hub-hero .hb-cta--solid:hover, .hub-hero .hb-cta--solid:focus-visible { background: transparent; color: var(--hb-champagne); }
.hub-hero a:focus-visible { outline-color: var(--hb-champagne); }

/* ---------------------------------------------------------------------
   7c. ROLE INDEX — a directory organised by WHO the visitor is.
   Two typographic columns, hairlines only: no images, no cards, so it can
   never be mistaken for the /services/ image directory.
   ------------------------------------------------------------------- */
.hub-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); border-top: 1px solid var(--hb-line); }
.hub-role { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-bottom: 1px solid var(--hb-line); }
.hub-role__for { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); margin-bottom: 0.9rem; }
.hub-role__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.08; margin: 0 0 0.85rem; }
.hub-role__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); }
.hub-role__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-role__name a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.hub-role__desc { font-size: 1rem; line-height: 1.75; color: var(--hb-text-dim); max-width: 42ch; margin-bottom: 1.4rem; }
.hub-role__go { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-ink); }
.hub-role__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hub-role:hover .hub-role__name a, .hub-role:focus-within .hub-role__name a { background-size: 100% 1px; }
.hub-role:hover .hub-role__go { color: var(--hb-gold); }
.hub-role:hover .hub-role__go .hb-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   7d. WHY TRADE PARTNERS — on ink: one photograph, three statements,
   the hotel network beneath
   ------------------------------------------------------------------- */
.hub-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hub-why__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-why__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hub-why__points { border-top: 1px solid var(--hb-line-on-dark); }
.hub-why__point { padding: 1.5rem 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.hub-why__point h3 { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-white); font-size: var(--hb-h3); line-height: 1.2; margin-bottom: 0.55rem; }
.hub-why__point p { color: rgba(244, 240, 232, 0.72); line-height: 1.75; max-width: 46ch; }
.hub-why .hb-heading { margin-bottom: 2rem; }
.hub-why__point p a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.hub-why__point p a:hover, .hub-why__point p a:focus-visible { color: var(--hb-white); border-color: var(--hb-white); }

/* ---------------------------------------------------------------------
   7e. HOW PARTNERSHIP WORKS — a numbered vertical sequence. Numerals are
   real here: it is an ordered process a visitor (or an AI system) can quote.
   ------------------------------------------------------------------- */
.hub-process { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.hub-process__head { position: sticky; top: 6.5rem; }
.hub-process__head .hb-copy { max-width: 26rem; }
.hub-process__list { border-top: 1px solid var(--hb-line); counter-reset: hubstep; }
.hub-process__step { display: grid; grid-template-columns: clamp(3rem, 6vw, 5rem) minmax(0, 1fr); gap: 1rem clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; border-bottom: 1px solid var(--hb-line); counter-increment: hubstep; }
.hub-process__step::before { content: counter(hubstep); font-family: var(--hb-serif); font-variant-numeric: lining-nums; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height: 0.9; color: var(--hb-gold); }
.hub-process__step h3 { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: var(--hb-h3); line-height: 1.2; margin-bottom: 0.5rem; }
.hub-process__step p { color: var(--hb-text-dim); line-height: 1.75; max-width: 48ch; }

/* ---------------------------------------------------------------------
   7f. THE REGISTER (/capabilities/) — a real table: capability × what it
   proves × the names behind it. Text only on purpose: the names are the
   evidence, and the chapters below carry the photography.
   ------------------------------------------------------------------- */
.hub-ledger { width: 100%; border-collapse: collapse; }
.hub-ledger caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub-ledger thead th { text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); padding: 0 1.5rem 0.9rem 0; border-bottom: 1px solid var(--hb-text); }
.hub-ledger tbody th, .hub-ledger tbody td { text-align: left; vertical-align: top; padding: clamp(1.25rem, 2vw, 1.75rem) 1.5rem clamp(1.25rem, 2vw, 1.75rem) 0; border-bottom: 1px solid var(--hb-line); }
.hub-ledger__cap { width: 27%; font-weight: 400; }
.hub-ledger__proof { width: 33%; }
.hub-ledger__cap a { font-family: var(--hb-serif); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1.1; color: var(--hb-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); display: inline-block; }
.hub-ledger tbody tr:hover .hub-ledger__cap a, .hub-ledger__cap a:focus-visible { background-size: 100% 1px; }
.hub-ledger__proof { color: var(--hb-text-dim); line-height: 1.7; font-size: 0.98rem; }
.hub-named { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 0.3rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-ink-soft); line-height: 1.6; }
.hub-named li::after { content: "\00B7"; margin: 0 0.7em; color: var(--hb-gold); }
.hub-named li:last-child::after { content: none; }

/* ---------------------------------------------------------------------
   7g. THE CHAPTERS (/capabilities/) — the homepage's "power behind the
   journey" at page depth. One long ink section, seven chapters, each
   composed for what it actually has: plates where real photographs exist,
   type where they do not.
   ------------------------------------------------------------------- */
.hub-chapter { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--hb-line-on-dark); }
.hub-chapter:first-of-type { border-top: 0; padding-top: clamp(2rem, 4vw, 3.5rem); }
.hub-chapter__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 5vw, 6rem); align-items: end; }
.hub-chapter__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-champagne); margin-bottom: 1rem; }
.hub-chapter__title { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-white); font-size: clamp(2.7rem, 1.8rem + 3.6vw, 5.2rem); line-height: 1; letter-spacing: 0.002em; margin: 0; }
.hub-chapter__copy p { color: rgba(244, 240, 232, 0.78); line-height: 1.8; max-width: 44ch; }
.hub-chapter__copy p + p { margin-top: 0.9rem; }
.hub-chapter__copy strong { font-weight: 500; color: var(--hb-white); }
.hub-chapter__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.5rem; }
.hub-chapter__body { margin-top: clamp(1.75rem, 3.5vw, 3rem); }

.hub-plates { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); margin: 0; padding: 0; list-style: none; }
.hub-plate { margin: 0; }
.hub-plate__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-plate figcaption { margin-top: 0.7rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 240, 232, 0.72); }
.hub-plate figcaption span { display: block; margin-top: 0.15rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 0.78rem; color: rgba(244, 240, 232, 0.5); }

/* The Nile — one panoramic plate, four beneath */
.hub-plates--nile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-plates--nile > .hub-plate--wide { grid-column: 1 / -1; }
.hub-plates--nile > .hub-plate--wide .hub-plate__img { aspect-ratio: 1600 / 520; object-position: 50% 55%; }

/* The Road — three plates, the first given more room */
.hub-plates--road { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
.hub-plates--road > li:first-child .hub-plate__img { aspect-ratio: 4 / 3; }
.hub-plates--road > li:not(:first-child) .hub-plate__img { aspect-ratio: 4 / 3; object-position: 30% 55%; }
.hub-note { margin-top: 1.25rem; max-width: 62ch; font-size: 0.85rem; line-height: 1.7; color: rgba(244, 240, 232, 0.56); }

/* The Air — no photograph exists, so the pattern itself is drawn */
.hub-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0; font-family: var(--hb-serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); color: var(--hb-white); line-height: 1.2; }
.hub-line li { display: flex; align-items: center; }
.hub-line li + li::before { content: ""; display: inline-block; width: clamp(1.5rem, 5vw, 4.5rem); height: 1px; background: var(--hb-champagne); opacity: 0.55; margin: 0 clamp(0.6rem, 1.5vw, 1.25rem); }
.hub-line__cap { margin-top: 0.9rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 232, 0.5); }

/* The Arrival — a single large plate beside the copy */
.hub-chapter--arrival .hub-chapter__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
.hub-chapter--arrival .hub-plate__img { aspect-ratio: 3 / 2; object-position: 55% 40%; }

/* The Stay — five named properties in a row, the network beneath */
.hub-plates--stay { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hub-plates--stay .hub-plate__img { aspect-ratio: 4 / 5; }

/* The Operation — three working words, set large */
.hub-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hb-line-on-dark); }
.hub-words li { padding: 1.25rem 1rem 0 0; font-family: var(--hb-serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color: var(--hb-white); line-height: 1.15; }
.hub-words li span { display: block; margin-top: 0.5rem; font-family: var(--hb-sans); font-size: 0.85rem; line-height: 1.6; color: rgba(244, 240, 232, 0.6); max-width: 26ch; }

/* ---------------------------------------------------------------------
   7h. THE GEOGRAPHY (/destinations/) — a schematic map of Egypt, drawn from
   real coordinates, beside the destinations grouped by region. The map is a
   locator, not decoration: the Nile is the spine, each pin sits where the
   place actually is, and adding a destination means adding one pin and one
   entry in a region. Regions are a list, so the count can grow past seven.
   ------------------------------------------------------------------- */
.hub-geo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.hub-map { position: sticky; top: 6.5rem; }
.hub-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub-map__land { fill: rgba(41, 39, 37, 0.045); stroke: rgba(41, 39, 37, 0.42); stroke-width: 1.1; stroke-linejoin: round; }
.hub-map__nile { fill: none; stroke: var(--hb-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hub-map__nile--delta { stroke-width: 1.6; opacity: 0.8; }
.hub-map__regions text { font: 500 13.5px var(--hb-sans); letter-spacing: 0.24em; text-transform: uppercase; fill: var(--hb-gold); }
.hub-map__pin { cursor: pointer; }
.hub-map__pin text { font: 600 17px var(--hb-sans); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--hb-ink); transition: fill 0.25s var(--hb-ease); }
.hub-map__dot { fill: var(--hb-ink); transition: r 0.25s var(--hb-ease), fill 0.25s var(--hb-ease); }
.hub-map__hit { fill: transparent; }
.hub-map__pin:hover .hub-map__dot, .hub-map__pin.is-active .hub-map__dot { fill: var(--hb-gold); r: 8; }
.hub-map__pin:hover text, .hub-map__pin.is-active text { fill: var(--hb-gold); }
.hub-map__caption--minor { display: none; margin-top: 0.35rem; text-transform: none; letter-spacing: 0.02em; font-weight: 400; font-size: 0.78rem; }
.hub-map__caption { margin-top: 1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hb-text-dim); }

.hub-region + .hub-region { margin-top: clamp(3rem, 6vw, 5rem); }
.hub-region__head { border-top: 1px solid var(--hb-text); padding-top: 1.1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hub-region__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1.05; margin: 0 0 0.6rem; }
.hub-region__desc { color: var(--hb-text-dim); line-height: 1.7; max-width: 44ch; }
.hub-places { display: grid; gap: clamp(2rem, 3.5vw, 3rem); margin: 0; padding: 0; list-style: none; }
.hub-place { scroll-margin-top: 7rem; }
.hub-place__media { display: block; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-place__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--hb-ease); }
.hub-place:hover .hub-place__media img, .hub-place.is-active .hub-place__media img { transform: scale(1.035); }
.hub-place__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.5rem; align-items: start; padding-top: 1.1rem; }
.hub-place__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.4rem); line-height: 1.1; margin: 0; }
.hub-place__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); }
.hub-place:hover .hub-place__name a, .hub-place.is-active .hub-place__name a, .hub-place__name a:focus-visible { background-size: 100% 1px; }
.hub-place__go { padding-top: 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-ink); white-space: nowrap; }
.hub-place__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hub-place__go:hover, .hub-place__go:focus-visible { color: var(--hb-gold); }
.hub-place__go:hover .hb-arrow { transform: translateX(4px); }
.hub-place__line { grid-column: 1 / -1; color: var(--hb-text-dim); line-height: 1.75; max-width: 52ch; }
.hub-place__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem; margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--hb-line); font-size: 0.85rem; }
.hub-place__links span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); }
.hub-place__links a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-line); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease); }
.hub-place__links a:hover, .hub-place__links a:focus-visible { color: var(--hb-gold); border-color: var(--hb-gold); }

/* Further places within a region — the same information at a quieter scale:
   a thumbnail beside the name, a line and the connections. Adding another
   place to a region is one more <li>; nothing else changes. */
.hub-map__leader { stroke: rgba(41, 39, 37, 0.5); stroke-width: 1; }
.hub-region__more { margin-top: clamp(2rem, 4vw, 3rem); }
.hub-region__more-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-gold); padding-bottom: 0.9rem; border-bottom: 1px solid var(--hb-line); }
.hub-places--compact { gap: 0; }
.hub-place--compact { display: grid; grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr); gap: 1.25rem clamp(1.1rem, 2.4vw, 1.75rem); align-items: start; padding: clamp(1.25rem, 2.4vw, 1.75rem) 0; border-bottom: 1px solid var(--hb-line); }
.hub-place--compact .hub-place__media { aspect-ratio: 4 / 3; }
.hub-place--compact .hub-place__body { display: block; padding-top: 0; }
.hub-place--compact .hub-place__name { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem); margin-bottom: 0.4rem; }
.hub-place--compact .hub-place__line { font-size: 0.95rem; line-height: 1.7; max-width: 50ch; }
.hub-place--compact .hub-place__links { margin-top: 0.7rem; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------------
   7i. HOW TO COMBINE — the sample journeys drawn as routes. Each row is a
   real journey and a real link; the sequence of places is the content.
   ------------------------------------------------------------------- */
.hub-combine { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.hub-combine__head .hb-copy { max-width: 34rem; }
.hub-combine__notes { margin-top: 2rem; border-top: 1px solid var(--hb-line-on-dark); }
.hub-combine__notes div { padding: 1rem 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.hub-combine__notes dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); margin-bottom: 0.35rem; }
.hub-combine__notes dd { margin: 0; color: rgba(244, 240, 232, 0.72); line-height: 1.7; font-size: 0.95rem; }
.hub-combine__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.75rem; }
.hub-journeys { border-top: 1px solid var(--hb-line-on-dark); margin: 0; padding: 0; list-style: none; }
.hub-journey { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.3rem 1.25rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.hub-journey__days { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-champagne); }
.hub-journey__route { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.25rem; font-family: var(--hb-serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.15; color: var(--hb-white); transition: color 0.25s var(--hb-ease); }
.hub-journey__route span + span::before { content: ""; display: inline-block; vertical-align: middle; width: clamp(0.9rem, 2vw, 1.75rem); height: 1px; background: var(--hb-champagne); opacity: 0.55; margin: 0 clamp(0.35rem, 0.8vw, 0.65rem); }
.hub-journey__name { grid-column: 2 / 3; font-size: 0.82rem; color: rgba(244, 240, 232, 0.55); }
.hub-journey__go { grid-row: 1; grid-column: 3; color: var(--hb-champagne); transition: transform 0.25s var(--hb-ease); }
.hub-journey:hover .hub-journey__route, .hub-journey:focus-visible .hub-journey__route { color: var(--hb-champagne); }
.hub-journey:hover .hub-journey__go { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   7j. THE JOURNEYS (/journeys/) — six travellers, six plates. Two columns,
   the right one dropped, so the list reads as an editorial spread rather
   than a grid of equal cards. The stagger sits on the <li>; the scroll
   reveal sits on the <article> inside it, so the two transforms never meet.
   The <ol> keeps DOM order 1–6 for readers and machines alike.
   ------------------------------------------------------------------- */
.hub-jumps { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--hb-line-on-dark); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.hub-jumps a { color: rgba(244, 240, 232, 0.82); border-bottom: 1px solid rgba(200, 183, 156, 0.35); padding-bottom: 0.15rem; }
.hub-jumps a:hover, .hub-jumps a:focus-visible { color: var(--hb-champagne); border-color: var(--hb-champagne); }

.hub-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: clamp(3rem, 5.5vw, 5rem); margin: 0; padding: 0 0 clamp(3rem, 7vw, 6.5rem); list-style: none; align-items: start; }
.hub-path { scroll-margin-top: 7rem; }
.hub-path:nth-child(even) { transform: translateY(clamp(3rem, 7vw, 6.5rem)); }
.hub-path__card { position: relative; }
.hub-path__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-path__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--hb-ease); }
.hub-path__for { margin: 1.25rem 0 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); }
.hub-path__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: clamp(2rem, 1.45rem + 2vw, 3.1rem); line-height: 1.06; margin: 0 0 0.75rem; }
.hub-path__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); }
.hub-path__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-path__name a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.hub-path__desc { font-size: 1rem; line-height: 1.75; color: var(--hb-text-dim); max-width: 42ch; margin-bottom: 1.1rem; }
.hub-path__go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-ink); }
.hub-path__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hub-path__more { position: relative; z-index: 2; display: table; margin-top: 1.1rem; font-size: 0.85rem; }
.hub-path__card:hover .hub-path__media img { transform: scale(1.04); }
.hub-path__card:hover .hub-path__name a, .hub-path__card:focus-within .hub-path__name a { background-size: 100% 1px; }
.hub-path__card:hover .hub-path__go { color: var(--hb-gold); }
.hub-path__card:hover .hub-path__go .hb-arrow { transform: translateX(4px); }

/* How every journey is built — statement left, four definitions right, on ink */
.hub-built { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.hub-built__head { position: sticky; top: 6.5rem; }
.hub-built__head .hb-copy { max-width: 28rem; }
.hub-built__list { border-top: 1px solid var(--hb-line-on-dark); margin: 0; padding: 0; list-style: none; }
.hub-built__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0.6rem clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1.4rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--hb-line-on-dark); }
.hub-built__term { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-white); font-size: var(--hb-h3); line-height: 1.2; margin: 0; }
.hub-built__term a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease), color 0.3s var(--hb-ease); }
.hub-built__term a:hover, .hub-built__term a:focus-visible { color: var(--hb-champagne); background-size: 100% 1px; }
.hub-built__item p { color: rgba(244, 240, 232, 0.72); line-height: 1.75; max-width: 46ch; }

/* ---------------------------------------------------------------------
   7k. THE EXPERIENCES (/experiences/) — one lead plate, five beneath.
   Culture & Heritage is the only experience with a photograph large enough
   to carry a wide plate, so it leads; the other five are tall plates sized
   to the photographs that actually exist. One <ol>, DOM order = reading
   order. Each entry carries a short "what is inside" list taken from the
   live spoke pages, so the directory is information, not just images.
   ------------------------------------------------------------------- */
.hub-exp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(0.75rem, 1.6vw, 1.5rem); row-gap: clamp(3rem, 5.5vw, 5rem); margin: 0; padding: 0; list-style: none; }
.hub-exp__item { position: relative; scroll-margin-top: 7rem; }
.hub-exp__item--lead { grid-column: 1 / -1; }
.hub-exp__card { position: relative; }
.hub-exp__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-exp__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--hb-ease); }
.hub-exp__body { padding-top: 1.1rem; }
.hub-exp__name { font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.15rem); line-height: 1.08; margin: 0 0 0.6rem; }
.hub-exp__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease); }
.hub-exp__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-exp__name a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.hub-exp__desc { font-size: 0.95rem; line-height: 1.7; color: var(--hb-text-dim); }
.hub-exp__tags { margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--hb-line); list-style: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.9; color: var(--hb-gold); }
.hub-exp__go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-ink); }
.hub-exp__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hub-exp__card:hover .hub-exp__media img { transform: scale(1.045); }
.hub-exp__card:hover .hub-exp__name a, .hub-exp__card:focus-within .hub-exp__name a { background-size: 100% 1px; }
.hub-exp__card:hover .hub-exp__go { color: var(--hb-gold); }
.hub-exp__card:hover .hub-exp__go .hb-arrow { transform: translateX(4px); }

/* The lead: a wide plate, the copy set beside it */
.hub-exp__item--lead .hub-exp__card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: end; }
.hub-exp__item--lead .hub-exp__media { aspect-ratio: 4 / 3; }
.hub-exp__item--lead .hub-exp__body { padding: 0 0 0.25rem; }
.hub-exp__item--lead .hub-exp__name { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: 1.02; margin-bottom: 1rem; }
.hub-exp__item--lead .hub-exp__desc { font-size: 1.05rem; line-height: 1.75; max-width: 34ch; }
.hub-exp__item--lead .hub-exp__tags { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; max-width: 32rem; }

/* ---------------------------------------------------------------------
   7l. THE REGISTER OF ACCESS (/exclusive/) — a tonal band one step lighter
   than the ink hero. Each entry is a hairline row: the name set large, one
   plain statement of what is arranged with the named places, and a small
   photograph at the right where a real one exists. Rows without a
   photograph (villas, security) are simply text: discretion suits them, and
   no image is invented to fill the slot. Grid areas keep both row types
   aligned on the same two text columns.
   ------------------------------------------------------------------- */
.hub-exc-band { background: var(--hb-ink-soft); }
.hub-exc { border-top: 1px solid var(--hb-line-on-dark); margin: 0; padding: 0; list-style: none; }
.hub-exc__item { border-bottom: 1px solid var(--hb-line-on-dark); scroll-margin-top: 7rem; }
.hub-exc__row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 17rem); grid-template-areas: "head body media"; gap: 1.25rem clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.9rem, 3.2vw, 3rem) 0; }
.hub-exc__name { grid-area: head; font-family: var(--hb-serif); font-weight: 500; color: var(--hb-white); font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.03; margin: 0; }
.hub-exc__name a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease), color 0.3s var(--hb-ease); }
.hub-exc__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-exc__name a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 6px; }
.hub-exc__body { grid-area: body; }
.hub-exc__desc { color: rgba(244, 240, 232, 0.8); font-size: 1rem; line-height: 1.75; max-width: 46ch; }
.hub-exc__tags { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.9; color: var(--hb-champagne); }
.hub-exc__note { position: relative; z-index: 2; display: table; margin-top: 1rem; font-size: 0.85rem; }
.hub-exc__media { grid-area: media; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--hb-ink); }
.hub-exc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--hb-ease); }
.hub-exc__row:hover .hub-exc__media img { transform: scale(1.05); }
.hub-exc__row:hover .hub-exc__name a, .hub-exc__row:focus-within .hub-exc__name a { color: var(--hb-champagne); background-size: 100% 1px; }

/* ---------------------------------------------------------------------
   7m. THE COMPARISON (/egypt-tour-packages/) — a real <table>: one row per
   sample journey, read straight from the itineraries. The "Route and
   nights" cell carries a bar whose length is proportional to the nights
   (river nights in brass), so the 8-day/9-day pair, and the two journeys
   with no cruise at all, can be read at a glance. The bar's numbers are
   real text; the bar is never the only source of the information.
   ------------------------------------------------------------------- */
.hub-days { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hb-line-on-dark); }
.hub-days li { border-bottom: 1px solid var(--hb-line-on-dark); }
.hub-days a { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.7rem 0; color: rgba(244, 240, 232, 0.86); font-size: 0.95rem; line-height: 1.45; transition: color 0.25s var(--hb-ease); }
.hub-days a:hover, .hub-days a:focus-visible { color: var(--hb-champagne); }
.hub-days__n { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--hb-serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: 2.3rem; line-height: 0.95; color: var(--hb-champagne); }
.hub-days__n small { margin-top: 0.15rem; font-family: var(--hb-sans); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 232, 0.55); }

.hub-cmp__key { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin: 0; padding: 0; list-style: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hb-text-dim); }
.hub-cmp__key li::before { content: ""; display: inline-block; width: 1.75rem; height: 4px; margin-right: 0.7rem; vertical-align: middle; background: var(--hb-text); }
.hub-cmp__key .hub-cmp__key-river::before { background: var(--hb-gold); }

.hub-cmp__wrap { overflow: visible; }
.hub-cmp { width: 100%; border-collapse: collapse; }
/* Sticky header: the site header is 60–63px tall from 1200px up (54px below). The whole <thead> pins just under
   the top of that (58px), so it tucks a few pixels behind the site header and never leaves a gap for rows to show
   through. Cells carry the ivory background so rows scroll cleanly underneath, and the rule under the labels is
   a 1px background gradient because collapsed borders do not travel with a sticky cell (an inset shadow leaves
   tick marks at the cell joins). */
.hub-cmp thead { position: sticky; top: 58px; z-index: 20; }
.hub-cmp thead th, .hub-cmp thead td { background: var(--hb-ivory); }
.hub-cmp thead th { text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); padding: 0 1.25rem 0.9rem 0; border-bottom: 0; background: var(--hb-ivory) linear-gradient(var(--hb-text), var(--hb-text)) 0 100% / 100% 1px no-repeat; white-space: nowrap; }
.hub-cmp__keyrow td { padding: 0.95rem 0 1.05rem; border: 0; }
.hub-cmp tbody th, .hub-cmp tbody td { text-align: left; vertical-align: top; padding: clamp(1.4rem, 2.2vw, 2rem) 1.25rem clamp(1.4rem, 2.2vw, 2rem) 0; border-bottom: 1px solid var(--hb-line); font-size: 0.95rem; line-height: 1.6; color: var(--hb-text-dim); }
.hub-cmp tbody tr { scroll-margin-top: 11rem; }
.hub-cmp tbody th.hub-cmp__id { width: 26%; font-weight: 400; display: table-cell; }
.hub-cmp__id > * { vertical-align: top; }
.hub-cmp__thumb { display: inline-block; width: 5rem; height: 6.25rem; margin-right: 1.1rem; overflow: hidden; border-radius: 2px; background: var(--hb-ink-soft); }
.hub-cmp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-cmp__title { display: inline-block; vertical-align: top; max-width: calc(100% - 6.5rem); }
.hub-cmp__days { display: block; margin-bottom: 0.4rem; font-family: var(--hb-serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.7rem); line-height: 1; color: var(--hb-ink); }
.hub-cmp__title a { font-size: 0.98rem; font-weight: 500; line-height: 1.35; color: var(--hb-ink); border-bottom: 1px solid var(--hb-line); }
.hub-cmp__title a:hover, .hub-cmp__title a:focus-visible { color: var(--hb-gold); border-color: var(--hb-gold); }
.hub-cmp td:nth-child(2) { width: 29%; }
.hub-cmp td:nth-child(3) { width: 10%; }
.hub-cmp td:nth-child(4) { width: 10%; }
.hub-cmp__places { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--hb-text-dim); }
.hub-cmp__yes, .hub-cmp__no { display: block; font-family: var(--hb-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.1; color: var(--hb-ink); }
.hub-cmp__no { color: var(--hb-text-dim); }
.hub-cmp__sub { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.5; color: var(--hb-text-dim); }
.hub-cmp__dash { color: var(--hb-text-dim); }
.hub-cmp td p { margin: 0 0 1rem; color: var(--hb-text); }
.hub-cmp__cta { font-size: 0.74rem; white-space: normal; }
.hub-cmp__note { margin-top: 1.75rem; max-width: 62ch; font-size: 0.95rem; line-height: 1.7; color: var(--hb-text-dim); }
.hub-cmp__note a { color: var(--hb-ink); border-bottom: 1px solid var(--hb-gold); }
.hub-cmp__note a:hover, .hub-cmp__note a:focus-visible { color: var(--hb-gold); }

/* Nights bar: length proportional to nights (9 nights = full width of the cell) */
.hub-nights { display: flex; gap: 3px; width: calc(var(--total) / 9 * 100%); min-width: 6.5rem; margin: 0 0 0.7rem; padding: 0; list-style: none; }
.hub-nights li { flex: var(--n) 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0.45rem 0.3rem 0 0; white-space: nowrap; border-top: 4px solid var(--hb-text); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.25; color: var(--hb-text-dim); }
.hub-nights li.is-river { border-top-color: var(--hb-gold); }
.hub-nights b { margin-top: 0.15rem; font-family: var(--hb-serif); font-weight: 500; font-size: 1.15rem; letter-spacing: 0; line-height: 1; color: var(--hb-ink); }

/* Adapting: statement left, what can change on the right */
.hub-cust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.hub-cust .hub-cust__head .hb-heading { margin-bottom: 0; }
.hub-cust__body .hb-copy { max-width: 40rem; }
.hub-cust__named { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hub-built__item p a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.hub-built__item p a:hover, .hub-built__item p a:focus-visible { color: var(--hb-white); border-color: var(--hb-white); }

/* ---------------------------------------------------------------------
   7n. THE INSIGHTS INDEX (/insights/) — an ordered list, newest first, built
   to grow: a new article is one more <li>. Each entry leads with the
   reader's question, set large in italic (the pairing the homepage's
   "From our side of the Nile" cards use), then the article that answers it.
   The category tag sits in a left rail. .hub-post__meta is the slot for a
   publication date and a named author once those are confirmed; it is not
   in the markup until then.
   ------------------------------------------------------------------- */
.hub-hero__lead { font-family: var(--hb-serif); font-style: italic; font-weight: 400; color: #fff; font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem) !important; line-height: 1.25 !important; max-width: 24ch !important; margin-bottom: 1.25rem; text-wrap: balance; }

.hub-posts { border-top: 1px solid var(--hb-text); margin: 0; padding: 0; list-style: none; }
.hub-post { border-bottom: 1px solid var(--hb-line); scroll-margin-top: 7rem; }
.hub-post__row { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 8fr) auto; gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: start; padding: clamp(2.25rem, 4.5vw, 4rem) 0; }
.hub-post__tag { margin: 0; padding-top: 0.85rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hb-gold); }
.hub-post__q { margin: 0 0 1.6rem; max-width: 24ch; font-family: var(--hb-serif); font-style: italic; font-weight: 400; color: var(--hb-ink); font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.4rem); line-height: 1.12; text-wrap: balance; }
.hub-post__meta { margin: 0 0 0.75rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hb-text-dim); }
.hub-post__title { margin: 0 0 0.65rem; font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.2; }
.hub-post__title a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--hb-ease), color 0.3s var(--hb-ease); }
.hub-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hub-post__title a:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.hub-post__dek { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.75; color: var(--hb-text-dim); }
.hub-post__go { align-self: end; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-ink); }
.hub-post__go .hb-arrow { transition: transform 0.25s var(--hb-ease); }
.hub-post__row:hover .hub-post__title a, .hub-post__row:focus-within .hub-post__title a { background-size: 100% 1px; }
.hub-post__row:hover .hub-post__go { color: var(--hb-gold); }
.hub-post__row:hover .hub-post__go .hb-arrow { transform: translateX(4px); }

/* Inline links inside dark-section copy */
.hb-section--dark .hb-copy a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); }
.hb-section--dark .hb-copy a:hover, .hb-section--dark .hb-copy a:focus-visible { color: var(--hb-white); border-color: var(--hb-white); }

/* ---------------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .hub-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hub-hero__answer { max-width: 40rem; }
  .hub-routes, .hub-faq, .hub-close, .hub-proof__head, .hub-why, .hub-process, .hub-geo, .hub-combine, .hub-built { grid-template-columns: 1fr; }
  .hub-routes__head, .hub-faq__head, .hub-process__head, .hub-map, .hub-built__head { position: static; }
  .hub-map { max-width: 34rem; }
  .hub-why__media { aspect-ratio: 16 / 10; }
  .hub-roles { grid-template-columns: 1fr; }
  .hub-steps { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--hb-text); margin-left: 0.4rem; }
  .hub-step { border-top: 0; padding: 0 0 1.75rem 1.5rem; position: relative; }
  .hub-step:last-child { padding-bottom: 0; }
  .hub-step::before { content: ""; position: absolute; left: -4px; top: 0.35rem; width: 7px; height: 7px; border-radius: 50%; background: var(--hb-gold); }
}
/* Experiences: five plates become 3 + 2 below 1100px (they would be under 190px wide), the lead stacks below 1024px */
@media (max-width: 1099.98px) {
  .hub-exp { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hub-exp__item { grid-column: span 2; }
  .hub-exp__item--lead { grid-column: 1 / -1; }
  .hub-exp__item:nth-child(n+5) { grid-column: span 3; }
  .hub-exp__item:nth-child(n+5) .hub-exp__media { aspect-ratio: 5 / 4; }
}
/* Comparison: below 1200px each row becomes a labelled block — journey and route across the top, then the facts in pairs.
   (Below that width the columns are too narrow to keep the night labels legible.) */
@media (max-width: 1023.98px) {
  .hub-cust { grid-template-columns: 1fr; }
}
@media (max-width: 1199.98px) {
  /* stacked: the column labels are not shown (each cell carries its own), so only the key stays pinned */
  .hub-cmp thead { display: block; top: 52px; }
  .hub-cmp thead tr { display: block; }
  .hub-cmp thead tr:nth-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-cmp__keyrow td { display: block; padding: 0.7rem 0 0.8rem; background: var(--hb-ivory) linear-gradient(var(--hb-line), var(--hb-line)) 0 100% / 100% 1px no-repeat; }
  .hub-cmp tbody tr { scroll-margin-top: 8rem; }
  .hub-cmp, .hub-cmp tbody { display: block; width: 100%; }
  .hub-cmp tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--hb-line); }
  .hub-cmp tbody th, .hub-cmp tbody td { display: block; width: auto !important; padding: 0; border: 0; }
  .hub-cmp tbody th.hub-cmp__id { grid-column: 1 / -1; margin-bottom: 1.25rem; }
  .hub-cmp td:nth-child(2) { grid-column: 1 / -1; margin-bottom: 1.25rem; }
  .hub-cmp td:nth-child(5) { grid-column: 1 / -1; margin-top: 1.25rem; }
  .hub-cmp td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.4rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); }
  .hub-nights { min-width: 0; }
}

/* Insights: the tag moves above the question; "Read" drops beneath the text */
@media (max-width: 1023.98px) {
  .hub-post__row { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .hub-post__tag { padding-top: 0; }
  .hub-post__go { align-self: start; margin-top: 0.5rem; }
}
/* Exclusive: name and text stack beside the photograph */
@media (max-width: 1023.98px) {
  .hub-exc__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; align-items: start; }
  .hub-exc__row--media { grid-template-columns: minmax(0, 1fr) 13rem; grid-template-areas: "head media" "body media"; align-items: start; }
  .hub-exc__row--media .hub-exc__media { align-self: start; }
}
@media (max-width: 1023.98px) {
  .hub-exp__item--lead .hub-exp__card { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
  .hub-exp__item--lead .hub-exp__body { padding: 0; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hub-journey__route { font-size: 1.2rem; }
  /* the map column is narrow here: same treatment as a phone, larger labels for the eight main places */
  .hub-map__pin text { font-size: 19px; }
  .hub-map__pin--minor text { display: none; }
  .hub-map__pin--minor .hub-map__dot { r: 3.5; }
  .hub-map__caption--minor { display: block; }
}
@media (max-width: 1023.98px) {
  .hub-chapter__head, .hub-chapter--arrival .hub-chapter__body { grid-template-columns: 1fr; align-items: start; }
  .hub-plates--nile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-plates--stay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-plates--stay .hub-plate__img { aspect-ratio: 3 / 2; }
  .hub-plates--road { grid-template-columns: 1fr 1fr; }
  .hub-plates--road > li:first-child { grid-column: 1 / -1; }
  .hub-plates--road > li:not(:first-child) .hub-plate__img { aspect-ratio: 4 / 3; }
  .hub-ledger__cap { width: 30%; }
}
@media (max-width: 899.98px) {
  /* The register becomes a stack: name, what it proves, then the names */
  .hub-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-ledger, .hub-ledger tbody, .hub-ledger tr, .hub-ledger th, .hub-ledger td { display: block; width: 100%; }
  .hub-ledger tbody tr { padding: 1.5rem 0; border-bottom: 1px solid var(--hb-line); }
  .hub-ledger tbody th, .hub-ledger tbody td { padding: 0; border: 0; }
  .hub-ledger__proof { margin: 0.6rem 0 0.9rem; max-width: 52ch; }
}
@media (max-width: 767.98px) {
  /* The map keeps its labels legible when it is narrow */
  .hub-map__pin text { font-size: 19px; }
  .hub-map__regions text { font-size: 15px; }
  /* Fourteen labels do not fit a phone-width map: the eight main places keep theirs,
     the six further places become smaller dots (all are named in the list below). */
  .hub-map__pin--minor text { display: none; }
  .hub-map__pin--minor .hub-map__dot { r: 3.5; }
  .hub-map__caption--minor { display: block; }
  .hub-place__body { grid-template-columns: 1fr; }
  .hub-place__go { padding-top: 0.25rem; }
  .hub-place__media { aspect-ratio: 16 / 9; }
  .hub-place--compact { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
  .hub-place--compact .hub-place__media { aspect-ratio: 1 / 1; }
  .hub-journey { grid-template-columns: minmax(0, 1fr) auto; }
  .hub-journey__days { grid-column: 1 / -1; }
  .hub-journey__name { grid-column: 1 / -1; }
  .hub-journey__go { grid-row: 2; grid-column: 2; }
  /* Plates that would be too small in a grid become a swipe strip */
  .hub-plates--nile, .hub-plates--stay { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); padding-right: clamp(1.25rem, 4vw, 2.5rem); }
  .hub-plates--nile::-webkit-scrollbar, .hub-plates--stay::-webkit-scrollbar { display: none; }
  .hub-plates--nile > li, .hub-plates--stay > li { flex: 0 0 78%; scroll-snap-align: start; }
  .hub-plates--nile > .hub-plate--wide { grid-column: auto; }
  .hub-plates--nile > .hub-plate--wide .hub-plate__img { aspect-ratio: 3 / 2; }
  .hub-plates--stay .hub-plate__img { aspect-ratio: 3 / 2; }
  .hub-plates--road { grid-template-columns: 1fr; }
  .hub-words { grid-template-columns: 1fr; }
  .hub-words li { padding-bottom: 1rem; border-bottom: 1px solid var(--hb-line-on-dark); }
  .hub-line { flex-direction: column; align-items: flex-start; }
  .hub-line li + li::before { width: 1px; height: 1.25rem; margin: 0.4rem 0 0.4rem 0.35rem; }
  .hub-index__row, .hub-index__item--lead .hub-index__row { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
  .hub-index__media, .hub-index__item--lead .hub-index__media { aspect-ratio: 16 / 10; }
  .hub-index__go { margin-top: 0.25rem; }
  .hub-route { grid-template-columns: 1fr; gap: 0.6rem; }
  /* Journeys: one column, no stagger */
  .hub-paths { grid-template-columns: 1fr; row-gap: 3rem; padding-bottom: 0; }
  .hub-path:nth-child(even) { transform: none; }
  .hub-built__item { grid-template-columns: 1fr; }
  /* Comparison: one column of facts */
  .hub-cmp tbody tr { grid-template-columns: 1fr; }
  .hub-cmp td:nth-child(3), .hub-cmp td:nth-child(4) { margin-bottom: 1rem; }
  .hub-days a { grid-template-columns: 3.2rem minmax(0, 1fr); }
  /* Exclusive: photograph first, then the name and the text */
  .hub-exc__row--media { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "head" "body"; gap: 1rem; }
  .hub-exc__row--media .hub-exc__media { aspect-ratio: 16 / 10; }
  /* Experiences: the five plates become compact rows — thumbnail beside the text; the lead stays a full plate */
  .hub-exp { grid-template-columns: 1fr; row-gap: 0; }
  .hub-exp__item, .hub-exp__item:nth-child(n+5) { grid-column: 1 / -1; }
  .hub-exp__item--lead { padding-bottom: 2rem; }
  .hub-exp__item:not(.hub-exp__item--lead) { border-top: 1px solid var(--hb-line); }
  .hub-exp__item:not(.hub-exp__item--lead):last-child { border-bottom: 1px solid var(--hb-line); }
  .hub-exp__item:not(.hub-exp__item--lead) .hub-exp__card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.4rem 0; }
  .hub-exp__item:not(.hub-exp__item--lead) .hub-exp__media, .hub-exp__item:nth-child(n+5) .hub-exp__media { aspect-ratio: 1 / 1; }
  .hub-exp__item:not(.hub-exp__item--lead) .hub-exp__body { padding-top: 0; }
  .hub-exp__item:not(.hub-exp__item--lead) .hub-exp__name { font-size: 1.55rem; }
  .hub-exp__item:not(.hub-exp__item--lead) .hub-exp__tags { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: 0.7rem; padding-top: 0.6rem; }
  .hub-jumps { font-size: 0.7rem; letter-spacing: 0.12em; }
  .hub-close__actions { flex-direction: column; align-items: stretch; }
  .hub-close__actions .hb-cta { justify-content: center; }
  .hub-close__direct { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-index__media img, .hub-index__go .hb-arrow, .hub-close__next a span, .hub-path__media img, .hub-path__go .hb-arrow, .hub-exp__media img, .hub-exp__go .hb-arrow, .hub-exc__media img, .hub-post__go .hb-arrow { transition: none; }
}