/* ============================================================
 * CONTACT BAND — shared component (design system v2)
 * The standard contact form, embedded as the FOOTER's opening
 * element: the card straddles up out of the navy footer into the
 * section above. Split card: talk-to-us copy left, form right.
 * Success state swaps in-place.
 * Include with scripts/contact-band.js. Markup: snippets/contact-band.html
 * ============================================================ */

.cb {
  background: #fff;
  /* generous top padding — receives the phone/device overhang from the
     final CTA board above (the "no flat seams" hand-over) */
  padding: clamp(96px, 9vw, 150px) 0 clamp(56px, 6vw, 88px);
}

.cb__card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  background: var(--ge-bg-light, #F3F7FA);
  border-radius: 24px;
  padding: clamp(28px, 3.6vw, 56px);
}

.cb__intro h2 {
  margin: 0 0 12px;
  color: var(--ge-navy, #0F1438);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cb__intro p {
  margin: 0 0 22px;
  color: #4A5876;
  font-size: 16px;
  line-height: 1.6;
  max-width: 36ch;
}
.cb__lines { display: flex; flex-direction: column; gap: 12px; }
.cb__line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ge-navy, #0F1438);
  text-decoration: none;
  font-size: 15.5px;
}
.cb__line:hover .cb__line-label { color: var(--ge-blue, #1B367E); }
.cb__line-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E6ECF4;
  color: var(--ge-blue, #1B367E);
  display: grid;
  place-items: center;
}
.cb__line-ico svg { width: 18px; height: 18px; }
.cb__note {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: #4A5876;
}

/* ---------- the form ---------- */
.cb__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cb__field { display: flex; flex-direction: column; gap: 6px; }
.cb__field--full { grid-column: 1 / -1; }
.cb__field label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4A5876;
}
.cb__field input,
.cb__field textarea {
  font: inherit;
  font-size: 15.5px;
  color: var(--ge-navy, #0F1438);
  background: #fff;
  border: 1px solid #E6ECF4;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cb__field textarea { min-height: 120px; resize: vertical; }
.cb__field input:focus-visible,
.cb__field textarea:focus-visible {
  outline: none;
  border-color: var(--ge-sky, #2FB7F1);
  box-shadow: 0 0 0 3px rgba(47,183,241,0.45);
}
.cb__field input.cb-invalid,
.cb__field textarea.cb-invalid { border-color: #D7320F; }
.cb__err {
  display: none;
  font-size: 13px;
  color: #D7320F;
}
.cb__field.cb-show-err .cb__err { display: block; }

.cb__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.cb__privacy { font-size: 13px; color: #4A5876; }
/* font-size: inherit — the footer's blanket `.foot2 a { font-size: 15px }`
   was winning over this span's 13px (an explicit rule on the <a> itself
   beats inheriting from its parent), so the link rendered larger than the
   sentence around it (Rebecca, 28 Jul: "make this sentence the same type
   size"). */
.cb__privacy a { color: var(--ge-blue, #1B367E); font-size: inherit; }

/* ---------- success state ---------- */
.cb__done {
  display: none;
  align-content: center;
  justify-items: start;
  gap: 12px;
}
.cb--sent .cb__form { display: none; }
.cb--sent .cb__done { display: grid; }
.cb__done-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--ge-green-2, #E6F3D9);
  color: var(--ge-green-4, #76A74F);
  display: grid;
  place-items: center;
}
.cb__done-ico svg { width: 26px; height: 26px; }
.cb__done h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ge-navy, #0F1438); }
.cb__done p { margin: 0; color: #4A5876; font-size: 15.5px; max-width: 40ch; }

/* Fallback links inside the result panel (13 Aug 2026, added with the form's
   first real delivery route). Two cases use them: the mailto route, where we
   cannot know the visitor's email app actually opened, and a failed post,
   where we must offer a way through instead of a false success.
   font-size: inherit for the same reason as .cb__privacy a above — the
   footer's blanket `.foot2 a { font-size: 15px }` otherwise wins. */
.cb__done p a { color: var(--ge-blue, #1B367E); font-size: inherit; }
.cb__done p a:hover { color: var(--ge-navy, #0F1438); }
.cb__fallback { display: inline-block; margin-top: 10px; font-weight: 700; }
.cb__fallbackalt { display: block; margin-top: 6px; font-size: 14px; }

/* Failed-post variant — same panel, but the tick badge goes amber so it
   never reads as a success at a glance. */
.cb--failed .cb__done-ico {
  background: var(--ge-yellow-2, #FDF0CE);
  color: #A9761B;
}

/* while a background post is in flight */
.cb__form button[type="submit"][disabled] { opacity: 0.6; cursor: default; }

/* ---------- SPAM HONEYPOT (13 Aug 2026) ----------
   A decoy field. Real people never fill it in because they never see it; a lot of
   form-spam bots fill every input they find. scripts/contact-band.js treats a
   non-empty value as "not a person".

   Hidden by moving it off-screen, NOT with display:none or visibility:hidden —
   the cruder bots specifically skip fields hidden that way, which would defeat
   the point. Absolutely positioned so it is out of flow and never creates a cell
   in the form's grid.

   Belt and braces on top of the CSS, in the markup: aria-hidden on the wrapper so
   screen readers never announce it, tabindex="-1" so it cannot be tabbed into, and
   autocomplete="off" so a browser or password manager doesn't helpfully fill it
   and get a real person wrongly flagged. */
.cb__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cb__card { grid-template-columns: 1fr; }
  .cb__form { grid-template-columns: 1fr; }
}

/* ---------- footer-embedded variant ---------- */
.cb--footer {
  background: transparent;
  padding: 0;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.cb--footer .cb__card {
  margin-top: clamp(-290px, -21vw, -190px); /* roughly half the card sits above the footer's edge */
  box-shadow: 0 26px 60px rgba(15,20,56,0.35);
}
/* the footer paints its own links white — re-assert the card's colours
   so every piece of text stays visible on the light card */
.cb--footer .cb__intro h2 { color: var(--ge-navy, #0F1438); }
.cb--footer .cb__intro p, .cb--footer .cb__note, .cb--footer .cb__privacy { color: #4A5876; }
.cb--footer .cb__line { color: var(--ge-navy, #0F1438); font-size: 15.5px; }
.cb--footer .cb__line:hover .cb__line-label { color: var(--ge-blue, #1B367E); }
.cb--footer .cb__note a, .cb--footer .cb__privacy a { color: var(--ge-blue, #1B367E); }
.cb--footer .cb__note a:hover, .cb--footer .cb__privacy a:hover { color: var(--ge-navy, #0F1438); }
/* the "Book a 10-minute demo" link was easy to miss as plain small print —
   give it real link affordance (Rebecca, 24 Jul) */
.cb--footer .cb__note a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
/* the "privacy policy" link had the same problem — plain small print with no
   visible link affordance (Rebecca, 28 Jul: "make the link look like a
   link"). Underlined only, no bold — it's fine print, not a CTA. */
.cb--footer .cb__privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cb--footer .cb__field label { color: #4A5876; }
.cb--footer .cb__field input, .cb--footer .cb__field textarea { color: var(--ge-navy, #0F1438); }
.cb--footer .cb__done h3 { color: var(--ge-navy, #0F1438); }
.cb--footer .cb__done p { color: #4A5876; }

/* ============================================================
 * CONTACT PAGE  (5 Aug 2026)
 * The form moved off the footer of every page onto its own page — see the note
 * at the top of contact.html. These are the only styles the page adds; the card
 * itself is the same .cb component, on .cb--page instead of .cb--footer.
 * ============================================================ */
.cb--page {
  /* the footer variant straddles UP out of the navy footer. On its own page
     there is nothing to straddle, so the negative margin and the z-index games
     come off and it is simply a card in the flow. */
  margin: 0;
  transform: none;
  position: relative;
}
/* ⚠ .cp-hero, .cp-hero h1 and .cp-lede were DELETED 11 Aug 2026 with the contact-page
   restyle — the text hero they styled duplicated the card's own heading and lede word
   for word, so the whole section went. .cp-eyebrow below survives: the card uses it.
   Deleted rather than left dormant so nobody re-adds the markup and finds it styled. */
.cp-eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7689;   /* was #8A94A8 at 3.05:1 */
}
.cp-form { padding: 0 0 clamp(56px, 6vw, 88px); background: #fff; }

/* ---- the pre-footer CTA variant  (5 Aug 2026) ----
 * .cb--cta reuses the band's card and its straddle out of the navy footer, so
 * the geometry of the page is unchanged — only the contents. Everything the
 * form needed (the two-column intro/form split, the field grid) is switched off
 * here rather than removed from .cb, because contact.html still uses all of it. */
.cb--cta .cb__card {
  display: block;
  text-align: center;
  padding-block: clamp(40px, 5vw, 68px);
}
.cb--cta .cb__card h2 {
  margin: 0 auto clamp(12px, 1.4vw, 18px);
  max-width: 18ch;
  text-wrap: balance;
}
.cb--cta .cb__card > p {
  margin: 0 auto;
  max-width: 52ch;
  text-wrap: pretty;
}
/* ⚠ THE BUTTON NEEDS ITS OWN FILL AND ITS OWN COLOUR, both scoped to .cb--cta.
   Two separate problems, and the button was invisible because of both:
     · `.btn` in foundation.css sets shape and padding but NO background — the
       fill comes from a modifier like .btn--primary, which this markup did not
       carry. Computed background was rgba(0,0,0,0).
     · the card sits inside <footer class="foot2">, and `.foot2 a` at (0,1,1)
       paints every link in it rgba(255,255,255,0.85). So the label was white
       text on a #F3F7FA card with no fill behind it — only the navy arrow disc
       was visible, which is exactly what she saw.
   Navy rather than the sky .btn--primary uses: this card is pale, and navy is
   what the primary CTA is on every other pale surface on the site (the hero
   buttons on the school-type pages, the price cards). 17.8:1. */
.cb--cta .btn {
  background: var(--ge-navy, #0F1438);
  color: #fff;
  border: none;
}
.cb--cta .btn:hover { background: #1B2352; color: #fff; }
.cb--cta .btn .btn__arrow { background: #fff; color: var(--ge-navy, #0F1438); }

.cb__cta-actions {
  margin-top: clamp(24px, 2.8vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
}
/* the second route is deliberately a text link, not a second button — one
   action, one alternative. Two buttons side by side is two decisions. */
.cb--cta .cb__alt {
  /* ⚠ .cb--cta prefix is load-bearing. This card sits INSIDE <footer class="foot2">,
     and home-v2.css has `.foot2 a { color: rgba(255,255,255,0.85) }` — element
     plus class, (0,1,1), which outranks a bare .cb__alt at (0,1,0). The link
     stayed white on the pale card and measured 1.27:1, i.e. invisible. */
  color: var(--ge-navy, #0F1438);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 16.5px);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.cb--cta .cb__alt:hover { color: var(--ge-blue, #1B367E); }

/* ============================================================
 * CONTACT PAGE — RESTYLED TO MATCH THE SCHOOL LOGIN  (11 Aug 2026)
 * Rebecca: "we now want to make the contact page to look better. you could
 * follow the same styling at the login page".
 *
 * What was wrong: the page carried a full-width text hero reading "Ask us
 * anything." over a lede, and then the card below REPEATED both almost word for
 * word — the same heading twice, 600px apart, with an empty right-hand half on
 * the hero. The hero is gone (see the note in contact.html) and what is left is
 * one carded module in the same shape as school-login.html.
 *
 * ⚠⚠ EVERY RULE HERE IS SCOPED TO `.cb--page`, WHICH ONLY contact.html USES.
 *    `.cb__card`, `.cb__intro` and `.cb__form` are SHARED with `.cb--footer`,
 *    the straddling contact card in the footer of 16 other pages (home, OnSite,
 *    Founders Club, Martyn's Law, the product and audience pages...). Drop the
 *    `.cb--page` from any selector below and you restyle all of them.
 * ============================================================ */

/* the section wrapper: the card supplies its own spacing now */
body.hv2 main > section.cp-form.cp-form {
  padding: 0;
  /* 18px under the nav — the same gap every hero and carded module on the site
     sits on. ⚠ The class is doubled for the same reason as .sl-hero on the login
     page: modular.css has `main > section:first-of-type { padding-bottom: 0 }` at
     (0,2,3) and a single `.cp-form` here would tie and lose, so the padding reset
     would not hold now that this is the page's first section. */
  margin-top: clamp(10px, 1.4vw, 18px);
  margin-bottom: clamp(56px, 6vw, 96px);
}

/* ⚠ the .cb wrapper carries `padding: clamp(...) 0 clamp(...)` from the FOOTER
   variant, where it supplies the straddle's breathing room. On its own page that
   padding sat on top of the module's own margin and pushed the card 154px below
   the nav instead of 18px. The module owns its spacing now, so this comes off. */
body.hv2 .cb--page { padding: 0; }

/* the pale module — site card geometry, matching .sl-hero and .statement--hero */
body.hv2 .cb--page .cb__card {
  border-radius: var(--band-radius, 64px);
  padding: clamp(36px, 4.6vw, 72px);   /* even all round, as on the login page */
  gap: clamp(36px, 4.5vw, 80px);
  align-items: center;
}

/* the form becomes a white card sitting inside the pale one — the single biggest
   difference from the old layout, where the inputs floated straight on the pale */
body.hv2 .cb--page .cb__form {
  background: #fff;
  border-radius: var(--radius-xl, 24px);
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);
  padding: clamp(28px, 3vw, 48px);     /* 48px in-card padding is the site standard */
  gap: 18px;
}

/* the heading is the page <h1> now, not an <h2> — it needs h1 sizing */
body.hv2 .cb--page .cb__intro h1 {
  margin: 0 0 12px;
  color: var(--ge-navy, #0F1438);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  font-weight: 600;                    /* headings are 600 site-wide */
  letter-spacing: -0.02em;
}
body.hv2 .cb--page .cp-eyebrow { margin-bottom: clamp(14px, 1.6vw, 20px); }

/* ---------- the direct contact details ---------- */
.cp-details { margin-top: clamp(24px, 2.6vw, 34px); padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid #E1E8F2; }
.cp-details__label {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ge-text-secondary, #4A5876);
}
.cp-details__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cp-details__list a { color: var(--ge-blue, #1B367E); font-weight: 600; font-size: 16px; }
.cp-details__list a:hover { color: var(--ge-navy, #0F1438); }
.cp-details__addr { font-size: 15px; line-height: 1.55; color: var(--ge-text-secondary, #4A5876); }

@media (max-width: 900px) {
  body.hv2 .cb--page .cb__card { align-items: start; }
}
@media (max-width: 560px) {
  body.hv2 .cb--page .cb__card {
    border-radius: 24px;               /* 64px reads as a circle at phone widths */
    padding: clamp(26px, 6vw, 34px) clamp(18px, 4.5vw, 24px);
  }
}