/* Launch48 shared shell — this is the single visual baseline for every route. */
:root {
  --launch48-shell-navy: #07111f;
}

.header,
.v2-header,
.site-footer,
.v2-footer {
  background: var(--launch48-shell-navy) !important;
}

.header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.site-footer,
.v2-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.header .logo img,
.v2-header img,
.site-footer .footer-brand img,
.v2-footer img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* The approved dark-logo source includes a one-pixel pale export edge.
   Clip only that edge so the artwork sits seamlessly on the shared navy shell. */
.header .logo img,
.v2-header > a:first-child img,
.site-footer .footer-brand img,
.v2-footer > .footer-grid > div:first-child img {
  clip-path: inset(1px) !important;
}

/* The Solutions overview uses the same hero colour and button rules as the
   homepage and the four solution pages. */
.solutions-v2-copy h1 span {
  color: #0a84ff !important;
}
.solutions-v2-copy .actions {
  gap: 14px !important;
}
.solutions-v2-copy .button {
  min-height: 56px !important;
  padding: 0 25px !important;
  font-size: 12px !important;
  letter-spacing: 0.035em !important;
}
.solutions-v2-copy .button.red {
  background: #ef1b1b !important;
  border: 1px solid #ef1b1b !important;
  color: #fff !important;
}
.solutions-v2-copy .button.secondary {
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
  color: #fff !important;
}
.solutions-v2-copy .button.secondary:hover {
  border-color: #fff !important;
  background: #fff !important;
  color: #07111f !important;
}

@media (min-width: 851px) {
  .header,
  .v2-header {
    height: 80px !important;
    padding-left: clamp(24px, 6vw, 96px) !important;
    padding-right: clamp(24px, 6vw, 96px) !important;
  }

  .header .logo img,
  .v2-header img {
    width: 190px !important;
  }

  .site-footer,
  .v2-footer {
    padding: 78px clamp(24px, 6vw, 96px) 28px !important;
  }

  .v2-footer {
    padding-bottom: 78px !important;
  }

  /* Home route cards share fixed internal rows, so their icon, title, copy and link align. */
  .route-grid a {
    display: grid !important;
    grid-template-rows: 52px 52px 64px 20px;
    justify-items: center !important;
    align-content: center !important;
    row-gap: 8px;
  }

  .route-grid a img,
  .route-grid a span,
  .route-grid a strong,
  .route-grid a em {
    align-self: center !important;
  }

  .route-grid a strong {
    align-self: start !important;
    margin: 0 auto !important;
  }
  .route-grid a em {
    position: static !important;
    margin: 0 !important;
  }
}

/* Shared mobile navigation: one implementation for all generated routes. */
@media (max-width: 850px) {
  .header,
  .v2-header {
    height: 67px !important;
    padding: 0 22px !important;
  }

  .header {
    position: relative;
    gap: 8px;
  }
  .header .logo img {
    width: 142px !important;
  }
  .header .button.compact {
    display: none !important;
  }
  .v2-header {
    position: relative;
    gap: 8px;
  }
  .v2-header > a:first-child img {
    width: 142px !important;
  }
  .v2-header .v2-button.compact {
    display: none !important;
  }
  .mobile-nav-toggle {
    position: relative;
    display: block;
    width: 31px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
  }
  .mobile-nav-toggle:before {
    content: "";
    position: absolute;
    top: 6px;
    right: 1px;
    width: 25px;
    height: 2px;
    background: #fff;
    box-shadow:
      0 8px 0 #fff,
      0 16px 0 #fff;
  }
  .header nav {
    display: none !important;
  }
  .header nav.mobile-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    padding: 10px 24px 14px;
    background: #07111f;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
  }
  .header nav.mobile-open > a,
  .header nav.mobile-open > .solutions-menu > a,
  .header nav.mobile-open > .advice-menu > a {
    padding: 9px 0;
    color: #fff !important;
    font-size: 13px !important;
  }
  .header nav.mobile-open .solutions-menu,
  .header nav.mobile-open .advice-menu {
    display: block;
  }
  .header nav.mobile-open .solutions-flyout,
  .header nav.mobile-open .advice-flyout {
    position: static;
    display: block;
    padding: 0 0 7px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .header nav.mobile-open .solutions-flyout a,
  .header nav.mobile-open .advice-flyout a {
    padding: 5px 0 5px 18px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
  }
  .v2-header nav {
    display: none;
  }
  .v2-header nav.mobile-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    padding: 10px 24px 14px;
    background: #07111f;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
  }
  .v2-header nav.mobile-open > a,
  .v2-header nav.mobile-open > .solutions-menu > a,
  .v2-header nav.mobile-open > .advice-menu > a {
    padding: 9px 0;
    color: #fff;
    font-size: 13px;
  }
  .v2-header nav.mobile-open .solutions-menu,
  .v2-header nav.mobile-open .advice-menu {
    display: block;
  }
  .v2-header nav.mobile-open .solutions-flyout,
  .v2-header nav.mobile-open .advice-flyout {
    position: static;
    display: block;
    padding: 0 0 7px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .v2-header nav.mobile-open .solutions-flyout a,
  .v2-header nav.mobile-open .advice-flyout a {
    padding: 5px 0 5px 18px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
  }

  /* One compact footer rhythm for both static and generated routes. */
  .site-footer,
  .v2-footer {
    padding: 34px 24px 18px !important;
  }

  .v2-footer {
    padding-bottom: 38px !important;
  }

  .site-footer .footer-grid,
  .v2-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 18px !important;
  }

  .site-footer .footer-grid > div:first-child,
  .site-footer .footer-grid > div:last-child,
  .v2-footer .footer-grid > div:first-child,
  .v2-footer .footer-grid > div:last-child {
    grid-column: 1/-1 !important;
  }

  .site-footer .footer-brand img,
  .v2-footer > .footer-grid > div:first-child img {
    width: 164px !important;
  }

  .site-footer p,
  .v2-footer p {
    margin-top: 10px !important;
    font-size: 13px !important;
  }

  .site-footer h2,
  .v2-footer h2 {
    margin-bottom: 10px !important;
    font-size: 13px !important;
  }

  .site-footer .footer-nav,
  .v2-footer .footer-grid > div:not(:first-child):not(:last-child) {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .site-footer a,
  .v2-footer a {
    font-size: 12px !important;
  }

  .site-footer .footer-bottom,
  .v2-footer .footer-bottom {
    margin-top: 28px !important;
    padding-top: 14px !important;
    font-size: 10px !important;
  }

  /* The Solutions overview is part of the same mobile hero system. */
  .solutions-v2-hero::before {
    background-size: 52px 52px !important;
  }

  /* One phone hero viewport: the header occupies 67px and the CTA group
     finishes above the browser/safe-area edge on every route. */
  .hero--partner,
  .page-hero,
  .solutions-v2-hero {
    height: min(700px, calc(100svh - 67px)) !important;
    min-height: min(700px, calc(100svh - 67px)) !important;
  }

  .hero--partner .hero-copy,
  .page-hero > div,
  .solutions-v2-copy {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-bottom: 24px !important;
  }

  .hero--partner .actions,
  .page-hero .actions,
  .solutions-v2-copy .actions {
    margin-top: auto !important;
  }

  /* Solution pricing remains a pill on phone, but belongs to the copy flow
     rather than occupying the CTA safe area. */
  .page-hero .hero-price {
    position: static !important;
    align-self: center !important;
    width: max-content !important;
    order: 3 !important;
    margin-top: auto !important;
  }

  .page-hero > div > h1 {
    order: 1 !important;
  }
  .page-hero > div > p:not(.hero-price) {
    order: 2 !important;
  }
  .page-hero .actions {
    order: 4 !important;
    margin-top: 12px !important;
  }
  .page-hero--informational .actions {
    margin-top: auto !important;
  }

  /* The Solutions overview carries an additional guidance line, so its CTA
     stack uses the shared compact button height and a clearer toolbar gap. */
  .solutions-v2-copy .button {
    min-height: 46px !important;
    font-size: 10px !important;
  }
  .solutions-v2-copy .actions {
    margin-bottom: 16px !important;
  }

  /* Mobile is a centred reading layout. Individual cards retain their existing
     vertical order, while every section's copy shares one visual alignment. */
  main > section,
  main > section h1,
  main > section h2,
  main > section h3,
  main > section p,
  main > section li,
  main > section strong,
  main > section em {
    text-align: center !important;
  }

  main .body-copy,
  main .about-copy,
  main .about-note > div:last-child,
  main .about-expect > div,
  main .advice-answer,
  main .advice-body,
  main .health-copy,
  main .principle-copy,
  main .contact-form-section > div {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main .advice-related a {
    justify-content: center !important;
    text-align: center !important;
  }
  main .contact-enquiry-form {
    justify-items: center !important;
  }
  main .contact-enquiry-form button {
    justify-self: center !important;
  }

  /* Outcome cards should fit their centred content, not inherit desktop card height. */
  main .outcome-grid article,
  main .outcome-grid article + article {
    min-height: 0 !important;
  }

  /* The mobile Health Check has its own reading-order spacing; remove the
     inherited desktop flex gap between heading, copy, report and CTA. */
  #health-check.health--image-led {
    gap: 0 !important;
  }

  /* ABOUT is a continuous story on phone: keep its closing sections connected. */
  main .about-mission {
    padding-bottom: 40px !important;
  }
  main .about-expect {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  main .about-routes {
    padding-top: 40px !important;
  }
  main .about-routes .route-list {
    margin-top: 24px !important;
  }

  .site-footer,
  .v2-footer {
    text-align: center !important;
  }

  .site-footer .footer-nav,
  .v2-footer .footer-grid > div:not(:first-child):not(:last-child) {
    align-items: center !important;
  }
}

/* A single-word Advice heading receives the same Launch48-blue emphasis. */
.advice-related h2 {
  color: #0a84ff !important;
}

/* Health Check sections lead directly with their heading. */
#health-check.health--image-led .health-copy .eyebrow,
.health--image-led .health-copy > .eyebrow {
  display: none !important;
}

/* Contact-route CTAs follow the same primary/secondary button system. */
.contact-start-grid strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  margin-top: 32px !important;
  padding: 0 18px !important;
  border: 1px solid #07111f !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #07111f !important;
  font:
    800 11px/1 Inter,
    sans-serif !important;
  letter-spacing: 0.015em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.contact-start-grid a:nth-child(2) strong {
  border-color: #ef1b1b !important;
  background: #ef1b1b !important;
  color: #fff !important;
}

/* LAUNCH and EVOLVE can introduce tailored Work Smart systems without
   confusing their comparable website package inclusions. */
.work-smart-additions__cta {
  display: flex !important;
  width: max-content !important;
  margin: 32px auto 0 !important;
}

.work-smart-additions .three-up article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.work-smart-additions .three-up article p {
  max-width: 300px;
}

/* The public view of the Launch48 Standard stays scannable: one expandable
   section per delivery stage, with the verified controls available on demand. */
.protocol-explorer {
  margin-top: 56px;
  padding: 46px 34px 34px !important;
  border: 1px solid rgba(10, 132, 255, 0.36);
  border-radius: 16px;
  background: #07111f;
  color: #fff;
}
.protocol-explorer h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: -0.055em;
  line-height: 1;
}
.protocol-explorer__eyebrow {
  margin: 0 0 12px !important;
  color: #77bcff !important;
  font-size: 0.76rem !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.protocol-explorer > p {
  max-width: 760px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.58;
}
.protocol-explorer__groups {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.protocol-explorer details {
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.protocol-explorer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.protocol-explorer summary::-webkit-details-marker {
  display: none;
}
.protocol-explorer summary::after {
  content: "+";
  margin-left: auto;
  color: #0a84ff;
  font-size: 1.45rem;
  font-weight: 400;
}
.protocol-explorer details[open] summary::after {
  content: "–";
}
.protocol-explorer summary small {
  color: #77bcff;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: normal;
}
.protocol-explorer summary strong,
.protocol-explorer summary em {
  display: block;
}
.protocol-explorer summary strong {
  margin-bottom: 5px;
}
.protocol-explorer summary em {
  flex: 0 0 auto;
  margin: 0 28px 0 20px;
  color: #77bcff;
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.protocol-explorer ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 19px 18px;
  list-style: none;
}
.protocol-explorer li {
  padding: 11px 14px 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.42;
}
.protocol-explorer li:nth-child(odd) {
  padding-right: 20px;
}
.protocol-explorer li span {
  display: block;
  margin-bottom: 4px;
  color: #0a84ff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.protocol-explorer__scope {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Keep the Work Smart section visually connected to the package customisation panel. */
.solution-offers + .work-smart-additions {
  padding-top: 56px !important;
}
.solution-offers:has(+ .work-smart-additions) {
  padding-bottom: 40px !important;
}

@media (max-width: 850px) {
  .protocol-explorer {
    margin-top: 38px;
    padding: 34px 18px 26px !important;
    text-align: left;
  }
  .protocol-explorer > p,
  .protocol-explorer h2,
  .protocol-explorer summary,
  .protocol-explorer li {
    text-align: left !important;
  }
  .protocol-explorer summary {
    padding: 16px;
    font-size: 0.95rem;
  }
  .protocol-explorer summary em {
    margin-left: 12px;
    font-size: 0.7rem;
  }
  .protocol-explorer ul {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }
  .protocol-explorer li,
  .protocol-explorer li:nth-child(odd) {
    padding-right: 0;
  }
  .work-smart-additions__cta {
    width: 100% !important;
  }
  .solution-offers + .work-smart-additions {
    padding-top: 60px !important;
  }
  .solution-offers:has(+ .work-smart-additions) {
    padding-bottom: 32px !important;
  }
}