/* ==========================================================================
   claims.company
   Flat only: no gradients, shadows, glows or textures anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens

   The brand hexes below are exactly as specified in the brand guide. Six of
   them do not clear WCAG AA (4.5:1) when used as small text, so each has an
   AA-safe text variant alongside it, derived by darkening or lightening the
   same hue until it clears 4.5:1. The brand token keeps its original value and
   is still used for every non-text role (rules, ticks, borders, large figures).

   Measured before / after, small text only:
     grey        #939BA6 on page   2.59:1  ->  #68727F  4.51:1
     faint       #A2AAB4 on page   2.17:1  ->  #677280  4.51:1
     muted       #727B86 on white  4.29:1  ->  #666E78  4.56:1
     amber text  #B57A12 on white  3.65:1  ->  #95650F  4.51:1
     on-dark     #8FB0D4 on deep   4.13:1  ->  #9AB8D8  4.52:1
     on-dark     #A9BFD6 on stat   4.15:1  ->  #B3C7DB  4.53:1

   The muted and amber text variants are solved against the darkest surface
   each one actually sits on, not just white: the amber pill (#FAF1DE) behind
   the anchor tag, the soft grey pill (#EEF1F4) behind the second tag, and the
   page tint (#F4F6F8) inside the product visuals. The figures above are the
   worst case of those.

   To revert to the literal brand hexes, point each *-text token at its
   brand token above it. Doing so reintroduces the AA failures.
   -------------------------------------------------------------------------- */

:root {
  --bg: #F4F6F8;
  --navy: #3A6EA5;
  --deep: #27496D;
  --deeper: #1C3550;
  --amber: #E0A030;
  --amber-border: #F0DEBB;
  --amber-pill: #FAF1DE;
  --unfilled: #C2C8CF;
  --line: #E2E6EB;
  --line-soft: #EEF1F4;
  --white: #fff;

  /* Brand tokens, non-text roles */
  --grey: #939BA6;
  --faint: #A2AAB4;
  --muted: #727B86;
  --amber-text-brand: #B57A12;
  --on-dark-brand: #8FB0D4;

  /* AA-safe text variants */
  --body: #4F5965;
  --grey-text: #68727F;
  --faint-text: #677280;
  --muted-text: #666E78;
  --amber-text: #95650F;
  --on-dark: #9AB8D8;
  --on-dark-lead: #C3D2E2;
  --on-dark-footnote: #B3C7DB;
  --nav-link: #5A6472;
  --amber-card-body: #6F5C2E;

  --maxw: 1120px;
  --gutter: 32px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--deep);
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: var(--navy); }

:focus-visible {
  outline: 2.5px solid var(--navy);
  outline-offset: 3px;
  border-radius: 3px;
}
.band :focus-visible,
.btn--on-dark:focus-visible {
  outline-color: #fff;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------------------
   The mark

   Five identical ticks rotated 72 degrees about (50, 50). Tick 0 is at twelve
   o'clock. Stroke weight comes from --w, set per instance in the markup.
   Everything is CSS driven, so the mark is correct with JavaScript disabled.
   -------------------------------------------------------------------------- */

.star, .glyph { overflow: visible; }

.tick {
  fill: none;
  stroke: var(--navy);
  stroke-width: var(--w, 5.5);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Amber only at a full five, only ever the tick at twelve o'clock. */
.tick--top { stroke: var(--amber); }

/* Unfilled ticks: grey, at 70 per cent of the stroke weight. */
.tick--off {
  stroke: var(--unfilled);
  stroke-width: calc(var(--w, 5.5) * 0.7);
}

.star--reversed .tick { stroke: #fff; }
.star--reversed .tick--top { stroke: var(--amber); }
.star--reversed .tick--off { stroke: rgba(255, 255, 255, 0.32); }

.glyph--amber .tick { stroke: var(--amber); }

/* Hero draw-on.

   These rules apply only when the head script has confirmed the animation will
   actually run. The ticks start undrawn and tick 0 holds navy, so the amber
   arrives with the final state rather than sitting there from the first frame.
   Without `js-anim` the mark renders complete and amber, as it should. */
.js-anim #hero-star .tick {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.js-anim #hero-star .tick--top {
  stroke: var(--navy);
  transition: stroke 420ms ease;
}
.js-anim #hero-star.is-complete .tick--top {
  stroke: var(--amber);
}

/* --------------------------------------------------------------------------
   Wordmark
   Always lowercase, one word, with the dot.
   -------------------------------------------------------------------------- */

.wordmark {
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .wm1 { color: var(--navy); font-weight: 600; }
.wordmark .wm2 { color: var(--grey-text); font-weight: 400; }
.wordmark--on-dark .wm1 { color: #fff; }
.wordmark--on-dark .wm2 { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: var(--deep);
  padding: 11px 24px;
  border-radius: 10px;
  border: 1.5px solid var(--deep);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--navy); border-color: var(--navy); }

.btn--ghost {
  background: transparent;
  color: var(--deep);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn--on-dark {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
}
.btn--on-dark:hover { background: #E8EEF5; border-color: #E8EEF5; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

nav.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 246, 248, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  text-decoration: none;
  /* Keeps a 44px tap target once the wordmark drops away on tablet and the
     mark alone is only 30px tall. */
  min-height: 44px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--nav-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links .btn { color: #fff; }
.nav-links .btn:hover { color: #fff; }

/* Between 640 and 820 the full wordmark is what crowds the links out, not the
   links themselves. Dropping to the mark alone frees about 120px, which is
   enough to keep all five sections reachable on a tablet. The mark on its own
   is a permitted lockup, and at 30px it is still well above the size the
   stroke weights are banded for. */
@media (min-width: 660px) and (max-width: 879px) {
  .nav-brand .wordmark { display: none; }
  .nav-links { gap: 15px; font-size: 13.5px; }
  .nav-links a:not(.btn) { white-space: nowrap; }
}

/* Below 640 there is genuinely no room for six items, so the CTA carries the
   bar alone. The page is ~11 screens at 375px with no way to jump between
   sections. A short anchor list in the footer would fix that, but the brief
   specifies the footer contents exactly, so it needs sign-off first. */
@media (max-width: 659px) {
  .nav-links a:not(.btn) { display: none; }
}

/* On the narrowest phones the wordmark and the CTA together overflow the bar
   and the button drops to a second line. */
@media (max-width: 380px) {
  .nav-brand { font-size: 16px; }
  .nav-links .btn { padding: 10px 15px; font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-text);
  margin-bottom: 18px;
}
.kicker--on-dark { color: var(--on-dark); }

h1 {
  font-size: clamp(38px, 6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 24px;
}

h2 {
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--deep);
  margin: 0 0 16px;
  max-width: 760px;
}

.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--body);
  max-width: 620px;
  margin: 0 auto;
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  max-width: 680px;
  margin: 0 0 40px;
}
.lead strong { color: var(--deep); font-weight: 600; }

.prose {
  max-width: 680px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.65;
}
.prose p + p { margin-top: 18px; }
.prose strong { color: var(--deep); font-weight: 600; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* --------------------------------------------------------------------------
   Sections and bands
   -------------------------------------------------------------------------- */

section {
  padding: 74px 0 60px;
  scroll-margin-top: 72px;
}

.band {
  background: var(--deep);
  padding: 0;
}
.band h2 { color: #fff; }
.band .lead { color: var(--on-dark-lead); }
.band .lead strong { color: #fff; }
.band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 74px var(--gutter) 80px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  max-width: 840px;
  margin: 0 auto;
  padding: 96px var(--gutter) 88px;
  text-align: center;
}
.hero-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
}

.chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.chip {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
}
.chip--amber {
  color: var(--amber-text);
  border-color: var(--amber-border);
}

.actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   The evidence
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 26px 24px;
}
.figure {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.figure .accent { color: var(--amber); }
.stat-label {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-dark-lead);
}

.footnote {
  margin-top: 34px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-footnote);
  max-width: 820px;
}
.footnote svg { flex-shrink: 0; margin-top: 2px; }

/* --------------------------------------------------------------------------
   The framework
   -------------------------------------------------------------------------- */

.equation-card {
  padding: 44px 40px;
  margin: 0 0 18px;
  text-align: center;
}
.equation {
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 600;
  color: var(--deep);
  letter-spacing: -0.01em;
}
.equation .eq {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
}
.equation .frac {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.equation .num { display: block; padding: 0 16px 10px; }
.equation .den {
  display: block;
  border-top: 2.5px solid var(--deep);
  padding: 10px 16px 0;
}

.four-q {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.q-card { padding: 26px 24px; }
.q-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.q-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--deep);
}
.q-card .q {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.q-card p:not(.q) {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-text);
}
.q-card--amber { border-color: var(--amber-border); }
.q-card--amber h3 { color: var(--amber-text); }
.q-card--amber .q { color: var(--amber-text); }
.q-card--amber p:not(.q) { color: var(--amber-card-body); }

/* --------------------------------------------------------------------------
   What we do
   -------------------------------------------------------------------------- */

.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 820px) {
  .offers { grid-template-columns: 1fr; }
}
.offer {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 16px;
}
.tag--anchor { color: var(--amber-text); background: var(--amber-pill); }
.tag--second { color: var(--muted-text); background: var(--line-soft); }

.offer h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--deep);
  margin-bottom: 10px;
}
.offer-body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted-text);
}

.visual {
  margin-top: 24px;
  background: var(--bg);
  border: 1px solid #E9ECF0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.visual--rows {
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
}

.badge-mock {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1.6px solid var(--navy);
  border-radius: 15px;
  padding: 16px 22px;
  background: #fff;
}
.badge-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}
.badge-text { display: block; }
.bm-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
}
.bm-context {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted-text);
  margin-top: 8px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E9ECF0;
}
.row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.row-k { color: var(--body); }
.row-v { font-weight: 600; color: var(--deep); text-align: right; }
.row-v--amber { color: var(--amber-text); }

.moat {
  margin-top: 18px;
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-text);
}
.moat svg { flex-shrink: 0; margin-top: 2px; }
.moat strong { color: var(--deep); font-weight: 600; }
/* The only full-width text block on the page. Without a cap it runs to about
   113 characters a line at 1440px, well past comfortable reading. */
.moat span { max-width: 78ch; }

/* --------------------------------------------------------------------------
   The book
   -------------------------------------------------------------------------- */

.book-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 820px) {
  .book-grid { grid-template-columns: 1fr; gap: 40px; }
}
.book-cover {
  background: var(--deep);
  border-radius: 14px;
  aspect-ratio: 5 / 8;
  max-width: 280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 26px;
}
.bc-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.book-cover svg { margin-bottom: 18px; }
.bc-title {
  font-size: 27px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.bc-author {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-footnote);
}

/* inline-flex with a min-height gives the 44px tap target without changing
   how the link looks at rest. */
.quiet-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.quiet-link:hover { color: var(--deep); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 84px var(--gutter) 92px;
  text-align: center;
}
.contact-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}
.contact-inner h2 { margin-left: auto; margin-right: auto; }
.contact-inner .lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.contact-email { margin-top: 14px; font-size: 15px; }
.contact-email a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 500;
}
.contact-email a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  padding: 56px 0 64px;
  text-align: center;
}
.footer-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.footer-wordmark { font-size: 22px; }
.strapline {
  margin: 14px auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint-text);
}
.small {
  margin: 6px auto 0;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint-text);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

/* Card copy is set down at 14.5 to 15.5px so the desktop grids hold their
   shape. On a phone there is no grid to protect and it is just body text, so
   it comes up to 16px. Genuine small print, the footnote, the badge context
   and the footer, stays small on purpose. */
@media (max-width: 640px) {
  .offer-body,
  .stat-label,
  .q-card p:not(.q),
  .moat {
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .hero { padding: 64px var(--gutter) 60px; }
  section { padding: 56px 0 44px; }
  .band-inner { padding: 56px var(--gutter) 60px; }
  .contact-inner { padding: 64px var(--gutter) 68px; }
  .equation-card { padding: 32px 22px; }
  .offer { padding: 26px 22px; }
  .actions .btn { width: 100%; text-align: center; }
  .figure { font-size: 38px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}