/* ==========================================================================
   HBS Partner Central — site stylesheet
   Ported 1:1 from the Claude Design prototype. The per-element inline styles
   in the HTML are preserved verbatim so the rendered design is unchanged;
   this file carries everything the prototype kept in its <helmet> <style>
   blocks, plus the hover/focus states it expressed via style-hover /
   style-focus attributes.
   Brand: navy #082471 · red #c30908
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Public Sans', system-ui, sans-serif;
  color: #3D4F6B;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Archivo', sans-serif;
  color: #082471;
  letter-spacing: -0.02em;
}

/* Heading line-height varied per page in the prototype — kept exactly. */
.p-home h1, .p-home h2, .p-home h3, .p-home h4 { line-height: 1.05; }
.p-about h1, .p-about h2, .p-about h3, .p-about h4,
.p-stories h1, .p-stories h2, .p-stories h3, .p-stories h4,
.p-contact h1, .p-contact h2, .p-contact h3, .p-contact h4,
.p-help h1, .p-help h2, .p-help h3, .p-help h4 { line-height: 1.08; }
.p-legal h1, .p-legal h2, .p-legal h3, .p-legal h4 { line-height: 1.12; }

a { color: #c30908; text-decoration: none; }
a:hover { color: #082471; }

::selection { background: #c30908; color: #fff; }

img { max-width: 100%; }

input, textarea, select { font-family: 'Public Sans', sans-serif; }

/* ------------------------------------------------- 2. Accessibility utils */

/* Visible only to screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — off-screen until focused. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: #c30908;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* Honeypot — off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Never shown to, or focusable by, a real visitor. */
.hp {
  position: absolute !important;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form status line. Silent for screen readers on success (the button text
   already changes); shown to everyone when something goes wrong. */
.form-msg {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-msg.is-error {
  position: static !important;
  width: auto; height: auto;
  margin: 14px 0 0;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #c30908;
}
.on-dark .form-msg.is-error { color: #ffb3b3; }

/* Keyboard focus ring. The prototype set outline:none inline on form
   controls, so these need !important to win. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #c30908 !important;
  outline-offset: 2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark input:focus-visible,
.on-dark [tabindex]:focus-visible {
  outline-color: #ffffff !important;
}

/* Anchor targets clear the sticky header. */
section[id], div[id], h2[id] { scroll-margin-top: 92px; }

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

/* ------------------------------------------------------- 3. Hover states  */
/* Ported from the prototype's style-hover="…" attributes. !important is
   required because the base values are inline styles. */

.h-nav:hover        { color: #082471 !important; }                                  /* nav link */
.h-cta:hover        { background: #082471 !important; color: #fff !important; }      /* red -> navy */
.h-cta-inv:hover    { background: #fff !important; color: #082471 !important; }      /* red -> white */
.h-soft:hover       { color: #ff8a89 !important; }
.h-white:hover      { color: #fff !important; }
.h-navy:hover       { color: #082471 !important; }
.h-navy-bg:hover    { background: #082471 !important; }
.h-card:hover       { border-color: #c30908 !important; box-shadow: 0 12px 30px rgba(8, 36, 113, 0.08); }
.h-card-b:hover     { border-color: #c30908 !important; }

/* Ported from style-focus="…" on the contact form fields. */
.fld:focus { border-color: #082471 !important; }

/* ------------------------------------------------------- 4. Shared header */

.nav-toggle { display: none; }
.mobile-menu { display: none; }
.mobile-menu.is-open { display: flex; }

/* ----------------------------------------------------- 5. Shared footer   */

.ftr-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
}

/* --------------------------------------------- 6. Home page layout hooks  */

.hero-grid   { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; }
.numbers-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------- 7. Inner page layout hooks */

/* Breadcrumb list — semantic <ol>, laid out as the prototype's flex row. */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li { display: flex; align-items: center; gap: 9px; }

/* About */
.g2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Three-up card grids — gap differs between About and Help Centre. */
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.p-about .g3 { gap: 22px; }
.p-stories .g3 { gap: 22px; }
.p-help .g3 { gap: 20px; }

/* Partner Stories */
.story     { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: center; }
.story.rev { grid-template-columns: 1.1fr 0.9fr; }

/* Contact */
.cwrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.frow  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Section padding — three tiers, as in the prototype. */
.p-about   .pgpad, .p-stories .pgpad { padding: 80px 32px; }
.p-contact .pgpad, .p-help    .pgpad { padding: 72px 32px; }
.p-legal   .pgpad                    { padding: 64px 32px; }

/* ------------------------------------------------- 8. Help Centre — FAQ   */

.faq {
  border: 1px solid #EAEDF5;
  border-radius: 14px;
  padding: 0 22px;
  background: #fff;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #082471;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .2s; color: #c30908; flex-shrink: 0; }
.faq[open] summary .chev { transform: rotate(45deg); }
.faq .ans { padding: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: #5A6A88; }

/* ------------------------------------------------ 9. Legal pages — prose  */

.legal { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }

.toc {
  position: sticky;
  top: 96px;
  border-left: 2px solid #EAEDF5;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
}
/* The anchor must be the block box — otherwise each <li> contributes its own
   16px strut and the list grows ~3px per item taller than the design. */
.toc a { display: block; color: #5A6A88; font-size: 14px; font-weight: 600; }
.toc a:hover { color: #082471; }

.prose h2 { font-size: 22px; font-weight: 800; margin: 34px 0 12px; scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; }
.prose p  { font-size: 15.5px; line-height: 1.75; color: #4A5A78; margin-bottom: 12px; }
.prose ul { margin: 0 0 14px 20px; }
.prose li { font-size: 15.5px; line-height: 1.7; color: #4A5A78; margin-bottom: 7px; }

/* ================================================= 10. Breakpoints ======= */

@media (max-width: 920px) {

  /* Shared header */
  .nav-links       { display: none !important; }
  .nav-cta-desktop { display: none !important; }
  .nav-toggle      { display: inline-flex !important; }

  /* Shared footer */
  .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Home */
  .hero-grid    { grid-template-columns: 1fr !important; gap: 60px !important; padding: 56px 24px 76px !important; }
  .hero-h1      { font-size: 40px !important; }
  .hero-stats   { position: static !important; left: auto !important; bottom: auto !important; margin-top: 28px !important; min-width: 0 !important; }
  .grid-3       { grid-template-columns: 1fr 1fr !important; }
  .grid-2       { grid-template-columns: 1fr !important; }
  .numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 20px !important; }
  .sec-pad      { padding: 64px 24px !important; }
  .sec-title    { font-size: 32px !important; }
  .flow-op      { display: none !important; }
  .flow-card    { max-width: none !important; }

  /* Inner pages */
  .h1    { font-size: 34px !important; }
  .g2    { grid-template-columns: 1fr !important; gap: 32px !important; }
  .g3    { grid-template-columns: 1fr !important; }
  .g4    { grid-template-columns: 1fr 1fr !important; }
  .cwrap { grid-template-columns: 1fr !important; gap: 30px !important; }
  .frow  { grid-template-columns: 1fr !important; }

  .story, .story.rev { grid-template-columns: 1fr !important; gap: 22px !important; }
  .story-img { order: -1; }

  .legal { grid-template-columns: 1fr !important; gap: 28px !important; }
  .toc {
    position: static;
    border-left: none;
    border-top: 2px solid #EAEDF5;
    padding-left: 0;
    padding-top: 18px;
  }

  .p-about   .pgpad, .p-stories .pgpad { padding: 56px 24px !important; }
  .p-contact .pgpad, .p-help    .pgpad { padding: 52px 24px !important; }
  .p-legal   .pgpad                    { padding: 48px 24px !important; }
}

@media (max-width: 620px) {
  .site-nav  { padding: 14px 20px !important; }
  .grid-3    { grid-template-columns: 1fr !important; }
  .hero-h1   { font-size: 31px !important; }
  .hero-cta  { font-size: 26px !important; }
  .sec-title { font-size: 26px !important; }
  .cta-title { font-size: 32px !important; }
}

@media (max-width: 560px) {
  .ftr-grid { grid-template-columns: 1fr !important; }
}