/* ============================================================
   Website UI Kit — local styles
   Builds on ../../colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); }

/* ── Header ─────────────────────────────────────────────────── */
.la-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.la-header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 32px;
}
.la-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--fg-1); text-decoration: none;
}
.la-brand:hover { color: var(--fg-1); }
.la-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.la-nav-item { position: relative; }
.la-nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500; color: var(--fg-2);
  padding: 22px 14px; text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}
.la-nav-link:hover { color: var(--fg-1); text-decoration: none; }
.la-nav-link.is-active { color: var(--fg-1); position: relative; }
.la-nav-link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--la-amber-600);
}
.la-caret { font-size: 9px; color: var(--fg-3); }

.la-nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--rule-soft); border-radius: 6px;
  box-shadow: var(--shadow-2);
  padding: 6px 0; z-index: 60;
}
.la-nav-menu-item {
  display: block; padding: 10px 16px; font-size: 14px; color: var(--fg-1);
  text-decoration: none;
}
.la-nav-menu-item:hover { background: var(--la-paper-100); color: var(--fg-1); text-decoration: none; }
.la-nav-menu-item.is-active { color: var(--la-amber-700); }

/* ── Hero ───────────────────────────────────────────────────── */
.la-hero { padding: 64px 32px 72px; }
.la-hero-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 64px; align-items: center;
}
.la-display {
  font-family: var(--font-display); font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1.02; letter-spacing: -0.025em; font-weight: 600;
  margin: 14px 0 18px; color: var(--fg-1);
}
.la-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 6px;
}
.la-eyebrow.la-eyebrow--onDark, .la-band--ink .la-eyebrow { color: var(--la-amber-500); }
.la-amber-rule { height: 2px; background: var(--la-amber-600); margin: 0 0 24px; }
.la-lede {
  font-family: var(--font-sans); font-size: 21px; line-height: 1.5;
  color: var(--fg-1); margin: 0 0 28px; max-width: 56ch;
  font-weight: 350;
}
.la-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Buttons ────────────────────────────────────────────────── */
.la-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.la-btn--primary { background: var(--la-ink-800); color: var(--fg-on-dark); }
.la-btn--primary:hover { background: var(--la-ink-700); color: var(--fg-on-dark); text-decoration: none; }
.la-btn--secondary { background: #fff; color: var(--fg-1); border-color: var(--la-ink-800); }
.la-btn--secondary:hover { background: var(--la-paper-100); color: var(--fg-1); text-decoration: none; }
.la-btn--accent { background: var(--la-amber-600); color: #fff; }
.la-btn--accent:hover { background: var(--la-amber-700); color: #fff; }
.la-btn--ghost { background: transparent; color: var(--fg-1); }
.la-btn--ghost:hover { background: var(--la-paper-100); color: var(--fg-1); }

/* ── Sections / bands ───────────────────────────────────────── */
.la-section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.la-section--quote { text-align: center; max-width: 920px; padding: 64px 32px; }
.la-section-head { max-width: 720px; margin: 0 0 44px; }
.la-section-head .la-amber-rule { width: 56px; }
.la-h {
  font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.018em;
  font-size: clamp(32px, 3.4vw, 44px); color: var(--fg-1); margin: 6px 0 16px;
}
.la-h--display { font-size: clamp(48px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.018em; }
.la-h--onDark { color: var(--fg-on-dark); }
.la-h-side {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}

.la-band { padding: 56px 32px; }
.la-band--cream { background: var(--la-paper-100); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.la-band--paper { background: var(--la-paper-100); }
.la-band--ink { background: var(--la-ink-800); color: var(--fg-on-dark); }
.la-band--ink .la-prose, .la-band--ink p { color: var(--fg-on-dark-2); }
.la-band-inner { max-width: 1200px; margin: 0 auto; }

/* ── Stats ──────────────────────────────────────────────────── */
.la-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.la-stat { padding-left: 14px; border-left: 2px solid var(--la-amber-600); }
.la-stat-value { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--fg-1); letter-spacing: -0.02em; }
.la-stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin-top: 6px; }

/* ── Service tiles ──────────────────────────────────────────── */
.la-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.la-service {
  display: block; padding: 28px 28px 26px; text-decoration: none;
  background: #fff; border-radius: 8px;
  border-top: 2px solid var(--la-ink-800);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.la-service:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; }
.la-service-icon { color: var(--la-amber-700); margin-bottom: 14px; }
.la-service-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--fg-1); margin: 0 0 8px; line-height: 1.18; letter-spacing: -0.012em; }
.la-service-body { font-size: 15px; color: var(--fg-2); line-height: 1.5; margin: 0 0 18px; }
.la-service-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--la-amber-700); }

/* ── Pull quote section ─────────────────────────────────────── */
.la-blockquote {
  font-family: var(--font-sans); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.22; color: var(--fg-1);
  margin: 0 auto 12px; max-width: 820px;
}
.la-blockquote-cite { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

/* ── Belief band ────────────────────────────────────────────── */
.la-belief .la-h { max-width: 880px; }
.la-belief-body { font-family: var(--font-sans); font-size: 18px; font-weight: 350; line-height: 1.55; max-width: 760px; }

/* ── 3-up grid for cards ─────────────────────────────────────── */
.la-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ── Listing card ───────────────────────────────────────────── */
.la-card {
  background: #fff; border-radius: 8px; padding: 24px;
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.la-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.la-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--fg-1); margin: 4px 0 8px; line-height: 1.22; letter-spacing: -0.01em; }
.la-card-body { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0 0 14px; }
.la-card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

/* ── Tags ───────────────────────────────────────────────────── */
.la-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
}
.la-tag--neutral { background: var(--la-paper-100); color: var(--fg-2); }
.la-tag--ink { background: var(--la-ink-800); color: var(--fg-on-dark); }
.la-tag--amber { background: var(--la-amber-100); color: var(--la-amber-700); }
.la-tag--success { background: #E5F2EB; color: #1F5A3A; }
.la-tag--info { background: #E2EDF8; color: #1E4F84; }

/* ── Client chips ───────────────────────────────────────────── */
.la-client-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 14px; align-items: center; }
.la-client-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg-1);
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 16px; min-width: 84px; justify-content: center;
}
.la-client-logo {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 76px; min-width: 124px; max-width: 200px;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 16px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.la-client-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.la-client-logo:hover { border-color: var(--la-amber-600); transform: translateY(-1px); }
@media (max-width: 720px) {
  .la-client-logo { height: 64px; min-width: 104px; max-width: 160px; padding: 8px 12px; }
}

/* ── Client marquee (auto-scrolling logo carousel) ──────────── */
.la-client-marquee {
  overflow: hidden;
  position: relative;
  margin: 22px 0 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.la-client-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: la-marquee 80s linear infinite;
  will-change: transform;
}
.la-client-marquee:hover .la-client-marquee-track { animation-play-state: paused; }
.la-client-marquee.is-paused .la-client-marquee-track { animation-play-state: paused; }
.la-client-marquee .la-client-logo { flex: 0 0 auto; }

/* Pause/play control for the marquee (WCAG 2.2.2 - keyboard-reachable) */
.la-marquee-toggle {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 14px;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.la-marquee-toggle:hover { border-color: var(--la-ink-600); color: var(--fg-1); }
@keyframes la-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .la-client-marquee {
    -webkit-mask-image: none; mask-image: none;
  }
  .la-client-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  /* Nothing is moving, so the pause control is meaningless noise */
  .la-marquee-toggle { display: none; }
}
@media (max-width: 720px) {
  .la-client-marquee-track { animation-duration: 60s; }
  .la-client-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}
.la-band-foot { font-family: var(--font-mono); font-size: 11px; color: var(--la-amber-700); margin-top: 14px; }
.la-band-foot code { background: rgba(199, 122, 20, 0.12); padding: 1px 4px; border-radius: 2px; }

/* ── Photo placeholder ──────────────────────────────────────── */
.la-photo {
  width: 100%; border-radius: 8px;
  display: flex; align-items: flex-end; padding: 18px;
  position: relative; overflow: hidden;
}
.la-photo--navy { background: linear-gradient(180deg, #1F3450 0%, #0E1E2E 100%); color: var(--fg-on-dark-2); }
.la-photo-label { font-size: 12px; font-family: var(--font-mono); opacity: 0.75; }

/* ── Page heads ─────────────────────────────────────────────── */
.la-page-head { padding: 64px 32px 32px; border-bottom: 1px solid var(--rule-soft); }
.la-page-head-inner { max-width: 1200px; margin: 0 auto; }

/* ── Detail grid (used on service / about pages) ────────────── */
.la-detail-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 56px;
  padding: 32px 0; border-bottom: 1px solid var(--rule-soft);
}
.la-detail-grid:last-of-type { border-bottom: 0; }
.la-detail-side { padding-top: 4px; }
.la-detail-list { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.la-detail-item { padding-left: 0; }
.la-detail-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--fg-1); margin: 0 0 6px; line-height: 1.22; letter-spacing: -0.01em; }
.la-detail-body { font-size: 15px; color: var(--fg-2); line-height: 1.55; margin: 0; }
.la-prose { font-size: 16px; color: var(--fg-1); line-height: 1.6; margin: 0 0 16px; max-width: 64ch; }
.la-prose:last-child { margin-bottom: 0; }
.la-detail-cta {
  margin-top: 48px; padding: 32px; background: var(--la-paper-100);
  border-radius: 8px; max-width: 720px; margin-left: auto; margin-right: auto;
}

/* ── Openings list ──────────────────────────────────────────── */
.la-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 0 24px; margin-bottom: 16px; border-bottom: 1px solid var(--rule-soft);
}
.la-filter-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-right: 6px; }
.la-filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg-2);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
}
.la-filter-chip:hover { border-color: var(--la-ink-600); color: var(--fg-1); }
.la-filter-chip.is-active { background: var(--la-ink-800); color: var(--fg-on-dark); border-color: var(--la-ink-800); }
.la-filter-count { font-size: 11px; opacity: 0.7; }
.la-filter-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

.la-openings-list { display: flex; flex-direction: column; }
.la-opening {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: var(--fg-1);
  transition: padding var(--dur-1) var(--ease-standard);
}
.la-opening:hover { padding-left: 8px; text-decoration: none; }
.la-opening-org { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--la-amber-700); }
.la-opening-role { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 4px 0 10px; line-height: 1.18; letter-spacing: -0.012em; }
.la-opening-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--fg-2); flex-wrap: wrap; }
.la-opening-aside { text-align: right; }
.la-opening-posted { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.la-opening-date { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg-1); margin-top: 2px; }

.la-mailing-cta {
  margin-top: 56px; padding: 36px; background: var(--la-ink-800); border-radius: 8px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px;
}
.la-mailing-cta .la-h { color: var(--fg-on-dark); margin: 0 0 4px; font-size: 28px; }
.la-mailing-cta .la-lede { color: var(--fg-on-dark-2); margin: 0; font-size: 16px; max-width: 60ch; }
.la-mailing-cta .la-btn--primary { background: var(--la-amber-600); }
.la-mailing-cta .la-btn--primary:hover { background: var(--la-amber-700); }

/* ── Contact form ───────────────────────────────────────────── */
.la-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.la-form { display: flex; flex-direction: column; gap: 18px; background: #fff; padding: 28px; border-radius: 8px; box-shadow: var(--shadow-1); }
.la-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.la-field { display: flex; flex-direction: column; gap: 6px; }
.la-field label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.la-field input, .la-field select, .la-field textarea {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-1); background: #fff;
  border: 1px solid var(--la-slate-300); border-radius: 4px; padding: 10px 12px; outline: none;
  transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
}
.la-field input:focus, .la-field select:focus, .la-field textarea:focus {
  border-color: var(--la-amber-600); box-shadow: 0 0 0 3px rgba(199, 122, 20, 0.18);
}
.la-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.la-form-meta { font-size: 12px; color: var(--fg-3); }
.la-contact-side { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.la-contact-block .la-eyebrow { margin-bottom: 4px; }
.la-contact-success {
  background: #fff; padding: 32px; border-radius: 8px; box-shadow: var(--shadow-1);
  border-top: 2px solid var(--la-amber-600);
}

/* ── Footer ─────────────────────────────────────────────────── */
.la-footer { background: var(--la-ink-900); color: var(--fg-on-dark); margin-top: 56px; }
.la-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 56px 32px 32px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 56px;
}
.la-footer-brand { display: flex; gap: 14px; align-items: center; }
.la-footer-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.la-footer-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--la-amber-500); margin-top: 4px; }
.la-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.la-footer-h { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--la-amber-500); margin-bottom: 12px; }
.la-footer-p { font-size: 14px; color: var(--fg-on-dark-2); line-height: 1.55; margin: 0 0 8px; }
.la-footer-p a { color: var(--fg-on-dark); text-decoration: none; }
.la-footer-p a:hover { color: var(--la-amber-500); }
.la-footer-link { display: block; font-size: 14px; color: var(--fg-on-dark-2); text-decoration: none; padding: 4px 0; }
.la-footer-link:hover { color: var(--fg-on-dark); }
.la-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding: 18px 32px;
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px;
  font-size: 12px; color: var(--fg-on-dark-2);
}

/* ── Small responsive nudges ────────────────────────────────── */
@media (max-width: 980px) {
  .la-hero-grid, .la-detail-grid, .la-contact-grid, .la-footer-inner, .la-mailing-cta { grid-template-columns: 1fr; gap: 32px; }
  .la-stats, .la-services, .la-grid-3, .la-form-row, .la-footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .la-section { padding: 56px 24px; }
  .la-hero { padding: 48px 24px; }
}
@media (max-width: 640px) {
  .la-stats, .la-services, .la-grid-3, .la-form-row, .la-footer-cols { grid-template-columns: 1fr; }
  .la-nav { display: none; }
}