/* ==========================================================================
   Tiny Tots Recruitment design system

   The palette comes off the logo itself: pink #F4A2A2 and yellow #FFF878.
   Both are far too light to set text in. Pink reaches 1.99:1 on white and
   yellow 1.11:1, so neither is ever used as a text colour. They are ground
   and fill colours, and they earn their keep on the deep blue band, where
   pink hits 6.20:1 and yellow 11.14:1.

   Blue is the functional layer: links, buttons and focus rings. It is the only
   one of the three that carries text contrast comfortably on white.

   Yellow is the primary call to action, filled, with near-black text on it at
   14.13:1. That pairing is both the brightest thing on the page and one of the
   most legible, which is a rare combination worth spending on the main CTA.

   Every pairing below was contrast-checked in both themes. The lowest ratio in
   the system is 4.97:1, so all body text clears WCAG AA.
   ========================================================================== */
:root {
  /* Functional blue */
  --brand:         #0E5A7D;   /* 7.56:1 on white - links, blue text        */
  --brand-solid:   #0E5A7D;   /* 7.56:1 vs white - filled buttons          */
  --brand-solid-h: #0B4F6E;
  --brand-band:    #7FCDEB;   /* 6.96:1 on band  - blue text on deep blue  */
  --brand-bright:  #6FC5E8;
  --brand-tint:    rgba(14, 90, 125, 0.08);
  /* The logo pink, softened. Used as the ground for card marks so they read
     as brand rather than as a grey UI chip. */
  --mark-ground:   rgba(244, 162, 162, 0.30);

  /* Logo pink. Ground and fill only, never text. */
  --rose:          #F4A2A2;
  --rose-ink:      #AE4A55;   /* 5.37:1 on white - rose-coloured text      */
  --rose-tint:     rgba(244, 162, 162, 0.20);

  /* Logo yellow. The primary call to action, with --on-accent text on it. */
  --accent:        #FFF878;
  --accent-h:      #FFEF41;
  --accent-ink:    #7E5800;   /* 6.40:1 on white - amber text on light     */
  --accent-band:   #FFF878;   /* 11.14:1 on band                           */
  --accent-tint:   rgba(255, 248, 120, 0.30);
  --on-accent:     #2A2124;   /* 14.13:1 on --accent                       */

  --ground:     #FFFFFF;
  --ground-alt: #FDF4F4;      /* faint pink tint, warmer than a grey       */
  --ink:        #2A2124;      /* warm near-black, not pure black           */
  --ink-2:      #6B5A5E;
  --ink-3:      #7A6A6E;   /* 4.72:1 on the pink tint: chips and hints  */
  --line:       #F0DEDE;
  --band:       #10384F;      /* deep blue: pink and yellow both sing here  */
  --band-ink:   #F2F8FB;
  --band-ink-2: #A9C3D2;
  --band-line:  #1E4E68;

  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pad: 20px;
  --maxw: 1180px;
}
@media (min-width: 768px) { :root { --pad: 40px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --brand:        #6FC5E8;
    --brand-solid:  #0E5A7D;
    --brand-tint:   rgba(111, 197, 232, 0.14);
    --mark-ground:  rgba(244, 162, 162, 0.16);
    --rose-ink:     #F4A2A2;
    --accent-ink:   #FFF878;
    --ground:     #16222B;
    --ground-alt: #1E2E3A;
    --ink:        #EDF4F8;
    --ink-2:      #A3B7C4;
    --ink-3:      #8AA0B0;
    --line:       #27404F;
    --band:       #0C2A3B;
    --band-ink:   #EDF4F8;
    --band-ink-2: #A3B7C4;
    --band-line:  #27404F;
  }
}
:root[data-theme="light"] {
  --brand:#0E5A7D; --brand-solid:#0E5A7D; --brand-tint:rgba(14,90,125,0.08);
  --mark-ground:rgba(244,162,162,0.30);
  --rose-ink:#AE4A55; --accent-ink:#7E5800;
  --ground:#FFFFFF; --ground-alt:#FDF4F4; --ink:#2A2124; --ink-2:#6B5A5E;
  --ink-3:#7A6A6E; --line:#F0DEDE; --band:#10384F; --band-ink:#F2F8FB;
  --band-ink-2:#A9C3D2; --band-line:#1E4E68;
}
:root[data-theme="dark"] {
  --brand:#6FC5E8; --brand-solid:#0E5A7D; --brand-tint:rgba(111,197,232,0.14);
  --mark-ground:rgba(244,162,162,0.16);
  --rose-ink:#F4A2A2; --accent-ink:#FFF878;
  --ground:#16222B; --ground-alt:#1E2E3A; --ink:#EDF4F8; --ink-2:#A3B7C4;
  --ink-3:#8AA0B0; --line:#27404F; --band:#0C2A3B; --band-ink:#EDF4F8;
  --band-ink-2:#A3B7C4; --band-line:#27404F;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
/* --brand-solid, not --brand: --brand flips to a light blue in dark mode, which
   left white-on-light-blue at 1.94:1 the moment a keyboard user focused the skip
   link. --brand-solid is pinned to #0E5A7D in both themes, so white stays at
   7.56:1 either way. This is the first thing a screen-reader user hits. */
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand-solid); color: #fff;
  padding: 12px 20px; z-index: 200; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 6.2vw, 60px); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: clamp(25px, 3.8vw, 38px); line-height: 1.12; letter-spacing: -0.022em; }
h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -0.013em; }
p { margin: 0 0 1.1em; }
.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.prose { max-width: 68ch; }
.prose p { color: var(--ink-2); }
.prose h3 { color: var(--ink); margin: 2em 0 0.6em; }

/* ---------- Data tables ----------
   Salary bands and ratios. Not inside .prose: that caps at 68ch and squashed
   three columns into half the page. The wrapper scrolls on its own below the
   breakpoint so a wide table never makes the whole page scroll sideways. */
.datatable { overflow-x: auto; margin: 0 0 8px; -webkit-overflow-scrolling: touch; }
.datatable table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 16px; }
.datatable th, .datatable td {
  text-align: left; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.datatable thead th {
  font-family: var(--body); font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--brand); white-space: nowrap;
}
.datatable td { color: var(--ink-2); }
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable tbody tr:hover td { background: var(--brand-tint); }
.datatable td:first-child { color: var(--ink); font-weight: 600; }
.sec-band .datatable th, .sec-band .datatable td { border-color: var(--band-line); }
.sec-band .datatable thead th { color: var(--band-ink); border-bottom-color: var(--brand-band); }
.sec-band .datatable td { color: var(--band-ink-2); }
.sec-band .datatable td:first-child { color: var(--band-ink); }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 16px; font-weight: 500;
}
.eyebrow.q { color: var(--ink-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1;
  padding: 15px 24px; border: 1.5px solid transparent; cursor: pointer;
  border-radius: 10px; transition: background .16s, color .16s, border-color .16s;
  min-height: 48px; justify-content: center;
  /* Buttons must be reset explicitly. On an <a> there is no default background,
     but on a <button> the user-agent grey shows through anything that only sets
     border and colour, which rendered .btn-line as a solid white box in the
     admin's dark theme. */
  background: transparent; -webkit-appearance: none; appearance: none;
}
.btn .chev { width: 11px; height: 11px; transition: transform .16s; }
.btn:hover .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn:hover .chev { transform: none; } }
.btn-brand { background: var(--brand-solid); color: #fff; }
.btn-brand:hover { background: var(--brand-solid-h); }
/* Orange is the hire-side call to action. Its text is deep teal, not white:
   white on #FF8F1A is 2.28:1 and would fail AA. */
.btn-accent { background: var(--accent); color: var(--on-accent); }
/* Blue links land at 3.79:1 on the logo pink, so anything sitting on a pink
   ground uses ink and leans on the underline to read as a link. */
.sec-rose a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn-accent:hover { background: var(--accent-h); }
.btn-line { border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.on-band .btn-line { border-color: var(--band-line); color: var(--band-ink); }
.on-band .btn-line:hover { border-color: var(--band-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100; background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* The logo is a fixed-aspect raster lockup. Height is what matters visually, so
   width is set auto and the intrinsic width/height attributes on the <img>
   reserve the box to prevent layout shift. */
.brand .logo { height: 44px; width: auto; display: block; }
@media (min-width: 768px) { .brand .logo { height: 52px; } }
.mainnav { display: none; gap: 26px; }
.mainnav a { text-decoration: none; font-size: 15px; color: var(--ink-2); position: relative; padding: 4px 0; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--ink); }
.mainnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand);
}
.hdr .btn { padding: 11px 18px; font-size: 15px; min-height: 42px; display: none; }
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px;
}
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Dropped from 1000px: at that breakpoint the full menu vanished on common
   laptop and panel widths, leaving only the burger. */
@media (min-width: 900px) {
  .mainnav { display: flex; gap: 20px; }
  .hdr .btn { display: inline-flex; }
  .burger { display: none; }
}

.drawer {
  display: none; border-bottom: 1px solid var(--line); background: var(--ground);
  position: sticky; top: 68px; z-index: 99; max-height: calc(100vh - 68px); overflow-y: auto;
}
.drawer.open { display: block; }
/* Must match the burger breakpoint, or the drawer could be left open with no
   control to close it. */
@media (min-width: 900px) { .drawer, .drawer.open { display: none; } }
.drawer .wrap { padding-top: 12px; padding-bottom: 24px; }
.drawer a { display: block; text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.drawer .grp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 4px; }
.drawer .btn { width: 100%; margin-top: 20px; }

/* ---------- Hero ---------- */
/* The hero is deliberately light. Synerjy ran a black hero, which suits
   executive search and reads cold for a nursery brand. The warm and cool tints
   below are painted with ::before so the section keeps a flat, themeable
   background colour underneath and the text contrast never depends on them. */
.hero {
  background: var(--ground-alt); color: var(--ink);
  padding: 64px 0 56px; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60ch 40ch at 88% 8%, var(--accent-tint), transparent 70%),
    radial-gradient(70ch 44ch at 4% 96%, var(--brand-tint), transparent 70%);
}
.hero > .wrap { position: relative; }
.hero h1 { color: var(--ink); max-width: 15ch; }
.hero .lede { color: var(--ink-2); margin: 22px 0 30px; }
.hero .eyebrow { color: var(--brand); }
.hero-rule { height: 4px; background: var(--accent); width: 64px; margin-bottom: 28px; border-radius: 2px; }
@media (min-width: 768px) { .hero { padding: 96px 0 84px; } }

.hero-sub { background: var(--ground-alt); border-bottom: 1px solid var(--line); padding: 44px 0 40px; }
.hero-sub .eyebrow { color: var(--brand); }
.hero-sub h1 { max-width: 18ch; }
.hero-sub .lede { margin-top: 18px; }
@media (min-width: 768px) { .hero-sub { padding: 68px 0 60px; } }

.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { margin: 0 7px; }

/* ---------- Stats ---------- */
.stats { border-bottom: 1px solid var(--line); background: var(--ground); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat { padding: 22px 0; border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.stat:nth-child(even) { padding-left: 18px; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(27px, 5vw, 40px); letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.stat i { display: block; font-style: normal; font-size: 14px; color: var(--ink); margin-top: 6px; font-weight: 600; }
.stat span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
/* The staffing figures sit on the deep blue band, where the default ink
   colours above would be dark on dark. */
.sec-band .stat b { color: var(--accent-band); }
.sec-band .stat i { color: var(--band-ink); }
.sec-band .stat span { color: var(--band-ink-2); }
.sec-band .stat { border-color: var(--band-line); }
@media (min-width: 860px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 34px 26px; border-bottom: 0; border-right: 1px solid var(--line); }
  .stat:nth-child(odd), .stat:nth-child(even) { padding-left: 26px; padding-right: 26px; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- Sections ---------- */
.sec { padding: 56px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .sec { padding: 84px 0; } }
.sec-alt { background: var(--ground-alt); }
.sec-band { background: var(--band); color: var(--band-ink); border-bottom: 0; }
.sec-band h2, .sec-band h3 { color: #fff; }
.sec-band p { color: var(--band-ink-2); }
/* The section lede is doing real work on the band, not sitting in small print,
   so it takes the full band ink. The muted --band-ink-2 stays for what it suits:
   stat captions and the source credit underneath them. */
.sec-band .sec-head .lede { color: var(--band-ink); }
.sec-band .eyebrow { color: var(--brand-band); }

/* Every block on the page shares one left edge. An earlier version put the
   eyebrow in a 200px side rail, which pushed section headings 240px right of
   the body text and gave the page three competing left edges. */
.sec-head { margin-bottom: 36px; }
.sec-head p { color: var(--ink-2); max-width: 62ch; margin-top: 16px; }
.sec-head h2 { max-width: 26ch; }

/* ---------- Card grids ---------- */
/* Per-card borders, not hairlines painted through a 1px grid gap: an unfilled
   cell in the gap version renders as a solid block of --line, and almost every
   grid on this site has a remainder at some breakpoint. */
.cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
/* Two-up for cards carrying a paragraph rather than a line. Six stacked cards
   of real detail is a screen and a half of scrolling for no reason. */
@media (min-width: 820px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--ground); padding: 28px 24px; display: flex; flex-direction: column;
        gap: 12px; border: 1px solid var(--line); border-radius: 14px; }
.sec-alt .card { background: var(--ground-alt); }
/* The card mark. A tinted disc holding a line glyph, echoing the star inside the
   "o" of the logo. Both colours are brand tokens, so it follows the theme. The
   disc is decorative and the svg is aria-hidden: the heading carries the meaning. */
.cardmark { width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--mark-ground); color: var(--brand);
  margin-bottom: 2px; }
.cardmark svg { width: 23px; height: 23px; display: block; }
@media (min-width: 768px) { .cardmark { width: 50px; height: 50px; }
  .cardmark svg { width: 25px; height: 25px; } }
.card .rate { font-family: var(--mono); font-size: 12px; color: var(--brand); letter-spacing: 0.04em; flex: none; min-height: 2.6em; }
.card h3 { margin-bottom: 0; }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
/* Only the description absorbs the spare height. Applying flex:1 to every
   paragraph let the eyebrow and the "Best for" line grow too, by a different
   amount in each card, which pushed the three headings to different heights. */
.card p:not(.rate):not(.fit) { flex: 1; }
.card h3 { min-height: 2.4em; }
/* min-height sized to the longest of the three, so the divider rule sits at the
   same height in every card rather than tracking each one's line count. */
.card .fit { flex: none; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 14px; min-height: 7.8em; }
.card .fit b { color: var(--ink-2); }
.card .go { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--brand); display: inline-flex; align-items: center; gap: 7px; }
.card .go .chev { width: 11px; height: 11px; transition: transform .16s; }
.card:hover .go .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .card:hover .go .chev { transform: none; } }

/* ---------- Discipline list ---------- */
.disc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .disc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .disc { grid-template-columns: repeat(3, 1fr); } }
.disc a {
  background: var(--ground); padding: 20px 22px; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; font-size: 16px; transition: background .15s, color .15s; min-height: 66px;
}
.sec-alt .disc a { background: var(--ground-alt); }
.disc a .chev { width: 12px; height: 12px; color: var(--brand); flex: none; transition: transform .16s; }
.disc a:hover { background: var(--brand-solid); color: #fff; }
.disc a:hover .chev { color: #fff; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .disc a:hover .chev { transform: none; } }
.disc a em { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.disc a:hover em { color: rgba(255,255,255,.8); }

/* ---------- Roles ---------- */
.roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 620px) { .roles { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.roles li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); position: relative; font-size: 15.5px; }
.roles li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px;
  background: var(--brand); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Why list ---------- */
.why { display: grid; gap: 0; }
@media (min-width: 860px) { .why { grid-template-columns: 1fr 1fr; gap: 0 56px; } }
.why > div { padding: 24px 0; border-top: 1px solid var(--band-line); }
.why h3 { margin-bottom: 8px; }
.why p { margin: 0; font-size: 15.5px; }
.why .n { font-family: var(--mono); font-size: 11.5px; color: var(--brand-band); letter-spacing: 0.14em; margin-bottom: 10px; display: block; }

/* ---------- Proof ---------- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logos { grid-template-columns: repeat(6, 1fr); } }
/* Cells stay white in both themes. Two of these marks carry their own
   background colour (Lufthansa navy, BAE red) and the rest are dark artwork,
   so a themed cell would either clash or make black wordmarks vanish in dark
   mode. Every logo sits on the ground it was drawn for. */
.logos div { background: #fff; min-height: 96px; display: flex; align-items: center; justify-content: center; padding: 18px 20px; text-align: center; }
.sec-alt .logos div { background: #fff; }
.logos div:has(.ph) { background: var(--ground-alt); }
/* All artwork shares one canvas ratio, so a single width keeps the set even. */
.logos img { width: 100%; max-width: 168px; height: auto; display: block; }

.cases { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { background: var(--ground); padding: 26px 24px; }
.sec-alt .case { background: var(--ground-alt); }
.case .m { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -0.03em; color: var(--brand); line-height: 1; }
.case .ml { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 18px; }
.case h3 { font-size: 19px; margin-bottom: 10px; }
.case p { font-size: 15px; color: var(--ink-2); margin: 0 0 10px; }
.case .sector { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }

.team { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .team { grid-template-columns: repeat(3, 1fr); } }
.member { background: var(--ground); padding: 26px 24px; }
.sec-alt .member { background: var(--ground-alt); }
.member .av { width: 56px; height: 56px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; }
.member .av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Admin chrome ----------
   The public nav collapses behind a burger below 1000px, which the admin header
   does not have. The admin gets its own nav that wraps and stays visible. */
.adminhdr .wrap { height: auto; padding-top: 14px; padding-bottom: 12px; }
.adminnav { border-top: 1px solid var(--line); }
.adminnav .wrap { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 10px; padding-bottom: 10px; }
.adminnav a { text-decoration: none; font-size: 15px; color: var(--ink-2); padding: 6px 0; position: relative; }
.adminnav a:hover { color: var(--ink); }
.adminnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.adminnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); }
/* Who is signed in, beside the sign-out button. Hidden on narrow screens so the
   header does not wrap: the name matters less than the button being reachable. */
.whoami { display: block; text-align: right; font-size: 14px; line-height: 1.25; color: var(--ink); }
.whoami small { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .whoami { display: none; } }
.member h3 { font-size: 18px; }
.member .role { font-size: 14px; color: var(--brand); margin: 4px 0 2px; }
.member .spec { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.member p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; font-size: 17px;
  position: relative; list-style: none; font-family: var(--display); letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  margin-top: -5px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .a { padding: 0 0 20px; color: var(--ink-2); max-width: 68ch; }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- Form ---------- */
.formwrap { background: var(--ground); border: 1px solid var(--line); padding: 26px 22px; }
.sec-band .formwrap { background: var(--band); border-color: var(--band-line); }
@media (min-width: 768px) { .formwrap { padding: 34px 32px; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.sec-band .field label { color: var(--band-ink); }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 16px; padding: 13px 14px;
  background: var(--ground); color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 10px; min-height: 50px;
}
/* Native select chrome ignores the brand entirely and looks foreign on the dark
   bands, so the control is restyled and given our own chevron. The arrow is a
   mid neutral that holds up on both light and dark grounds. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' fill='none' stroke='%237E97A4' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
.field select:hover { border-color: var(--ink-3); }
.field select option { background: var(--ground); color: var(--ink); }
.sec-band .field select option { background: #0C4459; color: var(--band-ink); }
.field input[type="file"] { padding: 9px 12px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--brand-solid); color: #fff; border: 0; border-radius: 10px;
  padding: 9px 15px; margin-right: 14px;
}
.field input[type="file"]::file-selector-button:hover { background: var(--brand-solid-h); }
.field input[type="date"] { cursor: pointer; }
.sec-band .field input, .sec-band .field textarea, .sec-band .field select {
  background: #0C4459; color: var(--band-ink); border-color: var(--band-line);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

/* ---------- Vacancy filter bar ----------
   A plain GET form: region select, town search, submit. Stacks on mobile and
   sits on one row from 720px up. The fields keep .field so they inherit the
   form styling above rather than restating it. */
.filters {
  display: grid; gap: 14px; margin-bottom: 26px; padding: 20px;
  background: var(--ground-alt); border: 1px solid var(--line); border-radius: 14px;
}
.filters .field { margin-bottom: 0; }
.filters .field-go { display: flex; align-items: center; gap: 16px; }
.filters .field-go .btn { flex: 1; }
.filters .clear { font-size: 15px; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 720px) {
  .filters { grid-template-columns: 1fr 1fr auto; align-items: end; }
  /* The button row has no label, so it needs the label's height to line up. */
  .filters .field-go { padding-bottom: 1px; }
  .filters .field-go .btn { flex: none; }
}
.rescount {
  font-size: 15px; color: var(--ink-2); margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; gap: 0; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; gap: 0 18px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }
.sec-band .form-note { color: var(--band-ink-2); }
.form-msg { padding: 14px 16px; border-left: 3px solid var(--brand); background: var(--brand-tint); font-size: 15px; margin-bottom: 20px; }
.form-msg[hidden] { display: none; }
.form-msg.ok { border-color: #0A7D3E; background: rgba(10,125,62,.09); }
.formwrap .btn { width: 100%; }
@media (min-width: 620px) { .formwrap .btn { width: auto; } }

/* ---------- Contact blocks ---------- */
.contact-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; } }
.cblock { border-top: 1px solid var(--line); padding: 20px 0; }
.sec-band .cblock { border-color: var(--band-line); }
.cblock h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 10px; }
.sec-band .cblock h3 { color: var(--band-ink-2); }
.cblock a { text-decoration: none; display: block; font-size: 17px; padding: 3px 0; }
.cblock a:hover { color: var(--brand); }
.cblock address { font-style: normal; color: var(--ink-2); }
.sec-band .cblock address { color: var(--band-ink-2); }

/* ---------- CTA band ---------- */
.cta { background: var(--brand-solid); color: #fff; padding: 52px 0; }
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: rgba(255,255,255,.88); max-width: 56ch; margin: 16px 0 26px; }
.cta .btn-white { background: #fff; color: var(--brand-solid); }
.cta .btn-white:hover { background: #f0eeea; }
.cta .btn-clear { border-color: rgba(255,255,255,.5); color: #fff; }
.cta .btn-clear:hover { border-color: #fff; }
/* The other audience's way out. Deliberately not a button: white at .8 on the
   brand solid clears AA for body text without competing with the two above.
   Selector is .cta .cta-alt so it outranks the .cta p margin above. .chev has
   no intrinsic size, so it must be given one here as it is in .btn: an unsized
   inline SVG expands to its default replaced-element box, not to the text. */
.cta .cta-alt { margin: 24px 0 0; font-size: 15px; }
.cta .cta-alt a { color: rgba(255,255,255,.8); text-decoration: underline;
  text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 7px; }
.cta .cta-alt a:hover { color: #fff; }
.cta .cta-alt .chev { width: 10px; height: 10px; flex: none;
  transition: transform .16s; }
.cta .cta-alt a:hover .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .cta .cta-alt a:hover .chev { transform: none; } }
@media (min-width: 768px) { .cta { padding: 72px 0; } }

/* ---------- Footer ---------- */
.ftr { background: var(--band); color: var(--band-ink-2); padding: 52px 0 100px; font-size: 15px; }
@media (min-width: 900px) { .ftr { padding-bottom: 32px; } }
.ftr-grid { display: grid; gap: 32px; margin-bottom: 40px; }
@media (min-width: 700px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.ftr h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: 14px; }
.ftr a { color: var(--band-ink-2); text-decoration: none; display: block; padding: 4px 0; }
.ftr a:hover { color: #fff; }
.ftr address { font-style: normal; line-height: 1.7; }
/* Replaced the footer address block. No trading address is published, so the
   first footer column carries a one-line description of the business instead. */
.ftr-blurb { color: var(--band-ink-2); line-height: 1.65; margin: 0; max-width: 34ch; }
.ftr .brand { margin-bottom: 16px; }
.ftr .legal { border-top: 1px solid var(--band-line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; }
.ftr .legal a { display: inline; }

/* ---------- Mobile action bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid;
  grid-template-columns: 1fr 1fr; background: var(--ground);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.mbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
  text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.mbar a.primary { background: var(--brand-solid); color: #fff; }
/* Matches the header breakpoint: above it the header CTA is visible, so the
   fixed bar would be a duplicate. */
@media (min-width: 900px) { .mbar { display: none; } }

/* ---------- Placeholder ---------- */
/* The point of this style is that an unfilled placeholder cannot ship unnoticed.
   It previously used --brand on whatever was behind it, which is fine on a light
   ground and 1.63:1 on the deep blue band, so the one placeholder on the site was
   the one nobody could see. Solid accent with --on-accent is the same pairing the
   primary button uses: fixed in both themes and independent of the band behind it. */
.ph {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border: 1px dashed var(--on-accent); font-family: var(--mono);
  font-size: 12.5px; padding: 2px 8px; letter-spacing: 0; line-height: 1.5; font-weight: 600;
}

/* ---------- Numbered process ----------
   Used on /candidates/ for "what happens after you register", which is the
   question that stops people registering. White on --brand-solid is the same
   pairing the CTA band already uses, so it needs no new colour. */
.flow { list-style: none; counter-reset: flow; display: grid; gap: 24px; margin: 4px 0 0; padding: 0; }
.flow li { counter-increment: flow; display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; }
.flow li::before {
  content: counter(flow); display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand-solid);
  color: #fff; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums;
}
.flow h3 { margin: 7px 0 5px; font-size: 18px; }
.flow p { margin: 0; color: var(--ink-2); max-width: 62ch; }
@media (min-width: 768px) { .flow { gap: 28px; } }

/* ---------- Reveal ----------
   Gated on .js, set by an inline script in the head. Without it, a slow or
   failed script left every revealed block permanently invisible. */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .rv.in { opacity: 1; transform: none; }
/* Content already on screen at first paint is shown outright. Fading it in
   meant the top of every page arrived blank and animated, which read as the
   page loading badly rather than as polish. */
.js .rv.now { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Jobs ---------- */
.joblist { display: grid; gap: 16px; }
@media (min-width: 700px) { .joblist { grid-template-columns: 1fr 1fr; } }
.jobcard {
  background: var(--ground); padding: 24px 22px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .15s, border-color .15s;
}
.sec-alt .jobcard { background: var(--ground-alt); }
.jobcard:hover { background: var(--brand-tint); border-color: var(--brand); }
.jobcard h3 { font-size: 20px; }
.jobcard p { margin: 0; font-size: 15px; color: var(--ink-2); flex: 1; }
.jobcard .go { color: var(--brand); font-weight: 600; font-size: 14.5px;
               display: inline-flex; align-items: center; gap: 7px; }
.jobcard .go .chev { width: 10px; height: 10px; transition: transform .16s; }
.jobcard:hover .go .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .jobcard:hover .go .chev { transform: none; } }
/* flex:none, or the pay line absorbs the card's spare height like the summary
   above it does and the cards stop lining up. */
.jobcard .pay { flex: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }

/* Pay, called out rather than buried in the chip row. It is the first thing a
   candidate looks for and the commonest reason a good one does not click. */
.payblock {
  border-left: 3px solid var(--brand); padding: 3px 0 3px 16px; margin: 22px 0 6px;
}
.hero-sub .payblock { border-left-color: var(--brand); }
.payblock .pay-main {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.payblock .pay-sub { margin: 5px 0 0; font-size: 15px; color: var(--ink-2); }
.on-band .payblock { border-left-color: var(--brand-band); }
.on-band .payblock .pay-main { color: var(--band-ink); }
.on-band .payblock .pay-sub { color: var(--band-ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--line); color: var(--ink-3); border-radius: 999px;
}
.chip.on { border-color: var(--brand); color: var(--brand); }
.sec-band .chip { border-color: var(--band-line); color: var(--band-ink-2); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line);
                font-size: 15.5px; color: var(--ink-2); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px;
  background: var(--brand); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.twocol { display: grid; gap: 40px; }
@media (min-width: 860px) { .twocol { grid-template-columns: 1fr 1fr; gap: 56px; } }

.notice {
  border-left: 3px solid var(--brand); background: var(--brand-tint);
  padding: 16px 18px; font-size: 15px; color: var(--ink-2); margin: 0 0 28px;
}
.notice b { color: var(--ink); }

/* ---------- Insights ----------
   Each card carries its own border rather than the grid painting hairlines
   through a 1px gap. The gap trick leaves any unfilled cell showing as a solid
   block of --line, which with five posts in a three-column grid rendered an
   empty sixth card. Per-card borders work at any post count and breakpoint. */
.postlist { display: grid; gap: 16px; }
@media (min-width: 860px) { .postlist { grid-template-columns: repeat(3, 1fr); } }
.postcard { background: var(--ground); padding: 26px 24px; text-decoration: none;
            border: 1px solid var(--line); border-radius: 14px;
            display: flex; flex-direction: column; gap: 11px;
            transition: background .15s, border-color .15s; }
.postcard:hover { background: var(--ground-alt); border-color: var(--brand); }
.postcard .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--brand); }
.postcard h3 { font-size: 20px; }
.postcard p { margin: 0; font-size: 15px; color: var(--ink-2); flex: 1; }
.postcard time { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.post { max-width: 68ch; }
.post h2 { font-size: clamp(23px, 2.8vw, 30px); margin: 1.8em 0 .5em; }
.post h3 { margin: 1.6em 0 .4em; }
.post p, .post li { color: var(--ink-2); }
.post ul, .post ol { padding-left: 22px; margin: 0 0 1.1em; }
.post li { margin-bottom: .45em; }
.post blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand);
  font-family: var(--display); font-size: 20px; line-height: 1.4; color: var(--ink);
  letter-spacing: -.012em;
}
.post blockquote p { margin: 0 0 .5em; }
.post blockquote p:last-child { margin-bottom: 0; }
/* Second paragraph of a pull quote is the attribution. */
.post blockquote p + p { font-family: var(--body); font-size: .62em; line-height: 1.5; color: var(--ink-3); letter-spacing: 0; margin-top: .7em; }
.post a { color: var(--brand); text-underline-offset: 3px; }
.post code { font-family: var(--mono); font-size: .9em; background: var(--ground-alt);
             padding: 2px 6px; border-radius: 2px; }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.byline { font-size: 14px; color: var(--ink-3); margin-top: 18px; }
.byline time { font-variant-numeric: tabular-nums; }

.post .tablewrap { overflow-x: auto; margin: 0 0 1.5em; }
.post table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.post th, .post td { text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.post th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.post td:first-child { color: var(--ink); width: 38%; }
.post td { color: var(--ink-2); }

.draft-flag { border-left: 3px solid var(--brand); background: var(--brand-tint); padding: 16px 18px; margin: 0 0 26px; font-size: 15px; color: var(--ink-2); }
.draft-flag b { color: var(--ink); }

/* ---------- Statement band ----------
   One idea, set large on the black ground. Breaks a long page of prose and
   gives the eye somewhere to land. */
.statement { background: var(--band); color: var(--band-ink); padding: 64px 0; }
@media (min-width: 768px) { .statement { padding: 88px 0; } }
.statement .rule { width: 64px; height: 3px; background: var(--brand-band); margin-bottom: 30px; }
.statement blockquote {
  margin: 0; font-family: var(--display); font-weight: 700; color: #fff;
  font-size: clamp(23px, 3.6vw, 40px); line-height: 1.14; letter-spacing: -.024em;
  max-width: 24ch; text-wrap: balance;
}
.statement cite {
  display: block; margin-top: 24px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--band-ink-2); font-style: normal;
}

/* ---------- Testimonial ----------
   Not .statement. That is a full-bleed band built for a short pull quote set
   large, with the type on a child blockquote and the attribution on a cite. The
   homepage put .statement on the blockquote itself, so none of its child rules
   matched: the quote kept the band's 88px vertical padding and its zero
   horizontal padding, and lost every type rule. A 105-word client reference
   inside a contained section wants a card, and wants reading size. */
.quote { margin: 0; background: var(--band); color: var(--band-ink);
         border-radius: 16px; padding: 32px 26px; }
@media (min-width: 768px) { .quote { padding: 44px 46px; } }
.quote p { margin: 0; color: var(--band-ink); font-size: clamp(16.5px, 1.35vw, 19px);
           line-height: 1.62; max-width: 70ch; }
.quote footer { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--band-line);
                font-size: 15px; color: var(--band-ink); }
.quote .ctx { display: block; margin-top: 5px; color: var(--band-ink-2); font-size: 14.5px; }

/* ---------- Regions ---------- */
.regions { display: grid; gap: 16px; }
@media (min-width: 760px) { .regions { grid-template-columns: repeat(3, 1fr); } }
.region { background: var(--ground); padding: 26px 24px 28px;
          border: 1px solid var(--line); border-radius: 14px; }
.sec-alt .region { background: var(--ground-alt); }
.region h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 500; margin: 0 0 14px; }
.region a { display: block; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.9vw, 20px); letter-spacing: -.018em; }
.region a:hover { color: var(--brand); }
.region p { font-size: 14.5px; color: var(--ink-3); margin: 10px 0 0; }
.region address { font-style: normal; font-size: 14.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }

/* ---------- Quiet aside ---------- */
.aside-note { border-left: 3px solid var(--line); padding: 2px 0 2px 22px; max-width: 64ch; }
.aside-note h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 10px; }
.aside-note p { color: var(--ink-3); font-size: 15px; margin: 0; }