/* ==========================================================================
   THE TALENT PACK, Crew Hiring Partner, "Coming Soon" teaser
   Palette, type, button, and Compass-widget tokens are carried over
   verbatim from talent-pack-crew/styles.css so this page reads as the
   same brand, not a new one. See talent-pack-crew/report.md for the
   full history of those decisions.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Archivo:wght@400;500;600;700&family=Cinzel:wght@600;900&display=swap');

:root {
  /* ---- Tropical / nautical palette (Talent Pack, Crew Hiring Partner) ---- */
  --navy-deep:    #073B4C;
  --navy:         #0B4F6C;
  --turquoise:    #17BEBB;
  --turquoise-dk: #119C99;
  --seafoam:      #CFF4EA;
  --coral:        #FF6B4A;
  --coral-dk:     #E5543A;
  --coral-text:   #B24B34;  /* darkened coral, 4.6:1 on sand, for small/thin text (WCAG AA) */
  --coral-btn:    #CD4726;  /* primary button fill, 4.64:1 with white label (WCAG AA) */
  --coral-btn-dk: #B84326;  /* its hover, 5.43:1 with white */
  --turquoise-text: #0D7573; /* darkened turquoise, 4.7:1 on seafoam, for small/thin text (WCAG AA) */
  --sand:         #FBEEDD;
  --gold:         #E4B363;
  --white:        #FFFFFF;
  --ink:          #0B1B22;
  --whatsapp:     #25D366;
  --whatsapp-dk:  #1DA851;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Archivo', Helvetica, Arial, sans-serif;

  --space-lg: 140px;
  --space-md: 96px;
  --space-sm: 64px;
  --container-pad-desktop: 100px;
  --container-pad-tablet: 48px;
  --container-pad-mobile: 20px;
  --container-max: 1440px;

  --radius-pill: 100px;
  --radius-card: 14px;
  --media-radius-accent: 4px;
  --media-frame-line: rgba(228, 179, 99, 0.4);

  --ease-1: cubic-bezier(.42,0,.04,.88);
  --ease-2: cubic-bezier(.42,0,.32,.98);

  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The header is position:fixed, so an anchor jump would otherwise land the
   target at viewport top with its first 84px hidden underneath, which on this
   site is always the section heading. Offset every id target by the header
   height plus a little breathing room. :where() keeps specificity at 0 so any
   component can still override it. */
:where([id]) { scroll-margin-top: calc(var(--header-h) + 12px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--sand);
}

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-desktop);
}

@media (max-width: 1024px) { .container { padding: 0 var(--container-pad-tablet); } }
@media (max-width: 560px)  { .container { padding: 0 var(--container-pad-mobile); } }

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--navy-deep);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  z-index: 1000;
  transition: top 0.2s var(--ease-2);
}
.skip-link:focus { top: 12px; }

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

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 700; color: var(--navy-deep); }

h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.5px; }
h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.08; text-transform: uppercase; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 600; }
h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--turquoise-dk); }

p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; margin: 0 0 1em; }

/* ---- Line-break quality. Plain greedy word-wrap can leave a single short
   word stranded alone at the start or end of a line, which reads as sloppy
   in body copy and headlines. text-wrap:balance evens out heading line
   lengths; text-wrap:pretty looks ahead across a paragraph to avoid
   orphaned trailing words. Both are progressive enhancements (no effect,
   no harm, in browsers that don't yet support them). ---- */
h1, h2, h3, .eyebrow { text-wrap: balance; }
p, li, blockquote, .lede, .philosophy-line { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--coral-text);
  margin-bottom: 12px;
}

/* The hero is always dark (a navy scrim over media) but is not tagged
   .on-dark, so its eyebrow was falling back to --coral-text, the darkened
   variant intended for light backgrounds. Barely legible on the old navy
   placeholder and worse over real video. Both heroes get the on-dark gold. */
.on-dark .eyebrow,
.hero .eyebrow { color: var(--gold); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark p { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* justify-content centres the text node as a block, but the lines inside it
     still take text-align, which defaults to start. Without this, a label that
     wraps ("Other Pack Services", "Join the Crew List") centres as a group
     while its two lines sit left-aligned against each other. */
  text-align: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  padding: 16px 28px;
  transition: background-color 0.2s var(--ease-2), color 0.2s var(--ease-2), border-color 0.2s var(--ease-2), transform 0.2s var(--ease-2);
}
.btn:hover { transform: translateY(-1px); }

/* White label on a deepened coral. White on the brand --coral (#FF6B4A) is
   only 2.82:1, well under AA, so the fill is darkened just enough to carry
   white type. --coral itself is left alone for the decorative uses (arrow
   fills, icon circles, borders, link hovers) where it still works. */
.btn--primary { background: var(--coral-btn); color: var(--white); }
.btn--primary:hover { background: var(--coral-btn-dk); }

.btn--outline { background: transparent; border: 2px solid var(--navy-deep); color: var(--navy-deep); }
.btn--outline:hover { background: var(--navy-deep); color: var(--white); }

.btn--outline-light { background: transparent; border: 2px solid var(--white); color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--navy-deep); }

.btn--text {
  background: transparent;
  padding: 10px 14px;
  text-transform: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: normal;
  color: var(--navy-deep);
}
.btn--text:hover { color: var(--turquoise-dk); }

.btn--small { padding: 10px 18px; font-size: 12px; }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.btn--outline[aria-disabled="true"]:hover,
.btn--primary[aria-disabled="true"]:hover { transform: none; }

/* ==========================================================================
   Media placeholders, required throughout per spec. Visual treatment is
   pure CSS (generated content + pattern) so the required markup stays
   exactly `<div class="media-placeholder"><!-- Photo Placeholder --></div>`
   etc., with no extra DOM needed. Marked aria-hidden in markup since none
   of these carry real information yet.
   ========================================================================== */

.media-placeholder,
.video-placeholder,
.video-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border-radius: var(--radius-card);
  border: 2px dashed rgba(228, 179, 99, 0.55);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(255,255,255,0.015) 12px 24px),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}

.media-placeholder::before,
.video-placeholder::before,
.video-slot::before {
  content: '';
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(228, 179, 99, 0.18);
  border: 1.5px solid rgba(228, 179, 99, 0.6);
}
.video-placeholder::before,
.video-slot::before {
  /* play triangle via border trick, centered inside the circle */
  display: flex;
}
.video-placeholder::after,
.video-slot::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--gold);
  margin-left: 5px;
}

/* ---- Real asset in a placeholder slot ----
   The placeholder classes carry a dashed border, a striped fill and a
   pseudo-element play icon, all of which are scaffolding for an empty box.
   Adding .is-media alongside the original class keeps the slot's sizing and
   position (that CSS is written against the container) while stripping the
   empty-state chrome, so an <img> or <video> can be dropped straight in. */
.is-media {
  border: none;
  min-height: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: none;
}
.is-media::before,
.is-media::after { content: none; display: none; }

/* Hero is full-bleed and absolutely positioned, so it keeps its own sizing
   and only needs the media cropped rather than stretched. Applies to both
   pages: the crew page's hero-media is a video, the services page's is
   now a static image. */
video.hero-media, img.hero-media { object-fit: cover; aspect-ratio: auto; }

/* Role card banner: matches the 16:10 box the placeholder occupied, with the
   same hairline under it that .job-card .media-placeholder had. */
.job-card-media {
  display: block;
  width: 100%;
  /* height:auto is load-bearing: without it the img's height attribute wins
     over aspect-ratio and the card renders a full-height image strip. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 2px solid var(--media-frame-line);
}

/* The leadership headshot reads better as a portrait than a 16:10 crop. */
.leadership-block img.is-media { aspect-ratio: 3 / 4; }

.media-placeholder .placeholder-label,
.video-placeholder .placeholder-label {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(251, 238, 221, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(7, 59, 76, 0.08);
  transition: box-shadow 0.25s var(--ease-2);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(7, 59, 76, 0.12); }

.site-header .container { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* min-width:0 overrides the flex item's default auto min-width floor, which
   a nested-flex child like this otherwise sets to its unwrapped content size,
   blocking the text from shrinking/wrapping at narrow (mobile) widths and
   pushing the header wider than the viewport. */
.wordmark { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.wordmark:has(.wordmark-mark) { flex-direction: row; align-items: center; gap: 10px; }
.wordmark-mark { width: 42px; height: 42px; flex-shrink: 0; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.wordmark strong {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--navy-deep);
  text-transform: uppercase;
}
.wordmark span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  /* --turquoise-text, not --turquoise-dk: at 9px this is small text, and the
     base tone measures 2.95:1 on --sand, failing WCAG AA. The -text variant
     exists for exactly this and measures 4.82:1. */
  color: var(--turquoise-text);
  text-transform: uppercase;
}

.header-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* The wordmark must not be the element that gives way. It carries min-width:0
   (required to stop a phone-width overflow bug), which without this let it
   shrink to 1px between roughly 900px and 1300px, spilling its text across the
   nav links. Reserving its width means any remaining shortfall is resolved by
   the breakpoints below instead of by silently destroying the logo. */
.wordmark { flex-shrink: 0; }

/* Re-measured after the wolf-mark logo and the icon-bearing primary CTA landed.
   The wordmark grew from about 200px to 265px and .header-actions from 305px to
   518px, so the crew row now wants 1377px of content width (wordmark 265 + nav
   562 + actions 518 + 32 of gaps) and the services row 1202px.

   The ceiling is not the viewport: `.container` is capped at max-width 1440px
   with 100px of padding each side, so the row never gets more than 1240px of
   content width however wide the screen is. The crew row therefore overflowed by
   163px at every width (measured live, not estimated), clipping "Join the Crew
   List", and the services row fitted with 0px to spare. Viewport breakpoints
   alone could not fix that.

   The secondary button was dropped from the crew row entirely for a while
   (same link is in the footer and #mobileNav either way), but it's wanted back
   in the header row too. Two changes recover the ~163px instead: the crew row's
   own copy of "Other Pack Services" is shortened to "Our Services" here (the
   footer/mobile-nav instances keep the fuller wording, matching how the
   services page's own header button was shortened to "Crew Hiring" while its
   other instances kept theirs), and the crew page's nav items get tighter
   horizontal padding (14px to 8px, :has() already the idiom used for .wordmark
   above, scoped so the services page's nav is untouched). Verified live at
   1440px: row now fits with slack to spare.

   Below 1440px the container stops being capped and starts tracking the
   viewport, so both rows run out of room again; the media queries below still
   drop the secondary button there, same trade as before. If the logo or either
   header button changes width again, re-measure. */
.container:has(.lang-select) .header-nav .btn--text { padding: 10px 4px; }
.container:has(.lang-select) .header-actions { gap: 8px; }

@media (max-width: 1440px) {
  .header-actions .btn--outline { display: none; }
}

@media (max-width: 1400px) {
  .header-nav { display: none; }
}

/* Between 1400px and 760px the row is wordmark + primary button + language +
   hamburger, which still crowds the wordmark on smaller tablets, so the primary
   button drops here rather than waiting for 560px. Both links are already in
   #mobileNav. */
@media (max-width: 760px) {
  .header-actions .btn--primary,
  .header-actions .btn--outline { display: none; }
}

@media (max-width: 560px) {
  /* Both hide safely: identical links already live in #mobileNav, and
     without this the header row (wordmark + outline link + lang-select +
     nav-toggle) is wider than the viewport, pushing nav-toggle off-canvas
     and causing real horizontal page overflow. */
  .header-actions .btn--primary,
  .header-actions .btn--outline { display: none; }
  /* Collapse the language toggle to its globe icon: the "EN" label alone
     was still ~35px more than the narrowest phones have to spare. */
  .lang-toggle .lang-current { display: none; }
  .lang-toggle { padding: 6px 8px; gap: 3px; }
  .site-header .container { gap: 8px; }
  .header-actions { gap: 6px; }
  /* Force-wrap rather than rely on flex-shrink: a fixed-position header
     that even briefly overflows can expand its own containing block on
     some engines, which then permits *more* overflow (the shrink math
     runs against the wrong, larger width). A hard cap sidesteps that by
     never letting the row's natural width approach the viewport edge. */
  .wordmark-text { max-width: 120px; }
}

/* ---- Language selector (nav) ---- */
.lang-select { position: relative; }
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1.5px solid rgba(7, 59, 76, 0.25);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy-deep);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-2), background 0.2s var(--ease-2);
}
.lang-toggle:hover { border-color: var(--turquoise-dk); }
.lang-toggle .caret { font-size: 10px; transition: transform 0.2s var(--ease-2); }
.lang-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(7, 59, 76, 0.22);
  padding: 6px;
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-2), transform 0.2s var(--ease-2);
  z-index: 50;
}
.lang-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.lang-option:hover, .lang-option:focus-visible { background: var(--sand); }
.lang-option[aria-selected="true"] { color: var(--turquoise-dk); font-weight: 700; }
.lang-option .flag { font-size: 16px; }
/* Non-English options are not translated yet: muted, with a "Soon" badge */
.lang-option[data-soon] { opacity: 0.7; cursor: default; }
.lang-option[data-soon]:hover, .lang-option[data-soon]:focus-visible { opacity: 1; }
/* Non-interactive: signals the list above isn't exhaustive without
   implying a specific next language, so it deliberately isn't a
   .lang-option (no flag, no button, excluded from the click/keyboard
   handling in initLanguageSelect()). */
.lang-more {
  padding: 8px 10px 4px;
  margin-top: 2px;
  border-top: 1px solid rgba(11,27,34,0.08);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  color: rgba(11,27,34,0.5);
}

.lang-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--turquoise-text);
  background: var(--seafoam);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  padding-top: 84px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border: none;
}

/* ---- Split hero. CURRENTLY UNUSED: both pages now run the full-bleed .hero
   with the ocean video. Kept because it is the only layout that works with
   hero-husky-eyes.jpg, which is also unused but still in images/.

   If you bring either back, bring both: the fade into the navy background is
   baked into hero-husky-eyes.jpg itself (a gradient ramp composited over the
   exact --navy-deep colour at export time), not a CSS mask, so there is no
   seam where a hard-edged crop meets a CSS-layer fade. The flip side is the
   two heroes are not interchangeable. This layout needs an asset carrying that
   baked fade and composed to sit in the left 45%; the full-bleed .hero below
   needs an asset that fills the frame, because its ::after tint is what keeps
   white copy readable over bright footage. Swapping the media means moving the
   layout with it. */
.hero--split {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
}
/* Higher specificity than .hero::after (not just a same-specificity
   override), since an equal-specificity `content: none` here previously
   lost to .hero::after's later position in the file, leaving the old
   full-bleed dark gradient rendering on top of the split hero too. */
.hero.hero--split::after { content: none; }

.hero-media-col { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Text starts just past where the image's own baked-in fade reaches the
   navy background (~48%, measured off the pixels at 743 of 1536), a close,
   connected transition rather than a dead gap of flat colour between the two.
   Verified empirically in-browser at 1024/1280/1440, not just computed, since
   percentage margins on a shrinkable flex item don't land where the raw
   arithmetic predicts.

   The column is 700px, not 620px: the crew page's hero copy is a good deal
   longer than the services copy this layout was first tuned against, and at
   620px it wrapped the h1 onto 4 lines and ran the content to 894px, pushing
   both CTAs below the fold where the shared .reveal observer leaves them at
   opacity 0 until you scroll. 700px brings the h1 back to 3 lines and the
   content to 763px, so the CTAs paint with the hero. 45% is unchanged, so the
   relationship to the fade is exactly as tuned; widening past 700px does not
   help, as the copy stops re-wrapping there. */
.hero--split .hero-content.container {
  position: relative;
  z-index: 1;
  margin-left: 45%;
  margin-right: 0;
  max-width: 700px;
}

@media (max-width: 900px) {
  .hero--split { display: block; min-height: auto; }
  .hero-media-col { position: relative; inset: auto; width: 100%; height: 260px; }
  .hero--split .hero-content.container { margin-left: 0; max-width: none; padding-block: var(--space-sm); }
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Strengthened for real footage. These stops were tuned against the dark
     striped placeholder, where 0.45 through the middle was ample; over the
     bright ocean video the white hero copy washed out badly. Deepened enough
     to hold the text against a moving, mostly-light background while still
     reading as a tint rather than a flat overlay. */
  background: linear-gradient(180deg, rgba(7,59,76,0.72) 0%, rgba(7,59,76,0.62) 40%, rgba(7,59,76,0.94) 100%);
  z-index: 1;
}

/* Vertical padding only via padding-block, so .container's own responsive
   horizontal padding survives. A `padding: X 0` shorthand here previously
   zeroed it, which the 760px max-width masked on desktop (the box centres)
   but left the hero copy flush against the screen edge below ~760px. */
.hero-content { position: relative; z-index: 2; color: var(--white); max-width: 760px; padding-block: var(--space-sm); }
.hero-content h1 { color: var(--white); }
.hero-content .lede { font-size: clamp(16px, 2vw, 19px); color: rgba(255,255,255,0.9); max-width: 560px; }
.hero-cta-row { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--white);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.8;
}

.wave-divider { display: block; width: 100%; height: 50px; margin-top: -2px; }

/* ==========================================================================
   Section rhythm helpers
   ========================================================================== */

.section { padding: var(--space-md) 0; }

/* ---- Background depth. Each band was a single flat fill, which is what
   made the page read flat regardless of its content. These are deliberately
   low-contrast multi-stop gradients (a few percent of luminance either side
   of the original token, which stays the mid stop) plus, on dark bands, a
   soft top vignette. Layered as background images rather than a pseudo
   element overlay so nothing new enters the stacking context. ---- */
/* Light bands gradient from a lighter tint down TO the palette token, never
   past it. --coral-text and --turquoise-text were specifically darkened to
   clear WCAG AA against these exact backgrounds, so any stop darker than the
   token silently regresses that (measured: coral 4.65 -> 4.28, turquoise
   4.67 -> 4.39, both under 4.5). Ending on the token keeps the audited
   ratios intact while still giving the band a luminance shift. */
.section--sand {
  background: linear-gradient(180deg, #FFFAF2 0%, var(--sand) 100%);
}
.section--seafoam {
  background: linear-gradient(180deg, #E6FBF5 0%, var(--seafoam) 100%);
}
/* Dark bands can gradient in both directions: text on them is white, so a
   deeper bottom stop only increases contrast (white on the lightest stop
   #0A4759 still measures 10.2:1). The warm radial is a brass-tinted top
   vignette, kept under 8% so it reads as depth rather than a colour wash. */
.section--navy, .compass-preview {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(228, 179, 99, 0.07) 0%, rgba(228, 179, 99, 0) 55%),
    linear-gradient(180deg, #0A4759 0%, var(--navy-deep) 50%, #052E3B 100%);
  color: var(--white);
}

.section-head { max-width: 700px; margin: 0 auto var(--space-sm); text-align: center; }
.section-head p { font-size: 18px; }

/* ---- Gold as structure, not ornament. The palette already used gold, but
   almost entirely as icon strokes inside components, so it never read as a
   material. This gives every section heading a short brass rule, which is
   the cheapest and most consistent luxury signal available without
   photography. ---- */
.section-head h2::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, rgba(228, 179, 99, 0.25), var(--gold), rgba(228, 179, 99, 0.25));
}

@media (max-width: 640px) {
  .section { padding: var(--space-sm) 0; }
}

/* ==========================================================================
   Compass AI, in-page preview band
   ========================================================================== */

.compass-preview { padding: var(--space-md) 0; background: var(--navy-deep); color: var(--white); }
.compass-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  align-items: center;
}
@media (max-width: 900px) {
  .compass-preview-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
}

.compass-mock {
  background: #FDF9E8;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(1, 11, 32, 0.4);
  max-width: 380px;
  margin: 0 auto;
}
.compass-mock-header {
  background: linear-gradient(135deg, #082a70 0%, #010b20 100%);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 4px solid #f0b400;
}
.compass-mock-header .compass-name { font-family: 'Cinzel', serif; font-weight: 900; font-size: 18px; color: #f7f1de; }
.compass-mock-header .compass-status { font-size: 12px; color: #c9d3e0; display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.compass-mock-messages {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #F0DCA0;
}
.compass-mock .compass-msg { display: flex; gap: 8px; align-items: flex-end; }
.compass-mock .compass-msg--user { flex-direction: row-reverse; }
.compass-mock .compass-bubble {
  max-width: 80%;
  background: #fff;
  color: #182238;
  padding: 10px 13px;
  border-radius: 4px 16px 16px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid rgba(201, 154, 46, 0.18);
}
.compass-mock .compass-bubble--user {
  background: var(--turquoise-dk);
  color: #fff;
  border: none;
  border-radius: 16px 4px 16px 16px;
}
.compass-mock-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
  background: #F0DCA0;
}
.compass-suggestion {
  background: #fff;
  border: 1.5px solid #f0b400;
  color: #082a70;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

.compass-mock-inputbar {
  display: flex; gap: 8px;
  padding: 12px 14px 16px;
  background: #010b20;
  border-top: 2px solid #f0b400;
}
.compass-mock-inputbar input {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  background: #fff;
  color: #7a7566;
}

.brand-tagline {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy-deep);
}

.compass-copy .btn { margin-top: 8px; }

/* ==========================================================================
   Gangway Times
   ========================================================================== */

.gangway-masthead { text-align: center; margin-bottom: var(--space-sm); }
.gangway-masthead .title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--navy-deep);
  letter-spacing: 1px;
}
.gangway-masthead .rule {
  height: 3px;
  background: var(--navy-deep);
  margin: 10px auto;
  max-width: 320px;
  position: relative;
}
.gangway-masthead .rule::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 1px;
  background: var(--navy-deep);
}
.gangway-masthead .tagline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--turquoise-text);
}

.gangway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .gangway-grid { grid-template-columns: 1fr; } }

.gangway-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08);
}
.gangway-card .video-slot { min-height: 170px; border-radius: 0; border-width: 0 0 2px; }
.gangway-card-body { padding: 20px; }
.gangway-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral);
  background: rgba(255, 107, 74, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.gangway-card h3 { margin-bottom: 6px; }
.gangway-card p { font-size: 14.5px; color: rgba(11,27,34,0.75); }

/* ==========================================================================
   Roles, department groups + job cards
   ========================================================================== */

.role-dept { margin-bottom: var(--space-sm); }
.role-dept:last-child { margin-bottom: 0; }

.role-dept-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.role-dept-head .icon-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.role-dept-head .icon-circle svg { width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-dept-head p { margin: 4px 0 0; color: rgba(11,27,34,0.7); }

/* ---- Job carousel: .job-grid scrolls horizontally with snap instead of
   wrapping to further rows, with two arrow buttons overlaid on a relatively
   positioned .job-carousel wrapper. Departments with too few cards to
   actually overflow get .no-scroll added by JS, which hides the arrows,
   so a 2-card department (e.g. Marine) just reads as a plain row. ---- */
.job-carousel { position: relative; }
.job-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.job-grid::-webkit-scrollbar { display: none; }

.job-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-2), box-shadow 0.3s var(--ease-2);
  flex: 0 0 260px;
  scroll-snap-align: start;
}
.job-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(7, 59, 76, 0.14); }
@media (max-width: 640px) { .job-card { flex: 0 0 82%; } }

.job-carousel-arrow {
  position: absolute; top: 45%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251, 238, 221, 0.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(228, 179, 99, 0.5);
  color: var(--navy-deep); font-size: 20px; line-height: 1;
  cursor: pointer; z-index: 2;
  box-shadow: 0 6px 18px rgba(7, 59, 76, 0.14);
  transition: background 0.2s var(--ease-2), opacity 0.2s var(--ease-2);
}
.job-carousel-arrow:hover { background: var(--gold); }
.job-carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.job-carousel-arrow:disabled:hover { background: rgba(251, 238, 221, 0.75); }
.job-carousel-arrow--prev { left: -14px; }
.job-carousel-arrow--next { right: -14px; }
/* Arrows are a mouse affordance and are hidden on touch widths. They sit at
   45% of the carousel height, which put them in the same band as the two
   fixed floating buttons (WhatsApp bottom-left, Compass bottom-right): at
   375px the prev arrow was overlapped by the WhatsApp button and the next
   arrow by the Compass launcher, so tapping either arrow hit a floating
   button instead. Nothing is lost by removing them here, because .job-grid
   is overflow-x:auto with scroll-snap, so swiping already works natively. */
@media (max-width: 640px) { .job-carousel-arrow { display: none; } }
.job-carousel.no-scroll .job-carousel-arrow { display: none; }
/* A department that doesn't overflow isn't a carousel, so let its cards
   stretch to fill the row (as the previous auto-fit grid did) instead of
   sitting at a fixed 260px and leaving dead space to the right. */
.job-carousel.no-scroll .job-card { flex: 1 1 260px; }

/* Card-banner variant, same idiom as .seek-card's photo header: role cards
   previously used a broken `<img src="">`, which rendered the browser's
   native broken-image glyph instead of the site's honest placeholder look.
   Swapped for the standard .media-placeholder div (see index.html). */
.job-card .media-placeholder {
  aspect-ratio: 16 / 10;
  min-height: 0;
  border-radius: 0;
  border-width: 0 0 2px;
}

.job-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.job-card-icon svg { width: 22px; height: 22px; stroke: var(--turquoise-dk); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.job-card h3 { font-size: 19px; }
.job-card p { font-size: 14px; color: rgba(11,27,34,0.75); margin-bottom: 0; }
.job-card .contract-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--turquoise-text);
  background: var(--seafoam);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.job-card .btn { margin-top: auto; }

/* ==========================================================================
   Recruitment process timeline
   ========================================================================== */

.process-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}
.process-rail::before {
  content: '';
  position: absolute;
  top: 26px; left: 6%; right: 6%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--gold) 0 10px, transparent 10px 18px);
}
@media (max-width: 900px) {
  .process-rail { grid-template-columns: 1fr; }
  .process-rail::before { top: 0; bottom: 0; left: 26px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(to bottom, var(--gold) 0 10px, transparent 10px 18px); }
}

.process-step { position: relative; text-align: center; }
@media (max-width: 900px) {
  .process-step { text-align: left; padding-left: 64px; margin-bottom: 32px; }
  .process-step:last-child { margin-bottom: 0; }
}

.process-step .step-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--sand);
}
@media (max-width: 900px) {
  .process-step .step-icon { position: absolute; left: 0; top: 0; margin: 0; box-shadow: 0 0 0 6px var(--sand); }
}
.process-step .step-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* These step titles are h3, not h4: the section heading is an h2, so an h4
   here skipped a level and failed the heading-order audit. The tag changed
   for document structure only, so the small-caps label look is restated here
   rather than inherited from the h4 rule. */
.process-step h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.3;
  color: var(--navy-deep);
  margin-bottom: 6px;
}
.process-step p { font-size: 14px; color: rgba(11,27,34,0.7); margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer was running ~890px tall. Its own top padding used --space-md (96px)
   while every section above it already ends on generous spacing, so the lead-in
   was doubled up. Trimmed here and on the gap between the link columns and the
   legal block; no content removed. */
.site-footer { background: var(--navy-deep); color: var(--white); padding: var(--space-sm) 0 32px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px var(--space-sm); flex-wrap: wrap; margin-bottom: 40px; }
.footer-brand { max-width: 320px; }
.footer-brand .wordmark strong { color: var(--white); }
.footer-brand p { color: rgba(255,255,255,0.75); font-size: 14.5px; margin-top: 14px; }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s var(--ease-2), background 0.2s var(--ease-2);
}
.footer-social a:hover { border-color: var(--gold); background: rgba(228,179,99,0.12); }
.footer-social svg { width: 17px; height: 17px; stroke: var(--white); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); flex: 1; }
.footer-columns h4 { color: var(--gold); margin-bottom: 16px; }
/* The 10px gap became padding on the links themselves. Same column height,
   but each link is a ~27px tap target instead of a 16px one with dead space
   between, which clears the 24px WCAG 2.5.8 minimum on touch. */
.footer-columns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.footer-columns a { color: rgba(255,255,255,0.75); font-size: 14.5px; display: inline-block; padding: 5px 0; }
.footer-columns a:hover { color: var(--turquoise); opacity: 1; }

@media (max-width: 700px) {
  /* gap: var(--space-sm) is 64px, sized for the 3-column desktop layout;
     unreduced, a single 64px gap between 2 columns was wide enough to
     overflow narrow phones and was the real anchor keeping the whole page
     (including the fixed header) wider than the viewport. */
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer-columns { grid-template-columns: 1fr; gap: 28px; }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom a:hover { color: var(--white); }

/* ==========================================================================
   Floating action buttons, WhatsApp (bottom-left) + Compass launcher
   (bottom-right, verbatim from talent-pack-crew/styles.css so the two
   projects share one brand-consistent chat affordance).
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 300;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  border: 3px solid var(--white);
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease-2), background 0.2s var(--ease-2);
}
.whatsapp-float:hover { background: var(--whatsapp-dk); transform: scale(1.06); }
.whatsapp-float svg { width: 30px; height: 30px; fill: var(--white); }
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: sonarPing 2.2s ease-in-out infinite;
}

@media (max-width: 480px) {
  .whatsapp-float { left: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* ---- Compass widget (verbatim design language from talent-pack-crew) ---- */

.compass-widget { position: fixed; right: 24px; bottom: 24px; z-index: 300; }

.compass-launcher {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffdf80 0%, #d4a017 45%, #9c7300 80%, #6b4a00 100%);
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease-2), opacity 0.35s var(--ease-2);
  position: relative;
}
.compass-launcher:hover { transform: scale(1.06); }
.compass-launcher.is-hidden { opacity: 0; transform: scale(0.6); pointer-events: none; }
.compass-launcher .compass-needle { transform-origin: 100px 100px; animation: needleIdle 4s ease-in-out infinite; }

.compass-panel {
  position: absolute;
  right: 0; bottom: 80px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: 72vh;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #FDF9E8;
  box-shadow: 0 24px 70px rgba(1, 11, 32, 0.4);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-1), transform 0.35s var(--ease-1);
}
.compass-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.compass-header {
  background: linear-gradient(135deg, #082a70 0%, #010b20 100%);
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 4px solid #f0b400;
  flex-shrink: 0;
}
.compass-header .compass-needle { transform-origin: 100px 100px; animation: needleIdle 4s ease-in-out infinite; }
.compass-header-text { flex: 1; min-width: 0; padding-top: 2px; }
.compass-name { font-family: 'Cinzel', serif; font-weight: 900; font-size: 20px; color: #f7f1de; letter-spacing: 0.4px; }
.compass-status { font-size: 12px; color: #c9d3e0; display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.compass-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ee858; display: inline-block; animation: dotPulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.compass-close {
  background: transparent; border: none; color: #c9d3e0; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 6px; flex-shrink: 0; margin-top: -2px;
}
.compass-close:hover { color: #fff; }

.compass-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #F0DCA0;
}

.compass-msg { display: flex; gap: 9px; align-items: flex-end; }
.compass-msg--user { flex-direction: row-reverse; }
.compass-avatar { flex-shrink: 0; }

.compass-bubble {
  max-width: 78%;
  background: #fff;
  color: #182238;
  padding: 11px 14px;
  border-radius: 4px 16px 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(10, 26, 48, 0.07);
  border: 1px solid rgba(201, 154, 46, 0.18);
}
.compass-bubble--user {
  background: var(--turquoise-dk);
  color: #fff;
  border: none;
  border-radius: 16px 4px 16px 16px;
}

.compass-note {
  text-align: center;
  font-size: 12px;
  color: rgba(15, 42, 77, 0.55);
  padding: 6px 16px 0;
  font-style: italic;
}

.compass-inputbar {
  display: flex;
  gap: 10px;
  padding: 14px 16px 18px;
  background: #010b20;
  align-items: center;
  border-top: 2px solid #f0b400;
  flex-shrink: 0;
}
.compass-inputbar input {
  flex: 1;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  background: #fff;
  color: #0f2a4d;
}
.compass-inputbar input::placeholder { color: #9aa3af; }
.compass-inputbar input[disabled] { background: #e9e5d8; cursor: not-allowed; }
.compass-send {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(58, 42, 15, 0.4);
  background: linear-gradient(135deg, #ffe066, #d4a017);
  display: flex; align-items: center; justify-content: center;
  cursor: not-allowed;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(201, 154, 46, 0.45);
  opacity: 0.6;
}
.send-triangle {
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #0f2a4d;
  margin-left: 3px;
}

@keyframes needleIdle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes sonarPing {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 480px) {
  .compass-panel { width: calc(100vw - 24px); right: -12px; height: 70vh; }
  .compass-widget { right: 16px; bottom: 16px; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal, .animate-on-scroll { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease-1), transform 0.6s var(--ease-1); }
.reveal.is-visible, .animate-on-scroll.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .animate-on-scroll { opacity: 1; transform: none; }
}

/* ==========================================================================
   Candidate Journey, three-phase accordion (click to expand, one open
   at a time). display:none can't be transitioned, so the actual
   slide-down/fade uses max-height + opacity on .phase-content instead;
   the .expanded/.collapsed classes still drive everything from JS.
   ========================================================================== */

.phase {
  border-bottom: 1px solid rgba(7, 59, 76, 0.12);
  box-shadow: 0 2px 12px rgba(7, 59, 76, 0.04);
  margin-bottom: 4px;
}
.phase:last-child { border-bottom: none; }

.phase-header { margin: 0; }
.phase-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 24px 4px;
  text-align: left;
  font-family: inherit;
}
.phase-toggle h3 { font-size: 24px; margin: 0; text-transform: none; }
.phase-toggle:hover h3 { color: var(--turquoise-dk); }

.arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--seafoam);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-2), background 0.3s var(--ease-2);
}
.arrow svg { width: 16px; height: 16px; stroke: var(--navy-deep); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.phase.expanded .arrow { transform: rotate(90deg); background: var(--coral); }
.phase.expanded .arrow svg { stroke: var(--white); }

.phase-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-1), opacity 0.4s var(--ease-1);
}
.phase.expanded .phase-content {
  max-height: 2000px;
  opacity: 1;
  padding-top: 4px;
  padding-bottom: 32px;
}

/* Steps read as a left-to-right sequence: each card carries its own number,
   and a connecting chevron bridges to the next one on rows wide enough to
   lay every step out side by side. The chevron is skipped below that width
   because .phase-content wraps to multiple rows there, where a mid-row
   arrow would point at nothing. */
.step {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 24px 24px 24px;
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08);
  transition: transform 0.25s var(--ease-2), box-shadow 0.25s var(--ease-2);
}
.step:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(7, 59, 76, 0.13); }

.step-number {
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--turquoise-text);
  background: var(--seafoam);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-right: 34px;
}
.step .icon-placeholder {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--seafoam);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step .icon-placeholder svg { width: 20px; height: 20px; stroke: var(--turquoise-dk); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy-deep); margin: 0; text-transform: none; letter-spacing: normal; }
.step p { font-size: 14px; color: rgba(11,27,34,0.75); margin: 0; }

/* Cycle icon-circle color across a phase's steps so the sequence reads at a
   glance instead of four identical badges; nth-child resets per .phase-content,
   so each phase's own step 1 always starts the cycle at seafoam. */
.step:nth-child(4n+2) .icon-placeholder { background: var(--turquoise); }
.step:nth-child(4n+2) .icon-placeholder svg { stroke: var(--white); }
.step:nth-child(4n+3) .icon-placeholder { background: var(--gold); }
.step:nth-child(4n+3) .icon-placeholder svg { stroke: var(--navy-deep); }
.step:nth-child(4n+4) .icon-placeholder { background: var(--coral); }
.step:nth-child(4n+4) .icon-placeholder svg { stroke: var(--white); }

/* 1300px is the point where the container's content width can fit four
   240px cards plus gaps without wrapping (the largest phase has four steps);
   below that, phase-content wraps to multiple rows and a mid-row chevron
   would point at empty space instead of the next card. */
@media (min-width: 1300px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%; right: -17px;
    width: 10px; height: 10px;
    border-top: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    transform: translateY(-50%) rotate(45deg);
  }
}

@media (max-width: 640px) {
  .phase-toggle h3 { font-size: 20px; }
}

/* ==========================================================================
   Added sections, gap-analysis pass (About, Values, Diversity, Trust &
   Safety, Anti-Fraud, FAQ, Contact, Privacy, Accessibility, footer legal)
   ========================================================================== */

.lang-availability-note {
  margin-top: 84px;
  background: var(--seafoam);
  color: var(--navy-deep);
  text-align: center;
  padding: 10px var(--container-pad-mobile);
  font-size: 13px;
  font-weight: 600;
}
.lang-availability-note p { margin: 0; }
.lang-availability-note strong { color: var(--turquoise-text); }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(255,255,255,0.015) 12px 24px),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.hero-video::before {
  content: '';
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(228, 179, 99, 0.18);
  border: 1.5px solid rgba(228, 179, 99, 0.6);
}
.hero-video::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid var(--gold);
  margin-left: 6px;
}

/* ---- Mission / Vision / Values ---- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } }
.value-card { background: var(--white); border-radius: var(--radius-card); padding: 28px; box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08); }
.value-card .icon-circle { width: 52px; height: 52px; margin-bottom: 16px; background: var(--turquoise); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.value-card .icon-circle svg { width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { margin-bottom: 10px; }
.value-card ul { margin: 0; padding-left: 18px; color: rgba(11,27,34,0.75); font-size: 14.5px; }
.value-card li { margin-bottom: 6px; }

/* ---- About Us and Mission, APAC hubs, non-APAC handover note, leadership ---- */
.hub-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.hub-item {
  background: var(--white);
  border: 1.5px solid var(--turquoise);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

.about-note {
  max-width: 820px;
  margin: var(--space-sm) auto 0;
  padding: 22px 26px;
  background: var(--seafoam);
  border-radius: var(--radius-card);
}
.about-note p { margin: 0; font-size: 14.5px; color: rgba(11,27,34,0.85); }

.leadership-block {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-sm);
}
@media (max-width: 800px) { .leadership-block { grid-template-columns: 1fr; } }
.leadership-block .media-placeholder { min-height: 260px; }
.leadership-block h3 { margin-bottom: 10px; }
.leadership-block p { font-size: 14.5px; color: rgba(11,27,34,0.8); }

/* ---- Compass AI, capability grid ---- */
.compass-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 20px 0 24px;
}
@media (max-width: 640px) { .compass-feature-grid { grid-template-columns: 1fr; } }
.compass-feature { display: flex; gap: 12px; align-items: flex-start; }
.compass-feature .icon-circle {
  flex-shrink: 0; width: 38px; height: 38px; background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.compass-feature .icon-circle svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compass-feature p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.85); padding-top: 6px; }

.compass-human-note {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--gold);
  margin: 0 0 20px;
}

/* ---- Trust & Safety ---- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: var(--space-sm); }
/* .trust-card is a <button>: the caption <p> stays collapsed (0 height,
   0 opacity) until hover, focus, or a click pins it open via .is-open
   (click-to-pin matters on touch, where :hover never fires). Reduces the
   section to icon + heading at rest; every caption is still one hover or
   tap away, not lost. */
.trust-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(228, 179, 99, 0.22);
  border-radius: var(--radius-card); padding: 26px; text-align: center;
  font-family: inherit; cursor: pointer; width: 100%;
  transition: background 0.25s var(--ease-2), border-color 0.25s var(--ease-2);
}
.trust-card:hover, .trust-card:focus-visible, .trust-card.is-open {
  background: rgba(255,255,255,0.1); border-color: rgba(228, 179, 99, 0.5);
}
.trust-card .icon-circle { width: 44px; height: 44px; margin: 0 auto 16px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.trust-card .icon-circle svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-card h3 { color: var(--white); margin: 0; }
.trust-card p {
  color: rgba(255,255,255,0.8); font-size: 14px; margin: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.3s var(--ease-2), opacity 0.25s var(--ease-2), margin-top 0.3s var(--ease-2);
}
.trust-card:hover p, .trust-card:focus-visible p, .trust-card.is-open p {
  max-height: 80px; opacity: 1; margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) { .trust-card p { transition: none; } }
#life-onboard .video-placeholder { margin-top: var(--space-sm); min-height: 220px; }

/* ---- Anti-fraud warning ---- */
.fraud-warning {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #FFF4EC;
  border: 2px solid var(--coral);
  border-radius: var(--radius-card);
  padding: 26px;
}
.fraud-warning .icon-circle { background: var(--coral); flex-shrink: 0; }
/* --coral-text, not --coral-dk: on this panel's pale background the base tone
   measures 3.43:1. The heading is 22px (under the 24px large-text threshold,
   so it needs the full 4.5:1) and the strong is 14.5px. The -text variant
   measures 4.91:1 here. */
.fraud-warning h3 { color: var(--coral-text); margin-bottom: 8px; }
.fraud-warning p { margin: 0; font-size: 14.5px; color: var(--ink); }
.fraud-warning p strong { color: var(--coral-text); }
@media (max-width: 640px) { .fraud-warning { flex-direction: column; } }

/* ---- FAQ (native details/summary, no JS) ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item { background: var(--white); border-radius: var(--radius-card); padding: 4px 22px; box-shadow: 0 6px 20px rgba(7, 59, 76, 0.06); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy-deep);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--turquoise-dk);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-2);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 18px; margin: 0; color: rgba(11,27,34,0.75); font-size: 14.5px; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-bottom: var(--space-sm); }
.contact-item { background: var(--white); border-radius: var(--radius-card); padding: 24px; box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08); }
.contact-item h3 { font-size: 16px; margin-bottom: 8px; }
.contact-item p { margin: 0; font-size: 14.5px; color: rgba(11,27,34,0.75); }

/* ---- Privacy / legal copy ---- */
.legal-copy { max-width: 760px; margin: 0 auto; }
.legal-copy ul { padding-left: 20px; color: rgba(11,27,34,0.8); }
.legal-copy li { margin-bottom: 8px; }
.legal-copy em { color: rgba(11,27,34,0.6); }

/* ---- Footer legal notice ---- */
.legal-notice { padding: 16px 0; }
.legal-notice p { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 0; text-align: center; }

/* ==========================================================================
   Correction pass, mobile nav, waitlist form, stat/value chips, trust
   badges, footer legal disclosures, gangway "stories" card
   ========================================================================== */

/* ---- Mobile nav (hamburger + drawer) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid rgba(7, 59, 76, 0.25);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--navy-deep); border-radius: 2px; transition: transform 0.2s var(--ease-2), opacity 0.2s var(--ease-2); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: 84px; left: 0; right: 0;
  bottom: 0;
  z-index: 400;
  background: var(--navy-deep);
  padding: 24px var(--container-pad-mobile) 40px;
  overflow-y: auto;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-nav a.btn { margin-top: 20px; border-bottom: none; text-align: center; }
/* No colour override here: .btn--primary now sets its own white label, and
   forcing --ink would reintroduce the 2.8:1 contrast this button just fixed. */

/* Must match the breakpoint where .header-nav is hidden (1400px), otherwise
   there is a band with no primary nav and no hamburger either. */
@media (max-width: 1400px) {
  .nav-toggle { display: flex; }
}

/* ---- Hero "Join the Crew List" button: scrolls straight to the Crew
   Support panel rather than a signup form (see #contact-us). ---- */
.hero-crew-list-btn { margin-top: 28px; }

/* ---- Leadership stat chips ---- */
.stat-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.stat-chip {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  min-width: 140px;
  box-shadow: 0 6px 20px rgba(7, 59, 76, 0.08);
  transition: transform 0.25s var(--ease-2), box-shadow 0.25s var(--ease-2);
}
.stat-chip:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(7, 59, 76, 0.14); }
.stat-chip strong { font-family: var(--font-display); font-size: 26px; color: var(--navy-deep); line-height: 1; }
.stat-chip span { font-size: 12px; color: rgba(11,27,34,0.65); margin-top: 4px; }

/* ---- Leadership credential badges — real, named proof points (brand
   affiliations, title, specialisms) sitting just under the leadership
   bio. Text-only pill, same language as .framework-chip but on a white
   card background with a gold accent border to read as "credential",
   not "category". ---- */
.credential-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(7, 59, 76, 0.06);
  transition: transform 0.25s var(--ease-2), box-shadow 0.25s var(--ease-2);
}
.credential-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(7, 59, 76, 0.12); }
.credential-badge .icon-circle { width: 22px; height: 22px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.credential-badge .icon-circle svg { width: 12px; height: 12px; stroke: var(--navy-deep); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- One Fleet value-prop chips ---- */
.value-prop-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
}
.value-prop-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  box-shadow: 0 6px 20px rgba(7, 59, 76, 0.06);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-deep);
  text-align: center;
}
.value-prop-chip .icon-circle { width: 34px; height: 34px; }
.value-prop-chip .icon-circle svg { width: 16px; height: 16px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Recurring "philosophy line" pull-quote (Hero, Compass AI, Trust) ---- */
.philosophy-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin: 20px 0;
  max-width: 640px;
}

/* ---- Hero secondary "partner with us" link ---- */
.hero-partner-link { margin-top: 18px; }
.hero-partner-link a {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 16px of text is under the 24px touch minimum on its own */
  display: inline-block;
  padding: 5px 0;
}
.hero-partner-link a:hover { color: var(--white); }

/* ---- Trust & Safety quick FAQ (on-dark variant of .faq-item) ---- */
.trust-faq { margin-top: var(--space-sm); max-width: 760px; margin-left: auto; margin-right: auto; }
.trust-faq h3 { color: var(--white); text-align: center; margin-bottom: 16px; }
.trust-faq .faq-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(228, 179, 99, 0.22);
  box-shadow: none;
  margin-bottom: 10px;
}
.trust-faq .faq-item summary { color: var(--white); }
.trust-faq .faq-item summary::after { color: var(--gold); }
.trust-faq .faq-item p { color: rgba(255,255,255,0.8); }

/* ---- Footer legal disclosures (native details, on dark footer) ---- */
/* The four disclosures sit on one row rather than stacking. Collapsed, they
   are just four short labels, so a vertical stack spent roughly 140px of
   footer height on four words. They still expand in place, and wrap to
   multiple rows on narrow screens. */
.footer-legal-details {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  align-items: flex-start;
}
.legal-item[open] { flex: 1 1 100%; }
.legal-item summary {
  cursor: pointer;
  padding: 10px 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  list-style: none;
}
.legal-item summary::-webkit-details-marker { display: none; }
.legal-item summary:hover { color: var(--white); }
.legal-item p { padding: 0 0 14px; margin: 0; font-size: 13px; color: rgba(255,255,255,0.68); max-width: 640px; }
.legal-item em { color: rgba(255,255,255,0.5); }

/* ---- Gangway "Crew Stories" card (no video-slot) ---- */
.gangway-card--stories { display: flex; align-items: center; }
.gangway-card--stories .gangway-card-body { padding: 32px 24px; }

/* ==========================================================================
   Contact Us, Candidate Support / Cruise Partner Support panels
   ========================================================================== */

.contact-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-bottom: var(--space-sm);
}

.contact-panel {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08);
}

.compass-icon-placeholder {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
}
.compass-icon-placeholder svg { width: 100%; height: 100%; }

.contact-panel h3 { margin-bottom: 12px; }
.contact-panel > p { font-size: 15px; color: rgba(11,27,34,0.75); max-width: 380px; margin: 0 auto 20px; }

.contact-details {
  font-style: normal;
  margin-bottom: 16px;
}
.contact-details p { margin: 0; font-size: 15px; }
/* inline-block + padding so the mailto links are a 26px tap target, not 16px */
.contact-details a { color: var(--turquoise-dk); font-weight: 700; display: inline-block; padding: 5px 0; }
.contact-details a:hover { color: var(--coral); }

.support-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--turquoise-text);
  background: var(--seafoam);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  margin: 0;
}

.contact-footnote {
  text-align: center;
  border-top: 1px solid rgba(7, 59, 76, 0.12);
  padding-top: 24px;
}
.contact-footnote p {
  margin: 0;
  font-size: 14px;
  color: rgba(11,27,34,0.65);
  font-style: italic;
}

/* ==========================================================================
   THE TALENT PACK, general services page (services.html)
   Everything below is additive: new components for the Seek / Develop |
   Retain | Grow / About / Find Your Pack build, sharing every token,
   button, card-shadow, and easing curve already defined above so the two
   pages (crew-only vs. every-other-service) read as one brand.
   ========================================================================== */

/* ---- Framework chips ("Seek · Develop · Retain · Grow") ----
   Reuses the .hub-item pill look, just under its own list class so this
   page doesn't depend on the crew page's .hub-list semantics. */
.framework-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
/* Shared centering modifier for chip/pill rows (.framework-row,
   .stat-chip-row) that sit under centered copy, instead of each
   instance repeating `style="justify-content: center;"` inline. */
.is-centered { justify-content: center; }
.framework-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1.5px solid var(--turquoise);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
}
/* currentColor lets the icon follow the chip's own text color, so the
   same markup works unmodified in both the light default chip and the
   .framework-row--hero ghost-chip variant (white text on dark hero). */
.framework-chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Wolf mark, traced from the client's supplied artwork, used as a small
   inline flourish on pack-themed buttons/titles in place of a plain glyph.
   currentColor + em-relative sizing so one path works unmodified in both a
   button's small white label and a large dark section heading. */
.wolf-icon { display: inline-block; width: 0.85em; height: auto; vertical-align: -0.1em; margin-left: 0.3em; fill: currentColor; }

/* ---- "Where The Difference Shows Up" pillars, Seek section. Copper
   (#D46A2F) is a deliberate one-off accent for this component's hover
   state, distinct from the site's coral/gold tokens, not a new global
   color: it only ever appears on interaction here. ---- */
.pillars-block {
  max-width: 1100px;
  margin: 0 auto;
  /* No top padding: the preceding .section-head already provides
     var(--space-sm) of separation, so the original 72px spec here
     stacked with it into a 136px gap. Bottom padding uses the same
     token, tightened from the original 72px, to size the gap before
     .seek-grid consistently with the rest of the section's rhythm
     instead of a one-off magic number. */
  padding: 0 0 var(--space-sm);
  text-align: center;
}
.pillars-head h3 { text-transform: none; font-size: 20px; margin-bottom: 32px; }
.pillars-head p { max-width: 640px; margin: 0 auto; color: rgba(11,27,34,0.75); font-size: 14.5px; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 56px;
  margin-top: 56px;
}
.pillar {
  position: relative;
  padding: 0 28px;
  border-radius: var(--radius-card);
  transition: box-shadow 0.25s ease-in-out;
}
/* Divider sits on the gap, not the column edge, so it stays centered
   between columns regardless of gap width at each breakpoint. */
.pillar:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: -28px;
  width: 1px;
  background: rgba(11, 27, 34, 0.12);
}
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--turquoise);
  margin-bottom: 24px;
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.pillar-icon svg { width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--navy-deep);
  margin: 0 0 16px;
  transition: transform 0.25s ease-in-out, color 0.25s ease-in-out;
}
.pillar p { font-size: 14.5px; color: rgba(11,27,34,0.75); margin: 0; transition: color 0.25s ease-in-out; }

.pillar:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.pillar:hover .pillar-icon { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(212, 106, 47, 0.25); }
.pillar:hover h4 { transform: translateY(-1px); color: #D46A2F; }
.pillar:hover p { color: #333333; }

@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .pillar::after { display: none; }
}
@media (max-width: 767px) {
  .pillar-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .pillar { padding: 0; }
}

/* ---- Seek, Leaders / Managers offer cards ---- */
.seek-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .seek-grid { grid-template-columns: 1fr; } }

.seek-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(7, 59, 76, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s var(--ease-2), box-shadow 0.3s var(--ease-2);
}
.seek-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(7, 59, 76, 0.14); }
.seek-card .icon-circle { width: 52px; height: 52px; background: var(--turquoise); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.seek-card .icon-circle svg { width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seek-card h3 { font-size: 22px; }
.seek-card p { font-size: 14.5px; color: rgba(11,27,34,0.75); margin: 0; }
.seek-card .btn { align-self: flex-start; margin-top: 6px; }

/* ---- Develop | Retain | Grow, service grid (on navy, reuses .trust-card
   visual language from the crew page's Trust & Safety band) ---- */
/* Flexbox, not grid: 9 cards over minmax(240px) columns leaves a lone card
   stranded on its own row, left-aligned with empty tracks beside it (grid
   columns are shared across all rows, so an under-full last row doesn't
   reflow). Flex-wrap centers whatever ends up on the last line at any
   viewport width, full rows keep the same look via the shared max-width. */
.dev-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: var(--space-sm); }
/* .dev-card is a <button>: each card shows only icon + heading. The full
   paragraph stays in the DOM (content is never removed) but hidden, and is
   read by JS into the shared #devModal on click, keeping every word of the
   original copy one click away instead of always on-screen. */
.dev-card {
  flex: 1 1 240px; max-width: 340px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(228, 179, 99, 0.22);
  border-radius: var(--radius-card); padding: 26px;
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform 0.25s var(--ease-2), background 0.25s var(--ease-2), border-color 0.25s var(--ease-2);
}
.dev-card:hover, .dev-card:focus-visible {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.1);
  border-color: rgba(228, 179, 99, 0.5);
}
.dev-card .icon-circle { width: 44px; height: 44px; margin-bottom: 16px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.25s var(--ease-2); }
.dev-card:hover .icon-circle, .dev-card:focus-visible .icon-circle { background: var(--gold); }
.dev-card:hover .icon-circle svg, .dev-card:focus-visible .icon-circle svg { stroke: var(--navy-deep); }
.dev-card .icon-circle svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dev-card h3 { color: var(--white); margin: 0; font-size: 17px; }
.dev-card p { display: none; }

/* ---- Shared detail modal for the cards above. Slight glassmorphism: a
   frosted, semi-transparent navy panel over a blurred backdrop, rather than
   a flat opaque card, for a more modern feel without changing the palette. ---- */
.dev-modal {
  max-width: 480px; width: calc(100% - 48px);
  border: 1px solid rgba(228, 179, 99, 0.35);
  border-radius: var(--radius-card);
  padding: 32px;
  background: rgba(11, 41, 54, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--white);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.dev-modal::backdrop { background: rgba(7, 59, 76, 0.55); backdrop-filter: blur(4px); }
.dev-modal[open] { animation: devModalIn 0.25s var(--ease-2); }
@keyframes devModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.dev-modal-close {
  position: absolute; top: 18px; right: 18px;
  background: transparent; border: none; color: rgba(255,255,255,0.7);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.dev-modal-close:hover { color: #fff; }
.dev-modal-icon { width: 52px; height: 52px; background: rgba(228, 179, 99, 0.18); margin-bottom: 18px; }
.dev-modal-icon svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dev-modal h3 { margin: 0 0 12px; font-size: 22px; color: var(--white); padding-right: 24px; }
.dev-modal p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.85); }
@media (prefers-reduced-motion: reduce) { .dev-modal[open] { animation: none; } }

/* ---- Cross-sell band, the deliberate, single link out to the
   standalone Crew Hiring Partner page. Content-free about crew hiring
   itself; it's a pointer, not a summary, so this page never duplicates
   what the crew page already owns. ---- */
.cross-sell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  margin-top: var(--space-sm);
}
.cross-sell-text h3 { color: var(--white); margin-bottom: 6px; }
.cross-sell-text p { color: rgba(255,255,255,0.8); margin: 0; font-size: 14.5px; max-width: 480px; }
.cross-sell .btn { flex-shrink: 0; }

/* ==========================================================================
   services.html, visual & messaging enhancement pass
   Photo-placeholder variants (all pure extensions of the existing
   .media-placeholder component, same dashed-border/gradient/icon
   language, only aspect-ratio/radius/frame change per variant, so the
   page reads as one deliberate system, not three unrelated ones), plus
   a handful of small components (process rail 4-up, mini-steps, category
   tags) needed for the new content. Nothing here touches index.html.
   ========================================================================== */

/* ---- Hero background placeholder texture. .hero-media is shared by both
   pages' hero (index.html and services.html use the identical class), so
   this only adds a subtle placeholder texture/border, no icon: an icon
   here previously sat dead-center of the whole section (flex-centered on
   a div that covers the entire hero) and collided with the hero copy,
   which is also vertically centered. Removed rather than repositioned. ---- */
.hero-media {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(255,255,255,0.015) 12px 24px),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: none;
  border-bottom: 3px solid var(--gold);
}

/* ---- Portrait variant, About leadership photo. Single clipped
   top-right corner (paired with the standard --radius-card on the other
   three) is this variant's signature, distinct from the other two. ---- */
.media-placeholder--portrait {
  aspect-ratio: 3 / 4;
  min-height: 0;
  border-radius: var(--radius-card) var(--media-radius-accent) var(--radius-card) var(--radius-card);
}

/* ---- Card-banner variant, Seek cards. Bleeds to the card's outer edge
   as a top image (same idiom as .job-card's photo header) rather than
   sitting inset inside the card padding. ---- */
.seek-card .media-placeholder {
  margin: -32px -28px 4px;
  aspect-ratio: 16 / 10;
  min-height: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-width: 0 0 2px;
}

/* ---- Square variant, Develop | Retain | Grow "moment" tiles. An inset
   double frame-line (no extra DOM) is this variant's signature. ---- */
.media-placeholder--square {
  aspect-ratio: 1 / 1;
  min-height: 0;
  box-shadow: inset 0 0 0 1px var(--media-frame-line), inset 0 0 0 7px rgba(255,255,255,0.03);
}
.moment-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: var(--space-sm) 0;
}

/* ---- Category tags, small kicker labels above a card heading
   (Seek cards, Contact panels). Reuses the exact pill/color recipe
   .job-card already uses for its .contract-tag, just renamed generically
   since it's no longer only about a contract length. ---- */
.category-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--turquoise-text);
  background: var(--seafoam);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.contact-panel .category-tag { margin: 0 auto 12px; }

/* ---- Framework chip row, hero variant, a quiet "ghost chip" restyle
   so the row reads correctly against the dark hero rather than as a
   jarring solid-white block. ---- */
.framework-row--hero { justify-content: flex-start; margin-top: 22px; }
.framework-row--hero .framework-chip {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.35);
  color: var(--white);
  font-size: 12px;
  padding: 6px 14px;
}

/* ---- Process rail, 4-up variant, "How We Work". The base .process-rail
   is a fully-built 5-step timeline that was sitting completely unused in
   this stylesheet; this modifier is the only change needed to run it at 4. ---- */
.process-rail--4 { grid-template-columns: repeat(4, 1fr); }
.process-rail--4::before { left: 12%; right: 12%; }
@media (max-width: 900px) {
  /* This modifier's fixed 4-column template otherwise wins the cascade
     over the base .process-rail's own mobile 1-column override (same
     specificity, declared later), forcing 4 columns into a phone-width
     row and causing real horizontal page overflow. */
  .process-rail--4 { grid-template-columns: 1fr; }
  .process-rail--4::before { left: 26px; right: auto; }
}

/* ---- Mini-steps, "What happens after you submit" strip on Find Your Pack. ---- */
.mini-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin: 32px auto 0;
  max-width: 760px;
}
.mini-step { flex: 1 1 200px; text-align: center; }
.mini-step .mini-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 10px;
}
.mini-step p { font-size: 13.5px; color: rgba(11,27,34,0.75); margin: 0; }


/* ---- Pack Stories / Pack Insights, reuse .gangway-grid/.gangway-card
   verbatim (already built for index.html's Gangway Times / Crew Stories)
   with a couple of generic-context tweaks, since services.html's cards
   aren't crew-specific and some carry a photo tile instead of a video-slot. ---- */
.gangway-card .media-placeholder--square { border-radius: 0; border-width: 0 0 2px; box-shadow: none; }
.gangway-intro { max-width: 640px; margin: 0 auto var(--space-sm); text-align: center; color: rgba(11,27,34,0.75); }