/* Solid Systems — Copilot site
   Header, the Reality Check call to action, and the enquiry forms.

   Loaded on every page, after tokens.css and before the page's own
   stylesheet. These are the designs chosen from the /options prototype:
   the tall sticky header at its "Confident" size, CTA arrangement 3
   (Reality Check leads, the page's own action follows), and the forms
   that replaced the mailto links on Elevate, Expand and Embed.

   Namespaced .sh-* / .cta-* / .enq-* so nothing here collides with the
   existing tokens/product/v3-human rules. */

/* ==================================================================
   1. Site header — tall, sticky
   ================================================================== */

html { scroll-padding-top: 120px; }

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--tint-10);
  transition: box-shadow .25s ease;
}
.site-head.is-stuck { box-shadow: 0 6px 24px rgba(12,42,55,.10); }
.site-head a { text-decoration: none; }

.site-head > .wrap {
  display: flex; align-items: center; gap: 26px;
  padding-top: 26px; padding-bottom: 26px;
  flex-wrap: wrap;
}

/* One set of links. On desktop .sh-nav is the rest of the bar; under 980px
   the same element becomes the collapsible panel, so nothing is duplicated
   in the markup and the two can never drift apart. */
.sh-nav { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; }

.sh-logo { display: inline-flex; align-items: center; flex: none; }
.sh-logo img { height: 56px; width: auto; }

/* The Human Story is the site's argument, not a page — it outranks the
   four stage links rather than sitting among them as an equal. */
.sh-story {
  display: inline-flex; flex-direction: column; gap: 1px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 18px;
  color: var(--navy-ink);
  line-height: 1.15;
  flex: none;
}
.sh-story-sub {
  font-family: 'Caveat', cursive;
  font-weight: 600; font-size: 16px;
  color: var(--navy);
}
.sh-story:hover { color: var(--navy-ink); }
.sh-story:hover .sh-story-main {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}

.sh-rule { width: 1px; height: 30px; background: var(--tint-20); flex: none; }

.sh-stages { display: inline-flex; align-items: center; gap: 24px; }
.sh-stage {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500; font-size: 17.5px;
  color: var(--navy-deep);
  white-space: nowrap;
  transition: color .15s ease;
}
.sh-stage:hover { color: var(--navy-ink); }
/* The numbers are real — the site already says "Step one ~" on the home
   page — so they carry information rather than decorate. */
.sh-step { font-family: 'Caveat', cursive; font-weight: 700; font-size: 19px; color: var(--cyan); }
.sh-stage:hover .sh-step { color: var(--cyan-bright); }
.sh-stage.is-current { color: var(--navy-ink); font-weight: 600; }

.sh-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }

/* Two matched pills: same height, radius and type size. Only the fill
   separates them, so the navy one still reads as primary.
   Colours are measured, not guessed — navy-ink on cyan is 6.0:1 while
   white on cyan is 2.6:1, so the tinted pill takes navy-ink text. */
.sh-rc, .sh-book {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sh-rc {
  gap: 10px;
  padding-left: 12px;
  background: rgba(0,173,239,.10);
  border-color: rgba(0,173,239,.30);
  color: var(--navy-ink);
}
.sh-rc:hover { background: rgba(0,173,239,.19); border-color: var(--cyan); color: var(--navy-ink); }
.sh-rc-mark { width: 26px; height: 26px; flex: none; }
.sh-book { background: var(--navy-ink); border-color: var(--navy-ink); color: #fff; }
.sh-book:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-1px); }

/* ---- burger ---- */
.sh-toggle { display: none; }
.sh-burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  border: 1px solid var(--tint-20); border-radius: 11px;
  background: transparent; cursor: pointer; padding: 0;
  margin-left: auto;
}
.sh-burger span { display: block; width: 20px; height: 2px; background: var(--navy-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.site-head:has(.sh-toggle:checked) .sh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-head:has(.sh-toggle:checked) .sh-burger span:nth-child(2) { opacity: 0; }
.site-head:has(.sh-toggle:checked) .sh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .site-head > .wrap { padding-top: 14px; padding-bottom: 14px; gap: 0; }
  .sh-logo img { height: 40px; }
  .sh-burger { display: flex; }

  .sh-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .site-head:has(.sh-toggle:checked) .sh-nav { max-height: 85vh; overflow: auto; }
  .sh-nav > * { flex: none; }
  .sh-rule { display: none; }
  .sh-story { font-size: 20px; padding: 16px 0 14px; }
  .sh-stages { flex-direction: column; align-items: stretch; gap: 0; }
  .sh-stage { font-size: 17px; padding: 14px 0; border-top: 1px solid var(--tint-10); }
  .sh-actions {
    margin-left: 0;
    flex-direction: column; align-items: stretch;
    gap: 10px;
    padding: 16px 0 18px;
    border-top: 1px solid var(--tint-10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-head, .sh-book, .sh-rc, .sh-nav { transition: none !important; }
}

/* ==================================================================
   2. The Reality Check call to action — arrangement 3
   ------------------------------------------------------------------
   Reality Check leads; the page's own action follows as a ghost. On
   Ignite and the home page that second action is Ignite itself; on
   Elevate, Expand and Embed it is that page's own form.
   ================================================================== */

.cta-rc {
  padding: 84px 0;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,173,239,.13), transparent 62%),
    var(--off-white);
}
.cta-rc .stamp { font-size: 30px; margin-bottom: 14px; }
.cta-rc .eyebrow { margin-bottom: 18px; }
.cta-rc-head {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--navy-ink);
  max-width: 21ch;
  margin: 0 auto 18px;
}
.cta-rc-head em { font-family: 'Caveat', cursive; font-style: normal; color: var(--cyan-bright); }
.cta-rc-lede {
  font-size: 17px; color: var(--text-body);
  max-width: 56ch; margin: 0 auto 30px; line-height: 1.62;
}
.cta-rc-lede em { font-family: 'Caveat', cursive; font-style: normal; font-size: 1.18em; color: var(--navy); }
.cta-rc-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-rc-micro {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--text-muted);
  margin: 16px 0 0;
}
.cta-rc .btn-primary { display: inline-flex; align-items: center; gap: 10px; }
.cta-rc-mark { width: 24px; height: 24px; flex: none; }

@media (max-width: 760px) {
  .cta-rc { padding: 58px 0; }
}

/* ==================================================================
   2b. Home hero — claims exactly one screen
   ------------------------------------------------------------------
   Only index.html carries .hero-fit. The product pages use a much
   shorter hero that already fits; stretching those to a full screen
   would just pad them out.

   Before this, the hero was a fixed ~1113px tall whatever the screen,
   so "Join us at Ignite" sat below the fold on everything from
   1280x720 to 1600x900, and on a taller monitor the cream stopped
   early and white showed beneath it. Same cause, both symptoms.

   Every size takes min(width-based, height-based): the hero is limited
   by height, but type normally scales on width, and on a wide short
   screen the width term alone makes the headline too tall for the
   space. svh rather than vh so mobile browser chrome can't push the
   CTA under the address bar.
   ================================================================== */

body.hero-fit { --hero-scale: 1.40; }

.hero-fit .v3-hero {
  --h1:    clamp(26px, min(4.4vw, 5.6svh), 76px);
  --lede:  clamp(13.5px, min(1.15vw, 1.6svh), 20px);
  --greet: clamp(17px, min(1.7vw, 2.3svh), 28px);
  --stack: clamp(240px, 46svh, 600px);
  --gap-h1:   clamp(11px, 2.2svh, 32px);
  --gap-lede: clamp(14px, 2.6svh, 36px);

  min-height: calc(100svh - var(--hd-h, 108px));
  display: flex;
  align-items: center;
  padding-top: clamp(14px, 2.2vh, 44px);
  padding-bottom: clamp(14px, 2.2vh, 44px);
}
.hero-fit .v3-hero > .wrap { width: 100%; }

.hero-fit .v3-hero .greeting   { font-size: calc(var(--greet) * var(--hero-scale)); }
.hero-fit .v3-hero h1          { font-size: calc(var(--h1) * var(--hero-scale));
                                 margin-bottom: calc(var(--gap-h1) * var(--hero-scale)); }
.hero-fit .v3-hero .lede       { font-size: calc(var(--lede) * var(--hero-scale));
                                 margin-bottom: calc(var(--gap-lede) * var(--hero-scale)); }
.hero-fit .v3-hero .cta-row .btn { padding: 16px 30px; font-size: 17px; }

/* The stack was 520px fixed with its cards at fixed offsets — now both
   scale, so the whole column tracks the space available. */
.hero-fit .v3-hero .card-stack { height: calc(var(--stack) * var(--hero-scale)); }
.hero-fit .v3-hero .float.f2 { top: 27%; }
.hero-fit .v3-hero .float.f3 { bottom: 4%; }

@media (max-height: 940px) {
  .hero-fit .v3-hero .lede { line-height: 1.55; }
  .hero-fit .v3-hero .float { padding: 18px 20px; }
  .hero-fit .v3-hero .float p { font-size: 14.5px; }
  .hero-fit .v3-hero .float .caveat { font-size: 19px; }
  .hero-fit .v3-hero .wrap { gap: 44px; }
}
@media (max-height: 840px) {
  .hero-fit .v3-hero .lede { line-height: 1.5; max-width: 46ch; }
  .hero-fit .v3-hero .copilot-caption { display: none; }
  .hero-fit .v3-hero .float { padding: 15px 17px; }
  .hero-fit .v3-hero .float p { font-size: 13.5px; }
  .hero-fit .v3-hero .float h4 { font-size: 11.5px; margin-bottom: 7px; }
}
@media (max-height: 740px) {
  .hero-fit .v3-hero .lede { max-width: 44ch; }
  .hero-fit .v3-hero .cta-row .btn { padding: 11px 20px; font-size: 15px; }
}
/* Below about 700px tall the largest setting genuinely cannot hold — the
   lede alone runs to five lines. Step the scale down rather than let the
   CTA slide under the fold, which is the whole point of the treatment. */
@media (max-height: 700px) {
  body.hero-fit { --hero-scale: 1.18; }
}

/* Under 980px the right column is already hidden, so the hero is text
   only — let it size to its content rather than stretch to a screen. */
@media (max-width: 980px) {
  .hero-fit .v3-hero { min-height: 0; padding-top: 40px; padding-bottom: 56px; }
}

/* ==================================================================
   3. Enquiry forms — Elevate, Expand, Embed
   ================================================================== */

.enq { padding: 84px 0; background: var(--off-white); }
.enq-card {
  max-width: 720px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--tint-20);
  border-radius: var(--radius-xl);
  padding: 44px 46px;
  box-shadow: var(--shadow);
}
.enq-card > .eyebrow { margin-bottom: 14px; }
.enq-card h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.enq-card h2 em { font-family: 'Caveat', cursive; font-style: normal; color: var(--cyan-bright); }
.enq-lede { font-size: 16px; margin: 0 0 30px; line-height: 1.62; }

.enq-intent { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.enq-intent input { position: absolute; opacity: 0; pointer-events: none; }
.enq-intent label { flex: 1; min-width: 180px; margin: 0; }
.enq-intent-card {
  display: block; padding: 14px 18px;
  border: 1.5px solid var(--tint-20); border-radius: var(--radius);
  cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--text-dark);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.enq-intent-card:hover { border-color: var(--tint-40); }
.enq-intent input:checked + .enq-intent-card {
  border-color: var(--cyan);
  background: rgba(41,171,226,.07);
  box-shadow: 0 0 0 3px rgba(41,171,226,.12);
}
.enq-intent input:focus-visible + .enq-intent-card { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }

.enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enq-field { margin-bottom: 16px; }
.enq-field label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.enq-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.enq-field input,
.enq-field select,
.enq-field textarea {
  width: 100%; padding: 13px 15px;
  font-family: 'Libre Franklin', sans-serif; font-size: 15.5px;
  color: var(--text-dark); background: var(--white);
  border: 1.5px solid var(--tint-20); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.enq-field textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.enq-field input:focus,
.enq-field select:focus,
.enq-field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(41,171,226,.14);
}
.enq-field.is-invalid input,
.enq-field.is-invalid select,
.enq-field.is-invalid textarea { border-color: #d92d20; }
.enq-field.is-invalid label { color: #d92d20; }
.enq-error { display: none; font-size: 13px; color: #d92d20; margin: 6px 0 0; }
.enq-field.is-invalid .enq-error { display: block; }

/* Off-screen, never focusable by a person. */
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.enq-submit { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.enq-note { font-size: 13px; color: var(--text-muted); margin: 0; }
.enq-fail {
  display: none;
  margin: 18px 0 0; padding: 13px 16px;
  background: rgba(217,45,32,.07);
  border: 1px solid rgba(217,45,32,.3);
  border-radius: var(--radius);
  font-size: 14.5px; color: #b42318;
}
.enq-fail.is-on { display: block; }

.enq-done { display: none; text-align: center; padding: 18px 0 6px; }
.enq-done.is-on { display: block; }
.enq-tick {
  width: 58px; height: 58px; margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(46,189,107,.12); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.enq-done h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.enq-done p { margin: 0 auto; max-width: 46ch; font-size: 15.5px; }
form.is-sent { display: none; }

@media (max-width: 760px) {
  .enq { padding: 58px 0; }
  .enq-card { padding: 32px 22px; }
  .enq-row { grid-template-columns: 1fr; }
}