/* ==========================================================================
   JORDAN AVIATION — Global Stylesheet
   --------------------------------------------------------------------------
   Built on ..... HTML5 + Bootstrap 5 + CSS3 custom properties
   Structure ....
     01. Design Tokens
     02. Reset & Base
     03. Typography
     04. Layout Helpers & Section Shell
     05. Buttons & Links
     06. Badges / Pills / Chips
     07. Header + Navigation (desktop + mobile drawer)
     08. Hero Slider
     09. Flight Search Widget
     10. Promo Destination Cards (carousel)
     11. Explore Jordan (coverflow carousel)
     12. Special Flight Offers (carousel)
     13. Why Fly (feature grid)
     14. e-Magazine (article cards)
     15. Mobile App section
     16. Footer
     17. Video Modal (popup)
     18. Utilities, Scroll Reveal & Animation
     19. Responsive Breakpoints - 1200 / 1024 / 768 / 480
     20. Accessibility & Print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Colours sampled directly from the approved Jordan Aviation design file.
   ========================================================================== */
:root {
  /* ---- Brand palette ---- */
  --ja-gold:            #D3A35E;   /* primary brand gold (from the logo) */
  --ja-gold-600:        #C08F48;   /* hover / pressed */
  --ja-gold-700:        #A9762F;   /* deep accent */
  /* Small gold TEXT on light grounds. --ja-gold tops out at 2.3:1 on white
     and --ja-gold-700 at 4.0:1, so neither can reach WCAG AA (4.5:1) for
     copy this size. This tone does, and still reads as brand gold. */
  --ja-gold-ink:        #74501D;
  /* Large gold display text on LIGHT grounds. The brand gold is 2.2-2.3:1
     there and large text needs 3:1, so this is the lightest tone in the
     same family that clears it (3.10:1 on cream, 3.22:1 on white). On dark
     grounds --ja-gold is kept: it reads better and already gives 6.7:1. */
  --ja-gold-display:    #B8863C;
  --ja-gold-300:        #E6C38F;   /* card outlines (sampled from the design) */
  --ja-gold-200:        #E9D3AE;   /* soft gold */
  --ja-gold-100:        #F6ECDB;   /* gold tint surface */

  --ja-navy:            #0C1A35;   /* headings / dark ink */
  --ja-hero-dark:       #21262C;   /* hero ground - sampled from Figma */
  --ja-navy-700:        #16243D;
  --ja-ink:             #0F1921;   /* footer ground */
  --ja-ink-2:           #182229;   /* footer bottom bar */

  /* ---- Neutrals ---- */
  --ja-white:           #FFFFFF;
  --ja-cream:           #FDFAF5;   /* alternating section ground */
  --ja-beige:           #F3E9DD;   /* hero canvas */
  --ja-line:            #E9E3D9;   /* hairlines / card borders */
  --ja-line-soft:       #F1EDE6;
  --ja-text:            #4A5361;   /* body copy */
  --ja-muted:           #8A929E;   /* meta / captions */

  /* ---- Semantic accents (promo cards) ---- */
  --ja-red:             #DC1737;
  --ja-green:           #1C906B;
  --ja-green-ink:       #0F6B4E;
  --ja-status-green:    #00CB52;   /* CONFIRMED chip fill, sampled from Figma */
  --ja-status-ink:      #003122;   /* its ink - the pair measures 6.6:1 */
  --ja-green-tint:      #DCFAE6;   /* sampled from the design's status chips */
  --ja-blue:            #17335C;
  --ja-black:           #101114;   /* promo card black step */
  --ja-gold-tint:       #FFFDF8;   /* surface behind a selected gold option */

  /* ---- Seat map states, all sampled off the design ---- */
  --seat-occupied:      #99A1AE;
  --seat-legroom:       #D9EBFF;
  --seat-legroom-bd:    #BFDCF7;
  --seat-preferred:     #F7EDDE;
  --seat-preferred-bd:  #EBD8B8;
  --seat-unavailable:   #F4F4F5;
  --seat-unavailable-bd:#ECECEE;

  /* ---- Typography ---- */
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale - never breaks below 320px, tops out at the 1920 design */
  --fs-eyebrow:  clamp(0.6875rem, 0.62rem + 0.2vw, 0.8125rem);   /* 11 -> 13 */
  --fs-body-sm:  clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);   /* 13 -> 14 */
  --fs-body:     clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);    /* 15 -> 17 */
  --fs-lead:     clamp(1rem, 0.94rem + 0.25vw, 1.125rem);        /* 16 -> 18 */
  --fs-h5:       clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-h4:       clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-h3:       clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  --fs-h2:       clamp(1.625rem, 1.1rem + 1.9vw, 2.625rem);      /* 26 -> 42 */
  --fs-h1:       clamp(1.875rem, 1.15rem + 2.6vw, 3.375rem);     /* 30 -> 54 */

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-base:  1.75;

  /* ---- Spacing scale (rem based) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.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: 6.5rem;

  /* Vertical rhythm for sections - fluid so mobile never feels stretched */
  --section-y:       clamp(3rem, 1.5rem + 5vw, 6.5rem);
  --section-y-tight: clamp(2.25rem, 1.2rem + 3.5vw, 4.5rem);

  /* ---- Layout ---- */
  --container:      90rem;      /* 1440px content rail */
  --container-pad:  clamp(1rem, 0.35rem + 2.2vw, 2.5rem);
  --gutter:         clamp(1rem, 0.6rem + 1.2vw, 1.75rem);

  /* ---- Radii ---- */
  --r-xs: 0.375rem; --r-sm: 0.5rem;  --r-md: 0.75rem;  --r-lg: 1rem;
  --r-xl: 1.25rem;  --r-2xl: 1.5rem; --r-3xl: 2rem;    --r-pill: 62.5rem;

  /* ---- Elevation ---- */
  --sh-xs: 0 1px 2px rgba(12, 26, 53, 0.05);
  --sh-sm: 0 2px 8px rgba(12, 26, 53, 0.06);
  --sh-md: 0 8px 24px rgba(12, 26, 53, 0.08);
  --sh-lg: 0 18px 48px rgba(12, 26, 53, 0.10);
  --sh-xl: 0 28px 70px rgba(12, 26, 53, 0.14);
  --sh-gold: 0 12px 28px rgba(211, 163, 94, 0.32);

  /* ---- Motion (kept inside the 0.3s-0.6s brief) ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.3s;
  --t-base:    0.45s;
  --t-slow:    0.6s;

  /* How far the search widget rides up over the hero slider: 187px at the
     design's 1920 width. Declared once because three rules depend on it -
     the widget's negative margin and the slider's two control clusters,
     which must stay clear of the card. */
  --hero-overlap: clamp(2rem, 9.74vw, 11.7rem);

  --header-h: 5.375rem;   /* 86px */
  --z-header: 1030;
  --z-drawer: 1055;
  --z-modal:  1080;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ja-text);
  background: var(--ja-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;      /* belt-and-braces against horizontal bleed */
}

/* Lock scroll while the mobile drawer / modal is open */
body.is-locked { overflow: hidden; }

/* Media never exceeds its container - required by the brief */
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* Custom scrollbar (WebKit) - subtle, on-brand */
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: var(--ja-line-soft); }
::-webkit-scrollbar-thumb { background: var(--ja-gold-200); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ja-gold); }

::selection { background: var(--ja-gold); color: var(--ja-white); }


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-head);
  color: var(--ja-navy);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }
h5, .h5 { font-size: var(--fs-h5); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-lead); line-height: 1.7; }
.text-gold { color: var(--ja-gold-display); }
.hero-slide--dark .text-gold,
.trip-banner .text-gold { color: var(--ja-gold); }
.text-navy { color: var(--ja-navy); }
.text-muted-ja { color: var(--ja-muted); }

/* Small uppercase kicker that sits above every section heading */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ja-gold-ink);
  margin-bottom: var(--sp-4);
}


/* ==========================================================================
   04. LAYOUT HELPERS & SECTION SHELL
   ========================================================================== */
.ja-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Near-full-bleed rail for the hero panel. In the design the panel sits
   24px inside the viewport edge (1872 of 1920) = 1.25vw, so it stays
   proportionally inset at every width instead of being capped. */
.ja-container--wide {
  max-width: none;
  padding-inline: min(1.5rem, 1.25vw);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--cream { background: var(--ja-cream); }

/* Section head: heading on the start side, support copy on the end side */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--sp-6) var(--sp-9);
  align-items: end;
  margin-bottom: var(--sp-9);
}
/* Headline measure: wide enough that the two-line headings in the design do
   not gain a third line, narrow enough to stay readable. */
.section-head__title { max-width: 46ch; }
.section-head__title--wide { max-width: 60ch; }
.section-head__note { margin-top: var(--sp-5); max-width: 38rem; }
.section-head__aside {
  color: var(--ja-text);
  font-size: var(--fs-body);
  padding-bottom: 0.375rem;
}
.section-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.section-head--center .section-head__title { max-width: 100%; }
.section-head--center .section-head__aside { max-width: 46ch; text-align: center; }

/* Head variant with a heading block + a trailing control (e-Magazine, offers) */
.section-head--split {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.section-head--split .section-head__title { max-width: 60ch; }


/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */
.btn-ja {
  --btn-bg: var(--ja-gold);
  --btn-fg: var(--ja-white);
  --btn-bd: var(--ja-gold);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.9375rem var(--sp-6);
  min-height: 3rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* Soft sheen that sweeps across on hover */
.btn-ja::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -120%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start var(--t-slow) var(--ease-out);
  z-index: -1;
}
.btn-ja:hover::after { inset-inline-start: 140%; }

.btn-ja:hover  { transform: translateY(-2px); box-shadow: var(--sh-gold); }
.btn-ja:active { transform: translateY(0); }

/* --- Variants --- */
.btn-ja--primary:hover { background: var(--ja-gold-600); border-color: var(--ja-gold-600); }

.btn-ja--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ja-navy);
  --btn-bd: var(--ja-navy);
}
.btn-ja--outline:hover {
  --btn-bg: var(--ja-navy);
  --btn-fg: var(--ja-white);
  box-shadow: 0 12px 28px rgba(12, 26, 53, 0.22);
}

.btn-ja--light {
  --btn-bg: var(--ja-white);
  --btn-fg: var(--ja-navy);
  --btn-bd: var(--ja-white);
  box-shadow: var(--sh-sm);
}
.btn-ja--light:hover { --btn-bg: var(--ja-navy); --btn-fg: var(--ja-white); --btn-bd: var(--ja-navy); }

.btn-ja--block { width: 100%; }
.btn-ja--lg { min-height: 3.5rem; padding-inline: var(--sp-8); font-size: var(--fs-body); }
.btn-ja--sm { min-height: 2.5rem; padding: 0.625rem var(--sp-4); font-size: var(--fs-body-sm); }

/* Uppercase CTA used on the offer cards */
.btn-ja--caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }

/* Chevron / arrow inside buttons nudges forward on hover */
.btn-ja .ic { width: 1rem; height: 1rem; flex: 0 0 auto; transition: transform var(--t-fast) var(--ease); }
.btn-ja:hover .ic--next { transform: translateX(0.1875rem); }

/* Plain text link with a moving arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-family: var(--font-head);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ja-navy);
}
.link-arrow .ic { width: 0.9375rem; height: 0.9375rem; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { color: var(--ja-gold-600); }
.link-arrow:hover .ic { transform: translateX(0.1875rem); }

/* Understated link under the offer CTA */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-body-sm);
  color: var(--ja-text);
}
.link-quiet:hover { color: var(--ja-gold-600); }
.link-quiet .ic { width: 0.875rem; height: 0.875rem; transition: transform var(--t-fast) var(--ease); }
.link-quiet:hover .ic { transform: translateX(0.1875rem); }


/* ==========================================================================
   06. BADGES / PILLS / CHIPS
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--r-pill);
  background: var(--ja-navy);
  color: var(--ja-white);
  white-space: nowrap;
}
.pill--gold  { background: var(--ja-gold); color: var(--ja-white); }
.pill--ink   { background: #000; color: var(--ja-white); }
.pill--glass {
  background: rgba(20, 24, 28, 0.62);
  backdrop-filter: blur(0.375rem);
  -webkit-backdrop-filter: blur(0.375rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 0.75rem;
}

.tag-cat {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ja-gold-ink);
}


/* ==========================================================================
   07. HEADER + NAVIGATION
   Sticky, translucent on scroll. Logo keeps identical dimensions in the
   header and the footer (--logo-h) on every page of the site.
   ========================================================================== */
:root { --logo-h: 3.125rem; }   /* 50px - shared by header + footer */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(0.75rem) saturate(140%);
  -webkit-backdrop-filter: blur(0.75rem) saturate(140%);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  /* Entrance animation on first paint */
  animation: headerDrop var(--t-slow) var(--ease-out) both;
}
.site-header.is-stuck {
  box-shadow: 0 4px 24px rgba(12, 26, 53, 0.08);
  border-bottom-color: var(--ja-line-soft);
  background: rgba(255, 255, 255, 0.97);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  min-height: var(--header-h);
}

/* ---- Logo ---- */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand__img {
  height: var(--logo-h);
  width: auto;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.brand:hover .brand__img { transform: scale(1.04); }

/* ---- Primary nav (desktop) ---- */
.nav-primary { margin-inline: auto; }
.nav-primary__list { display: flex; align-items: center; gap: clamp(0.75rem, 0.1rem + 1.1vw, 1.75rem); }

.nav-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(0.8125rem, 0.72rem + 0.2vw, 0.9375rem);
  font-weight: 600;
  color: var(--ja-navy);
  padding-block: 0.5rem;
  white-space: nowrap;
}
/* Gold underline grows from the start edge */
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--ja-gold);
  transition: width var(--t-fast) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ja-gold-700); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

/* ---- Header utilities (search / language / login / CTA) ---- */
.header-tools { display: flex; align-items: center; gap: clamp(0.5rem, 0.1rem + 0.8vw, 1.25rem); flex: 0 0 auto; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: 0;
  padding: 0.5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ja-navy);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tool-btn:hover { color: var(--ja-gold-700); background: var(--ja-gold-100); }
.tool-btn .ic { width: 1.125rem; height: 1.125rem; }

/* Inline search field that expands from the icon */
.header-search {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--ja-white);
  border-top: 1px solid var(--ja-line-soft);
  box-shadow: var(--sh-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease);
}
.header-search.is-open { max-height: 7rem; }
.header-search__inner { display: flex; gap: var(--sp-3); padding-block: var(--sp-5); }
.header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-sm);
  padding: 0.8125rem var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ja-navy);
  background: var(--ja-cream);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.header-search__input:focus {
  outline: none;
  border-color: var(--ja-gold);
  box-shadow: 0 0 0 3px rgba(211, 163, 94, 0.18);
}

/* ---- Hamburger ---- */
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-sm);
  background: var(--ja-white);
  cursor: pointer;
  padding: 0;
  place-items: center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--ja-gold); background: var(--ja-gold-100); }
.nav-toggle__box { position: relative; width: 1.25rem; height: 0.875rem; }
.nav-toggle__bar {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ja-navy);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), top var(--t-fast) var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar:nth-child(3) { top: 100%; transform: translateY(-100%); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ---- Mobile drawer ---- */
.nav-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(22rem, 88vw);
  z-index: var(--z-drawer);
  background: var(--ja-white);
  box-shadow: -18px 0 60px rgba(12, 26, 53, 0.18);
  padding: var(--sp-6) var(--sp-6) var(--sp-9);
  overflow-y: auto;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform var(--t-base) var(--ease-out), visibility var(--t-base) linear;
}
.nav-drawer.is-open { transform: translateX(0); visibility: visible; }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--ja-line-soft);
  margin-bottom: var(--sp-5);
}
.nav-drawer__close {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-sm);
  background: var(--ja-white);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-drawer__close:hover { transform: rotate(90deg); border-color: var(--ja-gold); }
.nav-drawer__close .ic { width: 1.125rem; height: 1.125rem; }

.nav-drawer__list { display: grid; gap: 0.125rem; }
.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ja-navy);
  padding: 0.875rem 0.75rem;
  border-radius: var(--r-sm);
  /* Staggered slide-in when the drawer opens */
  opacity: 0;
  transform: translateX(1.25rem);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-drawer.is-open .nav-drawer__link { opacity: 1; transform: translateX(0); }
.nav-drawer__link:hover { background: var(--ja-gold-100); color: var(--ja-gold-700); }
.nav-drawer__link .ic { width: 0.875rem; height: 0.875rem; opacity: 0.45; }

.nav-drawer__foot { margin-top: var(--sp-7); display: grid; gap: var(--sp-3); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(12, 26, 53, 0.5);
  backdrop-filter: blur(0.125rem);
  -webkit-backdrop-filter: blur(0.125rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base) linear;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }


/* ==========================================================================
   08. HERO SLIDER
   Mixed media: image slides + a native video slide in the same rotation.
   ========================================================================== */
.hero {
  position: relative;
  /* The horizontal inset lives on .ja-container--wide so the panel keeps the
     design's 1.25vw margin; only the top inset belongs here. */
  padding-inline: 0;
  padding-top: min(1.5rem, 1.25vw);
  /* Room for the search widget that overlaps the slider's bottom edge */
  padding-bottom: clamp(2rem, 0.5rem + 4vw, 4rem);
  background: linear-gradient(180deg, var(--ja-white) 0%, var(--ja-white) 55%, var(--ja-cream) 100%);
}

/* All slides share one grid cell, so the slider is always exactly as tall as
   its tallest slide — no JS height management and nothing can collapse. */
.hero-slider {
  position: relative;
  display: grid;
  grid-template-areas: "slide";
  border-radius: clamp(0.75rem, 0.2rem + 1.2vw, 1.75rem);
  overflow: hidden;
  /* The hero reads dark in the current design, not on the earlier beige */
  background: var(--ja-hero-dark);
  min-height: clamp(26rem, 16rem + 26vw, 39.25rem);   /* -> 628px @1920 */
  isolation: isolate;
}

/* --- Slides --- */
.hero-slide {
  grid-area: slide;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) linear;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.hero-slide__media { position: absolute; inset: 0; z-index: 0; }
.hero-slide__media img,
.hero-slide__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
/* Slow drift on the active slide's artwork - the "Ken Burns" touch */
.hero-slide.is-active .hero-slide__media img { animation: kenBurns 14s var(--ease) both; }

/* Beige-to-transparent veil so the copy always has contrast */
.hero-slide__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(243,233,221,0.98) 0%, rgba(243,233,221,0.92) 26%,
                           rgba(243,233,221,0.55) 46%, rgba(243,233,221,0.08) 64%, rgba(243,233,221,0) 78%);
}
/* Dark slides sit on --ja-hero-dark and need enough cover that a daylight
   photograph still reads as the design's night-time hero. */
.hero-slide--dark .hero-slide__veil {
  /* Lighter than before: the artwork is now graded to the design’s own
     night register, so the veil only has to protect the copy column. */
  background:
    linear-gradient(90deg, rgba(33,38,44,0.95) 0%,  rgba(33,38,44,0.86) 22%,
                           rgba(33,38,44,0.48) 46%, rgba(33,38,44,0.14) 70%,
                           rgba(33,38,44,0) 100%),
    linear-gradient(180deg, rgba(33,38,44,0.18) 0%, rgba(33,38,44,0) 42%,
                            rgba(33,38,44,0.28) 100%);
}

/* Faint guilloche arcs echoing the design's background pattern */
.hero-slide__pattern {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 34%;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

/* Top-aligned rather than centred: in the design the copy starts 134px below
   the panel's top edge, and anchoring it there keeps every slide's copy on
   the same baseline no matter how long its headline runs. */
.hero-slide__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  min-height: clamp(26rem, 16rem + 26vw, 39.25rem);   /* -> 628px @1920 */
  padding-block: clamp(2.5rem, 0.5rem + 6.5vw, 8.375rem)   /* -> 134px */
                 clamp(2.5rem, 0.5rem + 5vw, 6.5rem);      /* -> 104px */
}

.hero-copy { max-width: 40rem; }
.hero-copy .eyebrow { letter-spacing: 0.28em; }
.hero-title { margin-bottom: var(--sp-5); }
.hero-text {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--ja-text);
  max-width: 30rem;
  margin-bottom: var(--sp-7);
}
.hero-slide--dark .hero-title { color: var(--ja-white); }
.hero-slide--dark .hero-text  { color: rgba(255, 255, 255, 0.82); }
.hero-slide--dark .eyebrow    { color: var(--ja-gold-200); }

/* The outline CTA is navy by default, which disappears on a dark slide */
.hero-slide--dark .btn-ja--outline {
  --btn-fg: var(--ja-white);
  --btn-bd: rgba(255, 255, 255, 0.75);
}
.hero-slide--dark .btn-ja--outline:hover {
  --btn-bg: var(--ja-white);
  --btn-fg: var(--ja-hero-dark);
  --btn-bd: var(--ja-white);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Staggered reveal of the copy each time a slide becomes active */
.hero-slide.is-active .hero-copy > * { animation: heroRise var(--t-slow) var(--ease-out) both; }
.hero-slide.is-active .hero-copy > *:nth-child(1) { animation-delay: 0.10s; }
.hero-slide.is-active .hero-copy > *:nth-child(2) { animation-delay: 0.18s; }
.hero-slide.is-active .hero-copy > *:nth-child(3) { animation-delay: 0.26s; }
.hero-slide.is-active .hero-copy > *:nth-child(4) { animation-delay: 0.34s; }

/* --- Video slide affordances --- */
.hero-slide--video .hero-slide__media video { object-position: center; }

.video-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--ja-white);
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  font-family: var(--font-head);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.video-cue:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.video-cue__ring {
  position: relative;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ja-gold);
  color: var(--ja-white);
  flex: 0 0 auto;
}
.video-cue__ring::before {
  content: "";
  position: absolute;
  inset: -0.375rem;
  border-radius: 50%;
  border: 1px solid rgba(211, 163, 94, 0.75);
  animation: pulseRing 2.4s var(--ease) infinite;
}
.video-cue__ring .ic { width: 0.875rem; height: 0.875rem; }

/* --- Slider controls --- */
/* Both control clusters sit just above the band the search widget occupies.
   Between roughly 770px and 1340px the card is only 13-120px narrower than
   the panel, so anything in the bottom corners would end up underneath it. */
.hero-nav {
  position: absolute;
  z-index: 6;
  inset-inline-end: clamp(1rem, 0.2rem + 1.6vw, 2.25rem);
  bottom: calc(var(--hero-overlap) + 1.25rem);
  display: flex;
  gap: var(--sp-2);
}
.hero-arrow {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(12, 26, 53, 0.16);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ja-navy);
  cursor: pointer;
  backdrop-filter: blur(0.375rem);
  -webkit-backdrop-filter: blur(0.375rem);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-arrow:hover {
  background: var(--ja-gold);
  border-color: var(--ja-gold);
  color: var(--ja-white);
  transform: translateY(-2px);
}
.hero-arrow .ic { width: 1.0625rem; height: 1.0625rem; }
/* Chevrons follow the reading direction automatically */
.hero-arrow--prev .ic { transform: scaleX(1); }

/* The hero slider is driven by prev/next only - no dot pagination. */


/* ==========================================================================
   09. FLIGHT SEARCH WIDGET
   --------------------------------------------------------------------------
   Measured off the approved design at its 1920px reference width:

     card ......... 1078 x 347,  top edge y=551,  bottom edge y=898
     hero panel ... bottom edge y=738   ->  187px of overlap
     inner inset .. 31px
     CTA .......... 200 x 48, centred ON the card's bottom border
     field row .... From 224 | swap 53 | To 223 | Dep 152 | Ret 183 | Pax 175

   Every value below is that measurement expressed fluidly, so the desktop
   render matches the design 1:1 and still degrades cleanly.
   ========================================================================== */
.search-widget-wrap {
  position: relative;
  z-index: 10;
  margin-top: calc(-1 * var(--hero-overlap));
  /* This wrapper is the full width of the content rail but only the centred
     card inside it is visible. Without this, its transparent gutters sit on
     top of the slider's dots and arrows and swallow their clicks. */
  pointer-events: none;
}
.search-widget { pointer-events: auto; }

.search-widget {
  /* Widget-scoped tokens - the CTA offset is derived from these two */
  --sw-pad:   clamp(1.125rem, 0.35rem + 1.4vw, 1.9375rem);  /* -> 31px @1920 */
  --sw-cta-h: 3rem;                                          /* 48px         */

  background: var(--ja-white);
  border: 1px solid var(--ja-gold-300);
  border-radius: var(--r-2xl);                               /* 24px         */
  box-shadow: var(--sh-xl);
  padding: var(--sw-pad);
  max-width: 67.375rem;                                      /* 1078px       */
  margin-inline: auto;
}

/* --- Booking-type tabs (Flights / Manage / Check-in / Flight Status) ------
   New in the current design: a four-up strip flush with the card's top edge.
   It escapes the card's padding with a negative margin, so the strip meets
   the border on all three sides. Active tab is white on the card, the rest
   are gold. Equal columns, 58px tall at the 1920 reference.
   ---------------------------------------------------------------------- */
.search-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: calc(var(--sw-pad) * -1) calc(var(--sw-pad) * -1) var(--sw-pad);
  border-radius: calc(var(--r-2xl) - 1px) calc(var(--r-2xl) - 1px) 0 0;
  overflow: hidden;
  background: var(--ja-gold);
}
.search-tab {
  border: 0;
  background: transparent;
  color: var(--ja-white);
  font-family: var(--font-head);
  font-size: clamp(0.8125rem, 0.74rem + 0.2vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  padding: clamp(0.75rem, 0.5rem + 0.6vw, 1.125rem) 0.5rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.search-tab:hover { background: rgba(255, 255, 255, 0.16); }
.search-tab.is-active {
  background: var(--ja-white);
  color: var(--ja-navy);
  cursor: default;
}

/* --- Trip type radios --- */
.trip-types {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.3rem + 1.5vw, 2.0625rem);               /* -> 33px      */
  margin-bottom: clamp(0.875rem, 0.35rem + 0.9vw, 1.5rem);   /* -> 24px      */
}

.radio-ja { display: inline-flex; align-items: center; gap: 0.5625rem; cursor: pointer; }
.radio-ja input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-ja__dot {
  position: relative;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  /* The current design outlines unselected radios in dark ink, not grey */
  border: 1.5px solid var(--ja-hero-dark);
  flex: 0 0 auto;
  transition: border-color var(--t-fast) var(--ease);
}
.radio-ja__dot::after {
  content: "";
  position: absolute;
  inset: 0.1875rem;
  border-radius: 50%;
  background: var(--ja-gold);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
}
/* Parent-agnostic so the same dot works inside .radio-ja and .fare-chip */
input:checked + .radio-ja__dot { border-color: var(--ja-gold); }
input:checked + .radio-ja__dot::after { transform: scale(1); }
.radio-ja__label {
  font-family: var(--font-head);
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  font-weight: 700;
  color: var(--ja-muted);
  transition: color var(--t-fast) var(--ease);
}
.radio-ja input:checked ~ .radio-ja__label { color: var(--ja-navy); }
.radio-ja:hover .radio-ja__label { color: var(--ja-navy); }
input:focus-visible + .radio-ja__dot { box-shadow: 0 0 0 3px rgba(211, 163, 94, 0.3); }

/* --- The route / date / passengers row --- */
/* Column ratios come straight from the measured cell widths above. */
.search-fields {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)   /* From       224 */
    auto               /* swap        53 */
    minmax(0, 1.4fr)   /* To         223 */
    minmax(0, 0.95fr)  /* Departure  152 */
    minmax(0, 1.15fr)  /* Return     183 */
    minmax(0, 1.1fr);  /* Passengers 175 */
  align-items: stretch;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  overflow: visible;
  background: var(--ja-white);
  margin-bottom: clamp(1rem, 0.4rem + 1.05vw, 1.8125rem);   /* -> 29px */
}

.field {
  position: relative;
  padding: clamp(0.75rem, 0.5rem + 0.4vw, 0.9375rem)
           clamp(0.6875rem, 0.3rem + 0.75vw, 1.25rem);
  border-inline-end: 1px solid var(--ja-line-soft);
  min-width: 0;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.field:last-child { border-inline-end: 0; }
.field:hover, .field.is-focus { background: var(--ja-gold-100); }
.field--muted { color: var(--ja-muted); }

.field__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  font-size: clamp(0.75rem, 0.71rem + 0.11vw, 0.8125rem);
  font-weight: 400;
  line-height: 1.35;            /* do not inherit the 1.75 body leading */
  color: var(--ja-muted);
  margin-bottom: 0.25rem;
}
.field__label .ic { width: 0.625rem; height: 0.625rem; opacity: 0.6; }

.field__value {
  /* Must be block-level: an inline span ignores overflow/text-overflow, so
     the values never truncated and the cell reported a stray extra line. */
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.83rem + 0.42vw, 1.3125rem);      /* -> 21px */
  font-weight: 700;
  color: var(--ja-navy);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The Return placeholder wraps to three lines and is what sets the row's
   height, so its size and leading are what keep the row at the design's
   110px. */
.field--muted .field__value {
  /* Body face, not the display face - it is narrower, which is what keeps
     the placeholder on three lines as in the design. */
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.71rem + 0.11vw, 0.8125rem);
  font-weight: 400;
  color: var(--ja-muted);
  white-space: normal;
  line-height: 1.5;
}

.field__hint {
  display: block;
  font-size: clamp(0.75rem, 0.71rem + 0.11vw, 0.8125rem);
  line-height: 1.35;
  color: var(--ja-muted);
  margin-top: 0.1875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* An empty hint must not contribute its margin to the row height */
.field__hint:empty { display: none; }
/* The cabin line wraps to two lines in the design, unlike the airport names */
.field__hint--wrap { white-space: normal; }

/* Native date / select control layered over the styled display: invisible but
   fully clickable and reachable by keyboard, so the browser's own picker does
   the work while the design stays intact. */
.field__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  color: transparent;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.field__native:focus-visible { outline: none; }
/* Reflect focus on the whole field instead of the invisible control */
.field:has(.field__native:focus-visible) {
  background: var(--ja-gold-100);
  box-shadow: inset 0 0 0 2px var(--ja-gold);
  border-radius: var(--r-md);
}

/* Editable inputs are invisible until focused so the design stays clean */
.field__input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
  font-weight: 700;
  color: var(--ja-navy);
  line-height: 1.2;
}
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--ja-muted); font-weight: 500; }

/* Swap origin/destination - its own 53px cell between From and To */
.field-swap {
  display: grid;
  place-items: center;
  padding-inline: 0.3125rem;
  border-inline-end: 1px solid var(--ja-line-soft);
}
.swap-btn {
  width: 2.625rem; height: 2.625rem;
  border-radius: 50%;
  border: 1px solid var(--ja-gold-300);
  background: var(--ja-white);
  color: var(--ja-gold);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.swap-btn:hover { border-color: var(--ja-gold); background: var(--ja-gold-100); transform: rotate(180deg); }
.swap-btn .ic { width: 1.0625rem; height: 1.0625rem; }

/* AJAX airport autocomplete */
.field__suggest {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 0.5rem);
  min-width: 100%;
  width: max-content;
  max-width: 22rem;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 0.375rem;
  z-index: 20;
  max-height: 16rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast) linear;
}
.field__suggest.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.suggest-item {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  background: none;
  padding: 0.5625rem 0.6875rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.suggest-item:hover, .suggest-item.is-active { background: var(--ja-gold-100); }
.suggest-item__city { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-body-sm); color: var(--ja-navy); }
.suggest-item__meta { font-size: 0.75rem; color: var(--ja-muted); }
.suggest-empty { padding: 0.75rem; font-size: var(--fs-body-sm); color: var(--ja-muted); text-align: center; }

/* --- Special fare row --- */
.fare-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.625rem, 0.35rem + 0.55vw, 1.125rem);
  margin-bottom: clamp(1.25rem, 0.5rem + 1.35vw, 2.375rem);   /* -> 38px */
}
.fare-row__label { font-size: clamp(0.8125rem, 0.76rem + 0.16vw, 0.9375rem); color: var(--ja-navy); font-weight: 500; }
.fare-row__label span { color: var(--ja-muted); }

.fare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-sm);
  padding: 0.6875rem 1rem;
  cursor: pointer;
  background: var(--ja-white);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.fare-chip:hover { border-color: var(--ja-gold-200); transform: translateY(-1px); }
.fare-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.fare-chip:has(input:checked) { border-color: var(--ja-gold); background: var(--ja-gold-100); }
.fare-chip__txt { display: grid; line-height: 1.3; }
.fare-chip__title {
  font-family: var(--font-head);
  font-size: clamp(0.875rem, 0.83rem + 0.13vw, 0.9375rem);
  font-weight: 700;
  color: var(--ja-navy);
}
.fare-chip__sub { font-size: clamp(0.75rem, 0.71rem + 0.11vw, 0.8125rem); color: var(--ja-muted); }

/* --- Submit -------------------------------------------------------------
   In the design the CTA is centred ON the card's bottom border, hanging
   half outside it. Pulling this row up by (inner inset + half the button
   height) lifts the card's bottom edge to the button's midline, and the
   relatively-positioned button then paints over that border.
   ---------------------------------------------------------------------- */
.search-widget__submit {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: calc(-1 * (var(--sw-pad) + var(--sw-cta-h) / 2));
}
.search-widget__submit .btn-ja {
  position: relative;
  z-index: 1;
  min-width: 12.5rem;                 /* 200px, as measured */
  min-height: var(--sw-cta-h);        /* 48px               */
  padding-inline: 1.75rem;
  border-radius: 0.625rem;
  font-size: clamp(0.875rem, 0.81rem + 0.18vw, 1rem);
}

/* Inline status line for the AJAX submit. Absolutely placed so revealing it
   cannot shift the card's carefully measured height. */
.search-status {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.875rem);
  margin: 0;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--ja-gold-700);
  opacity: 0;
  transform: translateY(0.25rem);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.search-status.is-visible { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   10. PROMO DESTINATION CARDS  (Exclusive Offers & Destinations)
   Horizontal scroll-snap rail. Cards peek past the container edge exactly
   as they do in the design, and the rail becomes a swipe list on mobile.
   ========================================================================== */
.rail {
  position: relative;
  /* Bleed the rail to the viewport edge while keeping the first card aligned
     to the content rail - this is what produces the "peeking" card. */
  margin-inline: calc(var(--container-pad) * -1);
}
.rail__track {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: var(--container-pad);
  padding-block: 0.5rem 1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; flex: 0 0 auto; }

/* Arrow pair used above / beside the rails */
.rail-nav { display: flex; gap: var(--sp-2); }
.rail-arrow {
  width: 2.875rem; height: 2.875rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ja-line);
  background: var(--ja-white);
  color: var(--ja-navy);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.rail-arrow:hover { background: var(--ja-navy); border-color: var(--ja-navy); color: var(--ja-white); transform: translateY(-2px); }
.rail-arrow[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }
.rail-arrow .ic { width: 1rem; height: 1rem; }

/* --- The card itself ---
   Every colour-dependent value is a token, so a card only has to declare its
   own palette (see the five-colour cycle below) and the badge, copy and CTA
   follow automatically - including on the black and white cards, where white
   text or a black badge would otherwise disappear. */
.promo-card {
  --card-accent:    var(--ja-gold);
  --card-wash-op:   0.94;
  --card-ink:       var(--ja-white);
  --card-ink-soft:  rgba(255, 255, 255, 0.92);
  --card-badge-bg:  #000;
  --card-badge-fg:  var(--ja-white);
  --card-btn-bg:    var(--ja-white);
  --card-btn-fg:    var(--ja-navy);
  --card-edge:      transparent;
  --card-scrim:     rgba(201, 149, 79, 0.92);

  position: relative;
  width: clamp(16rem, 12rem + 22vw, 25.5rem);
  aspect-ratio: 25.5 / 17.5;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  box-shadow: var(--sh-sm), inset 0 0 0 1px var(--card-edge);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.promo-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--sh-lg), inset 0 0 0 1px var(--card-edge);
}

.promo-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.promo-card:hover .promo-card__img { transform: scale(1.07); }

/* Diagonal colour wash - the signature of this card in the design */
.promo-card__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(0 0, 62% 0, 40% 100%, 0 100%);
  background: var(--card-accent);
  opacity: var(--card-wash-op);
  transition: clip-path var(--t-slow) var(--ease-out);
}
.promo-card:hover .promo-card__wash { clip-path: polygon(0 0, 74% 0, 52% 100%, 0 100%); }

.promo-card__body {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 0.5rem + 1vw, 1.625rem);
  color: var(--card-ink);
  max-width: 78%;
}
/* The copy is wider than the wash at the card's foot, so its tail runs over
   the photograph. This bleeds the card's own colour out from the corner so
   that tail stays readable - invisible on top of the wash itself, and doing
   the real work only where it crosses the image. */
.promo-card__body::before {
  content: "";
  position: absolute;
  inset-inline-start: -12%;
  inset-block-end: -12%;
  width: 128%;
  height: 165%;
  z-index: -1;
  background: radial-gradient(125% 105% at 0% 100%, var(--card-scrim) 0%, transparent 72%);
  pointer-events: none;
}
.promo-card__title { color: var(--card-ink); font-size: var(--fs-h4); margin-bottom: 0.25rem; }
.promo-card__text {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--card-ink-soft);
  margin-bottom: var(--sp-4);
}
.promo-card__pill {
  position: absolute;
  z-index: 3;
  top: clamp(0.75rem, 0.4rem + 0.8vw, 1.25rem);
  inset-inline-start: clamp(0.75rem, 0.4rem + 0.8vw, 1.25rem);
  background: var(--card-badge-bg);
  color: var(--card-badge-fg);
}
/* CTA inherits the card's palette and inverts on hover */
.promo-card .btn-ja--light {
  --btn-bg: var(--card-btn-bg);
  --btn-fg: var(--card-btn-fg);
  --btn-bd: var(--card-btn-bg);
}
.promo-card .btn-ja--light:hover {
  --btn-bg: var(--card-btn-fg);
  --btn-fg: var(--card-btn-bg);
  --btn-bd: var(--card-btn-fg);
}

/* --- Five-colour cycle: gold, red, green, black, white -------------------
   Driven by :nth-child so the sequence repeats itself for any number of
   cards - add or remove cards and the rhythm holds with no class changes.  */
.rail--promo .promo-card:nth-child(5n + 1) {
  --card-accent: #C9954F;
  --card-scrim:  rgba(201, 149, 79, 0.92);
}
.rail--promo .promo-card:nth-child(5n + 2) {
  --card-accent: var(--ja-red);
  --card-scrim:  rgba(220, 23, 55, 0.92);
}
.rail--promo .promo-card:nth-child(5n + 3) {
  --card-accent: var(--ja-green);
  --card-scrim:  rgba(28, 144, 107, 0.92);
}

/* 4th - black: the default black badge would vanish, so it flips to white */
.rail--promo .promo-card:nth-child(5n + 4) {
  --card-accent:   var(--ja-black);
  --card-wash-op:  0.92;
  --card-scrim:    rgba(16, 17, 20, 0.92);
  --card-badge-bg: var(--ja-white);
  --card-badge-fg: var(--ja-black);
}

/* 5th - white: solid wash (a translucent one lets the photo muddy it), dark
   copy, and a hairline so the card reads against the page's white ground */
.rail--promo .promo-card:nth-child(5n + 5) {
  --card-accent:   #FFFFFF;
  --card-wash-op:  1;
  --card-scrim:    rgba(255, 255, 255, 0.94);
  --card-ink:      var(--ja-navy);
  --card-ink-soft: var(--ja-text);
  --card-btn-bg:   var(--ja-navy);
  --card-btn-fg:   var(--ja-white);
  --card-edge:     var(--ja-line);
}


/* ==========================================================================
   11. EXPLORE JORDAN  (coverflow carousel over a full-bleed backdrop)
   ========================================================================== */
.explore {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  isolation: isolate;
}
.explore__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Two stacked layers so selecting a card cross-fades the backdrop instead of
   flipping it. JS writes the incoming image to whichever layer is hidden,
   then swaps .is-shown between them. Each backdrop is pre-normalised to the
   same pale register, so the navy heading keeps its contrast throughout. */
.explore__bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity var(--t-slow) var(--ease),
              transform 1.2s var(--ease-out);
  will-change: opacity, transform;
}
.explore__bg-layer.is-shown { opacity: 1; transform: scale(1); }

.explore__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The design's own veil, with a small extra lift over the top band only.
     Every backdrop is pre-faded into the same 191-246 range, so this is all
     that is needed to hold the eyebrow above WCAG AA whichever image shows -
     and it leaves the card area at the design's original weight. */
  background: linear-gradient(180deg,
              rgba(246, 240, 232, 0.58) 0%,
              rgba(243, 233, 221, 0.30) 22%,
              rgba(243, 233, 221, 0.16) 42%,
              rgba(243, 233, 221, 0.55) 100%);
}

.explore__head { text-align: center; margin-bottom: clamp(1.5rem, 0.6rem + 2vw, 3rem); }
.explore__head .eyebrow { letter-spacing: 0.22em; color: var(--ja-gold-ink); }

/* --- Coverflow stage --- */
.coverflow {
  position: relative;
  height: clamp(19rem, 12rem + 24vw, 30rem);
  perspective: 75rem;
  margin-bottom: clamp(1.5rem, 0.6rem + 2vw, 2.75rem);
}
.coverflow__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cf-card {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: clamp(9.5rem, 6rem + 12vw, 17.5rem);
  aspect-ratio: 7 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ja-line-soft);
  box-shadow: 0 1.25rem 3.25rem rgba(12, 26, 53, 0.28);
  /* JS supplies --cf-x / --cf-rot / --cf-scale / --cf-z per position */
  transform: translate(-50%, -50%)
             translateX(var(--cf-x, 0))
             rotate(var(--cf-rot, 0deg))
             scale(var(--cf-scale, 1));
  z-index: var(--cf-z, 1);
  opacity: var(--cf-op, 1);
  transition: transform var(--t-slow) var(--ease-out),
              opacity var(--t-slow) var(--ease),
              box-shadow var(--t-base) var(--ease);
  cursor: pointer;
  will-change: transform;
}
.cf-card img { width: 100%; height: 100%; object-fit: cover; }

/* Legibility scrim for the city label */
.cf-card__scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(6, 12, 22, 0.72));
}
.cf-card__country {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
}
.cf-card__city {
  position: absolute;
  inset-inline: 0.9375rem;
  bottom: 0.9375rem;
  font-family: var(--font-head);
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.375rem);
  font-weight: 700;
  color: var(--ja-white);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.cf-card.is-center { box-shadow: 0 2rem 4.5rem rgba(12, 26, 53, 0.4); }
.cf-card.is-center .cf-card__city { text-transform: uppercase; letter-spacing: 0.04em; }
.cf-card:not(.is-center):hover { box-shadow: 0 1.75rem 4rem rgba(12, 26, 53, 0.36); }

/* --- Coverflow controls --- */
.coverflow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.75rem);
}
.cf-arrow {
  width: 2.875rem; height: 2.875rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(12, 26, 53, 0.22);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ja-navy);
  cursor: pointer;
  backdrop-filter: blur(0.375rem);
  -webkit-backdrop-filter: blur(0.375rem);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cf-arrow:hover { background: var(--ja-white); border-color: var(--ja-gold); color: var(--ja-gold-700); transform: translateY(-2px); }
.cf-arrow .ic { width: 1rem; height: 1rem; }

.cf-dots { display: flex; align-items: center; gap: 0.4375rem; }
.cf-dot {
  width: 0.4375rem; height: 0.4375rem;
  padding: 0; border: 0;
  border-radius: var(--r-pill);
  background: rgba(12, 26, 53, 0.26);
  cursor: pointer;
  transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.cf-dot.is-active { width: 1.5rem; background: var(--ja-white); }


/* ==========================================================================
   12. SPECIAL FLIGHT OFFERS
   Split card: media half + fare half. Rail peeks on both edges.
   ========================================================================== */
.offers { background: var(--ja-white); }

.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: clamp(20rem, 14rem + 42vw, 48.5rem);
  background: var(--ja-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.offer-card:hover { transform: translateY(-0.375rem); box-shadow: var(--sh-xl); }

.offer-card__media { position: relative; min-height: 17.5rem; overflow: hidden; }
.offer-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.offer-card:hover .offer-card__media img { transform: scale(1.06); }
.offer-card__pill { position: absolute; z-index: 2; top: 1rem; inset-inline-start: 1rem; }

.offer-card__body {
  padding: clamp(1.25rem, 0.7rem + 1.4vw, 2rem);
  display: flex;
  flex-direction: column;
}

/* Route strip: AMM ----[plane]---- DXB */
.route {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ja-line-soft);
  margin-bottom: var(--sp-4);
}
.route__code {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.625rem);
  font-weight: 700;
  color: var(--ja-navy);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.route__city {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ja-muted);
  margin-top: 0.1875rem;
}
.route__end { text-align: end; }
.route__line { position: relative; height: 1px; background: var(--ja-gold-200); }
.route__line .ic {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 1rem; height: 1rem;
  color: var(--ja-gold);
  background: var(--ja-white);
  padding-inline: 0.1875rem;
}

.offer-card__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ja-muted);
  margin-bottom: var(--sp-3);
}

.price { display: flex; align-items: baseline; gap: 0.4375rem; margin-bottom: var(--sp-4); }
.price__from { font-size: var(--fs-body-sm); color: var(--ja-text); }
.price__value {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 800;
  color: var(--ja-gold-700);
  line-height: 1;
  letter-spacing: -0.02em;
}
.price__cur { font-size: var(--fs-body-sm); color: var(--ja-muted); font-weight: 500; }

.offer-card__text { font-size: var(--fs-body-sm); line-height: 1.65; color: var(--ja-text); margin-bottom: var(--sp-5); }
.offer-card__actions { margin-top: auto; display: grid; gap: var(--sp-3); justify-items: center; }
.offer-card__actions .btn-ja { width: 100%; }

/* Closing line + button under the offers rail */
.offers-foot { text-align: center; margin-top: var(--sp-8); }
.offers-foot__note { font-size: var(--fs-body-sm); color: var(--ja-muted); margin-bottom: var(--sp-4); }


/* ==========================================================================
   13. WHY FLY  (feature grid)
   ========================================================================== */
.why { background: linear-gradient(180deg, #FEFCF9 0%, var(--ja-cream) 100%); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.feature-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 0.7rem + 1.2vw, 1.875rem);
  height: 100%;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.feature-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--sh-lg);
  border-color: var(--ja-gold-200);
}

.feature-card__icon {
  width: 3.125rem; height: 3.125rem;
  border-radius: var(--r-md);
  background: var(--ja-gold);
  color: var(--ja-white);
  display: grid; place-items: center;
  margin-bottom: var(--sp-6);
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.feature-card:hover .feature-card__icon { transform: translateY(-2px) rotate(-6deg); background: var(--ja-gold-600); }
.feature-card__icon .ic { width: 1.375rem; height: 1.375rem; }

.feature-card__title { margin-bottom: var(--sp-3); }
.feature-card__text { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ja-text); }


/* ==========================================================================
   14. e-MAGAZINE  (article / news cards)
   Each card carries: category, title, date, read time, excerpt, Read More.
   ========================================================================== */
.magazine { background: var(--ja-white); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.article-card:hover { transform: translateY(-0.4375rem); box-shadow: var(--sh-lg); border-color: var(--ja-gold-200); }

.article-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.article-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.article-card:hover .article-card__media img { transform: scale(1.07); }

.article-card__body {
  padding: clamp(1.125rem, 0.7rem + 1vw, 1.625rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.article-card__cat { margin-bottom: var(--sp-3); }
.article-card__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
  transition: color var(--t-fast) var(--ease);
}
.article-card:hover .article-card__title { color: var(--ja-gold-700); }

/* Publication date sits directly under the headline */
.article-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--ja-muted);
  margin-bottom: var(--sp-3);
}
.article-card__date .ic { width: 0.8125rem; height: 0.8125rem; opacity: 0.75; }

.article-card__text { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ja-text); margin-bottom: var(--sp-5); }

.article-card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ja-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.article-card__read { font-size: 0.75rem; color: var(--ja-muted); }


/* ==========================================================================
   15. MOBILE APP SECTION
   ========================================================================== */
.appsec {
  position: relative;
  background: var(--ja-cream);
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.2rem + 5vw, 6rem);
}
.appsec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.6rem + 3vw, 4rem);
  align-items: center;
}
.appsec__copy { max-width: 34rem; }
.appsec__title { margin-bottom: var(--sp-6); }
.appsec__text { color: var(--ja-text); line-height: 1.8; margin-bottom: var(--sp-7); }

.appsec__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(18rem, 10rem + 20vw, 30rem);
}
/* Concentric gold halo behind the phone */
.appsec__halo {
  position: absolute;
  width: min(26rem, 76%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ja-gold);
  box-shadow: 0 0 0 clamp(0.75rem, 0.3rem + 1vw, 1.75rem) rgba(211, 163, 94, 0.22),
              0 0 0 clamp(1.5rem, 0.6rem + 2vw, 3.25rem) rgba(211, 163, 94, 0.10);
  z-index: 0;
}
.appsec__phone {
  position: relative;
  z-index: 1;
  width: auto;
  max-height: clamp(17rem, 9rem + 22vw, 32rem);
  filter: drop-shadow(0 2rem 3.5rem rgba(12, 26, 53, 0.28));
  animation: floatY 6s var(--ease) infinite;
}

/* --- Store badges (built in markup so they stay crisp at any size) --- */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  background: #000;
  color: var(--ja-white);
  border: 1px solid #000;
  border-radius: 0.4375rem;
  padding: 0.4375rem 0.875rem;
  min-height: 2.875rem;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.28); background: #14181d; }
.store-badge__ic { width: 1.375rem; height: 1.375rem; flex: 0 0 auto; }
.store-badge__txt { display: grid; line-height: 1.1; text-align: start; }
.store-badge__top { font-size: 0.5625rem; letter-spacing: 0.04em; opacity: 0.85; text-transform: uppercase; }
.store-badge__name { font-family: var(--font-head); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
/* Compact variant for the footer, where the column is narrower */
.store-badge--sm { min-height: 2.25rem; padding: 0.3125rem 0.5625rem; gap: 0.4375rem; }
.store-badge--sm .store-badge__name { font-size: 0.75rem; }
.store-badge--sm .store-badge__top  { font-size: 0.5rem; }
.store-badge--sm .store-badge__ic   { width: 1rem; height: 1rem; }


/* ==========================================================================
   16. FOOTER
   Logo uses the same --logo-h as the header on every page.
   ========================================================================== */
.site-footer { background: var(--ja-ink); color: rgba(255, 255, 255, 0.72); }

.footer-main {
  padding-block: clamp(2.5rem, 1.2rem + 4vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 0.6rem + 2.4vw, 3rem);
}

.footer-brand__img { height: var(--logo-h); width: auto; margin-bottom: var(--sp-5); }
.footer-brand__text {
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
  max-width: 22rem;
  margin-bottom: var(--sp-7);
}
.footer-brand__label {
  font-family: var(--font-head);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--ja-white);
  margin-bottom: var(--sp-4);
}

.footer-col__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ja-gold);
  margin-bottom: var(--sp-5);
}
.footer-col__list { display: grid; gap: 0.875rem; }
.footer-col__link {
  position: relative;
  display: inline-block;
  font-size: var(--fs-body-sm);
  color: rgba(255, 255, 255, 0.74);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-col__link:hover { color: var(--ja-white); transform: translateX(0.25rem); }
.footer-col__link::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.75rem;
  top: 50%;
  width: 0.25rem; height: 1px;
  background: var(--ja-gold);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.footer-col__link:hover::before { opacity: 1; }

.footer-divider { height: 1px; background: rgba(255, 255, 255, 0.10); }

.footer-bottom { background: var(--ja-ink-2); padding-block: var(--sp-5); }
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.footer-bottom__copy { font-size: var(--fs-body-sm); color: rgba(255, 255, 255, 0.55); }
.footer-bottom__copy a { color: var(--ja-gold); font-weight: 600; }
.footer-bottom__copy a:hover { color: var(--ja-gold-200); }

.social-row { display: flex; gap: 0.5rem; }
.social-btn {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.social-btn:hover { background: var(--ja-gold); color: var(--ja-white); transform: translateY(-3px); }
.social-btn .ic { width: 1rem; height: 1rem; }


/* ==========================================================================
   17. VIDEO MODAL (popup)
   Every video on the site opens here: dim backdrop, clear close button,
   playback stops automatically on close.
   ========================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 0.4rem + 2vw, 2.5rem);
  background: rgba(6, 12, 22, 0.88);
  backdrop-filter: blur(0.375rem);
  -webkit-backdrop-filter: blur(0.375rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base) linear;
}
.video-modal.is-open { opacity: 1; visibility: visible; }

.video-modal__dialog {
  position: relative;
  width: min(64rem, 100%);
  transform: translateY(1.5rem) scale(0.96);
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease);
}
.video-modal.is-open .video-modal__dialog { transform: translateY(0) scale(1); opacity: 1; }

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2.5rem 6rem rgba(0, 0, 0, 0.6);
}
.video-modal__frame video,
.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

.video-modal__close {
  position: absolute;
  top: -3.25rem;
  inset-inline-end: 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  color: var(--ja-white);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.video-modal__close:hover { background: var(--ja-gold); border-color: var(--ja-gold); transform: rotate(90deg); }
.video-modal__close .ic { width: 1.125rem; height: 1.125rem; }

.video-modal__caption {
  margin-top: var(--sp-4);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body-sm);
}

/* Generic play overlay usable on any thumbnail across the site */
.play-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(6, 12, 22, 0.18);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.play-overlay:hover { background: rgba(6, 12, 22, 0.32); }
.play-overlay__btn {
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ja-gold-700);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.3);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.play-overlay:hover .play-overlay__btn { transform: scale(1.08); background: var(--ja-gold); color: var(--ja-white); }
.play-overlay__btn .ic { width: 1.25rem; height: 1.25rem; }


/* ==========================================================================
   18. UTILITIES, SCROLL REVEAL & ANIMATION
   --------------------------------------------------------------------------
   Reveal engine
   -------------
   js/main.js stamps .js-anim on <html> the moment it runs, and only then do
   the [data-aos] rules below hide anything. That ordering matters: if the
   script ever fails to load, the attributes are inert and every section
   renders normally instead of staying invisible. An IntersectionObserver
   then adds .is-in as each element scrolls into view.
   ========================================================================== */

/* Hidden start states — scoped to .js-anim so they can never strand content */
.js-anim [data-aos] {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js-anim [data-aos="fade-up"]    { transform: translateY(1.75rem); }
.js-anim [data-aos="fade-down"]  { transform: translateY(-1.75rem); }
.js-anim [data-aos="fade-start"] { transform: translateX(-1.75rem); }
.js-anim [data-aos="fade-end"]   { transform: translateX(1.75rem); }
.js-anim [data-aos="zoom-in"]    { transform: scale(0.94); }
.js-anim [data-aos="fade"]       { transform: none; }

/* Revealed state */
.js-anim [data-aos].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* RTL mirrors the horizontal variants */
[dir="rtl"].js-anim [data-aos="fade-start"],
[dir="rtl"] .js-anim [data-aos="fade-start"] { transform: translateX(1.75rem); }
[dir="rtl"].js-anim [data-aos="fade-end"],
[dir="rtl"] .js-anim [data-aos="fade-end"]   { transform: translateX(-1.75rem); }


/* Screen-reader-only text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: 0.5rem;
  transform: translate(-50%, -200%);
  z-index: 2000;
  background: var(--ja-navy);
  color: var(--ja-white);
  padding: 0.625rem 1.125rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Generic reveal hook for markup that does not carry a data-aos attribute */
.js-anim .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* Back-to-top */
.to-top {
  position: fixed;
  inset-inline-end: clamp(1rem, 0.4rem + 1vw, 1.75rem);
  bottom: clamp(1rem, 0.4rem + 1vw, 1.75rem);
  z-index: 1020;
  width: 2.875rem; height: 2.875rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  background: var(--ja-navy);
  color: var(--ja-white);
  cursor: pointer;
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              visibility var(--t-fast) linear, background var(--t-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ja-gold); }
.to-top .ic { width: 1.0625rem; height: 1.0625rem; }

/* Thin scroll-progress bar under the header */
.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  background: transparent;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--ja-gold), var(--ja-gold-200));
}

/* --- Keyframes --- */
@keyframes headerDrop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(1.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kenBurns {
  from { transform: scale(1.0);  }
  to   { transform: scale(1.09); }
}
@keyframes pulseRing {
  0%   { transform: scale(0.9); opacity: 0.9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1rem); }
}


/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS
   Desktop-first refinements: 1200 / 1024 (laptop) / 768 (tablet) / 480 (mobile)
   ========================================================================== */

/* ---------- <= 1200px : tighten the header, allow the search grid to wrap -- */
@media (max-width: 1200px) {
  .nav-primary__list { gap: 0.75rem; }

  /* Six fields no longer fit on one line. Rather than let them auto-flow and
     strand an empty cell, the route and cabin rows go full width and only the
     two dates share a line:
        From  /  swap  /  To  /  Departure | Return  /  Passengers          */
  .search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .search-fields > .field,
  .search-fields > .field-swap {
    border-inline-end: 0;
    border-block-end: 1px solid var(--ja-line-soft);
  }
  .search-fields > [data-field="from"],
  .search-fields > [data-field="to"],
  .search-fields > [data-field="pax"],
  .search-fields > .field-swap { grid-column: 1 / -1; }

  .search-fields > [data-field="depart"] { border-inline-end: 1px solid var(--ja-line-soft); }
  .search-fields > [data-field="pax"] { border-block-end: 0; }

  .field-swap { padding-block: 0.5rem; }
  .swap-btn { transform: rotate(90deg); }
  .swap-btn:hover { transform: rotate(270deg); }
}

/* ---------- <= 1024px : laptop / large tablet ---------------------------- */
@media (max-width: 1024px) {
  :root { --logo-h: 2.75rem; --header-h: 4.75rem; }

  /* Desktop nav out, hamburger in */
  .nav-primary { display: none; }
  .header-tools .tool-btn--login,
  .header-tools .tool-btn--lang { display: none; }
  .nav-toggle { display: grid; }
  .header-tools { margin-inline-start: auto; }

  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head__aside { padding-bottom: 0; }

  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid > *:last-child { grid-column: 1 / -1; max-width: 34rem; }

  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- <= 768px : tablet ------------------------------------------- */
@media (max-width: 768px) {
  .hero { padding-inline: 0; padding-top: 0; }
  .hero-slider { border-radius: 0; min-height: 30rem; }
  .hero-slide__inner { min-height: 30rem; align-items: flex-end; padding-block: 3rem 5.5rem; }
  .hero-slide__media img, .hero-slide__media video { object-position: center; }
  /* Vertical veil so the copy sits over the lower half */
  .hero-slide__veil {
    background: linear-gradient(180deg, rgba(243,233,221,0.30) 0%, rgba(243,233,221,0.70) 42%, rgba(243,233,221,0.98) 78%);
  }
  .hero-slide--dark .hero-slide__veil {
    background: linear-gradient(180deg, rgba(12,26,53,0.35) 0%, rgba(12,26,53,0.72) 48%, rgba(12,26,53,0.94) 88%);
  }
  .hero-slide__pattern { display: none; }
  .hero-copy { max-width: none; }
  .hero-text { max-width: none; }
  .hero-actions .btn-ja { flex: 1 1 12rem; }
  .hero-nav { bottom: 1rem; inset-inline-end: var(--container-pad); }
  .hero-arrow { width: 2.5rem; height: 2.5rem; }

  /* Below the tablet breakpoint the widget stops overlapping the slider and
     the CTA returns inside the card as a full-width button. */
  .search-widget-wrap { margin-top: 0; padding-top: var(--sp-6); }
  .search-widget { border-radius: var(--r-lg); }
  /* Four tabs in one row get too cramped on a phone; 2x2 keeps the labels
     legible without truncating them. */
  .search-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-widget__submit { margin-bottom: 0; }
  .search-widget__submit .btn-ja { width: 100%; }
  .search-status { position: static; margin-top: var(--sp-4); }
  .search-fields { grid-template-columns: 1fr; }
  .search-fields .field { border-inline-end: 0; border-block-end: 1px solid var(--ja-line-soft); }
  .search-fields .field:last-child { border-block-end: 0; }
  .field-swap {
    border-inline-end: 0;
    border-block-end: 1px solid var(--ja-line-soft);
    padding-block: 0.5rem;
  }
  .swap-btn { transform: rotate(90deg); }
  .swap-btn:hover { transform: rotate(270deg); }
  .fare-row { flex-direction: column; align-items: stretch; }
  .fare-row .pill { align-self: flex-start; }   /* badge stays hug-width */
  .fare-chip { justify-content: flex-start; }

  .offer-card { grid-template-columns: 1fr; width: min(24rem, 82vw); }
  .offer-card__media { min-height: 12rem; aspect-ratio: 16 / 10; }

  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
  .article-grid { grid-template-columns: 1fr; }
  .article-grid > *:last-child { max-width: none; }

  .appsec__grid { grid-template-columns: 1fr; }
  .appsec__visual { order: -1; min-height: 15rem; }
  .appsec__phone { max-height: 17rem; }
  .appsec__halo { width: min(15rem, 62%); }
  .appsec__copy { max-width: none; }

  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom__inner { justify-content: center; text-align: center; }

  .video-modal__close { top: auto; bottom: -3.25rem; inset-inline-end: 50%; transform: translateX(50%); }
  .video-modal__close:hover { transform: translateX(50%) rotate(90deg); }

  .coverflow { height: 22rem; }
}

/* ---------- <= 480px : mobile ------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --logo-h: 2.375rem;
    --header-h: 4.25rem;
    --container-pad: 1rem;
  }

  .hero-slider, .hero-slide__inner { min-height: 27rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  /* Reset the row-oriented flex basis inherited from the tablet rule, which
     would otherwise become a 12rem *height* once the stack goes vertical. */
  .hero-actions .btn-ja { flex: 0 0 auto; width: 100%; }
  .video-cue { width: 100%; justify-content: flex-start; }

  .trip-types { gap: 0.875rem; }
  .radio-ja__label { font-size: 0.8125rem; }

  .promo-card { width: 80vw; }
  .offer-card { width: 84vw; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-card__icon { margin-bottom: var(--sp-4); }

  .coverflow { height: 19rem; }
  .cf-card { width: 9.5rem; }

  .footer-main { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer-brand__text { max-width: none; }

  .store-badges { gap: 0.5rem; }
  .store-badge { min-height: 2.625rem; padding: 0.375rem 0.75rem; }

  .to-top { width: 2.5rem; height: 2.5rem; }
}

/* ---------- Very small phones (<= 360px) -------------------------------- */
@media (max-width: 360px) {
  .promo-card, .offer-card { width: 86vw; }
  .store-badge__name { font-size: 0.8125rem; }
}

/* ---------- Landscape phones: keep the hero from swallowing the screen -- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-slider, .hero-slide__inner { min-height: 26rem; }
}


/* ==========================================================================
   20. ACCESSIBILITY & PRINT
   ========================================================================== */

/* Visible, on-brand focus ring for keyboard users only */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ja-gold-700);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Honour the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-anim [data-aos], .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .hero-slide.is-active .hero-slide__media img { animation: none; }
  .appsec__phone { animation: none; }
}

/* Higher-contrast preference */
@media (prefers-contrast: more) {
  :root { --ja-text: #333B47; --ja-muted: #5C6472; }
  .promo-card__wash { opacity: 1; }
}

@media print {
  .site-header, .nav-drawer, .nav-scrim, .to-top, .scroll-progress,
  .hero-nav, .coverflow-controls, .rail-nav, .video-modal { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 0.75rem; color: #555; }
}


/* ==========================================================================
   22. BOOKING FLOW
   --------------------------------------------------------------------------
   Shared by the seven funnel pages: availability, passenger, seats, baggage,
   review, payment, confirmation. Everything here is direction-agnostic
   (logical properties) so the Arabic build needs almost no overrides.

     22.1  Trip banner
     22.2  Progress rail
     22.3  Two-column layout
     22.4  Summary card
     22.5  Section card
     22.6  Step navigation
     22.7  Availability
     22.8  Passenger form
     22.9  Seat map
     22.10 Baggage add-ons
     22.11 Review
     22.12 Payment
     22.13 Confirmation
     22.14 Responsive
   ========================================================================== */

.bk-page { background: var(--ja-cream); }


/* ---- 22.1 Trip banner ------------------------------------------------- */
.trip-banner {
  position: relative;
  margin-inline: min(1.5rem, 1.25vw);
  margin-top: min(1.5rem, 1.25vw);
  border-radius: clamp(0.75rem, 0.2rem + 1.2vw, 1.25rem);
  overflow: hidden;
  background: var(--ja-hero-dark);
  min-height: clamp(11rem, 7rem + 10vw, 18.5rem);
  display: grid;
  align-items: center;
  isolation: isolate;
}
.trip-banner__media { position: absolute; inset: 0; z-index: 0; }
.trip-banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center right;
}
.trip-banner__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(33,38,44,0.94) 0%, rgba(33,38,44,0.84) 30%,
                                     rgba(33,38,44,0.42) 56%, rgba(33,38,44,0.05) 100%);
}
.trip-banner__inner { position: relative; z-index: 2; padding-block: var(--sp-7); }

.trip-route {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.3rem + 1vw, 1.5rem);
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ja-white);
  line-height: 1;
}
.trip-route__dash { flex: 0 0 auto; width: clamp(1.5rem, 0.5rem + 2vw, 3rem); height: 1px; background: rgba(255,255,255,0.5); }
.trip-route .ic { width: 1.375rem; height: 1.375rem; color: var(--ja-gold); flex: 0 0 auto; }
.trip-banner__meta {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.76);
}


/* ---- 22.2 Progress rail ---------------------------------------------- */
.prog-wrap { margin-top: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem); position: relative; z-index: 5; }

/* Stacked label/value pairs are spans for semantics, so they need to be told
   to stack - otherwise "09:20 AMM Amman" runs together on one line. */
.leg__time, .leg__code, .leg__city,
.airline__name, .airline__meta,
.fare-from__label, .fare-from__amount, .fare-from__per,
.fare-opt__cabin, .fare-opt__per,
.pax-acc__name, .pax-acc__hint,
.rv-pax__name, .rv-pax__meta,
.bpass__label, .bpass__ref, .bpass__code, .bpass__city, .bpass__time,
.pax-tab__seat, .sum-block__label, .date-pill__day, .date-pill__val {
  display: block;
}
.pax-tab__seat { display: inline-block; }

.prog {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  padding: clamp(1rem, 0.5rem + 1vw, 1.5rem) clamp(1rem, 0.4rem + 1.6vw, 2.5rem);
  max-width: 68rem;
  margin-inline: auto;
  list-style: none;
}

.prog__step {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  text-align: center;
  min-width: 0;
}
.prog__dot {
  width: clamp(2.25rem, 1.6rem + 1.2vw, 3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ja-gold-100);
  color: var(--ja-gold);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.prog__dot .ic { width: 1.125rem; height: 1.125rem; }
.prog__label {
  font-family: var(--font-head);
  font-size: clamp(0.625rem, 0.55rem + 0.2vw, 0.8125rem);
  font-weight: 600;
  color: var(--ja-muted);
  white-space: nowrap;
}

/* Completed and current steps carry the gold fill */
.prog__step.is-done .prog__dot,
.prog__step.is-current .prog__dot { background: var(--ja-gold); color: var(--ja-white); }
.prog__step.is-current .prog__label { color: var(--ja-navy); font-weight: 700; }

.prog__link { display: grid; justify-items: center; gap: 0.5rem; }
.prog__step.is-done .prog__link:hover .prog__dot { background: var(--ja-gold-600); }
.prog__step.is-done .prog__link:hover .prog__label { color: var(--ja-navy); }

.prog__bar {
  flex: 1 1 auto;
  height: 2px;
  min-width: 0.75rem;
  margin-top: clamp(1.125rem, 0.8rem + 0.6vw, 1.5rem);
  border-radius: 2px;
  background: var(--ja-line);
}
.prog__bar.is-done { background: var(--ja-gold); }


/* ---- 22.3 Two-column layout ------------------------------------------ */
.bk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem);
  gap: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem);
  align-items: start;
  padding-block: clamp(2rem, 1rem + 2.6vw, 3.5rem);
}
.bk-layout--single { grid-template-columns: minmax(0, 1fr); }
.bk-aside { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: var(--sp-5); }

.bk-title { margin-bottom: 0.375rem; }
.bk-subtitle { color: var(--ja-muted); font-size: var(--fs-body-sm); margin-bottom: var(--sp-6); }

/* Heading with the design's gold tick-mark to its start side */
.bk-title--barred {
  position: relative;
  padding-inline-start: 0.875rem;
}
.bk-title--barred::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 3px;
  background: var(--ja-gold);
}


/* ---- 22.4 Summary card ----------------------------------------------- */
.sum-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.sum-card__head {
  background: var(--ja-navy);
  color: var(--ja-white);
  padding: 0.9375rem var(--sp-5);
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sum-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.sum-block { display: grid; gap: 0.375rem; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--ja-line-soft); }
.sum-block:last-child { border-bottom: 0; padding-bottom: 0; }
.sum-block__label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ja-muted);
}
.sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--ja-text);
}
.sum-row__k { color: var(--ja-text); }
.sum-row__v { font-family: var(--font-head); font-weight: 600; color: var(--ja-navy); white-space: nowrap; }
.sum-row--route .sum-row__k {
  font-family: var(--font-head);
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--ja-navy);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
.sum-row--route .ic { width: 0.875rem; height: 0.875rem; color: var(--ja-gold); }
.sum-row__v--muted { font-weight: 400; color: var(--ja-muted); font-size: 0.75rem; }

.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ja-line);
}
.sum-total__k { font-family: var(--font-head); font-size: var(--fs-h5); font-weight: 700; color: var(--ja-navy); }
.sum-total__v { text-align: end; }
.sum-total__amount {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 800;
  color: var(--ja-gold);
  line-height: 1.1;
}
.sum-total__note { display: block; font-size: 0.625rem; color: var(--ja-muted); margin-top: 0.125rem; }


/* ---- 22.5 Section card ----------------------------------------------- */
.bk-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  margin-bottom: var(--sp-4);
}
.bk-card__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(--ja-line-soft);
}
.bk-card__title { font-family: var(--font-head); font-size: var(--fs-h5); font-weight: 700; color: var(--ja-navy); }
.bk-card__body { padding: var(--sp-5); }

.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ja-gold-700);
}
.edit-link .ic { width: 0.875rem; height: 0.875rem; }
.edit-link:hover { color: var(--ja-navy); }


/* ---- 22.6 Step navigation -------------------------------------------- */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.step-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ja-text);
}
.step-back .ic { width: 0.9375rem; height: 0.9375rem; transition: transform var(--t-fast) var(--ease); }
.step-back:hover { color: var(--ja-navy); }
.step-back:hover .ic { transform: translateX(-0.1875rem); }


/* ---- 22.7 Availability ----------------------------------------------- */
.date-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.date-strip::-webkit-scrollbar { display: none; }

.date-pill {
  display: grid;
  gap: 0.1875rem;
  text-align: center;
  padding: 0.875rem 0.75rem;
  min-width: 7.5rem;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  background: var(--ja-white);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.date-pill:hover { border-color: var(--ja-gold-200); transform: translateY(-1px); }
.date-pill__day { font-size: 0.8125rem; color: var(--ja-muted); }
.date-pill__val { font-family: var(--font-head); font-size: var(--fs-body); font-weight: 700; color: var(--ja-navy); }
.date-pill.is-active { background: var(--ja-gold); border-color: var(--ja-gold); }
.date-pill.is-active .date-pill__day,
.date-pill.is-active .date-pill__val { color: var(--ja-white); }
.date-pill--muted { background: var(--ja-cream); }
.date-pill--muted .date-pill__val { color: var(--ja-muted); font-weight: 500; }
.date-pill--flag { border-color: var(--ja-navy); }
.date-pill--flag .date-pill__val { color: var(--ja-navy); }

.list-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.list-bar__count { font-size: var(--fs-body-sm); color: var(--ja-text); }
.list-bar__count b { color: var(--ja-navy); }
.sort-set { display: flex; align-items: center; gap: 0.4375rem; flex-wrap: wrap; }
.sort-set__label { font-size: var(--fs-body-sm); color: var(--ja-muted); }
.sort-chip {
  border: 1px solid var(--ja-line);
  background: var(--ja-white);
  border-radius: var(--r-xs);
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-head);
  color: var(--ja-text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sort-chip:hover { border-color: var(--ja-navy); }
.sort-chip.is-active { background: var(--ja-navy); border-color: var(--ja-navy); color: var(--ja-white); }

.flight-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.flight-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 0.9fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.airline { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.airline__mark {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-sm);
  background: var(--ja-navy);
  color: var(--ja-white);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.airline__mark .ic { width: 1.125rem; height: 1.125rem; }
.airline__name { font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 700; color: var(--ja-navy); }
.airline__meta { font-size: 0.6875rem; color: var(--ja-muted); }

.leg { text-align: center; }
.leg__time { font-family: var(--font-head); font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.5rem); font-weight: 700; color: var(--ja-navy); line-height: 1.1; }
.leg__code { font-size: 0.75rem; font-weight: 600; color: var(--ja-text); }
.leg__city { font-size: 0.6875rem; color: var(--ja-muted); }

.leg-mid { text-align: center; display: grid; gap: 0.125rem; justify-items: center; }
.leg-mid__dur { font-size: 0.6875rem; color: var(--ja-muted); }
.leg-mid__line { width: clamp(2.5rem, 1rem + 4vw, 5rem); height: 1px; background: var(--ja-gold-200); position: relative; }
.leg-mid__line .ic { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); width: 0.875rem; height: 0.875rem; color: var(--ja-gold); background: var(--ja-white); }
.leg-mid__stop { font-size: 0.6875rem; font-weight: 600; color: var(--ja-green); }

.fare-from { text-align: end; }
.fare-from__label { font-size: 0.6875rem; color: var(--ja-muted); }
.fare-from__amount { font-family: var(--font-head); font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.5rem); font-weight: 800; color: var(--ja-navy); line-height: 1.1; }
.fare-from__per { font-size: 0.6875rem; color: var(--ja-muted); }

/* Fare option cards inside an expanded flight */
.fare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-5);
}
.fare-opt {
  position: relative;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  background: var(--ja-white);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.fare-opt:hover { border-color: var(--ja-gold-200); box-shadow: var(--sh-sm); }
.fare-opt.is-selected { border-color: var(--ja-gold); background: var(--ja-gold-tint); box-shadow: var(--sh-sm); }

.fare-opt__flag {
  position: absolute;
  top: -0.6875rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--ja-gold);
  color: var(--ja-white);
  font-family: var(--font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.fare-opt__cabin { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ja-muted); }
.fare-opt__name { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 700; color: var(--ja-navy); margin-bottom: 0.375rem; }
.fare-opt__price { font-family: var(--font-head); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 800; color: var(--ja-navy); line-height: 1.1; }
.fare-opt__per { font-size: 0.6875rem; color: var(--ja-muted); margin-bottom: var(--sp-4); }
.fare-opt__radio {
  position: absolute;
  top: var(--sp-4);
  inset-inline-end: var(--sp-4);
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  border: 1.5px solid var(--ja-line);
  display: grid; place-items: center;
  color: transparent;
}
.fare-opt__radio .ic { width: 0.75rem; height: 0.75rem; }
.fare-opt.is-selected .fare-opt__radio { border-color: var(--ja-gold); background: var(--ja-gold); color: var(--ja-white); }

.fare-list { display: grid; gap: 0.5rem; padding-block: var(--sp-4); border-top: 1px solid var(--ja-line-soft); margin-bottom: var(--sp-3); }
.fare-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-body-sm); color: var(--ja-text); }
.fare-list .ic { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.125rem; color: var(--ja-navy); }
.fare-list li.is-no .ic { color: var(--ja-muted); }
.fare-list li.is-yes-green .ic { color: var(--ja-green); }

.fare-extras { display: grid; gap: 0.25rem; margin-bottom: var(--sp-4); }
.fare-extras li { font-size: 0.6875rem; color: var(--ja-muted); padding-inline-start: 0.6875rem; position: relative; }
.fare-extras li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.fare-opt__cta { margin-top: auto; }


/* ---- 22.8 Passenger form -------------------------------------------- */
.pax-acc { border: 1px solid var(--ja-line-soft); border-radius: var(--r-md); background: var(--ja-white); margin-bottom: var(--sp-4); box-shadow: var(--sh-xs); }
.pax-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
}
.pax-acc__num {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--ja-gold-100);
  color: var(--ja-gold-700);
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.pax-acc__txt { flex: 1 1 auto; min-width: 0; }
.pax-acc__name { font-family: var(--font-head); font-size: var(--fs-body); font-weight: 700; color: var(--ja-navy); }
.pax-acc__hint { font-size: 0.6875rem; color: var(--ja-muted); }
.pax-acc__chev { width: 1rem; height: 1rem; color: var(--ja-muted); transition: transform var(--t-fast) var(--ease); }
.pax-acc[open] .pax-acc__chev,
.pax-acc.is-open .pax-acc__chev { transform: rotate(180deg); }
.pax-acc__body { padding: 0 var(--sp-5) var(--sp-5); display: none; }
.pax-acc.is-open .pax-acc__body { display: block; }

.form-group { margin-bottom: var(--sp-5); }
.form-group__title {
  position: relative;
  padding-inline-start: 0.6875rem;
  font-family: var(--font-head);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--ja-navy);
  margin-bottom: var(--sp-4);
}
.form-group__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em; bottom: 0.15em;
  width: 3px;
  border-radius: 3px;
  background: var(--ja-gold);
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid--3 { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.form-field { display: grid; gap: 0.375rem; min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }
.form-field__label { font-size: 0.75rem; color: var(--ja-muted); }
.form-field__label .req { color: var(--ja-red); }

.input-ja, .select-ja {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-sm);
  background: var(--ja-white);
  padding: 0.6875rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--ja-navy);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input-ja::placeholder { color: var(--ja-muted); }
.input-ja:focus, .select-ja:focus {
  outline: none;
  border-color: var(--ja-gold);
  box-shadow: 0 0 0 3px rgba(211, 163, 94, 0.18);
}
.select-ja {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ja-muted) 50%),
                    linear-gradient(135deg, var(--ja-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.0625rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  padding-inline-end: 2rem;
}
[dir="rtl"] .select-ja {
  background-position: 1.0625rem 55%, 0.75rem 55%;
  background-image: linear-gradient(135deg, transparent 50%, var(--ja-muted) 50%),
                    linear-gradient(45deg, var(--ja-muted) 50%, transparent 50%);
}

.opt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ja-gold-700);
  cursor: pointer;
}
.opt-toggle .ic { width: 0.875rem; height: 0.875rem; }
.opt-toggle:hover { color: var(--ja-navy); }

.check-ja { display: inline-flex; align-items: center; gap: 0.5625rem; cursor: pointer; font-size: var(--fs-body-sm); color: var(--ja-text); }
.check-ja input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-ja__box {
  width: 1.0625rem; height: 1.0625rem;
  border: 1.5px solid var(--ja-line);
  border-radius: 0.25rem;
  display: grid; place-items: center;
  color: transparent;
  flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.check-ja__box .ic { width: 0.6875rem; height: 0.6875rem; }
.check-ja input:checked + .check-ja__box { background: var(--ja-gold); border-color: var(--ja-gold); color: var(--ja-white); }
.check-ja input:focus-visible + .check-ja__box { box-shadow: 0 0 0 3px rgba(211,163,94,0.3); }


/* ---- 22.9 Seat map --------------------------------------------------- */
.pax-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }
.pax-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-sm);
  background: var(--ja-white);
  padding: 0.5rem 0.875rem;
  font-family: var(--font-head);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ja-navy);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pax-tab .ic { width: 0.9375rem; height: 0.9375rem; }
.pax-tab__seat { font-weight: 700; color: var(--ja-gold-700); }
.pax-tab--done .ic { color: var(--ja-green); }
.pax-tab.is-active { background: var(--ja-gold); border-color: var(--ja-gold); color: var(--ja-white); }
.pax-tab.is-active .pax-tab__seat { color: var(--ja-white); }

.seat-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.125rem; margin-bottom: var(--sp-5); }
.seat-legend li { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.6875rem; color: var(--ja-text); }
/* :where() keeps this at zero specificity for the element part, so the
   .seat--* state classes below still win. Written as `.seat-legend i` it
   outranked them and painted every swatch white, which made the legend
   unable to show the states it exists to explain. */
.seat-legend :where(i) {
  width: 0.875rem; height: 0.875rem;
  border-radius: 0.1875rem;
  border: 1px solid var(--ja-line);
  background: var(--ja-white);
}

/* Seat state palette, shared by the legend swatches and the map */
.seat--available  { background: var(--ja-white);  border-color: var(--ja-line); }
.seat--occupied   { background: var(--seat-occupied);   border-color: var(--seat-occupied); }
.seat--legroom    { background: var(--seat-legroom);    border-color: var(--seat-legroom-bd); }
.seat--preferred  { background: var(--seat-preferred);  border-color: var(--seat-preferred-bd); }
.seat--unavailable{ background: var(--seat-unavailable); border-color: var(--seat-unavailable-bd); }
/* Last on purpose: a chosen seat must read gold whatever zone it sits in */
.seat--selected   { background: var(--ja-gold);   border-color: var(--ja-gold); }

.seat-map {
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  padding: var(--sp-5) var(--sp-4);
  overflow-x: auto;
}
.seat-map__nose { display: grid; justify-items: center; gap: 0.375rem; margin-bottom: var(--sp-4); }
.seat-map__nose .ic { width: 2.25rem; height: 2.25rem; color: var(--ja-line); }
.seat-map__nose span { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ja-muted); }

.seat-zone { border-top: 1px solid var(--ja-line-soft); padding-block: var(--sp-4); }
.seat-zone__name {
  text-align: center;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ja-muted);
  margin-bottom: var(--sp-3);
}
.seat-zone__name--gold { color: var(--ja-gold-700); }

.seat-cols, .seat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
}
.seat-cols { margin-bottom: 0.3125rem; }
.seat-row { margin-bottom: 0.3125rem; }
.seat-row:last-child { margin-bottom: 0; }

.seat-col-label, .seat-row-label {
  width: 1.375rem;
  font-size: 0.5625rem;
  color: var(--ja-muted);
  text-align: center;
  flex: 0 0 auto;
}
.seat-aisle { width: 1.125rem; flex: 0 0 auto; }

/* No background here on purpose: every seat carries a .seat--* state class,
   and this rule sits after the palette, so declaring one would win on source
   order and flatten the whole map to white. */
.seat {
  width: 1.375rem; height: 1.375rem;
  border-radius: 0.25rem;
  border: 1px solid var(--ja-line);
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.seat:not(:disabled):hover { transform: translateY(-1px) scale(1.08); box-shadow: var(--sh-sm); }
.seat:disabled { cursor: not-allowed; }


/* ---- 22.10 Baggage add-ons ------------------------------------------ */
.addon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.addon {
  display: grid;
  gap: 0.375rem;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  background: var(--ja-white);
  padding: var(--sp-4);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.addon:hover { border-color: var(--ja-gold-200); box-shadow: var(--sh-sm); }
.addon.is-added { border-color: var(--ja-gold); background: var(--ja-gold-tint); }
.addon__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.addon__name { font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 700; color: var(--ja-navy); }
.addon__flag {
  font-family: var(--font-head);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ja-gold-700);
  background: var(--ja-gold-100);
  border-radius: var(--r-pill);
  padding: 0.1875rem 0.4375rem;
}
.addon__text { font-size: 0.75rem; line-height: 1.55; color: var(--ja-text); }
.addon__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 0.25rem; }
.addon__price { font-family: var(--font-head); font-size: var(--fs-body); font-weight: 800; color: var(--ja-navy); }
.addon__price span { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; color: var(--ja-muted); }
.addon__price--free { color: var(--ja-green); }

.stepper { display: inline-flex; align-items: center; gap: 0.5rem; }
.stepper__btn {
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  border: 1px solid var(--ja-line);
  background: var(--ja-white);
  color: var(--ja-navy);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.stepper__btn:hover { border-color: var(--ja-gold); background: var(--ja-gold-100); }
.stepper__val { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-body-sm); color: var(--ja-navy); min-width: 1rem; text-align: center; }

.btn-add {
  border: 0;
  border-radius: var(--r-xs);
  background: var(--ja-gold);
  color: var(--ja-white);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4375rem 0.9375rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-add:hover { background: var(--ja-gold-600); transform: translateY(-1px); }
.btn-add--green { background: var(--ja-green); }
.btn-add--green:hover { background: #167456; }


/* ---- 22.11 Review --------------------------------------------------- */
.rv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.rv-pax { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; }
.rv-pax__num {
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  background: var(--ja-cream);
  border: 1px solid var(--ja-line);
  color: var(--ja-navy);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.rv-pax__name { font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 700; color: var(--ja-navy); }
.rv-pax__name--empty { color: var(--ja-muted); }
.rv-pax__meta { font-size: 0.6875rem; color: var(--ja-muted); }

.chip-green {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  /* Tint sampled from the design; the ink is a deeper green than --ja-green
     because --ja-green on this tint is only 3.7:1 and the label is 11px. */
  color: var(--ja-green-ink);
  background: var(--ja-green-tint);
  border-radius: var(--r-pill);
  padding: 0.1875rem 0.5625rem;
}
.chip-green .ic { width: 0.75rem; height: 0.75rem; }

.chip-date {
  font-size: 0.6875rem;
  color: var(--ja-text);
  background: var(--ja-cream);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-xs);
  padding: 0.3125rem 0.5625rem;
  white-space: nowrap;
}


/* ---- 22.12 Payment -------------------------------------------------- */
.pay-note { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: var(--fs-body-sm); color: var(--ja-text); margin-bottom: var(--sp-6); }
.pay-note .ic { width: 0.9375rem; height: 0.9375rem; color: var(--ja-green); }

.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.pay-method {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  background: var(--ja-white);
  padding: var(--sp-4) var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pay-method input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-method .ic { width: 1.5rem; height: 1.5rem; color: var(--ja-gold); }
.pay-method__name { font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 600; color: var(--ja-navy); }
.pay-method:has(input:checked) { border-color: var(--ja-gold); background: var(--ja-gold-tint); }
.pay-method:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(211,163,94,0.25); }

.card-brands { display: inline-flex; gap: 0.3125rem; align-items: center; }
.card-brands span {
  font-family: var(--font-head);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ja-muted);
  border: 1px solid var(--ja-line);
  border-radius: 0.1875rem;
  padding: 0.125rem 0.25rem;
}
.input-wrap { position: relative; }
.input-wrap__end {
  position: absolute;
  inset-inline-end: 0.6875rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  pointer-events: none;
}
.input-wrap__end .ic { width: 1rem; height: 1rem; color: var(--ja-muted); }
.input-wrap .input-ja { padding-inline-end: 4.25rem; }

.pay-cta { margin-top: var(--sp-5); }
.pay-cta .btn-ja { width: 100%; }


/* ---- 22.13 Confirmation --------------------------------------------- */
.done-block { text-align: center; max-width: 40rem; margin-inline: auto; padding-block: clamp(1.5rem, 0.6rem + 2.4vw, 3rem); }
.done-mark {
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  background: rgba(28, 144, 107, 0.12);
  color: var(--ja-green);
  display: grid; place-items: center;
  margin: 0 auto var(--sp-5);
  animation: donePop var(--t-slow) var(--ease-out) both;
}
.done-mark .ic { width: 1.875rem; height: 1.875rem; }
.done-pill {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ja-gold-700);
  background: var(--ja-gold-100);
  border-radius: var(--r-pill);
  padding: 0.3125rem 0.75rem;
  margin-bottom: var(--sp-4);
}
.done-title { margin-bottom: 0.5rem; }
.done-text { color: var(--ja-muted); font-size: var(--fs-body-sm); }

@keyframes donePop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Boarding-pass card */
.bpass {
  max-width: 43rem;
  margin-inline: auto;
  background: var(--ja-white);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.bpass__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--ja-navy);
  color: var(--ja-white);
  padding: var(--sp-4) var(--sp-5);
}
.bpass__label { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.bpass__ref { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 800; letter-spacing: 0.06em; }
.bpass__status { text-align: end; }
.chip-status {
  display: inline-block;
  /* Sampled from the design: bright #00CB52 with near-black green ink.
     That pairing is 6.6:1, so the design’s own choice already clears AA -
     an earlier revision here was based on a guess, not a measurement. */
  background: var(--ja-status-green);
  color: var(--ja-status-ink);
  font-family: var(--font-head);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.1875rem 0.5rem;
  margin-top: 0.1875rem;
}

.bpass__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
}
.bpass__ap { display: grid; gap: 0.125rem; }
.bpass__ap--end { text-align: end; }
.bpass__code { font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 800; color: var(--ja-navy); line-height: 1; }
.bpass__city { font-size: 0.6875rem; color: var(--ja-muted); }
.bpass__time { font-family: var(--font-head); font-size: var(--fs-body); font-weight: 700; color: var(--ja-navy); margin-top: 0.375rem; }

.bpass__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--ja-line-soft);
}
.bpass__fact { display: grid; gap: 0.1875rem; min-width: 0; }
.bpass__fact dt { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ja-muted); }
.bpass__fact dd { margin: 0; font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 700; color: var(--ja-navy); }

.bpass__paid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ja-cream);
  border-top: 1px solid var(--ja-line-soft);
}
.bpass__paid dt { font-family: var(--font-head); font-size: var(--fs-body-sm); font-weight: 700; color: var(--ja-navy); }
.bpass__paid dd { margin: 0; font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 800; color: var(--ja-gold); }

.done-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-7); }


/* ---- 22.14 Booking responsive --------------------------------------- */
@media (max-width: 1024px) {
  .bk-layout { grid-template-columns: minmax(0, 1fr); }
  .bk-aside { position: static; order: -1; }
  .fare-grid { grid-template-columns: 1fr; }
  .prog { border-radius: var(--r-lg); }
}

@media (max-width: 768px) {
  .trip-banner { margin-inline: 0; margin-top: 0; border-radius: 0; }
  .trip-banner__veil {
    background: linear-gradient(180deg, rgba(33,38,44,0.55) 0%, rgba(33,38,44,0.85) 60%, rgba(33,38,44,0.96) 100%);
  }
  .prog-wrap { margin-top: var(--sp-5); }
  .prog { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .prog::-webkit-scrollbar { display: none; }
  .prog__bar { min-width: 1.5rem; }

  .flight-head { grid-template-columns: 1fr 1fr; row-gap: var(--sp-4); }
  .airline { grid-column: 1 / -1; }
  .leg-mid { grid-column: 1 / -1; order: 3; }
  .fare-from { grid-column: 1 / -1; text-align: start; order: 4; }

  .form-grid, .form-grid--3, .addon-grid, .pay-methods { grid-template-columns: 1fr; }
  .bpass__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav .btn-ja { width: 100%; }
  .step-back { justify-content: center; }
}

@media (max-width: 480px) {
  .prog__label { display: none; }
  .prog { padding-inline: var(--sp-4); }
  .bpass__route { grid-template-columns: 1fr; text-align: center; }
  .bpass__ap--end { text-align: center; }
  .bpass__facts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Hero framing on dark slides
   The artwork is graded to the design's night register in the asset itself
   (see tools/README on the measured grade). The design also frames the
   aircraft tighter than `cover` gives on this aspect, so the zoom lives here
   rather than baked into a second crop of the file - one number to nudge.
   -------------------------------------------------------------------------- */
.hero-slide--dark .hero-slide__media,
.trip-banner__media {
  transform: scale(1.2);
  transform-origin: 84% 58%;
}


/* ==========================================================================
   23. CONTENT PAGES
   --------------------------------------------------------------------------
   The eighteen interior pages (about, contacts, careers, team, faqs, video,
   tabs, photo/photo1/photo2, news/news1/news2, list1/list2, grid1/grid2/grid3)
   reproduce the reference site's STRUCTURE — same sections in the same order,
   same links — rendered in this project's own visual language.

   Everything here is built on the tokens in §01, so these pages inherit the
   palette, spacing scale, radii and motion already established. Nothing below
   introduces a new colour.

     23.1  Page banner (the reference's .caption-inner) + breadcrumb
     23.2  Prose / article body
     23.3  Contact cards + contact form
     23.4  Careers: recruiting banner + vacancy list
     23.5  Team cards
     23.6  Accordion (FAQs, vacancy details)
     23.7  Tabset
     23.8  Photo galleries — grid, masonry, coverflow strip
     23.9  Video gallery
     23.10 News layouts — list, two-up, three-up
     23.11 Anchor menu (list1 / list2)
     23.12 Service cards (grid1) and category tiles (grid2 / grid3)
     23.13 Sidebar, pagination, share row
     23.14 Lightbox
   ========================================================================== */

/* ---- 23.1 Page banner --------------------------------------------------- */
/* The reference puts a photograph behind the page title with a breadcrumb
   above it. Here the same slot uses the project's night grade so an interior
   page opens with the same voice as the home hero, only quieter and shorter. */
.page-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(13rem, 9rem + 16vw, 22rem);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.75rem, 1rem + 3vw, 3.25rem);
  overflow: hidden;
  background: var(--ja-hero-dark);
}
.page-banner__media { position: absolute; inset: 0; z-index: -2; }
.page-banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Same framing decision as the hero: the aircraft sits right of centre. */
  transform: scale(1.14);
  transform-origin: 84% 58%;
}
.page-banner__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,  rgba(33,38,44,0.92) 0%, rgba(33,38,44,0.72) 38%,
                            rgba(33,38,44,0.34) 68%, rgba(33,38,44,0.18) 100%),
    linear-gradient(180deg, rgba(33,38,44,0.10) 0%, rgba(33,38,44,0) 40%,
                            rgba(33,38,44,0.55) 100%);
}
.page-banner__inner { position: relative; }
.page-banner__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--ja-white);
  letter-spacing: -0.01em;
}
.page-banner__lead {
  max-width: 46ch;
  margin: 0.75rem 0 0;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

/* Breadcrumb */
.breadcrumb-ja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.breadcrumb-ja li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb-ja li + li::before {
  content: "";
  width: 0.3125rem; height: 0.3125rem;
  border-radius: 50%;
  background: var(--ja-gold);
  opacity: 0.8;
}
.breadcrumb-ja a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.breadcrumb-ja a:hover { color: var(--ja-gold-300); }
.breadcrumb-ja [aria-current="page"] { color: var(--ja-gold-300); }

/* ---- 23.2 Prose --------------------------------------------------------- */
.prose {
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ja-text);
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.25em;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ja-navy);
}
.prose h3 {
  margin-top: 1.9em;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  color: var(--ja-navy);
}
.prose strong { color: var(--ja-navy); font-weight: 600; }
.prose a { color: var(--ja-gold-ink); text-underline-offset: 0.2em; }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--ja-gold-600); }
.prose blockquote {
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
  border-inline-start: 3px solid var(--ja-gold);
  background: var(--ja-gold-tint);
  border-radius: var(--r-sm);
  font-size: var(--fs-lead);
  color: var(--ja-navy);
}

/* A lead figure above the prose, as the reference's about page has. */
.article-figure {
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.article-figure img { display: block; width: 100%; height: auto; }
.article-figure figcaption {
  padding: 0.875rem 1.125rem;
  background: var(--ja-white);
  font-size: 0.875rem;
  color: var(--ja-muted);
}

/* Two-column split: prose beside a rail (about, list1). */
.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }

/* ---- 23.3 Contact cards + form ------------------------------------------ */
.contact-cards {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.info-card {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.info-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--sh-md);
  border-color: var(--ja-gold-200);
}
.info-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--ja-gold-100);
  color: var(--ja-gold-700);
}
.info-card__icon .ic { width: 1.25rem; height: 1.25rem; }
.info-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.info-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.info-card__list li { font-size: 0.9375rem; color: var(--ja-text); }
.info-card__list a { color: inherit; text-decoration: none; }
.info-card__list a:hover { color: var(--ja-gold-ink); text-decoration: underline; }

/* The form panel — the reference's "Have Touch!" block. */
.contact-panel {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--ja-cream);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-xl);
}
.contact-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-field { display: grid; gap: 0.4rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field > label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ja-navy);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ja-navy);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.form-field textarea { min-height: 8.5rem; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ja-gold);
  box-shadow: 0 0 0 3px rgba(211, 163, 94, 0.22);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ja-muted); }
.form-note { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; color: var(--ja-muted); }
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ja-green-ink);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.form-status.is-visible { opacity: 1; }

/* ---- 23.4 Careers ------------------------------------------------------- */
.recruit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--ja-hero-dark);
  color: var(--ja-white);
}
.recruit__media { position: absolute; inset: 0; z-index: -2; }
.recruit__media img { width: 100%; height: 100%; object-fit: cover; }
.recruit__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(33,38,44,0.94) 0%, rgba(33,38,44,0.80) 42%,
                                     rgba(33,38,44,0.42) 78%, rgba(33,38,44,0.24) 100%);
}
.recruit__title {
  max-width: 22ch;
  margin: 0 0 0.875rem;
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--ja-white);
}
.recruit__text { max-width: 56ch; margin: 0 0 1.75rem; color: rgba(255,255,255,0.8); line-height: 1.75; }
.recruit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Vacancy list */
.vacancies { display: grid; gap: 1rem; }
.vacancy {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.vacancy:hover { border-color: var(--ja-gold-200); box-shadow: var(--sh-sm); }
.vacancy.is-open { border-color: var(--ja-gold-300); box-shadow: var(--sh-md); }
.vacancy__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}
.vacancy__ref {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ja-muted);
}
.vacancy__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.vacancy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.125rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--ja-muted);
}
.vacancy__meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.vacancy__meta .ic { width: 0.9375rem; height: 0.9375rem; color: var(--ja-gold-600); }
.vacancy__summary { margin: 0 0 1rem; color: var(--ja-text); line-height: 1.75; }
.vacancy__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }

/* ---- 23.6 Accordion ----------------------------------------------------- */
/* One implementation serves the FAQ list and the vacancy "Details" toggle. */
.acc { display: grid; gap: 0.75rem; }
.acc__item {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.acc__item.is-open { border-color: var(--ja-gold-300); box-shadow: var(--sh-sm); }
.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1.125rem, 1rem + 0.8vw, 1.625rem);
  font: inherit;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ja-navy);
}
.acc__head:hover { background: var(--ja-gold-tint); }
.acc__q {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}
.acc__sign {
  position: relative;
  flex: 0 0 auto;
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  background: var(--ja-gold-100);
  transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
/* A "+" that rotates into a "−": two bars, one of which fades. */
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%; top: 50%;
  width: 0.6875rem; height: 2px;
  border-radius: 1px;
  background: var(--ja-gold-700);
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__item.is-open .acc__sign { background: var(--ja-gold); }
.acc__item.is-open .acc__sign::before,
.acc__item.is-open .acc__sign::after { background: var(--ja-white); }
.acc__item.is-open .acc__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* Height is animated by JS setting --h, so the panel can hold any content
   and still transition — `height: auto` is not animatable. */
.acc__panel {
  height: 0;
  overflow: hidden;
  transition: height var(--t-base) var(--ease-out);
}
/* .vacancy is not an .acc__item but reuses the same panel, so it needs the
   same open rule - without it the panel stays at height 0 and the toggle
   appears to do nothing. */
.acc__item.is-open .acc__panel,
.vacancy.is-open .acc__panel { height: var(--h, auto); }
.acc__body {
  padding: 0 clamp(1.125rem, 1rem + 0.8vw, 1.625rem) clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  color: var(--ja-text);
  line-height: var(--lh-base);
}
.acc__body > * + * { margin-top: 0.85em; }
.acc__body ul { margin: 0; padding-inline-start: 1.25em; }
.acc__body li::marker { color: var(--ja-gold-600); }

/* A heading that groups a run of accordion items, as the reference has. */
.acc-group-title {
  margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 1rem;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  color: var(--ja-navy);
}
.acc-group-title:first-child { margin-top: 0; }

/* ---- 23.5 Team ---------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: clamp(1.125rem, 0.75rem + 1.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.team-card {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.team-card:hover {
  transform: translateY(-0.3rem);
  box-shadow: var(--sh-lg);
  border-color: var(--ja-gold-200);
}
.team-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ja-beige);
}
.team-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.team-card:hover .team-card__media img { transform: scale(1.06); }

/* No portrait supplied: a monogram on the brand's own ground, rather than a
   stock face that would misrepresent a real person. */
.team-card__monogram {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 100% at 30% 0%, var(--ja-gold-100), transparent 60%),
    linear-gradient(160deg, var(--ja-beige), var(--ja-gold-200));
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ja-gold-700);
}
.team-card__body { padding: 1.125rem 1.25rem 1.25rem; }
.team-card__name {
  margin: 0 0 0.2rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.team-card__role {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ja-gold-ink);
}
.team-card__bio { margin: 0 0 0.9rem; font-size: 0.9063rem; line-height: 1.7; color: var(--ja-text); }
.team-social { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.team-social a {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  color: var(--ja-muted);
  background: var(--ja-cream);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.team-social a:hover { color: var(--ja-white); background: var(--ja-gold-600); }
.team-social .ic { width: 0.9375rem; height: 0.9375rem; }

/* ---- 23.7 Tabset -------------------------------------------------------- */
.tabset { display: grid; gap: 1.5rem; }
.tabset__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--ja-cream);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-lg);
}
.tabset__tab {
  padding: 0.6875rem 1.25rem;
  font: inherit;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ja-text);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.tabset__tab:hover { color: var(--ja-navy); background: var(--ja-white); }
.tabset__tab[aria-selected="true"] {
  color: var(--ja-white);
  background: var(--ja-navy);
  box-shadow: var(--sh-sm);
}
.tabset__panel[hidden] { display: none; }
.tabset__panel h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  color: var(--ja-navy);
}

/* ---- 23.8 Photo galleries ----------------------------------------------- */
/* photo.html — an even thumbnail grid. */
.gallery-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.gallery-grid a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ja-beige);
}
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.gallery-grid a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,26,53,0) 45%, rgba(12,26,53,0.5) 100%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.gallery-grid a:hover img { transform: scale(1.07); }
.gallery-grid a:hover::after { opacity: 1; }

/* photo2.html — a masonry column flow. */
.gallery-masonry {
  columns: 4 14rem;
  column-gap: 0.75rem;
}
.gallery-masonry a {
  position: relative;
  display: block;
  margin-bottom: 0.75rem;
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--r-md);
}
.gallery-masonry img { display: block; width: 100%; height: auto; transition: transform var(--t-slow) var(--ease-out); }
.gallery-masonry a:hover img { transform: scale(1.05); }

/* photo1.html — a wide slide with an overlaid caption, plus a thumb strip. */
.gallery-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ja-ink);
}
.gallery-stage__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
.gallery-stage__slide.is-active { opacity: 1; }
.gallery-stage__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-stage__cap {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(180deg, rgba(15,25,33,0) 0%, rgba(15,25,33,0.88) 100%);
  color: var(--ja-white);
}
.gallery-stage__name {
  margin: 0 0 0.25rem;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 600;
}
.gallery-stage__text { margin: 0; max-width: 60ch; color: rgba(255,255,255,0.82); font-size: 0.9375rem; }
.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gallery-thumbs button {
  flex: 0 0 auto;
  width: 6.5rem;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  scroll-snap-align: start;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button:hover { opacity: 0.85; }
.gallery-thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--ja-gold); }

/* ---- 23.9 Video gallery ------------------------------------------------- */
.video-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.video-card { display: grid; gap: 0.75rem; }
.video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ja-ink);
}
.video-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.video-card__thumb:hover img { transform: scale(1.05); opacity: 0.82; }
.video-card__play {
  position: absolute;
  inset-inline-start: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ja-navy);
  box-shadow: var(--sh-md);
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.video-card__thumb:hover .video-card__play {
  background: var(--ja-gold);
  color: var(--ja-white);
  transform: scale(1.08);
}
.video-card__play .ic { width: 1.125rem; height: 1.125rem; margin-inline-start: 0.15rem; }
.video-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.video-card__meta { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--ja-muted); }

/* ---- 23.10 News layouts -------------------------------------------------- */
/* news.html — image left, copy right, one per row. */
.news-list { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.news-row {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  align-items: center;
  padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-bottom: 1px solid var(--ja-line-soft);
}
.news-list > .news-row:last-child { border-bottom: 0; padding-bottom: 0; }
.news-row__media {
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
}
.news-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.news-row:hover .news-row__media img { transform: scale(1.05); }
.news-row__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--ja-navy);
}
.news-row__title a { color: inherit; text-decoration: none; }
.news-row__title a:hover { color: var(--ja-gold-ink); }
.news-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ja-gold-ink);
}
.news-date .ic { width: 0.875rem; height: 0.875rem; }
.news-row__text { margin: 0 0 1rem; color: var(--ja-text); line-height: 1.75; }

/* news1 / news2 — card grids, two-up beside a sidebar and three-up full width. */
/* Column count comes from a modifier class, never an inline custom property:
   an inline --cols would outrank every media query below and the grid would
   never collapse. */
.news-cards {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.news-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.news-card:hover {
  transform: translateY(-0.3rem);
  box-shadow: var(--sh-lg);
  border-color: var(--ja-gold-200);
}
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.news-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__body { display: grid; align-content: start; gap: 0.5rem; padding: 1.125rem 1.25rem 1.25rem; }
.news-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ja-navy);
}
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--ja-gold-ink); }
.news-card__text { margin: 0; font-size: 0.9063rem; line-height: 1.7; color: var(--ja-text); }
.news-card__foot { margin-top: 0.35rem; }

/* ---- 23.11 Anchor menu (list1 / list2) ---------------------------------- */
.anchor-menu {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--ja-cream);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-lg);
}
.anchor-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ja-text);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.anchor-menu a .ic { width: 0.875rem; height: 0.875rem; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.anchor-menu a:hover { color: var(--ja-navy); background: var(--ja-white); }
.anchor-menu a:hover .ic { opacity: 0.6; }
.anchor-menu a.is-current {
  color: var(--ja-white);
  background: var(--ja-navy);
}
.anchor-menu a.is-current .ic { opacity: 1; }

/* Each anchored section needs clearance for the sticky header. */
.anchor-section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.anchor-section + .anchor-section { margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }

/* ---- 23.12 Service cards + category tiles -------------------------------- */
.service-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.service-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-0.3rem);
  box-shadow: var(--sh-lg);
  border-color: var(--ja-gold-200);
}
.service-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1.125rem 1.25rem 1.375rem;
}
.service-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ja-gold-ink);
}
.service-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.service-card__title a { color: inherit; text-decoration: none; }
.service-card__title a:hover { color: var(--ja-gold-ink); }
.service-card__text { margin: 0; font-size: 0.9063rem; line-height: 1.7; color: var(--ja-text); }
.service-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ja-gold-ink);
  text-decoration: none;
}
.service-card__go .ic { width: 0.9375rem; height: 0.9375rem; transition: transform var(--t-fast) var(--ease-out); }
.service-card__go:hover .ic { transform: translateX(0.1875rem); }

/* Category tiles — photo panels whose whole surface is the link. */
.tile-grid {
  display: grid;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tile-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile {
  position: relative;
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: var(--tile-ratio, 3 / 4);
  padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-radius: var(--r-lg);
  color: var(--ja-white);
  text-decoration: none;
  background: var(--ja-ink);
}
.tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.tile::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,26,53,0.05) 30%, rgba(12,26,53,0.78) 100%);
  transition: background var(--t-base) var(--ease-out);
}
.tile:hover img { transform: scale(1.07); }
.tile:hover::after { background: linear-gradient(180deg, rgba(12,26,53,0.20) 20%, rgba(12,26,53,0.86) 100%); }
/* Headings inherit color: var(--ja-navy) from the global h1-h6 rule, which
   outranks the color set on .tile. Stated explicitly here or the title renders
   navy on a dark photograph - measured at 1.58:1 before this line. */
.tile__title {
  margin: 0;
  color: var(--ja-white);
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}
/* Every heading that sits on a dark ground needs its colour stated, for the
   same reason as .tile__title above. */
.page-banner__title,
.recruit__title,
.gallery-stage__name { color: var(--ja-white); }

.tile__meta {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ja-gold-300);
}

/* ---- 23.13 Sidebar, pagination ------------------------------------------ */
.side { display: grid; gap: 1.25rem; align-content: start; }
.side-box {
  padding: 1.25rem;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
}
.side-box__title {
  margin: 0 0 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--ja-line-soft);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.side-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.side-list a {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.side-list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.side-list__t { font-size: 0.875rem; font-weight: 600; line-height: 1.45; color: var(--ja-navy); }
.side-list a:hover .side-list__t { color: var(--ja-gold-ink); }
.side-list__d { font-size: 0.75rem; color: var(--ja-muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-cloud a {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--ja-text);
  text-decoration: none;
  background: var(--ja-cream);
  border: 1px solid var(--ja-line-soft);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.tag-cloud a:hover { color: var(--ja-white); background: var(--ja-gold-600); border-color: transparent; }

.pagination-ja {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  padding: 0;
  list-style: none;
}
.pagination-ja a, .pagination-ja span {
  display: grid;
  place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding-inline: 0.625rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ja-text);
  text-decoration: none;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pagination-ja a:hover { color: var(--ja-navy); border-color: var(--ja-gold-300); }
.pagination-ja [aria-current="page"] {
  color: var(--ja-white);
  background: var(--ja-navy);
  border-color: var(--ja-navy);
}
.pagination-ja .ic { width: 0.875rem; height: 0.875rem; }

/* ---- 23.14 Lightbox ------------------------------------------------------ */
/* Shares the video modal's behaviour and backdrop so the site has one
   full-screen overlay idiom rather than two. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 0.5rem + 3vw, 3rem);
  background: rgba(10, 16, 24, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base) var(--ease-out);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig {
  margin: 0;
  max-width: min(72rem, 100%);
  transform: scale(0.96);
  transition: transform var(--t-base) var(--ease-out);
}
.lightbox.is-open .lightbox__fig { transform: scale(1); }
.lightbox__fig img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.lightbox__cap {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--ja-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--ja-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__nav--prev { inset-inline-start: clamp(0.5rem, 0.25rem + 1vw, 1.25rem); }
.lightbox__nav--next { inset-inline-end: clamp(0.5rem, 0.25rem + 1vw, 1.25rem); }
.lightbox__nav .ic { width: 1rem; height: 1rem; }

/* ---- 23.15 Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
  .split, .split--reverse, .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .news-cards, .news-cards--2, .news-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid, .tile-grid--2, .tile-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anchor-menu { position: static; }
}

@media (max-width: 768px) {
  .news-cards, .news-cards--2, .news-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid, .tile-grid--2, .tile-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-row { grid-template-columns: minmax(0, 1fr); }
  .news-row__media { aspect-ratio: 16 / 9; }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .gallery-masonry { columns: 2 9rem; }
  .recruit__actions .btn-ja { flex: 1 1 12rem; justify-content: center; }
}

@media (max-width: 480px) {
  .news-cards, .news-cards--2, .news-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .tile-grid, .tile-grid--2, .tile-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .tile { aspect-ratio: 16 / 10; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .gallery-masonry { columns: 1; }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .breadcrumb-ja { font-size: 0.75rem; }
}

/* Reduced motion: keep the state changes, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .team-card:hover, .news-card:hover, .service-card:hover, .info-card:hover { transform: none; }
  .gallery-grid a:hover img, .gallery-masonry a:hover img,
  .tile:hover img, .news-card:hover .news-card__media img,
  .service-card:hover .service-card__media img,
  .team-card:hover .team-card__media img { transform: none; }
  .acc__panel { transition: none; }
}


/* ==========================================================================
   24. LOYALTY AND ACCOUNT
   --------------------------------------------------------------------------
     24.1  Numbered steps (how the programme works)
     24.2  Tier cards
     24.3  Comparison table
     24.4  Earning table
     24.5  Account / sign-in
     24.6  Notices
     24.7  Responsive
   ========================================================================== */

/* ---- 24.1 Numbered steps ------------------------------------------------ */
.steps {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  counter-increment: step;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
}
.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: 0.875rem;
  border-radius: 50%;
  background: var(--ja-gold-100);
  color: var(--ja-gold-700);
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
}
.step__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.step__text { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--ja-text); }

/* ---- 24.2 Tier cards ----------------------------------------------------
   Each tier carries its own accent through --tier, so the metal is stated
   once per card rather than repeated across five declarations. */
.tier-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tier {
  --tier: var(--ja-navy);
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.tier::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--tier);
}
.tier:hover {
  transform: translateY(-0.3rem);
  box-shadow: var(--sh-lg);
  border-color: var(--tier);
}
.tier--blue     { --tier: #5A7CA8; }
.tier--silver   { --tier: #8A929E; }
.tier--gold     { --tier: var(--ja-gold-600); }
.tier--platinum { --tier: var(--ja-ink); }

.tier__name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--tier);
}
.tier__qual {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ja-muted);
}
.tier__rate {
  margin: 0.25rem 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ja-navy);
}
.tier__rate small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ja-muted);
}
.tier__list { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.tier__list li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--ja-text);
}
.tier__list .ic { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--tier); }

/* ---- 24.3 Comparison table ----------------------------------------------
   A wide table must scroll inside its own box, never push the page sideways. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  background: var(--ja-white);
  -webkit-overflow-scrolling: touch;
}
.table-ja {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.table-ja th, .table-ja td {
  padding: 0.875rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--ja-line-soft);
  vertical-align: middle;
}
.table-ja thead th {
  position: sticky;
  top: 0;
  background: var(--ja-cream);
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ja-navy);
  border-bottom: 1px solid var(--ja-line);
}
.table-ja tbody tr:last-child th,
.table-ja tbody tr:last-child td { border-bottom: 0; }
.table-ja tbody tr:hover { background: var(--ja-gold-tint); }
.table-ja tbody th {
  font-weight: 600;
  color: var(--ja-navy);
}
.table-ja td { color: var(--ja-text); }
/* A tick or a dash, centred in the tier columns */
.table-ja .cell-mark { text-align: center; }
.table-ja .cell-mark .ic { width: 1.0625rem; height: 1.0625rem; color: var(--ja-green-ink); }
.table-ja .cell-mark span[aria-hidden] { color: var(--ja-line); }

/* ---- 24.4 Earning ------------------------------------------------------- */
.earn-note {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--ja-muted);
}

/* ---- 24.5 Account / sign-in --------------------------------------------- */
.auth {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.auth-card {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.auth-card--quiet { background: var(--ja-cream); box-shadow: none; }
.auth-card__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  color: var(--ja-navy);
}
.auth-card__text { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ja-text); }
.auth-form { display: grid; gap: 1rem; }
.auth-form .form-field--full { grid-column: auto; }

/* Password field with a reveal control sitting inside it */
.field-pw { position: relative; }
.field-pw input { padding-inline-end: 3rem; }
.pw-toggle {
  position: absolute;
  inset-inline-end: 0.5rem;
  bottom: 0.375rem;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  color: var(--ja-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.pw-toggle:hover { color: var(--ja-navy); background: var(--ja-cream); }
.pw-toggle .ic { width: 1.125rem; height: 1.125rem; }

.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.check-ja {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9063rem;
  color: var(--ja-text);
  cursor: pointer;
}
.check-ja input { width: 1.0625rem; height: 1.0625rem; accent-color: var(--ja-gold-600); }
.link-quiet-sm {
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--ja-gold-ink);
  text-decoration: none;
}
.link-quiet-sm:hover { text-decoration: underline; }

/* "or" rule between the two ways in */
.divider-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.875rem;
  margin: 1.25rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ja-muted);
}
.divider-or::before, .divider-or::after {
  content: "";
  height: 1px;
  background: var(--ja-line);
}

.auth-alt {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ja-line-soft);
  font-size: 0.9375rem;
  color: var(--ja-text);
}
.auth-alt a { font-weight: 600; color: var(--ja-gold-ink); }

/* ---- 24.6 Notices -------------------------------------------------------
   Used for the two honest disclosures these pages have to carry: that no
   credential is transmitted, and that the programme figures are illustrative. */
.notice {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 1rem 1.125rem;
  background: var(--ja-gold-tint);
  border: 1px solid var(--ja-gold-200);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ja-text);
}
.notice .ic { width: 1.25rem; height: 1.25rem; color: var(--ja-gold-700); margin-top: 0.1rem; }
.notice strong { color: var(--ja-navy); }
.notice--plain { background: var(--ja-cream); border-color: var(--ja-line); }
.notice--plain .ic { color: var(--ja-muted); }

/* Invalid field state, shared with the contact form */
.form-field input.is-invalid,
.form-field select.is-invalid,
.form-field textarea.is-invalid {
  border-color: var(--ja-red);
  box-shadow: 0 0 0 3px rgba(220, 23, 55, 0.14);
}
.field-error {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ja-red);
}

/* ---- 24.7 Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .tier-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tier:hover { transform: none; }
}


/* ==========================================================================
   25. PLAN & BOOK · OFFERS · FLIGHT STATUS · APP
   --------------------------------------------------------------------------
   Four chrome destinations that used to be in-page anchors on the home page.
   Everything here leans on components that already exist — .offer-card,
   .search-widget, .table-ja, .store-badge — so these pages add layout, not a
   second visual language.

     25.1  Offers grid
     25.2  Flight status
     25.3  Fare family cards
     25.4  App page
     25.5  Responsive
   ========================================================================== */

/* ---- 25.1 Offers grid ---------------------------------------------------
   The home page shows offers in a horizontal rail; a dedicated page shows
   them all at once, so the same .offer-card goes into a grid instead. */
.offer-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.offer-grid .offer-card { width: auto; min-width: 0; }

/* ---- 25.2 Flight status -------------------------------------------------- */
.status-panel {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  background: var(--ja-cream);
  border: 1px solid var(--ja-line-soft);
  border-radius: var(--r-xl);
}
.status-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.status-form .form-field--go { align-self: end; }
.status-form .btn-ja { width: 100%; }

/* Status pill. The colours are the ones already sampled from the design for
   the confirmation chip, so a "landed" flight here and a confirmed booking
   there read as the same state. */
.flight-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flight-status::before {
  content: "";
  width: 0.4375rem; height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}
.flight-status--ontime  { background: var(--ja-status-green); color: var(--ja-status-ink); }
.flight-status--landed  { background: var(--ja-green-tint);   color: var(--ja-green-ink); }
.flight-status--delayed { background: #FDECC8;                color: #7A4E00; }
.flight-status--boarding{ background: var(--ja-gold-100);     color: var(--ja-gold-ink); }
.flight-status--cancelled { background: #FDE2E6;              color: #8E0C21; }

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ja-muted);
}

/* ---- 25.3 Fare families -------------------------------------------------- */
.fare-family {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fare-fam {
  --fam: var(--ja-line);
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.fare-fam:hover { border-color: var(--ja-gold-200); box-shadow: var(--sh-sm); }
.fare-fam--featured {
  border-color: var(--ja-gold);
  box-shadow: var(--sh-md);
}
.fare-fam__flag {
  align-self: start;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--ja-gold-100);
  color: var(--ja-gold-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fare-fam__name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ja-navy);
}
.fare-fam__from { margin: 0; font-size: 0.8125rem; color: var(--ja-muted); }
.fare-fam__price {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ja-navy);
}
.fare-fam__list { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.fare-fam__list li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--ja-text);
}
.fare-fam__list .ic { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--ja-green-ink); }
.fare-fam__list li.is-out { color: var(--ja-muted); }
.fare-fam__list li.is-out .ic { color: var(--ja-line); }

/* ---- 25.4 App page ------------------------------------------------------- */
.app-split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
}
.app-shot { display: grid; place-items: center; }
.app-shot img { width: 100%; max-width: 22rem; height: auto; }
.app-features { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.125rem; }
.app-features li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
}
.app-features .info-card__icon { width: 2.75rem; height: 2.75rem; }
.app-features h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ja-navy);
}
.app-features p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--ja-text); }
.app-badges { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }

/* ---- 25.5 Responsive ----------------------------------------------------- */
@media (max-width: 1024px) {
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fare-family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-split { grid-template-columns: minmax(0, 1fr); }
  .app-shot { order: -1; }
}
@media (max-width: 768px) {
  .status-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-form .form-field--go { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .fare-family { grid-template-columns: minmax(0, 1fr); }
  .status-form { grid-template-columns: minmax(0, 1fr); }
}