/* ==========================================================================
   placement.aceec.ac.in

   Palette follows aceec.ac.in: deep institutional navy, a gold accent used
   sparingly, and one red reserved for genuine urgency (closing deadlines).
   The five brand values are also written as CSS custom properties by the
   admin theme settings, so changing them there changes the whole site.

   Type: Bricolage Grotesque for display, Instrument Sans for body, and
   IBM Plex Mono for every figure. The mono is functional, not decorative —
   packages, roll numbers and offer counts sit in tables that only read
   cleanly when the digits are the same width.

   Signature: every branch owns a colour, set once in the branches table and
   reused on every chart, badge and rail across the site. A student learns
   "CSE is deep blue, ECE is gold" once and can then read any chart at a
   glance without checking the legend.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Overwritten inline from admin > settings > theme */
  --brand:      #0F2B5B;
  --brand-dark: #081B3C;
  --brand-2:    #1E4A9C;
  --accent:     #E8A32D;
  --highlight:  #C1272D;

  --ink:        #10151F;
  --ink-2:      #38414F;
  --ink-3:      #64708A;
  --line:       #E2E6EE;
  --line-soft:  #EEF1F6;
  --paper:      #FFFFFF;
  --paper-2:    #F7F9FC;
  --paper-3:    #EFF3F9;

  --ok:         #10756A;
  --ok-bg:      #E6F4F1;
  --warn:       #9A6200;
  --warn-bg:    #FDF3E0;
  --bad:        #A8262B;
  --bad-bg:     #FBEBEB;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(16, 21, 31, .06);
  --shadow:    0 4px 16px -4px rgba(16, 21, 31, .10), 0 1px 3px rgba(16, 21, 31, .05);
  --shadow-lg: 0 24px 48px -20px rgba(15, 43, 91, .28);

  --wrap: 1200px;
  --gut:  clamp(1rem, 4vw, 2.5rem);

  --header-h: 68px;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: var(--brand-dark);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; text-wrap: pretty; }

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

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* ------------------------------------------------------------------ layout */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gut) * 2), 1400px); margin-inline: auto; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--paper { background: var(--paper-2); }
.section--ink { background: var(--brand-dark); color: #E7EDF7; }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* ------------------------------------------------------------- eyebrow/lede */
.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .625rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: currentColor; flex: none;
}
.eyebrow--ink { color: var(--brand-2); }

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--ink-2);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ header */
.topbar {
  background: var(--brand-dark);
  color: #C6D3E8;
  font-size: .8rem;
  padding: .45rem 0;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--accent); }
.topbar .between { gap: .5rem 1.25rem; }
@media (max-width: 760px) { .topbar { display: none; } }

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand__mark {
  width: 42px; height: 42px; flex: none; border-radius: 9px;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: -.02em;
}
.brand__img { width: auto; max-width: 260px; object-fit: contain; }
/* Height comes from the inline style so it can be set in the admin panel. */
.brand__text { line-height: 1.15; }
.brand__name { font-family: var(--display); font-weight: 700; color: var(--brand-dark); font-size: 1.05rem; }
.brand__sub { font-size: .7rem; color: var(--ink-3); letter-spacing: .03em; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a, .nav > .has-menu > button {
  font: inherit; font-size: .9rem; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: .55rem .7rem; border-radius: var(--r-sm); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.nav a:hover, .nav > .has-menu > button:hover { background: var(--paper-3); color: var(--brand); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--paper-3); }

.has-menu { position: relative; }
.has-menu > button::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.submenu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .4rem; display: none; z-index: 70;
}
.has-menu[data-open="true"] .submenu { display: block; }
.submenu a { display: block; padding: .5rem .7rem; font-size: .875rem; border-radius: var(--r-sm); }
.submenu strong {
  display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); padding: .6rem .7rem .25rem;
}

.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--brand-dark); border-radius: 2px; }

@media (max-width: 1080px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(360px, 88vw);
    background: #fff; border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .24s ease;
    box-shadow: var(--shadow-lg);
  }
  body[data-nav="open"] .nav { transform: translateX(0); }
  .nav a, .nav > .has-menu > button { width: 100%; padding: .75rem .5rem; font-size: .95rem; }
  .has-menu > button { justify-content: space-between; }
  .submenu {
    position: static; display: none; box-shadow: none; border: 0;
    border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 .5rem .5rem; padding-left: .5rem;
  }
  .has-menu[data-open="true"] .submenu { display: block; }
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--brand-dark);
  color: #DCE6F5;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(700px 420px at 88% -8%, rgba(232, 163, 45, .20), transparent 62%),
    radial-gradient(560px 380px at 6% 108%, rgba(30, 74, 156, .55), transparent 60%);
}
/* Faint engineering grid: the campus's own visual vernacular, kept quiet. */
.hero::after {
  content: ''; position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em {
  font-style: normal; color: var(--accent);
  background: linear-gradient(transparent 62%, rgba(232,163,45,.22) 62%);
}
.hero__lede { color: #B9C8E0; font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 54ch; }

.hero__layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .hero__layout { grid-template-columns: 1.15fr .85fr; } }

/* Live season figures. The hero's thesis: this cell is measured by outcomes. */
.ticker {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.ticker__head {
  padding: .8rem 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(232,163,45,.7); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(232,163,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,163,45,0); }
}
.ticker__grid { display: grid; grid-template-columns: 1fr 1fr; }
.ticker__cell {
  padding: 1.15rem 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ticker__cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.10); }
.ticker__cell:nth-last-child(-n+2) { border-bottom: 0; }
.ticker__num {
  font-family: var(--mono); font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.ticker__num small { font-size: .5em; color: var(--accent); margin-left: .15em; }
.ticker__label { font-size: .74rem; color: #9FB2CE; margin-top: .45rem; letter-spacing: .01em; }

/* ------------------------------------------------------------------ button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .925rem; font-weight: 600;
  padding: .72rem 1.3rem; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-2); color: #fff; box-shadow: var(--shadow); }
.btn--accent { background: var(--accent); color: #221600; }
.btn--accent:hover { background: #f2b344; color: #221600; }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-3); color: var(--brand); }
.btn--onDark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.24); }
.btn--onDark:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn--sm { padding: .45rem .8rem; font-size: .82rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------------- cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
}
.card--flush { padding: 0; overflow: hidden; }
.card--hover { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.card--hover:hover { border-color: #C9D5E8; box-shadow: var(--shadow); transform: translateY(-2px); }
.card__title { margin-bottom: .35rem; }
.card__meta { font-size: .82rem; color: var(--ink-3); }

/* Statistic tile. Figures are mono so columns of them line up down the page. */
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.35rem 1.25rem; position: relative; overflow: hidden;
}
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rail, var(--brand-2));
}
.stat__num {
  font-family: var(--mono); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  color: var(--brand-dark); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: .48em; color: var(--ink-3); font-weight: 500; margin-left: .2em; }
.stat__label { font-size: .8rem; color: var(--ink-3); margin-top: .5rem; }
.stat__note { font-size: .72rem; color: var(--ink-3); margin-top: .35rem; font-family: var(--mono); }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 4px;
  background: var(--paper-3); color: var(--ink-2);
  border: 1px solid var(--line);
}
.badge--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: transparent; }
.badge--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge--bad  { background: var(--bad-bg);  color: var(--bad);  border-color: transparent; }
.badge--accent { background: rgba(232,163,45,.16); color: #7A5200; border-color: transparent; }

/* Branch chip carries the branch's own colour — the site-wide signature. */
.branch-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  padding: .22rem .5rem; border-radius: 4px;
  background: color-mix(in srgb, var(--bc, var(--brand-2)) 12%, white);
  color: color-mix(in srgb, var(--bc, var(--brand-2)) 82%, black);
}
.branch-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--bc, var(--brand-2));
}

/* ------------------------------------------------------------------ tables */
.table-wrap {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: auto; background: #fff; -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-2); text-align: left;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding: .8rem .85rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: .75rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: .84rem; color: var(--ink-2); }
.table--zebra tbody tr:nth-child(even) { background: #FCFDFF; }

/* Below 720px the offer table becomes one card per offer: a 9-column table
   scrolled sideways on a phone is unusable, and most visitors are on phones. */
@media (max-width: 720px) {
  .table--cards thead { display: none; }
  .table--cards tbody tr {
    display: block; border: 1px solid var(--line); border-radius: var(--r);
    margin-bottom: .75rem; padding: .35rem .25rem;
  }
  .table--cards tbody td {
    display: flex; justify-content: space-between; gap: 1rem;
    border: 0; padding: .4rem .75rem; text-align: right;
  }
  .table--cards tbody td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); text-align: left; flex: none;
  }
  .table--cards tbody td:first-child {
    background: var(--paper-2); border-radius: var(--r-sm); font-weight: 600;
  }
}

/* ------------------------------------------------------------------ charts */
.chart-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1rem, 2.4vw, 1.5rem);
}
.chart-card__head { margin-bottom: 1rem; }
.chart-card__head h3 { margin-bottom: .2rem; }
.chart-card__head p { font-size: .84rem; color: var(--ink-3); margin: 0; }
.chart-box { position: relative; height: 320px; overflow: hidden; }
.chart-box > canvas { display: block; max-width: 100%; }
.chart-box--tall { height: 400px; }
.chart-box--short { height: 240px; }
@media (max-width: 640px) {
  .chart-box, .chart-box--tall { height: 280px; }
}
.chart-empty {
  display: grid; place-items: center; height: 100%;
  color: var(--ink-3); font-size: .875rem; text-align: center; padding: 1rem;
}

/* ------------------------------------------------------------------ filters */
.filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1rem clamp(1rem, 2vw, 1.25rem);
}
.filters__row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

label.field { display: block; }
.field__label {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem;
}
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=url], select, textarea {
  width: 100%; font: inherit; font-size: .9rem; color: var(--ink);
  padding: .58rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .14s ease, box-shadow .14s ease;
}
input:hover, select:hover, textarea:hover { border-color: #C3CEE0; }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(30, 74, 156, .14);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364708A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem;
}
.field__help { font-size: .76rem; color: var(--ink-3); margin-top: .3rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: .18rem; accent-color: var(--brand); flex: none; }

/* --------------------------------------------------------------- tab pills */
.pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.pill {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  padding: .45rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); white-space: nowrap;
}
.pill:hover { border-color: var(--brand-2); color: var(--brand); }
.pill[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill--scroll { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .35rem; scrollbar-width: thin; }

/* ------------------------------------------------------------- logo wall */
.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.logo-wall__item {
  background: #fff; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem;
  padding: 1rem .75rem; text-decoration: none; transition: background .16s ease;
  text-align: center;
}
.logo-wall__item:hover { background: var(--paper-2); }
.logo-wall__item img { max-height: 40px; width: auto; object-fit: contain; }
.logo-wall__name {
  font-family: var(--display); font-weight: 600; font-size: .85rem;
  color: var(--brand-dark); text-align: center; line-height: 1.25;
}
/* Sits under the name rather than floating in the corner: on a filtered wall
   this line carries an offer count and a package, which overlapped the
   company name when absolutely positioned. */
.logo-wall__count {
  font-family: var(--mono); font-size: .64rem; line-height: 1.4;
  color: var(--ink-3); max-width: 100%;
}

/* ------------------------------------------------------------- offer strip */
/* Offer card. Stacked rather than side-by-side: the company name is the
   part people scan for, and squeezing it beside the figure truncated it. */
.offer {
  display: grid; gap: .35rem; align-content: start;
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
}
.offer__pkg {
  font-family: var(--mono); font-weight: 600; font-size: 1.4rem;
  color: var(--brand); letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.offer__who { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.offer__name { font-weight: 600; font-size: .95rem; color: var(--ink); }
.offer__where {
  font-size: .84rem; color: var(--ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------------------------- drive cards */
.drive {
  display: grid; gap: .85rem; padding: 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  border-left: 3px solid var(--brand-2);
}
.drive--closing { border-left-color: var(--highlight); }
.drive--closed  { border-left-color: var(--line); opacity: .78; }
.drive__top { display: flex; gap: .85rem; align-items: flex-start; justify-content: space-between; }
.drive__logo {
  width: 46px; height: 46px; flex: none; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: var(--brand-2); font-size: .85rem;
  overflow: hidden;
}
.drive__logo img { max-width: 34px; max-height: 34px; object-fit: contain; }
.drive__title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--brand-dark); margin: 0; }
.drive__co { font-size: .84rem; color: var(--ink-3); }
.drive__facts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--ink-2); }
.drive__facts b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------- timeline */
.rounds { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rounds li {
  counter-increment: r; position: relative; padding: 0 0 1.1rem 2.4rem;
  border-left: 2px solid var(--line); margin-left: .65rem;
}
.rounds li:last-child { border-left-color: transparent; padding-bottom: 0; }
.rounds li::before {
  content: counter(r); position: absolute; left: -.85rem; top: -.15rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--mono); font-size: .72rem; display: grid; place-items: center;
}

/* -------------------------------------------------------------- testimonial */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; display: grid; gap: 1rem;
}
.quote__text { font-size: .95rem; color: var(--ink-2); margin: 0; }
.quote__text::before { content: '“'; font-family: var(--display); font-size: 2.4rem; color: var(--accent); line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.quote__who { display: flex; gap: .75rem; align-items: center; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--paper-3); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: var(--brand-2); font-size: .9rem;
}
.quote__name { font-weight: 600; font-size: .9rem; }
.quote__role { font-size: .78rem; color: var(--ink-3); }

/* -------------------------------------------------------------- news items */
.notice {
  display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.notice:last-child { border-bottom: 0; }
.notice__date {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-3);
  flex: none; width: 5.5rem; padding-top: .15rem;
}
.notice__title { font-weight: 600; font-size: .95rem; color: var(--brand-dark); margin: 0 0 .2rem; }
.notice:hover .notice__title { color: var(--brand-2); }
.notice__excerpt { font-size: .84rem; color: var(--ink-3); margin: 0; }

/* ------------------------------------------------------------------ people */
.person { text-align: center; }
.person__photo {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .85rem;
  object-fit: cover; background: var(--paper-3);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--brand-2);
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.person__name { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 0; }
.person__role { font-size: .82rem; color: var(--ink-3); }
.person__contact { font-size: .78rem; margin-top: .4rem; }

/* ------------------------------------------------------------------ alerts */
.alert {
  padding: .85rem 1.1rem; border-radius: var(--r); font-size: .9rem;
  border: 1px solid transparent; margin-bottom: 1rem;
}
.alert--success { background: var(--ok-bg);   color: var(--ok);   border-color: #BFE3DC; }
.alert--error   { background: var(--bad-bg);  color: var(--bad);  border-color: #F0C9CA; }
.alert--info    { background: #EAF1FB;        color: #17417F;     border-color: #C8DAF3; }
.alert--warn    { background: var(--warn-bg); color: var(--warn); border-color: #F2DDB4; }

.flash-stack { position: fixed; top: calc(var(--header-h) + 12px); right: 16px; z-index: 90; width: min(380px, calc(100vw - 32px)); }
.flash-stack .alert { box-shadow: var(--shadow-lg); background-color: #fff; }

/* ------------------------------------------------------------------ empty */
.empty {
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--paper-2);
}
.empty h3 { color: var(--ink-2); }
.empty p { color: var(--ink-3); max-width: 44ch; margin-inline: auto; }

/* ------------------------------------------------------------- pagination */
.pager { display: flex; gap: .35rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .82rem; text-decoration: none; color: var(--ink-2); background: #fff;
}
.pager a:hover { border-color: var(--brand-2); color: var(--brand); }
.pager [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .is-gap { border: 0; background: none; }

/* ------------------------------------------------------------- breadcrumb */
.crumb { font-size: .8rem; color: var(--ink-3); margin-bottom: .75rem; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--brand-2); text-decoration: underline; }
.crumb span { margin: 0 .4rem; opacity: .55; }

/* ------------------------------------------------------------- page header */
.page-head {
  background: var(--brand-dark); color: #C9D7EC;
  padding-block: clamp(2.25rem, 5vw, 3.5rem); position: relative; overflow: hidden;
}
.page-head::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(620px 300px at 92% 0%, rgba(232,163,45,.16), transparent 60%);
}
.page-head > * { position: relative; }
.page-head h1 { color: #fff; margin-bottom: .35rem; }
.page-head .crumb { color: #8FA5C6; }
.page-head .crumb a { color: #B9C8E0; }

/* --------------------------------------------------------------- prose CMS */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.prose img { border-radius: var(--r); margin: 1.25rem 0; }
.prose table { margin: 1.25rem 0; font-size: .875rem; }
.prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--accent); color: var(--ink-2); font-size: 1.02rem;
}

/* ------------------------------------------------------------------ footer */
.footer { background: var(--brand-dark); color: #9FB2CE; padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.footer h4 {
  color: #fff; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem;
}
.footer a { color: #C6D3E8; text-decoration: none; font-size: .875rem; }
.footer a:hover { color: var(--accent); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer__brand { max-width: 30ch; }
.footer__bottom {
  margin-top: 2.5rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.10);
  font-size: .8rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
}

.subscribe { display: flex; gap: .5rem; margin-top: .75rem; }
.subscribe input {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;
}
.subscribe input::placeholder { color: #7E93B5; }

/* ------------------------------------------------------------ scroll reveal */
/* Visible by default. Only a page that has confirmed IntersectionObserver
   support hides these, so content can never be stranded at opacity 0. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(14px); }
.reveal-ready [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}

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

/* ------------------------------------------------------------------- print */
@media print {
  .header, .topbar, .footer, .filters, .pager, .btn, .flash-stack { display: none !important; }
  body { font-size: 11pt; }
  .table-wrap { border: 0; overflow: visible; }
  thead th { position: static; }
  a[href]::after { content: ''; }
}

/* "as on" line — placement totals move while a season is running, so the
   date the sheet was cut matters as much as the numbers. */
.as-on {
  font-family: var(--mono); font-size: .8rem; color: var(--ink-3);
  margin: .5rem 0 0; letter-spacing: .01em;
}

/* Live summary of the current filter selection, sitting between the filter
   bar and the results so the figures always describe what is on screen. */
.summary-strip { margin-bottom: 1.25rem; }
.summary-strip__what {
  font-size: .85rem; color: var(--ink-3); margin: 0 0 .7rem;
}
.summary-strip__what strong { color: var(--ink); font-weight: 600; }

/* A statistic that is also a link. It has to look tappable without shouting:
   the affordance appears on hover and focus, and is always present for
   screen readers. */
a.stat--link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.stat--link:hover, a.stat--link:focus-visible {
  border-color: var(--brand-2); transform: translateY(-2px);
  box-shadow: 0 6px 18px -10px rgba(16,22,31,.35);
}
.stat__go {
  display: block; margin-top: .35rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--brand-2); opacity: 0; transition: opacity .15s;
}
a.stat--link:hover .stat__go, a.stat--link:focus-visible .stat__go { opacity: 1; }
@media (hover: none) {
  /* No hover on touch, so keep the cue visible. */
  .stat__go { opacity: 1; }
}

/* The currently-selected year in a hiring-history strip. */
a.stat--on {
  border-color: var(--brand-2);
  background: linear-gradient(0deg, rgba(30,74,156,.05), rgba(30,74,156,.05)), #fff;
}
a.stat--on .stat__go { opacity: 1; }