/* ==========================================================================
   HPTW 2026 — Global Styling Port (Pass 1 + Pass 2, additive only)
   ==========================================================================
   Ported from ~/Sites/hptw-2026/wp-content/themes/hptw-2026/src/scss/
   Sass $variables resolved to literal values; &-nesting flattened to
   explicit selectors. Enqueued last (see functions.php) so it can override
   the existing plain-CSS stylesheets without editing them.

   Scope so far (additive only):
     1. @font-face — Plus Jakarta Sans   (from _fonts.scss)
     2. Base typography, partial         (from _base.scss)
     3. Brand button classes, partial    (from _buttons.scss)
     4. Logo-strip marquee                (from _homepage.scss)
     5. .hp-section vertical rhythm       (from _homepage.scss)
     6. Dark CTA band (.hp-cta-dark)      (from _homepage.scss)
     7. Header skin                       (from _nav.scss — pass 2)
     8. Footer skin                       (from _footer.scss — pass 2)

   NOT in this pass: testimonial-card/tc-* (per-page work, later), hero JS/
   .reveal animation, .logo-strip-label (checked — unused, skipped). Header/
   footer mechanics (offcanvas JS, GTM, reCAPTCHA, FB-verification, contact-
   area/bbsn-area sidebars, main-menu wiring) are untouched — skin only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS — Plus Jakarta Sans (self-hosted)
   Source: src/scss/_fonts.scss — verbatim, paths relative to this file.
   -------------------------------------------------------------------------- */

/* plus-jakarta-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
}

/* plus-jakarta-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2');
}

/* plus-jakarta-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}

/* plus-jakarta-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}

/* plus-jakarta-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
}

/* plus-jakarta-sans-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
}


/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY (partial port of _base.scss)
   $font-primary / $font-heading -> 'Plus Jakarta Sans', system-ui, sans-serif
   $color-text -> #2C3345 | $hptw-deep-blue -> #005189

   This intentionally switches body/heading text site-wide from Montserrat
   to Plus Jakarta Sans — that's the point of this pass, not a side effect.
   Ported: body rule, universal inherit override, headings, focus-visible
   ring, image-rendering tweak, and (added in a later pass) the img/video
   responsive-sizing rule. The box-sizing reset, scroll-behavior, and link
   colour rules from _base.scss are still left out (not requested).
   -------------------------------------------------------------------------- */

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    color: #2C3345;
}

/* Force Plus Jakarta Sans everywhere, overriding the parent theme's Montserrat stack */
* {
    font-family: inherit;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    color: #005189;
}

:focus-visible {
    outline: 3px solid rgba(26,82,153,0.45);
    outline-offset: 2px;
}

img,
video {
    max-width: 100%;
    height: auto;
}

img {
    image-rendering: -webkit-optimize-contrast;
}


/* --------------------------------------------------------------------------
   3. BRAND BUTTON CLASSES (partial port of _buttons.scss)
   Doubled .btn.btn-* selectors match SOURCE's specificity approach (0,2,0),
   beating Bootstrap's .btn (0,1,0) without !important.

   Ported: btn-hptw-orange, btn-hptw-blue, btn-hptw-sky, btn-contact-white,
   btn-white-orange, btn-lg.
   NOT ported (existing TARGET buttons untouched): btn-primary, btn-secondary,
   btn-outline-light, btn-outline-white.

   $radius-pill -> 50rem | $hptw-blue -> #1A5299 | $hptw-sky -> #00ADEE
   darken() calls resolved by compiling them with SOURCE's own Dart Sass
   (sass-embedded), not hand-rounded, for exact fidelity:
     darken(#E47B67, 8%) -> #DE5D44
     darken(#1A5299, 8%) -> #143F76
     darken(#00ADEE, 8%) -> #008FC5
   -------------------------------------------------------------------------- */

.btn.btn-hptw-orange {
    background-color: #E47B67;
    border-color: #E47B67;
    color: #fff;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.65rem 1.75rem;
}

.btn.btn-hptw-orange:hover {
    background-color: #DE5D44;
    border-color: #DE5D44;
    color: #fff;
    box-shadow: 0 6px 20px rgba(228,123,103,0.35);
}

.btn.btn-hptw-blue {
    background-color: #1A5299;
    border-color: #1A5299;
    color: #fff;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.65rem 1.75rem;
}

.btn.btn-hptw-blue:hover {
    background-color: #143F76;
    border-color: #143F76;
    color: #fff;
    box-shadow: 0 6px 20px rgba(26,82,153,0.3);
}

.btn.btn-hptw-sky {
    background-color: #00ADEE;
    border-color: #00ADEE;
    color: #fff;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.65rem 1.75rem;
}

.btn.btn-hptw-sky:hover {
    background-color: #008FC5;
    border-color: #008FC5;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,173,238,0.35);
}

.btn.btn-contact-white {
    background-color: #fff;
    border-color: #fff;
    color: #005189;
    font-weight: 700;
    border-radius: 50rem;
    padding: 0.65rem 1.75rem;
}

.btn.btn-contact-white:hover {
    background-color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
    color: #005189;
    box-shadow: 0 6px 20px rgba(255,255,255,0.25);
}

/* Pass 2 correction: replaced with verified staging values, supplied
   exact — not normalized or re-interpreted. btn-white-orange still has no
   markup usage anywhere in either theme (wired via a WP nav-menu item's
   "CSS Classes" field, a WP_Bootstrap_Navwalker linkmod), so its only
   render site remains the header's "Contact Us" CTA. */
.btn.btn-white-orange {
  background-color: #fff;
  border: 2px solid #e47b67;
  color: #1f3748;
  font-weight: 600;
  padding: .35rem 1.35rem;
  border-radius: 50rem;
  margin-top: 0;
  margin-right: 0;
}
.btn.btn-white-orange:hover,
.btn.btn-white-orange:focus {
  background-color: #e47b67;
  border-color: #e47b67;
  color: #fff;
  box-shadow: 0 6px 20px #e47b6759;
}

.btn-lg {
    padding: 0.875rem 2.25rem;
    font-size: 1.0625rem;
}


/* --------------------------------------------------------------------------
   4. LOGO-STRIP MARQUEE
   Source: src/scss/_homepage.scss, "Client logo strip" block.
   Renders the .hp-logo-strip/.logo-track-wrap/.logo-track/.logo-item markup
   already present in 4 already-migrated templates (currently unstyled).
   Pure-CSS animation — no JS dependency.
   $hptw-navy -> #0A2342
   -------------------------------------------------------------------------- */

.hp-logo-strip {
    padding: 6.5rem 0;
    background: #fff;
    overflow: hidden;
}

.hp-logo-strip .logo-track-wrap {
    overflow: hidden;
    position: relative;
    container-type: inline-size;
    margin: 0 4rem;
}

.hp-logo-strip .logo-track-wrap::before,
.hp-logo-strip .logo-track-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.hp-logo-strip .logo-track-wrap::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.hp-logo-strip .logo-track-wrap::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

.hp-logo-strip .logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logo-scroll 80s linear infinite;
}

.hp-logo-strip .logo-track:hover {
    animation-play-state: paused;
}

.hp-logo-strip .logo-item {
    /* Exactly 8 visible at all times using container query inline unit */
    flex: 0 0 calc(100cqi / 8);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
    padding: 0 1rem;
    opacity: 0.5;
    filter: grayscale(1);
    transition: opacity 0.2s, filter 0.2s;
    margin: 0 10px;
}

@media (max-width: 991px) {
    .hp-logo-strip .logo-item {
        flex: 0 0 20cqi;
    }
}

@media (max-width: 575px) {
    .hp-logo-strip .logo-item {
        flex: 0 0 33cqi;
    }
}

.hp-logo-strip .logo-item:hover {
    opacity: 0.85;
    filter: grayscale(0);
}

.hp-logo-strip .logo-item img,
.hp-logo-strip .logo-item svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0;
    object-fit: contain;
}

.hp-logo-strip .logo-item .logo-text {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #0A2342;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* --------------------------------------------------------------------------
   5. SECTION RHYTHM
   Source: src/scss/_homepage.scss, "Shared section rhythm" block.
   Vertical padding only — no background/colour modifiers (.hp-section--light,
   .hp-section--navy) ported in this pass.
   $section-py -> 5rem | $section-py-lg -> 6.5rem | $bp-lg -> 992px
   -------------------------------------------------------------------------- */

.hp-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 992px) {
    .hp-section {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
}


/* --------------------------------------------------------------------------
   6. DARK CTA BAND
   Source: src/scss/_homepage.scss, "DARK CTA" block (§8).
   Fixes template-parts/sections/cta-dark.php rendering unstyled (white bg,
   blue heading, invisible btn-contact-white pill) on the already-migrated
   pages. White-text overrides are scoped under .hp-cta-dark so they don't
   leak to headings/body text elsewhere on the page.
   $hptw-navy -> #0A2342 | $section-py-lg -> 6.5rem
   -------------------------------------------------------------------------- */

.hp-cta-dark {
    position: relative;
    background-color: #0A2342;
    padding: 6.5rem 0;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.hp-cta-dark .cta-bg-image {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 0.18;
    mix-blend-mode: luminosity;
}

.hp-cta-dark .cta-content {
    position: relative;
}

.hp-cta-dark h2 {
    font-size: clamp(1.625rem, 3vw, 2.375rem);
    color: #fff;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.hp-cta-dark p {
    color: #fffc;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
    max-width: 620px;
    margin: 60px auto;
}


/* --------------------------------------------------------------------------
   7. HEADER SKIN (pass 2 — CSS-only, mechanics untouched)
   Source: src/scss/_nav.scss.
   TARGET's header.php uses an always-on offcanvas nav — the toggler is
   visible at every width, and the menu lives in #navbarSupportedContent at
   every width, not just <992px. There is no JS scroll listener here, so
   SOURCE's "scrolled" state (white bg, compact padding, 38px logo) is used
   as the PERMANENT look rather than a transparent-to-white transition.
   GTM/reCAPTCHA/FB-verification script tags, the offcanvas open/close
   mechanics, the contact-area/bbsn-area sidebars, and main-menu wiring in
   header.php are all untouched — only existing selectors are recoloured.
   $hptw-navy -> #0A2342 | $hptw-blue -> #1A5299 | $hptw-border -> #E0E8F2
   $radius-sm -> 0.375rem | $radius-md -> 0.75rem
   -------------------------------------------------------------------------- */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(10,35,66,0.06);
    padding-top: 15px;
    padding-bottom: 15px;
}

.container-menu {
    border-bottom: none;
    padding: 1rem 1rem 1rem 2rem;
}

/* Logo: same file as SOURCE (md5-identical) — sized to SOURCE's "scrolled"
   38px height instead of the existing 200px-wide box. Not swapping the file. */
.navbar-brand {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
}

.navbar-brand-img {
    width: auto;
    height: 50px;
    margin-bottom: 0;
}

.navbar-light .navbar-nav .nav-link {
    color: #0A2342;
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: none;
    margin: 0 15px;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
    color: #1A5299;
}

.navbar-nav .nav-item.current-menu-item > .nav-link,
.navbar-nav .nav-item.current_page_item > .nav-link {
    color: #1A5299;
}

.nav-item.nav-item-btn .nav-link {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-nav .dropdown-toggle::after {
    color: #00ADEE;
    border-top-color: #00ADEE;
}

.dropdown-menu {
    border: 1px solid #E0E8F2;
    box-shadow: 0 8px 32px rgba(10,35,66,0.12);
    border-radius: 0.75rem;
    padding: 0.5rem;
    min-width: 220px;
}

.dropdown-item {
    border-radius: 0.375rem;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    color: #0A2342;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(26,82,153,0.07);
    color: #1A5299;
}

/* Brand hamburger icon at every width. TARGET already had this exact icon
   (same SVG data URI as SOURCE), but only inside "@media (max-width:991px)";
   above that it fell back to Bootstrap's generic default icon, because this
   toggler — unlike SOURCE's — is visible at every width. Same data URIs as
   the existing media-scoped rule, just unconditional. */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='36px' height='28px' viewBox='0 0 36 28' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eMenu 2%3c/title%3e%3cg id='D2' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Homepage-v1' transform='translate(-1365.000000, -41.000000)' fill='rgb(0, 81, 137)'%3e%3cg id='Menu-2' transform='translate(1365.000000, 41.000000)'%3e%3crect id='Rectangle' x='0' y='0' width='28' height='4' rx='2'%3e%3c/rect%3e%3crect id='Rectangle-Copy-2' x='0' y='12' width='36' height='4' rx='2'%3e%3c/rect%3e%3crect id='Rectangle-Copy-3' x='8' y='24' width='28' height='4' rx='2'%3e%3c/rect%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler-icon:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='36px' height='28px' viewBox='0 0 36 28' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eMenu 2%3c/title%3e%3cg id='D2' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Homepage-v1' transform='translate(-1365.000000, -41.000000)' fill='black'%3e%3cg id='Menu-2' transform='translate(1365.000000, 41.000000)'%3e%3crect id='Rectangle' x='0' y='0' width='28' height='4' rx='2'%3e%3c/rect%3e%3crect id='Rectangle-Copy-2' x='0' y='12' width='36' height='4' rx='2'%3e%3c/rect%3e%3crect id='Rectangle-Copy-3' x='8' y='24' width='28' height='4' rx='2'%3e%3c/rect%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

/* "Contact Us" CTA pill — see the revised .btn-white-orange rule in
   section 3 above; this is the only place that class renders. */


/* --------------------------------------------------------------------------
   8. FOOTER SKIN (pass 2 — CSS-only, structure untouched)
   Source: src/scss/_footer.scss.
   Re-skins TARGET's existing footer in place (CTA-icon row, address,
   footer-links list, bottom copyright row) — no restructuring to SOURCE's
   4-column layout. .overlay is a generic tint-layer class reused across
   many other page sections (testimonials, case studies, etc.), so it is
   scoped under .footer here, never bare.
   Gradient stops are SOURCE's literal hex values, not resolved from a
   single variable: #003B64 / #0B304B.
   -------------------------------------------------------------------------- */

.footer {
    background: linear-gradient(101.08deg, #003B64 25.99%, #0B304B 100%);
    background-size: auto;
    padding: 4.5rem 0;
}

/* Neutralise the old image+overlay treatment so the new gradient shows
   through cleanly (was: image-grid.jpg behind a #08273C/95%-opacity tint). */
.footer .overlay {
    background: transparent;
    opacity: 0;
}

.footer,
.footer address,
.footer p {
    color: rgba(255,255,255,0.75);
}

.footer h6 {
    color: #fff;
}

.footer address {
    font-style: normal;
    line-height: 1.8;
    font-size: 0.9rem;
    color: #BFCFD9;
}

.footer .footer-email-link,
.footer .footer-links a,
.footer .ogx-link a {
    color: #fff;
    text-decoration: underline;
    transition: color 0.2s;
}

.footer .footer-email-link:hover,
.footer .footer-links a:hover,
.footer .ogx-link a:hover {
    color: rgba(255,255,255,0.6);
}


/* ===== Homepage sections (Pass 2) ===== */
/* Compiled verbatim from src/scss/_homepage.scss (Dart Sass, expanded output).
   $variables/media-breakpoints resolved to literal values, no hand edits.
   Skipped (already ported in earlier commits): .hp-section base rhythm,
   the .hp-logo-strip marquee block + @keyframes logo-scroll, .hp-cta-dark. */

/* Shared section-rhythm extras (not covered by the existing .hp-section rule) */
.hp-section--light {
  background-color: #F4F7FB;
}

.hp-section--navy {
  background-color: #0A2342;
  color: #fff;
}

.hp-eyebrow {
  display: inline-block;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1A5299;
  margin-bottom: 0.75rem;
}

/* 1. Hero */
.hp-hero {
  position: relative;
  background: white;
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 992px) {
  .hp-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.hp-hero .hero-content {
  position: relative;
  z-index: 2;
  padding-left: 8rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  align-self: center;
}
.hp-hero h1 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.12;
  background: linear-gradient(94.61deg, #00ADEE -12.29%, #005189 59.37%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
  .hp-hero h1 {
    font-size: 3rem;
  }
}
@media (min-width: 768px) {
  .hp-hero h1 {
    font-size: 4rem;
  }
}
@media (min-width: 1400px) {
  .hp-hero h1 {
    font-size: 6rem;
  }
}
.hp-hero h1 .accent-line {
  position: relative;
  display: inline;
}
.hp-hero .orange-text {
  color: #E47B67;
  font-size: 1em;
}
.hp-hero .hero-subtext {
  font-size: 1rem;
  line-height: 1.3;
  color: #4A5568;
  max-width: 768px;
  margin-bottom: 3rem;
  margin-top: 2.25rem;
}
@media (min-width: 576px) {
  .hp-hero .hero-subtext {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  .hp-hero .hero-subtext {
    font-size: 1rem;
  }
}
@media (min-width: 992px) {
  .hp-hero .hero-subtext {
    font-size: 2rem;
  }
}
.hp-hero .hero-subtext strong {
  color: #0A2342;
  font-weight: 600;
}
.hp-hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.hp-hero .hero-ctas .btn {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .hp-hero .hero-ctas .btn {
    font-size: 1.125rem;
  }
}
@media (min-width: 768px) {
  .hp-hero .hero-ctas .btn {
    font-size: 1.25rem;
  }
}
@media (min-width: 992px) {
  .hp-hero .hero-ctas .btn {
    font-size: 1.5rem;
  }
}
.hp-hero .hero-link {
  font-weight: 600;
  color: #1A5299;
  font-size: 0.9375rem;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}
@media (min-width: 576px) {
  .hp-hero .hero-link {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  .hp-hero .hero-link {
    font-size: 1.125rem;
  }
}
@media (min-width: 992px) {
  .hp-hero .hero-link {
    font-size: 1.3125rem;
  }
}
@media (max-width: 1399px) {
  .hp-hero .hero-link {
    margin-left: 30px;
  }
}
.hp-hero .hero-link:hover {
  gap: 0.6rem;
}
.hp-hero .hero-illustration-wrap {
  position: relative;
}
.hp-hero .hero-illustration-wrap img, .hp-hero .hero-illustration-wrap svg {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  margin: 0 auto;
}


@media (max-width: 992px) {
  .hp-hero .hero-illustration-wrap {
    position: absolute;
    top: 0;
    max-height: 100%;
    overflow: hidden;
    right: 0;
    opacity: 0.5;
  }
}
.hp-hero .hero-scroll {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
  
  
}
@media (min-width: 992px) {
  .hp-hero .hero-scroll {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0;
  }
}
.hp-hero .hero-scroll .scroll-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A5299;
  animation: bounce-down 1.8s ease infinite;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: white;
  padding: 11px;
}
.hp-hero .hero-scroll .scroll-arrow:hover {
  background: #1A5299;
  color: #fff;
}

@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* 2. Trusted by (testimonials + grid; logo-strip sub-block already ported) */
.hp-trusted-by {
  padding-bottom: 0;
  background: linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
}
.hp-trusted-by .section-intro {
  text-align: center;
  margin-bottom: 9rem;
  background: linear-gradient(90deg, #005189 0%, #001523 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.hp-trusted-by .section-intro h2 {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
.hp-trusted-by .section-intro p {
  max-width: 900px;
  margin: 0 auto;
  color: #6B7A99;
  font-size: 1.75rem;
  line-height: 1.4;
}
.hp-trusted-by .testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .hp-trusted-by .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.testimonial-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px rgba(10, 35, 66, 0.07);
  padding: 1.75rem;
  border-bottom: 10px solid #EBC652;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  margin-bottom: 90px;
}
.testimonial-card:nth-child(2) {
  border-bottom-color: #8CA9A1;
}
.testimonial-card:nth-child(3) {
  border-bottom-color: #E47B67;
}
.testimonial-card:nth-child(4) {
  border-bottom-color: #00ADEE;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(10, 35, 66, 0.12);
}
.testimonial-card .tc-quote {
  font-size: 1.0625rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.7;
  color: #23272A;
  margin-bottom: 1.5rem;
}
.testimonial-card .tc-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.testimonial-card .tc-author-info {
  float: left;
}
.testimonial-card .tc-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-top: -90px;
}
.testimonial-card .tc-name {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #0A2342;
  margin-bottom: 0.1rem;
}
.testimonial-card .tc-role {
  font-size: 1rem;
  font-weight: 500;
  color: #6B7A99;
  line-height: 1.4;
}
.testimonial-card .tc-logo {
  float: right;
  margin-bottom: 0;
  padding: 10px 0 0 10px;
}


/* 3. Impact carousel */
.hp-impact {
  
  padding: 6.5rem 0;

  background: #0A2342 url('/wp-content/themes/hptw-2026-legacy/assets/img/lines2-20.png') no-repeat center center / 100% auto;
  background-size: 100% auto;
}
.hp-impact .section-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  color: #fff;
  text-align: center;
  margin-bottom: 0.5rem;
  color: white;
  font-weight: 500;
}
.hp-impact .impact-slider-wrap {
  position: relative;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hp-impact .impact-track-outer {
  flex: 1;
  overflow: hidden;
  border-radius: 1.25rem;
  position: relative;
}
.hp-impact .impact-track-outer::before, .hp-impact .impact-track-outer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.hp-impact .impact-track-outer::before {
  left: 0;
  background: linear-gradient(270deg, rgba(10, 35, 66, 0) 10%, rgba(10, 35, 66, 0.2) 25%, rgba(10, 35, 66, 0.8) 50%, rgba(10, 35, 66, 0.9) 60%, rgb(10, 35, 66) 70%);
}
.hp-impact .impact-track-outer::after {
  right: 0;
  background: linear-gradient(90deg, rgba(10, 35, 66, 0) 10%, rgba(10, 35, 66, 0.2) 25%, rgba(10, 35, 66, 0.8) 50%, rgba(10, 35, 66, 0.9) 60%, rgb(10, 35, 66) 70%);
}
.hp-impact .impact-track-outer.has-overflow-left::before {
  opacity: 1;
}
.hp-impact .impact-track-outer.has-overflow-right::after {
  opacity: 1;
}
.hp-impact .impact-track {
  display: flex;
  gap: 1.25rem;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.5rem 0.25rem 1rem;
}
.hp-impact .impact-track::-webkit-scrollbar {
  display: none;
}
.hp-impact .impact-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.hp-impact .impact-arrow:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}
.hp-impact .impact-arrow svg {
  pointer-events: none;
}
.hp-impact .impact-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.impact-card {
  flex: 0 0 calc(100% - 2rem);
  scroll-snap-align: start;
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .impact-card {
    flex: 0 0 calc(50% - 0.75rem);
  }
}
@media (min-width: 1200px) {
  .impact-card {
    flex: 0 0 calc(25% - 1.1rem);
    min-height: 240px;
  }
}
.impact-card .card-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  text-shadow: rgba(0, 0, 0, 0.25) 0 0 10px;
  line-height: 1.3;
  color: #fff;
  position: relative;
  z-index: 1;
}
.impact-card--coral {
  background: #005189;
}
.impact-card--teal {
  background: #E47B67;
}
.impact-card--amber {
  background: #EBC652;
}
.impact-card--amber .card-label {
  color: #005189;
  text-shadow: none;
}
.impact-card--navy {
  background: #00ADEE;
}
.impact-card--sage {
  background: #005189;
}
.impact-card--peach {
  background: #EBA875;
}
.impact-card--peach .card-label {
  color: #005189;
  text-shadow: none;
}

/* 4. Workforce view (hub-and-spoke grid) */
.hp-workforce {
  
  background: linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
}
.hp-workforce .section-intro h1 {
  margin-bottom: 1.5rem;
}
.hp-workforce .section-intro p {
  color: #4A5568;
  line-height: 1.75;
  font-size: 24px;
}
.hp-workforce .hub-diagram {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 2rem auto 0;
}
@media (min-width: 992px) {
  .hp-workforce .hub-diagram {
    margin: 0;
  }
}
.hp-workforce .hub-svg-wrap {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
}

.hub-grid {
  display: grid;
  grid-template-areas: ". top-left  top      top-right  ." "left  .       .        .        right" ". bot-left  bot      bot-right  .";
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0.5rem;
  position: relative;
  padding: 1rem;
}
.hub-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(26, 82, 153, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hub-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}
.hub-node .hub-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1A5299;
  color: #fff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(26, 82, 153, 0.25);
}
.hub-node .hub-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0A2342;
  line-height: 1.3;
  max-width: 80px;
}
.hub-node:nth-child(1) .hub-num {
  background: #1A5299;
}
.hub-node:nth-child(2) .hub-num {
  background: #1F63B5;
}
.hub-node:nth-child(3) .hub-num {
  background: #2AA8A4;
}
.hub-node:nth-child(4) .hub-num {
  background: #6BAB8A;
}
.hub-node:nth-child(5) .hub-num {
  background: #2AA8A4;
}
.hub-node:nth-child(6) .hub-num {
  background: #E86320;
}
.hub-node:nth-child(7) .hub-num {
  background: #1A5299;
}
.hub-node:nth-child(8) .hub-num {
  background: #0A2342;
}

.hub-centre {
  background: #F5A623;
  color: #0A2342;
  border-radius: 0.75rem;
  padding: 1rem 0.75rem;
  text-align: center;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  box-shadow: 0 4px 20px rgba(245, 166, 35, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 5. How we work */

.hp-how-we-work {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-white.png') no-repeat center center / 100% auto;
  background-attachment: fixed;
}

.hp-how-we-work h2 {
  font-size: clamp(1.765rem, 3.294vw, 2.5rem);
  text-align: center;
  margin-bottom: 3.5rem;
}
.hp-how-we-work .process-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .hp-how-we-work .process-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

.process-step {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
  position: relative;
}
@media (min-width: 768px) {
  .process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 6rem;
    transform: translateY(-50%);
    left: calc(50% + 6rem);
    right: calc(6rem - 50%);
    height: 2px;
    pointer-events: none;
    z-index: 1;
  }
  .process-step:not(:last-child)::after {
    content: "▶";
    position: absolute;
    top: 6rem;
    right: calc(6rem - 50%);
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    z-index: 2;
  }
  .process-step:nth-child(1)::before {
    background: #DC9869;
  }
  .process-step:nth-child(1)::after {
    color: #DC9869;
  }
  .process-step:nth-child(2)::before {
    background: #00ADEE;
  }
  .process-step:nth-child(2)::after {
    color: #00ADEE;
  }
  .process-step:nth-child(3)::before {
    background: #EBC652;
  }
  .process-step:nth-child(3)::after {
    color: #EBC652;
  }
  .process-step:nth-child(4)::before {
    background: #E47B67;
  }
  .process-step:nth-child(4)::after {
    color: #E47B67;
  }
}
.process-step .step-icon {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  padding: 15px;
  position: relative;
}
.process-step:hover .step-icon {
  transform: scale(1.04);
}
.process-step:nth-child(1) .step-icon {
  background: #DC9869;
}
.process-step:nth-child(2) .step-icon {
  background: #00ADEE;
}
.process-step:nth-child(3) .step-icon {
  background: #EBC652;
  color: #005189;
}
.process-step:nth-child(4) .step-icon {
  background: #E47B67;
}
.process-step:nth-child(5) .step-icon {
  background: #8CA9A1;
}
.process-step .step-icon--amber {
  color: #005189;
}
.process-step .step-desc {
  font-weight: 500;
  font-size: 1rem;
  line-height: 20px;
  color: #23272A;
  background: white;
  padding: 120px 30px 30px 30px;
  margin: -115px 0 0;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 30px 0px;
  border-radius: 30px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hp-how-we-work .process-row {
    flex-wrap: wrap;
  }
  .process-step {
    flex: 0 0 33.333%;
  }
  .process-step:nth-child(4) {
    order: 5;
  }
  .process-step:nth-child(5) {
    order: 4;
    margin-left: 16.667%;
  }
  .process-step:nth-child(3)::before {
    background: none;
    border-right: 2px solid #EBC652;
    border-bottom: 2px solid #EBC652;
    border-radius: 0 10px 10px 0;
    left: 6rem;
    right: calc(50% - 8rem);
    top: 6rem;
    bottom: -7.4rem;
    height: auto;
    transform: none;
    border-top: 2px solid #EBC652;
  }
  .process-step:nth-child(3)::after {
    display: none;
  }
  .process-step:nth-child(4)::before {
    left: calc(-50% + 6rem);
    right: auto;
    width: calc(100% - 12rem);
    background: #E47B67;
    top: 6rem;
    transform: translateY(-50%);
    height: 2px;
    border: none;
    bottom: auto;
  }
  .process-step:nth-child(4)::after {
    content: "◀";
    left: calc(50% + 6rem);
    right: auto;
    top: 6rem;
    transform: translateY(-50%);
    color: #EBC652;
    font-size: 1.25rem;
    line-height: 1;
  }
  .process-step:nth-child(5)::after {
    content: "◀";
    position: absolute;
    left: calc(50% + 6rem);
    top: 6rem;
    transform: translateY(-50%);
    color: #E47B67;
    font-size: 1.25rem;
    line-height: 1;
    z-index: 2;
  }
}

/* 6. Certification */
.hp-certification {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-white.png') no-repeat center center / 100% auto;
  background-attachment: fixed;
  text-align: center;
  padding-top: 2rem;
}
.hp-certification .cert-inner {
  padding: 30px 90px;
  border-radius: 30px;
  border-bottom: 20px solid #F2F5F7;
 
}
.hp-certification .btn {
  margin-bottom: -100px;
}
.hp-certification h2 {
  font-size: clamp(1.765rem, 3.294vw, 2.5rem);
  margin-bottom: 1.25rem;
}
.hp-certification p {
  margin-bottom: 2rem;
  font-weight: 500;
  color: #23272A;
}
.hp-certification .cert-badge-strip {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.hp-certification .cert-badge-strip .cert-badge {
  background: #F4F7FB;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1A5299;
  border: 1px solid #E0E8F2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* 7. FAQ */
.hp-faq {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F7 24.32%);
}
.hp-faq h2 {
  font-size: clamp(1.765rem, 3.294vw, 2.5rem);
  margin-bottom: 2.5rem;
  text-align: center;
}
.hp-faq .accordion-item {
  background: #fff;
  border: 1px solid #E0E8F2 !important;
  border-radius: 0.75rem !important;
  margin-bottom: 0.875rem;
  overflow: hidden;
}
.hp-faq .accordion-item:first-of-type, .hp-faq .accordion-item:last-of-type {
  border-radius: 0.75rem !important;
}
.hp-faq .accordion-button {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #00ADEE;
  padding: 1.25rem 1.5rem;
  background: #fff;
  box-shadow: none !important;
}
.hp-faq .accordion-button:not(.collapsed) {
  color: #00ADEE;
  background: #fff;
}
.hp-faq .accordion-button::after {
  background-image: none;
  content: "+";
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #00ADEE;
  width: auto;
  height: auto;
  transform: none;
}
.hp-faq .accordion-button:not(.collapsed)::after {
  background-image: none;
  content: "−";
  transform: none;
}
.hp-faq .accordion-body {
  font-size: 1.125rem;
  color: #4A5568;
  line-height: 1.75;
  padding: 0 1.5rem 1.5rem;
}


/* 4b. Workforce view — hub-node pulse (grouped with Workforce view above) */
.hub-num.pulse {
  animation: hub-pulse 0.4s ease;
}

@keyframes hub-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(26, 82, 153, 0.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 8. Scroll reveal - UNCOMMENT BELOW TO ENABLE */
/* .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
} */

.reveal {
  opacity: 1;
  transform: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

.reveal-delay-5 {
  transition-delay: 0.5s;
}

/* ===== Hero layout (canvas placeholder) ===== */

/* Clips the canvas bleed (below) at the viewport edge so it doesn't create
   page-level scroll. Section is already full-width, so this has no effect
   on anything else. Both axes: overflow-x alone left vertical bleed
   unclipped, causing an intermittent vertical scrollbar as dots animate
   past the canvas edge. */
.hp-hero {
  overflow: hidden;
}

/* .hp-hero is display:flex (row) at lg+; .hero-inner is its only flex
   child now, so it needs an explicit width or it'll shrink to content. */
.hp-hero .hero-inner {
  width: 100%;
}

.hp-hero .row {
  overflow: visible;
}

.hero-canvas {
  aspect-ratio: 7 / 9;
  width: 100%;
}

@media (min-width: 992px) {
  /* Match .hero-content's rendered height (+3rem top/bottom) instead of the
     aspect-ratio used below 992px. Requires the row to stretch so this
     column's height is driven by the text column rather than centered. */
  .hp-hero .row {
    /* Markup has Bootstrap's .align-items-center utility, which sets
       align-items: center !important — needs matching !important to win. */
    align-items: stretch !important;
  }

  /* First-pass bleed value, to tune. */
  .hero-canvas {
    aspect-ratio: unset;
    width: 120%;
    height: calc(100% + 6rem);
    /* First-pass value, to tune: shifts the canvas down so there's empty
       space above it and its content bleeds off the bottom edge instead
       (mirroring the right-edge bleed), rather than bleeding off the top. */
    margin-top: 4rem;
    margin-bottom: -3rem;
    margin-right: -10vw;
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  /* Specificity note: matches .hp-hero .hero-scroll (not the bare
     .hero-scroll given in the brief) so this actually beats the existing
     rule's (0,2,0) specificity instead of losing to it silently. */
  .hp-hero .hero-scroll {
    position: static;
    transform: none;
    padding-top: 2.5rem;
  }
}

.card.video-card,
.castos-iframe-player,
.wp-image-2842,
.subpage-book-wrapper,
.homepage-introducing-vid {
  border-radius: 2rem;
  overflow: hidden;
}

.bg-img{
position: relative;
background-size: cover;
background-position: center;
}
.bg-img *:not(.overlay) { position: relative; }

.page-id-1532 .page-template-full-width-template .content-subpage {
  padding: 0 !important;
}

.hp-section.stronger-hero.bg-img .overlay {
  background: rgba(255, 255, 255, 0.5);
}

.card {
  border-radius: 2rem;
}

.subpage-header p {
  font-size: 1.25rem;
}

.subpage-header .lead {
  font-size: 1.5rem;
}

.stronger-highlights {
  background: linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  
}

.stronger-highlights-opening {
  font-size: 1.5rem;
  padding: 2rem;
  text-align: center;
  
}

.stronger-sessions {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-10.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
}

.card-img, .card-img-top {
  border-radius: 2rem;
}

.stronger-expert {
  
  
  font-size: 1.25rem;
}

.jr-img .rounded {
  border-top-left-radius: 2rem !important;
  border-top-right-radius: 2rem !important;
  margin-bottom: 0;
}

.jr-img figcaption {
  border-bottom-left-radius: 2rem !important;
  border-bottom-right-radius: 2rem !important;
  background: #fff;
  padding: 1rem 2rem 2rem;
}

.jr-img {
  box-shadow: 0 4px 24px rgba(10, 35, 66, 0.07);
  border-radius: 2rem;
}

.stronger-sessions h3.h5 {
  font-size: 2rem;
  margin-top: 3rem;
  font-weight: 600;
}

.stronger-sessions p.muted {
  font-size: 1.25rem;
}

.stronger-science.programme-form {
  color: #fff;
  font-size: 1.25rem;
}


.client-story-boyum,
.client-story-fogarty,
.client-story-carlsberg {


  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-10.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
  background-attachment: fixed;
}


.client-certifications {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines2-10.png') no-repeat center center / 100% auto;
  
}

.about-intro-video {
    background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-10.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
  
}

.healthy-managers-intro * {
  position: relative;
}

.healthy-managers-intro .overlay {
  position: absolute;
}

.about-movement {
  padding-top: 1rem;
}

.about-team {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines2-10.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
}

.card-one-programme-related {
  padding: 2rem;
}

.card-one-programme-related .card-title {
  margin-bottom: 1rem;
}

.one-programme-related a:hover {
  background: #F1F4F7;
  color: inherit;
}

.one-programme-layers {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-10.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
}

.one-programme-conditions {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-white.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
}

.content-subpage-contact {
  background: url('/wp-content/themes/hptw-2026-legacy/assets/img/lines-white.png') no-repeat center center / 100% auto,linear-gradient(180deg, #F1F4F7 75.68%, #FFFFFF 100%);
  background-size: 100% auto;
}

.one-title {
  font-size: 166%;
  font-weight: 900;
}

.one-hero-heading {
  margin-bottom: 3rem;

}

.one-hero-heading span {
    position: initial !important;
    font-weight: 900;
    font-size: 6rem;
}

.one-programme-conditions.programme-form {
  color: #fff;
}

.card-layers.card {
  padding: 2rem;
}

.iai {
  padding: 3rem 0 1rem;
  font-size: 2rem;
  font-weight: 900;
  text-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px;
}

.iai .rounded-pill {
    background: #0dcce2;
}

.card-layers.card:hover {
  text-decoration: none;
  color: inherit;
  background: #F1F4F7;
}

.card-conditions {
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(10, 35, 66, 0.07);
}


.one-programme-solution p,
.one-programme-solution ul {
  font-size: 1.25rem;
}

.one-programme-solution.programme-form {
  color: #fff;
}

.programme-form h2,
.programme-form h3,
.programme-form h4,
.programme-form h5,
.programme-form h6 {
  color: #fff;
  
  margin-top: 3rem;

}

.card-callout {
  background: #F1F4F7;
  padding: 1rem;
}

.heading-one {
  font-size: 6rem;
  font-weight: 900;
}