/* ==========================================================================
   Superhost Hospitality — shared stylesheet (marketing site + employee portal)
   Palette is locked to the brand mark. No colors beyond these tokens.
   ========================================================================== */

:root {
  --navy: #1E3A8A;
  --ink: #0F1E4A;
  /* Accent. The logo is navy-only, so the accent is drawn from its own hue
     rather than introducing a second colour. Two tints because no single value
     clears WCAG AA on both cream and navy: the gold this replaced sat at
     2.60:1 on cream, well under the 4.5:1 minimum for small text.
       --accent on cream 5.79:1, on white 6.36:1
       --accent on dark surfaces 9.52:1 (hero), 8.53:1 (navy), 8.50:1 (ink) */
  --accent: #456185;
  --paper: #F7F4EE;
  --char: #1A1A1A;
  --gray: #6B6B6B;
  --rule: #D4CFC4;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1360px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class],
.pipeline-year ul, .org-col ul, .footer-links ul { list-style: none; padding: 0; }
img, svg { max-width: 100%; display: block; }
img { height: auto; } /* width/height attrs stay for CLS; CSS controls rendered size */
input, button, textarea, select { font: inherit; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--char);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--navy); color: var(--paper); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark, .theme-dark { --accent: #A9BEDC; }
/* Inline SVGs in the scorecard use currentColor so they follow the accent token
   through the light/dark rebind above, rather than carrying a hardcoded hex. */
.dash-chart { color: var(--accent); }
.on-dark :focus-visible, .theme-dark :focus-visible { outline-color: var(--accent); }

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

/* ---------- Type ---------- */
/* Cormorant defaults to old-style figures; stats and years need lining ones. */
body { font-variant-numeric: lining-nums; }
/* Cormorant's short lowercase makes small serif headings read undersized next
   to Jost. Scale them by x-height (about 10%); display headlines are left as set. */
h3, .state-link-name, .award-name { font-size-adjust: 0.44; }

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.display-xl { font-size: clamp(2.75rem, 7.4vw, 8.25rem); font-weight: 500; line-height: 0.98; }
.display-lg { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.display-md { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--gray);
  max-width: 34em;
}

.kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  font-weight: 600; font-size: 1rem;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; }
.btn-ghost.on-dark { color: var(--paper); border-color: rgba(247, 244, 238, 0.55); }
.btn-ghost.on-dark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.text-link {
  color: var(--navy); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.text-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 76px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* The new logo is a stacked lockup, so at a 76px bar height only the SH
   monogram stays legible — the wordmark would render a few pixels tall. The
   full lockup runs in the footer, where there is vertical room. */
.brand img { width: auto; height: 46px; }

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav ul { display: flex; gap: 1.75rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) {
  color: var(--char); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--navy); border-bottom-color: var(--accent); }
.site-nav .btn { padding: 0.65rem 1.4rem; font-size: 0.9375rem; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
}

@media (max-width: 1023px) {
  .brand img { height: 38px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 76px; left: 0; right: 0;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter) 1.5rem;
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .site-nav ul a:not(.btn) { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
  .site-nav .btn { margin-top: 1.25rem; justify-content: center; }
}
@media (max-width: 479px) {
  .brand img { height: 34px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { max-width: 46em; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .lede { margin-top: 1.25rem; }

/* ---------- Hero (full-bleed, immersive) ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(2.5rem, 6vw, 5rem);
  min-height: min(94dvh, 980px);
  background: #0A1435;
  color: var(--paper);
  padding-top: clamp(3rem, 7vh, 6rem);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right bottom;
  z-index: 0;
}
/* scrim keeps display type and the stat band readable over real photography:
   left wash for the headline column, bottom wash for the stats */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 20, 53, 0.45) 0%, rgba(10, 20, 53, 0.25) 42%, rgba(10, 20, 53, 0.88) 100%),
    linear-gradient(90deg, rgba(10, 20, 53, 0.85), rgba(10, 20, 53, 0.35) 55%, rgba(10, 20, 53, 0.05));
  pointer-events: none;
  z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; } /* flex column + margin auto would otherwise shrink-wrap */
/* The full stacked lockup sits above the headline. Sized by height so the
   "HOSPITALITY" line stays legible — it is the smallest element in the mark,
   roughly a twentieth of the lockup's height. */
.hero-logo {
  width: auto;
  /* Tied to viewport height as well as width: on a short laptop screen the
     lockup shrinks so the stat band below stays close to the fold. Floor is
     the point where the "HOSPITALITY" line stops being readable. */
  height: clamp(120px, min(38vw, 19vh), 200px);
  margin-bottom: clamp(1rem, 2.2vw, 1.75rem);
}
.hero h1 { color: var(--paper); }
.hero .lede { font-size: clamp(1.25rem, 1.9vw, 1.625rem); color: rgba(247, 244, 238, 0.8); margin-top: 1.75rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* staggered entrance, load only */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-content > * { opacity: 0; transform: translateY(26px); animation: heroIn 0.9s var(--ease) forwards; }
  .js .hero-content > *:nth-child(2) { animation-delay: 0.12s; }
  .js .hero-content > *:nth-child(3) { animation-delay: 0.24s; }
  /* the lockup added a fourth child, so the CTAs need their own delay */
  .js .hero-content > *:nth-child(4) { animation-delay: 0.36s; }
  .js .hero .stats-ticker { opacity: 0; animation: heroIn 0.9s var(--ease) 0.4s forwards; }
  @keyframes heroIn { to { opacity: 1; transform: none; } }
}

.stats-ticker {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-ticker > div {
  padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column-reverse; /* markup is dt-then-dd for validity; number renders above label */
}
.stats-ticker dd { margin: 0; }
.stats-ticker > div:first-child { border-left: 0; padding-left: 0; }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 500; line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-label { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--gray); }

.stats-ticker.on-dark { border-color: rgba(247, 244, 238, 0.25); }
.stats-ticker.on-dark > div { border-color: rgba(247, 244, 238, 0.25); }
.stats-ticker.on-dark .stat-num { color: var(--paper); }
.stats-ticker.on-dark .stat-label { color: rgba(247, 244, 238, 0.68); }

@media (max-width: 767px) {
  .stats-ticker { grid-template-columns: 1fr 1fr; }
  .stats-ticker > div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .stats-ticker.on-dark > div { border-color: rgba(247, 244, 238, 0.25); }
  .stats-ticker > div:nth-child(-n+2) { border-top: 0; }
  .stats-ticker > div:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 1rem; }
  .stats-ticker.on-dark > div:nth-child(even) { border-left-color: rgba(247, 244, 238, 0.25); }
}

/* ---------- Who we are ---------- */
.tricol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tricol > article {
  padding: 2rem clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--rule);
  border-top: 3px solid transparent;
  transition: border-top-color 0.3s var(--ease);
}
.tricol > article:hover { border-top-color: var(--accent); }
.tricol > article:first-child { border-left: 0; padding-left: 0; }
.tricol h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.tricol p { color: var(--gray); }
.who-statement {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 3px solid var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 28em;
}
@media (max-width: 767px) {
  .tricol { grid-template-columns: 1fr; }
  .tricol > article { border-left: 0; border-top: 1px solid var(--rule); padding-inline: 0; }
  .tricol > article:first-child { border-top: 0; }
}

/* ---------- Pillars (asymmetric grid) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.pillar {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .pillar:hover { transform: translateY(-4px); border-color: var(--accent); }
}
.pillar:nth-child(1) { grid-column: span 7; background: var(--ink); border-color: var(--ink); }
.pillar:nth-child(2) { grid-column: span 5; }
.pillar:nth-child(3) { grid-column: span 5; }
.pillar:nth-child(4) { grid-column: span 7; background: var(--navy); border-color: var(--navy); }
.pillar h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
.pillar p { color: var(--gray); max-width: 34em; }
.pillar .pillar-fig {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1; color: var(--accent);
}
.pillar.dark h3 { color: var(--paper); }
.pillar.dark p { color: rgba(247, 244, 238, 0.75); }
.pillar-logos {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  align-items: center; justify-items: center;
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.5rem);
  margin: 0 0 1.75rem; padding: 0;
}
.pillar-logos img {
  width: 100%; max-width: 170px;
  height: auto; display: block;
  margin: -6% 0; /* logo PNGs carry ~20% transparent padding top and bottom */
}
.pillar-logos + p { text-align: center; max-width: none; }
.pillar > div:has(.pillar-logos) { flex: 1; display: flex; flex-direction: column; justify-content: center; container-type: inline-size; }
@container (min-width: 560px) { .pillar-logos { grid-template-columns: repeat(4, 1fr); } }
.pillar.dark .pillar-logos img { filter: brightness(0) invert(1); opacity: 0.9; }
@media (max-width: 767px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { grid-column: span 1 !important; }
}

/* ---------- Balanced Scorecard (dark centerpiece) ---------- */
.scorecard-section {
  background: var(--ink);
  color: var(--paper);
}
.scorecard-section h2, .scorecard-section h3 { color: var(--paper); }
.scorecard-section .lede { color: rgba(247, 244, 238, 0.72); }
.quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(247, 244, 238, 0.22);
}
.quadrant {
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 0 solid rgba(247, 244, 238, 0.22);
}
.quadrant:nth-child(1) { border-right-width: 1px; border-bottom-width: 1px; }
.quadrant:nth-child(2) { border-bottom-width: 1px; }
.quadrant:nth-child(3) { border-right-width: 1px; }
.quadrant h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-bottom: 0.85rem; }
.quadrant p { color: rgba(247, 244, 238, 0.78); font-size: 1.0625rem; max-width: 30em; }

/* Quadrant with in-block media (photo or dashboard mockup) */
.q-has-media {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.q-body { min-width: 0; }
.q-media { margin: 0; min-width: 0; }
.q-media > img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-top: 3px solid var(--accent);
}
.q-media .mac-monitor { width: 100%; }
@media (max-width: 1023px) { .q-has-media { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .quadrants { grid-template-columns: 1fr; }
  .quadrant { border-right-width: 0 !important; border-bottom-width: 1px; }
  .quadrant:last-child { border-bottom-width: 0; }
}

/* ---------- Timeline ---------- */
.timeline-scroller {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  border-top: 1px solid var(--ink);
  min-width: max-content;
}
.milestone {
  scroll-snap-align: start;
  padding: 2rem 2rem 0.5rem 0;
  position: relative;
}
.milestone::before {
  content: "";
  position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
}
.milestone .year {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  color: var(--ink); line-height: 1;
}
.milestone p { margin-top: 0.6rem; color: var(--gray); font-size: 0.9375rem; max-width: 16em; }

/* ---------- Portfolio ---------- */
.statement-bar {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem clamp(1.5rem, 3.5vw, 3.5rem);
  padding: 1.5rem 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600; color: var(--ink);
}
.statement-bar span strong { font-family: var(--serif); font-weight: 600; font-size: 1.35em; margin-right: 0.3em; }
.statement-bar span { white-space: nowrap; }
.statement-bar span strong:last-child { margin-right: 0; }
@media (min-width: 768px) {
  .statement-bar { flex-wrap: nowrap; justify-content: space-between; gap: 1rem; font-size: clamp(0.875rem, 1.6vw, 1rem); }
}

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter-btn {
  background: transparent;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--char);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.prop-table { width: 100%; border-collapse: collapse; }
.prop-table caption { text-align: left; }
.prop-table th {
  text-align: left;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray);
  padding: 0 1rem 0.85rem 0;
  border-bottom: 2px solid var(--ink);
}
.prop-table tbody tr { transition: background-color 0.2s var(--ease); }
.prop-table tbody tr:hover { background: #fff; }
.prop-table tbody tr:hover td:first-child { color: var(--navy); }
.prop-table td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.prop-table td:first-child {
  font-family: var(--serif);
  font-size: 1.1875rem; color: var(--ink);
}
.prop-table td:nth-child(2) { color: var(--gray); }
.brand-tag {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--gray); white-space: nowrap;
}
.prop-table tr[hidden] { display: none; }
@media (max-width: 767px) {
  .prop-table thead { display: none; }
  .prop-table tr { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .prop-table tr[hidden] { display: none; }
  .prop-table td { display: block; padding: 0; border: 0; }
  .prop-table td:last-child { grid-row: 1 / span 2; align-self: center; }
}

/* ---------- Property photography gallery ---------- */
.prop-gallery-scroller {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.prop-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 32vw, 440px);
  gap: clamp(1rem, 2vw, 1.75rem);
  min-width: max-content;
}
.prop-gallery li { scroll-snap-align: start; }
.prop-gallery img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 2px;
  border-bottom: 3px solid var(--accent);
}
.prop-gallery figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--gray); }

/* ---------- Pipeline ---------- */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3rem, 6vw, 5rem); }
.pipeline-year { border-top: 3px solid var(--accent); padding-top: 1.25rem; }
.pipeline-year h4 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  color: var(--ink);
  margin-bottom: 1rem;
}
.pipeline-year li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9875rem; }
.pipeline-year li span { display: block; color: var(--gray); font-size: 0.875rem; }
@media (max-width: 767px) { .pipeline { grid-template-columns: 1fr; } }

/* ---------- Awards ---------- */
.awards {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--ink);
}
.awards li { padding: 1.5rem 1.5rem 0 0; }
.awards .award-name { font-family: var(--serif); font-size: 1.125rem; color: var(--ink); display: block; }
.awards .award-detail { color: var(--gray); font-size: 0.875rem; }

/* ---------- Approach ---------- */
.approach-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}
.approach-row:first-of-type { border-top: 0; padding-top: 0; }
.approach-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.approach-row p { color: var(--gray); max-width: 38em; }
.approach-row p + p { margin-top: 1rem; }
@media (max-width: 767px) { .approach-row { grid-template-columns: 1fr; gap: 0.85rem; } }

.pull-quote {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  margin: 1.5rem 0;
  max-width: 22em;
}

/* ---------- Leadership ---------- */
/* ---------- Leadership ----------
   Mirrors the investor deck: each executive presented with the team reporting
   to them. A group is a labelled band; featured people get a tall portrait, a
   headline credential, and a bio; their reports sit beneath as a photo row. */
.lead-groups { border-top: 3px solid var(--ink); }

.lead-group {
  padding: clamp(2.25rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--rule);
}
.lead-label {
  font-family: var(--sans);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.lead-feature {
  display: grid;
  grid-template-columns: clamp(150px, 17vw, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.lead-feature + .lead-feature { margin-top: clamp(2rem, 4vw, 3rem); }

.lead-portrait {
  width: 100%;
  aspect-ratio: 8 / 9;
  object-fit: cover;
  object-position: top center;   /* headroom varies; bias to the face */
  border-radius: 2px;
  border-bottom: 3px solid var(--accent);
  background: #fff;
}

.lead-body h3 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.1; }
.lead-title {
  color: var(--navy); font-weight: 600;
  margin-top: 0.35rem;
}
/* The deck's standout line — the one credential worth reading first. */
.lead-headline {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  color: var(--ink);
  margin-top: 0.9rem;
}
/* The deck sets the bio off with a thin vertical rule. */
.lead-bio {
  color: var(--gray);
  max-width: 46em;
  margin-top: 1rem;
  padding-left: clamp(0.9rem, 1.6vw, 1.25rem);
  border-left: 2px solid var(--rule);
}

.lead-team {
  list-style: none; padding: 0;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.lead-team li { display: grid; justify-items: start; gap: 0.1rem; }
.lead-team img {
  width: 72px; aspect-ratio: 1; object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  margin-bottom: 0.6rem;
}
.lead-team .t-name { font-weight: 600; font-size: 0.9375rem; }
.lead-team .t-role { color: var(--gray); font-size: 0.8438rem; line-height: 1.35; }

/* The deck alternates the portrait side when a group has several featured
   people, so the page does not read as a single column of identical rows. */
.lead-feature--right { grid-template-columns: minmax(0, 1fr) clamp(150px, 17vw, 220px); }
.lead-feature--right .lead-portrait { grid-column: 2; grid-row: 1; }
.lead-feature--right .lead-body     { grid-column: 1; grid-row: 1; }

@media (max-width: 599px) {
  .lead-feature, .lead-feature--right { grid-template-columns: 110px minmax(0, 1fr); gap: 1.1rem; }
  .lead-feature--right .lead-portrait { grid-column: 1; }
  .lead-feature--right .lead-body { grid-column: 2; }
  .lead-bio { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .lead-team { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ---------- Systems & technology (capability grid) ---------- */
.capability-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.capability {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.capability h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.capability p { color: var(--gray); font-size: 1rem; max-width: 32em; }
@media (max-width: 767px) { .capability-grid { grid-template-columns: 1fr; } }

/* ---------- Careers ---------- */
.careers-intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.careers-intro img { border-top: 3px solid var(--accent); aspect-ratio: 16/10; object-fit: cover; width: 100%; height: auto; }
.careers-intro figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--gray); }
@media (max-width: 767px) { .careers-intro { grid-template-columns: 1fr; } }

.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: clamp(3rem, 6vw, 5rem); }
.tracks > article { padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem); border-left: 1px solid var(--rule); }
.tracks > article:first-child { border-left: 0; padding-left: 0; }
.tracks h3 { font-size: 1.375rem; margin-bottom: 0.65rem; }
.tracks p { color: var(--gray); font-size: 0.9875rem; }
@media (max-width: 767px) {
  .tracks { grid-template-columns: 1fr; }
  .tracks > article { border-left: 0; border-top: 1px solid var(--rule); padding-inline: 0; }
  .tracks > article:first-child { border-top: 0; }
}

.openings-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.openings-filters label { font-size: 0.875rem; font-weight: 600; color: var(--gray); display: block; margin-bottom: 0.3rem; }
.openings-filters select {
  border: 1px solid var(--rule); border-radius: 2px;
  background: #fff; color: var(--char);
  padding: 0.6rem 2.2rem 0.6rem 0.85rem;
  min-width: 180px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F1E4A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

/* One row per role. The whole row is the link — 34 repeated "Apply" anchors
   read as a spreadsheet, and a bigger target is easier to hit on a phone. The
   per-row brand chip is gone for the same reason: the property name already
   says the brand. */
.openings { border-top: 1px solid var(--rule); }
.opening { border-bottom: 1px solid var(--rule); }
.opening[hidden] { display: none; }

.opening-link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) auto;
  gap: 1rem; align-items: baseline;
  padding: 0.85rem 0.5rem 0.85rem 0;
  text-decoration: none;
  border-bottom: 0;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.opening-link:hover {
  background: rgba(30, 58, 138, 0.04);
  padding-left: 0.65rem;
}
.opening .role {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.35;
}
.opening .place, .opening .loc { color: var(--gray); font-size: 0.9125rem; }
.opening .apply-cue {
  justify-self: end;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.opening-link:hover .apply-cue,
.opening-link:focus-visible .apply-cue { opacity: 1; }

.openings-empty { padding: 2rem 0; color: var(--gray); border-bottom: 1px solid var(--rule); }

@media (hover: none) {
  /* No hover on touch, so the cue would never appear. */
  .opening .apply-cue { opacity: 1; }
}
@media (max-width: 767px) {
  .opening-link { grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding-right: 0; }
  .opening .role { grid-column: 1; }
  .opening .place, .opening .loc { grid-column: 1; }
  .opening .apply-cue { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .opening-link:hover { padding-left: 0; }
}

.careers-ctas { margin-top: 0; }
.talent-block {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.talent-intro h4 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink);
  margin-bottom: 0.5rem;
}
.talent-intro p { color: var(--gray); font-size: 0.9875rem; max-width: 26em; }
.talent-block .talent-form { margin-top: 0; }
@media (max-width: 899px) { .talent-block { grid-template-columns: 1fr; } }
.talent-form { margin-top: 1.5rem; gap: 1.25rem; }
.talent-form .optional { font-weight: 400; color: var(--gray); }
.talent-form input[type="file"] { padding: 0.65rem 1rem; font-size: 0.9375rem; }
.talent-form .btn { justify-self: start; }
.talent-form .btn[disabled] { opacity: 0.6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Partner form ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}
@media (max-width: 767px) { .partner-grid { grid-template-columns: 1fr; } }

.contact-block { margin-top: 2.5rem; }
.contact-block dt {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); margin-top: 1.5rem;
}
.contact-block dd { font-size: 1.125rem; color: var(--ink); margin-top: 0.25rem; }
.contact-block a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.contact-block a:hover { border-color: var(--ink); }

/* Company/Resources link block, sits below the Partner contact info */
.partner-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(2rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.partner-links h4 {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.partner-links ul { list-style: none; padding: 0; margin: 0; }
.partner-links li { padding: 0.35rem 0; }
.partner-links a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease);
}
.partner-links a:hover { border-color: var(--accent); }
@media (max-width: 479px) { .partner-links { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.field .hint { font-size: 0.875rem; color: var(--gray); }
.field input, .field select, .field textarea {
  border: 1px solid var(--rule); border-radius: 2px;
  background: #fff; color: var(--char);
  padding: 0.85rem 1rem;
  width: 100%;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray); }
.field textarea { min-height: 140px; resize: vertical; }
.field .error { display: none; font-size: 0.875rem; color: #8a2323; }
.field.invalid .error { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #8a2323; }
.form-status { margin-top: 1.25rem; font-weight: 600; color: var(--navy); }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(247, 244, 238, 0.85);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(247, 244, 238, 0.18);
}
/* Simplified footer (Company/Resources moved into the Partner section) */
.footer-grid.single { grid-template-columns: 1fr; }
.site-footer .brand img { width: 200px; height: auto; }
.footer-logo-plate { display: inline-block; }
.site-footer address { font-style: normal; margin-top: 1.5rem; line-height: 1.8; }
.site-footer a { color: rgba(247, 244, 238, 0.85); text-decoration: none; border-bottom: 1px solid rgba(169, 190, 220, 0.6); padding-bottom: 1px; }
.site-footer a:hover { color: #fff; border-color: var(--accent); }
.site-footer .brand { border-bottom: 0; padding-bottom: 0; }
.footer-links h4 {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.footer-links li { padding: 0.35rem 0; }
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.875rem; color: rgba(247, 244, 238, 0.6);
}
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }
  .js [data-reveal].revealed { opacity: 1; transform: none; }
}

/* ==========================================================================
   Employee portal
   ========================================================================== */
.portal-body { background: var(--paper); }
.portal-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 3px solid var(--accent);
}
.portal-header .wrap { display: flex; align-items: center; gap: 1.25rem; height: 68px; }
.portal-header .brand { background: var(--paper); padding: 0.3rem 0.6rem; border-radius: 2px; }
.portal-header .brand img { width: auto; height: 40px; }
.portal-header .brand .mark-only { display: none; width: auto; height: 34px; }
.portal-wordmark {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  padding-left: 1.25rem; border-left: 1px solid rgba(247, 244, 238, 0.25);
}
.portal-user { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.portal-user .who { text-align: right; font-size: 0.875rem; line-height: 1.35; }
.portal-user .who span { display: block; color: rgba(247, 244, 238, 0.6); }
.btn-signout {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(247, 244, 238, 0.4); border-radius: 2px;
  padding: 0.5rem 1.1rem; font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-signout:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 599px) {
  .portal-header .brand .full-logo { display: none; }
  .portal-header .brand .mark-only { display: block; }
  .portal-user .who span { display: none; }
  .portal-wordmark { letter-spacing: 0.08em; padding-left: 0.85rem; }
  .btn-signout { white-space: nowrap; }
}

/* Sign-in gate */
.gate {
  min-height: calc(100vh - 68px);
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter);
}
.gate-card {
  width: 100%; max-width: 440px;
  background: #fff;
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: 2px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.gate-card .gate-mark { width: 64px; margin: 0 auto 1.5rem; }
.gate-card h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.gate-card p { color: var(--gray); font-size: 0.9875rem; margin-bottom: 2rem; }
.gate-card .btn { width: 100%; justify-content: center; }
.gate-help { margin-top: 1.5rem; font-size: 0.875rem; }
.gate-help a { color: var(--gray); }

/* Brand-email sign-in (adds a second path below the Google button) */
.gate-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.5rem 0 1.25rem;
  color: var(--gray); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.gate-divider::before, .gate-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.gate-email-form label, .gate-code-form label {
  display: block; text-align: left;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--ink); margin-bottom: 0.4rem;
}
.gate-email-hint {
  text-align: left; font-size: 0.8125rem; color: var(--gray);
  margin: 0 0 0.75rem !important;
}
.gate-input-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
}
.gate-input-row input {
  font: inherit; font-size: 0.9375rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 2px;
  background: #fff; color: var(--ink);
  min-width: 0;
}
.gate-input-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 30, 74, 0.08);
}
.gate-input-row .btn {
  width: auto; padding: 0.65rem 1.1rem; font-size: 0.9063rem;
  white-space: nowrap;
}
.gate-code-form { margin-top: 1rem; }
.gate-code-form #gate-code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.125rem; letter-spacing: 0.25em; text-align: center;
}
.gate-code-actions {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0.9rem 0 0 !important;
  font-size: 0.8125rem;
}
.gate-code-actions .text-link {
  background: none; border: 0; padding: 0; font: inherit;
  font-size: 0.8125rem; color: var(--gray); cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.gate-code-actions .text-link:hover { color: var(--ink); border-color: var(--ink); }
.gate-status {
  margin: 0.9rem 0 0 !important; font-size: 0.875rem;
  min-height: 1.2em;
}
.gate-status.error { color: #B24A4A; }
.gate-status.ok { color: #2E7D32; }
.gate-input-row input:disabled, .gate-input-row .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Dashboard */
.portal-main { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }

/* ---------- Portal start page (signed in) ----------
   Modelled on the Island-browser homepage Marriott gives its associates.
   Everything is scoped to .home / body.is-home: these class names are generic
   and must not leak into the marketing site. */
body.is-home {
  background: var(--ink) url("/assets/properties/towneplace-mesquite-firepit.jpg") center / cover fixed no-repeat;
}
body.is-home::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,30,74,0.55) 0%, rgba(15,30,74,0.35) 45%, rgba(15,30,74,0.72) 100%);
}
body.is-home .portal-header { display: none; }
.portal-main.home { padding-block: 0; color: #fff; }
.home {
  --glass: rgba(247, 244, 238, 0.16); --glass-strong: rgba(247, 244, 238, 0.9);
  --glass-line: rgba(255, 255, 255, 0.28);
}
.home-shell { max-width: 1440px; margin: 0 auto; padding: 28px var(--gutter) 56px; }

.home-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.home-search { width: 100%; min-width: 0; max-width: 720px; justify-self: center; }
.home-search input { min-width: 0; }
.home-clock { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; font-size: 30px; }
.home-clock .time { font-weight: 500; }
.home-clock .date { opacity: 0.8; }
.home-id { justify-self: end; display: flex; align-items: center; gap: 20px; }
.home-logo { display: block; width: 138px; }
.home-logo img { width: 100%; display: block; }
@media (max-width: 599px) { .home-logo { display: none; } }
.home .portal-user { margin: 0; gap: 16px; white-space: nowrap; }
.home .portal-user .who span { display: none; }
.home .portal-user .btn-signout { white-space: nowrap; }
.home .portal-user .who { color: #fff; }
.home .portal-user .text-link { color: #fff; }

.home-search { position: relative; }
.home-search input {
  width: 100%; height: 50px; border-radius: 999px; border: 1px solid var(--glass-line);
  background: var(--glass-strong); color: var(--ink); font: 400 17px var(--sans);
  padding: 0 96px 0 50px; outline: none; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.home-search input:focus { border-color: #fff; background: #fff; }
.home-search .lens { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink); opacity: 0.6; }
.home-search kbd {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font: 500 12px var(--sans); color: var(--ink); background: rgba(15,30,74,0.08); border-radius: 6px; padding: 4px 8px;
}
.home-results {
  position: absolute; left: 0; right: 0; top: 58px; z-index: 20;
  background: #fff; color: var(--ink); border-radius: 16px; overflow-y: auto; max-height: 60vh;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}
.home-results[hidden] { display: none; }
.home-results h4 { margin: 0; padding: 12px 18px 6px; font: 600 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.home-results a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; text-decoration: none; color: var(--ink); }
.home-results a .meta { color: var(--gray); font-size: 14px; }
.home-results a.active, .home-results a:hover { background: #EEF1F7; }
.home-results .none { padding: 16px 18px; color: var(--gray); }

.home-greet { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 48px); font-weight: 500; color: #fff; margin: 26px 0 22px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
@media (max-width: 1000px) {
  .home-grid, .home-top { grid-template-columns: minmax(0, 1fr); }
  .home-id { justify-self: stretch; justify-content: space-between; }
  .home-clock { font-size: 24px; }
}

.home-news { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.home-card {
  background: var(--glass-strong); color: var(--ink); border-radius: 22px; overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); transition: transform .2s var(--ease);
}
.home-card:hover { transform: translateY(-3px); }
.home-card.feature { grid-column: 1 / -1; flex-direction: row; min-height: 280px; }
.home-card img { display: block; width: 100%; height: 170px; object-fit: cover; }
.home-card.feature img { width: 48%; height: auto; }
.home-card .body { padding: 18px 20px 22px; }
.home-card time { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.home-card h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; margin: 6px 0 8px; color: var(--ink); font-size-adjust: none; }
.home-card.feature h3 { font-size: 34px; }
.home-card p { margin: 0; font-size: 15px; line-height: 1.5; color: #333; }
.home-center { text-align: center; }
.home-pill {
  display: inline-block; margin-top: 20px; padding: 10px 18px; border-radius: 999px;
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
}
@media (max-width: 640px) {
  .home-news { grid-template-columns: 1fr; }
  .home-card.feature { flex-direction: column; }
  .home-card.feature img { width: 100%; height: 200px; }
}

.home-glass {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 24px;
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
.home-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); margin-bottom: 18px; }
.home-tabs button { border: 0; background: transparent; color: #fff; font: 500 15px var(--sans); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.home-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.home-panel { padding: 20px 24px 24px; margin-bottom: 22px; }
.home-panel summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.home-panel summary::-webkit-details-marker { display: none; }
.home-panel .chev { transition: transform .2s; opacity: 0.8; }
.home-panel:not([open]) .chev { transform: rotate(-90deg); }
.home-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; margin-top: 18px; }
.home-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.home-app > a { display: contents; color: #fff; text-decoration: none; }
.home-app .icon {
  width: 76px; height: 76px; border-radius: 20px; background: #fff; color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: transform .15s var(--ease);
}
.home-app .icon img { width: 48px; height: 48px; object-fit: contain; display: block; }
.home-app .icon svg { width: 34px; height: 34px; }
.home-app:hover .icon { transform: translateY(-3px); }
.home-app .name { font-size: 14px; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.home-app .sub { font-size: 12px; opacity: 0.75; margin-top: -6px; }
.home-pin {
  position: absolute; top: -6px; right: calc(50% - 46px); width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: #fff; color: var(--accent); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); opacity: 0; transition: opacity .15s;
}
.home-app:hover .home-pin, .home-app:focus-within .home-pin, .home-pin[aria-pressed="true"] { opacity: 1; }
.home-pin[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (hover: none) { .home-pin { opacity: 1; } }
.home-add .icon { background: rgba(255,255,255,0.22); color: #fff; box-shadow: none; border: 1px dashed rgba(255,255,255,0.6); cursor: pointer; }
.home-empty { margin: 14px 0 0; opacity: 0.85; font-size: 15px; }

.home-picker { border: 0; border-radius: 20px; padding: 0; width: min(520px, 92vw); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.home-picker::backdrop { background: rgba(15,30,74,0.45); }
.home-picker header { padding: 20px 24px 8px; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.home-picker ul { list-style: none; margin: 0; padding: 4px 12px 8px; }
.home-picker label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.home-picker label:hover { background: #EEF1F7; }
.home-picker small { color: var(--gray); }
.home-picker footer { padding: 10px 24px 20px; text-align: right; }
.home-picker footer button { border: 0; background: var(--navy); color: #fff; font: 500 15px var(--sans); padding: 10px 20px; border-radius: 999px; cursor: pointer; }

/* Below the start page: the full announcements list, documents and support,
   on a paper sheet so the existing list styles read as they always have. */
.home-lower {
  background: var(--paper); color: var(--char);
  border-radius: 28px 28px 0 0; padding-block: clamp(2.5rem, 5vw, 4rem);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
.home-lower .docs-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ann-section .announcement { scroll-margin-top: 1rem; }
.welcome-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem;
  padding-bottom: 1.75rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.welcome-banner h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.welcome-banner p { color: var(--gray); }

.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 1023px) { .portal-grid { grid-template-columns: 1fr; } }

.portal-section-title {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1rem;
}

.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile {
  background: #fff;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.4rem 1.25rem;
  text-decoration: none; color: var(--char);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.tile:hover { border-color: var(--navy); }
.tile:active { transform: translateY(1px); }
.tile svg { color: var(--navy); }
.tile .tile-name { font-weight: 600; font-size: 0.9875rem; color: var(--ink); line-height: 1.3; }
.tile .tile-desc { font-size: 0.8438rem; color: var(--gray); line-height: 1.4; }
@media (max-width: 1279px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .tile-grid { grid-template-columns: 1fr; } }

.announcements { background: #fff; border: 1px solid var(--rule); border-radius: 2px; }
.announcement { padding: 1.25rem 1.4rem; border-top: 1px solid var(--rule); }
.announcement:first-of-type { border-top: 0; }
.announcement time { font-size: 0.8125rem; color: var(--gray); }
.announcement h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; color: var(--ink); margin: 0.25rem 0 0.35rem; }
.announcement p { font-size: 0.9063rem; color: var(--gray); }

.docs-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.doc-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.doc-list { border-top: 2px solid var(--ink); }
.doc-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) auto;
  gap: 1rem; align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.doc-row[hidden] { display: none; }
.doc-row .doc-name { font-weight: 500; color: var(--ink); }
.doc-row .doc-cat { font-size: 0.875rem; color: var(--gray); }
.doc-row a { font-size: 0.9063rem; }
.doc-row .doc-soon { font-size: 0.875rem; color: var(--gray); font-style: italic; }
@media (max-width: 599px) {
  .doc-row { grid-template-columns: 1fr auto; }
  .doc-row .doc-cat { grid-column: 1; }
  .doc-row a { grid-row: 1; grid-column: 2; }
}

.support-block {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.support-card { background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: 1.4rem; }
.support-card h3 { font-size: 1rem; font-family: var(--sans); font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.support-card p { font-size: 0.9063rem; color: var(--gray); }
.support-card a { color: var(--navy); font-weight: 600; text-decoration: none; }
.support-card a:hover { text-decoration: underline; }
@media (max-width: 767px) { .support-block { grid-template-columns: 1fr; } }

/* ---------- Mixed-use band (deck slide 25 copy; real Owensboro photography) ---------- */
.mixeduse {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(5rem, 12vw, 10rem);
  border-top: 1px solid var(--rule);
}
.mixeduse-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.mixeduse::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 20, 53, 0.95) 0%, rgba(10, 20, 53, 0.82) 46%, rgba(10, 20, 53, 0.42) 100%);
}
.mixeduse .wrap { position: relative; z-index: 2; }
.mixeduse-content { max-width: 36em; }
.mixeduse h2 { color: var(--paper); }
.mixeduse .lede { color: rgba(247, 244, 238, 0.82); margin-top: 1.25rem; }
.mixeduse .btn { margin-top: 2.25rem; }

/* ---------- Culture strip (associate photography, deck slides 34-37) ---------- */
.culture-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.culture-strip figure:nth-of-type(1) { grid-column: span 4; }
.culture-strip figure:nth-of-type(2) { grid-column: span 3; }
.culture-strip figure:nth-of-type(3) { grid-column: span 3; }
.culture-strip .culture-note { grid-column: span 2; align-self: end; }
.culture-strip img {
  width: 100%; height: auto;
  object-fit: cover;
  border-top: 3px solid var(--accent);
}
.culture-strip figure:nth-of-type(1) img { aspect-ratio: 1 / 1; }
.culture-strip figure:nth-of-type(2) img { aspect-ratio: 4 / 5; }
.culture-strip figure:nth-of-type(3) img { aspect-ratio: 1 / 1; }
.culture-strip figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--gray); }
.culture-strip .culture-note p { font-size: 0.9875rem; color: var(--gray); }
.culture-strip .culture-note strong { color: var(--ink); }
@media (max-width: 899px) {
  .culture-strip { grid-template-columns: 1fr 1fr; }
  .culture-strip figure:nth-of-type(1),
  .culture-strip figure:nth-of-type(2),
  .culture-strip figure:nth-of-type(3),
  .culture-strip .culture-note { grid-column: span 1; }
}

/* ---------- Employee Portal band ---------- */
.portal-band {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--section-y);
}
.portal-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.portal-band h2 { color: var(--paper); }
.portal-band .lede { color: rgba(247, 244, 238, 0.78); margin-top: 1.25rem; }
.portal-tools {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0; margin: 2rem 0 0;
}
.portal-tools li {
  font-size: 0.875rem; font-weight: 500;
  color: rgba(247, 244, 238, 0.85);
  border: 1px solid rgba(247, 244, 238, 0.3);
  border-radius: 2px;
  padding: 0.45rem 0.9rem;
}
.portal-band-ctas { margin-top: 2.25rem; }
.portal-band-help {
  margin-top: 1rem;
  font-size: 0.9063rem;
  color: rgba(247, 244, 238, 0.6);
}
.portal-band-help a { color: rgba(247, 244, 238, 0.85); }
.portal-band-grid figure { margin: 0; max-width: 500px; justify-self: end; }
.portal-band-grid figure img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-top: 3px solid var(--accent);
}
.portal-band-caption { margin-top: 0.6rem; font-size: 0.875rem; color: rgba(247, 244, 238, 0.6); }
@media (max-width: 899px) {
  .portal-band-grid { grid-template-columns: 1fr; }
  .portal-band-grid figure { max-width: 560px; }
}

/* ---------- Mission, Vision & Values ---------- */
.mvv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.mvv-card {
  padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  border-left: 1px solid var(--rule);
  position: relative;
}
.mvv-card:first-child { border-left: 0; padding-left: 0; }
.mvv-card:last-child { padding-right: 0; }
.mvv-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 42px; height: 2px;
  background: var(--accent);
}
.mvv-card:first-child::before { left: 0; }
.mvv-card h3 {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--sans);
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.mvv-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
}
.mvv-lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  color: var(--ink);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.mvv-values-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.25rem, 2vw, 2rem);
  row-gap: 0.75rem;
}
.mvv-values-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9875rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.mvv-values-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
/* Personal passion & commitment is the longest — let it flow across both columns */
.mvv-values-list li:last-child { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .mvv-values-list { grid-template-columns: 1fr; }
  .mvv-values-list li:last-child { grid-column: auto; }
}
@media (max-width: 899px) {
  .mvv-grid { grid-template-columns: 1fr; }
  .mvv-card { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--rule); }
  .mvv-card:first-child { border-top: 0; }
}

/* ---------- Balanced Scorecard: dashboard mockups ---------- */
/* Mac-style monitor frame */
.mac-monitor { margin: 0; text-align: center; }
.monitor-body {
  background: #E8E8EA; /* aluminum */
  border-radius: 14px;
  padding: 8px;
  box-shadow:
    0 22px 40px -20px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  position: relative;
}
.monitor-body::before {
  /* iMac-style camera notch */
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #444;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}
.monitor-topbar {
  background: #F2F2F4;
  border-radius: 8px 8px 0 0;
  padding: 6px 10px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.monitor-topbar .tls { display: inline-flex; gap: 5px; }
.monitor-topbar .tls i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #FF605C;
}
.monitor-topbar .tls i:nth-child(2) { background: #FFBD44; }
.monitor-topbar .tls i:nth-child(3) { background: #00CA4E; }
.monitor-topbar .tlt {
  font-size: 0.6875rem; font-weight: 500;
  color: #6B6B70;
  letter-spacing: 0.02em;
}
.monitor-screen {
  background: #FBFAF7;
  border-radius: 0 0 8px 8px;
  height: clamp(240px, 22vw, 320px);
  overflow: hidden;
  position: relative;
  color: var(--char);
  text-align: left;
}
.monitor-screen::after {
  /* screen highlight */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 12%);
  pointer-events: none;
}

/* Scroll track (vertical marquee) */
.scroll-track {
  animation: dashScroll 44s linear infinite;
  will-change: transform;
}
@keyframes dashScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); } /* half = one copy, so wrap is seamless */
}
@media (prefers-reduced-motion: reduce) {
  .scroll-track { animation: none; }
}

/* Dashboard content (inside the screen) */
.dash { padding: 14px 16px 18px; border-bottom: 1px solid rgba(15,30,74,0.05); }
.dash-h {
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.kpi {
  background: #fff;
  border: 1px solid rgba(15,30,74,0.08);
  border-radius: 4px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-l { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.kpi-v { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); line-height: 1.1; font-weight: 600; }
.kpi-v em { font-size: 0.75rem; font-style: normal; color: var(--gray); margin-left: 1px; }
.kpi-d { font-size: 0.625rem; font-weight: 600; color: var(--accent); }
.kpi-d.up { color: #2E7D32; }
.dash-block { margin-bottom: 16px; }
.dash-block:last-child { margin-bottom: 0; }
.dash-l {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 8px;
}
.dash-chart {
  width: 100%; height: 74px;
  background: #fff;
  border: 1px solid rgba(15,30,74,0.06);
  border-radius: 4px;
  padding: 6px;
  overflow: visible;
}
.dash-chart.tall { height: 92px; }
.chart-x {
  display: flex; justify-content: space-between;
  padding: 6px 6px 0;
  font-size: 0.5625rem; color: var(--gray); letter-spacing: 0.02em;
}
.dash-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 8px;
  font-size: 0.75rem;
  color: var(--char);
  border-bottom: 1px solid rgba(15,30,74,0.05);
  background: #fff;
}
.dash-row:first-of-type { border-radius: 4px 4px 0 0; border-top: 1px solid rgba(15,30,74,0.08); }
.dash-row:last-of-type { border-radius: 0 0 4px 4px; border-bottom-color: rgba(15,30,74,0.08); }
.dash-num { font-family: var(--serif); font-size: 0.8125rem; color: var(--ink); font-weight: 600; }
.dash-num.up { color: #2E7D32; }
.dash-num.down { color: #B24A4A; }
.bars { background: #fff; border: 1px solid rgba(15,30,74,0.08); border-radius: 4px; padding: 8px 10px; }
.bar-row { display: grid; grid-template-columns: 60px 1fr 34px; align-items: center; gap: 8px; padding: 4px 0; }
.bar-l { font-size: 0.6875rem; color: var(--gray); }
.bar { display: block; height: 5px; background: rgba(15,30,74,0.08); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar-v { font-size: 0.6875rem; color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: lining-nums tabular-nums; }

/* Monitor neck + base */
.monitor-neck {
  width: 60px; height: 22px;
  background: linear-gradient(180deg, #D8D8DA 0%, #B8B8BC 100%);
  margin: -2px auto 0;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}
.monitor-base {
  width: 160px; height: 6px;
  background: linear-gradient(180deg, #C8C8CC 0%, #A6A6AA 100%);
  border-radius: 3px;
  margin: 0 auto;
  box-shadow: 0 8px 14px -6px rgba(0,0,0,0.4);
}
.mac-monitor figcaption {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(247, 244, 238, 0.68);
  max-width: 30em;
  margin-inline: auto;
}

/* ---------- Culture & Diversity ---------- */
.culture-section { background: var(--ink); color: var(--paper); }
.culture-section h2, .culture-section h3, .culture-section h4 { color: var(--paper); }
.culture-section .lede { color: rgba(247, 244, 238, 0.9); }
.culture-section p { color: rgba(247, 244, 238, 0.78); }
.culture-section strong { color: var(--paper); }

.culture-lead {
  max-width: 48em;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.culture-lead p + p { margin-top: 1.25rem; }
.culture-lead .display-md { margin-bottom: 1.25rem; }
.culture-diversity {
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid rgba(247, 244, 238, 0.18);
}
.culture-gallery:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.culture-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(247, 244, 238, 0.18);
}
.culture-gallery figure { margin: 0; }
.culture-gallery img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-top: 3px solid var(--accent);
}
.culture-gallery figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: rgba(247, 244, 238, 0.6);
}
@media (max-width: 767px) { .culture-gallery { grid-template-columns: 1fr; } }

.committee-block {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.committee-block .display-md { margin-bottom: 1.25rem; }
/* Single-column variant when the champions list is not rendered */
.committee-block--single {
  display: block;
  max-width: 44em;
}
.champions h4 {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.champions-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(247, 244, 238, 0.22);
}
.champions-grid li {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(247, 244, 238, 0.15);
  display: flex; flex-direction: column;
  gap: 0.15rem;
}
.champions-grid li:nth-child(odd) { padding-right: 1.5rem; }
.champions-grid li:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid rgba(247, 244, 238, 0.15); }
.champ-name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--paper);
  line-height: 1.3;
}
.champ-loc {
  font-size: 0.875rem;
  color: rgba(247, 244, 238, 0.6);
}
@media (max-width: 899px) { .committee-block { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .champions-grid { grid-template-columns: 1fr; }
  .champions-grid li:nth-child(odd), .champions-grid li:nth-child(even) {
    padding-inline: 0; border-left: 0;
  }
}

/* ---------- Marquee (auto-scroll containers) ---------- */
.prop-gallery-scroller.marquee {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem); /* must match .prop-gallery gap; main.js reads it for the loop length */
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.timeline-scroller.marquee {
  display: flex;
  gap: 0; /* the milestone padding provides visual spacing; keep the border-top continuous */
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.timeline-scroller.marquee .timeline { flex-shrink: 0; }

/* ---------- Brand partner strip (logos from deck slide 20) ---------- */
.brand-strip {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.brand-strip-label {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}
.brand-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin: 0; padding: 0;
  flex: 1;
}
.brand-logos img {
  width: clamp(110px, 13vw, 170px);
  height: auto;
  display: block;
  filter: grayscale(1) opacity(0.72);
  transition: filter 0.25s var(--ease);
}
.brand-logos li:hover img, .brand-logos li:focus-within img { filter: none; }
@media (max-width: 767px) {
  .brand-strip { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .brand-logos { justify-content: flex-start; }
}

/* ---------- State tiles ----------
   Replaces the pinned national map. Each state is drawn from its own path in
   assets/map/us-states.svg, with the viewBox set to that path's bounding box so
   every state fills its tile evenly rather than Texas dwarfing Indiana. The
   operating tiles expand to the properties, so the booking links the pins
   carried are still reachable. */
.state-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Fixed column count rather than auto-fit: eight states want two even rows of
   four, and auto-fit gave 7 + 1. */
.state-grid--operating { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .state-grid--operating { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px)  { .state-grid--operating { grid-template-columns: repeat(2, 1fr); } }

.state-tile {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.state-tile > summary {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  text-align: center;
}
.state-tile > summary { cursor: pointer; list-style: none; }
.state-tile > summary::-webkit-details-marker { display: none; }

.state-shape {
  width: 100%;
  height: clamp(76px, 9vw, 116px);
  margin-bottom: 0.75rem;
  fill: var(--navy);
  transform: rotate(var(--tilt, 0deg));
  transition: fill 0.25s var(--ease), transform 0.35s var(--ease);
}
.on-dark .state-shape { fill: var(--accent); }
.state-tile > summary:hover .state-shape { fill: var(--ink); transform: rotate(0deg) scale(1.04); }

.state-name {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  color: var(--ink);
  line-height: 1.15;
}
.state-count {
  font-size: 0.8438rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* Expanded property list. Sits under its own tile in the grid. */
.state-hotels {
  list-style: none; padding: 0;
  margin-top: 1rem;
  display: grid;
  text-align: left;
}
/* The rule separates one hotel (name + city) from the next — it sits under the
   whole entry, never between a hotel's name and its own city. */
.state-hotels li {
  display: grid; gap: 0.15rem; font-size: 0.9375rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.state-hotels li:first-child { padding-top: 0; }
.state-hotels li:last-child { border-bottom: 0; }
.state-hotels a { color: var(--ink); text-decoration: none; }
.state-hotels a:hover, .state-hotels a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.state-where { color: var(--gray); font-size: 0.8125rem; }

/* A hint that the tile opens, without adding a second control to read. */
.state-tile > summary .state-count::after {
  content: " \2193";
  opacity: 0.55;
}
.state-tile[open] > summary .state-count::after { content: " \2191"; }

@media (prefers-reduced-motion: reduce) {
  .state-shape { transition: none; }
  .state-tile > summary:hover .state-shape { transform: rotate(var(--tilt, 0deg)); }
}

/* ---------- Footer admin link ---------- */
.admin-link { color: inherit; opacity: 0.75; }
.admin-link:hover { opacity: 1; }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-nav, .hero-ctas, .filters, .openings-filters, .nav-toggle { display: none !important; }
  body { background: #fff; }
}

/* ---------- /careers/ job boards ----------
   Paylocity hosts one board per company entity, so this page is a directory of
   boards rather than a list of roles. Cards are plain anchors: the destination
   is another site, and the whole card is the target. */
.jobs-intro .display-lg { margin-top: 0.5rem; }

.job-group { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.job-group-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.job-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}

.job-board {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.job-board:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 30, 74, 0.08);
}
.job-board-name { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.job-board-loc { color: var(--gray); font-size: 0.9375rem; }
.job-board-cue {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.jobs-note {
  margin-top: 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  color: var(--gray);
  max-width: 44em;
}

@media (prefers-reduced-motion: reduce) {
  .job-board { transition: none; }
  .job-board:hover { transform: none; }
}

/* ---------- "Site by SHAI Companies" credit ----------
   Takes the full width of .footer-meta so it drops onto its own line below the
   copyright row rather than crowding it. Deliberately quiet: it is an
   attribution, not a promotion, so it sits dimmer than the text above it and
   only comes up to full strength on hover. */
.built-by {
  flex-basis: 100%;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 244, 238, 0.09);
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.built-by a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 0.52 alpha is 4.88:1 on --ink, clearing AA for this 13px text. Anything
     dimmer looks better but stops being readable — 0.45 measures 4.00:1. */
  color: rgba(247, 244, 238, 0.52);
  text-decoration: none;
  /* .site-footer a underlines every footer link. That reads as a call to
     action; this is a credit, so the rule only appears on hover. */
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.built-by a:hover {
  color: rgba(247, 244, 238, 0.9);
  border-bottom-color: rgba(247, 244, 238, 0.3);
}
.built-by strong { font-weight: 600; }
.built-by img {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.built-by a:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .built-by a, .built-by img { transition: none; }
}


/* ---------- Openings: homepage teaser vs the full /careers/ list ----------
   The homepage shows only the newest few. Rendering all 34 made Careers the
   tallest section on the page — taller than Leadership — which is the wrong
   weight for one section of a single-page narrative. */
.openings-summary {
  margin-bottom: 1.25rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
}
.openings-updated {
  font-weight: 400;
  color: var(--gray);
  font-size: 0.875rem;
}

/* Homepage: one link per state with openings, each jumping to that state on /careers/ */
.state-links {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.75rem;
}
.state-link {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule); border-radius: 2px;
  background: #fff;
  color: var(--ink); text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.state-link-name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.state-link-count { font-size: 0.875rem; color: var(--gray); }
.state-link-count::after { content: " \2192"; color: var(--accent); }
.state-link:hover, .state-link:focus-visible { border-color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .state-link:hover { transform: translateY(-2px); }
}

/* Only screen readers need the full "Apply for X at Y" phrasing; sighted users
   have the role and property right there in the row. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* /careers/ — roles grouped by state */
.job-state-group { margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.job-state-group[hidden] { display: none; }
.job-group-count {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gray);
  margin-left: 0.5rem;
  vertical-align: 0.15em;
}

/* The board directory, now secondary to the roles above it */
.jobs-boards-block {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.jobs-boards-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.jobs-boards-intro {
  color: var(--gray);
  max-width: 46em;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .opening-link, .opening .apply-cue { transition: none; }
  .opening-link:hover { padding-left: 0; }
}

/* ---------- Long-form pages (privacy, accessibility) ---------- */
.legal { max-width: 44em; margin-top: 1.5rem; }
.legal .legal-date { font-size: 0.875rem; color: var(--gray); margin-bottom: 1.25rem; }
.legal .lede { margin-bottom: 1.5rem; }
.legal h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin: 2.25rem 0 0.75rem; }
.legal p + p { margin-top: 0.9rem; }
.legal ul { padding-left: 1.25rem; margin: 0.75rem 0 0; }
.legal li { margin-bottom: 0.6rem; line-height: 1.6; }
.legal address { font-style: normal; line-height: 1.8; margin-top: 0.75rem; }
/* Standalone pages (privacy, accessibility, sitemap) carry one Contact button
   instead of the full site nav, whose mobile menu styles do not apply here. */
.site-header .wrap:has(.page-contact) { display: flex; align-items: center; justify-content: space-between; }
.page-contact { padding: 0.65rem 1.4rem; font-size: 0.9375rem; }