/* ==========================================================================
   Lara Benefits — site styles
   Every value comes from tokens.css. If you need a new one, add it there.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--c-bone);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Visible keyboard focus everywhere. Do not remove. */
:focus-visible {
  outline: var(--hair-w) solid var(--c-focus);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--c-ink); color: var(--c-bone);
  padding: var(--s-3) var(--s-4); z-index: 100;
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Layout ----------------------------------------------------------- */
.page { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.measure { max-width: var(--measure); }

/* The field. Used for the hero and any dark band. */
.field {
  background-color: var(--c-ink);
  background-image: url("../assets/img/grain.svg"), var(--field);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
  background-blend-mode: soft-light, normal;
  color: var(--c-pewter-hi);
}
.field .eyebrow,
.field .meta { color: var(--c-muted-dark); }
.field p { color: var(--c-body-dark); }
.field hr, .field .rule { background: var(--c-hair-dark); }

/* ---- Type ------------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 400; }
.hero-title { font-size: var(--t-hero); }

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted);
}

p { color: var(--c-body); }
.lead { font-size: var(--t-lead); }
.small { font-size: var(--t-small); }

/* Foil text. Screen only — reverts to solid pewter where unsupported. */
.foil {
  color: var(--c-pewter-hi);
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .foil { -webkit-text-fill-color: initial; } }

/* The hairline. The one structural device in the system. */
.rule {
  height: var(--hair-w);
  background: var(--c-hair);
  border: 0;
  width: 100%;
}
.rule--short { width: 5.75rem; }

/* ---- Header ----------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-ink);
  border-bottom: var(--hair-w) solid var(--c-hair-dark);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
}
.masthead__logo { width: 9.5rem; }
.masthead__logo svg, .masthead__logo img { width: 100%; height: auto; }

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a {
  font-size: var(--t-label);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-pewter);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--c-pewter-hi); }
.nav__desktop { display: none; }
@media (min-width: 48rem) { .nav__desktop { display: flex; } }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  font-weight: 500;
  padding: var(--s-4) var(--s-6);
  border: var(--hair-w) solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--c-ink); color: var(--c-bone); }

.btn--reverse { color: var(--c-pewter); }
.btn--reverse:hover { background: var(--c-pewter); color: var(--c-ink); }

.btn--solid {
  background: var(--c-ink); color: var(--c-bone); border-color: var(--c-ink);
}
.btn--solid:hover { background: transparent; color: var(--c-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding-block: var(--s-10) var(--s-9); }
.hero__lockup { width: min(15rem, 55vw); margin-bottom: var(--s-8); }
.hero__title { margin-bottom: var(--s-5); }
.hero__title .quiet { color: var(--c-muted-dark); display: block; }
.hero__sub { max-width: 26rem; margin-bottom: var(--s-7); }
.hero .btn-row { margin-top: var(--s-6); }

/* ---- Ruled list — the signature pattern -------------------------------
   Rows separated by the same hairline that sits under LARA. */
.ruled { border-top: var(--hair-w) solid var(--c-hair); }
.ruled__item {
  display: grid;
  gap: var(--s-2) var(--s-6);
  grid-template-columns: 1fr;
  padding-block: var(--s-5);
  border-bottom: var(--hair-w) solid var(--c-hair);
}
.ruled__num {
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: var(--tr-caps);
  color: var(--c-muted);
  font-weight: 500;
  padding-top: 0.4rem;
}
.ruled__body p { margin-top: var(--s-2); max-width: var(--measure); }
@media (min-width: 48rem) {
  .ruled__item { grid-template-columns: 4.5rem 1fr; }
}
.field .ruled { border-color: var(--c-hair-dark); }
.field .ruled__item { border-color: var(--c-hair-dark); }
.field .ruled__num { color: var(--c-muted-dark); }

/* ---- Split ------------------------------------------------------------ */
.split { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; }
  .split--sticky > :first-child { position: sticky; top: 7rem; }
}

/* ---- Seal divider ----------------------------------------------------- */
.seal-divider {
  display: flex; align-items: center; gap: var(--s-5);
  padding-block: var(--s-7);
}
.seal-divider .rule { flex: 1; }
.seal-divider__mark { width: 2.75rem; flex: 0 0 auto; }

/* ---- Form — set as ruled lines, like the paperwork it replaces --------- */
.form { margin-top: var(--s-7); }
.form__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--wide { grid-column: 1 / -1; }
}

.form__field { display: flex; flex-direction: column; }
.form__field label {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.form__field input,
.form__field select,
.form__field textarea {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 300;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--hair-w) solid var(--c-hair);
  border-radius: 0;
  padding: var(--s-2) 0 var(--s-3);
  transition: border-color var(--dur-fast) var(--ease);
  width: 100%;
}
.form__field textarea { resize: vertical; min-height: 5.5rem; }
.form__field select { appearance: none; cursor: pointer; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--c-ink);
}
.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--c-ink);
  box-shadow: 0 1px 0 0 var(--c-ink);
}
.form__error {
  font-size: var(--t-small);
  color: var(--c-error);
  margin-top: var(--s-2);
  display: none;
}
.form__field[data-invalid="true"] input,
.form__field[data-invalid="true"] select { border-bottom-color: var(--c-error); }
.form__field[data-invalid="true"] .form__error { display: block; }

.form__actions {
  margin-top: var(--s-7);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
}
.form__note { font-size: var(--t-small); color: var(--c-muted); max-width: 24rem; }

.form__status { margin-top: var(--s-5); font-size: var(--t-small); display: none; }
.form__status[data-state="ok"]   { display: block; color: var(--c-pine); }
.form__status[data-state="fail"] { display: block; color: var(--c-error); }

/* ---- Callout card ----------------------------------------------------- */
.card {
  background: var(--c-surface-dark);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}

/* ---- Footer ----------------------------------------------------------- */
.footer { background: var(--c-ink); color: var(--c-pewter); }
.footer__inner { padding-block: var(--s-8); }
.footer__top {
  display: grid; gap: var(--s-7); grid-template-columns: 1fr;
  padding-bottom: var(--s-7);
  border-bottom: var(--hair-w) solid var(--c-hair-dark);
}
@media (min-width: 48rem) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer__lockup { width: 8.5rem; margin-bottom: var(--s-4); }
.footer h4 {
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted-dark);
  margin-bottom: var(--s-4);
}
.footer ul { list-style: none; }
.footer li { margin-bottom: var(--s-3); }
.footer a { text-decoration: none; font-size: var(--t-small); color: var(--c-pewter); }
.footer a:hover { color: var(--c-pewter-hi); }
.footer__legal {
  padding-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--c-muted-dark);
  line-height: 1.8;
  max-width: 44rem;
}

/* ---- Scroll reveal ----------------------------------------------------
   Progressive: content is visible if JS never runs. */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(0.875rem); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- Desktop rhythm --------------------------------------------------- */
@media (min-width: 48rem) {
  .page { padding-inline: var(--gutter-lg); }
  .section { padding-block: var(--s-10); }
  .hero { padding-block: var(--s-11) var(--s-10); }
}

/* ==========================================================================
   Additions for the recruiting homepage (Pinnacle-structure mirror).
   Two new patterns only: a photography slot and a stats row. Token-based.
   ========================================================================== */

/* ---- Media slot — full-bleed photography, the Pinnacle device ---------- */
.media {
  background: var(--c-surface-dark);
  border-radius: 20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid; place-items: center;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall  { aspect-ratio: 4 / 5; border-radius: 20px; }
.media--wide  { aspect-ratio: 16 / 10; }
.media__label {
  font-family: var(--f-body);
  font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--c-muted-dark);
}

/* Zig-zag: flip the image to the other side on desktop, alternating rows. */
.split--vcenter { align-items: center; }
@media (min-width: 56rem) {
  .split--flip > :first-child { order: 2; }
}

/* ---- Stats row -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: var(--hair-w) solid var(--c-hair); padding-top: var(--s-4); }
.field .stat { border-color: var(--c-hair-dark); }
.stat__num {
  font-family: var(--f-body);        /* Inter — Cormorant renders numerals oldstyle */
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1; letter-spacing: -0.01em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.field .stat__num { color: var(--c-pewter-hi); }
.stat__label { display: block; margin-top: var(--s-3); }

/* ---- Centered hero (Pinnacle's single-statement hero) ----------------- */
.hero--tall { min-height: 86vh; display: grid; align-items: center; text-align: center; }
.hero--tall .page { width: 100%; }
.hero--tall .hero__lockup { margin-inline: auto; }
.hero--tall .hero__title { margin-inline: auto; max-width: 18ch; }
.hero--tall .hero__sub { margin-inline: auto; }
.hero--tall .btn-row { justify-content: center; }

/* Small centered section head */
.head--center { text-align: center; }
.head--center .eyebrow { display: block; }
.head--center h2 { margin-inline: auto; }

/* Agent-portal band */
.portal-band {
  display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 48rem) {
  .portal-band { grid-template-columns: 1fr auto; gap: var(--s-8); }
}

/* ---- Carriers grid — hairline-ruled wordmarks (swap for real logos) ---- */
.carriers {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--hair-w);
  background: var(--c-hair-dark);
  border: var(--hair-w) solid var(--c-hair-dark);
}
@media (min-width: 34rem) { .carriers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .carriers { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 62rem) { .carriers { grid-template-columns: repeat(5, 1fr); } }
.carriers li { display: grid; }
.carriers a {
  background: var(--c-surface-dark);
  display: grid; place-items: center; text-align: center;
  min-height: 4rem; padding: var(--s-3);
  font-family: var(--f-body);
  font-size: 0.6875rem;             /* 11px — compact wordmark */
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-pewter);
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.carriers a:hover,
.carriers a:focus-visible { color: var(--c-pewter-hi); background: var(--c-ink); }
/* When you drop in real logo files, this keeps them toned to the palette. */
.carriers img { max-height: 1.6rem; width: auto; opacity: 0.85; filter: grayscale(1) brightness(1.6); }

/* ---- Interior page header ---- */
.pagehead { padding-block: var(--s-9) var(--s-8); }
@media (min-width: 48rem) { .pagehead { padding-block: var(--s-10) var(--s-9); } }
.pagehead .hero-title { margin-block: var(--s-4) var(--s-5); }

/* ---- Team grid ---- */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); list-style: none; }
@media (min-width: 48rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } }
.team figure { margin: 0; aspect-ratio: 4 / 5; background: var(--c-surface-dark); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.team figure img { width: 100%; height: 100%; object-fit: cover; }
.team__ph { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-muted); }
.team h3 { margin-top: var(--s-4); }
.team__role { margin-top: var(--s-1); font-size: var(--t-small); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-muted); }

/* Active nav link */
.nav a[aria-current="page"] { color: var(--c-pewter-hi); }

/* ---- Animated WebGL hero (silver moonlight on water) ------------------ */
.hero-gl {
  position: relative; overflow: hidden;
  min-height: 88vh; min-height: 88svh;
  display: grid; place-items: center; text-align: center;
  background: var(--field);            /* fallback before canvas paints */
}
.hero-gl #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-gl__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 54% at 50% 46%, rgba(16,18,21,0.42), rgba(16,18,21,0.14) 55%, transparent 78%),
    linear-gradient(180deg, rgba(16,18,21,0.30), transparent 26%, transparent 68%, rgba(8,9,12,0.55));
}
.hero-gl__content { position: relative; z-index: 2; padding-block: var(--s-9); }
.hero-gl .hero__lockup { margin: 0 auto var(--s-8); }
.hero-gl .eyebrow { color: var(--c-pewter); }
.hero-gl .hero-title { color: var(--c-bone); text-shadow: 0 2px 26px rgba(0,0,0,0.5); margin-bottom: var(--s-5); }
.hero-gl .hero__sub { color: var(--c-pewter-hi); max-width: 40rem; margin: 0 auto var(--s-7); text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.hero-gl .btn-row { justify-content: center; }
.hero-gl .btn { background: rgba(12,13,17,0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  .hero-gl__scrim { background:
    radial-gradient(ellipse 62% 54% at 50% 46%, rgba(16,18,21,0.30), transparent 72%),
    linear-gradient(180deg, rgba(16,18,21,0.28), transparent 28%, transparent 66%, rgba(8,9,12,0.5)); }
}