/* =====================================================================
   CaminhoIT page templates — 2026 redesign, phase 2
   ---------------------------------------------------------------------
   Loaded on every public page by header-v2.php, after caminho.css and
   home.css. home.css owns the base pieces (tokens, .h-btn, .h-eyebrow,
   .h-title, the diagonal .h-svc panels, .h-steps, .h-why__list, .h-cta);
   this file adds the page-template blocks that the 19 reference designs
   share, under a .p-* prefix.

   Naming note: caminho.css §26 repaints any section whose class contains
   "-hero" (legacy hero bands) — so the photographic hero here is
   .p-mast, never .p-hero.

   Sections
     1.  Section rhythm and headings
     2.  Photographic hero (.p-mast) + hero visuals (orbit, glass card, places)
     3.  Intro + content rows (.p-row)
     4.  Diagonal panel group (.p-panels)
     5.  Cards (.p-card) — photo, icon and link variants
     6.  Dark showcase banner (.p-show)
     7.  Impact / benefits list sizing
     8.  Process sizing
     9.  Value banner (.p-value)
     10. Challenge → response table (.p-challenge)
     11. FAQ (.p-faq)
     12. Metrics strip, quote, glance strip
     13. Breadcrumbs, prose, side rail (articles, legal, case studies)
     14. Forms on the new templates (contact, login)
     15. Responsive
     16. Reduced motion
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Section rhythm and headings                                      */
/* ------------------------------------------------------------------ */
.p-sec { padding-block: clamp(56px, 6vw, 92px); }
.p-sec--tight { padding-block: clamp(40px, 4.5vw, 64px); }
.p-sec--flush-top { padding-top: 0; }
.p-sec--alt { background: var(--h-alt); }
.p-sec + .p-sec:not(.p-sec--alt):not(.p-sec--flush-top) { padding-top: clamp(16px, 2vw, 28px); }
.p-rule { border-top: 1px solid var(--cit-line); }

/* caminho.css §26 caps headings in <main> with !important; the templates'
   own scale is restored under #main-content, as home.css does. */
#main-content .p-mast__title { font-size: clamp(40px, 4.3vw, 66px) !important; line-height: 1.02 !important; }
#main-content .p-mast--compact .p-mast__title { font-size: clamp(38px, 4.2vw, 64px) !important; }
#main-content .p-h2 { font-size: clamp(28px, 2.7vw, 40px) !important; line-height: 1.08 !important; }
#main-content .p-h2--sm { font-size: clamp(24px, 2.1vw, 32px) !important; line-height: 1.12 !important; }
#main-content .p-show__title,
#main-content .p-value__title { font-size: clamp(28px, 2.7vw, 42px) !important; line-height: 1.06 !important; }
#main-content .p-card h3,
#main-content .p-link h3 { font-size: 17px !important; line-height: 1.25 !important; }
#main-content .p-challenge h3 { font-size: 12px !important; }
#main-content .p-faq__q { font-size: 16.5px !important; }
#main-content .p-prose h2 { font-size: clamp(24px, 2.1vw, 30px) !important; line-height: 1.15 !important; }
#main-content .p-prose h3 { font-size: clamp(18px, 1.5vw, 21px) !important; line-height: 1.25 !important; }
#main-content .p-rail h2,
#main-content .p-rail h3 { font-size: 18px !important; line-height: 1.25 !important; }

.p-h2 { margin: 0; font-weight: 800; letter-spacing: -.03em; color: var(--h-navy-ink); text-wrap: balance; }
.p-h2 .h-hl { color: var(--h-purple); }
.p-sub { margin: 14px 0 0; max-width: 40em; font-size: 16px; line-height: 1.62; color: var(--h-text); }
.p-head { margin-bottom: clamp(28px, 3vw, 44px); }
.p-head--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px clamp(28px, 4vw, 72px);
  align-items: end;
}
.p-head--row .p-sub { margin: 0; padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--cit-line); }
.p-head__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--h-purple); white-space: nowrap; }
.p-head__link .cit-ico { width: 16px; height: 16px; transition: transform .2s var(--h-ease); }
.p-head__link:hover .cit-ico { transform: translateX(3px); }
html.dark .p-head__link { color: var(--h-purple-lite); }

/* ------------------------------------------------------------------ */
/* 2. Photographic hero                                                */
/* ------------------------------------------------------------------ */
.p-mast {
  --mast-h: clamp(480px, 36vw, 600px);
  position: relative;
  isolation: isolate;
  min-height: var(--mast-h);
  margin-top: calc(var(--cit-header-h) * -1);
  padding-top: var(--cit-header-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--h-navy);
  color: #fff;
  container-type: inline-size;
}
.p-mast--compact { --mast-h: clamp(420px, 30vw, 520px); }

/* The media box keeps the photograph's aspect ratio and covers the hero, so
   the UK / Portugal labels can be placed in image percentages (the same
   geometry as the homepage hero). It is sized from the hero's real height
   (100%), not --mast-h, so a hero whose content outgrows --mast-h is still
   covered to the bottom edge; 100cqw keeps it at least full width. */
.p-mast__media {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  height: max(100%, calc(100cqw / (var(--mast-ratio, 2.3337))));
  aspect-ratio: var(--mast-ratio, 2.3337);
  transform: translate(-50%, -50%);
}
.p-mast__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p-mast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 17, 48, .95) 0%, rgba(8, 17, 48, .84) 30%, rgba(8, 17, 48, .4) 54%, rgba(8, 17, 48, .05) 72%),
    linear-gradient(0deg, rgba(8, 17, 48, .5) 0%, rgba(8, 17, 48, 0) 30%);
}
.p-mast--green::before {
  background:
    linear-gradient(90deg, rgba(5, 32, 30, .95) 0%, rgba(6, 38, 34, .84) 30%, rgba(6, 38, 34, .38) 54%, rgba(6, 38, 34, 0) 72%),
    linear-gradient(0deg, rgba(5, 30, 28, .5) 0%, rgba(5, 30, 28, 0) 30%);
}

.p-mast__inner {
  position: relative;
  width: min(var(--h-wrap), 100% - (var(--h-gutter) * 2));
  margin-inline: auto;
  padding-block: clamp(32px, 3.5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.p-mast__copy { min-width: 0; }
.p-mast__title { margin: 0; font-weight: 800; letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.p-mast__accent {
  background: linear-gradient(95deg, #a595ff 0%, #7a63ff 55%, #7086ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}
.p-mast--green .p-mast__accent { background-image: linear-gradient(95deg, #b8a9ff 0%, #8f7bff 45%, #5fd3a2 100%); }
.p-mast__lead {
  margin: 18px 0 0;
  max-width: 33em;
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.p-mast .h-actions { margin-top: 24px; }
.p-mast .h-mast__benefits { margin-top: 24px; }
.p-mast__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .82); }
.p-mast__meta li { display: inline-flex; align-items: center; gap: 8px; }
.p-mast__meta .cit-ico { width: 17px; height: 17px; color: #b3a8ff; }
.p-mast__cat {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #2b1d8f;
  background: #e2ddff;
}

/* Visual column */
.p-mast__visual { position: relative; justify-self: end; width: 100%; max-width: 520px; }

/* Glass list card (the old hero_card points, now over the photograph). */
.p-glass {
  margin-left: auto;
  max-width: 400px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: rgba(10, 20, 56, .58);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.p-glass__title { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c8c0ff; }
.p-glass ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.p-glass li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; }
.p-glass__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.p-glass__icon .cit-ico { width: 18px; height: 18px; }
.p-glass strong { display: block; font-size: 15px; line-height: 1.25; color: #fff; }
.p-glass span.p-glass__text { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .74); }

/* Orbit: CaminhoIT mark at the centre, labelled chips around a dashed ring.
   Built from icons and text, so no stock imagery is needed. */
.p-orbit { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-left: auto; }
.p-orbit::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 50%;
}
.p-orbit__core {
  position: absolute;
  top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 10px rgba(118, 89, 255, .22), 0 24px 50px -20px rgba(0, 0, 0, .6);
}
.p-orbit__core svg { width: 48px; height: 48px; }
.p-orbit__chip {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 124px;
  padding: 14px 10px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--h-navy);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 18px 40px -18px rgba(5, 10, 40, .7);
  transform: translate(-50%, -50%);
}
.p-orbit__chip .cit-ico { width: 26px; height: 26px; color: var(--h-purple); }
.p-orbit__chip--green .cit-ico { color: var(--h-green); }

/* UK / Portugal labels over the uk-portugal photograph (same positions as
   the homepage hero; only shown when the map is beside the copy). */
.p-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;
}
.p-mast__place strong { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--h-navy); margin-bottom: 3px; }
.p-mast__place svg { width: 22px; height: 15px; border-radius: 2px; flex: none; }
.p-mast__place span { color: #4b5578; }
.p-mast__place--uk { left: 59.6%; top: 13%; }
.p-mast__place--pt { left: 66.5%; top: 67%; }

/* Breadcrumb trail inside a hero */
.p-crumbs { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.p-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.p-crumbs li + li::before { content: "›"; color: rgba(255, 255, 255, .45); }
.p-crumbs a { color: rgba(255, 255, 255, .85); }
.p-crumbs a:hover { color: #fff; }
.p-crumbs [aria-current] { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 3. Intro + content rows                                             */
/* ------------------------------------------------------------------ */
.p-row {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
.p-row--top { align-items: start; }
.p-row__intro .h-lead { font-size: 15.5px; margin-top: 16px; }
.p-row__intro .h-actions { margin-top: 26px; }

/* ------------------------------------------------------------------ */
/* 4. Diagonal panel group                                             */
/*    The .h-svc panel comes from home.css. Panels without a photograph */
/*    get a tinted gradient and a large faded icon instead.             */
/* ------------------------------------------------------------------ */
.p-panels { --slant: 46px; --seam: 6px; display: flex; min-height: 440px; }
.p-panels > .h-svc + .h-svc { margin-left: calc((var(--slant) - var(--seam)) * -1); }
.p-panels--5, .p-panels--6 { --slant: 40px; }
.p-panels .h-svc__body { padding: 0 calc(var(--slant) + 8px) 30px calc(var(--slant) * .42 + 12px); }
.p-panels .h-svc__text { font-size: 13.5px; }
#main-content .p-panels .h-svc__title { font-size: clamp(16.5px, 1.25vw, 20px) !important; }
.p-panels--5 .h-svc__text, .p-panels--6 .h-svc__text { font-size: 12.5px; }
#main-content :is(.p-panels--5, .p-panels--6) .h-svc__title { font-size: clamp(15px, 1.1vw, 17.5px) !important; }

/* Tints run purple → blue → teal → green across the group, as in the
   references. Photo panels keep them as the overlay colour. */
.h-svc.p-tint-1 { --svc-tint: rgba(44, 28, 132, .97); --svc-tint-mid: rgba(44, 28, 132, .55); --svc-accent: #8a74ff; --svc-a: #3a2a9e; --svc-b: #1a1650; }
.h-svc.p-tint-2 { --svc-tint: rgba(18, 40, 120, .97); --svc-tint-mid: rgba(18, 40, 120, .55); --svc-accent: #5b8cff; --svc-a: #22409e; --svc-b: #101c4c; }
.h-svc.p-tint-3 { --svc-tint: rgba(6, 50, 110, .97);  --svc-tint-mid: rgba(6, 50, 110, .55);  --svc-accent: #19b8ec; --svc-a: #0d4f8f; --svc-b: #08203f; }
.h-svc.p-tint-4 { --svc-tint: rgba(6, 66, 104, .97);  --svc-tint-mid: rgba(6, 66, 104, .5);   --svc-accent: #2ad1d8; --svc-a: #0b5f7a; --svc-b: #062a3a; }
.h-svc.p-tint-5 { --svc-tint: rgba(6, 74, 62, .97);   --svc-tint-mid: rgba(6, 74, 62, .5);    --svc-accent: #34d399; --svc-a: #0b6a55; --svc-b: #052c26; }
.h-svc.p-tint-6 { --svc-tint: rgba(10, 82, 44, .97);  --svc-tint-mid: rgba(10, 82, 44, .5);   --svc-accent: #4ade80; --svc-a: #157a3e; --svc-b: #062b17; }

.h-svc--plain { background: linear-gradient(160deg, var(--svc-a) 0%, var(--svc-b) 100%); }
.h-svc--plain::after { background: radial-gradient(ellipse 90% 60% at 70% 12%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); }
.h-svc__mark {
  position: absolute;
  top: 16%;
  left: 50%;
  z-index: -1;
  width: 46%;
  height: auto;
  aspect-ratio: 1;
  color: #fff;
  opacity: .14;
  transform: translateX(-38%);
}
a.h-svc { cursor: pointer; }
div.h-svc { cursor: default; }

/* ------------------------------------------------------------------ */
/* 5. Cards                                                            */
/* ------------------------------------------------------------------ */
.p-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); }

.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cit-line);
  border-radius: 18px;
  background: var(--cit-white);
  box-shadow: 0 14px 34px -26px rgba(30, 36, 90, .4);
  transition: border-color .25s var(--h-ease), box-shadow .25s var(--h-ease), transform .25s var(--h-ease);
}
.p-card:has(a.p-card__link:hover),
.p-card:has(a.p-card__link:focus-visible) {
  border-color: #cfc8ff;
  box-shadow: 0 22px 44px -26px rgba(30, 36, 90, .45);
  transform: translateY(-3px);
}
.p-card__media { position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; background: var(--h-alt); }
.p-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--h-ease); }
.p-card:has(a.p-card__link:hover) .p-card__media img { transform: scale(1.04); }
.p-card__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.p-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 14px;
  background: var(--h-purple-soft);
  color: var(--h-purple);
}
.p-card__icon .cit-ico { width: 24px; height: 24px; }
.p-card__media + .p-card__body .p-card__icon { margin-top: -44px; background: #fff; box-shadow: 0 10px 24px -12px rgba(30, 36, 90, .5); }
html.dark .p-card__media + .p-card__body .p-card__icon { background: var(--cit-white); }
.p-card--green .p-card__icon { color: #0b8a5d; background: #dff6ec; }
.p-card h3 { margin: 0 0 8px; font-weight: 800; letter-spacing: -.015em; color: var(--h-navy-ink); }
.p-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--h-text); }
.p-card__bar { display: block; width: 44px; height: 4px; margin-top: auto; padding-top: 0; border-radius: 4px; background: var(--h-purple-lite); }
.p-card__body > p + .p-card__bar { margin-top: 20px; }
.p-card--green .p-card__bar { background: #6ee7b7; }
.p-card__list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--h-text); }
.p-card__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.45; }
.p-card__list .cit-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--h-green); }
.p-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.p-card__arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; margin-left: auto;
  border-radius: 50%;
  background: var(--h-purple-soft);
  color: var(--h-purple);
  transition: background-color .2s, color .2s;
}
.p-card__arrow .cit-ico { width: 16px; height: 16px; }
.p-card:has(a.p-card__link:hover) .p-card__arrow { background: var(--h-purple); color: #fff; }
/* Stretched link: the whole card is the target. */
.p-card__link { color: inherit; }
.p-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.p-card__link:focus-visible { outline: none; }
.p-card:has(.p-card__link:focus-visible) { outline: 3px solid var(--h-purple-lite); outline-offset: 3px; }
.p-card__tag {
  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);
}
.p-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--cit-muted); }
.p-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.p-card__meta .cit-ico { width: 13px; height: 13px; }

/* Horizontal icon card (support actions, policy links) */
.p-card--row .p-card__body { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 20px 22px; }
.p-card--row .p-card__icon { grid-row: span 2; width: 56px; height: 56px; margin: 0; border-radius: 16px; }
.p-card--row .p-card__icon .cit-ico { width: 28px; height: 28px; }
.p-card--row h3 { margin: 0; }
.p-card--row p { grid-column: 2; }
.p-card--row .p-card__arrow { grid-column: 3; grid-row: 1 / span 2; }

/* Compact related link (end-of-page "where next") */
.p-links { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.p-link {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 4px 14px;
  align-items: start;
  padding: 18px 18px 18px 16px;
  border: 1px solid var(--cit-line);
  border-radius: 16px;
  background: var(--cit-white);
  color: var(--h-navy-ink);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--h-ease);
}
.p-link:hover { color: var(--h-navy-ink); border-color: #cfc8ff; box-shadow: 0 16px 34px -24px rgba(30, 36, 90, .4); transform: translateY(-2px); }
.p-link__icon { display: inline-flex; align-items: center; justify-content: center; grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; background: var(--h-purple-soft); color: var(--h-purple); }
.p-link__icon .cit-ico { width: 21px; height: 21px; }
.p-link h3 { margin: 2px 0 0; font-weight: 800; letter-spacing: -.01em; color: inherit; }
.p-link p { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--h-text); }
.p-link > .cit-ico { grid-column: 3; grid-row: 1; width: 18px; height: 18px; margin-top: 3px; color: var(--h-purple); transition: transform .2s var(--h-ease); }
.p-link:hover > .cit-ico { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* 6. Dark showcase banner                                             */
/* ------------------------------------------------------------------ */
.p-show {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  min-height: 360px;
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--h-radius);
  color: #fff;
  background:
    radial-gradient(ellipse 55% 85% at 92% 20%, rgba(214, 104, 150, .32), rgba(214, 104, 150, 0) 70%),
    linear-gradient(100deg, #0b1a48 0%, #13235c 45%, #261f63 78%, #36296b 100%);
}
.p-show--green {
  background:
    radial-gradient(ellipse 55% 85% at 92% 20%, rgba(250, 190, 120, .26), rgba(250, 190, 120, 0) 70%),
    linear-gradient(100deg, #06281f 0%, #0b3a2c 45%, #13403a 75%, #1d3b4b 100%);
}
/* Photograph on the right half, feathered into the gradient. */
.p-show__photo {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 60% 50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 48%);
}
.p-show--photo-only { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.p-show__copy { position: relative; z-index: 1; min-width: 0; }
.p-show .h-pill { margin-bottom: 16px; }
.p-show__title { margin: 0; font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.p-show__text { margin: 16px 0 0; max-width: 34em; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.p-show .h-actions { margin-top: 24px; }
.p-show__visual { position: relative; z-index: 1; min-width: 0; }
.p-ticks { display: grid; gap: 11px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.p-ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.45; }
.p-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: var(--h-green);
  color: #fff;
}
.p-tick .cit-ico { width: 12px; height: 12px; }
.p-ticks--dark { color: var(--h-navy-ink); font-weight: 600; }
/* Cards inside the dark banner (sector tiles, results) */
.p-show__tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.p-tile {
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  background: rgba(9, 18, 52, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}
a.p-tile:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(9, 18, 52, .7); }
.p-tile .cit-ico { width: 26px; height: 26px; margin-bottom: 12px; color: #fff; }
.p-tile strong { display: block; font-size: 16px; line-height: 1.2; color: #fff; }
.p-tile__value { display: block; margin-bottom: 4px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.p-tile span.p-tile__text { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.p-tile__bar { display: block; width: 40px; height: 4px; margin-top: auto; border-radius: 4px; background: var(--tile-accent, #8a74ff); }
.p-tile__text + .p-tile__bar { margin-top: 14px; }
.p-tile:nth-child(2) { --tile-accent: #3d8bff; }
.p-tile:nth-child(3) { --tile-accent: #19b8ec; }
.p-tile:nth-child(4) { --tile-accent: #2fd394; }
.p-tile:nth-child(5) { --tile-accent: #4ade80; }
/* The old split "panel_html" white cards sit on the banner unchanged. */
.p-show__visual .cit-card { color: var(--cit-text); }

/* ------------------------------------------------------------------ */
/* 7. Impact / benefits list                                           */
/*    .h-why__list (home.css) is a fixed four-up; the templates set the */
/*    count with --n.                                                   */
/* ------------------------------------------------------------------ */
.p-impact.h-why__list { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.p-impact .h-why__item { padding-block: 4px; }
.p-impact .h-why__item:first-child { padding-left: 0; }
.p-impact__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 14px;
  background: var(--h-purple-soft);
  color: var(--h-purple);
}
.p-impact__icon .cit-ico { width: 24px; height: 24px; }
.h-why__item--green .p-impact__icon { color: #0b8a5d; background: #dff6ec; }
.p-impact--plain .p-impact__icon { width: auto; height: auto; background: none; border-radius: 0; }
.p-impact--plain .p-impact__icon .cit-ico { width: 32px; height: 32px; }

/* ------------------------------------------------------------------ */
/* 8. Process                                                          */
/* ------------------------------------------------------------------ */
.p-steps.h-steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.p-steps--wrap.h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
.p-steps--wrap .h-step:nth-child(3n)::after { display: none; }

/* ------------------------------------------------------------------ */
/* 9. Value banner                                                     */
/* ------------------------------------------------------------------ */
.p-value {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e3defd;
  border-radius: var(--h-radius);
  background: linear-gradient(120deg, #f6f4ff, #eef0ff);
}
html.dark .p-value { background: var(--h-alt); border-color: var(--cit-line); }
.p-value__media {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 340px;
  padding: clamp(30px, 3.4vw, 48px);
  color: #fff;
  background: var(--h-navy);
}
.p-value__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 60%); }
.p-value__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 20, 60, .9) 0%, rgba(10, 20, 60, .62) 48%, rgba(10, 20, 60, .1) 85%);
}
.p-value__media--plain { background: linear-gradient(140deg, #13235c, #2a2468 70%, #3c2a6c); }
.p-value__media--plain::before { display: none; }
.p-value .h-eyebrow { color: #c8c0ff; }
.p-value__title { margin: 0; font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.p-value__text { margin: 14px 0 0; max-width: 28em; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.p-value__list { display: grid; align-content: center; gap: 20px; margin: 0; padding: clamp(28px, 3.4vw, 48px); list-style: none; }
.p-value__list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.p-value__list .cit-ico { grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; color: var(--h-purple); }
.p-value__list li.is-green .cit-ico { color: var(--h-green); }
.p-value__list strong { font-size: 16px; line-height: 1.3; color: var(--h-navy-ink); }
.p-value__list span { font-size: 14px; line-height: 1.5; color: var(--h-text); }
.p-value__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0 clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 40px); }

/* ------------------------------------------------------------------ */
/* 10. Challenge → response table                                      */
/* ------------------------------------------------------------------ */
.p-challenge { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.p-challenge__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 4px;
}
.p-challenge h3 { margin: 0; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h-purple); }
.p-challenge__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--cit-line);
  border-radius: 14px;
  background: var(--cit-white);
}
.p-challenge__q, .p-challenge__a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 14.5px; line-height: 1.45; }
.p-challenge__q { color: var(--h-navy-ink); }
.p-challenge__q .cit-ico { width: 24px; height: 24px; color: var(--h-purple); }
.p-challenge__a { color: var(--h-text); }
.p-challenge__a .p-tick { width: 26px; height: 26px; }
.p-challenge__row > .cit-ico { width: 20px; height: 20px; color: var(--cit-muted-2); }

/* ------------------------------------------------------------------ */
/* 11. FAQ                                                             */
/* ------------------------------------------------------------------ */
.p-faq { display: grid; gap: 10px; }
.p-faq__item { border: 1px solid var(--cit-line); border-radius: 14px; background: var(--cit-white); transition: border-color .2s, box-shadow .2s; }
.p-faq__item[open] { border-color: #d6cffd; box-shadow: 0 16px 34px -26px rgba(30, 36, 90, .4); }
.p-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 700;
  color: var(--h-navy-ink);
  cursor: pointer;
  list-style: none;
}
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q > .cit-ico {
  flex: none; width: 30px; height: 30px; padding: 7px;
  border-radius: 50%;
  background: var(--h-purple-soft);
  color: var(--h-purple);
  transition: transform .25s var(--h-ease);
}
.p-faq__item[open] .p-faq__q > .cit-ico { transform: rotate(180deg); }
.p-faq__lead { display: flex; align-items: center; gap: 14px; }
.p-faq__lead .cit-ico { width: 22px; height: 22px; color: var(--h-purple); flex: none; }
.p-faq__a { padding: 0 20px 20px; font-size: 15px; line-height: 1.65; color: var(--h-text); }
.p-faq__a p { margin: 0 0 10px; }
.p-faq__a p:last-child { margin-bottom: 0; }
.p-faq__a ul { margin: 0 0 10px; padding-left: 20px; }
.p-faq__foot { margin: 22px 0 0; font-size: 15px; color: var(--h-text); }
.p-faq__foot a { font-weight: 700; color: var(--h-purple); }

/* ------------------------------------------------------------------ */
/* 12. Metrics strip, quote, glance strip                              */
/* ------------------------------------------------------------------ */
.p-metrics { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; padding: 0; }
.p-metrics > div { padding: 4px clamp(16px, 2vw, 28px); }
.p-metrics > div + div { border-left: 1px solid var(--cit-line); }
.p-metrics > div:first-child { padding-left: 0; }
.p-metrics dt { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--h-navy-ink); }
.p-metrics dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--h-text); }
.p-metrics-wrap { margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--cit-line); }

.p-quote {
  position: relative;
  margin: 0;
  padding: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 44px) clamp(26px, 3vw, 40px) clamp(64px, 6vw, 92px);
  border-radius: 20px;
  background: linear-gradient(120deg, #f4f2ff, #eceeff);
}
html.dark .p-quote { background: var(--h-alt); }
.p-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(8px, 1.4vw, 18px);
  left: clamp(20px, 2.2vw, 32px);
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  color: var(--h-purple);
}
.p-quote p { margin: 0; font-size: clamp(17px, 1.4vw, 21px); font-style: italic; line-height: 1.5; color: var(--h-navy-ink); }
.p-quote footer { margin-top: 16px; font-size: 14px; color: var(--h-text); }
.p-quote footer strong { display: block; font-size: 15.5px; font-style: normal; color: var(--h-navy-ink); }

.p-glance {
  display: grid;
  grid-template-columns: minmax(180px, 240px) repeat(var(--n, 4), minmax(0, 1fr));
  align-items: center;
  border: 1px solid var(--cit-line);
  border-radius: 20px;
  background: var(--cit-white);
  box-shadow: 0 20px 44px -34px rgba(30, 36, 90, .45);
}
.p-glance > * { padding: 22px clamp(16px, 1.8vw, 26px); }
.p-glance > * + * { border-left: 1px solid var(--cit-line); }
.p-glance__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; }
.p-glance__item .cit-ico { grid-row: span 2; width: 26px; height: 26px; color: var(--h-purple); }
.p-glance__item strong { font-size: 14.5px; color: var(--h-navy-ink); }
.p-glance__item span { font-size: 13.5px; line-height: 1.45; color: var(--h-text); }
.p-glance-wrap { position: relative; z-index: 2; margin-top: clamp(-56px, -4vw, -36px); }

/* Notice line (honest placeholders, e.g. "no case studies published yet") */
.p-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--h-purple-soft);
  color: var(--h-navy-ink);
  font-size: 14.5px;
  line-height: 1.5;
}
.p-note .cit-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--h-purple); }

/* ------------------------------------------------------------------ */
/* 13. Prose, side rail                                                */
/* ------------------------------------------------------------------ */
.p-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.p-doc--left { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
.p-rail { position: sticky; top: calc(var(--cit-header-h) + 20px); display: grid; gap: 18px; }
.p-rail__box { padding: 22px; border: 1px solid var(--cit-line); border-radius: 18px; background: var(--cit-white); box-shadow: 0 14px 34px -28px rgba(30, 36, 90, .4); }
.p-rail__box h2, .p-rail__box h3 { margin: 0 0 12px; font-weight: 800; color: var(--h-navy-ink); }
.p-toc { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.p-toc a { display: block; padding: 7px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.4; color: var(--h-text); }
.p-toc a:hover { color: var(--h-purple); background: var(--h-alt); }
.p-toc a.is-active { color: var(--h-purple); font-weight: 700; border-left-color: var(--h-purple); background: var(--h-purple-soft); }
.p-rail__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(150deg, #0d1b4a, #2a2468);
}
.p-rail__cta img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 70%; }
.p-rail__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 20, 60, .92) 0%, rgba(10, 20, 60, .7) 60%, rgba(10, 20, 60, .35) 100%); }
#main-content .p-rail__cta h2, #main-content .p-rail__cta h3 { margin: 0 0 10px; font-size: 22px !important; color: #fff; }
.p-rail__cta p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.p-rail__cta .h-btn { width: 100%; }

.p-prose { font-size: 17px; line-height: 1.75; color: var(--cit-ink); }
html.dark .p-prose { color: var(--h-text); }
.p-prose > :first-child { margin-top: 0; }
.p-prose h2 { margin: 2em 0 .6em; font-weight: 800; letter-spacing: -.025em; color: var(--h-navy-ink); scroll-margin-top: calc(var(--cit-header-h) + 20px); }
.p-prose h3 { margin: 1.6em 0 .5em; font-weight: 800; letter-spacing: -.015em; color: var(--h-navy-ink); scroll-margin-top: calc(var(--cit-header-h) + 20px); }
.p-prose p { margin: 0 0 1.15em; }
.p-prose a { color: var(--h-purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.p-prose ul, .p-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.p-prose li { margin-bottom: .45em; }
.p-prose li::marker { color: var(--h-purple); }
.p-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.p-prose blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  border-left: 4px solid var(--h-purple);
  border-radius: 0 16px 16px 0;
  background: var(--h-purple-soft);
  font-size: 1.08em;
  font-style: italic;
  color: var(--h-navy-ink);
}
.p-prose blockquote p:last-child { margin-bottom: 0; }
.p-prose pre { padding: 18px; border-radius: 12px; background: #0f1530; color: #e8eaff; overflow-x: auto; font-size: 14px; }
.p-prose table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.p-prose th, .p-prose td { padding: 10px 12px; border-bottom: 1px solid var(--cit-line); text-align: left; }
.p-prose hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--cit-line); }

/* ------------------------------------------------------------------ */
/* 14. Forms on the new templates                                      */
/* ------------------------------------------------------------------ */
.p-panel {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--cit-line);
  border-radius: 22px;
  background: var(--cit-white);
  box-shadow: 0 24px 54px -40px rgba(30, 36, 90, .5);
}
.p-panel--lav { border-color: #e3defd; background: linear-gradient(160deg, #f7f5ff, #eef0ff); }
html.dark .p-panel--lav { background: var(--h-alt); border-color: var(--cit-line); }

.p-contactbar {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  border: 1px solid var(--cit-line);
  border-radius: 20px;
  background: var(--cit-white);
  box-shadow: 0 20px 44px -34px rgba(30, 36, 90, .45);
}
.p-contactbar > * { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 20px clamp(16px, 1.8vw, 26px); color: var(--h-navy-ink); }
.p-contactbar > * + * { border-left: 1px solid var(--cit-line); }
.p-contactbar .cit-ico { grid-row: span 2; width: 28px; height: 28px; color: var(--h-purple); }
.p-contactbar strong { font-size: 15px; }
.p-contactbar span { font-size: 14px; line-height: 1.4; color: var(--h-text); overflow-wrap: anywhere; }
a.p-contactbar__item:hover strong { color: var(--h-purple); }

/* ------------------------------------------------------------------ */
/* 15. Responsive                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1240px) {
  .p-row { grid-template-columns: minmax(0, 1fr); }
  .p-row__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; align-items: end; }
  .p-row__intro .h-lead { margin-top: 0; }
  .p-row__intro .h-actions { grid-column: 2; margin-top: 4px; }
  .p-row__intro--stack { display: block; }
  .p-row__intro--stack .h-lead { margin-top: 14px; }
  .p-impact .h-why__item:first-child { padding-left: 0; }
  .p-doc { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
}

@media (max-width: 1080px) {
  .p-mast { --mast-h: auto; min-height: 0; }
  .p-mast__inner { grid-template-columns: minmax(0, 1fr); padding-block: 48px 56px; }
  .p-mast__visual { justify-self: start; max-width: 100%; }
  .p-mast__place { display: none; }
  .p-mast::before {
    background:
      linear-gradient(90deg, rgba(8, 17, 48, .94) 0%, rgba(8, 17, 48, .8) 50%, rgba(8, 17, 48, .35) 100%),
      linear-gradient(0deg, rgba(8, 17, 48, .6) 0%, rgba(8, 17, 48, 0) 35%);
  }
  .p-mast--green::before { background: linear-gradient(90deg, rgba(5, 32, 30, .94) 0%, rgba(6, 38, 34, .78) 50%, rgba(6, 38, 34, .35) 100%); }
  .p-mast__media { width: 100%; height: 100%; aspect-ratio: auto; }
  .p-orbit { width: min(100%, 420px); margin: 8px 0 0; }
  .p-glass { margin-left: 0; max-width: 560px; }
  .p-glass ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .p-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 0; }
  .p-panels--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-panels > .h-svc + .h-svc { margin-left: 0; }
  .p-panels .h-svc { min-height: 300px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }
  .p-panels .h-svc__body { padding: 0 48px 26px 22px; }

  .p-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .p-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-show { grid-template-columns: minmax(0, 1fr); }
  .p-show__photo { width: 100%; opacity: .45; -webkit-mask-image: none; mask-image: none; }
  .p-show__tiles { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); }
  .p-value { grid-template-columns: minmax(0, 1fr); }
  .p-impact.h-why__list { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); row-gap: 28px; }
  .p-impact .h-why__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .p-steps.h-steps { grid-template-columns: repeat(min(var(--n, 4), 3), minmax(0, 1fr)); row-gap: 32px; }
  .p-steps .h-step:nth-child(3n)::after { display: none; }
  .p-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .p-metrics > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .p-head--row { grid-template-columns: minmax(0, 1fr); }
  .p-head--row .p-sub { padding-left: 0; border-left: 0; }
  .p-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-glance > :first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--cit-line); }
  .p-glance > :nth-child(even) { border-left: 0; }
  .p-glance > :nth-child(n+4) { border-top: 1px solid var(--cit-line); }
  .p-contactbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-contactbar > :nth-child(odd) { border-left: 0; }
  .p-contactbar > :nth-child(n+3) { border-top: 1px solid var(--cit-line); }
  .p-doc, .p-doc--left { grid-template-columns: minmax(0, 1fr); }
  .p-rail { position: static; }
}

@media (max-width: 767px) {
  .p-mast__inner { padding-block: 40px 44px; }
  .p-mast .h-actions { flex-direction: column; }
  .p-mast .h-btn { width: 100%; }
  #main-content .p-mast__title { font-size: clamp(38px, 11vw, 50px) !important; }
  .p-mast__media img { object-position: 70% 50%; }
  .p-orbit { display: none; }
  .p-glass ul { grid-template-columns: minmax(0, 1fr); }

  .p-row__intro { display: block; }
  .p-row__intro .h-lead { margin-top: 14px; }
  .p-row__intro .h-actions { margin-top: 20px; }
  .p-panels, .p-panels--4 { grid-template-columns: minmax(0, 1fr); }
  .p-panels .h-svc { min-height: 220px; }
  .h-svc__mark { top: 10%; width: 30%; left: auto; right: 14%; transform: none; }
  .p-grid, .p-links { grid-template-columns: minmax(0, 1fr); }
  .p-card--row .p-card__body { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 18px; }
  .p-card--row .p-card__icon { width: 48px; height: 48px; }
  .p-show { padding: 28px 22px; border-radius: 20px; }
  .p-show__tiles { grid-template-columns: minmax(0, 1fr); }
  .p-show .h-btn { width: 100%; }
  .p-value__media { min-height: 300px; }
  .p-impact.h-why__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .p-impact .h-why__item,
  .p-impact .h-why__item:nth-child(odd) { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-left: 0; }
  .p-impact .h-why__item + .h-why__item { border-top: 1px solid var(--cit-line); }
  .p-impact__icon { grid-row: span 2; margin: 0; }
  .p-impact--plain .p-impact__icon { margin-top: 2px; }
  .p-steps.h-steps, .p-steps--wrap.h-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .p-steps .h-step:nth-child(3n)::after { display: block; }
  .p-challenge__head { display: none; }
  .p-challenge__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p-challenge__row > .cit-ico { display: none; }
  .p-metrics { grid-template-columns: minmax(0, 1fr); }
  .p-metrics > div { padding: 12px 0; border-left: 0 !important; }
  .p-metrics > div + div { border-top: 1px solid var(--cit-line); }
  .p-glance, .p-contactbar { grid-template-columns: minmax(0, 1fr); }
  .p-glance > * + *, .p-contactbar > * + * { border-left: 0; border-top: 1px solid var(--cit-line); }
  .p-quote { padding: 60px 22px 24px; }
  .p-prose { font-size: 16.5px; }
}

/* ------------------------------------------------------------------ */
/* 16. Reduced motion                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .p-card, .p-card__media img, .p-link, .p-faq__q > .cit-ico { transition: none; }
  .p-card:has(a.p-card__link:hover), .p-link:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 17. Heroes and banners outside <main>                               */
/*     A few pages (IT Health Check) keep their hero before <main>, so  */
/*     the scale is also set without the #main-content prefix.          */
/* ------------------------------------------------------------------ */
.p-mast__title { font-size: clamp(42px, 5vw, 78px); line-height: 1; }
.h-cta__title { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.04; }
.p-h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.08; }
@media (max-width: 767px) { .p-mast__title { font-size: clamp(38px, 11vw, 50px); } }
/* Older translated headings carry their own accent span. */
.p-mast__title .cit-accent {
  background: linear-gradient(95deg, #a595ff 0%, #7a63ff 55%, #7086ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.p-mast__title .cit-accent .cit-swoosh { display: none; }
#hcSteps, #hc-covers { scroll-margin-top: calc(var(--cit-header-h) + 16px); }

/* ------------------------------------------------------------------ */
/* 18. Directory tiles (Services Overview, Sectors)                    */
/*     The .h-svc panel as a rectangle with a cut corner.               */
/* ------------------------------------------------------------------ */
.p-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }
.p-tiles > li { display: flex; }
.p-tiles .h-svc {
  width: 100%;
  min-height: 236px;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 28px);
}
.p-tiles .h-svc::after { background: linear-gradient(90deg, var(--svc-tint) 0%, var(--svc-tint-mid) 48%, rgba(8, 16, 46, .05) 100%); }
.p-tiles .h-svc--plain::after { background: radial-gradient(ellipse 80% 70% at 85% 10%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); }
.p-tiles .h-svc__img { object-position: 70% 40%; }
.p-tiles .h-svc__body { max-width: 72%; padding: 26px 24px 26px 26px; }
.p-tiles .h-svc__mark { top: 14%; left: auto; right: 8%; width: 30%; transform: none; }
#main-content .p-tiles .h-svc__title { font-size: clamp(18px, 1.4vw, 22px) !important; }
.p-tiles__go {
  position: absolute;
  right: 50px;
  bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--h-purple-2);
  color: #fff;
  transition: transform .2s var(--h-ease);
}
.p-tiles .h-svc:hover .p-tiles__go { transform: translateX(3px); }
.p-tiles .h-svc:focus-visible { outline: 3px solid var(--h-purple-lite); outline-offset: 3px; }

.p-card__list--links a { color: var(--h-navy-ink); font-weight: 600; }
.p-card__list--links a:hover { color: var(--h-purple); }
.p-grid--5 { gap: 14px; }
@media (max-width: 1240px) { .p-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .p-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .p-tiles, .p-grid--5 { grid-template-columns: minmax(0, 1fr); }
  .p-tiles .h-svc { min-height: 200px; }
  .p-tiles .h-svc__body { max-width: 86%; }
}

/* ------------------------------------------------------------------ */
/* 19. About: journey row, two-column ticks, people                    */
/* ------------------------------------------------------------------ */
.p-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: journey; }
.p-journey > li { position: relative; display: flex; }
.p-journey > li > .p-card { flex: 1; }
.p-journey > li + li::before {
  content: ""; position: absolute; top: 50%; left: -14px; z-index: 2;
  width: 10px; height: 10px; border-top: 2px solid var(--h-purple); border-right: 2px solid var(--h-purple);
  transform: translateY(-50%) rotate(45deg);
}
.p-ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 0; }
.p-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.p-people__mono {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2a2f7a, #6a4cf5 60%, #8f7bff);
  color: #fff; font-size: 40px; font-weight: 800; letter-spacing: .02em;
}
.p-people__role { margin: 2px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--h-purple); }
@media (max-width: 1080px) {
  .p-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-journey > li:nth-child(odd)::before { display: none; }
}
@media (max-width: 767px) {
  .p-journey, .p-people, .p-ticks--2 { grid-template-columns: minmax(0, 1fr); }
  .p-journey > li::before { display: none; }
}

/* Support: the status panel's two-column grid is too wide for the 350px
   sidebar it sits in on /support, which crushed the status rows. */
.cit-split--sidebar .cit-status-panel__grid { grid-template-columns: minmax(0, 1fr); }

/* Light split rows on the service template: two equal columns, one on phones. */
.p-row--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1080px) { .p-row--half { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .p-panel .p-value__list { grid-template-columns: minmax(0, 1fr); } }

/* Compact icon tiles — one row of small cards ("Your key IT, covered").
   Round icon, tight padding, no accent bar or arrow button. */
.p-grid--compact { gap: 12px; }
.p-grid--compact .p-card { border-radius: 14px; box-shadow: 0 10px 26px -24px rgba(30, 36, 90, .45); }
.p-grid--compact .p-card__body { padding: 18px 16px 20px; }
.p-grid--compact .p-card__icon { width: 52px; height: 52px; margin-bottom: 12px; border-radius: 50%; }
.p-grid--compact .p-card__icon .cit-ico { width: 26px; height: 26px; }
.p-grid--compact .p-card h3 { margin-bottom: 6px; font-size: 16px; }
.p-grid--compact .p-card p { font-size: 13.5px; line-height: 1.5; }
.p-grid--compact .p-card__bar,
.p-grid--compact .p-card__foot { display: none; }
@media (max-width: 1240px) { .p-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .p-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .p-grid--compact { grid-template-columns: minmax(0, 1fr); } }