/* Vanilla migration behaviours layered over the original compiled utility CSS. */
html { scroll-behavior: auto; }
[hidden] { display: none !important; }
#app { animation: appEnter .6s .1s both; }
@keyframes appEnter { from { opacity: 0; } to { opacity: 1; } }
#loading-screen { transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1); }
#loading-screen.is-leaving { opacity: 0; transform: scale(1.05); filter: blur(10px); pointer-events: none; }
.loading-glow { animation: loadingGlow 3s ease-in-out infinite; }.loading-title { animation: loadingTitle .8s .2s both; }.loading-line { width: 60px; animation: loadingLine .6s .4s both; }.loading-bar { animation: loadingBar 1.6s .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes loadingGlow { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.6} } @keyframes loadingTitle { from{opacity:0;transform:translateY(25px);filter:blur(10px)}to{opacity:1;transform:none;filter:none} } @keyframes loadingLine { from{width:0}to{width:60px} } @keyframes loadingBar{from{width:0}to{width:100%}}
.hero-ray { animation: breathe 8s ease-in-out infinite; }.hero-ray.gold { animation-duration:10s;animation-delay:2s; }
.particle { animation: particle var(--duration) var(--delay) ease-in-out infinite; } @keyframes particle { 0%,100%{opacity:0;transform:translate(0,0)}50%{opacity:var(--opacity);transform:translate(var(--x),var(--y))} }
.blur-reveal > span { display:inline-block; opacity:0; filter:blur(12px); transform:translateY(10px); animation: characterReveal .6s var(--delay) cubic-bezier(.22,1,.36,1) forwards; white-space:pre; } @keyframes characterReveal { to { opacity:1;filter:blur(0);transform:none; } }
.hero-cta { opacity:0; transform:translateY(20px); animation: heroCta 1s 1.4s cubic-bezier(.22,1,.36,1) forwards; } @keyframes heroCta {to{opacity:1;transform:none}}
#scroll-indicator { opacity:0; animation: heroCta .4s 2.5s forwards; }
.nav-link:hover { transform:translateY(-1px); color:currentColor; }.nav-link span { position:absolute;left:0;bottom:-.25rem;height:1px;width:0;background:currentColor;transition:width .4s; }.nav-link:hover span {width:100%;}
#mobile-menu { opacity:0; transition:opacity .3s; } #mobile-menu.is-open { opacity:1; } #mobile-menu a { font-family:var(--font-display);font-size:1.5rem;color:rgba(255,255,255,.8);letter-spacing:.025em;transition:color .2s,transform .4s;transform:translateY(20px);opacity:0; } #mobile-menu.is-open a { transform:none;opacity:1; } #mobile-menu a:hover {color:var(--color-gold);}
.reveal { opacity:0; filter:blur(10px); transform:translateY(50px); transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter 1s cubic-bezier(.22,1,.36,1);}.reveal.from-left{transform:translateX(60px)}.reveal.from-right{transform:translateX(-60px)}.reveal.is-visible{opacity:1;filter:none;transform:none}.cinematic{transform:scale(.96)}.mask-reveal{overflow:hidden}.mask-reveal>*{display:block;transform:translateY(100%);transition:transform .9s cubic-bezier(.22,1,.36,1)}.mask-reveal.is-visible>*{transform:none}.split-text{display:inline-block}.split-text .word{display:inline-block;overflow:hidden;margin-right:.3em}.split-text .word span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1)}.split-text.is-visible .word span{transform:none;opacity:1}.stagger>*{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}.stagger.is-visible>*{opacity:1;transform:none}.stagger.is-visible>*:nth-child(2){transition-delay:.08s}.stagger.is-visible>*:nth-child(3){transition-delay:.16s}.stagger.is-visible>*:nth-child(4){transition-delay:.24s}.stagger.is-visible>*:nth-child(5){transition-delay:.32s}.stagger.is-visible>*:nth-child(6){transition-delay:.4s}
[data-horizontal] { min-height:100vh; } .horizontal-track { transform:translate3d(0,0,0);will-change:transform; }

/* Pinned horizontal storytelling galleries. */
#dining-track,
#gallery-track {
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

#dining-track > article,
#gallery-track > article {
  flex: 0 0 clamp(17rem, 72vw, 32rem);
  width: clamp(17rem, 72vw, 32rem);
  height: auto;
  aspect-ratio: 4 / 5;
}

@media (min-width: 40rem) {
  #dining-track > article,
  #gallery-track > article {
    flex-basis: clamp(20rem, 52vw, 32rem);
    width: clamp(20rem, 52vw, 32rem);
  }
}

@media (min-width: 64rem) {
  #dining-track > article,
  #gallery-track > article {
    flex-basis: clamp(22rem, 32vw, 32rem);
    width: clamp(22rem, 32vw, 32rem);
  }
}
.room-tilt { perspective:1000px; }.room-tilt>article { transform-style:preserve-3d;transition:transform .3s ease-out; }
.accordion-content { display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s,opacity .3s; }.accordion-content>p{overflow:hidden}.accordion-trigger .th-accent{transition:transform .3s}.accordion-trigger.is-open+.accordion-content{grid-template-rows:1fr;opacity:1}.accordion-trigger.is-open .th-accent{transform:rotate(180deg)}
.modal { animation: modalFade .25s both; }.modal-panel { animation: modalPanel .5s cubic-bezier(.22,1,.36,1) both; }@keyframes modalFade{from{opacity:0}to{opacity:1}}@keyframes modalPanel{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.booking-step { animation: stepIn .3s both; }@keyframes stepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
footer a { color:rgba(255,255,255,.25);transition:color .2s;}footer a:hover{color:var(--color-gold)}
@media (max-width: 1023px) { .horizontal-track { will-change:transform; } }
@media (prefers-reduced-motion:reduce) { #loading-screen,#app,.reveal,.mask-reveal>*,.split-text .word span,.stagger>*,.hero-cta,.blur-reveal>span,.particle { animation:none !important;transition-duration:.01ms !important;opacity:1;filter:none;transform:none; } }

/* Video-backed editorial scenes. */
.video-scene {
  height: 100vh;
  min-height: 100svh;
  isolation: isolate;
}

.video-scene-media,
.video-scene-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-scene-media {
  z-index: -2;
  object-fit: cover;
}

.video-scene-overlay {
  z-index: -1;
  background: rgba(0, 0, 0, 0.42);
}

#philosophy .reveal.mt-10 {
  display: none;
}

/* Stacked rooftop story. */
#rooftop-showcase {
  position: relative;
  height: 600vh;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
}

.rooftop-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.rooftop-panel {
  --showcase-progress: 0;
  --showcase-offset: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-rich-black);
  transform: translate3d(var(--showcase-offset), 0, 0);
  will-change: transform;
}

.rooftop-panel--one {
  --showcase-progress: 1;
  --showcase-offset: 0%;
  z-index: 1;
}

.rooftop-panel--two { z-index: 2; }
.rooftop-panel--three { z-index: 3; }
.rooftop-panel--four { z-index: 4; }
.rooftop-panel--five { z-index: 5; }
.rooftop-panel--six { z-index: 6; }

.rooftop-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 39.99rem) {
  #rooftop-showcase {
    margin-inline: -1.5rem;
  }
}

/* ==========================================================
   Cinematic scroll story — replaces the former Private Events
   grid. Pinned split-screen: text (left) / image (right),
   one slide active at a time, driven by scroll progress.
========================================================== */

.story-section {
  position: relative;
  height: 600vh;
  background: var(--color-rich-black);
}

.story-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content media";
}

.story-content {
  grid-area: content;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 6vw, 6rem);
}

.story-slides {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}

.story-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 34rem;
  opacity: 0;
  transform: translateY(34px);
  filter: blur(10px);
  pointer-events: none;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.story-slide.is-before {
  opacity: 0;
  transform: translateY(-34px);
  filter: blur(10px);
}

.story-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

.story-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 0.9vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.story-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.1;
  color: #f0ece6;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.story-heading em {
  font-style: italic;
  color: var(--color-gold);
}

.story-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  line-height: 1.7;
  color: rgba(240, 236, 230, 0.65);
  max-width: 28rem;
}

.story-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.story-count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(240, 236, 230, 0.5);
  white-space: nowrap;
}

.story-count-current {
  color: var(--color-gold);
}

.story-progress-track {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  max-width: 12rem;
  background: rgba(240, 236, 230, 0.14);
}

.story-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-gold);
  transform-origin: left;
  will-change: width;
}

.story-media {
  grid-area: media;
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--color-rich-black);
}

.story-image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.story-image.is-before {
  opacity: 0;
  transform: scale(0.94);
}

.story-image.is-active {
  opacity: 1;
  transform: scale(1.07);
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(26, 26, 26, 0.4), rgba(26, 26, 26, 0) 30%);
}

/* Tablet: 60 / 40 split */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .story-sticky {
    grid-template-columns: 60% 40%;
  }
}

/* Mobile: stacked, image above text */
@media (max-width: 39.99rem) {
  .story-sticky {
    grid-template-columns: 1fr;
    grid-template-rows: 42vh 1fr;
    grid-template-areas:
      "media"
      "content";
  }

  .story-content {
    justify-content: flex-start;
    padding: 2rem 1.5rem 1.75rem;
  }

  .story-slide {
    max-width: none;
  }

  .story-heading {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .story-text {
    max-width: none;
  }

  .story-progress-track {
    max-width: none;
  }

  .story-media::after {
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0.15), rgba(26, 26, 26, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-slide,
  .story-image,
  .story-progress-fill {
    transition-duration: 0.01ms !important;
  }
}

/* Dining section — pure black text for maximum readability on the light background. */
#dining .th-body,
#dining .th-accent,
#dining .th-heading {
  color: #000;
}

/* ==========================================================
   RESERVATION — premium room selection, guests dropdown,
   step transitions & review summary.
   ========================================================== */

/* --- Room selection cards --------------------------------- */

.room-choice {
  position: relative;
  border: 1px solid transparent;
  transition: transform 300ms cubic-bezier(.22,1,.36,1),
              border-color 300ms cubic-bezier(.22,1,.36,1),
              box-shadow 300ms cubic-bezier(.22,1,.36,1),
              background-color 300ms cubic-bezier(.22,1,.36,1);
}

.room-choice:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab,var(--color-gold)55%,transparent);
  box-shadow: 0 10px 26px color-mix(in oklab,var(--color-gold)20%,transparent);
}

.room-choice:focus-visible {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px color-mix(in oklab,var(--color-gold)25%,transparent);
}

.room-choice.is-selected {
  border-color: var(--color-gold);
  background-color: color-mix(in oklab,var(--color-gold)10%,transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab,var(--color-gold)40%,transparent),
              0 14px 30px color-mix(in oklab,var(--color-gold)26%,transparent);
  transform: scale(1.02);
}

.room-choice.is-selected:hover {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 0 0 1px color-mix(in oklab,var(--color-gold)55%,transparent),
              0 18px 36px color-mix(in oklab,var(--color-gold)32%,transparent);
}

.room-choice-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-gold);
  color: #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 260ms cubic-bezier(.22,1,.36,1), transform 260ms cubic-bezier(.22,1,.36,1);
}

.room-choice-check svg {
  width: 10px;
  height: 10px;
}

.room-choice.is-selected .room-choice-check {
  opacity: 1;
  transform: scale(1);
}

.room-choice-capacity {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  line-height: 1;
}

.guest-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  display: block;
}

/* --- Guests dropdown --------------------------------------- */

.guests-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
  transition: border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

.guests-select:hover {
  border-color: color-mix(in oklab,var(--color-gold)45%,transparent);
}

.guests-select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px color-mix(in oklab,var(--color-gold)22%,transparent);
}

.guests-select option {
  color: var(--color-rich-black);
}

/* --- Step transitions & progress indicator ------------------ */

.booking-step {
  transition: opacity 420ms cubic-bezier(.22,1,.36,1), transform 420ms cubic-bezier(.22,1,.36,1);
}

.booking-step.is-step-entering {
  opacity: 0;
  transform: translateX(16px);
}

[data-booking-step] {
  transition: transform 300ms cubic-bezier(.22,1,.36,1),
              box-shadow 300ms cubic-bezier(.22,1,.36,1),
              background-color 300ms ease, color 300ms ease;
}

[data-booking-step].is-current-step {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px color-mix(in oklab,var(--color-gold)22%,transparent),
              0 6px 18px color-mix(in oklab,var(--color-gold)35%,transparent);
}

[data-booking-connector] {
  transition: background-color 400ms ease;
}

/* --- Buttons ------------------------------------------------- */

#booking-card .th-btn-primary,
#booking-card .th-btn-ghost,
#booking-confirm,
#new-reservation {
  transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms cubic-bezier(.22,1,.36,1), opacity 260ms ease;
}

#booking-card .th-btn-primary:hover,
#booking-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in oklab,var(--color-gold)30%,transparent);
}

#booking-card .th-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab,var(--color-gold)45%,transparent);
}

/* --- Review summary card -------------------------------------- */

.review-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms cubic-bezier(.22,1,.36,1) 120ms, transform 520ms cubic-bezier(.22,1,.36,1) 120ms;
}

.review-card.is-visible {
  opacity: 1;
  transform: none;
}

.review-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem 0;
}

.review-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.review-value {
  font-size: 17px;
  font-weight: 400;
  text-align: right;
}

@media (max-width: 26rem) {
  .review-value {
    font-size: 15px;
  }
}

.review-divider {
  height: 1px;
}

/* --- Reservation submission status --------------------------- */

#booking-error {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 320ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1);
}

#booking-error.is-visible {
  opacity: 1;
  transform: none;
}

#booking-confirm:disabled,
#booking-confirm.is-loading {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .room-choice,
  .room-choice-check,
  .guests-select,
  .booking-step,
  [data-booking-step],
  #booking-card .th-btn-primary,
  #booking-card .th-btn-ghost,
  #booking-confirm,
  #new-reservation,
  .review-card,
  #booking-error {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================
   BIDIRECTIONAL REVEAL — fades/slides/blurs in on arrival AND
   back out on departure (unlike .reveal, which fires once).
   Used for the Careers teaser + Careers page accents.
   ========================================================== */

.bi-reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(46px) scale(.975);
  transition: opacity .9s cubic-bezier(.22,1,.36,1),
              transform .9s cubic-bezier(.22,1,.36,1),
              filter .9s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--bi-delay, 0ms);
  will-change: opacity, transform, filter;
}

.bi-reveal.bi-left  { transform: translateX(-56px) translateY(0) scale(.975); }
.bi-reveal.bi-right { transform: translateX(56px)  translateY(0) scale(.975); }

.bi-reveal.bi-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bi-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   3D TILT — generic mouse-tracked tilt, reused by the Careers
   teaser card and the Careers page position cards (same
   mechanic as .room-tilt, renamed for use outside the Rooms
   section).
   ========================================================== */

.tilt-wrap { perspective: 1400px; }
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  .tilt-card { transition: box-shadow .3s ease; }
}

/* ==========================================================
   CAREERS TEASER — homepage section, just above the footer.
   Deliberately compact and quiet (not full-viewport) — a single
   glass panel with a slow gold glow behind it, rather than a
   loud photographic hero.
   ========================================================== */

#careers-teaser {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  min-height: 0;
}

.careers-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 90vw);
  height: min(760px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--color-gold) 16%, transparent) 0%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
  animation: careersGlow 9s ease-in-out infinite;
}

@keyframes careersGlow {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.14); }
}

.careers-card {
  position: relative;
  border-radius: 1.75rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .55);
}

.careers-card:hover {
  box-shadow: 0 40px 100px -28px color-mix(in oklab, var(--color-gold) 24%, transparent);
}

.careers-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.careers-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-gold);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-gold) 22%, transparent);
  margin-right: .6em;
  animation: careersDot 2.4s ease-in-out infinite;
}

@keyframes careersDot {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.35); }
}

.careers-roles {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 1.9rem;
}

.careers-role-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.careers-role-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-gold);
  flex: 0 0 auto;
}

.careers-contact-panel {
  border-left: 1px solid rgba(255, 255, 255, .09);
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.careers-contact-item p:first-child {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

@media (max-width: 63.99rem) {
  .careers-grid { grid-template-columns: 1fr; }
  .careers-contact-panel {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-left: 0;
    padding-top: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.75rem;
  }
}

@media (max-width: 39.99rem) {
  .careers-contact-panel { flex-direction: column; gap: 1.1rem; }
}

/* ---------- Light-scene contrast (homepage teaser now sits on a white/
   ivory background) — .glass-frost and the contact-panel divider are
   hardcoded for dark surfaces, so give them light-appropriate values
   here, matching the same recipe already used by .scene-light .th-card
   and .scene-light .bpa-share elsewhere on the site. Everything else in
   this component (labels, headings, body copy, gold accents, the gold
   button) is already theme-aware or scene-independent and adapts on
   its own. ---------- */
.scene-light .careers-card {
  background: #ffffffa6;
  border: 1px solid #ffffff80;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
}
.scene-light .careers-card:hover {
  box-shadow: 0 16px 48px -12px color-mix(in oklab, var(--color-gold) 26%, transparent);
}
.scene-light .careers-contact-panel {
  border-left-color: rgba(0, 0, 0, .09);
  border-top-color: rgba(0, 0, 0, .09);
}

/* ==========================================================
   CAREERS PAGE — full page, reusing the site's scene / th- /
   glass / reveal vocabulary throughout.
   ========================================================== */

/* --- Hero --- */
.careers-hero {
  position: relative;
  height: 78vh;
  min-height: 32rem;
  isolation: isolate;
}

.careers-hero-media,
.careers-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.careers-hero-media {
  z-index: -2;
  object-fit: cover;
}

.careers-hero-overlay {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.72) 55%, rgba(26,26,26,.94) 100%),
    linear-gradient(90deg, rgba(26,26,26,.35), rgba(26,26,26,0) 55%);
}

.careers-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.careers-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 236, 230, .55);
  margin-bottom: 1.25rem;
}

.careers-hero-breadcrumb a { color: rgba(240, 236, 230, .55); transition: color .3s; }
.careers-hero-breadcrumb a:hover { color: var(--color-gold); }

/* --- Intro strip --- */
.careers-intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.careers-intro-stat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.careers-intro-stat strong {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.careers-intro-stat span {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Position cards --- */
.careers-positions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.careers-position-card {
  position: relative;
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .4);
  transition: box-shadow .45s cubic-bezier(.22,1,.36,1);
}

.careers-position-card:hover {
  box-shadow: 0 34px 80px -26px color-mix(in oklab, var(--color-gold) 22%, transparent);
}

.careers-position-tag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.careers-position-card h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin-bottom: .75rem;
}

.careers-position-card p {
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1.35rem;
}

.careers-position-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.6rem;
}

.careers-position-list li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.6;
}

.careers-position-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-gold);
  flex: 0 0 auto;
  transform: translateY(-2px);
}

@media (max-width: 63.99rem) {
  .careers-positions-grid { grid-template-columns: 1fr; }
}

/* --- Benefits row --- */
.careers-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2vw, 1.5rem);
}

.careers-benefit {
  text-align: center;
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.1rem, 2vw, 1.4rem);
}

.careers-benefit-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-gold) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
  color: var(--color-gold);
  font-size: 1.1rem;
}

.careers-benefit h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: .5rem;
}

.careers-benefit p {
  font-family: var(--font-body);
  font-size: .78rem;
  line-height: 1.6;
}

@media (max-width: 63.99rem) {
  .careers-benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
  .careers-benefits-grid { grid-template-columns: 1fr; }
}

/* --- Apply panel --- */
.careers-apply-card {
  border-radius: 1.75rem;
  padding: clamp(2rem, 4vw, 3rem);
}

.careers-apply-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 0;
}

.careers-apply-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.scene-light .careers-apply-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.careers-apply-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-gold) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  flex: 0 0 auto;
  font-size: .95rem;
}

.careers-apply-row p:first-child {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

/* ============================================================================
   PRESS EXPERIENCE — bp- prefixed, additive only. Shared by:
     - the homepage teaser (#press, bulevar/index.html)
     - the press.html editorial hub (.bph- hub-only pieces)
     - every recreated internal article page (.bpa- article-only pieces)
   Reuses existing tokens/utilities only (--font-display/--font-body,
   --color-*, .scene/.th-*, .glass*, .reveal/.mask-reveal/.stagger,
   .bi-reveal, .tilt-wrap/.tilt-card, .magnetic) — no new color values,
   no imported Emporia CSS.
   ============================================================================ */

/* ---------- Shared card component (teaser + hub) ---------- */
.bp-card {
  position: relative;
  display: block;
  border-radius: 1.5rem;
  overflow: hidden;
  isolation: isolate;
}
.bp-card-media {
  position: relative;
  overflow: hidden;
  background: var(--color-rich-black);
}
.bp-card-media img {
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.bp-card:hover .bp-card-media img,
.bp-card:focus-visible .bp-card-media img { transform: scale(1.06); }
.bp-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 55%, transparent 80%);
  transition: opacity .5s ease;
}
.bp-card-badge {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.bp-card-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: var(--color-gold); flex: 0 0 auto;
}
.bp-card-num {
  position: absolute; right: 1rem; top: 1rem; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 13px; color: rgba(255,255,255,.7);
}
.bp-card-body { position: relative; padding: 1.4rem 1.5rem 1.6rem; }
.bp-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 0;
  margin-bottom: .65rem;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.bp-card-meta span:not(:last-child)::after {
  content: '\2022'; margin: 0 .55rem; opacity: .5;
}
.bp-card-body h3 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.2;
  margin-bottom: .6rem;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.bp-card:hover .bp-card-body h3 { transform: translateX(4px); }
.bp-card-body p { font-family: var(--font-body); font-weight: 300; line-height: 1.7; }
.bp-card-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-gold);
}
.bp-card-cta svg { width: 12px; height: 12px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.bp-card:hover .bp-card-cta svg { transform: translate(3px,-3px); }

/* ---------- Homepage teaser (#press) ---------- */
#press { position: relative; overflow: hidden; }
.bp-teaser-glow {
  position: absolute; top: -10%; right: -8%; width: min(620px,60vw); height: min(620px,60vw);
  background: radial-gradient(circle, color-mix(in oklab, var(--color-gold) 14%, transparent) 0%, transparent 70%);
  pointer-events: none; filter: blur(4px);
  animation: bpGlow 11s ease-in-out infinite;
}
@keyframes bpGlow { 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.95; transform:scale(1.12); } }
.bp-teaser-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.bp-teaser-count {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
}
.bp-teaser-count strong { font-size: clamp(2rem, 3.4vw, 3rem); font-style: normal; }
.bp-teaser-count span { font-family: var(--font-body); font-style: normal; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }

.bp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.75rem);
}
.bp-grid .tilt-wrap { display: block; height: 100%; }
.bp-grid .bp-card { height: 100%; display: flex; flex-direction: column; }
.bp-grid .bp-card .bp-card-media { flex: 1 1 auto; }

.bp-tile--feature { grid-column: span 4; grid-row: span 2; }
.bp-tile--feature .bp-card-media { aspect-ratio: 16/11; }
.bp-tile--feature .bp-card-body h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.bp-tile--feature .bp-card-body p { font-size: 14px; max-width: 46ch; }

.bp-tile--a { grid-column: span 2; }
.bp-tile--a .bp-card-media { aspect-ratio: 4/5; }
.bp-tile--a .bp-card-body h3 { font-size: 1.05rem; }
.bp-tile--a .bp-card-body p { font-size: 12.5px; }

.bp-tile--b { grid-column: span 3; }
.bp-tile--b .bp-card-media { aspect-ratio: 16/10; }
.bp-tile--b .bp-card-body h3 { font-size: 1.05rem; }
.bp-tile--b .bp-card-body p { font-size: 12.5px; }

@media (max-width: 63.99rem) {
  .bp-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-tile--feature { grid-column: 1 / -1; grid-row: auto; }
  .bp-tile--a, .bp-tile--b { grid-column: span 1; }
}
@media (max-width: 34rem) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-tile--feature, .bp-tile--a, .bp-tile--b { grid-column: 1 / -1; }
}

.bp-teaser-foot {
  display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

/* ---------- Hub page (press.html) hero ---------- */
.bph-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff; }
.bph-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bph-hero-media img { width: 100%; height: 100%; object-fit: cover; animation: bphZoom 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes bphZoom { from { transform: scale(1.06); } to { transform: scale(1.16); } }
.bph-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(10,9,8,.95) 0%, rgba(10,9,8,.55) 45%, rgba(10,9,8,.28) 70%, rgba(10,9,8,.55) 100%),
    linear-gradient(100deg, rgba(10,9,8,.35), transparent 55%);
}
.bph-hero-content { position: relative; z-index: 2; padding: min(18vh,150px) 0 min(8vh,64px); }
.bph-hero-breadcrumb { display: flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.75rem; }
.bph-hero-breadcrumb a { color: rgba(255,255,255,.75); }
.bph-hero-content h1 {
  font-family: var(--font-display); font-weight: 300; color: #fff;
  font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.01em;
  max-width: 14ch; margin-bottom: 1.5rem;
}
.bph-hero-content h1 em { font-style: italic; color: var(--color-gold); }
.bph-hero-sub { max-width: 52ch; font-family: var(--font-body); font-weight: 300; font-size: clamp(14px,1.1vw,16px); line-height: 1.8; color: rgba(255,255,255,.65); margin-bottom: clamp(2rem,4vw,3rem); }
.bph-hero-stats { display: flex; flex-wrap: wrap; gap: clamp(2rem,4vw,3.5rem); }
.bph-hero-stat strong { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem,3vw,2.6rem); color: #fff; }
.bph-hero-stat span { display: block; margin-top: .3rem; font-family: var(--font-body); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.bph-scroll-cue {
  position: absolute; right: clamp(20px,4vw,52px); bottom: min(6vh,52px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.bph-scroll-cue-line { width: 1px; height: 44px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.bph-scroll-cue-line::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--color-gold); animation: bphCue 2.6s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes bphCue { 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (max-width: 40rem) { .bph-scroll-cue { display: none; } }

/* ---------- Hub sections / groupings ---------- */
.bph-section { position: relative; padding: clamp(4.5rem,8vw,7rem) 0; }
.bph-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2.25rem,4vw,3.5rem); }
.bph-section-eyebrow { display: block; margin-bottom: .6rem; }
.bph-section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem,3vw,2.6rem); line-height: 1.1; }
.bph-section-note { max-width: 34ch; font-family: var(--font-body); font-size: 11.5px; line-height: 1.7; }

.bph-featured-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.bph-featured-media { position: relative; aspect-ratio: 4/5; border-radius: 1.75rem; overflow: hidden; box-shadow: 0 40px 90px -32px rgba(0,0,0,.5); }
.bph-featured-media img { transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.bph-featured-media:hover img { transform: scale(1.045); }
.bph-featured-copy h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem,3.2vw,2.75rem); line-height: 1.08; margin-bottom: 1.1rem; }
.bph-featured-copy p { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.85; max-width: 48ch; margin-bottom: 1.6rem; }
@media (max-width: 56rem) { .bph-featured-grid { grid-template-columns: 1fr; } }

.bph-row-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,2.4vw,2.25rem); }
.bph-row-grid .bp-card-media { aspect-ratio: 4/5; }
@media (max-width: 56rem) { .bph-row-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 34rem) { .bph-row-grid { grid-template-columns: 1fr; } }

.bph-row-grid--wide .bp-card-media { aspect-ratio: 16/10; }

/* Simple read-more link used for external references inside dense lists */
.bp-read {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-gold);
}
.bp-read svg { width: 11px; height: 11px; transition: transform .3s ease; }
.bp-read:hover svg { transform: translate(2px,-2px); }

.bph-closing { position: relative; min-height: 62vh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.bph-closing-media { position: absolute; inset: 0; z-index: 0; }
.bph-closing-media img { filter: saturate(.9); }
.bph-closing-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,9,8,.94), rgba(10,9,8,.55) 55%, rgba(10,9,8,.72)); }
.bph-closing-content { position: relative; z-index: 2; text-align: center; padding: min(12vh,100px) 0; }
.bph-closing-content h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem,4vw,3.2rem); max-width: 18ch; margin: 1.2rem auto 1.3rem; line-height: 1.14; }
.bph-closing-content p { max-width: 50ch; margin: 0 auto 1.8rem; font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.8; color: rgba(255,255,255,.65); }

/* ---------- Reading progress bar (article pages) ---------- */
#bpa-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 210;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-gold), var(--color-copper));
  transition: transform .12s linear;
}

/* ---------- Article template (.bpa- prefix) ---------- */
.bpa-eyebrow { display: inline-flex; align-items: center; gap: .7rem; }
.bpa-eyebrow i { width: 34px; height: 1px; background: var(--color-gold); }

#bpa-hero { position: relative; min-height: 82svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.bpa-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bpa-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.bpa-hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,9,8,.95) 0%, rgba(10,9,8,.5) 48%, rgba(10,9,8,.22) 72%, rgba(10,9,8,.42) 100%); }
.bpa-hero-content { position: relative; z-index: 2; padding: min(16vh,130px) 0 min(7vh,58px); }
.bpa-hero-content h1 {
  font-family: var(--font-display); font-weight: 300; color: #fff;
  font-size: clamp(2rem,4.6vw,3.75rem); line-height: 1.08; letter-spacing: -.01em;
  max-width: 18ch; margin: 1.1rem 0 1.4rem;
}
.bpa-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 0; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.bpa-hero-meta span:not(:last-child)::after { content: '\2022'; margin: 0 .7rem; color: var(--color-gold); }

#bpa-body { padding: clamp(4rem,8vw,6.5rem) 0; }
.bpa-body-grid { display: grid; grid-template-columns: .32fr .68fr; gap: clamp(2rem,4vw,4.5rem); align-items: start; }
.bpa-source { border-radius: 1.25rem; padding: clamp(1.5rem,2.4vw,2rem); position: sticky; top: 6.5rem; }
.bpa-source h4 { font-family: var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; color: var(--color-gold); }
.bpa-source dl { display: flex; flex-direction: column; gap: .8rem; }
.bpa-source dt { font-family: var(--font-body); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: .15rem; }
.bpa-source dd { margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 300; }
.bpa-share { display: flex; gap: .6rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.08); }
.scene-light .bpa-share { border-top-color: rgba(0,0,0,.08); }
.bpa-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .55; transition: opacity .3s ease, transform .3s ease;
}
.bpa-share a:hover { opacity: 1; transform: translateY(-2px); }
.bpa-share svg { width: 14px; height: 14px; }
@media (max-width: 56rem) { .bpa-body-grid { grid-template-columns: 1fr; } .bpa-source { position: static; } }

.bpa-article { font-family: var(--font-body); }
.bpa-lede { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.2rem,1.7vw,1.5rem); line-height: 1.5; max-width: 36ch; margin-bottom: 1.75rem; }
.bpa-article p.bpa-p { font-weight: 300; font-size: 16px; line-height: 1.95; max-width: 68ch; margin-bottom: 1.4rem; }
.bpa-article p.bpa-p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 3.6em; float: left; line-height: .86;
  padding: .04em .09em 0 0; color: var(--color-gold); font-weight: 500;
}
.bpa-article strong { font-weight: 600; }
.bpa-figure { margin: clamp(2.25rem,4vh,3.25rem) 0; max-width: 360px; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 32px 70px -30px rgba(0,0,0,.4); }
.bpa-figure img { aspect-ratio: 4/5; object-fit: cover; }
.bpa-figure figcaption { padding: .75rem 1rem; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .06em; opacity: .6; }
.bpa-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; margin: clamp(2rem,4vh,3rem) 0; }
.bpa-gallery figure { border-radius: 1rem; overflow: hidden; aspect-ratio: 3/4; }
@media (max-width: 40rem) { .bpa-gallery { grid-template-columns: repeat(2,1fr); } }
.bpa-pullquote {
  position: relative; margin: clamp(2.5rem,5vh,3.75rem) 0; padding: clamp(1.75rem,3vw,2.5rem) clamp(1.75rem,3vw,2.75rem);
  border-left: 2px solid var(--color-gold); border-radius: 0 1rem 1rem 0;
}
.bpa-pullquote-mark { display: block; font-family: var(--font-display); font-style: italic; font-size: 2.75rem; line-height: .6; color: var(--color-gold); margin-bottom: .6rem; }
.bpa-pullquote p { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.15rem,1.8vw,1.5rem); line-height: 1.5; max-width: 42ch; }

/* ---------- Related / next article ---------- */
#bpa-related { padding: clamp(4rem,7vw,5.5rem) 0; }
.bpa-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.25rem,2vw,1.75rem); }
.bpa-related-grid .bp-card-media { aspect-ratio: 4/5; }
@media (max-width: 56rem) { .bpa-related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 34rem) { .bpa-related-grid { grid-template-columns: 1fr; } }

.bpa-next {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(1.75rem,3vw,2.5rem); border-radius: 1.5rem;
}
.bpa-next-label { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; margin-bottom: .4rem; }
.bpa-next-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1rem,1.8vw,1.5rem); }
.bpa-next-arrow { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; border: 1px solid currentColor; flex: 0 0 auto; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.bpa-next:hover .bpa-next-arrow { transform: translateX(4px); }
@media (max-width: 34rem) { .bpa-next { flex-direction: column; align-items: flex-start; } }

.bpa-back {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.bpa-back svg { width: 13px; height: 13px; transition: transform .3s ease; }
.bpa-back:hover svg { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .bp-teaser-glow, .bph-hero-media img, .bph-scroll-cue-line::after { animation: none !important; }
}

/* ============================================================================
   NEWS EXPERIENCE — bn- prefixed, additive only. Deliberately reuses the
   Press system's shared vocabulary rather than duplicating it:
     - homepage teaser (#news): .bp-card / .bp-card-media / .bp-card-badge /
       .bp-card-body / .bp-card-meta / .bp-card-cta / .bp-teaser-glow /
       .bp-teaser-head / .bp-teaser-count / .bp-teaser-foot / .bi-reveal /
       .tilt-wrap / .magnetic — only the grid shape and the featured-tile
       accent below are new.
     - hub (news.html): .bph-hero* / .bph-section* / .bph-featured-grid* /
       .bph-row-grid / .bp-read / .bph-closing* — only a two-up row variant
       is new. The Careers spotlight reuses .careers-card / .careers-grid /
       .careers-glow / .careers-eyebrow-dot / .careers-role-chip /
       .careers-contact-panel verbatim (same keyframes, same visuals).
     - article pages (news-*.html): .bpa-* verbatim, no new CSS at all.
   ============================================================================ */

#news { position: relative; overflow: hidden; padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Homepage grid: exactly 4 / 2 / 1 per breakpoint (explicit
   brief requirement — deliberately simpler than the Press bento so all
   four cards read as equal-weight, single-row citizens) ---------- */
.bn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.75rem);
}
.bn-grid .tilt-wrap { display: block; height: 100%; }
.bn-grid .bp-card { height: 100%; display: flex; flex-direction: column; position: relative; }
.bn-grid .bp-card-media { flex: 0 0 auto; aspect-ratio: 3/4; }
.bn-grid .bp-card-body h3 { font-size: 1.02rem; }
.bn-grid .bp-card-body p { font-size: 12.5px; }

@media (max-width: 63.99rem) {
  .bn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
  .bn-grid { grid-template-columns: 1fr; }
  .bn-grid .bp-card-media { aspect-ratio: 4/3; }
}

/* ---------- Featured "Now Hiring" tile — same grid span as its siblings
   (equal importance, per brief) but visually distinguished through light
   and a living pulse rather than size, giving it editorial priority
   without breaking row harmony ---------- */
.bn-tile--careers .bp-card {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-gold) 38%, transparent), 0 30px 70px -34px color-mix(in oklab, var(--color-gold) 50%, transparent);
}
.bn-tile--careers .bp-card-badge {
  background: color-mix(in oklab, var(--color-gold) 24%, rgba(255,255,255,.08));
  border-color: color-mix(in oklab, var(--color-gold) 48%, rgba(255,255,255,.16));
}
.bn-tile--careers .bp-card-badge::before {
  animation: careersDot 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-gold) 22%, transparent);
}

/* ---------- Mouse-follow lighting on News cards only (desktop, fine
   pointer) — additive layer above .tilt-card's existing 3D tilt ---------- */
.bn-grid .bp-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--color-gold) 22%, transparent), transparent 62%);
  mix-blend-mode: soft-light;
}
.bn-grid .tilt-wrap:hover .bp-card::after { opacity: 1; }

/* ---------- Hub (news.html): two-up variant of .bph-row-grid ---------- */
.bph-row-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 40rem) { .bph-row-grid--two { grid-template-columns: 1fr; } }

/* ---------- Hub: standalone Careers spotlight block, sized for a
   secondary (non-hero) placement within news.html ---------- */
.bn-careers-spotlight { padding: clamp(3rem,6vw,4.5rem) 0; }

@media (prefers-reduced-motion: reduce) {
  .bn-grid .bp-card::after { display: none; }
  .bn-tile--careers .bp-card-badge::before { animation: none !important; }
}

/* ==========================================================================
   LANGUAGE SELECTOR — desktop dropdown (in #nav-inner) + mobile chip list
   (inside #mobile-menu). Colors are intentionally left to the same
   text-white/60 / text-graphite/70 utility classes main.js already toggles
   on .nav-link so the trigger tracks the header's light/dark state; only
   layout, the dropdown panel, and hover/active states live here.
   ========================================================================== */

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  line-height: 1;
  transition: color .3s;
}

.lang-trigger .lang-flag { width: 20px; height: 14px; font-size: 14px; line-height: 1; display: inline-flex; flex-shrink: 0; overflow: hidden; border-radius: 2px; }
.lang-trigger .lang-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lang-trigger .lang-caret {
  font-size: 9px;
  opacity: .6;
  transition: transform .3s;
}
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  margin: 0;
  list-style: none;
  border-radius: 16px;
  background: #faf8f5e0;
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid #0000000f;
  box-shadow: 0 20px 48px -12px #00000026, 0 2px 8px #0000000a;
  z-index: 60;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-rich-black);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.lang-option:hover,
.lang-option:focus-visible {
  background: color-mix(in oklab, var(--color-gold) 12%, transparent);
  outline: none;
}

.lang-option.is-active {
  color: var(--color-gold);
  font-weight: 600;
}

.lang-option .lang-flag { width: 21px; height: 15px; font-size: 15px; line-height: 1; display: inline-flex; flex-shrink: 0; overflow: hidden; border-radius: 2px; }
.lang-option .lang-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobile — inside #mobile-menu, below the Book Now button */
.lang-switch--mobile {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lang-switch-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
}

.lang-options-mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 280px;
}

.lang-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}

.lang-chip .lang-flag { width: 18px; height: 13px; font-size: 13px; line-height: 1; display: inline-flex; flex-shrink: 0; overflow: hidden; border-radius: 2px; }
.lang-chip .lang-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lang-chip:hover {
  border-color: color-mix(in oklab, var(--color-gold) 45%, transparent);
  color: #fff;
}

.lang-chip.is-active {
  background: color-mix(in oklab, var(--color-gold) 16%, transparent);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

@media (max-width: 380px) {
  .lang-options-mobile { max-width: 240px; }
  .lang-chip { font-size: 10px; padding: 6px 10px; }
}