/* ============================================================
   Smarter Consolidated Holdings

   Palette SAMPLED from the logo artwork, not eyeballed: the PNG was
   decoded and its opaque pixels tallied. #044C9C is 55% of the
   lockup, #1C1C1C is 27%.

   ⚠️ THEME IS LIGHT, AND THAT IS FORCED BY THE LOGO, NOT TASTE.
   The previous build was dark with an amber accent, which worked
   because amber is a light colour. This blue is dark: #044C9C on a
   near-black ground measures about 2.1:1, far under the 4.5:1 body
   text needs, and the wordmark itself is set in that blue. On white
   the same blue measures about 8.6:1. A dark rebuild would have
   meant recolouring the brand, so the ground moved instead.

   Contrast, measured:
     #044C9C on #FFFFFF   8.6:1   accent text, links, headings
     #1C1C1C on #FFFFFF  16.9:1   body
     #54606E on #FFFFFF   6.6:1   secondary body
     #FFFFFF on #044C9C   8.6:1   button labels, blue band
   Neutrals are biased cool toward the blue so they read as chosen
   rather than as a default grey.

   ONE accent (#044C9C). ONE radius (2px). ONE family (Archivo).
   ============================================================ */

:root {
  --blue:       #044C9C;
  --blue-deep:  #033A78;
  --blue-tint:  #EDF2F9;
  --ink:        #1C1C1C;

  --paper:      #FFFFFF;
  --paper-2:    #F4F6F9;
  --paper-3:    #E9EDF3;
  --rule:       #DFE4EC;

  --fg:         #1C1C1C;
  --fg-dim:     #54606E;
  --fg-faint:   #7C8794;

  --on-dark:      #FFFFFF;
  --on-dark-dim:  #D6DCE4;

  --font: "Archivo", "Segoe UI", system-ui, sans-serif;

  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-md:  1rem;
  --t-lg:  1.125rem;
  --t-xl:  1.375rem;
  --t-2xl: clamp(1.6rem, 2.6vw, 2.1rem);
  --t-3xl: clamp(2rem, 4vw, 3rem);
  --t-4xl: clamp(2.1rem, 4.2vw, 3.3rem);

  --radius: 2px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --bay: clamp(4.5rem, 9vw, 8rem);
  --shell: 78rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.015em; line-height: 1.2; }

p { margin: 0; max-width: 62ch; text-wrap: pretty; color: var(--fg-dim); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--radius); }
img { max-width: 100%; height: auto; display: block; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.bay { padding-block: var(--bay); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.eyebrow {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue); margin: 0;
}
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--fg-dim); max-width: 44ch; }

/* ---------- Header ----------
   The HORIZONTAL lockup (mark left, two lines of type right, about
   5.3:1) goes here. It replaced a workaround where the mark sat
   beside a typeset name, which existed only because the stacked
   artwork puts "CONSOLIDATED HOLDINGS" on a thin bottom line that
   renders around 5px at any height a masthead allows. The
   horizontal version gives that line roughly twice the height at
   the same logo height, so the real artwork can be used.

   Sized by WIDTH. At 5.3:1 a height-first rule makes the descriptor
   illegible again, which is the whole problem this asset solved.
   The stacked lockup is still used in the footer. */
.masthead { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--rule); }
@supports (backdrop-filter: blur(8px)) { .masthead { backdrop-filter: blur(10px); } }
.masthead-in { height: 76px; display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem; }

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: clamp(11.5rem, 22vw, 16rem); height: auto; }

.nav { display: flex; align-items: stretch; gap: clamp(1rem, 2.2vw, 1.9rem); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  color: var(--fg-dim); white-space: nowrap; transition: color 0.15s;
}
.nav a:hover { color: var(--blue); }

/* ---------- Header dropdowns ----------
   The trigger is a real <button> with aria-expanded, and the panel opens on
   :hover, :focus-within and the expanded state alike, so pointer, keyboard
   and touch all reach it. Anchored at top:100% of a full height trigger, so
   there is no dead gap for the pointer to fall through on the way down. */
.drop { position: relative; display: flex; }
.drop-t {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--fg-dim); white-space: nowrap; transition: color 0.15s;
}
.drop-t:hover, .drop:hover .drop-t, .drop-t[aria-expanded="true"] { color: var(--blue); }
.chev { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transition: transform 0.18s ease; }
.drop:hover .chev, .drop-t[aria-expanded="true"] .chev { transform: rotate(180deg); }

.drop-p {
  position: absolute; top: 100%; left: -0.9rem; z-index: 2;
  min-width: 21rem; padding: 0.45rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 18px 34px -22px rgba(4, 76, 156, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.drop:hover .drop-p,
.drop:focus-within .drop-p,
.drop-t[aria-expanded="true"] + .drop-p {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* .nav a sets a 44px centred row; these are two line items, so they need a
   more specific selector to opt out rather than fighting it. */
.nav .drop-p a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  min-height: 0; padding: 0.65rem 0.8rem; white-space: normal;
  border-radius: var(--radius);
}
.nav .drop-p a:hover { background: var(--paper-2); }
.drop-p b { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.drop-p span { font-size: var(--t-xs); line-height: 1.4; color: var(--fg-faint); }
.nav .drop-p a:hover b { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .drop-p, .chev { transition-duration: 0.01ms; }
}

/* Group headings in the mobile panel. */
.menu-h {
  margin: 0; padding-top: 1.35rem; padding-bottom: 0.35rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-faint);
  border-top: 1px solid var(--rule);
}
.menu-h:first-child { border-top: 0; padding-top: 0.5rem; }
/* A standalone item after a group needs more air than a rule alone gives it,
   or it reads as the last entry of the group above. */
.menu a.menu-plain { margin-top: 0.85rem; }
/* The link after a heading belongs to it, so it should not carry its own rule. */
.menu-h + a { border-top: 0; }

/* ---------- Mobile menu ----------
   Below 66rem the inline links and the login button are replaced by a
   disclosure button. They used to just disappear, which left phones with no
   way to reach any internal page at all. The breakpoint went to 66rem when
   the portal CTA was added and five flat links no longer fit, then back down
   to 56rem once those links were grouped into two dropdowns. Measured: the
   header needs about 700px, and slack at 897px is comfortable.

   The panel is absolutely positioned against .masthead, which works
   because the masthead is position: sticky and so is already a containing
   block. Note it also carries backdrop-filter, which would capture a
   position: fixed panel too. Absolute is the honest choice here either way,
   since the panel should scroll away with the header it belongs to. */
.burger {
  display: none; align-self: center;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.burger span:not(.sr-only) {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.2s ease, opacity 0.15s ease;
}
/* 7px = half the 5px gap plus the 2px bar, so the arms meet on the centre line. */
.masthead.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.masthead.open .burger span:nth-child(2) { opacity: 0; }
.masthead.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: 0 14px 28px -20px rgba(4, 76, 156, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  /* visibility is delayed on the way out only, so the fade is visible but
     the hidden panel never eats a tap. Not display:none, which cannot
     transition, and not a 1fr->0fr grid row, which Chrome refuses to
     animate at all. */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.masthead.open .menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.menu nav { display: flex; flex-direction: column; }
.menu a {
  padding-block: 1.05rem;
  font-size: var(--t-md); font-weight: 600; color: var(--ink);
  text-decoration: none; border-top: 1px solid var(--rule);
}
.menu a:first-child { border-top: 0; }
.menu a:active { color: var(--blue); }
/* .menu a already sets a rule above each item and inherits ink; the CTA is a
   button, so it opts out of both. Needs .menu a.menu-cta to outrank .menu a. */
.menu a.menu-cta {
  margin: 1.25rem 0 1.5rem; border-top: 0;
  color: #FFFFFF; justify-content: center; padding-block: 0.95rem;
}

@media (max-width: 56rem) {
  .nav .opt { display: none; }
  .burger { display: flex; }
}
/* Above the breakpoint the panel must never appear, even if a stale
   .open class survives an orientation change. */
@media (min-width: 56.0625rem) { .menu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu, .burger span:not(.sr-only) { transition-duration: 0.01ms; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  text-decoration: none; white-space: nowrap;
  padding: 0.9rem 1.5rem; min-height: 3rem;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #FFFFFF; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-line { border-color: var(--rule); color: var(--ink); background: var(--paper); }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }
/* Over photography the outline button needs its own ground or it
   disappears into whatever is behind it. */
.on-photo .btn-line { border-color: rgba(255,255,255,0.55); color: #FFFFFF; background: transparent; }
.on-photo .btn-line:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

/* ---------- Photography ----------
   Pexels License, free for commercial use, no attribution required.
   Self hosted rather than hotlinked so the site makes no third
   party image requests, which is what the privacy policy claims.

   ⚠️ EVERY photo carries a scrim. White type over an unmodified
   photograph fails contrast somewhere in the frame regardless of
   how dark the crop looked when you tested it. */
.media { position: relative; isolation: isolate; background: var(--ink); }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.media::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.media, .media h1, .media h2, .media h3 { color: var(--on-dark); }
.media p { color: var(--on-dark-dim); }
.media .eyebrow { color: #9FC4EE; }

/* Two stacked gradients compound: combined alpha is
   1 - (1-a1)(1-a2), so a pair that each look moderate arrive at
   almost opaque. The first version of this was 0.40 and 0.34 on the
   right edge, which multiplied out to 0.60 and buried the
   photograph entirely. These are tuned so the shingles read on the
   right while the headline still sits on dense scrim at the left. */
.media-hero::after {
  background:
    linear-gradient(90deg, rgba(12,18,26,0.92) 0%, rgba(12,18,26,0.80) 38%, rgba(12,18,26,0.30) 70%, rgba(12,18,26,0.10) 100%),
    linear-gradient(180deg, rgba(12,18,26,0.50) 0%, rgba(12,18,26,0.10) 45%, rgba(12,18,26,0.62) 100%);
}
@media (max-width: 60rem) {
  /* No right-hand breathing room on a phone, so the scrim goes flat
     and heavy or the headline lands on shingles. */
  .media-hero::after { background: linear-gradient(180deg, rgba(12,18,26,0.86) 0%, rgba(12,18,26,0.78) 55%, rgba(12,18,26,0.90) 100%); }
}
.media-band::after { background: linear-gradient(180deg, rgba(12,18,26,0.82) 0%, rgba(12,18,26,0.46) 50%, rgba(12,18,26,0.86) 100%); }
.media-band { border-block: 1px solid var(--rule); }
.media-band h2 { max-width: 20ch; }

/* ---------- Section that continues a media band ----------
   The cards pull up over the band's bottom edge so the headline in the
   band and the cards below it read as one unit rather than two strangers. */
.band-follow { position: relative; z-index: 1; }
.band-follow > .shell { padding-block: 0 var(--bay); }
.band-follow .bento { margin-top: calc(-1 * clamp(3rem, 6vw, 5rem)); }
.band-follow .cell { box-shadow: 0 18px 40px rgba(12, 18, 26, 0.10); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(4.5rem, 9vw, 7rem); }
.hero-grid { display: grid; }
.hero h1 { max-width: 24ch; margin-top: 1.25rem; }
.hero .lede { margin-top: 1.5rem; }
.hero .actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Page hero (internal, no photo) ---------- */
.page-hero { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.page-hero h1 { font-size: var(--t-3xl); max-width: 22ch; margin-top: 1rem; }
.page-hero .lede { margin-top: 1.35rem; max-width: 52ch; }
.page-hero.media { background: var(--ink); border-bottom: 0; }

/* ---------- Statement ---------- */
.statement { border-block: 1px solid var(--rule); background: var(--paper-2); }
.statement p { max-width: 30ch; font-size: var(--t-2xl); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.statement .after { margin-top: 1.5rem; font-size: var(--t-md); max-width: 52ch; color: var(--fg-dim); font-weight: 400; letter-spacing: 0; }

/* ---------- Two paths ---------- */
.paths { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 54rem) { .paths { grid-template-columns: 1fr 1fr; } }
.path { background: var(--paper); padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; gap: 0.9rem; text-decoration: none; color: inherit; transition: background-color 0.18s; }
.path:hover { background: var(--blue-tint); }
.path h3 { font-size: var(--t-2xl); color: var(--ink); }
.path p { font-size: var(--t-sm); }
.path .who { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.path .go { margin-top: auto; padding-top: 1rem; font-size: var(--t-sm); font-weight: 700; color: var(--blue); }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.bento-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-3 > :first-child { grid-column: 1 / -1; }
@media (min-width: 60rem) { .bento-3 { grid-template-columns: 1.4fr 1fr 1fr; } .bento-3 > :first-child { grid-column: auto; } }
.cell { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 0.85rem; }
.cell h3 { color: var(--ink); }
.cell p { font-size: var(--t-sm); }
.cell-lead { background: var(--paper-2); }
.cell-lead h3 { font-size: var(--t-2xl); }
.cell-lead p { font-size: var(--t-md); }

/* ---------- Figures ---------- */
.figures { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.figure { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.4rem) var(--gutter); }
.figure b { display: block; font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--blue); }
.figure span { display: block; margin-top: 0.6rem; font-size: var(--t-sm); color: var(--fg-dim); max-width: 24ch; }
/* The .figures band is kept but currently unused. It rendered four
   placeholder zeroes, which is worse than showing nothing, so the
   section was removed from the page rather than filled with
   invented metrics. Drop it back into the home page the day there
   are real numbers to put in it:

     <section class="figures" aria-label="The group at a glance">
       <div class="figure"><b class="num">12</b><span>Companies</span></div>
     </section> */

/* ---------- Reasons ---------- */
.reasons { display: grid; }
.reason { display: grid; gap: clamp(0.75rem, 3vw, 3rem); grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); align-items: start; }
.reasons > :last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 50rem) { .reason { grid-template-columns: 1fr; } }
.reason h3 { font-size: var(--t-lg); color: var(--ink); }
.reason p { font-size: var(--t-sm); }

/* ---------- Support grid ---------- */
.support { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 54rem) {
  .support { grid-template-columns: 1fr 1fr; }
  .support > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.support > div { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 0.8rem; }
.support h3 { font-size: var(--t-lg); color: var(--ink); }
.support p { font-size: var(--t-sm); }
.support .tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }

/* ---------- Brands and affiliates ---------- */
.brand-row {
  /* A grid rather than a wrapping flex row: with six marks the flex version
     fit five and orphaned the sixth on its own line, which reads as a
     mistake. Even columns keep any count looking deliberate. */
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  align-items: center; justify-items: center;
  gap: 2.25rem 2.5rem;
}
@media (min-width: 48rem) { .brand-row { grid-template-columns: repeat(3, 1fr); } }
.brand-row a { display: block; transition: opacity 0.18s ease; }
.brand-row a:hover, .brand-row a:focus-visible { opacity: 0.7; }
.brand-row img { display: block; height: 44px; width: auto; max-width: 100%; }
@media (max-width: 40rem) {
  .brand-row { gap: 1.6rem 2rem; }
  .brand-row img { height: 34px; }
}

/* ---------- Header CTA ----------
   .nav a sets colour and a 44px min-height, so the button needs
   .nav a.btn-nav to outrank it rather than .btn-nav alone. */
.nav a.btn-nav {
  align-self: center;
  min-height: 2.5rem; padding: 0.5rem 1.05rem;
  background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  font-weight: 700;
}
.nav a.btn-nav:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #FFFFFF; }

/* ---------- Sign in ----------
   Split screen rather than a centred card. The form panel is the fixed
   part; the brand panel collapses to a band above it on narrow screens. */
.signin { display: grid; min-height: 100dvh; }
@media (min-width: 60rem) { .signin { grid-template-columns: 1.05fr 1fr; } }

.signin-brand { position: relative; display: grid; align-items: end; background: var(--ink); min-height: 13rem; overflow: hidden; }
.signin-brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* Single scrim, not two. Stacked scrims compound to 1-(1-a1)(1-a2) and bury
   the photograph, which is what happened on the home hero. */
.signin-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,20,40,0.10) 0%, rgba(3,20,40,0.22) 45%, rgba(3,20,40,0.80) 100%); }
.signin-brand-in { position: relative; z-index: 1; padding: clamp(1.75rem, 4vw, 3.5rem); }
.signin-brand-in .eyebrow { color: #9CC2EE; }
.signin-brand-in h1 { font-size: var(--t-2xl); color: #FFFFFF; margin-top: 0.9rem; max-width: 17ch; }
.signin-brand-in p:last-child { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--on-dark-dim); max-width: 34ch; }

.signin-panel { display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem) var(--gutter); background: var(--paper); }
.signin-form { width: 100%; max-width: 24rem; }
.signin-logo { display: inline-block; }
.signin-logo img { width: 12.5rem; height: auto; }
.signin-form h2 { font-size: var(--t-2xl); margin-top: 2rem; }
.signin-sub { font-size: var(--t-sm); margin-top: 0.65rem; }

.signin-form form { display: grid; margin-top: 2rem; }
.signin-form form > label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 0.45rem; }
.signin-form input[type="email"],
.signin-form input[type="password"] {
  width: 100%; margin-bottom: 1.15rem;
  font-family: inherit;
  /* 1rem, not 0.875rem: iOS Safari zooms the viewport on focus below 16px. */
  font-size: var(--t-md);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.75rem 0.9rem; min-height: 3rem;
}
.signin-form input[type="email"]:focus, .signin-form input[type="password"]:focus { border-color: var(--blue); }

.signin-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
/* Both are real tap targets on a form, so they get a 44px box. The link in
   .signin-foot deliberately does not: it sits inside a sentence and padding
   it out to 44px would break the line it belongs to. */
.signin-check, .signin-row > a { min-height: 44px; display: inline-flex; align-items: center; }
.signin-check { gap: 0.5rem; font-size: var(--t-sm); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--fg-dim); }
.signin-check input { accent-color: var(--blue); width: 1rem; height: 1rem; }
.signin-row > a { font-size: var(--t-sm); font-weight: 600; color: var(--blue); }
.signin-go { width: 100%; justify-content: center; }

.signin-msg { margin-top: 1.15rem; padding: 0.85rem 1rem; font-size: var(--t-sm); color: var(--ink); background: var(--blue-tint); border-left: 2px solid var(--blue); }
.signin-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.signin-foot a { color: var(--blue); font-weight: 600; }

/* ---------- Lead forms ---------- */
.lead-band { background: var(--paper-2); border-block: 1px solid var(--rule); }
.lead { max-width: 44rem; }
.lead-grid { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .lead-grid { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; margin-bottom: 1.15rem; }
.field label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 0.45rem; }
.field label span { font-weight: 400; letter-spacing: 0.04em; color: var(--fg-faint); text-transform: none; }
.field input, .field select, .field textarea {
  font-family: inherit;
  /* 1rem, not 0.875rem: iOS Safari zooms the viewport on focus below 16px. */
  font-size: var(--t-md); line-height: 1.5;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.75rem 0.9rem; min-height: 3rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field select { appearance: auto; }
.lead-note { margin-top: 1rem; font-size: 11.5px; color: var(--fg-faint); max-width: 44rem; }

.lead-check { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 1.5rem; font-size: var(--t-sm); color: var(--fg-dim); cursor: pointer; }
.lead-check input { accent-color: var(--blue); width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; flex: none; }
.lead-go { margin-top: 0.25rem; }
.lead-go[disabled] { opacity: 0.65; cursor: default; }

/* Two states, and they must look different. The failure case is the one
   that matters: it means the enquiry did not arrive. */
.lead-status { margin-top: 1.15rem; padding: 0.85rem 1rem; font-size: var(--t-sm); max-width: 44rem; }
.lead-status.is-good { color: var(--ink); background: var(--blue-tint); border-left: 2px solid var(--blue); }
.lead-status.is-bad { color: #7A1F1F; background: #FBEDED; border-left: 2px solid #A32B2B; }

/* ---------- Contact layout ----------
   Form and reassurance side by side. The context that decides whether
   somebody fills a form in needs to be visible while they are filling it in,
   not stacked underneath where it is read afterwards or not at all. */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.contact-aside > div { padding-block: 1.35rem; border-top: 1px solid var(--rule); }
.contact-aside > div:first-child { border-top: 0; padding-top: 0; }
.contact-aside h3 { font-size: var(--t-md); color: var(--ink); }
.contact-aside p { margin-top: 0.4rem; font-size: var(--t-sm); }
.contact-aside a { color: var(--blue); font-weight: 600; }

/* ---------- Rate card ----------
   On a page whose product IS a number, the number has to be the largest
   thing on the screen. It was previously delivered as body copy inside a
   sentence. Sits beside the hero headline rather than under it. */
.hero-split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.rate-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); }
.rate-card .big {
  display: block; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(4rem, 11vw, 6.5rem); color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.rate-card .big-sub { display: block; margin-top: 0.6rem; font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.rate-card ul { list-style: none; margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.85rem; }
.rate-card li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); color: var(--fg-dim); }
.rate-card li b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Versus ----------
   The copy is doing a comparison, so the layout should be one too. Two
   columns, the second one accented, because the whole point is that the
   right hand side is the better deal. */
.versus { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 2.5rem; }
@media (min-width: 48rem) { .versus { grid-template-columns: 1fr 1fr; } }
.versus > div { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.25rem); }
.versus > div:last-child { background: var(--blue-tint); }
.versus h3 { font-size: var(--t-lg); color: var(--fg-dim); }
.versus > div:last-child h3 { color: var(--blue); }
.versus ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.versus li { position: relative; padding-left: 1.5rem; font-size: var(--t-sm); color: var(--fg-dim); }
.versus li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.6rem; height: 1px; background: var(--fg-faint); }
.versus > div:last-child li { color: var(--ink); }
.versus > div:last-child li::before { background: var(--blue); }

/* ---------- Terms table ----------
   A <dl>, because these are term and value pairs and nothing else. Ruled
   rows rather than a boxed table: the page already has enough containers,
   and a rule reads as a spec sheet where a card reads as marketing. */
.terms { display: grid; margin: 2.25rem 0 0; }
.terms > div { padding-block: 1rem; border-top: 1px solid var(--rule); display: grid; gap: 0.2rem; }
@media (min-width: 40rem) {
  .terms > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 2rem; align-items: baseline; }
}
.terms > div:last-child { border-bottom: 1px solid var(--rule); }
.terms dt { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.terms dd { margin: 0; font-size: var(--t-sm); color: var(--fg-dim); font-variant-numeric: tabular-nums; }

.callout {
  margin-top: 2.25rem; padding: 1.15rem 1.35rem; max-width: 62ch;
  font-size: var(--t-sm); color: var(--ink);
  background: var(--blue-tint); border-left: 2px solid var(--blue);
}
.callout b { font-weight: 700; color: var(--blue); }

/* ---------- Checklist ---------- */
.checks { display: grid; }
.checks div { padding-block: 1rem; border-top: 1px solid var(--rule); font-size: var(--t-sm); color: var(--fg-dim); }
.checks div:last-child { border-bottom: 1px solid var(--rule); }
.checks strong { color: var(--ink); font-weight: 700; }

/* ---------- Process run ---------- */
.run { display: grid; counter-reset: step; }
@media (min-width: 62rem) { .run { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: step; padding: clamp(1.5rem, 3vw, 2.25rem); border-top: 2px solid var(--rule); display: flex; flex-direction: column; gap: 0.7rem; }
.step:first-child { border-top-color: var(--blue); }
.step::before { content: counter(step, decimal-leading-zero); font-variant-numeric: tabular-nums; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--blue); }
.step h3 { font-size: var(--t-md); color: var(--ink); }
.step p { font-size: var(--t-sm); }

/* ---------- Contact band ----------
   Solid brand blue. White on #044C9C is 8.6:1, so the one place
   the brand colour gets to fill the frame is also the one place
   the type is largest. */

/* ---------- Footer ----------
   Light, because the full stacked lockup lives here and the
   artwork is drawn for a light ground. A reversed variant would
   have meant recolouring the wordmark's blue. */
.footer { background: var(--paper-2); border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.footer img { width: 11rem; }
.footer h4 { margin: 0 0 0.9rem; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--t-sm); }
.footer a { color: var(--fg-dim); text-decoration: none; }
.footer a:hover { color: var(--blue); }
/* Addresses in the brand column rather than a fifth footer column, which
   would crowd the auto-fit grid at tablet widths. Labelled, because the two
   groups route to different people. */
.footer-mail { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--t-sm); }
.footer-mail li { display: grid; gap: 0.1rem; }
.footer-mail span { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.footer-mail a { color: var(--blue); font-weight: 600; overflow-wrap: anywhere; }

.footer-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-faint); }
.footer-base p { color: var(--fg-faint); max-width: 60ch; }

/* ---------- Legal documents ---------- */
.doc { max-width: 44rem; }
.doc h2 { font-size: var(--t-xl); margin-top: 2.5rem; color: var(--ink); }
.doc p, .doc li { font-size: var(--t-sm); color: var(--fg-dim); max-width: none; }
.doc ul, .doc ol { display: grid; gap: 0.5rem; padding-left: 1.2rem; margin: 0.75rem 0 0; }
.doc strong { color: var(--ink); }
.doc a { color: var(--blue); }
.doc-meta { font-size: var(--t-xs); color: var(--fg-faint); border-left: 2px solid var(--blue); padding-left: 1rem; margin-top: 1.5rem; }
.entity-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.4rem; }
.entity-list li { font-size: var(--t-sm); font-weight: 700; color: var(--ink); padding: 0.65rem 0.9rem; background: var(--paper-2); border-left: 2px solid var(--blue); border-radius: var(--radius); }

/* ---------- Utilities ---------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; z-index: 60; background: var(--blue); color: #FFFFFF; padding: 0.75rem 1.15rem; font-weight: 700; }
.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; }

/* ---------- Motion ----------
   Native CSS scroll-driven animation. No library, no scroll
   listener, no pinning. Content settles as it arrives, and that
   is the whole of it. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}