/* =====================================================================
   CaminhoIT homepage — 2026 redesign
   ---------------------------------------------------------------------
   Loaded on every public page by header-v2.php, after caminho.css. The
   .h-* blocks are the 2026 design system's base pieces (tokens, type,
   buttons, diagonal panels, process, CTA); the page templates reuse them
   and add their own in pages.css. The header-over-photo treatment (§3)
   applies to the homepage and to any page whose body contains a
   .p-mast photo hero (the page templates open with one).
   The site-wide footer changes live in caminho.css §14, not here.

   Sections
     1.  Tokens and layout primitives
     2.  Shared homepage type: eyebrows, headings, buttons
     3.  Header over the hero (homepage only)
     4.  Hero
     5.  Partner strip
     6.  Services showcase (diagonal photographic panels)
     7.  Why CaminhoIT
     8.  IT Health Check banner
     9.  Process
     10. Sectors
     11. Insights
     12. Closing call to action
     13. Responsive
     14. Reduced motion
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Tokens and layout primitives                                     */
/* ------------------------------------------------------------------ */
:root {
  --h-navy:        #0b1738;
  --h-navy-deep:   #091d38;
  --h-navy-ink:    #101b3e;
  --h-purple:      #6245f5;
  --h-purple-2:    #7659ff;
  --h-purple-lite: #a99bff;
  --h-purple-soft: #eae8ff;
  --h-cyan:        #0aa4d8;
  --h-green:       #13b981;
  --h-text:        #56617b;
  --h-alt:         #f5f7fc;

  --h-wrap:    1360px;
  --h-gutter:  clamp(20px, 4vw, 56px);
  --h-section: clamp(64px, 7.5vw, 104px);
  --h-radius:  24px;
  --h-ease:    cubic-bezier(.2, .7, .2, 1);
}

html.dark {
  --h-navy-ink:    #eef0fa;
  --h-text:        #b3b8d4;
  --h-alt:         #0d0f24;
  --h-purple-soft: #241f4d;
}

.h-wrap {
  width: min(var(--h-wrap), 100% - (var(--h-gutter) * 2));
  margin-inline: auto;
}

.h-section { padding-block: var(--h-section); }
.h-section--tight { padding-block: clamp(48px, 5.5vw, 76px); }
.h-section--alt { background: var(--h-alt); }

/* ------------------------------------------------------------------ */
/* 2. Shared homepage type                                             */
/* ------------------------------------------------------------------ */
.h-eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--h-purple);
}
html.dark .h-eyebrow { color: var(--h-purple-lite); }

.h-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(9, 20, 52, .25);
}

.h-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--h-navy-ink);
  text-wrap: balance;
}

.h-hl { color: var(--h-purple); }
html.dark .h-hl { color: var(--h-purple-lite); }

.h-lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.62;
  color: var(--h-text);
}

.h-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--h-ease), border-color .2s var(--h-ease),
              color .2s var(--h-ease), box-shadow .2s var(--h-ease), transform .2s var(--h-ease);
}
.h-btn .cit-ico { width: 18px; height: 18px; flex: none; transition: transform .2s var(--h-ease); }
.h-btn:hover .cit-ico { transform: translateX(3px); }
.h-btn--sm { min-height: 46px; padding: 0 22px; font-size: 14.5px; }

.h-btn--primary {
  background: linear-gradient(110deg, var(--h-purple-2), var(--h-purple));
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(98, 69, 245, .75);
}
.h-btn--primary:hover {
  color: #fff;
  background: linear-gradient(110deg, #8469ff, #5638ef);
  box-shadow: 0 14px 30px -12px rgba(98, 69, 245, .9);
  transform: translateY(-1px);
}

.h-btn--light {
  background: rgba(255, 255, 255, .04);
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.h-btn--light:hover { color: var(--h-navy); background: #fff; border-color: #fff; }

.h-btn--outline {
  background: transparent;
  color: var(--h-navy);
  border-color: var(--h-navy);
}
.h-btn--outline:hover { color: #fff; background: var(--h-navy); }

.h-btn:focus-visible { outline: 3px solid var(--h-purple-lite); outline-offset: 3px; }

/* Heading sizes. caminho.css §26 caps every h1/h2/h3 inside <main> with
   !important (to tame legacy pages); the homepage's own scale is restored
   here, scoped by the main element's ID so it outranks those caps. */
#main-content .h-mast__title  { font-size: clamp(46px, 5.6vw, 88px) !important; line-height: .98 !important; }
#main-content .h-title        { font-size: clamp(30px, 3.1vw, 46px) !important; line-height: 1.06 !important; }
#main-content .h-title--sm    { font-size: clamp(26px, 2.3vw, 34px) !important; line-height: 1.1 !important; }
#main-content .h-health__title { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.05 !important; }
#main-content .h-cta__title   { font-size: clamp(32px, 3.4vw, 50px) !important; line-height: 1.04 !important; }
#main-content .h-svc__title   { font-size: clamp(19px, 1.45vw, 23px) !important; line-height: 1.12 !important; }
#main-content .h-why__item h3 { font-size: 17px !important; line-height: 1.25 !important; }
#main-content .h-step h3      { font-size: 16.5px !important; line-height: 1.3 !important; }
#main-content .h-sector h3    { font-size: 16px !important; line-height: 1.3 !important; }
#main-content .h-post h3      { font-size: 17px !important; line-height: 1.3 !important; }
@media (max-width: 767px) {
  #main-content .h-mast__title { font-size: clamp(42px, 12vw, 56px) !important; }
}

/* ------------------------------------------------------------------ */
/* 3. Header over the hero (homepage and .p-mast pages)                             */
/*    The shared header stays sticky; on the homepage it starts         */
/*    transparent over the photograph and turns solid navy once the     */
/*    page scrolls. The hero pulls itself up underneath it.             */
/* ------------------------------------------------------------------ */
:is(.cit-page-home, body:has(.p-mast)) .cit-header {
  /* A tinted navy glass band rather than a fade to nothing, so the nav
     always reads as its own layer above the photograph. */
  background: rgba(11, 23, 56, .58);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(255, 255, 255, .10);
}
:is(.cit-page-home, body:has(.p-mast)) .cit-header.is-scrolled,
:is(.cit-page-home, body:has(.p-mast)).cit-nav-open .cit-header {
  background: rgba(11, 23, 56, .94);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 30px rgba(5, 10, 30, .25);
}
/* The header and footer share the homepage's wider column so their edges
   line up with the sections between them. */
:is(.cit-page-home, body:has(.p-mast)) .cit-header .cit-container,
:is(.cit-page-home, body:has(.p-mast)) .cit-footer .cit-container { width: min(var(--h-wrap), 100% - (var(--h-gutter) * 2)); }

:is(.cit-page-home, body:has(.p-mast)) .cit-header .cit-logo__name { color: #fff; }
:is(.cit-page-home, body:has(.p-mast)) .cit-header .cit-logo__tag  { color: #c3bcff; }

:is(.cit-page-home, body:has(.p-mast)) .cit-nav-toggle { border-color: rgba(255, 255, 255, .35); }
:is(.cit-page-home, body:has(.p-mast)) .cit-nav-toggle span { background: #fff; }

@media (min-width: 1081px) {
  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__link { color: rgba(255, 255, 255, .86); font-size: 13.5px; font-weight: 600; }
  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__link:hover,
  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__link[aria-expanded="true"] { color: #fff; }
  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__link.is-active { color: #fff; border-bottom-color: var(--h-purple-2); }

  :is(.cit-page-home, body:has(.p-mast)) .cit-lang button { color: rgba(255, 255, 255, .55); }
  :is(.cit-page-home, body:has(.p-mast)) .cit-lang button:hover,
  :is(.cit-page-home, body:has(.p-mast)) .cit-lang .is-active { color: #fff; }
  :is(.cit-page-home, body:has(.p-mast)) .cit-lang__sep { background: rgba(255, 255, 255, .28); }

  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__tail .cit-btn--outline {
    background: rgba(255, 255, 255, .04);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
  }
  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__tail .cit-btn--outline:hover { background: #fff; color: var(--h-navy); border-color: #fff; }

  :is(.cit-page-home, body:has(.p-mast)) .cit-nav__tail .cit-btn--primary {
    background: linear-gradient(110deg, var(--h-purple-2), var(--h-purple));
    box-shadow: 0 8px 22px -10px rgba(118, 89, 255, .9);
  }

  :is(.cit-page-home, body:has(.p-mast)) .cit-userchip { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .3); }
  :is(.cit-page-home, body:has(.p-mast)) .cit-userchip:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
}

/* ------------------------------------------------------------------ */
/* 4. Hero                                                             */
/* ------------------------------------------------------------------ */
.h-mast {
  /* Fixed height so the photograph's crop — and therefore where the UK and
     Portugal labels sit against the map in it — is predictable. */
  --hero-h: clamp(640px, 50vw, 860px);
  position: relative;
  isolation: isolate;
  height: var(--hero-h);
  margin-top: calc(var(--cit-header-h) * -1);
  padding-top: var(--cit-header-h);
  overflow: hidden;
  background: var(--h-navy);
  color: #fff;
  display: flex;
  align-items: center;
}

/* The media box keeps the image's own aspect ratio and is at least as tall
   as the hero, so overlay labels can be placed in image percentages. */
.h-mast__media {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: max(100%, calc(var(--hero-h) * 2.3337));
  aspect-ratio: 1916 / 821;
  transform: translate(-50%, -50%);
}
.h-mast__media picture,
.h-mast__media img { display: block; width: 100%; height: 100%; }
.h-mast__media img { object-fit: cover; }

.h-mast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 17, 48, .94) 0%, rgba(8, 17, 48, .82) 28%, rgba(8, 17, 48, .38) 50%, rgba(8, 17, 48, 0) 66%),
    linear-gradient(0deg, rgba(8, 17, 48, .55) 0%, rgba(8, 17, 48, 0) 28%);
}

.h-mast__inner { position: relative; width: min(var(--h-wrap), 100% - (var(--h-gutter) * 2)); margin-inline: auto; }
.h-mast__copy { max-width: 640px; }

.h-mast__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.045em;
  color: #fff;
}
.h-mast__title .h-mast__accent {
  background: linear-gradient(95deg, #9d8cff 0%, #7a63ff 55%, #6d7dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keeps the descender of the question mark inside the clip box. */
  padding-bottom: .06em;
}

.h-mast__lead {
  margin: 26px 0 0;
  max-width: 31em;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}

.h-mast .h-actions { margin-top: 34px; }

.h-mast__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
}
.h-mast__benefits li { display: inline-flex; align-items: center; gap: 10px; }
.h-mast__benefits .cit-ico { width: 20px; height: 20px; color: #b3a8ff; }
.h-mast__benefits li:last-child .cit-ico { color: #4fd8a8; }

/* UK / Portugal labels, positioned against the map in the photograph. */
.h-mast__place {
  position: absolute;
  z-index: 1;
  width: 190px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  color: var(--h-navy);
  box-shadow: 0 18px 40px -16px rgba(5, 10, 40, .55);
  font-size: 12.5px;
  line-height: 1.4;
}
.h-mast__place strong { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--h-navy); margin-bottom: 3px; }
.h-mast__place svg { width: 22px; height: 15px; border-radius: 2px; flex: none; }
.h-mast__place span { color: #4b5578; }
.h-mast__place--uk { left: 59.6%; top: 13%; }
.h-mast__place--pt { left: 66.5%; top: 67%; }

/* ------------------------------------------------------------------ */
/* 5. Partner strip                                                    */
/* ------------------------------------------------------------------ */
.h-partners { background: var(--cit-white); border-bottom: 1px solid var(--cit-line); }
.h-partners .cit-partners__inner { padding-block: 30px; gap: clamp(28px, 4vw, 64px); }
.h-partners .cit-partners__label { max-width: 170px; white-space: normal; font-size: 11px; line-height: 1.5; }
.h-partners .cit-partners__logos { gap: 22px 36px; }

/* ------------------------------------------------------------------ */
/* 6. Services showcase                                                */
/* ------------------------------------------------------------------ */
.h-services { position: relative; overflow: hidden; background: var(--cit-white); padding-bottom: clamp(36px, 3.5vw, 52px); }

.h-services__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
}

.h-services__panels {
  --slant: 64px;
  --seam: 6px;
  display: flex;
  min-height: 480px;
}

.h-svc {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background: var(--h-navy);
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transition: filter .35s var(--h-ease);
}
.h-svc + .h-svc { margin-left: calc((var(--slant) - var(--seam)) * -1); }

.h-svc__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--h-ease);
}
.h-svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 16, 46, 0) 18%, var(--svc-tint-mid) 52%, var(--svc-tint) 100%);
}
.h-svc--managed { --svc-tint: rgba(38, 24, 120, .97);  --svc-tint-mid: rgba(38, 24, 120, .55); --svc-accent: #8a74ff; }
.h-svc--cyber   { --svc-tint: rgba(6, 42, 102, .97);   --svc-tint-mid: rgba(6, 42, 102, .55);  --svc-accent: #19b8ec; }
.h-svc--cloud   { --svc-tint: rgba(10, 58, 130, .96);  --svc-tint-mid: rgba(10, 58, 130, .5);  --svc-accent: #3d8bff; }
.h-svc--esg     { --svc-tint: rgba(6, 70, 48, .97);    --svc-tint-mid: rgba(6, 70, 48, .5);    --svc-accent: #2fd394; }

.h-svc__img--managed { object-position: 72% 30%; }
.h-svc__img--cyber   { object-position: 50% 40%; }
.h-svc__img--cloud   { object-position: 50% 30%; }
.h-svc__img--esg     { object-position: 50% 30%; }

/* Content sits low in the panel, where the left edge is at 0 and the right
   edge has been pulled in by the slant — hence the asymmetric padding. */
.h-svc__body {
  padding: 0 calc(var(--slant) + 10px) 34px calc(var(--slant) * .42 + 10px);
  border-radius: 8px;
}
.h-svc__icon { display: block; width: 30px; height: 30px; margin-bottom: 14px; color: #fff; }
.h-svc__title {
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.h-svc__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.h-svc__line {
  display: block;
  width: 36px;
  height: 4px;
  margin-top: 18px;
  border-radius: 4px;
  background: var(--svc-accent);
  transition: width .35s var(--h-ease);
}

.h-svc:hover .h-svc__img,
.h-svc:focus-visible .h-svc__img { transform: scale(1.05); }
.h-svc:hover .h-svc__line,
.h-svc:focus-visible .h-svc__line { width: 64px; }
.h-svc:hover { color: #fff; }

/* clip-path would cut a normal outline at the slanted edges, so the focus
   ring is drawn around the text block instead. */
.h-svc:focus-visible { outline: none; }
.h-svc:focus-visible .h-svc__body { outline: 3px solid #fff; outline-offset: 6px; }

.h-services__more {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  margin-top: clamp(34px, 3.5vw, 48px);
  padding-top: 26px;
  border-top: 1px solid var(--cit-line);
}
.h-services__more-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cit-muted);
}
.h-services__more ul { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.h-services__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--h-navy-ink);
}
.h-services__more a .cit-ico { width: 14px; height: 14px; color: var(--h-purple); transition: transform .2s var(--h-ease); }
.h-services__more a:hover { color: var(--h-purple); }
.h-services__more a:hover .cit-ico { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* 7. Why CaminhoIT                                                    */
/* ------------------------------------------------------------------ */
.h-why { background: var(--cit-white); }
.h-why__grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
}
.h-why__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.h-why__item { padding: 6px clamp(18px, 2vw, 32px); }
.h-why__item + .h-why__item { border-left: 1px solid var(--cit-line); }
.h-why__icon { width: 34px; height: 34px; color: var(--h-purple); margin-bottom: 16px; }
.h-why__item--green .h-why__icon { color: var(--h-green); }
.h-why__item h3 { margin: 0 0 8px; font-weight: 800; letter-spacing: -.015em; color: var(--h-navy-ink); }
.h-why__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--h-text); }
html.dark .h-why__icon { color: var(--h-purple-lite); }

/* ------------------------------------------------------------------ */
/* 8. IT Health Check banner                                           */
/* ------------------------------------------------------------------ */
.h-health-wrap { padding-block: clamp(24px, 3vw, 40px); }
.h-health {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(220px, .62fr);
  grid-template-areas: "copy visual benefits";
  align-items: center;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--h-radius);
  color: #fff;
  background:
    radial-gradient(ellipse 60% 90% at 88% 30%, rgba(214, 104, 150, .38), rgba(214, 104, 150, 0) 70%),
    linear-gradient(100deg, #0d1b4a 0%, #13235c 45%, #2a2468 75%, #3c2a6c 100%);
}

.h-health__copy { grid-area: copy; position: relative; z-index: 2; padding: clamp(36px, 4vw, 60px); }
.h-health .h-pill { margin-bottom: 18px; }
.h-health__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
}
.h-health__text { margin: 18px 0 0; max-width: 30em; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.h-health .h-actions { margin-top: 28px; }

/* The photograph is fitted to the banner height and centred on the laptop;
   its left side is already dark navy, and the mask feathers both edges into
   the banner's own gradient. */
.h-health__visual { grid-area: visual; position: relative; z-index: 1; align-self: stretch; min-height: 100%; }
.h-health__visual img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-62%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
}

.h-health__benefits {
  grid-area: benefits;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 clamp(28px, 3vw, 48px) 0 0;
  list-style: none;
  font-size: 15.5px;
  font-weight: 700;
}
.h-health__benefits li { display: flex; align-items: center; gap: 12px; }
.h-health__benefits .h-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--h-green);
  color: #fff;
}
.h-health__benefits .h-tick .cit-ico { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ */
/* 9. Process                                                          */
/* ------------------------------------------------------------------ */
.h-flow { background: var(--cit-white); }
.h-flow__row {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
.h-flow__row + .h-flow__row {
  margin-top: clamp(44px, 4.5vw, 64px);
  padding-top: clamp(44px, 4.5vw, 64px);
  border-top: 1px solid var(--cit-line);
}

.h-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: h-step;
}
.h-step { position: relative; padding-right: clamp(22px, 2.4vw, 40px); counter-increment: h-step; }
.h-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  right: clamp(6px, .9vw, 14px);
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--cit-line-strong);
  border-right: 2px solid var(--cit-line-strong);
  transform: rotate(45deg);
}
.h-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--h-purple-soft);
  color: var(--h-purple);
}
html.dark .h-step__icon { color: var(--h-purple-lite); }
.h-step__icon .cit-ico { width: 22px; height: 22px; }
.h-step h3 { margin: 0 0 6px; font-weight: 800; letter-spacing: -.01em; color: var(--h-navy-ink); }
.h-step h3::before { content: counter(h-step); margin-right: 8px; color: var(--h-purple); }
html.dark .h-step h3::before { color: var(--h-purple-lite); }
.h-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--h-text); }

/* ------------------------------------------------------------------ */
/* 10. Sectors                                                         */
/* ------------------------------------------------------------------ */
.h-sectors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.h-sector a {
  display: block;
  height: 100%;
  padding: 4px clamp(16px, 1.8vw, 28px) 8px 0;
  color: var(--h-navy-ink);
  text-decoration: none;
}
.h-sector__icon { width: 30px; height: 30px; margin-bottom: 14px; color: var(--h-purple); transition: transform .25s var(--h-ease); }
html.dark .h-sector__icon { color: var(--h-purple-lite); }
.h-sector h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: inherit;
}
.h-sector h3 .cit-ico { width: 14px; height: 14px; color: var(--h-purple); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--h-ease); }
.h-sector p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--h-text); }
.h-sector a:hover,
.h-sector a:focus-visible { color: var(--h-purple); }
.h-sector a:hover .h-sector__icon,
.h-sector a:focus-visible .h-sector__icon { transform: translateY(-3px); }
.h-sector a:hover h3 .cit-ico,
.h-sector a:focus-visible h3 .cit-ico { opacity: 1; transform: none; }
html.dark .h-sector a:hover { color: var(--h-purple-lite); }

/* ------------------------------------------------------------------ */
/* 11. Insights                                                        */
/* ------------------------------------------------------------------ */
.h-insights__grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
.h-insights__head .h-actions { margin-top: 26px; }
.h-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }

.h-post {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cit-line);
  border-radius: 16px;
  background: var(--cit-white);
  transition: border-color .25s var(--h-ease), box-shadow .25s var(--h-ease), transform .25s var(--h-ease);
}
.h-post:hover,
.h-post:focus-within {
  border-color: #cfc8ff;
  box-shadow: 0 18px 40px -24px rgba(30, 36, 90, .35);
  transform: translateY(-3px);
}
.h-post__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--h-alt); }
.h-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--h-ease); }
.h-post:hover .h-post__thumb img { transform: scale(1.04); }
.h-post__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.h-post__cat {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--h-purple);
  background: var(--h-purple-soft);
}
html.dark .h-post__cat { color: var(--h-purple-lite); }
.h-post__cat--green { color: #0b7a55; background: #dff6ec; }
.h-post h3 { margin: 0 0 14px; font-weight: 800; letter-spacing: -.015em; }
.h-post h3 a { color: var(--h-navy-ink); }
/* Stretched link: the whole card is clickable through the title link. */
.h-post h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.h-post h3 a:focus-visible { outline: none; }
.h-post:has(h3 a:focus-visible) { outline: 3px solid var(--h-purple-lite); outline-offset: 3px; }
.h-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  font-size: 12.5px;
  color: var(--cit-muted);
}
.h-post__meta span { display: inline-flex; align-items: center; gap: 5px; }
.h-post__meta .cit-ico { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ */
/* 12. Closing call to action                                          */
/* ------------------------------------------------------------------ */
.h-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 28vw, 480px);
  background: #efeaff;
}
.h-cta__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}
.h-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(244, 241, 255, .98) 0%, rgba(244, 241, 255, .94) 30%, rgba(244, 241, 255, .55) 50%, rgba(244, 241, 255, 0) 66%),
    linear-gradient(180deg, rgba(244, 241, 255, .35) 0%, rgba(244, 241, 255, 0) 30%);
}
.h-cta__inner {
  width: min(var(--h-wrap), 100% - (var(--h-gutter) * 2));
  margin-inline: auto;
  padding-block: clamp(56px, 6vw, 88px);
}
.h-cta__copy { max-width: 600px; }
.h-cta .h-eyebrow { color: var(--h-purple); }
.h-cta__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--h-navy);
}
.h-cta__text { margin: 18px 0 0; max-width: 30em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: #3d4766; }

/* ------------------------------------------------------------------ */
/* 13. Responsive                                                      */
/* ------------------------------------------------------------------ */

/* Large laptops: tighten the service panels before they get too narrow. */
@media (max-width: 1360px) {
  .h-services__panels { --slant: 52px; min-height: 460px; }
  .h-svc__text { font-size: 13.5px; }
}

@media (max-width: 1240px) {
  /* Intro above, four panels full width. */
  .h-services__grid { grid-template-columns: minmax(0, 1fr); }
  .h-services__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; }
  .h-services__intro .h-lead { margin-top: 0; }
  .h-services__intro .h-actions { grid-column: 2; margin-top: 4px; }

  .h-why__grid,
  .h-flow__row,
  .h-insights__grid { grid-template-columns: minmax(0, 1fr); }
  .h-why__item:first-child,
  .h-sector:first-child a { padding-left: 0; }

  .h-health { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "copy visual" "benefits benefits"; }
  .h-health__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    padding: 22px clamp(36px, 4vw, 60px) clamp(32px, 3.5vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .h-health__visual img { transform: translateX(-58%); }
}

@media (max-width: 1080px) {
  .h-mast { --hero-h: clamp(620px, 78vw, 760px); }
  .h-mast::before {
    background:
      linear-gradient(90deg, rgba(8, 17, 48, .94) 0%, rgba(8, 17, 48, .8) 45%, rgba(8, 17, 48, .25) 75%, rgba(8, 17, 48, .1) 100%),
      linear-gradient(0deg, rgba(8, 17, 48, .6) 0%, rgba(8, 17, 48, 0) 35%);
  }
  /* The labels only make sense next to the map; at these widths the map is
     behind the copy, so they are dropped. */
  .h-mast__place { display: none; }
  .h-mast__media { left: 38%; }

  /* Panels go to a 2 × 2 grid with a cut corner instead of the slant. */
  .h-services__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; }
  .h-svc { min-height: 380px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
  .h-svc + .h-svc { margin-left: 0; }
  .h-svc__body { padding: 0 64px 30px 28px; }

  .h-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .h-why__item:nth-child(3) { border-left: 0; padding-left: 0; }

  .h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .h-step:nth-child(3)::after { display: none; }

  .h-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }

  .h-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-posts > :nth-child(3) { display: none; }
}

@media (max-width: 767px) {
  .h-mast {
    --hero-h: auto;
    height: auto;
    min-height: 640px;
    align-items: flex-end;
  }
  .h-mast__inner { padding-block: 40px 44px; }
  /* Phone crop: the coast and the map fill the top of the screen; the copy
     sits on a navy fade at the bottom. */
  .h-mast__media { top: 0; left: 0; width: 100%; height: 62%; aspect-ratio: auto; transform: none; }
  .h-mast__media img { object-position: 74% 40%; }
  .h-mast::before {
    background: linear-gradient(180deg, rgba(8, 17, 48, .55) 0%, rgba(8, 17, 48, .1) 22%, rgba(8, 17, 48, .55) 44%, rgba(8, 17, 48, .97) 62%, #081130 100%);
  }
  .h-mast { background: #081130; }
  .h-mast__copy { padding-top: 34vw; }
  .h-mast__lead { font-size: 16.5px; margin-top: 18px; }
  .h-mast .h-actions { flex-direction: column; margin-top: 26px; }
  .h-mast .h-btn { width: 100%; }
  .h-mast__benefits { gap: 10px 20px; margin-top: 26px; font-size: 13.5px; }

  .h-partners .cit-partners__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .h-partners .cit-partners__label { max-width: none; }
  .h-partners .cit-partners__logos { justify-content: flex-start; gap: 16px 26px; }

  .h-services__intro { display: block; }
  .h-services__intro .h-lead { margin-top: 16px; }
  .h-services__intro .h-actions { margin-top: 24px; }

  .h-services__panels { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .h-svc { min-height: 300px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }
  .h-svc__body { padding: 0 52px 26px 24px; }
  .h-svc::after { background: linear-gradient(180deg, rgba(8, 16, 46, .05) 10%, var(--svc-tint-mid) 45%, var(--svc-tint) 100%); }

  .h-services__more { flex-direction: column; gap: 14px; }
  .h-services__more ul { flex-direction: column; gap: 12px; }

  .h-why__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .h-why__item,
  .h-why__item:nth-child(3) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-left: 0; }
  .h-why__item + .h-why__item { border-left: 0; border-top: 1px solid var(--cit-line); }
  .h-why__icon { grid-row: span 2; width: 30px; height: 30px; margin: 2px 0 0; }

  .h-health-wrap { padding-block: 12px 24px; }
  .h-health { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "copy" "benefits"; border-radius: 20px; }
  .h-health__visual { min-height: 0; height: 230px; }
  .h-health__visual img {
    left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 66% 62%;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .h-health__copy { padding: 8px 24px 0; }
  .h-health .h-btn { width: 100%; }
  .h-health__benefits { flex-direction: column; gap: 12px; padding: 24px 24px 30px; border-top: 0; }

  /* Process becomes a vertical timeline. */
  .h-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .h-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 0 26px;
  }
  .h-step__icon { grid-row: span 2; margin: 0; position: relative; z-index: 1; }
  .h-step:not(:last-child)::after,
  .h-step:nth-child(3)::after {
    display: block;
    top: 48px; bottom: 4px; left: 21px; right: auto;
    width: 2px; height: auto;
    border: 0;
    background: var(--cit-line);
    transform: none;
  }
  .h-step h3 { margin-top: 10px; }

  .h-sectors { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .h-sector + .h-sector { border-top: 1px solid var(--cit-line); }
  .h-sector a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; }
  .h-sector__icon { grid-row: span 2; width: 26px; height: 26px; margin: 0; }
  .h-sector h3 .cit-ico { opacity: 1; transform: none; }

  .h-posts { grid-template-columns: minmax(0, 1fr); }
  .h-posts > :nth-child(3) { display: flex; }

  .h-cta { align-items: flex-start; min-height: 560px; }
  .h-cta__img { object-position: 78% 50%; }
  .h-cta::before {
    background: linear-gradient(180deg, rgba(244, 241, 255, .98) 0%, rgba(244, 241, 255, .94) 48%, rgba(244, 241, 255, .3) 70%, rgba(244, 241, 255, 0) 85%);
  }
  .h-cta__inner { padding-block: 44px 200px; }
  .h-cta .h-actions { flex-direction: column; }
  .h-cta .h-btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 14. Reduced motion                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .h-svc__img, .h-post, .h-post__thumb img, .h-btn, .h-sector__icon { transition: none; }
  .h-svc:hover .h-svc__img, .h-post:hover, .h-post:hover .h-post__thumb img, .h-btn--primary:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 14. Motion & interaction (assets/js/home.js)                        */
/* ------------------------------------------------------------------ */
/* Gates:
   .h-motion  set before first paint unless reduced motion is requested;
              drives the hero entrance and parallax.
   .h-fine    a mouse or trackpad; enables the cursor-driven effects.
   .h-ready   home.js has run; only then may content start hidden for the
              scroll reveal, so a failed script never hides anything. */

@keyframes h-line-up   { from { transform: translateY(108%); } to { transform: none; } }
@keyframes h-fade-up   { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes h-pop-in    { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes h-settle    { from { scale: 1.1; } to { scale: 1.04; } }
@keyframes h-float     { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes h-shimmer   { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes h-rise      { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes h-tick-pop  { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes h-ring      {
  0%   { box-shadow: 0 0 0 0 rgba(118, 89, 255, .45); }
  100% { box-shadow: 0 0 0 14px rgba(118, 89, 255, 0); }
}

/* ---- Hero ---- */
/* Each headline line slides up from behind a mask. */
.h-mast__title .h-line { display: block; }
.h-motion .h-mast__title .h-line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.h-motion .h-mast__title .h-line > span { display: inline-block; animation: h-line-up 1s var(--h-ease) both; }
.h-motion .h-mast__title .h-line:nth-child(2) > span { animation-delay: .12s; }

.h-motion .h-mast__title .h-mast__accent {
  background-image: linear-gradient(95deg, #9d8cff 0%, #7a63ff 30%, #b9adff 50%, #7a63ff 70%, #6d7dff 100%);
  background-size: 220% 100%;
  animation: h-shimmer 5s ease-in-out 1.2s infinite alternate;
}

.h-motion .h-mast .h-pill        { animation: h-fade-up .8s var(--h-ease) .05s both; }
.h-motion .h-mast__lead          { animation: h-fade-up .8s var(--h-ease) .35s both; }
.h-motion .h-mast .h-actions     { animation: h-fade-up .8s var(--h-ease) .5s both; }
.h-motion .h-mast__benefits li   { animation: h-fade-up .7s var(--h-ease) both; }
.h-motion .h-mast__benefits li:nth-child(1) { animation-delay: .65s; }
.h-motion .h-mast__benefits li:nth-child(2) { animation-delay: .75s; }
.h-motion .h-mast__benefits li:nth-child(3) { animation-delay: .85s; }

/* The photograph settles in, then follows the cursor and the scroll. The
   labels live inside the media box, so they stay pinned to the map. */
.h-motion .h-mast__media {
  translate: var(--hx, 0px) var(--hy, 0px);
  /* Zoomed just enough to hide the edges while it moves, anchored high so
     the UK label keeps its place under the header. */
  scale: 1.04;
  transform-origin: 60% 20%;
  animation: h-settle 1.8s var(--h-ease) both;
  transition: translate .5s cubic-bezier(.2, .8, .3, 1);
  will-change: translate;
}
/* Above phone width the box is centred with transform: translate(-50%, -50%),
   which the scale above would also scale; the centring moves into translate. */
@media (min-width: 768px) {
  .h-motion .h-mast__media {
    transform: none;
    translate: calc(-50% + var(--hx, 0px)) calc(-50% + var(--hy, 0px));
  }
}
.h-motion .h-mast__inner {
  translate: var(--cx, 0px) var(--cy, 0px);
  opacity: var(--fade, 1);
  transition: translate .5s cubic-bezier(.2, .8, .3, 1);
}
.h-motion .h-mast__place { animation: h-pop-in .7s var(--h-ease) .9s both, h-float 6s ease-in-out 1.6s infinite; }
.h-motion .h-mast__place--pt { animation-delay: 1.05s, 2.6s; }

/* ---- Service panels ---- */
.h-svc { transition: filter .45s var(--h-ease), flex-grow .65s var(--h-ease); }
.h-svc__body { position: relative; z-index: 1; }
.h-svc__img { translate: var(--px, 0px) var(--py, 0px); transition: transform .7s var(--h-ease), translate .6s cubic-bezier(.2, .8, .3, 1); }
.h-svc.is-active .h-svc__img { transform: scale(1.12); }
.h-svc.is-active .h-svc__line { width: 64px; }

/* A light in the panel's accent colour follows the cursor. */
.h-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 60%),
              color-mix(in srgb, var(--svc-accent) 55%, transparent), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .45s var(--h-ease);
}
.h-fine .h-svc.is-active::before { opacity: .75; }

/* While one panel is in focus the others step back. */
.h-services__panels.is-hovering .h-svc:not(.is-active) { filter: saturate(.5) brightness(.72); }
@media (min-width: 1081px) {
  .h-services__panels.is-hovering .h-svc { flex-grow: .8; }
  .h-services__panels.is-hovering .h-svc.is-active { flex-grow: 1.55; }
}

/* Arrow chip, top right; always shown on touch, revealed on hover otherwise. */
.h-svc__go {
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: opacity .35s var(--h-ease), transform .45s var(--h-ease), background-color .35s var(--h-ease), border-color .35s;
}
.h-svc__go .cit-ico { width: 18px; height: 18px; transform: rotate(-45deg); transition: transform .45s var(--h-ease); }
.h-fine .h-svc__go { opacity: 0; transform: scale(.6) translate(-10px, 10px); }
.h-svc:hover .h-svc__go,
.h-svc:focus-visible .h-svc__go,
.h-svc.is-active .h-svc__go { opacity: 1; transform: none; background: var(--svc-accent); border-color: transparent; }
.h-svc:hover .h-svc__go .cit-ico,
.h-svc.is-active .h-svc__go .cit-ico { transform: none; }

/* ---- Insight cards: tilt + glare ---- */
.h-fine .h-post { transform-style: preserve-3d; }
.h-fine .h-post.is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
  transition: transform .12s linear, border-color .25s var(--h-ease), box-shadow .25s var(--h-ease);
  box-shadow: 0 26px 50px -28px rgba(30, 36, 90, .45);
}
.h-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .35s var(--h-ease);
}
.h-post.is-tilting .h-glare { opacity: 1; }
.h-post.is-tilting .h-post__thumb img { transform: scale(1.07); }

/* ---- Magnetic primary buttons ---- */
.h-fine .h-btn--primary {
  translate: var(--bx, 0px) var(--by, 0px);
  transition: background-color .2s var(--h-ease), border-color .2s var(--h-ease), color .2s var(--h-ease),
              box-shadow .2s var(--h-ease), transform .2s var(--h-ease), translate .3s cubic-bezier(.2, .8, .3, 1);
}

/* ---- Hover-to-focus groups ---- */
.h-focus-group > * { transition: opacity .3s var(--h-ease), filter .3s var(--h-ease); }
.h-focus-group.is-hovering > :not(.is-active) { opacity: .42; }
.h-partners .h-focus-group.is-hovering > :not(.is-active) { filter: grayscale(1); }
.h-why__icon { transition: transform .35s var(--h-ease); }
.h-why__item.is-active .h-why__icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
.h-step__icon { transition: background-color .3s var(--h-ease), color .3s var(--h-ease), transform .3s var(--h-ease); }
.h-step.is-active .h-step__icon { background: var(--h-purple); color: #fff; transform: scale(1.08); }

/* ---- Parallax images ---- */
.h-motion .h-health__visual img { translate: 0 var(--sp, 0px); scale: 1.1; }
.h-motion .h-cta__img { translate: 0 var(--sp, 0px); scale: 1.12; }

/* ---- Staggered scroll reveal ---- */
.h-ready .h-rv:not(.h-rv--list):not(.is-in),
.h-ready .h-rv--list:not(.is-in) > .h-rv__item { opacity: 0; }
.h-ready .h-rv:not(.h-rv--list).is-in { animation: h-rise .9s var(--h-ease) backwards; }
.h-ready .h-rv--list.is-in > .h-rv__item { animation: h-rise .8s var(--h-ease) calc(var(--i, 0) * 90ms) backwards; }

/* Health check ticks pop in after their row, and the process icons pulse
   one after another, left to right. */
.h-ready .h-health__benefits.is-in .h-tick { animation: h-tick-pop .5s var(--h-ease) calc(var(--i, 0) * 90ms + .35s) backwards; }
.h-ready .h-steps.is-in .h-step__icon { animation: h-ring 1s ease-out calc(var(--i, 0) * 180ms + .4s) 1 both; }

/* ------------------------------------------------------------------ */
/* 15. Health check: live ops demo (home.js, initOpsDemo)              */
/* ------------------------------------------------------------------ */
/* The console is laid out at 520 × 330 and projected onto the laptop
   screen with a matrix3d computed from the photo's screen corners. */
@keyframes h-ops-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes h-ops-spin  { to { transform: rotate(360deg); } }
@keyframes h-ops-blink { 50% { opacity: 0; } }
@keyframes h-ops-dot   { 0% { box-shadow: 0 0 0 0 rgba(19, 185, 129, .55); } 100% { box-shadow: 0 0 0 9px rgba(19, 185, 129, 0); } }
@keyframes h-ops-toast { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }

.h-ops-screen {
  --ok: #13b981;
  --alert: #f59e0b;
  --ticket: #6245f5;
  --scan: #0aa4d8;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 520px;
  height: 330px;
  transform-origin: 0 0;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  grid-template-rows: 34px minmax(0, 1fr) 24px;
  grid-template-areas: "head head" "ring rows" "task task";
  gap: 10px 18px;
  padding: 16px 20px 12px;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(160deg, #f8f9fe 0%, #eceef8 100%);
  color: #18214d;
  font-family: inherit;
  line-height: 1.2;
  animation: h-ops-in .8s ease .2s both;
}
/* Matches the photo's fade into the banner on the right (set by home.js). */
.h-ops-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(52, 38, 104, 0) var(--fade-u, 100%), rgba(52, 38, 104, var(--fade-a, 0)) 100%);
}
/* Faint reflection and edge shading so it sits in the photo's light. */
.h-ops-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(0deg, rgba(40, 30, 110, .1), rgba(40, 30, 110, 0) 30%);
  box-shadow: inset 0 0 18px rgba(20, 20, 70, .14);
}

.h-ops-screen__head { grid-area: head; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe2f0; }
.h-ops-screen__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.h-ops-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); animation: h-ops-dot 1.6s ease-out infinite; }
.h-ops-screen__meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #6b7393; }
.h-ops-screen__meta em {
  padding: 3px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ticket);
  background: #e6e2ff;
}

.h-ops-screen__ring { grid-area: ring; position: relative; align-self: start; width: 150px; height: 150px; margin: 4px auto 0; }
.h-ops-screen__ring svg { width: 100%; height: 100%; }
.h-ops-ring__track { fill: none; stroke: #e1e4f1; stroke-width: 14; }
.h-ops-ring__bar { fill: none; stroke: var(--scan); stroke-width: 14; stroke-linecap: round; transition: stroke .4s ease; }
.h-ops-screen[data-state="ok"] .h-ops-ring__bar     { stroke: var(--ok); }
.h-ops-screen[data-state="alert"] .h-ops-ring__bar  { stroke: var(--alert); }
.h-ops-screen[data-state="ticket"] .h-ops-ring__bar { stroke: var(--ticket); }
.h-ops-ring__val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.h-ops-ring__val svg { width: 52px; height: 52px; stroke-width: 2.6; }
.h-ops-screen[data-state="ok"] .h-ops-ring__val     { color: var(--ok); }
.h-ops-screen[data-state="alert"] .h-ops-ring__val  { color: var(--alert); }
.h-ops-screen[data-state="ticket"] .h-ops-ring__val { color: var(--ticket); }

.h-ops-screen__bars {
  grid-area: ring;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 46px;
}
.h-ops-screen__bars i {
  display: block;
  width: 14px;
  height: 40%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #8f7bff, #b9b0ff);
  transition: height .8s cubic-bezier(.3, .7, .3, 1);
}

.h-ops-screen__rows { grid-area: rows; display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; list-style: none; }
.h-ops-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30, 36, 90, .07);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.h-ops-row__ico { color: #9aa0bd; }
.h-ops-row__ico svg { width: 22px; height: 22px; }
.h-ops-row__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 700; }
.h-ops-row__state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; }
.h-ops-row__state svg { width: 20px; height: 20px; stroke-width: 2.8; }
.h-ops-row.is-ok     .h-ops-row__state { color: var(--ok); }
.h-ops-row.is-alert  .h-ops-row__state { color: #c77800; }
.h-ops-row.is-ticket .h-ops-row__state { color: var(--ticket); }
.h-ops-row.is-scan   .h-ops-row__state { color: var(--scan); }
.h-ops-row.is-scan   { background: #eaf7fd; box-shadow: 0 0 0 2px rgba(10, 164, 216, .35); }
.h-ops-row.is-scan .h-ops-row__ico { color: var(--scan); }
.h-ops-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid rgba(10, 164, 216, .25);
  border-top-color: var(--scan);
  animation: h-ops-spin .8s linear infinite;
}

.h-ops-screen__task {
  grid-area: task;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 13px/24px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #4a5277;
}
.h-ops-screen__task::before { content: "> "; color: var(--ticket); }
.h-ops-screen__task::after { content: "▍"; margin-left: 2px; color: var(--ticket); animation: h-ops-blink 1s steps(1) infinite; }

/* Readable feed of outcomes, over the sky in the photo. */
.h-ops-feed {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 2%;
  display: grid;
  gap: 8px;
  width: min(300px, 92%);
  pointer-events: none;
}
.h-ops-toast {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(10, 18, 54, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 20, .7);
  color: #fff;
  transition: opacity .4s ease, transform .4s ease;
}
.h-ops-toast.is-new { animation: h-ops-toast .5s var(--h-ease) both; }
.h-ops-toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.97); }
.h-ops-toast__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.h-ops-toast__ico svg { width: 17px; height: 17px; }
.h-ops-toast.is-ok     .h-ops-toast__ico { background: rgba(19, 185, 129, .22); color: #4fe0aa; }
.h-ops-toast.is-alert  .h-ops-toast__ico { background: rgba(245, 158, 11, .22); color: #ffc155; }
.h-ops-toast.is-ticket .h-ops-toast__ico { background: rgba(118, 89, 255, .3);  color: #c3b8ff; }
.h-ops-toast__body { min-width: 0; }
.h-ops-toast__body b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.h-ops-toast__body span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.h-ops-toast time { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }

.h-ops-note {
  position: absolute;
  z-index: 3;
  left: 2%;
  bottom: 16px;
  max-width: 70%;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  text-shadow: 0 1px 6px rgba(0, 0, 30, .8);
}
.h-ops-pause {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(10, 18, 54, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.h-ops-pause:hover { background: var(--h-purple); }
.h-ops-pause:focus-visible { outline: 3px solid var(--h-purple-lite); outline-offset: 2px; }
.h-ops-pause svg { width: 16px; height: 16px; }
.h-health__visual.is-paused .h-ops-dot,
.h-health__visual.is-paused .h-ops-spin,
.h-health__visual.is-paused .h-ops-screen__task::after { animation-play-state: paused; }

@media (max-width: 767px) {
  .h-ops-feed { top: 12px; left: 12px; width: min(250px, 66%); }
  .h-ops-toast { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 10px; }
  .h-ops-toast time { display: none; }
  .h-ops-toast__ico { width: 26px; height: 26px; }
  .h-ops-note { left: 12px; bottom: 10px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-ops-screen, .h-ops-toast.is-new { animation: none; }
  .h-ops-dot, .h-ops-spin, .h-ops-screen__task::after { animation: none; }
  .h-ops-pause { display: none; }
}