@charset "utf-8";
/* AL ZOHRA TRAVEL & TOURS (Pvt.) Ltd — DESIGN SYSTEM
   Integrated Travel Management & Corporate Aviation.
   Hand-written. No frameworks, no preprocessor, no build step, no CDN.
   Palette sampled from the client's brand PDF (logo red #FF2F1E).

   Sections: 01 tokens / 02 reset / 03 type / 04 layout / 05 utilities /
   06 buttons / 07 section head / 08 header+nav / 09 hero /
   11 IMAGE REVEAL (.rv) / 12 cards / 13 stats / 15 page hero+breadcrumb /
   16 accordion / 17 forms / 18 cta / 19 gallery+lightbox /
   19B trust strip, accreditation grid, LOGO TILE + LOGO WALL,
       destination chips, diplomatic missions, chairman message,
       sticky anchor nav, roadmap, metric band extensions /
   19C WHATSAPP FLOAT / 20 footer / 21 progress / 22 reveal+keyframes /
   23 reduced motion + print */

/* ---------- 01  TOKENS ---------- */
:root {
  /* ---- Brand red (sampled from the logo) ---- */
  --red-50:  #FFF4F2;
  --red-100: #FFE1DD;
  --red-200: #FFC3BC;
  --red-500: #FF5A4C;
  --red-600: #FF2F1E;   /* THE LOGO RED — sampled from the final brand PDF. 3.7:1 on white, so display type, marks and large headings only. */
  --red-700: #D91B0C;   /* buttons carrying white text — 5.1:1 */
  --red-800: #A81306;   /* red text at body size on light — 7.6:1 */
  --red-900: #6E0C03;

  /* ---- Warm neutrals (red-tinted, never cold blue-grey) ---- */
  --ink-900: #14100F;
  --ink-800: #1F1918;
  --ink-700: #2E2725;
  --ink-600: #453D3B;
  --ink-500: #5B5250;
  --ink-400: #7C7370;
  --ink-300: #A9A19E;
  --ink-200: #D6D0CE;
  --ink-100: #EDE9E8;
  --mist:    #FAF8F7;
  --paper:   #FFFFFF;

  /* ---- Heritage accent (seasoning only) ---- */
  --gold:      #C6A15B;
  --gold-soft: rgba(198, 161, 91, .34);

  /* ---- Semantic ---- */
  --bg:            var(--paper);
  --text:          var(--ink-600);
  --heading:       var(--ink-900);
  --muted:         var(--ink-500);
  --hairline:      rgba(20, 16, 15, .10);
  --hairline-soft: rgba(20, 16, 15, .06);
  --hairline-dark: rgba(255, 255, 255, .12);
  --focus:         var(--red-600);
  --danger:        #C2261B;
  --success:       #1F7A4D;

  /* ---- Signature gradients ---- */
  --grad-red:  linear-gradient(135deg, var(--red-600) 0%, var(--red-800) 100%);
  --grad-red-h:linear-gradient(135deg, var(--red-500) 0%, var(--red-700) 100%);
  --grad-ink:  linear-gradient(160deg, var(--ink-900) 0%, #241B19 100%);
  --grad-text: linear-gradient(120deg, var(--red-600) 0%, var(--red-800) 70%);

  /* ---- Type ---- */
  --font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-sys);

  --fs-xs:   .75rem;
  --fs-sm:   .8125rem;
  --fs-cap:  .875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1rem, .18vw + .96rem, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, .4vw + .98rem, 1.1875rem);
  --fs-xl:   clamp(1.1875rem, .7vw + 1.03rem, 1.375rem);
  --fs-h5:   clamp(1.0625rem, .5vw + .95rem, 1.25rem);
  --fs-h4:   clamp(1.25rem, .9vw + 1.05rem, 1.625rem);
  --fs-h3:   clamp(1.5rem, 1.5vw + 1.1rem, 2.125rem);
  --fs-h2:   clamp(1.9rem, 2.6vw + 1.1rem, 3.05rem);
  --fs-h1:   clamp(2.3rem, 3.8vw + 1.1rem, 3.9rem);
  /* Capped at 4.55rem, not 5rem: the hero column is ~563px at 1440 and at the
     old size "Travel Without" measured 594px, so the third line broke into
     three. This keeps that line to two. Only .hero__title uses this. */
  --fs-hero: clamp(2.5rem, 5.4vw, 4.55rem);

  --lh-tight: 1.06;
  --lh-snug:  1.18;
  --lh-head:  1.28;
  --lh-body:  1.72;
  --ls-tight: -.022em;
  --ls-head:  -.015em;
  --ls-caps:  .16em;

  /* ---- Spacing scale ---- */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  2rem;
  --sp-8:  2.5rem;
  --sp-9:  3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6rem;
  --sp-13: 8rem;

  --section-y:  clamp(3.5rem, 7vw, 7rem);
  --section-y-lg: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.15rem, 4vw, 3rem);

  /* ---- Widths ---- */
  --w-container: 1240px;
  --w-wide:      1440px;
  --w-narrow:    820px;
  --w-text:      66ch;

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- Shadows (warm, layered) ---- */
  --sh-1: 0 1px 2px rgba(20,16,15,.05), 0 1px 3px rgba(20,16,15,.04);
  --sh-2: 0 2px 4px rgba(20,16,15,.04), 0 6px 14px rgba(20,16,15,.06);
  --sh-3: 0 4px 8px rgba(20,16,15,.05), 0 14px 30px rgba(20,16,15,.08);
  --sh-4: 0 10px 20px rgba(20,16,15,.07), 0 28px 60px rgba(20,16,15,.12);
  --sh-red: 0 14px 34px rgba(217,27,12,.24);
  --sh-red-sm: 0 6px 16px rgba(217,27,12,.20);

  /* ---- Easing / duration ---- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.35,.5,1);
  --t-fast: .18s;
  --t-mid:  .32s;
  --t-slow: .6s;
  /* The two transition lists that repeat all over this sheet. Naming them
     once keeps the file inside its size budget and means a change to the
     house hover feel is a one-line edit rather than a search-and-replace. */
  --tr-move: transform var(--t-mid) var(--ease-out);
  --tr-lift: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);

  /* ---- Chrome ---- */
  --header-h: 64px;
  --z-header: 100;
  --z-drawer: 120;
  --z-lightbox: 140;
  --z-progress: 150;

  /* ---- Grain (dark sections) ---- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}

/* ---------- 02  RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }

body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
/* `clip` (not `hidden`) so position:sticky keeps working inside the page */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

body.is-locked { overflow: hidden; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: var(--red-800); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--red-900); }

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

table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }
.on-dark :focus-visible,
.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--red-500); }

::selection { background: var(--red-600); color: #fff; }

/* Skip link */
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 200; padding: .7rem 1.1rem; background: var(--ink-900); color: #fff; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top var(--t-fast) var(--ease-out); }
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* ---------- 03  BASE TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5,
.h-hero, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-display); color: var(--heading); font-weight: 600; line-height: var(--lh-head); letter-spacing: var(--ls-head); text-wrap: balance; }

.h-hero, .hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 600; }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); font-weight: 600; }

p { max-width: var(--w-text); }
p + p { margin-top: var(--sp-4); }

.lede { font-size: var(--fs-lg); line-height: 1.68; color: var(--ink-600); max-width: 62ch; }
.lede--lg { font-size: var(--fs-xl); line-height: 1.6; }

.text-muted { color: var(--muted); }
.text-red    { color: var(--red-700); }
.text-center { text-align: center; }
.text-balance{ text-wrap: balance; }
.mx-auto     { margin-inline: auto; }

strong, b { font-weight: 600; color: var(--ink-800); }

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

/* Prose block for long-form copy */
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-9); }
.prose h3 { margin-top: var(--sp-7); }
.prose ul { padding-left: 1.15rem; list-style: none; }
.prose ul li { position: relative; padding-left: 1.15rem; margin-top: var(--sp-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--red-600); }

/* Small-caps label */
.label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-500); }

/* ---------- 04  LAYOUT ---------- */
.container { width: 100%; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide   { max-width: var(--w-wide); }
.container--narrow { max-width: var(--w-narrow); }

.section { position: relative; padding-block: var(--section-y); }
.section--lg    { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--mist  { background: var(--mist); }

.section--dark { background: var(--grad-ink); color: var(--ink-200); isolation: isolate; }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: #fff; }
.section--dark p, .on-dark p { color: var(--ink-200); }
.section--dark .lede, .on-dark .lede { color: var(--ink-200); }
.section--dark a:not(.btn), .on-dark a:not(.btn) { color: var(--red-500); }
.section--dark .text-muted, .on-dark .text-muted { color: var(--ink-300); }

/* grain overlay for dark surfaces */
.section--dark::before,
.grain::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .035; pointer-events: none; z-index: -1; mix-blend-mode: overlay; }
.grain { position: relative; isolation: isolate; }

.section--divider { border-top: 1px solid var(--hairline-soft); }

/* Grids */
.grid { display: grid; gap: var(--sp-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.grid--gap-lg { gap: var(--sp-7); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--sp-6); }
  .grid--gap-lg { gap: var(--sp-8); }
}

/* Two-column split: text + media */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--60 { grid-template-columns: 1.25fr 1fr; }
  .split--40 { grid-template-columns: 1fr 1.25fr; }
  .split--sticky { align-items: start; }
  .split--sticky .split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
  .split__media--first { order: -1; }
}

/* ---------- 05  UTILITIES ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster--between { justify-content: space-between; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }

.rule { height: 1px; border: 0; background: var(--hairline); margin-block: var(--sp-8); }
.rule--gold { background: linear-gradient(90deg, var(--gold), transparent); height: 1px; }
.section--dark .rule { background: var(--hairline-dark); }

/* Pill tag */
.tag { display: inline-flex; align-items: center; gap: .45em; padding: .38em .8em; border-radius: var(--r-full); background: var(--red-50); color: var(--red-800); border: 1px solid var(--red-100); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; }
.tag--gold { background: rgba(198,161,91,.10); color: #7A6127; border-color: var(--gold-soft); }
.section--dark .tag, .on-dark .tag { background: rgba(255,255,255,.07); color: #fff; border-color: var(--hairline-dark); }

/* Icon sizing + badge */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }
/* solid glyphs (brand marks) */
.icon--fill { fill: currentColor; stroke: none; }

.icon-badge { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-100); flex: none; }
.icon-badge--solid { background: var(--grad-red); color: #fff; border-color: transparent; box-shadow: var(--sh-red-sm); }
.icon-badge--lg    { width: 3.75rem; height: 3.75rem; border-radius: var(--r-lg); }
.section--dark .icon-badge, .on-dark .icon-badge { background: rgba(255,90,76,.14); color: var(--red-500); border-color: rgba(255,90,76,.22); }

/* Checklist */
.list-check { display: grid; gap: var(--sp-3); }
.list-check li { position: relative; padding-left: 2rem; color: var(--ink-600); }
.list-check li::before { content: ""; position: absolute; left: 0; top: .55em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--red-50); border: 1px solid var(--red-200); }
.list-check li::after { content: ""; position: absolute; left: .32rem; top: .82em; width: .5rem; height: .28rem; border-left: 2px solid var(--red-700); border-bottom: 2px solid var(--red-700); transform: rotate(-45deg); }
.section--dark .list-check li, .on-dark .list-check li { color: var(--ink-200); }
.section--dark .list-check li::before, .on-dark .list-check li::before { background: rgba(255,90,76,.16); border-color: rgba(255,90,76,.3); }
.section--dark .list-check li::after, .on-dark .list-check li::after { border-color: var(--red-500); }

/* Numbered feature list */
.list-num { counter-reset: n; display: grid; gap: var(--sp-6); }
.list-num > li { counter-increment: n; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); }
.list-num > li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-cap); letter-spacing: .1em; color: var(--red-800); padding-top: .28em; }

/* ---------- 06  BUTTONS ---------- */
.btn { --btn-py: .85rem; --btn-px: 1.6rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: var(--btn-py) var(--btn-px); border-radius: var(--r-sm); font-family: var(--font-display); font-size: var(--fs-cap); font-weight: 600; letter-spacing: .015em; line-height: 1.2; text-decoration: none; text-align: center; border: 1px solid transparent; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: var(--tr-move); }
.btn:hover .icon { transform: translateX(3px); }

.btn--primary { background-image: var(--grad-red); color: #fff; box-shadow: var(--sh-red-sm); }
.btn--primary:hover { background-image: var(--grad-red-h); box-shadow: var(--sh-red); color: #fff; }

.btn--secondary { background: var(--paper); color: var(--ink-900); border-color: var(--ink-200); box-shadow: var(--sh-1); }
.btn--secondary:hover { border-color: var(--red-200); color: var(--red-800); box-shadow: var(--sh-2); }

.btn--light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(6px); }
.btn--light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }

.btn--solid-light { background: #fff; color: var(--ink-900); }
.btn--solid-light:hover { background: var(--red-50); color: var(--red-800); }

.btn--sm { --btn-py: .6rem; --btn-px: 1.1rem; font-size: var(--fs-sm); }
.btn--lg { --btn-py: 1.05rem; --btn-px: 2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

/* Text link with sliding arrow */
.btn-arrow { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-display); font-size: var(--fs-cap); font-weight: 600; letter-spacing: .02em; color: var(--red-700); text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t-mid) var(--ease-out), color var(--t-fast) var(--ease-out); }
.btn-arrow .icon { transition: var(--tr-move); }
.btn-arrow:hover { background-size: 100% 1px; color: var(--red-800); }
.btn-arrow:hover .icon { transform: translateX(4px); }
.section--dark .btn-arrow, .on-dark .btn-arrow { color: var(--red-500); }
.section--dark .btn-arrow:hover, .on-dark .btn-arrow:hover { color: #fff; }

/* Circular icon-only button */
.btn-round { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-800); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.btn-round:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; transform: translateY(-2px); }

/* ---------- 07  EYEBROW + SECTION HEAD ---------- */
.eyebrow { display: inline-flex; align-items: baseline; gap: .6em; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-500); padding-bottom: .7rem; border-bottom: 1px solid var(--gold-soft); max-width: none; }
.eyebrow__num { color: var(--red-800); }
.eyebrow__num::after { content: "\2014"; margin-left: .5em; color: var(--gold); }
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--ink-300); border-bottom-color: rgba(198,161,91,.42); }
.section--dark .eyebrow__num, .on-dark .eyebrow__num { color: var(--red-500); }

.section-head { max-width: 46rem; }
.section-head > * + * { margin-top: var(--sp-4); }
.section-head .lede { margin-top: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

.section-head--split { display: grid; gap: var(--sp-5); max-width: none; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr); gap: var(--sp-9); }
  .section-head--split .section-head__aside { padding-bottom: .35rem; }
}
/* Body of a section, sitting under its .section-head */
.section-body { margin-top: clamp(2.25rem, 4vw, 3.5rem); }

/* ---------- 08  HEADER / NAV / DROPDOWN / DRAWER ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), height var(--t-mid) var(--ease-out); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; }
/* Solid state — set by main.js past ~60px, and always on inner pages */
.header.is-solid,
.header--solid { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--hairline-soft); box-shadow: 0 1px 0 rgba(20,16,15,.03), 0 10px 30px -18px rgba(20,16,15,.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-solid, .header--solid { background: rgba(255,255,255,.98); }
}
@media (min-width: 1024px) {
  .header.is-solid { height: 68px; }
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; flex: none; }
.brand__mark { width: 42px; height: 36px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
/* Sized so AL-ZOHRA sits roughly as wide as the line beneath it — the sub is
   already at the smallest size that stays readable, so the name comes up to
   meet it rather than the sub shrinking further. */
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -.01em; color: var(--ink-900); white-space: nowrap; }
/* "TRAVEL & TOURS (PVT) LTD" is longer than the old "Travel & Tours", so the
   tracking comes down from .22em and the size from .62rem. This is as small as
   the line goes and still reads — the name above is what flexes to match it. */
.brand__sub { font-size: .5rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) {
  /* The mark lost its "GROUP" line, so it is 900x775 now rather than square;
     the box follows that ratio so the logo fills it instead of letterboxing. */
  .brand__mark { width: 48px; height: 41px; }
  .brand__name { font-size: 1.32rem; }
}
/* Over the transparent hero header, the brand text is white */
.header:not(.is-solid):not(.header--solid) .brand__name { color: #fff; }
.header:not(.is-solid):not(.header--solid) .brand__sub  { color: rgba(255,255,255,.72); }

/* Desktop nav */
.nav { display: none; }
@media (min-width: 1024px) { .nav { display: block; } }

.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.35rem); }
.nav__item { position: relative; }

.nav__link { display: inline-flex; align-items: center; gap: .35em; padding: .55rem .2rem; font-family: var(--font-display); font-size: .9rem; font-weight: 500; letter-spacing: .005em; color: var(--ink-700); text-decoration: none; white-space: nowrap; transition: color var(--t-fast) var(--ease-out); }
.nav__link::after { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .18rem; height: 2px; border-radius: 2px; background: var(--grad-red); transform: scaleX(0); transform-origin: left; transition: var(--tr-move); }
.nav__link:hover { color: var(--red-700); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--red-700); font-weight: 600; }

.header:not(.is-solid):not(.header--solid) .nav__link { color: rgba(255,255,255,.86); }
.header:not(.is-solid):not(.header--solid) .nav__link:hover,
.header:not(.is-solid):not(.header--solid) .nav__link[aria-current="page"] { color: #fff; }
.header:not(.is-solid):not(.header--solid) .nav__link::after { background: #fff; }

.nav__caret { width: .68em; height: .68em; transition: var(--tr-move); }
.nav__item--drop.is-open .nav__caret { transform: rotate(180deg); }

/* Dropdown */
.dropdown { position: absolute; top: calc(100% + .55rem); left: 50%; width: min(20rem, 80vw); padding: .5rem; background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); box-shadow: var(--sh-4); opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility var(--t-mid); z-index: 2; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.nav__item--drop.is-open > .dropdown,
.nav__item--drop:hover > .dropdown,
.nav__item--drop:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown__link { display: block; padding: .68rem .8rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-800); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.dropdown__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ink-900); }
.dropdown__meta { display: block; font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.4; margin-top: .12rem; }
.dropdown__link:hover,
.dropdown__link:focus-visible { background: var(--red-50); color: var(--red-800); }
.dropdown__link:hover .dropdown__title { color: var(--red-800); }

/* Header actions */
.header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }
/* the Group Portal button needs more room than 1024px offers */
.header__cta--alt { display: none; }
@media (min-width: 1200px) { .header__cta--alt { display: inline-flex; } }
.header:not(.is-solid):not(.header--solid) .header__cta.btn--secondary { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }

/* Hamburger */
.nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); border: 1px solid var(--hairline); color: var(--ink-900); background: rgba(255,255,255,.6); transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.header:not(.is-solid):not(.header--solid) .nav-toggle { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.nav-toggle__box { position: relative; width: 20px; height: 14px; }
.nav-toggle__bar { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6px; }
.nav-toggle__bar:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20,16,15,.55); opacity: 0; transition: opacity var(--t-mid) var(--ease-out); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(23rem, 88vw); display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--sh-4); transform: translateX(100%); transition: var(--tr-move); overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline-soft); }
.drawer__body { padding: var(--sp-5); flex: 1; }
.drawer__list { display: grid; gap: .15rem; }
.drawer__link { display: block; padding: .85rem .6rem; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink-800); text-decoration: none; border-bottom: 1px solid var(--hairline-soft); }
.drawer__link[aria-current="page"] { color: var(--red-700); font-weight: 600; }
.drawer__link:hover { color: var(--red-700); }
.drawer__sub { display: grid; gap: .1rem; padding: .25rem 0 .5rem .9rem; margin-left: .3rem; border-left: 1px solid var(--red-100); }
.drawer__sub .drawer__link { font-size: .95rem; padding: .58rem .6rem; border-bottom: 0; color: var(--ink-600); }
.drawer__foot { padding: var(--sp-5); border-top: 1px solid var(--hairline-soft); display: grid; gap: var(--sp-4); background: var(--mist); }
.drawer__contact { display: grid; gap: .35rem; font-size: var(--fs-cap); }
.drawer__contact a { color: var(--ink-700); text-decoration: none; }
.drawer__contact a:hover { color: var(--red-700); }
@media (min-width: 1024px) { .drawer { display: none; } }

/* ---------- 09  HERO ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-900); color: var(--ink-200); padding-top: calc(var(--header-h) + clamp(2.5rem, 8vw, 5.5rem)); padding-bottom: clamp(3rem, 8vw, 6rem); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .04; z-index: -1; pointer-events: none; }
/* gradient mesh glow */
.hero__glow { position: absolute; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(72px); opacity: .55; }
.hero__glow--a { width: 46rem; height: 46rem; top: -18rem; left: -14rem; background: radial-gradient(circle at 50% 50%, rgba(217,27,12,.55), transparent 68%); animation: drift-a 22s var(--ease-in-out) infinite alternate; }
.hero__glow--b { width: 38rem; height: 38rem; right: -12rem; bottom: -16rem; background: radial-gradient(circle at 50% 50%, rgba(198,161,91,.28), transparent 66%); animation: drift-b 26s var(--ease-in-out) infinite alternate; }

.hero__inner { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
/* min-width:0 stops long words blowing the grid track out at 360px */
.hero__content { min-width: 0; }
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

.hero__eyebrow { display: inline-flex; align-items: center; gap: .6em; padding: .45rem .9rem .45rem .5rem; border-radius: var(--r-full); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__eyebrow b { color: var(--red-500); font-weight: 700; }
.hero__eyebrow .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--red-500); flex: none; margin-left: .35rem; box-shadow: 0 0 0 4px rgba(255,90,76,.18); }

.hero__title { color: #fff; margin-top: var(--sp-6); }
.hero__title .hero__line { display: block; }
.hero__title em { font-style: normal; color: var(--red-500); }
.hero__lede { margin-top: var(--sp-6); font-size: var(--fs-lg); color: var(--ink-200); max-width: 46ch; }
.hero__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.hero__meta { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--sp-6); border-top: 1px solid var(--hairline-dark); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.hero__meta-num { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: var(--ls-tight); color: #fff; line-height: 1.1; }
.hero__meta-label { font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); margin-top: .3rem; }

/* Hero media */
.hero__media { position: relative; }
/* when the hero photo is an .rv the reveal owns the entrance — no double-animation */
.js .hero__media--rv { opacity: 1; animation: none; }
.hero__frame { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.1); aspect-ratio: 16 / 11; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, rgba(20,16,15,.55) 100%); }
/* A credibility plate over the hero photo uses .rv-plate (section 11). */

/* 11  IMAGE REVEAL — .rv  THE image component of this site. Static image
   boxes were rejected by the client, so every <img> except the header
   logo and the hero photo lives inside .rv:
     <figure class="rv rv--4x3" data-parallax="6" style="--i:1">
       <img class="rv__img" src="…" width="1200" height="800" loading="lazy"
            decoding="async" alt="…"></figure>
   The frame wipes open (clip-path), scales up from .94 and fades in; the
   inner <img> starts over-scaled, drifts to rest, then keeps a slight
   scroll-linked parallax while on screen. Neighbours stagger via --i.
   No-JS default is the finished, visible image.                        */
.rv { --rv-r: var(--r-lg); position: relative; overflow: hidden; margin: 0; border-radius: var(--rv-r); background: var(--ink-100); isolation: isolate; }
.rv--xl { --rv-r: var(--r-xl); }
.rv--sm { --rv-r: var(--r-md); }
.rv--flat { --rv-r: 0px; }
.rv--3x2  { aspect-ratio: 3 / 2; }
.rv--4x3  { aspect-ratio: 4 / 3; }
.rv--1x1  { aspect-ratio: 1 / 1; }
.rv--16x9 { aspect-ratio: 16 / 9; }
.rv--3x4  { aspect-ratio: 3 / 4; }
/* clip-path would crop a box-shadow, so under .js the lift becomes a
   drop-shadow filter, which paints outside the clipped shape. */
.rv--shadow { box-shadow: var(--sh-4); }
.js .rv--shadow { box-shadow: none; filter: drop-shadow(0 10px 18px rgba(20,16,15,.10)) drop-shadow(0 26px 52px rgba(20,16,15,.16)); }
/* fills an absolutely-positioned bg slot (.cta-band__bg, .page-hero__bg) */
.rv--fill { height: 100%; --rv-r: 0px; background: var(--ink-900); }
.rv--ring   { border: 1px solid var(--hairline); }

.rv__img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--rv-y, 0%), 0) scale(var(--rv-s, 1)); transition: transform .6s var(--ease-out); }
.rv__img--top { object-position: top center; }

/* Darkening tint so white text can sit on top */
.rv--tint::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,15,0) 34%, rgba(20,16,15,.78) 100%); pointer-events: none; }
.rv--tint-full::before { background: linear-gradient(115deg, rgba(20,16,15,.86) 10%, rgba(20,16,15,.48) 100%); }

/* Caption / label riding on the image */
.rv__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(1rem, 2.4vw, 1.6rem); color: #fff; font-size: var(--fs-cap); line-height: 1.45; }
.rv__cap strong { display: block; font-family: var(--font-display); color: #fff; font-size: var(--fs-h5); }

/* Offset gold frame behind a reveal */
.rv-framed { position: relative; }
.rv-framed::before { content: ""; position: absolute; inset: auto -1rem -1rem auto; width: 62%; height: 62%; border: 1px solid var(--gold-soft); border-radius: var(--r-lg); z-index: -1; }
.rv-framed > .rv { position: relative; z-index: 1; }

/* Red stat plate overlapping a reveal (sibling of .rv in .rv-framed) */
.rv-plate { position: absolute; z-index: 3; right: clamp(-.75rem, -1.5vw, 0rem); bottom: clamp(-1.5rem, -2vw, -1rem); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--grad-red); color: #fff; box-shadow: var(--sh-red); max-width: 15rem; }
.rv-plate__num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.rv-plate__label { font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; margin-top: .35rem; opacity: .92; }

/* the reveal itself — JS-scoped, so no-JS sees the finished image */
.js .rv { --rv-s: 1.03; clip-path: inset(0 0 100% 0 round var(--rv-r)); -webkit-clip-path: inset(0 0 100% 0 round var(--rv-r)); transform: scale(.94); opacity: 0; transition: clip-path 1.05s var(--ease-out), -webkit-clip-path 1.05s var(--ease-out), transform 1.15s var(--ease-out), opacity .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); will-change: clip-path, transform, opacity; }
.js .rv[data-parallax] { --rv-s: 1.1; }
.js .rv--wipe-left  { clip-path: inset(0 100% 0 0 round var(--rv-r)); -webkit-clip-path: inset(0 100% 0 0 round var(--rv-r)); }
.js .rv--wipe-right { clip-path: inset(0 0 0 100% round var(--rv-r)); -webkit-clip-path: inset(0 0 0 100% round var(--rv-r)); }
.js .rv--wipe-open  { clip-path: inset(50% 0 50% 0 round var(--rv-r)); -webkit-clip-path: inset(50% 0 50% 0 round var(--rv-r)); }

.js .rv.is-in { clip-path: inset(0 0 0 0 round var(--rv-r)); -webkit-clip-path: inset(0 0 0 0 round var(--rv-r)); transform: none; opacity: 1; }
.js .rv:not(.is-in) .rv__img { --rv-s: 1.2; --rv-y: 3.5%; transition-duration: 1.35s; }

/* one-off gloss sweep as the frame finishes opening */
.js .rv::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-130%); background: linear-gradient(102deg, transparent 36%, rgba(255,255,255,.30) 50%, transparent 64%); }
.js .rv.is-in::after { animation: rv-shine 1.4s var(--ease-out) calc(var(--i, 0) * 120ms + .38s) both; }

/* hover zoom (opt-in) — rides the same custom property */
.rv--zoom:hover, a:hover > .rv--zoom, .card:hover .rv--zoom { --rv-s: 1.12; }

/* ---------- 12  CARDS ---------- */
.card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-2); border: 1px solid var(--hairline-soft); overflow: hidden; transition: var(--tr-lift); }
.card__body { padding: clamp(1.35rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-size: var(--fs-h4); }
.card__text { color: var(--ink-500); font-size: var(--fs-base); }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--sh-4); }

/* red gradient edge glow on hover */
.card--glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--red-600), rgba(198,161,91,.6) 55%, transparent 85%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--t-mid) var(--ease-out); pointer-events: none; }
.card--glow:hover::after { opacity: 1; }
.card--flat { box-shadow: none; background: var(--mist); border-color: var(--hairline-soft); }

/* Full-card link overlay (keeps one accessible link per card) */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }

/* ---- Feature card: an .rv photo panel with copy over it ---- */
.feature-card { position: relative; display: flex; flex-direction: column; min-height: 22rem; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: var(--ink-900); color: #fff; box-shadow: var(--sh-3); transition: var(--tr-lift); }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--sh-4), var(--sh-red-sm); }
.feature-card__media { position: absolute; inset: 0; z-index: -2; }
.feature-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,15,.26) 0%, rgba(20,16,15,.64) 46%, rgba(20,16,15,.94) 100%); }
.feature-card__body { margin-top: auto; padding: clamp(1.5rem, 3vw, 2.35rem); display: flex; flex-direction: column; gap: var(--sp-3); }
.feature-card__kicker { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold); }
.feature-card__title { font-size: clamp(1.3rem, 2vw, 1.75rem); color: #fff; letter-spacing: var(--ls-head); }
.feature-card__text { color: rgba(255,255,255,.80); font-size: var(--fs-base); max-width: 44ch; }
.feature-card__cta { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-cap); color: #fff; text-decoration: none; }
.feature-card__cta .icon { transition: var(--tr-move); }
.feature-card:hover .feature-card__cta { color: var(--red-500); }
.feature-card:hover .feature-card__cta .icon { transform: translateX(5px); }
@media (min-width: 1024px) { .feature-card { min-height: 25rem; } }

/* ---- Service card ---- */
.service-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(1.5rem, 2.6vw, 2.1rem); background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; transition: var(--tr-lift), border-color var(--t-mid) var(--ease-out); }
.service-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-red); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--red-100); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__title { font-size: var(--fs-h5); }
.service-card__text { color: var(--ink-500); font-size: var(--fs-base); }
.service-card--mist { background: var(--mist); }
.section--dark .service-card, .on-dark .service-card { background: rgba(255,255,255,.04); border-color: var(--hairline-dark); box-shadow: none; }
.section--dark .service-card__text, .on-dark .service-card__text { color: var(--ink-300); }

/* ---- Value card ---- */
.value-card { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--hairline-soft); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: var(--sp-4); transition: var(--tr-lift); }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.value-card__num { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; line-height: .85; letter-spacing: -.04em; color: var(--red-100); transition: color var(--t-mid) var(--ease-out); }
.value-card:hover .value-card__num { color: var(--red-200); }
.value-card__title { font-size: var(--fs-h4); }
.value-card__text { color: var(--ink-500); }

/* ---- Team card (photo or monogram) ---- */
.team-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--hairline-soft); box-shadow: var(--sh-1); transition: var(--tr-lift); }
.team-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
/* SWAP POINT: swap the .monogram span for <img class="team-card__img"> */
.team-card__portrait { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: grid; place-items: center; background: linear-gradient(165deg, var(--ink-800) 0%, var(--ink-900) 100%); }
.team-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1s var(--ease-out); }
.team-card:hover .team-card__img { transform: scale(1.04); }
.team-card__portrait--monogram::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(217,27,12,.24), transparent 62%); }
.team-card__portrait--monogram::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .05; }
.monogram { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(6.5rem, 34%, 9rem); aspect-ratio: 1; border-radius: 50%; background: var(--grad-red); color: #fff; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: .06em; line-height: 1; box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px rgba(198,161,91,.14), var(--sh-red); transition: transform var(--t-slow) var(--ease-spring); }
.team-card:hover .monogram { transform: scale(1.05); }
.monogram--sm { width: 3.25rem; font-size: 1rem; box-shadow: 0 0 0 1px var(--gold), var(--sh-red-sm); }
.team-card__body { padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.team-card__name { font-size: var(--fs-h5); }
.team-card__role { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-700); }
.team-card__text { color: var(--ink-500); font-size: var(--fs-base); margin-top: var(--sp-3); }
.team-card__meta { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--hairline-soft); font-size: var(--fs-sm); color: var(--ink-400); letter-spacing: .06em; text-transform: uppercase; }

/* ---- Crew: the wider team ------------------------------------------------
   Stadium-shaped cards, name at the top, portrait filling the base, and every
   other card dropped so the row reads as a group rather than a filing
   cabinet. Photographs are desaturated on purpose: thirteen portraits shot in
   one office still vary in white balance, and grey makes them one set.
   The tile colour comes in per card as --crew-bg; --crew-ink flips the text
   to white on the brand-red cards. --------------------------------------- */
/* Flex, not grid, for one reason: the last row never fills. Thirteen people
   over five columns leaves three on the bottom row, and a grid would push them
   to the left. Flex wrapping with justify-content lets that short row centre
   itself. Column count comes in as --crew-cols so the widths and the gap stay
   in step; change one breakpoint and the maths follows. */
.crew {
  --crew-gap: clamp(.7rem, 1.5vw, 1.15rem);
  --crew-cols: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--crew-gap); padding-bottom: clamp(1.5rem, 4vw, 3.25rem);
}
@media (min-width: 620px)  { .crew { --crew-cols: 3; } }
@media (min-width: 1000px) { .crew { --crew-cols: 5; } }

.crew__item {
  position: relative; display: flex; flex-direction: column; margin: 0;
  flex: 0 0 calc((100% - (var(--crew-cols) - 1) * var(--crew-gap)) / var(--crew-cols));
  aspect-ratio: 39 / 64; border-radius: 999px; overflow: hidden;
  background: var(--crew-bg, #e7e1d7); color: var(--crew-ink, var(--ink-900));
  padding: 0; text-align: center;
  transition: box-shadow var(--t-mid) var(--ease-out);
}
/* All the inset lives on the caption, and that is deliberate. Percentage
   padding on a FLEX ITEM resolves against the flex container, not the item, so
   putting it on .crew__item measured 20% of the whole row instead of 20% of
   one card and drove the portrait off the bottom. On the caption the
   containing block is the card, so the percentages mean what they say.
   The top inset matters: the pill's top is a semicircle, so a line set flush
   to it has almost no width. 20% of the card's width down is where the card
   has widened to roughly 80%, and 12% at the sides clears the curve. */
.crew__item > figcaption { padding: 20% 12% 0; }
/* The drop that gives the row its rhythm. This is margin, not transform, on
   purpose: .reveal.is-in sets `transform: none` at a higher specificity and
   would flatten a translate the moment each card animated in. */
.crew__item:nth-child(even) { margin-top: clamp(1rem, 3.2vw, 2.75rem); }
.crew__item:hover { box-shadow: 0 18px 40px -18px rgba(0,0,0,.65); }

/* Both are block: as inline spans they ran together into one paragraph and
   spilled past the curve. */
.crew__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(.68rem, 1.15vw, .8rem); letter-spacing: .03em; text-transform: uppercase; line-height: 1.22; text-wrap: balance; }
.crew__role { display: block; margin-top: .25rem; font-size: clamp(.56rem, .95vw, .66rem); line-height: 1.25; opacity: .7; text-wrap: balance; }

.crew__shot { position: relative; flex: 1; min-height: 0; margin-top: .5rem; display: grid; place-items: end center; }
.crew__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1) contrast(1.04); transition: filter var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.crew__item:hover .crew__img { filter: grayscale(0) contrast(1); transform: scale(1.03); }

/* Stand-in until a portrait arrives: the initials, set large and low so the
   card still has weight at the base where the shoulders would be. */
.crew__initials { align-self: end; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; letter-spacing: .02em; opacity: .17; padding-bottom: clamp(1.2rem, 3.5vw, 2.4rem); }

/* ---- Airline awards ----------------------------------------------------
   Certificates are documents, not photographs: object-fit is `contain` on a
   paper background so nothing is ever cropped away — a cropped certificate
   loses the very wording that makes it worth showing. Each tile is a real
   <button> feeding the shared lightbox, same as the gallery.
   Saudia gets the featured card because it is the flagship relationship. --- */
.awards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .awards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.award { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--sh-1); cursor: pointer; transition: var(--tr-lift); font: inherit; color: inherit; }
.award:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.award:focus-visible { outline: 2px solid var(--red-700); outline-offset: 3px; }
.award__shot { display: block; position: relative; aspect-ratio: 4 / 3; background: #f4f5f7; border-bottom: 1px solid var(--hairline-soft); overflow: hidden; }
.award__img { display: block; width: 100%; height: 100%; object-fit: contain; padding: .5rem; transition: transform var(--t-slow) var(--ease-out); }
.award:hover .award__img { transform: scale(1.03); }
.award__body { padding: clamp(.8rem, 1.6vw, 1.05rem); display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.award__airline { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-700); }
.award__title { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.award__year { margin-top: auto; padding-top: .5rem; font-size: var(--fs-xs); color: var(--ink-400); letter-spacing: .06em; text-transform: uppercase; }

/* Featured card — full width, certificate beside the copy on wide screens. */
.award--feature { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .award--feature { flex-direction: row; align-items: stretch; }
  .award--feature .award__shot { flex: 0 0 46%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--hairline-soft); }
  .award--feature .award__body { justify-content: center; padding: clamp(1.5rem, 3.4vw, 2.75rem); gap: .5rem; }
}
.award--feature .award__title { font-size: var(--fs-h4); }
.award--feature .award__lede { color: var(--ink-500); margin-top: .35rem; }
.award__badge { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-top: .75rem; padding: .4rem .8rem; border-radius: 999px; background: var(--grad-red); color: #fff; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; box-shadow: var(--sh-red-sm); }
.award__badge .icon { width: 1em; height: 1em; }

/* ---- Info tile (contact rows etc.) ---- */
.info-tile { display: flex; gap: var(--sp-4); padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--hairline-soft); box-shadow: var(--sh-1); transition: var(--tr-lift); }
.info-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.info-tile__label { font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-400); font-weight: 600; }
.info-tile__value { margin-top: .35rem; color: var(--ink-800); font-weight: 500; }
.info-tile__value a { color: var(--ink-800); text-decoration: none; }
.info-tile__value a:hover { color: var(--red-700); }

/* ---------- 13  STAT BAND ---------- */
.stat-band { position: relative; }
.stat-band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
@media (min-width: 900px) {
  .stat-band__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7); }
}
.stat { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--hairline-dark); }
.stat::before { content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 2px; background: var(--grad-red); transform-origin: left; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: var(--ls-tight); color: #fff; font-variant-numeric: tabular-nums; }
.stat__num .stat__suffix { color: var(--red-500); }
.stat__label { margin-top: var(--sp-3); font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); }
.stat__note { margin-top: .5rem; font-size: var(--fs-sm); color: var(--ink-500); }
/* light variant */
.stat-band--light .stat__num { color: var(--ink-900); }
.stat-band--light .stat__label { color: var(--ink-500); }
.stat-band--light .stat { border-top-color: var(--hairline); }

/* ---------- 15  PAGE HERO + BREADCRUMB ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-900); color: var(--ink-200); padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(20,16,15,.94) 12%, rgba(20,16,15,.74) 55%, rgba(20,16,15,.55) 100%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); opacity: .04; pointer-events: none; }
.page-hero__inner { max-width: 52rem; }
.page-hero__title { color: #fff; margin-top: var(--sp-5); font-size: var(--fs-h1); }
.page-hero__lede { margin-top: var(--sp-5); font-size: var(--fs-lg); color: var(--ink-200); max-width: 48ch; }
.page-hero__actions { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.page-hero--tall { padding-bottom: clamp(4rem, 9vw, 7rem); }

.breadcrumb { font-size: var(--fs-cap); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb__list li { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.6); }
.breadcrumb__list a { color: rgba(255,255,255,.72); text-decoration: none; }
.breadcrumb__list a:hover { color: #fff; }
.breadcrumb__list li + li::before { content: "/"; color: rgba(255,255,255,.32); }
.breadcrumb__list [aria-current="page"] { color: var(--red-500); }

/* ---------- 16  ACCORDION ---------- */
.accordion { display: grid; gap: var(--sp-3); }
.accordion__item { background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); }
.accordion__item[open] { border-color: var(--red-200); box-shadow: var(--sh-2); }
.accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.6rem); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); color: var(--ink-900); text-align: left; list-style: none; cursor: pointer; }
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger:hover { color: var(--red-800); }
.accordion__icon { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--red-50); border: 1px solid var(--red-100); transition: background-color var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--red-700); border-radius: 1px; transform: translate(-50%, -50%); transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.accordion__icon::before { width: .7rem; height: 2px; }
.accordion__icon::after  { width: 2px; height: .7rem; }
.accordion__item[open] .accordion__icon { background: var(--red-600); border-color: var(--red-600); }
.accordion__item[open] .accordion__icon::before { background: #fff; }
.accordion__item[open] .accordion__icon::after  { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.accordion__panel { padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink-500); }
.accordion__panel > * + * { margin-top: var(--sp-4); }
.accordion__item[open] .accordion__panel { animation: panel-in var(--t-mid) var(--ease-out) both; }

/* Accordion trigger sub-line */
.accordion__sub { display: block; margin-top: .3rem; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; letter-spacing: .01em; color: var(--ink-500); text-transform: none; }
.accordion__title-wrap { display: flex; flex-direction: column; }

/* ---------- 17  FORMS ---------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: .45rem; }
.field__label { font-family: var(--font-display); font-size: var(--fs-cap); font-weight: 600; color: var(--ink-800); letter-spacing: .01em; }
.field__req { color: var(--red-600); }
.field__hint { font-size: var(--fs-sm); color: var(--ink-400); }

.input, .textarea, .select { width: 100%; padding: .85rem 1rem; background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--r-sm); color: var(--ink-900); font-size: var(--fs-base); line-height: 1.5; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-300); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(217,27,12,.14); }
.textarea { min-height: 9.5rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 2.75rem; }
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--danger); background: #FFF7F6; }
.field.has-error .input:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 3px rgba(194,38,27,.16); }
.field__error { display: none; align-items: center; gap: .4em; font-size: var(--fs-sm); font-weight: 500; color: var(--danger); }
.field.has-error .field__error { display: flex; }

.checkbox { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-cap); color: var(--ink-600); }
.checkbox input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--red-600); }

.form__note { font-size: var(--fs-sm); color: var(--ink-500); }
.form-status { display: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-cap); border: 1px solid; }
.form-status.is-visible { display: block; }
.form-status--ok    { background: #F1F9F4; border-color: #BFE3CD; color: var(--success); }
.form-status--error { background: var(--red-50); border-color: var(--red-200); color: var(--red-800); }

/* Panel wrapper for forms on light backgrounds */
.panel { padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.panel--flat { box-shadow: none; background: var(--mist); }
.panel--dark { background: var(--ink-800); border-color: var(--hairline-dark); color: var(--ink-200); box-shadow: none; }

/* ---------- 18  CTA BAND ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); color: #fff; background: var(--ink-900); }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(20,16,15,.95) 20%, rgba(140,23,16,.78) 100%); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); opacity: .05; }
.cta-band__inner { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: var(--sp-9); }
  .cta-band__actions { justify-self: end; }
}
.cta-band__title { color: #fff; font-size: var(--fs-h2); }
.cta-band__text { color: rgba(255,255,255,.82); margin-top: var(--sp-4); max-width: 48ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cta-band--flush { border-radius: 0; }

/* ---------- 19  GALLERY + LIGHTBOX ---------- */
.gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
.gallery__item { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--ink-100); cursor: zoom-in; aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20,16,15,.7)); opacity: 0; transition: opacity var(--t-mid) var(--ease-out); }
.gallery__item:hover::after { opacity: 1; }
.gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--sp-4); text-align: left; font-size: var(--fs-sm); font-weight: 600; color: #fff; transform: translateY(.5rem); opacity: 0; transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); }
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; transform: translateY(0); }
.gallery__item--tall { grid-row: span 2; aspect-ratio: 4 / 6; }
@media (max-width: 639px) { .gallery__item--tall { grid-row: auto; aspect-ratio: 4 / 3; } }

.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(11, 8, 8, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--t-mid) var(--ease-out), visibility var(--t-mid); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(72rem, 100%); }
.lightbox__img { max-width: 100%; max-height: 78vh; width: auto; border-radius: var(--r-md); box-shadow: 0 30px 90px rgba(0,0,0,.6); transform: scale(.96); transition: var(--tr-move); }
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption { margin-top: var(--sp-4); text-align: center; color: rgba(255,255,255,.78); font-size: var(--fs-cap); }
.lightbox__close { position: absolute; top: clamp(.75rem, 3vw, 1.75rem); right: clamp(.75rem, 3vw, 1.75rem); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background-color var(--t-fast) var(--ease-out); }
.lightbox__close:hover { background: var(--red-600); border-color: var(--red-600); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background-color var(--t-fast) var(--ease-out); }
.lightbox__nav:hover { background: var(--red-600); border-color: var(--red-600); }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

/* ---------- 19B  CREDENTIAL / AVIATION / LEADERSHIP COMPONENTS ---------- */

/* ---- Trust strip: accreditation names in one line under the hero ---- */
/* Column gap caps at 1.75rem, not 2.25rem: the six badges total ~1157px and the
   container is 1144px at 1440, so the wider gap dropped POEPA alone onto a
   second row. Keep it here if a badge label ever gets longer. */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) clamp(1rem, 3vw, 1.75rem); }
.trust__item { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.trust__item .icon { color: var(--red-600); width: 1.05em; height: 1.05em; }
.trust__item b { color: var(--ink-800); font-weight: 600; letter-spacing: inherit; }
.section--dark .trust__item, .on-dark .trust__item { color: var(--ink-300); }
.section--dark .trust__item b, .on-dark .trust__item b { color: #fff; }
.section--dark .trust__item .icon, .on-dark .trust__item .icon { color: var(--red-500); }

/* ---- Accreditation badge grid ---- */
.accred { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .accred { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1100px) { .accred { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.accred--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .accred--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.accred__item { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.1rem, 2.4vw, 1.6rem); background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; transition: var(--tr-lift), border-color var(--t-fast) var(--ease-out); }
.accred__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-red); transform: scaleY(0); transform-origin: top; transition: transform var(--t-slow) var(--ease-out); }
.accred__item:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--red-100); }
.accred__item:hover::before { transform: scaleY(1); }
.accred__mark { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-sm); background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-100); flex: none; }
.accred__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); color: var(--ink-900); line-height: 1.3; letter-spacing: var(--ls-head); }
.accred__meta { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.5; }
.accred__id { margin-top: auto; padding-top: .6rem; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red-700); }
.accred--dark .accred__item { background: rgba(255,255,255,.04); border-color: var(--hairline-dark); box-shadow: none; }
.accred--dark .accred__name { color: #fff; }
.accred--dark .accred__meta { color: var(--ink-300); }
.accred--dark .accred__mark { background: rgba(255,90,76,.14); color: var(--red-500); border-color: rgba(255,90,76,.24); }
.accred--dark .accred__id { color: var(--red-500); }

/* LOGO TILE + LOGO WALL — every file in assets/img/logos/ (mismatched
   ratios, several with dark/coloured backgrounds baked in) sits on a
   WHITE rounded tile, contain-fitted, so the grid reads as one uniform
   wall. The tile stays white inside .section--dark — that is the point.
     <li class="logo-item" style="--i:3"><span class="logo-tile">
       <img class="logo-tile__img" src="assets/img/logos/iom.jpg" width="474"
         height="183" loading="lazy" decoding="async" alt="…"></span>
       <span class="logo-item__name">IOM</span></li>                      */
.logo-wall { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 900px)  { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* fixed-count variants for short rows */
.logo-wall--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .logo-wall--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.logo-wall--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .logo-wall--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-wall--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .logo-wall--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logo-wall--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.logo-item { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.logo-item__name { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; letter-spacing: .01em; color: var(--ink-600); text-align: center; }
.logo-item__role { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--red-800); text-align: center; }
.section--dark .logo-item__name, .on-dark .logo-item__name { color: var(--ink-300); }
.section--dark .logo-item__role, .on-dark .logo-item__role { color: var(--red-500); }

.logo-tile { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 3; padding: clamp(.85rem, 2.2vw, 1.5rem); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; transition: var(--tr-lift), border-color var(--t-fast) var(--ease-out); }
.logo-tile__img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform var(--t-slow) var(--ease-out), filter var(--t-mid) var(--ease-out); }
.logo-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--red-100); }
.logo-tile:hover .logo-tile__img { transform: scale(1.05); }
/* muted-by-default wall (optional, for very long grids) */
.logo-wall--muted .logo-tile__img { filter: saturate(.25) contrast(.95) opacity(.78); }
.logo-wall--muted .logo-tile:hover .logo-tile__img { filter: none; }
.logo-tile--square { aspect-ratio: 1 / 1; }
.logo-tile--wide   { aspect-ratio: 2 / 1; }
.logo-tile--flush  { box-shadow: none; border-color: var(--hairline-soft); }
a.logo-tile, .logo-item > a { text-decoration: none; }
.section--dark .logo-tile, .on-dark .logo-tile { border-color: transparent; box-shadow: 0 10px 26px -12px rgba(0,0,0,.7); }

/* DESTINATION / COUNTRY CHIP GRID (visa page). Carries NO prices — the
   client was explicit: no fee, rate or figure anywhere on that page.  */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: .55em; padding: .6rem 1.05rem; background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--r-full); font-family: var(--font-display); font-size: var(--fs-cap); font-weight: 600; letter-spacing: .01em; color: var(--ink-800); transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); }
.chip:hover { transform: translateY(-2px); background: var(--red-50); border-color: var(--red-200); color: var(--red-800); box-shadow: var(--sh-2); }
.chip__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--red-600); flex: none; }
.chip--gold .chip__dot { background: var(--gold); }
.chip--drop { background: var(--red-50); border-color: var(--red-200); color: var(--red-800); }
.chip .icon { width: 1em; height: 1em; color: var(--red-700); }
.section--dark .chip, .on-dark .chip { background: rgba(255,255,255,.05); border-color: var(--hairline-dark); color: #fff; }
.section--dark .chip:hover, .on-dark .chip:hover { background: rgba(255,90,76,.14); border-color: rgba(255,90,76,.3); color: #fff; }
.section--dark .chip .icon, .on-dark .chip .icon { color: var(--red-500); }

/* Chip grid variant — even columns instead of a flowing row */
.chips--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 640px)  { .chips--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chips--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chips--grid .chip { justify-content: flex-start; border-radius: var(--r-sm); }

/* ---- Diplomatic mission card (visa drop-box) ---- */
.mission { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(1.5rem, 3vw, 2.15rem); background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; transition: var(--tr-lift); }
.mission::after { content: ""; position: absolute; right: -3.5rem; top: -3.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(217,27,12,.10), transparent 70%); pointer-events: none; }
.mission:hover { transform: translateY(-5px); box-shadow: var(--sh-4); }
/* the mission's real crest/logo file, always on a white plate */
.mission__logo { display: grid; place-items: center; width: 5.5rem; height: 4rem; padding: .45rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-sm); flex: none; }
.mission__logo img { width: 100%; height: 100%; object-fit: contain; }
.mission__head { display: flex; align-items: center; gap: var(--sp-4); }
.mission__crest { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--grad-red); color: #fff; box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px rgba(198,161,91,.14); flex: none; }
.mission__name { font-size: var(--fs-h4); }
.mission__role { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-700); }
.mission__since { display: inline-flex; align-items: center; gap: .4em; align-self: flex-start; padding: .3em .75em; border-radius: var(--r-full); background: rgba(198,161,91,.12); border: 1px solid var(--gold-soft); color: #7A6127; font-size: var(--fs-sm); font-weight: 600; }
.mission__text { color: var(--ink-500); font-size: var(--fs-base); }
.section--dark .mission, .on-dark .mission { background: rgba(255,255,255,.05); border-color: var(--hairline-dark); box-shadow: none; }
.section--dark .mission__text, .on-dark .mission__text { color: var(--ink-300); }
.section--dark .mission__role, .on-dark .mission__role { color: var(--red-500); }
.section--dark .mission__since, .on-dark .mission__since { color: var(--gold); background: rgba(198,161,91,.14); }

/* ---- Chairman's message / signed statement ---- */
.message { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .message { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .message--flip .message__media { order: 2; }
}
.message__media { position: relative; }
.message__body { position: relative; }
.message__quote { position: relative; font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 500; line-height: 1.55; letter-spacing: var(--ls-head); color: var(--ink-800); max-width: 52ch; padding-top: var(--sp-6); }
.message__quote::before { content: "\201C"; position: absolute; left: -.06em; top: -.28em; font-family: var(--font-display); font-size: 5.5rem; line-height: 1; color: var(--red-100); z-index: -1; pointer-events: none; }
.message__text { margin-top: var(--sp-5); color: var(--ink-600); }
.message__sign { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.message__sign-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); color: var(--ink-900); line-height: 1.25; }
.message__sign-role { font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-700); font-weight: 600; margin-top: .2rem; }
.section--dark .message__quote, .on-dark .message__quote { color: #fff; }
.section--dark .message__quote::before, .on-dark .message__quote::before { color: rgba(255,90,76,.28); }
.section--dark .message__sign, .on-dark .message__sign { border-top-color: var(--hairline-dark); }
.section--dark .message__sign-name, .on-dark .message__sign-name { color: #fff; }
.section--dark .message__sign-role, .on-dark .message__sign-role { color: var(--red-500); }

/* ---- Sticky in-page anchor nav + scroll-spy ---- */
.anchor-nav { position: sticky; top: var(--header-h); z-index: 60; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hairline-soft); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .anchor-nav { background: var(--paper); }
}
.anchor-nav__scroll { display: flex; gap: .3rem; overflow-x: auto; padding-block: .6rem; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.anchor-nav__scroll::-webkit-scrollbar { display: none; }
.anchor-nav__link { flex: none; scroll-snap-align: start; padding: .5rem .9rem; border-radius: var(--r-full); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em; color: var(--ink-500); text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.anchor-nav__link:hover { background: var(--ink-100); color: var(--ink-900); }
.anchor-nav__link.is-active,
.anchor-nav__link[aria-current="true"] { background: var(--grad-red); color: #fff; box-shadow: var(--sh-red-sm); }
/* any element an anchor-nav link points at */
.anchor-target { scroll-margin-top: calc(var(--header-h) + 4.5rem); }

/* ---- Roadmap (strategic outlook) ---- */
.roadmap { display: grid; gap: var(--sp-6); position: relative; }
@media (min-width: 900px) { .roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); } }
.roadmap__step { position: relative; padding-top: var(--sp-6); border-top: 2px solid var(--hairline); }
.roadmap__step::before { content: ""; position: absolute; left: 0; top: -2px; width: 2.75rem; height: 2px; background: var(--grad-red); }
.roadmap__phase { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-700); }
.roadmap__title { font-size: var(--fs-h4); margin-top: var(--sp-2); }
.roadmap__text { color: var(--ink-500); margin-top: var(--sp-3); }
.section--dark .roadmap__step, .on-dark .roadmap__step { border-top-color: var(--hairline-dark); }
.section--dark .roadmap__phase, .on-dark .roadmap__phase { color: var(--red-500); }
.section--dark .roadmap__text, .on-dark .roadmap__text { color: var(--ink-300); }

/* ---- Stat band extensions: currency metrics ---- */
.stat-band__grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .stat-band__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the USD figures are long — they get their own smaller size so 4 digits
   groups never overflow a 1/3 column at 640px */
.stat--currency .stat__num { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.stat--sm .stat__num { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.stat__pre { display: block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--red-500); margin-bottom: .35rem; }
.stat-band--light .stat__pre { color: var(--red-700); }

/* 19C  WHATSAPP FLOAT — client-mandated, on EVERY page. Fixed
   bottom-right, idle pulse, label expands on hover/focus. z-index 95
   sits UNDER the mobile drawer (--z-drawer:120), and the footer bar
   reserves room on small screens so it never covers a footer link.   */
:root { --float-x: clamp(1rem, 3vw, 2rem); --float-y: clamp(1rem, 3vw, 2rem); }

/* The button is anchored by its RIGHT edge, so it grows leftward on hover
   while the glyph stays exactly where the eye left it. No overflow:hidden
   on the button itself — that would crop the pulse ring — the label does
   its own clipping with max-width. */
.wa { position: fixed; right: var(--float-x); bottom: var(--float-y); z-index: 95; display: flex; align-items: center; width: 3.5rem; height: 3.5rem; padding-left: 1.05rem; border-radius: var(--r-full); background-image: var(--grad-red); color: #fff; text-decoration: none; box-shadow: var(--sh-red); transition: width .45s var(--ease-out), box-shadow var(--t-mid) var(--ease-out); }
.wa__glyph { position: absolute; right: 1rem; top: 50%; margin-top: -.75rem; width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: none; }
.wa__label { max-width: 0; overflow: hidden; font-family: var(--font-display); font-size: var(--fs-cap); font-weight: 600; letter-spacing: .01em; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: max-width .45s var(--ease-out), opacity var(--t-mid) var(--ease-out) .06s, transform var(--t-mid) var(--ease-out) .06s; }
.wa:hover, .wa:focus-visible { width: 12.75rem; color: #fff; background-image: var(--grad-red-h); }
.wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 10rem; opacity: 1; transform: none; }
/* Idle pulse ring — paused on hover so the label reads calmly.
   It is a real red disc that scales up and fades out, NOT a growing
   box-shadow. A box-shadow spread cannot be composited, so it would
   repaint a ~90px square every frame, forever, on every page. Transform
   and opacity are handled entirely on the compositor: same halo, no
   repaint, no battery cost on a page the visitor is only reading.
   z-index -1 keeps the disc behind the glyph and the label. */
.wa__ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(217,27,12,.38); opacity: 0; pointer-events: none; animation: wa-pulse 2.9s var(--ease-out) infinite; }
.wa:hover .wa__ring, .wa:focus-visible .wa__ring { animation-play-state: paused; }

@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: .48; }
  65%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes rv-shine {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* ---------- 20  FOOTER ---------- */
.footer { position: relative; isolation: isolate; background: var(--ink-900); color: var(--ink-300); padding-top: clamp(3rem, 6vw, 5rem); }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); opacity: .035; pointer-events: none; }
.footer__top { display: grid; gap: var(--sp-8); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 720px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: var(--sp-7); }
}
.footer__brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.footer__brand-mark { width: 48px; height: 41px; object-fit: contain; }
.footer__brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.footer__brand-sub { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); font-weight: 600; }
.footer__about { margin-top: var(--sp-5); color: var(--ink-300); font-size: var(--fs-base); max-width: 34ch; }
.footer__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: #fff; padding-bottom: .75rem; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--gold-soft); }
.footer__list { display: grid; gap: .7rem; }
.footer__list a { color: var(--ink-300); text-decoration: none; font-size: var(--fs-base); transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); display: inline-block; }
.footer__list a:hover { color: #fff; transform: translateX(3px); }
.footer__contact { display: grid; gap: var(--sp-4); }
.footer__contact-row { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-base); }
.footer__contact-row .icon { color: var(--red-500); margin-top: .3em; }
.footer__contact-row a { color: var(--ink-200); text-decoration: none; }
.footer__contact-row a:hover { color: #fff; }
.footer__social { display: flex; gap: .6rem; margin-top: var(--sp-5); }
.footer__social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); border: 1px solid var(--hairline-dark); color: var(--ink-200); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.footer__social a:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; transform: translateY(-2px); }
.footer__bar { border-top: 1px solid var(--hairline-dark); padding-block: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-300); }
.footer__bar a { color: var(--ink-300); text-decoration: none; }
.footer__bar a:hover { color: #fff; }
/* Small screens: keep the accreditation line clear of the floating
   WhatsApp button and the back-to-top button, which stack in the
   bottom-right corner. This block MUST stay after the .footer__bar rule
   above — a media query adds no specificity, so if it came first the
   plain padding-block would simply overwrite it. */
@media (max-width: 719px) {
  .footer__bar { padding-bottom: calc(var(--sp-6) + 4.25rem); }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* Back to top — stacks above the WhatsApp float, same column */
.to-top { position: fixed; right: var(--float-x); bottom: calc(var(--float-y) + 4.15rem); z-index: 94; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--grad-red); color: #fff; box-shadow: var(--sh-red); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility var(--t-mid); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background-image: var(--grad-red-h); }

/* ---------- 21  SCROLL PROGRESS ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-progress); background: transparent; pointer-events: none; }
.progress__bar { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--red-600), var(--red-500) 55%, var(--gold)); box-shadow: 0 0 12px rgba(217,27,12,.5); }

/* ---------- 22  REVEAL + KEYFRAMES ----------
   Default state is VISIBLE. Hidden-then-reveal is scoped to .js only, so
   a visitor without JavaScript still sees a complete page.            */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .72s var(--ease-out), transform .72s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); will-change: opacity, transform; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--left  { transform: translateX(-28px); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal--scale { transform: scale(.94); }
.js .reveal--fade  { transform: none; }
.js .reveal.is-in.reveal--left,
.js .reveal.is-in.reveal--right,
.js .reveal.is-in.reveal--scale { transform: none; }

/* Hero entrance (runs on load, not on scroll) */
.js .hero__line,
.js .hero__eyebrow,
.js .hero__lede,
.js .hero__actions,
.js .hero__meta { opacity: 0; animation: rise-in .95s var(--ease-out) forwards; }
.js .hero__eyebrow { animation-delay: .06s; }
.js .hero__line:nth-child(1) { animation-delay: .16s; }
.js .hero__line:nth-child(2) { animation-delay: .26s; }
.js .hero__line:nth-child(3) { animation-delay: .36s; }
.js .hero__lede    { animation-delay: .46s; }
.js .hero__actions { animation-delay: .56s; }
.js .hero__meta    { animation-delay: .66s; }
.js .hero__media { opacity: 0; animation: media-in 1.15s var(--ease-out) .3s forwards; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes media-in {
  from { opacity: 0; transform: scale(1.05) translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 7%, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-8%, -6%, 0) scale(.94); }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,76,.45); }
  60%      { box-shadow: 0 0 0 10px rgba(255,90,76,0); }
}
.hero__eyebrow .dot { animation: pulse-dot 2.6s var(--ease-out) infinite; }

/* ---------- 23  REDUCED MOTION + PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero__line, .js .hero__eyebrow, .js .hero__lede, .js .hero__actions, .js .hero__meta, .js .hero__media { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero__glow { animation: none; }
  .btn:hover, .card--hover:hover, .feature-card:hover, .service-card:hover, .value-card:hover,
  .team-card:hover, .info-tile:hover, .accred__item:hover, .mission:hover,
  .logo-tile:hover, .logo-tile:hover .logo-tile__img, .chip:hover, .to-top { transform: none !important; }
  .gallery__item img { transition: none; }
  .gallery__item:hover img { transform: none; }

  /* The image reveal degrades to a plain, fully visible picture. */
  .js .rv { clip-path: none !important; -webkit-clip-path: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
  .js .rv::after { animation: none !important; opacity: 0 !important; }
  .rv__img, .js .rv:not(.is-in) .rv__img { --rv-s: 1; --rv-y: 0%; transform: none !important; transition: none !important; }
  .rv--zoom:hover, a:hover > .rv--zoom, .card:hover .rv--zoom { --rv-s: 1; }

  /* WhatsApp float stops pulsing and stops growing; it stays reachable. */
  .wa__ring { animation: none !important; }
  .wa, .wa__label { transition: none !important; }
  .wa:hover, .wa:focus-visible { width: 12.75rem; }
  .wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 10rem; }
}

@media print {
  .header, .drawer, .progress, .to-top, .lightbox, .wa, .anchor-nav { display: none !important; }
  body, .section--dark, .footer, .hero { background: #fff !important; color: #000 !important; }
  .section--dark h2, .footer *, .hero__title, .hero__lede { color: #000 !important; }
  .rv { break-inside: avoid; }
}
/* ==========================================================================
   MOBILE TAP TARGETS
   --------------------------------------------------------------------------
   Audited at 360px: standalone links were sitting at 22–28px tall. The two
   people reach for most on a phone — the number and the email — were the
   smallest of all at 22px.

   Fixed by giving those links a real 40px row rather than an invisible
   overlay. An overlay would have made neighbouring footer rows overlap and
   steal each other's taps, which is worse than a small target.

   Links inside a sentence are deliberately left alone: growing those would
   break the line, and WCAG exempts inline links from target-size rules.
   ========================================================================== */
@media (max-width: 640px) {

  .footer__list a,
  .footer__contact-row a,
  .breadcrumb__list a,
  .drawer__contact a,
  .info-tile__value a,
  .card__text a[href^="tel:"],
  .card__text a[href^="mailto:"],
  .card__text a[href*="wa.me"],
  .card__foot a,
  .btn-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Stacked contact rows need breathing room between them once each row is
     taller, or the 40px boxes end up touching. */
  .footer__contact-row + .footer__contact-row { margin-top: 2px; }
}

/* ==========================================================================
   CLIENT REVIEW — round two
   --------------------------------------------------------------------------
   Everything below answers a specific point raised after the first walkthrough.
   Each block says which problem it solves so none of it gets tidied away by
   someone who cannot see why it is here.
   ========================================================================== */

/* --- Card content alignment ----------------------------------------------
   A grid stretches every card to match the tallest in its row. Cards with
   less content were left with all that slack pooled at the bottom, so they
   read as half-empty next to a full neighbour. Centring the block spreads
   the slack evenly instead. */
.info-tile { align-items: center; }

/* Action links pushed to the foot of the card, so the arrows sit on one line
   across a row however long each card's copy runs. This is what left the
   Aviation card's link floating above its neighbours. */
.service-card > p:has(> .btn-arrow),
.value-card   > p:has(> .btn-arrow) { margin-top: auto; }

/* --- Logo tiles -----------------------------------------------------------
   A square mark fills the tile edge to edge, so the 1.05 hover scale pushed
   it past the tile's overflow:hidden and clipped it — most obvious on the
   Serene Air bird. Capping the artwork keeps room for the scale and gives
   square marks and wordmarks the same visual weight. */
.logo-tile__img { width: auto; height: auto; max-width: 84%; max-height: 48%; }

/* Several logos arrive with a solid background baked into the file — JICA on
   black, Islamic Relief on blue, the Thai crest on stripes. Those blocks ran
   to the tile edge and looked like a mistake next to the transparent ones.
   Rounding and insetting them makes the whole wall read as one set. */
.logo-tile__img { border-radius: calc(var(--r-sm, 8px)); }

/* --- Floating controls ----------------------------------------------------
   The WhatsApp button was 3.5rem and the back-to-top 2.9rem, so their edges
   never lined up in the corner. Same size, same axis, even gap. */
.to-top { width: 3.5rem; height: 3.5rem; bottom: calc(var(--float-y) + 4.45rem); }
.to-top .icon { width: 1.35rem; height: 1.35rem; }

/* --- Section headings -----------------------------------------------------
   The numbered eyebrow sat at --fs-sm above a heading several times its size
   and read as an afterthought. Larger, wider-tracked and given a heavier
   number so it introduces the section rather than apologising for it. */
.eyebrow {
  font-size: var(--fs-base);
  letter-spacing: .15em;
  padding-bottom: .9rem;
  color: var(--ink-600);
}
.eyebrow__num { font-weight: 700; font-size: 1.06em; }
@media (min-width: 900px) { .eyebrow { font-size: 1.0625rem; } }

/* --- Image frames ---------------------------------------------------------
   Client asked for a proper frame on every scroll-revealed photograph rather
   than the hairline it had: a 10px band on all four sides in the brand red.
   The frame lives on the wrapper, so the existing clip-path wipe reveals the
   frame and the photograph together as one object. */
/* The brand frame belongs to people, not to every photograph. Putting a
   10px red band around scenery, offices and logos made the whole site look
   like a scrapbook; on a portrait it reads as deliberate. Only figures
   carrying .rv--portrait get it.

   When a real photograph arrives for Atif Hanif or Khalid Mahmood, add
   rv--portrait to its figure so it picks the frame up too. */
.rv--portrait {
  border: 10px solid var(--red-600);
  background: var(--red-600);
  border-radius: calc(var(--rv-r, 14px) + 6px);
  box-shadow: 0 18px 40px -22px rgba(20, 16, 15, .55);
}
.section--dark .rv--portrait, .on-dark .rv--portrait { border-color: var(--red-500); background: var(--red-500); }

/* The caption sat against the old hairline; give it room inside the frame. */


/* A framed reveal already carries its own outer plate — keep the portrait
   band thinner there so the two do not stack into a thick red slab. */
.rv-framed .rv--portrait { border-width: 8px; }

/* --- CTA band spacing -----------------------------------------------------
   The closing band was butting straight into the block above it with no
   breathing room, so the two read as one merged panel. */
.cta-band { margin-top: var(--sp-9); }
.section--flush-bottom .cta-band { margin-bottom: 0; }

/* --- Live map -------------------------------------------------------------
   A real Google map on the contact page. The overlay card is what makes the
   whole map tappable: it sits over the iframe and opens Google Maps, then
   hands pointer events back on hover so panning and zooming still work for
   anyone who wants to explore in place. */
.map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-100);
  box-shadow: 0 18px 40px -22px rgba(20, 16, 15, .55);
}
.map__frame {
  display: block;
  width: 100%;
  height: clamp(300px, 46vw, 460px);
  border: 0;
  filter: saturate(.92) contrast(1.02);
}

.map__open {
  position: absolute;
  left: clamp(.9rem, 2.4vw, 1.5rem);
  bottom: clamp(.9rem, 2.4vw, 1.5rem);
  right: clamp(.9rem, 2.4vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(.9rem, 2vw, 1.15rem) clamp(1rem, 2.4vw, 1.4rem);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-2);
  color: var(--ink-800);
  text-decoration: none;
  transition: var(--tr-lift), background var(--t-mid) var(--ease-out);
}
.map__open:hover { transform: translateY(-3px); box-shadow: var(--sh-4); background: var(--paper); color: var(--ink-900); }
.map__open:focus-visible { outline: 3px solid var(--red-600); outline-offset: 3px; }

.map__pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--r-md);
  background: var(--grad-red);
  color: #fff;
  box-shadow: var(--sh-red-sm);
}
.map__pin .icon { width: 1.4rem; height: 1.4rem; }

.map__open-label { display: grid; gap: .15rem; font-size: var(--fs-cap); color: var(--ink-500); line-height: 1.35; }
.map__open-label strong { font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-900); font-weight: 600; }

.map__open-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-cap);
  font-weight: 600;
  color: var(--red-800);
  white-space: nowrap;
}

/* On a phone the overlay would swallow most of the map, so it becomes a
   plain bar under the pin and drops the long address line. */
@media (max-width: 700px) {
  .map__open { gap: var(--sp-3); padding: .85rem 1rem; }
  .map__open-label strong { font-size: var(--fs-cap); }
  .map__open-label { font-size: 0; }
  .map__open-label strong { font-size: var(--fs-cap); }
  .map__open-cta { font-size: 0; }
  .map__open-cta .icon { width: 1.1rem; height: 1.1rem; }
}

/* --- Chairman's message ---------------------------------------------------
   The portrait was centred beside a much taller column of text, which left a
   band of empty space above and below it and made the two halves look
   unrelated. Letting the media stretch to the full height of the message ties
   them together: the portrait now ends exactly where the text ends, and the
   column is widened so the face is not squeezed. */
@media (min-width: 900px) {
  .message {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
    align-items: stretch;
  }
  .message__media { display: flex; flex-direction: column; }
  .message__media > .rv,
  .message__media > .rv-framed { flex: 1 1 auto; }
  /* the aspect-ratio that governs the portrait elsewhere has to give way to
     the column height here, or the figure keeps its own shape and the gap
     comes straight back */
  .message__media .rv { aspect-ratio: auto; height: 100%; }
  .message__media .rv__img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 22%; }

  /* the body sits centred against the taller media rather than starting at
     the very top, so short and long messages both read as balanced */
  .message__body { align-self: center; }
}

/* --- Hero scroll cue ------------------------------------------------------
   A quiet invitation to keep going. It names the next section rather than
   showing a bare arrow, so the visitor knows what they are scrolling toward.
   The bob stops for anyone who has asked for reduced motion. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vw, 2.1rem);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .5rem .5rem 1.1rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .04em;
  transition: background var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.hero__cue:hover,
.hero__cue:focus-visible { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.hero__cue:focus-visible { outline: 3px solid var(--red-500); outline-offset: 3px; }

.hero__cue-arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--grad-red);
  color: #fff;
  animation: cue-bob 2.4s var(--ease-out) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (max-width: 900px) { .hero__cue { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__cue-arrow { animation: none; }
}

/* --- Caption vs stat plate ------------------------------------------------
   The stat plate hangs off the bottom-right corner of an image while the
   caption runs the full width underneath it, so on the home hero the plate
   sat straight on top of the caption's second line. Only two places carry
   both, but where they do the caption keeps clear of the plate. */
/* First attempt padded the caption clear of the plate, but that squeezed it
   into three cramped lines. Moving the plate to the opposite corner is the
   better answer: the caption keeps its full width and the plate keeps its
   full presence. Only figures that actually carry a caption are affected. */
.hero__media:has(.rv__cap) > .rv-plate,
.rv-framed:has(.rv__cap) > .rv-plate {
  top: clamp(-1.25rem, -2vw, -.75rem);
  bottom: auto;
}

/* On a phone the plate drops to full width beneath the image, so the caption
   gets its padding back. */
@media (max-width: 700px) {
  .rv-plate { position: static; max-width: none; margin-top: var(--sp-4); border-radius: var(--r-md); }
}

/* --- Typographic logo tile ------------------------------------------------
   Not every client sends a logo. Design Bulb's file was a photograph of a
   lamp, which read as a stray image in a wall of marks. Setting the name in
   the display face keeps the grid even and looks like a decision rather than
   a gap. Use this wherever a real logo has not arrived yet. */
.logo-tile--word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink-800);
  text-align: center;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}
.logo-tile--word span { display: block; }
.logo-tile--word .logo-tile__sub {
  margin-top: .35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--red-800);
}

/* --- Diplomatic mission cards --------------------------------------------
   On a phone the crest and the mission name sat side by side in a narrow
   card, so the name wrapped to two or three lines and the accreditation
   badge below it looked wedged in. Stacking the head gives the crest room
   to be read as a crest and lets the name run on one or two clean lines. */
@media (max-width: 700px) {
  .mission__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .mission__logo { width: 7rem; height: 5rem; }
}

/* Two of the three crests ship with a solid or striped background baked in.
   Rounding the artwork itself stops those blocks meeting the tile's own
   corners at a hard right angle. */
.mission__logo img { border-radius: calc(var(--r-sm, 8px) - 2px); }