/* ==========================================================================
   Continuum Travel Therapy — landing page
   Built on the CTP design system tokens (css/tokens/*.css).
   Inter is loaded directly in the document head.
   ========================================================================== */

@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/base.css");

/* --------------------------------------------------------------------------
   1. Page-level tokens
   -------------------------------------------------------------------------- */

:root {
  --gold-500: #e3b23c;          /* CTA gold — headline actions */
  --gold-600: #ce9f2e;          /* gold hover */
  --ink: #1b2a43;               /* Continuum Dark Blue, used as page text */
  --shell-max: 1160px;
  --shell-pad: 32px;
  --ease-settle: cubic-bezier(0.2, 0.8, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;    /* clears the sticky header on anchor jumps */
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
}

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

a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-700); }

:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }

/* --------------------------------------------------------------------------
   2. Layout + shared utilities
   -------------------------------------------------------------------------- */

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.section--muted {
  background: var(--canvas);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--slate-400);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.eyebrow--dark {
  background: rgba(0, 187, 188, 0.14);
  border-color: rgba(0, 187, 188, 0.3);
  color: var(--teal-300);
}

.section-title {
  margin: 18px 0 0;
  font-size: 40px;
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
}

.section-lede {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-600);
  text-wrap: pretty;
}

/* Inline SVG icons (see the sprite at the top of index.html) */
.ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--md { width: 20px; height: 20px; }
.ico--lg { width: 22px; height: 22px; }

/* Scroll-triggered reveal — wired up in js/site.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-settle), transform 0.5s var(--ease-settle);
}
[data-reveal="in"] { opacity: 1; transform: none; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Buttons + link buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out,
              color var(--dur-fast) ease-out;
}

.btn--primary { background: var(--teal-500); color: #fff; }
.btn--primary:hover { background: var(--teal-600); color: #fff; }

.btn--gold { background: var(--gold-500); color: var(--ink); }
.btn--gold:hover { background: var(--gold-600); color: var(--ink); }

.btn--secondary {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--border-default);
}
.btn--secondary:hover { background: var(--surface-muted); color: var(--ink); }

.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  font-weight: var(--fw-medium);
}
.btn--outline-light:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.44);
}

.btn--sm { padding: 9px 10px; font-size: 13px; }
.btn--md { padding: 12px 20px; font-size: 14.5px; }
.btn--lg { padding: 14px 26px; font-size: 15.5px; font-weight: var(--fw-bold); }
.btn--block { width: 100%; padding: 10px 16px; font-size: 13.5px; font-weight: var(--fw-bold); }
.btn--grow { flex: 1 1 0; }

.linkbtn {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--slate-500);
  cursor: pointer;
}
.linkbtn:hover { color: var(--teal-600); }
.linkbtn--end { margin-left: auto; padding: 12px 8px; font-size: 14px; }
.linkbtn--end:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

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

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 14px;
}

/* flex: 0 0 auto is load-bearing. The logo is a flex item holding a replaced
   element sized `height: 52px; width: auto`, so when the row runs out of room
   the box is the first thing to compress — and the image squashes with it
   rather than scaling. On a phone it was rendering 37% narrower than its own
   aspect ratio. object-fit is the belt to that braces: if anything ever does
   constrain both dimensions, it letterboxes instead of distorting. */
.site-header__logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-header__logo img { height: 52px; width: auto; object-fit: contain; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* On desktop this is just a row. Below 860px it becomes the dropdown panel
   the hamburger opens — see the media query at the end of this file. */
.site-nav__links { display: flex; align-items: center; gap: 28px; }

.site-nav__links a:not(.btn) {
  position: relative;
  padding-block: 5px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--slate-600);
  transition: color var(--dur-fast) ease-out;
}
.site-nav__links a:not(.btn):hover { color: var(--teal-700); }

/* Current page. aria-current is the source of truth — it marks the page for
   screen readers, and the styling hangs off the same attribute rather than a
   separate class that could get out of step with it. */
.site-nav__links a:not(.btn)[aria-current="page"] {
  color: var(--teal-700);
  font-weight: var(--fw-semibold);
}
.site-nav__links a:not(.btn)[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--teal-500);
  border-radius: 1px;
}
/* Apply Now is already solid teal, so it needs a different signal. */
.site-nav a.btn[aria-current="page"] {
  background: var(--teal-700);
  box-shadow: 0 0 0 3px rgba(0, 187, 188, 0.26);
}

/* The standalone Apply Now and the hamburger exist only below 860px. */
.site-nav__cta { display: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--teal-500); }

/* Three bars from one element: the middle is the element, the outer two are
   its pseudo-elements. Open, the middle vanishes and the others cross. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-bounce),
              background var(--dur-fast) ease-out;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { transition: none; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
  transform: translateX(12%);
}

.hero__scrim { position: absolute; inset: 0; }
/* The video is pushed right (translateX 12% on desktop, 12.5% on mobile), so
   its left edge would otherwise show as a seam against the bare navy beside
   it. Holding this scrim fully opaque to 14% carries the solid navy past that
   edge, and the ramp out of it hides the join. */
.hero__scrim--h {
  background: linear-gradient(90deg,
    #1b2a43 0%,
    #1b2a43 14%,
    rgba(27, 42, 67, 0.95) 22%,
    rgba(27, 42, 67, 0.84) 32%,
    rgba(27, 42, 67, 0.62) 46%,
    rgba(27, 42, 67, 0.34) 62%,
    rgba(27, 42, 67, 0.12) 78%,
    rgba(27, 42, 67, 0.04) 100%);
}
.hero__scrim--v {
  background: linear-gradient(180deg,
    rgba(27, 42, 67, 0.55) 0%,
    rgba(27, 42, 67, 0.05) 34%,
    rgba(27, 42, 67, 0.20) 78%,
    rgba(27, 42, 67, 0.62) 100%);
}

.hero__inner {
  position: relative;
  z-index: 4;
  padding-block: 76px 84px;
}

.hero__title {
  margin: 22px 0 0;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  color: #fff;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--teal-300); }

.hero__lede {
  margin: 24px 0 0;
  max-width: 31em;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   6. Why travel with Continuum
   -------------------------------------------------------------------------- */

.why {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
  padding-block: 84px;
}

.why__intro { min-width: 0; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  /* Declared after [data-reveal] so the hover lift stays snappy — same
     treatment as the journey cards in the next section. */
  transition: transform 0.18s ease-out,
              box-shadow 0.18s ease-out,
              opacity 0.5s var(--ease-settle);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(27, 42, 67, 0.06), 0 10px 24px rgba(27, 42, 67, 0.10);
}
.card--accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--teal-500);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: var(--teal-50);
  color: var(--teal-700);
}

.card__title {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.card__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-600);
}

/* --------------------------------------------------------------------------
   7. Journey
   -------------------------------------------------------------------------- */

/* The 20px bottom this used to have was tuned for when .perks followed
   directly — both white, so the gap just read as more whitespace. The
   featured-openings band sits here now and it is grey, so that edge became
   visible and the step boxes looked shoved against it. Matches .why's 84px. */
.journey { padding-block: 88px 84px; }
.journey__head { max-width: 640px; }

.journey__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.step {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-3xl);
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.05), 0 2px 8px rgba(27, 42, 67, 0.06);
  padding: 28px 26px 30px;
  /* Declared after [data-reveal] so the hover lift stays snappy. */
  transition: transform 0.18s ease-out,
              box-shadow 0.18s ease-out,
              opacity 0.5s var(--ease-settle);
}
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--teal-500);
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(27, 42, 67, 0.06), 0 10px 24px rgba(27, 42, 67, 0.10);
}

.step__head { display: flex; align-items: center; gap: 12px; }

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.step__phase {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--slate-500);
}

.step__title {
  margin: 18px 0 0;
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate-600);
}
.checklist .ico { margin-top: 2px; color: var(--teal-600); }

/* --------------------------------------------------------------------------
   8. Perks / conversion panel
   -------------------------------------------------------------------------- */

.perks { padding-block: 80px 88px; }

.perks__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  overflow: hidden;
  padding: 56px;
  border-radius: 20px;
  background: var(--ink);
}

.perks__copy { min-width: 0; }

.perks__title {
  margin: 20px 0 0;
  font-size: 38px;
  line-height: 1.12;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: #fff;
  text-wrap: balance;
}

.perks__lede {
  margin: 16px 0 0;
  max-width: 32em;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.perks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

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

.perk-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.perk-step__label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--teal-300);
}

.perk-step__text { font-size: 14.5px; color: rgba(255, 255, 255, 0.86); }

/* --------------------------------------------------------------------------
   9. Openings — state map + live job feed
   -------------------------------------------------------------------------- */

.openings { background: #fff; border-top: 1px solid var(--border-subtle); }
.openings > .shell { padding-block: 84px 92px; }

.openings__title {
  margin: 12px 0 0;
  font-size: 36px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.openings__lede {
  margin: 10px 0 0;
  max-width: 620px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--slate-500);
}

/* Jobs board — map, filters and listings. Positioning context for #panel. */
.jobs-board {
  position: relative;
  margin-top: 36px;
}
/* --------------------------------------------------------------------------
   10. Contact — details panel + quick apply form
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  /* Contact details first and narrower; the form takes the wider column. */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 28px;
  align-items: start;
  padding-block: 84px 92px;
}

.panel {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-3xl);
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.05), 0 2px 8px rgba(27, 42, 67, 0.06);
}

.contact__info { padding: 36px 34px; }
.contact__info-title {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contact__info-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
}
.contact__info dd {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-700);
}
.contact__info dd a { font-weight: var(--fw-semibold); }
.contact__link {
  display: inline-block;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--teal-700);
  word-break: break-word;
}

.form { padding: 38px 36px 42px; }

.form__title {
  margin: 0;
  font-size: 30px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.form__sub { margin: 8px 0 0; font-size: 15.5px; color: var(--slate-500); }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px;
}
.form__row--first { margin-top: 28px; }

.field--spaced { margin-top: 22px; }

.field__label {
  display: block;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--slate-700);
}
.field__opt {
  margin-left: 6px;
  font-size: 13px;
  font-weight: var(--fw-regular);
  color: var(--slate-400);
}

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  transition: background var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out,
              box-shadow var(--dur-fast) ease-out;
}
.input:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.input::placeholder { color: var(--slate-400); }

.select { cursor: pointer; }

.textarea {
  margin-top: 10px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}

.filedrop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease-out, background var(--dur-fast) ease-out;
}
.filedrop:hover,
.filedrop:focus-within { border-color: var(--teal-500); background: #fff; }
.filedrop:focus-within { box-shadow: 0 0 0 3px var(--focus-ring); }

.filedrop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(0, 187, 188, 0.12);
  color: var(--teal-700);
}
.filedrop__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filedrop__name {
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  word-break: break-word;
}
.filedrop__hint { font-size: 13px; color: var(--slate-500); }
.filedrop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}
.form__note { font-size: 14.5px; color: var(--slate-500); }
.form__note a { font-weight: var(--fw-semibold); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-error {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid #f8d2d0;
  border-left: 4px solid var(--red-500);
  border-radius: var(--radius-lg);
  background: var(--red-bg);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--red-700);
}

[data-turnstile]:not([hidden]) { margin-top: 20px; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(0, 187, 188, 0.35);
  border-left: 4px solid var(--teal-500);
  border-radius: var(--radius-lg);
  background: rgba(0, 187, 188, 0.07);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.notice__mark { font-weight: var(--fw-bold); color: var(--teal-700); }
.notice a { font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink); }

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-block: 40px 32px;
}

.site-footer__brand { flex: 1 1 260px; max-width: 30em; }

/* The same four items as the header, so the menu is reachable from the bottom
   of any page — which matters most on a phone, where the header collapses to
   a hamburger. */
.site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__nav a {
  margin-top: 10px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--dur-fast) ease-out;
}
.site-footer__nav a:first-of-type { margin-top: 12px; }
.site-footer__nav a:hover { color: #fff; }
.site-footer__nav a[aria-current="page"] { color: var(--teal-300); font-weight: var(--fw-semibold); }
/* The brand kit has no white variant of the Travel Therapy lockup (only of
   the plain CTP horizontal), so the colour mark is flattened to solid white.
   Swap in an official white PNG here if one is produced. */
.site-footer__brand img {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-footer__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.site-footer__note a { font-weight: var(--fw-semibold); color: var(--teal-300); }
.site-footer__note a:hover { color: #fff; }

.site-footer__contact { min-width: 0; }
.site-footer .label { color: rgba(255, 255, 255, 0.5); }
.site-footer__address {
  margin: 10px 0 0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.site-footer__lines {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
}
.site-footer__lines a {
  font-weight: var(--fw-semibold);
  color: var(--teal-300);
  word-break: break-word;
}
.site-footer__lines a:hover { color: #fff; }
.site-footer__hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-block: 18px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__copy { font-size: 13px; color: rgba(255, 255, 255, 0.52); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.site-footer .linkbtn { color: rgba(255, 255, 255, 0.66); }
.site-footer .linkbtn:hover { color: var(--teal-300); }

/* --------------------------------------------------------------------------
   12. Cookie consent + modals
   -------------------------------------------------------------------------- */

@keyframes ctp-consent-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.consent {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 18px;
  pointer-events: none;
}

.consent__card {
  pointer-events: auto;
  width: 330px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
  animation: ctp-consent-in var(--dur-slow) var(--ease-settle) both;
}

.consent__title {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.consent__text {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--slate-500);
  text-wrap: pretty;
}

.consent__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.consent__row { display: flex; gap: 8px; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}
.modal--center { align-items: center; }
/* Top-aligned for long content (the job description popup). */
.modal--top { align-items: flex-start; padding: 32px 24px; }

.modal__card {
  width: 100%;
  max-width: 560px;
  padding: 32px 32px 26px;
  background: #fff;
  border-radius: var(--radius-3xl);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.32);
  animation: ctp-consent-in var(--dur-slow) var(--ease-settle) both;
}

.modal__card--wide { max-width: 720px; padding: 36px 40px 32px; }

/* Job description popup. Its heading block reuses the .policy__* styles. */
.policy__head { display: flex; align-items: flex-start; gap: 20px; }
.policy__title {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  color: var(--ink);
}
.policy__close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) ease-out;
}
.policy__close:hover { background: var(--surface-muted); }

/* Footer swaps between browsing the description and filling the form. */
.job-modal__applying { display: none; }
#job-modal.is-applying .job-modal__browse { display: none; }
#job-modal.is-applying .job-modal__applying { display: inline-flex; }
#job-modal.is-sent .job-modal__applying { display: none; }

.job-modal__body { margin-top: 22px; }
.job-modal__body p { margin: 0 0 12px; }
.job-modal__body p:last-child { margin-bottom: 0; }
.job-modal__body ul,
.job-modal__body ol { margin: 0 0 12px; padding-left: 22px; }
.job-modal__body li { margin-bottom: 5px; }
.job-modal__body strong,
.job-modal__body b { color: var(--ink); }

.modal__title {
  margin: 10px 0 0;
  font-size: 25px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.modal__lede { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--slate-500); }

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.prefs { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.pref {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--teal-500);
  border-radius: var(--radius-lg);
}
.pref--analytics { border-left-color: #93c5fd; }
.pref--marketing { border-left-color: #c4b5fd; }

.pref__body { flex: 1 1 auto; min-width: 0; }
.pref__name { margin: 0; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--ink); }
.pref__desc { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--slate-500); }

.pref__always {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--slate-300);
  cursor: pointer;
  transition: background 0.16s ease-out;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(27, 42, 67, 0.28);
  transition: left 0.16s ease-out;
}
.switch[aria-checked="true"] { background: var(--teal-500); }
.switch[aria-checked="true"]::after { left: 23px; }

/* Body scroll lock while a modal is open */
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .why { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .journey__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perks__panel { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px 36px; }
  .contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .shell { --shell-pad: 20px; }

  /* The row becomes a dropdown panel. .site-header is sticky, which makes it
     the containing block, so top:100% puts the panel directly beneath it and
     full-bleed rather than inside the shell. */
  /* With the logo no longer allowed to squash, the row has to be made to fit
     honestly: a smaller wordmark, tighter gaps, a more compact CTA. */
  .site-header__inner { gap: 14px; }
  .site-header__logo img { height: 42px; }

  .site-nav { gap: 10px; }
  .site-nav__cta { display: inline-flex; padding-inline: 15px; font-size: 13px; }
  .nav-toggle { display: inline-flex; }

  .site-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 6px 10px;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 14px 28px rgba(27, 42, 67, 0.12);
  }
  /* display:none also keeps the closed panel out of the tab order. */
  .site-header.is-open .site-nav__links { display: flex; }

  .site-nav__links a:not(.btn) {
    padding: 14px var(--shell-pad);
    font-size: 16px;
  }
  /* Apply Now is already in the bar beside the hamburger. */
  .site-nav__links a.btn { display: none; }

  /* An underline under a full-width row reads as a divider, so the current
     page is marked with a tint instead. */
  .site-nav__links a:not(.btn)[aria-current="page"]::after { display: none; }
  .site-nav__links a:not(.btn)[aria-current="page"] {
    background: var(--color-primary-tint);
  }

  .hero__inner { padding-block: 56px 72px; }
  .hero__video { object-position: 78% 50%; transform: translateX(30%) scale(1.35); }
  /* At this width the text runs the full column, so the horizontal ramp has
     nowhere to fall away to and the photo can only read as texture behind the
     copy. This is as light as it goes before white-on-white. */
  .hero--compact .hero__title,
  .hero--compact .hero__lede { max-width: none; }
  .hero--compact .hero__scrim--h {
    background: linear-gradient(90deg,
      #1b2a43 0%,
      rgba(27, 42, 67, 0.92) 40%,
      rgba(27, 42, 67, 0.82) 70%,
      rgba(27, 42, 67, 0.72) 100%);
  }
  .hero__pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pill {
    justify-content: center;
    text-align: center;
    font-size: 11.5px;
    padding: 8px 6px;
    line-height: 1.25;
  }

  .section-title { font-size: 32px; }

  .why { padding-block: 56px; gap: 32px; }
  .why__grid { grid-template-columns: minmax(0, 1fr); }

  .journey { padding-block: 60px 56px; }
  .journey__grid { grid-template-columns: minmax(0, 1fr); }

  .perks { padding-block: 56px 64px; }
  .perks__panel { gap: 32px; padding: 36px 24px; }
  .perks__title { font-size: 30px; }

  .openings > .shell { padding-block: 56px 64px; }
  .openings__title { font-size: 28px; }

  .contact { gap: 20px; padding-block: 56px 64px; }
  .contact__info { padding: 28px 24px; }
  .form { padding: 28px 24px 34px; }
  .form__title { font-size: 26px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .form__send { flex-direction: column; align-items: flex-start; gap: 14px; }

  .site-footer__top { gap: 28px; padding-block: 32px 24px; }
  .site-footer__bar { padding-block: 16px 24px; }
  .site-footer__links { margin-left: 0; }

  .consent { padding: 12px; }
  .consent__card { width: auto; max-width: 100%; }

  .modal { padding: 16px; }
  .modal__card { padding: 24px 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Breadcrumbs — used by the generated pages (jobs/*.html, faq.html)
   ========================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: 13px;
  color: var(--slate-500);
}
.crumbs a { color: var(--slate-500); text-decoration: none; }
.crumbs a:hover { color: var(--teal-700); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy-800); font-weight: 600; }
.crumbs .crumbs__sep { color: var(--slate-300); }
/* ==========================================================================
   Apply now / Contact — the two sections that used to live on the landing
   page now have pages of their own. The sections themselves are unchanged and
   keep their own spacing; this only adds the breadcrumb strip above them and
   the contact page's heading.
   ========================================================================== */

/* Apply now: the headline and the map together are the page's hero. The navy
   runs behind both, then the filters and listings sit on white below it. */
.openings-page .jobs-board { margin-top: 0; }

/* The shared interior hero: state pages, the FAQ, and apply-now. */
.openings-hero { background: var(--ink); padding-block: 30px 44px; }
/* apply-now is the exception — the map inside it supplies the bottom space. */
.openings-page .openings-hero { padding-bottom: 0; }
.openings-hero .hero__lede a { color: var(--teal-300); font-weight: var(--fw-semibold); }
.openings-hero .hero__lede a:hover { color: #fff; }
.openings-hero .hero__actions { margin-top: 26px; }
.openings-hero .hero__title { margin-top: 12px; font-size: clamp(32px, 4vw, 50px); }
.openings-hero .hero__lede { margin-top: 14px; max-width: 40em; font-size: 17px; }
.openings-hero #wrap { margin-top: 24px; padding-bottom: 30px; }

/* The map already provides the gap above the filters. */
.openings-page .openings > .shell { padding-block: 6px 92px; }

/* The contact page hero: the same treatment as the landing page, with a photo
   behind it instead of the video, and less height because it carries one
   paragraph rather than a full pitch. */
.hero--compact .hero__inner { padding-block: 52px 60px; }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favour the right of the frame — the two people talking. The left of the
     photo sits under the solid end of the scrim anyway. */
  object-position: 72% 50%;
}

/* Holding the copy to a column on the left is what lets the scrim fall away
   early, so most of the right-hand side of the photo comes through. Without
   these the heading ran to ~96% of the width and the ramp had to stay heavy
   the whole way across to keep it legible. */
.hero--compact .hero__title { max-width: 560px; }
.hero--compact .hero__lede { max-width: 470px; }

/* Same gradient shape as the landing page, ramping out a little later because
   this photo is a bright, white-walled clinic rather than a dark forest road.
   It is clear by ~70%, which is where the two people at the table are. */
.hero--compact .hero__scrim--h {
  background: linear-gradient(90deg,
    #1b2a43 0%,
    #1b2a43 12%,
    rgba(27, 42, 67, 0.94) 28%,
    rgba(27, 42, 67, 0.78) 44%,
    rgba(27, 42, 67, 0.48) 58%,
    rgba(27, 42, 67, 0.22) 72%,
    rgba(27, 42, 67, 0.08) 86%,
    rgba(27, 42, 67, 0.02) 100%);
}

/* Breadcrumbs on navy. */
.crumbs--light { margin-bottom: 22px; color: rgba(255, 255, 255, 0.5); }
.crumbs--light a { color: rgba(255, 255, 255, 0.72); }
.crumbs--light a:hover { color: #fff; }
.crumbs--light [aria-current] { color: #fff; }
.crumbs--light .crumbs__sep { color: rgba(255, 255, 255, 0.28); }
/* ==========================================================================
   Job cards, state links, state pages

   .jobcard is the compact card used by the home page's featured strip and the
   state pages. The listing page on apply-now.html has its own richer .lcard
   in css/map.css - this is deliberately the smaller of the two.
   ========================================================================== */

.jobcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.jobcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid rgba(27, 42, 67, 0.08);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-bounce),
              box-shadow var(--dur-base) ease-out;
}
.jobcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.06), 0 10px 24px rgba(27, 42, 67, 0.10);
}
.jobcard__top { display: flex; align-items: center; gap: 8px; }
.jobcard .dept {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.jobcard__pay {
  margin-left: auto;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: #94764a;
  white-space: nowrap;
}
.jobcard__role {
  margin-top: 4px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
}
.jobcard:hover .jobcard__role { color: var(--teal-700); }
.jobcard__where { font-size: 13.5px; color: var(--slate-500); }

/* --- Featured strip on the home page ----------------------------------- */

.featured > .shell { padding-block: 72px 80px; }
.featured__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.featured__all {
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--teal-700);
  text-decoration: none;
  white-space: nowrap;
}
.featured__all:hover { text-decoration: underline; }

/* --- Browse by state --------------------------------------------------- */

.statelinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.statelinks .label { width: 100%; margin: 0 0 2px; }
.statelinks a,
.statelinks__here {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid rgba(27, 42, 67, 0.10);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--navy-700);
  text-decoration: none;
  transition: border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.statelinks a:hover { border-color: var(--teal-500); color: var(--teal-700); }
.statelinks__here { background: var(--color-primary-tint); border-color: var(--teal-300); color: var(--teal-800); }
.statelinks__n {
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  color: var(--slate-400);
}
.statelinks a:hover .statelinks__n { color: var(--teal-600); }
.statelinks__here .statelinks__n { color: var(--teal-700); }

/* The listing page already sits on white, so it needs no extra surface. */
.openings .statelinks { margin-top: 44px; }

/* --- State pages ------------------------------------------------------- */

.state-body { background: var(--canvas); }
.state-body > .shell { padding-block: 56px 80px; }
.state-body__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.state-body__lede {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-500);
}
.state-body__all { margin: 26px 0 0; font-size: 14.5px; }
.state-body__all a { color: var(--teal-700); font-weight: var(--fw-semibold); text-decoration: none; }
.state-body__all a:hover { text-decoration: underline; }

.state-notes {
  max-width: 68ch;
  margin-top: 44px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--slate-600);
}
.state-notes h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.state-notes p { margin: 0 0 14px; }
.state-notes p:last-child { margin-bottom: 0; }
.state-notes strong { color: var(--ink); font-weight: var(--fw-semibold); }
.state-notes a { color: var(--teal-700); font-weight: var(--fw-medium); }
.state-notes a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .featured > .shell { padding-block: 52px 60px; }
  .state-body > .shell { padding-block: 40px 60px; }
}
/* Narrowest phones: the wordmark is a wide lockup, so it gives ground first
   rather than pushing the CTA off the row. */
@media (max-width: 400px) {
  .site-header__inner { gap: 10px; }
  .site-header__logo img { height: 34px; }
  .site-nav { gap: 8px; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* 320px — an iPhone SE in portrait, the narrowest width worth supporting.
   34px still overflowed the row by 2px and put a scrollbar on the page. */
@media (max-width: 340px) {
  .site-header__logo img { height: 30px; }
  .site-nav__cta { padding-inline: 12px; }
}