/* ---- nav.css ---- */
/* Photonix main navigation (app-header). Colours from the original header; panel layout modelled on gevernova.com. */
:root {
  --pnx-purple: #260e69;
  --pnx-red: #f41220;
  --pnx-hover-bg: #e7e8ff;
  --pnx-drawer: #08001d;
  --pnx-white: #fff;
  --pnx-line: #e4e2ec;
  --pnx-scrim: rgba(8, 0, 29, .45);
  --pnx-scrim-drawer: rgba(0, 0, 0, .6);
  --pnx-muted: rgba(38, 14, 105, .6);
  --pnx-muted-dark: rgba(255, 255, 255, .6);
  --pnx-radius: 8px;
  --pnx-font: 'Lato', sans-serif;
  --pnx-speed: .3s;
  --pnx-fast: .15s;
}

/* Resets use :where() (zero specificity) so they never override the component rules below. */
:where(.pnx-header) ul { list-style: none; margin: 0; padding: 0; }
:where(.pnx-header) p { margin: 0; }
:where(.pnx-header) a { text-decoration: none; }
:where(.pnx-header) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

.pnx-header { position: sticky; top: 0; z-index: 9999; background: var(--pnx-white); border-bottom: 1px solid var(--pnx-line); font-family: var(--pnx-font); }
.pnx-header :is(a, button):focus-visible { outline: 2px solid var(--pnx-purple); outline-offset: 3px; border-radius: 4px; }

/* Top bar: thin empty strip for now; content to be decided */
.pnx-topbar { height: 12px; background: var(--pnx-purple); }

/* Main bar */
.pnx-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.pnx-logo { display: block; flex-shrink: 0; }
.pnx-bar > .pnx-logo img { width: 230px; height: auto; display: block; }
.pnx-toggle, .pnx-drawer-head, .pnx-overlay, .pnx-group-title { display: none; }

.pnx-menu { display: flex; align-items: center; gap: 36px; }
.pnx-trigger, .pnx-link { display: flex; align-items: center; gap: 6px; color: var(--pnx-purple); font-size: 16px; font-weight: 600; line-height: 1.2; padding: 10px 0; white-space: nowrap; }
.pnx-label, .pnx-link { text-underline-offset: 6px; text-decoration-thickness: 2px; }
.pnx-item.is-current > .pnx-trigger .pnx-label, .pnx-item.is-current > .pnx-link, .pnx-item.is-open > .pnx-trigger .pnx-label { text-decoration: underline; }
@media (hover: hover) { .pnx-trigger:hover .pnx-label, .pnx-link:hover { text-decoration: underline; } }
.pnx-caret { display: inline-block; font-size: .7em; transition: transform var(--pnx-speed); }
.pnx-item.is-open .pnx-caret { transform: rotate(180deg); }

/* Mega panel: full width under the bar; categories left, links in two ruled columns right. */
@media (min-width: 992px) {
  .pnx-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--pnx-white); border-top: 1px solid var(--pnx-line); }
  .pnx-item.is-open > .pnx-panel { display: block; animation: pnx-fade var(--pnx-fast) ease-out; }
  .pnx-panel-inner {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start;
    min-height: 300px; padding-top: 36px; padding-bottom: 48px;
    background:
      linear-gradient(var(--pnx-line), var(--pnx-line)) calc(100% / 3) 0 / 1px 100% no-repeat,
      linear-gradient(var(--pnx-line), var(--pnx-line)) calc(200% / 3) 0 / 1px 100% no-repeat;
  }
  .pnx-cat { grid-column: 1; position: relative; display: block; width: fit-content; padding: 10px 0 10px 26px; color: var(--pnx-purple); font-size: 24px; font-weight: 400; line-height: 1.3; }
  .pnx-cat::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--pnx-red); opacity: 0; transition: opacity var(--pnx-fast); }
  .pnx-cat.is-active::before { opacity: 1; }
  @media (hover: hover) { button.pnx-cat:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } }
  .pnx-group { display: none; grid-column: 2 / 4; grid-row: 1 / span 12; }
  .pnx-group.is-active { display: block; }
  .pnx-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
  .pnx-links.pnx-rows-2 { grid-template-rows: repeat(2, auto); }
  .pnx-links.pnx-rows-4 { grid-template-rows: repeat(4, auto); }
  .pnx-links a, .pnx-soon { display: block; width: fit-content; margin-left: 32px; padding: 14px 0; color: var(--pnx-purple); font-size: 18px; font-weight: 400; line-height: 1.5; }
  .pnx-links a:hover, .pnx-links a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
  .pnx-soon { color: var(--pnx-muted); cursor: default; }

  .pnx-scrim { display: none; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 1; background: var(--pnx-scrim); }
  .pnx-header.is-menu-open .pnx-scrim { display: block; animation: pnx-fade var(--pnx-fast) ease-out; }
}
@keyframes pnx-fade { from { opacity: 0; } to { opacity: 1; } }

.pnx-soon-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--pnx-hover-bg); color: var(--pnx-purple); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 3px; white-space: nowrap; }

@media (max-width: 1400px) {
  .pnx-bar > .pnx-logo img { width: 200px; }
  .pnx-menu { gap: 28px; }
}
@media (max-width: 1199.98px) {
  .pnx-bar > .pnx-logo img { width: 190px; }
  .pnx-menu { gap: 20px; }
  .pnx-trigger, .pnx-link { font-size: 15px; }
}

/* Mobile drawer (same breakpoint as the original header) */
@media (max-width: 991.98px) {
  .pnx-topbar, .pnx-scrim, .pnx-cat { display: none; }
  .pnx-bar { padding-top: 10px; padding-bottom: 10px; }
  .pnx-bar > .pnx-logo img { width: 170px; }
  .pnx-toggle { display: block; width: 44px; height: 44px; margin-left: auto; color: var(--pnx-purple); font-size: 28px; line-height: 44px; text-align: center; }

  .pnx-overlay { display: block; position: fixed; inset: 0; z-index: 10000; background: var(--pnx-scrim-drawer); opacity: 0; visibility: hidden; transition: opacity var(--pnx-speed), visibility var(--pnx-speed); }
  .pnx-nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 10001; width: 290px; max-width: 85vw; overflow-y: auto; overscroll-behavior: contain; background: var(--pnx-drawer); padding: 15px 20px 32px; transform: translateX(-100%); visibility: hidden; transition: transform var(--pnx-speed) ease-in-out, visibility var(--pnx-speed); }
  .pnx-header.is-drawer-open .pnx-nav { transform: none; visibility: visible; transition: transform var(--pnx-speed) ease-in-out, visibility 0s; }
  .pnx-header.is-drawer-open .pnx-overlay { opacity: 1; visibility: visible; }

  .pnx-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .pnx-drawer-head .pnx-logo { padding: 4px 0; }
  .pnx-drawer-head img { width: 160px; height: auto; display: block; }
  .pnx-close { width: 44px; height: 44px; margin-right: -10px; color: var(--pnx-white) !important; font-size: 26px !important; text-align: center; }
  .pnx-header .pnx-nav :is(a, button):focus-visible { outline-color: var(--pnx-white); }

  .pnx-menu { display: block; }
  .pnx-item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .pnx-trigger, .pnx-link { width: 100%; justify-content: space-between; min-height: 48px; color: var(--pnx-white); font-size: 15px; }
  .pnx-trigger:hover, .pnx-link:hover { color: var(--pnx-white); }

  .pnx-panel { display: none; padding-bottom: 10px; }
  .pnx-item.is-open > .pnx-panel { display: block; }
  .pnx-panel-inner { padding: 0; }
  .pnx-group + .pnx-cat + .pnx-group { margin-top: 10px; }
  .pnx-group-title { display: block; padding: 6px 12px; color: var(--pnx-muted-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .pnx-links a, .pnx-soon { display: block; min-height: 44px; padding: 11px 12px; border-radius: var(--pnx-radius); color: var(--pnx-white); font-size: 15px; line-height: 1.4; }
  .pnx-links a:hover, .pnx-links a[aria-current] { background: rgba(255, 255, 255, .1); }
  .pnx-soon { color: var(--pnx-muted-dark); }

  html.pnx-lock, html.pnx-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .pnx-header *, .pnx-nav, .pnx-overlay { transition: none !important; animation: none !important; }
}

/* ---- fixes.css ---- */
/* Photonix UI fixes layered over the compiled component styles (see site-tools/apply-site.mjs).
   The compiled styles carry an attribute selector on every compound ([_ngcontent-…]), so these
   overrides use !important rather than trying to out-specify them. */
:root {
  --fix-logo-space: 80px;          /* space between logos in the partner/client strips */
  --fix-logo-space-md: 56px;
  --fix-logo-space-sm: 40px;
  --fix-band-pad: 48px;            /* white band above/below the strips */
  --fix-band-pad-sm: 32px;
  --fix-text-muted: #6b6b68;       /* date text: 5.3:1 on white (was #8f8f8c, 3.2:1) */
  --fix-overlay-strong: rgba(0, 0, 0, .72);
}

/* Fluid page container (every page and the header): content fills the screen with side padding that
   scales from 16px (phones) to 80px (wide desktop), and stops growing at 1600px of content on very
   wide screens. Replaces Bootstrap's fixed steps (max 1320px). */
:root { --page-gutter: clamp(16px, 4.2vw, 80px); --page-max: 1600px; }
.container {
  width: 100% !important;
  max-width: calc(var(--page-max) + 2 * var(--page-gutter)) !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
/* Full-width wrappers that hold a container add no side padding of their own, so every section's
   content lines up with the header (they previously pushed content 12px further in). */
.container-fluid:has(> .container) { padding-left: 0 !important; padding-right: 0 !important; }

/* H12: Knowledge Base dividers end with the cards instead of running into the gutter */
app-tech-expertise .row .highliCards { border-bottom: 0 !important; }
app-tech-expertise .row .highliCards .highlightCards { position: relative !important; margin-bottom: 13px !important; }
app-tech-expertise .row .highliCards .highlightCards::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -13px !important; border-bottom: 3px solid red !important; }
/* H2: arrows hidden until Resources exists */
app-tech-expertise .highlightCards .rightArrow { display: none !important; }
/* H1: "Browse Resources" hidden (kept in the page) until Resources exists */
app-tech-expertise .solutions-sec .techBtn { display: none !important; }


/* Home hero photo (img32 data centre aisle, web-sized copies of the original PNG).
   Wide screens: right side of the hero, fading into the purple background behind the text.
   1200px and below (text spans the full width): a strip above the text. */
app-banner .bannerSec::after {
  content: '' !important;
  position: absolute !important; z-index: 1 !important; pointer-events: none;
  top: 0; right: 0; bottom: 0; width: 42%;
  background-image: url(/assets/images/homeImgs/img32-hero.jpg);
  background-image: image-set(url(/assets/images/homeImgs/img32-hero.webp) type("image/webp"), url(/assets/images/homeImgs/img32-hero.jpg) type("image/jpeg"));
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
          mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}
@media (max-width: 1399.98px) {
  app-banner .bannerSec::after { width: 38%; }
}
@media (max-width: 1200px) {
  app-banner .bannerSec { padding-top: 220px !important; }
  app-banner .bannerSec::after {
    left: 0; bottom: auto; width: auto; height: 260px;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }
}
@media (max-width: 575.98px) {
  app-banner .bannerSec { padding-top: 160px !important; }
  app-banner .bannerSec::after { height: 200px; }
}

/* Micro Data Centre section (app-banner, below the hero): contained image card, label, key points. */
app-banner .pnx-mdc { --mdc-white: #fff; --mdc-soft: #e7e8ff; --mdc-purple: #260e69; --mdc-line: rgba(255, 255, 255, .14); --mdc-chip: rgba(255, 255, 255, .1);
  padding: 72px 0 80px; color: var(--mdc-white); font-family: 'Lato', sans-serif; }
app-banner .pnx-mdc-row { align-items: center; row-gap: 40px; }
app-banner .pnx-mdc-card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 32px;
  border-radius: 24px; border: 1px solid var(--mdc-line); overflow: hidden;
  background: linear-gradient(135deg, #5b4aa3, #3a1b7a 40%, #2a0f66, #4f3a8c); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
app-banner .pnx-mdc-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
app-banner .pnx-mdc-copy { padding-left: 48px; }
app-banner .pnx-mdc-tag { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--mdc-soft); font-size: 14px; font-weight: 700; letter-spacing: 2px; }
app-banner .pnx-mdc-tag::before { content: ''; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d50f0f, #ffb2af); }
app-banner .pnx-mdc-copy h2 { margin: 0 0 18px; font-size: 40px; font-weight: 600; line-height: 1.2; color: var(--mdc-white); }
app-banner .pnx-mdc-lead { margin: 0 0 26px; font-size: 18px; line-height: 1.7; color: var(--mdc-white); opacity: .9; }
app-banner .pnx-mdc-points { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--mdc-line); }
app-banner .pnx-mdc-points li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mdc-line); font-size: 18px; font-weight: 600; }
app-banner .pnx-mdc-icon { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mdc-chip); font-size: 22px; }
app-banner .pnx-mdc-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 50px; background: var(--mdc-white); color: var(--mdc-purple);
  font-size: 16px; font-weight: 600; text-decoration: none; transition: gap .2s ease; }
app-banner .pnx-mdc-cta:hover { gap: 16px; color: var(--mdc-purple); }
app-banner .pnx-mdc-cta:focus-visible { outline: 3px solid var(--mdc-white); outline-offset: 3px; }
@media (max-width: 1199.98px) {
  app-banner .pnx-mdc-copy { padding-left: 24px; }
  app-banner .pnx-mdc-copy h2 { font-size: 34px; }
}
@media (max-width: 991.98px) {
  app-banner .pnx-mdc { padding: 56px 0 64px; }
  app-banner .pnx-mdc-copy { padding-left: 12px; }
  app-banner .pnx-mdc-card { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
  app-banner .pnx-mdc { padding: 40px 0 48px; }
  app-banner .pnx-mdc-card { padding: 20px; border-radius: 18px; }
  app-banner .pnx-mdc-copy h2 { font-size: 28px; }
  app-banner .pnx-mdc-lead, app-banner .pnx-mdc-points li { font-size: 16px; }
  app-banner .pnx-mdc-cta { display: flex; justify-content: center; font-size: 14px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { app-banner .pnx-mdc-cta { transition: none; } }

/* Home hero content: label, h1, lead, primary/secondary actions.
   (!important where the banner's compiled .bannerHeading p rules would otherwise win.) */
app-banner .pnx-hero { --hero-white: #fff; --hero-text: #f7fbff; --hero-purple: #260e69; --hero-chip: rgba(255, 255, 255, .1); --hero-chip-hover: rgba(255, 255, 255, .22); --hero-line: rgba(255, 255, 255, .45); }
@media (min-width: 1201px) { app-banner .bannerSec .pnx-hero { width: 56% !important; } }
app-banner .pnx-hero-title { margin: 0 0 20px; font-size: 50px; font-weight: 600; line-height: 1.15; color: var(--hero-white); }
app-banner .pnx-hero .pnx-hero-lead { margin: 0 0 32px !important; font-size: 20px !important; line-height: 1.6 !important; color: var(--hero-text); }
app-banner .pnx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 26px; }
app-banner .pnx-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 50px;
  font-size: 16px; font-weight: 600; text-decoration: none; transition: gap .2s ease, background .2s ease; }
app-banner .pnx-hero-btn-primary { background: var(--hero-white); color: var(--hero-purple); border: 2px solid var(--hero-white); }
app-banner .pnx-hero-btn-primary:hover { gap: 16px; color: var(--hero-purple); }
app-banner .pnx-hero-btn-secondary { background: transparent; color: var(--hero-white); border: 2px solid var(--hero-white); }
app-banner .pnx-hero-btn-secondary:hover { background: var(--hero-chip-hover); color: var(--hero-white); }
app-banner .pnx-hero :is(a):focus-visible { outline: 3px solid var(--hero-white); outline-offset: 3px; }
@media (max-width: 1200px) { app-banner .pnx-hero-title { font-size: 45px; } }
@media (max-width: 991.98px) {
  app-banner .pnx-hero-title { font-size: 36px; }
  app-banner .pnx-hero .pnx-hero-lead { font-size: 18px !important; }
}
@media (max-width: 575.98px) {
  app-banner .pnx-hero-title { font-size: 32px; }
  app-banner .pnx-hero .pnx-hero-lead { font-size: 17px !important; }
  app-banner .pnx-hero-actions { flex-direction: column; align-items: stretch; }
  app-banner .pnx-hero-btn { font-size: 14px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { app-banner .pnx-hero-btn { transition: none; } }

/* Hero: the white layer behind the rounded hero card is square at the bottom, so the card's
   bottom corners sit on white (matching the client logo strip below), not the section's purple. */
app-banner .bannerBackground { border-radius: 0 !important; }

/* Hero label above the h1 (same style as the section labels, light on the dark hero). */
app-banner .pnx-hero .pnx-hero-tag { display: flex; align-items: center; gap: 12px; margin: 0 0 18px !important; font-size: 14px !important; line-height: 1.4 !important;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #e7e8ff; }
app-banner .pnx-hero .pnx-hero-tag::before { content: ''; flex: 0 0 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d50f0f, #ffb2af); }
@media (max-width: 575.98px) { app-banner .pnx-hero .pnx-hero-tag { font-size: 12px !important; letter-spacing: 1.5px; } }

/* Footer: three link columns (Solutions, Company, Contact Us). Items without a page yet are plain text. */
app-footer .footerCol { margin-bottom: 28px; }
app-footer .footerCol h2 { margin-bottom: 14px; }
app-footer .footerCol a:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 4px; }
app-footer .footerCol a:focus-visible, app-footer .termPolicy a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
app-footer .termPolicy a:focus-visible { outline-color: #260e69; }
app-footer .pnx-foot-soon { color: #c9c8c4; }
app-footer .contact-link { display: flex; align-items: flex-start; }
app-footer .contact-link .icon-style { flex: 0 0 auto; }

/* Logos carry width/height attributes (so the page does not jump while they load); keep their proportions. */
.pnx-logo img, app-footer .footerLogo img { height: auto; }

/* ---- home.css ---- */
/* Photonix home page sections rebuilt in site-tools/home/*.component.html:
   hero extras, clients strip, Solutions gallery, Our approach, Challenges, Case study, Purpose,
   How we work, Partners and Technologies. Loaded on the home page only. */
:root {
  --home-section-space: clamp(56px, 6vw, 96px);
  --home-layout-gap: clamp(32px, 5vw, 80px);
  --home-copy-gap: 24px;
  --home-purple: #260e69;
  --home-purple-deep: #120636;
  --home-red: #f41220;
  --home-lavender: #f6f3ff;
  --home-chip: #ece6ff;
  --home-line: #e4dcf7;
  --home-body: #475569;
  --home-white: #fff;
  --home-on-dark: rgba(255, 255, 255, .82);
  --home-glass: rgba(255, 255, 255, .06);
  --home-glass-hover: rgba(255, 255, 255, .11);
  --home-glass-line: rgba(255, 255, 255, .14);
  --home-shadow: 0 18px 40px rgba(38, 14, 105, .12);
  --home-radius: 18px;
  --home-ease: .25s ease;
  --home-h2: clamp(30px, 2.2vw + 14px, 44px);
}

/* Regional introduction: image-led, using the existing purple, white and Lato system. */
.pnx-regional { padding: var(--home-section-space) 0; background: var(--home-lavender); font-family: 'Lato', sans-serif; }
.pnx-regional-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--home-layout-gap); }
.pnx-regional-media { overflow: hidden; border-radius: var(--home-radius); }
.pnx-regional-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 35% center; }
.pnx-regional-copy h2 { margin: 0 0 var(--home-copy-gap); font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-purple); }
.pnx-regional-copy p { margin: 0 0 var(--home-copy-gap); max-width: 60ch; font-size: 18px; line-height: 1.75; color: var(--home-body); }
@media (max-width: 991.98px) {
  .pnx-regional-layout { grid-template-columns: minmax(0, 1fr); }
  .pnx-regional-media img { aspect-ratio: 3 / 2; }
}
@media (max-width: 575.98px) {
  .pnx-regional-copy p { font-size: 16px; }
}

/* Shared */
.pnx-tech { font-family: 'Lato', sans-serif; }
.pnx-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--home-purple); font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.pnx-eyebrow::before { content: ''; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d50f0f, #ffb2af); }
.pnx-eyebrow-light { color: var(--home-chip); }
.pnx-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 50px; font-size: 16px; font-weight: 600; text-decoration: none; transition: gap var(--home-ease), background var(--home-ease); }
.pnx-btn:hover { gap: 16px; }
.pnx-btn-dark { background: var(--home-purple); color: var(--home-white); }
.pnx-btn-dark:hover { background: var(--home-purple-deep); color: var(--home-white); }
.pnx-btn-light { background: var(--home-white); color: var(--home-purple); }
.pnx-btn-light:hover { color: var(--home-purple); }
.pnx-btn:focus-visible, .pnx-tech-card:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; }

/* ---- Technologies & Solution Components ---- */
.pnx-tech { padding: clamp(56px, 6vw, 96px) 0; background: var(--home-lavender); }
.pnx-tech-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pnx-tech-intro { position: sticky; top: 130px; }
.pnx-tech-intro h2 { margin: 0 0 18px; font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-purple); }
.pnx-tech-lead { margin: 0 0 30px; font-size: 18px; line-height: 1.75; color: var(--home-body); }
.pnx-tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pnx-tech-wide { grid-column: 1 / -1; }
.pnx-tech-card { display: flex; align-items: center; gap: 16px; height: 100%; min-height: 92px; padding: 20px 22px; border: 1px solid var(--home-line); border-radius: var(--home-radius);
  background: var(--home-white); color: var(--home-purple); text-decoration: none; transition: transform var(--home-ease), box-shadow var(--home-ease), border-color var(--home-ease); }
.pnx-tech-card:hover { transform: translateY(-3px); border-color: var(--home-purple); box-shadow: var(--home-shadow); color: var(--home-purple); }
.pnx-tech-icon { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--home-chip); font-size: 22px; transition: background var(--home-ease), color var(--home-ease); }
.pnx-tech-card:hover .pnx-tech-icon { background: var(--home-purple); color: var(--home-white); }
.pnx-tech-name { flex: 1; font-size: 17px; font-weight: 600; line-height: 1.35; }
.pnx-tech-go { flex: 0 0 auto; font-size: 20px; opacity: .35; transition: opacity var(--home-ease), transform var(--home-ease); }
.pnx-tech-card:hover .pnx-tech-go { opacity: 1; transform: translate(2px, -2px); color: var(--home-red); }

/* Responsive */
@media (max-width: 991.98px) {
  .pnx-tech-layout { grid-template-columns: minmax(0, 1fr); }
  .pnx-tech-intro { position: static; }
}
@media (max-width: 575.98px) {
  .pnx-tech-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pnx-tech-card { min-height: 76px; padding: 16px 18px; }
  .pnx-tech-lead { font-size: 16px; }
  .pnx-btn { width: 100%; justify-content: center; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-btn, .pnx-tech-card, .pnx-tech-icon, .pnx-tech-go { transition: none; }
  .pnx-tech-card:hover:hover { transform: none; }
}

/* ---- Client logos (inside app-banner, directly below the hero) ----
   Label on the left, one long scrolling row of logos on the right.
   Two identical lists scroll by -50%, so the loop is seamless; spacing is a right margin on every
   logo (not flex gap) for the same reason. Pauses on hover; static for reduced-motion users. */
.pnx-clients { --clients-space: 72px; --clients-logo-h: 42px; padding: 40px 0; background: var(--home-white); font-family: 'Lato', sans-serif; }
.pnx-clients-inner { display: flex; align-items: center; gap: 48px; }
.pnx-clients-label { flex: 0 0 250px; margin: 0; padding-right: 40px; border-right: 1px solid var(--home-line);
  font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: 2px; text-transform: uppercase; color: var(--home-purple); }
.pnx-clients-viewport { flex: 1; min-width: 0; overflow: hidden; padding: 12px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.pnx-clients-track { display: flex; width: max-content; animation: pnx-clients-scroll 60s linear infinite; }
.pnx-clients-viewport:hover .pnx-clients-track { animation-play-state: paused; }
.pnx-clients-set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.pnx-clients-set img { display: block; height: var(--clients-logo-h); width: auto; max-width: none; margin-right: var(--clients-space); object-fit: contain; }
/* /#clients target: sits above the strip by the sticky header height (Angular anchor scrolling ignores scroll-margin). */
.pnx-clients { position: relative; }
.pnx-anchor { position: absolute; top: -104px; left: 0; width: 1px; height: 1px; margin: 0 !important; padding: 0 !important; } /* old #partners/#industries rules added a 120px offset */
@keyframes pnx-clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 991.98px) {
  .pnx-clients { --clients-space: 56px; }
  .pnx-anchor { top: -64px; }
  .pnx-clients-inner { gap: 32px; }
  .pnx-clients-label { flex-basis: 200px; padding-right: 28px; font-size: 13px; }
}
@media (max-width: 767.98px) {
  /* Label above the logos on phones */
  .pnx-clients-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .pnx-clients-label { flex-basis: auto; padding: 0; border: 0; text-align: center; }
}
@media (max-width: 575.98px) {
  .pnx-clients { --clients-space: 40px; --clients-logo-h: 34px; padding: 32px 0; }
  .pnx-clients-label { font-size: 12px; letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-clients-viewport { -webkit-mask-image: none; mask-image: none; }
  .pnx-clients-track { animation: none; width: auto; justify-content: center; }
  .pnx-clients-set { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .pnx-clients-set[aria-hidden="true"] { display: none; }
}

/* /#solutions target ("Explore our solutions" in the hero): placed at the end of app-banner,
   raised by the sticky header height so the solutions section that follows lands just below the header. */
app-banner > section { position: relative; }
.pnx-anchor.pnx-anchor-end { top: auto; bottom: 104px; }
@media (max-width: 991.98px) { .pnx-anchor.pnx-anchor-end { bottom: 64px; } }

/* ---- Solutions: expanding-panel gallery (app-about, site-tools/home/solutions.component.*) ----
   One panel open (wide, with content); the others are slim rounded strips that open on hover (mouse),
   click/tap or keyboard focus. The open panel's text has a fixed width so it never reflows while the
   panel animates. Phones: panels stack as bars that expand vertically. */
.pnx-sol { --sol-h: 500px; --sol-strip: 72px; --sol-gap: 14px; --sol-radius: 24px; --sol-speed: .3s; /* expand/collapse: a large move, so just above the 150-250ms norm */
  padding: clamp(56px, 6vw, 96px) 0; background: var(--home-white); font-family: 'Lato', sans-serif; }
/* Two columns (as the section was before): intro left, gallery right. Stacks below 992px. */
.pnx-sol-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.pnx-sol-intro h2 { margin: 0 0 20px; font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-purple); }
.pnx-sol-lead { margin: 0; font-size: 18px; line-height: 1.75; color: var(--home-body); }

.pnx-sol-panels { display: flex; gap: var(--sol-gap); height: var(--sol-h); margin: 0; padding: 0; list-style: none; }
.pnx-sol-panel { position: relative; flex: 1 1 0; min-width: var(--sol-strip); overflow: hidden; border-radius: var(--sol-radius);
  background: var(--home-purple) center / cover no-repeat; box-shadow: 0 18px 40px rgba(38, 14, 105, .16);
  transition: flex-grow var(--sol-speed) cubic-bezier(.2, 0, 0, 1), filter .2s ease-out;
  -webkit-box-reflect: below 10px linear-gradient(transparent 82%, rgba(0, 0, 0, .12)); }
.pnx-sol-panel.is-active { flex-grow: 6; }
.pnx-sol-panel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(18, 6, 54, .92) 0%, rgba(18, 6, 54, .55) 45%, rgba(18, 6, 54, .2) 100%); transition: background var(--sol-speed); }
.pnx-sol-panel:not(.is-active):hover { filter: brightness(1.12); }
.pnx-sol-img1 { background-image: url(/assets/images/homeImgs/img23.jpg); }
.pnx-sol-img2 { background-image: url(/assets/images/homeImgs/img25.jpg); }
.pnx-sol-img3 { background-image: url(/assets/images/solutionsImgs/img1.jpg); }
.pnx-sol-img4 { background-image: url(/assets/images/homeImgs/img26.jpg); }
.pnx-sol-img5 { background-image: url(/assets/images/homeImgs/img24.jpg); }
.pnx-sol-img6 { background-image: url(/assets/images/solutionsImgs/img4.jpg); }

/* Strip: the whole collapsed panel is the button; its title reads bottom-to-top */
.pnx-sol-tab { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 24px 0;
  margin: 0; border: 0; border-radius: 0; background: none; font-family: inherit; /* reset browser button styles */
  color: var(--home-white); font-size: 15px; font-weight: 700; letter-spacing: .5px; cursor: pointer; }
.pnx-sol-tab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; transition: opacity .2s ease; }
.pnx-sol-panel.is-active .pnx-sol-tab { pointer-events: none; }
.pnx-sol-panel.is-active .pnx-sol-tab span { opacity: 0; }
.pnx-sol-tab:focus-visible { outline: 3px solid var(--home-red); outline-offset: -3px; border-radius: var(--sol-radius); }

/* Open panel content */
/* Spans the card; text keeps a readable width (--sol-text) and the round arrow sits bottom-right. */
.pnx-sol-body { --sol-text: 480px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; padding: 36px 40px;
  color: var(--home-white); opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s; }
/* Content fades in as the panel finishes opening */
.pnx-sol-panel.is-active .pnx-sol-body { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease-out .15s, transform .2s ease-out .15s, visibility 0s; }
.pnx-sol-body h3 { margin: 0 0 12px; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--home-white); }
.pnx-sol-body p { margin: 0 0 6px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.pnx-sol-body .pnx-sol-tag { color: var(--home-white); font-weight: 700; }
.pnx-sol-body > :not(.pnx-sol-link) { max-width: var(--sol-text); }
/* Round arrow button, bottom-right (as on the earlier solution cards) */
.pnx-sol-link { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 44px; height: 44px; margin-top: 14px;
  border-radius: 50%; background: var(--home-white); color: var(--home-purple); font-size: 20px; text-decoration: none;
  transition: background .2s ease-out, color .2s ease-out, transform .2s ease-out; }
.pnx-sol-link:hover { background: var(--home-red); color: var(--home-white); transform: translateX(3px); }
.pnx-sol-link:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; }

/* Gallery in the right-hand column (992px and up): slimmer strips, narrower text column */
@media (min-width: 992px) {
  .pnx-sol { --sol-h: 520px; --sol-strip: 56px; --sol-gap: 10px; }
  .pnx-sol-panel.is-active { flex-grow: 10; }
  .pnx-sol-body { --sol-text: 340px; padding: 28px 24px 24px 28px; }
  .pnx-sol-body h3 { font-size: 24px; }
  .pnx-sol-body p { font-size: 16px; }
  .pnx-sol-tab { font-size: 14px; padding: 20px 0; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pnx-sol { --sol-strip: 48px; --sol-gap: 8px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pnx-sol { --sol-strip: 44px; --sol-gap: 8px; --sol-radius: 20px; }
  .pnx-sol-body { --sol-text: 300px; padding: 22px 18px 18px 22px; }
  .pnx-sol-body h3 { font-size: 21px; }
  .pnx-sol-body p { font-size: 15px; }
  .pnx-sol-tab { font-size: 13px; }
}
/* Tablet: intro above, gallery full width */
@media (max-width: 991.98px) {
  .pnx-sol-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pnx-sol { --sol-h: 460px; --sol-strip: 56px; --sol-gap: 10px; }
  .pnx-sol-panel.is-active { flex-grow: 8; }
  .pnx-sol-body { --sol-text: 380px; padding: 28px 24px 24px 30px; }
  .pnx-sol-body h3 { font-size: 24px; }
  .pnx-sol-body p { font-size: 16px; }
  .pnx-sol-tab { font-size: 14px; }
}
/* Phones: stacked bars that expand vertically */
@media (max-width: 767.98px) {
  .pnx-sol-panels { flex-direction: column; height: auto; gap: 10px; }
  .pnx-sol-panel { flex: none; min-width: 0; height: 68px; border-radius: 18px; transition: height var(--sol-speed) cubic-bezier(.2, 0, 0, 1); -webkit-box-reflect: none; }
  .pnx-sol-panel.is-active { height: 420px; }
  .pnx-sol-tab { align-items: center; justify-content: flex-start; padding: 0 22px; font-size: 16px; }
  .pnx-sol-tab span { writing-mode: horizontal-tb; transform: none; }
  .pnx-sol-tab::after { content: '\ea4e'; font-family: 'remixicon'; margin-left: auto; font-size: 22px; font-weight: 400; } /* ri-add-line */
  .pnx-sol-panel.is-active .pnx-sol-tab::after { opacity: 0; }
  .pnx-sol-body { --sol-text: none; padding: 24px 22px 20px; }
  .pnx-sol-body h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-sol-panel, .pnx-sol-panel::before, .pnx-sol-body, .pnx-sol-tab span, .pnx-sol-link { transition: none !important; }
  .pnx-sol-link:hover { transform: none; }
}

/* ---- Our approach (after the Solutions gallery; in solutions.component.html) ----
   Same pattern as the Micro Data Centre section: rounded image card + labelled copy, on the deep
   purple used by the Delivery section. Buttons/labels reuse .pnx-btn-light and .pnx-eyebrow-light. */
.pnx-appr { padding: clamp(56px, 6vw, 96px) 0; color: var(--home-white); font-family: 'Lato', sans-serif;
  background: linear-gradient(160deg, var(--home-purple) 0%, var(--home-purple-deep) 100%); }
.pnx-appr-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pnx-appr-copy h2 { margin: 0 0 18px; font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-white); }
.pnx-appr-lead { margin: 0 0 30px; font-size: 18px; line-height: 1.75; color: var(--home-on-dark); }
/* Split visual: before / after halves in one rounded card, joined by a round arrow */
.pnx-appr-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--home-glass-line); background: var(--home-glass-line); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.pnx-appr-half { position: relative; display: flex; align-items: flex-end; padding: 18px; background: center / cover no-repeat; }
.pnx-appr-half::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 6, 54, .75), rgba(18, 6, 54, 0) 55%); }
.pnx-appr-now { background-image: url(/assets/images/homeImgs/img12.jpg); } /* web-sized copy made by site-tools/optimise-images.mjs */
.pnx-appr-next { background-image: url(/assets/images/solutionsImgs/img5.jpg); }
.pnx-appr-cap { position: relative; padding: 6px 14px; border-radius: 999px; background: var(--home-white); color: var(--home-purple);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pnx-appr-join { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: var(--home-red); color: var(--home-white); font-size: 22px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
@media (max-width: 991.98px) {
  .pnx-appr-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .pnx-appr-lead { font-size: 16px; }
  .pnx-appr-split { aspect-ratio: 4 / 3; border-radius: 18px; }
  .pnx-appr-half { padding: 12px; }
  .pnx-appr-cap { font-size: 10px; padding: 5px 10px; letter-spacing: .5px; }
  .pnx-appr-join { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 18px; }
}

/* ---- Sections 7–11 (site-tools/home/{challenges,purpose,steps,partners}.component.html) ----
   Built from the existing home tokens and patterns: .pnx-eyebrow labels, .pnx-btn buttons,
   white cards with the lavender line border (as Technologies), and the purple bands. */
.pnx-chal, .pnx-case, .pnx-purp, .pnx-steps, .pnx-part { position: relative; padding: clamp(56px, 6vw, 96px) 0; font-family: 'Lato', sans-serif; }
:is(.pnx-chal, .pnx-case, .pnx-steps, .pnx-part) h2 { margin: 0 0 18px; font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-purple); }

/* 7. Challenges: stepped gallery. Four cards bottom-aligned and stepping up left → right; the large one is
   the current challenge. Text sits on the cards (as the Solutions cards): titles on the small ones, title +
   text + round arrow on the large one. Top-left above the small cards: current industry + prev/next.
   Dots centred below. Tablet: industry/arrows above the cards. Phone: large card only. */
.pnx-chal { background: var(--home-white); overflow-x: clip; } /* the card leaving the big slot slides off the right edge */
.pnx-chal > .container > h2 { max-width: 760px; margin-bottom: clamp(28px, 3vw, 40px); }
.pnx-cs-stage { --cs-h: 440px; --cs-speed: .6s; position: relative; height: var(--cs-h); }

/* Top-left: current industry name + arrows (above the two small cards only) */
.pnx-cs-copy { position: absolute; top: 0; left: 0; z-index: 2; width: 43.5%; }
.pnx-cs-ind { display: none; margin: 0 0 20px; font-size: clamp(26px, 1.6vw + 12px, 38px); font-weight: 700; line-height: 1.15; color: var(--home-purple); }
.pnx-cs-ind.is-active { display: block; animation: pnx-cs-in .45s ease-out; }
.pnx-cs-ind::before { content: ''; display: block; width: 44px; height: 4px; margin-bottom: 16px; border-radius: 3px; background: var(--home-red); }
@keyframes pnx-cs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pnx-cs-controls { display: flex; gap: 10px; }
.pnx-cs-ctrl { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--home-line); border-radius: 50%;
  background: var(--home-white); color: var(--home-purple); font-size: 20px; cursor: pointer; transition: background var(--home-ease), color var(--home-ease), border-color var(--home-ease); }
.pnx-cs-ctrl:hover { background: var(--home-purple); border-color: var(--home-purple); color: var(--home-white); }
.pnx-cs-ctrl:focus-visible, .pnx-cs-dot:focus-visible, .pnx-cs-btn:focus-visible, .pnx-cs-go:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; }

/* Cards */
.pnx-cs-cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.pnx-cs-card { position: absolute; bottom: 0; left: 0; width: 20%; height: 44%; overflow: hidden; border-radius: 20px; opacity: 1; visibility: visible;
  box-shadow: 0 18px 40px rgba(38, 14, 105, .18);
  transition: left var(--cs-speed) cubic-bezier(.2, 0, 0, 1), width var(--cs-speed) cubic-bezier(.2, 0, 0, 1), height var(--cs-speed) cubic-bezier(.2, 0, 0, 1), opacity .35s ease-out, visibility 0s; }
.pnx-cs-card.is-s0 { left: 0; }
.pnx-cs-card.is-s1 { left: 22.5%; }
.pnx-cs-card.is-s2 { left: 45%; height: 66%; }
.pnx-cs-card.is-s3 { left: 67.5%; width: 32.5%; height: 100%; }
.pnx-cs-card.is-in { left: -22.5%; }
.pnx-cs-card.is-out { left: 100%; width: 32.5%; height: 100%; }
/* Off-stage cards are hidden from assistive tech and keyboard once they have finished moving */
.pnx-cs-card.is-in, .pnx-cs-card.is-out { opacity: 0; visibility: hidden; pointer-events: none;
  transition: left var(--cs-speed) cubic-bezier(.2, 0, 0, 1), width var(--cs-speed) cubic-bezier(.2, 0, 0, 1), height var(--cs-speed) cubic-bezier(.2, 0, 0, 1), opacity .35s ease-out, visibility 0s linear var(--cs-speed); }
.pnx-cs-btn { position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: inherit; background: var(--home-purple) center / cover no-repeat; cursor: pointer; transition: filter var(--home-ease); }
.pnx-cs-card:not(.is-s3) .pnx-cs-btn:hover { filter: brightness(1.1); }
.pnx-cs-card.is-s3 .pnx-cs-btn { cursor: default; }
.pnx-cs-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18, 6, 54, .95) 0%, rgba(18, 6, 54, .7) 45%, rgba(18, 6, 54, .3) 100%); }
/* Card text */
.pnx-cs-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; padding: 18px 20px; color: var(--home-white); pointer-events: none; }
.pnx-cs-body h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--home-white); }
.pnx-cs-body p, .pnx-cs-go { display: none; }
.pnx-cs-card.is-s3 .pnx-cs-body { padding: 28px 28px 24px; }
.pnx-cs-card.is-s3 .pnx-cs-body h3 { max-width: 380px; font-size: clamp(21px, 1vw + 12px, 26px); margin-bottom: 10px; }
.pnx-cs-card.is-s3 .pnx-cs-body p { display: block; max-width: 380px; margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); animation: pnx-cs-in .4s ease-out .3s both; }
.pnx-cs-card.is-s3 .pnx-cs-go { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 44px; height: 44px; margin-top: 14px; border-radius: 50%;
  background: var(--home-white); color: var(--home-purple); font-size: 20px; text-decoration: none; pointer-events: auto; transition: background .2s ease-out, color .2s ease-out, transform .2s ease-out; }
.pnx-cs-card.is-s3 .pnx-cs-go:hover { background: var(--home-red); color: var(--home-white); transform: translateX(3px); }

/* Dots: centred below the cards */
.pnx-cs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.pnx-cs-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.pnx-cs-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--home-line); transition: all var(--home-ease); }
.pnx-cs-dot.is-active::before { width: 22px; margin-left: -11px; border-radius: 4px; background: var(--home-red); }

@media (max-width: 1199.98px) {
  .pnx-cs-stage { --cs-h: 400px; }
  .pnx-cs-body { padding: 14px; }
  .pnx-cs-body h3 { font-size: 15px; }
  .pnx-cs-card.is-s3 .pnx-cs-body { padding: 22px 20px 20px; }
  .pnx-cs-card.is-s3 .pnx-cs-body p { font-size: 15px; }
}
@media (max-width: 991.98px) {
  .pnx-cs-stage { height: auto; }
  .pnx-cs-copy { position: static; width: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
  .pnx-cs-ind { margin-bottom: 0; }
  .pnx-cs-cards { position: relative; height: 340px; }
  .pnx-cs-card:not(.is-s3) .pnx-cs-body { display: none; }
}
@media (max-width: 575.98px) {
  .pnx-cs-ind { font-size: 22px; }
  .pnx-cs-ctrl { width: 44px; height: 44px; }
  .pnx-cs-cards { height: 380px; }
  .pnx-cs-card { width: 100%; height: 100%; }
  .pnx-cs-card.is-s0, .pnx-cs-card.is-s1, .pnx-cs-card.is-s2 { left: -100%; opacity: 0; visibility: hidden; pointer-events: none; }
  .pnx-cs-card.is-s3 { left: 0; width: 100%; }
  .pnx-cs-card.is-out { width: 100%; }
  .pnx-cs-card.is-s3 .pnx-cs-body { padding: 20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-cs-card, .pnx-cs-btn, .pnx-cs-ctrl, .pnx-cs-dot::before, .pnx-cs-card.is-s3 .pnx-cs-go { transition: none; }
  .pnx-cs-ind.is-active, .pnx-cs-card.is-s3 .pnx-cs-body p { animation: none; }
}

/* 8. Case study (hidden until approved): image + copy + stats */
.pnx-case { background: var(--home-lavender); }
.pnx-case[hidden] { display: none; }
.pnx-case-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pnx-case-media { aspect-ratio: 16 / 10; border-radius: 24px; background: var(--home-chip) center / cover no-repeat; box-shadow: var(--home-shadow); }
.pnx-case-lead { margin: 0 0 24px; font-size: 18px; line-height: 1.75; color: var(--home-body); }
.pnx-case-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 30px; padding: 20px 0; list-style: none; border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); color: var(--home-body); }
.pnx-case-stats strong { display: block; font-size: 30px; line-height: 1.1; color: var(--home-purple); }

/* 9. Purpose: centred purple band over the city-network photo */
.pnx-purp { color: var(--home-white); text-align: center; overflow: hidden;
  background: linear-gradient(160deg, rgba(38, 14, 105, .94) 0%, rgba(18, 6, 54, .96) 100%), url(/assets/images/homeImgs/img3.jpg) center / cover no-repeat; }
.pnx-purp-inner { max-width: 860px; margin: 0 auto; }
.pnx-purp .pnx-eyebrow { justify-content: center; }
.pnx-purp h2 { margin: 0 0 20px; font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-white); }
.pnx-purp-lead { margin: 0 auto 32px; max-width: 72ch; font-size: 18px; line-height: 1.75; color: var(--home-on-dark); }

/* 10. How we work: isometric flow. Each step is an illustrated platform (assets/images/howwework/*.svg, made by
   site-tools/home/make-steps-art.mjs); platforms are joined by a thin curving line with ring nodes, and a pulse
   of light runs along the line left → right (inside the connector SVGs). Cards with number badges sit below.
   Geometry: --art is the artwork size; platform vertices sit 13px in from its sides and 117px down (at 170px). */
.pnx-steps { --art: 170px; --steps-gap: clamp(14px, 1.6vw, 28px); --line-y: calc(var(--art) * .69); overflow-x: clip;
  background: radial-gradient(60% 55% at 50% 34%, #fff 0%, rgba(255, 255, 255, 0) 70%), var(--home-lavender); }
.pnx-steps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(16px, 2vw, 28px); }
.pnx-steps-head h2 { margin-bottom: 0; }
.pnx-steps-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--home-purple); font-size: 15px; font-weight: 700;
  text-decoration: none; white-space: nowrap; }
.pnx-steps-link i { transition: transform var(--home-ease); }
.pnx-steps-link:hover { color: var(--home-purple); text-decoration: underline; text-underline-offset: 5px; }
.pnx-steps-link:hover i { transform: translateX(4px); }
.pnx-steps-link:focus-visible { outline: 3px solid var(--home-red); outline-offset: 4px; border-radius: 4px; }

/* Faint isometric detail behind the artwork row (bg.svg tile, faded out at both ends) */
.pnx-steps-list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--steps-gap); margin: 0; padding: 0; list-style: none;
  background: url(/assets/images/howwework/bg.svg) 50% 0 / auto calc(var(--art) + 24px) repeat-x; }
.pnx-step { position: relative; display: grid; grid-template-rows: var(--art) 1fr; row-gap: 14px; justify-items: center; }
.pnx-step-art { position: relative; z-index: 1; grid-row: 1; display: block; width: var(--art); height: var(--art); transition: transform var(--home-ease); }
.pnx-step:hover .pnx-step-art { transform: translateY(-6px); }

/* Connector from the previous platform's right vertex to this platform (behind the artwork) */
.pnx-step + .pnx-step::before { content: ''; position: absolute; z-index: 0; top: calc(var(--line-y) - 40px); height: 60px;
  left: calc(-1 * var(--steps-gap) - 50% + var(--art) / 2 - 13px); width: calc(100% + var(--steps-gap) - var(--art) + 44px);
  background: center / 100% 100% no-repeat; }
.pnx-step:nth-child(2)::before { background-image: url(/assets/images/howwework/conn-1.svg); }
.pnx-step:nth-child(3)::before { background-image: url(/assets/images/howwework/conn-2.svg); }
.pnx-step:nth-child(4)::before { background-image: url(/assets/images/howwework/conn-3.svg); }
.pnx-step:nth-child(5)::before { background-image: url(/assets/images/howwework/conn-4.svg); }
/* Ring node at the middle of each connector; red and purple alternate; each glows as the light passes */
.pnx-step + .pnx-step::after { content: ''; position: absolute; z-index: 1; top: calc(var(--line-y) - 8px); left: calc(var(--steps-gap) / -2 + 1px); width: 16px; height: 16px;
  border-radius: 50%; background: var(--home-white); border: 3px solid var(--home-red); animation: pnx-ring-lit 4s linear infinite; }
.pnx-step:nth-child(odd)::after { border-color: #3b1fa3; }
.pnx-step:nth-child(2)::after { animation-delay: .35s; }
.pnx-step:nth-child(3)::after { animation-delay: 1.15s; }
.pnx-step:nth-child(4)::after { animation-delay: 1.95s; }
.pnx-step:nth-child(5)::after { animation-delay: 2.75s; }
@keyframes pnx-ring-lit { 0%, 16%, 100% { box-shadow: 0 0 0 0 rgba(244, 18, 32, 0); } 4% { box-shadow: 0 0 0 6px rgba(244, 18, 32, .16), 0 0 16px rgba(244, 18, 32, .6); } }
/* End stubs with a red ring at each end of the row */
.pnx-steps-list::before, .pnx-steps-list::after { content: ''; position: absolute; top: calc(var(--line-y) - 8px); height: 16px;
  width: calc((100% - 4 * var(--steps-gap)) / 10 - var(--art) / 2 + 13px); }
.pnx-steps-list::before { left: 0;
  background: radial-gradient(circle at 8px 8px, #fff 0 4.5px, var(--home-red) 5px 7.5px, transparent 8px), linear-gradient(#3b1fa3, #3b1fa3) 15px 50% / 100% 2.5px no-repeat; }
.pnx-steps-list::after { right: 0;
  background: radial-gradient(circle at calc(100% - 8px) 8px, #fff 0 4.5px, var(--home-red) 5px 7.5px, transparent 8px), linear-gradient(#3b1fa3, #3b1fa3) -15px 50% / 100% 2.5px no-repeat; }

/* Cards: number badge, title, text */
.pnx-step-card { grid-row: 2; align-self: stretch; width: 100%; padding: 24px 22px; border: 1px solid var(--home-line); border-radius: 20px; background: var(--home-white);
  box-shadow: 0 12px 28px rgba(38, 14, 105, .07); transition: border-color var(--home-ease), box-shadow var(--home-ease); }
.pnx-step:hover .pnx-step-card { border-color: var(--home-purple); box-shadow: var(--home-shadow); }
.pnx-step-num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
  background: #fdecee; color: #b30d1a; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pnx-step:nth-child(even) .pnx-step-num { background: var(--home-chip); color: var(--home-purple); }
.pnx-step h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--home-purple); }
.pnx-step p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--home-body); }

@media (max-width: 1399.98px) { .pnx-steps { --art: 150px; } .pnx-step-card { padding: 20px 18px; } }
/* Below 1200px (five cards no longer fit in a row): artwork on the left, card on the right, stacked */
@media (max-width: 1199.98px) {
  .pnx-steps { --art: 110px; }
  .pnx-steps-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .pnx-steps-link { align-self: flex-end; }
  .pnx-steps-list { grid-template-columns: minmax(0, 1fr); gap: 16px; background: none; }
  .pnx-steps-list::before, .pnx-steps-list::after, .pnx-step + .pnx-step::before, .pnx-step + .pnx-step::after { display: none; }
  .pnx-step { grid-template-rows: none; grid-template-columns: var(--art) 1fr; column-gap: 16px; row-gap: 0; justify-items: stretch; align-items: center; }
  .pnx-step-art { grid-row: 1; grid-column: 1; }
  .pnx-step-card { grid-row: 1; grid-column: 2; align-self: center; }
}
@media (max-width: 575.98px) {
  .pnx-steps { --art: 84px; }
  .pnx-step { column-gap: 10px; }
  .pnx-step-card { padding: 18px 16px; }
  .pnx-step-num { width: 38px; height: 38px; margin-bottom: 10px; font-size: 14px; }
  .pnx-step p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-step + .pnx-step::after { animation: none; }
  .pnx-step-art, .pnx-step-card, .pnx-steps-link i { transition: none; }
  .pnx-step:hover .pnx-step-art { transform: none; }
}

/* 11. Partners: white; copy left, logo tiles right (3 × 2) */
.pnx-part { background: var(--home-white); }
.pnx-part-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pnx-part-lead { margin: 0 0 30px; font-size: 18px; line-height: 1.75; color: var(--home-body); }
/* Tiles wrap three to a row (6 partners = 3 x 2); an incomplete last row is centred when partners are added */
.pnx-part-grid { --part-cols: 3; --part-gap: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--part-gap); margin: 0; padding: 0; list-style: none; }
.pnx-part-grid li { flex: 0 0 calc((100% - (var(--part-cols) - 1) * var(--part-gap)) / var(--part-cols)); display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 18px 22px; border: 1px solid var(--home-line); border-radius: 14px;
  background: var(--home-white); transition: border-color var(--home-ease), box-shadow var(--home-ease); }
.pnx-part-grid li:hover { border-color: var(--home-purple); box-shadow: var(--home-shadow); }
.pnx-part-grid img { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }

@media (max-width: 767.98px) {
  .pnx-part-grid { --part-cols: 3; }
}
@media (max-width: 991.98px) {
  .pnx-case-row, .pnx-part-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .pnx-part-grid { --part-cols: 2; --part-gap: 12px; }
  .pnx-purp-lead, .pnx-part-lead, .pnx-case-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-part-grid li { transition: none; }
}

/* ---- Industries we serve (app-supporting; site-tools/home/industries.component.html) ----
   Deep purple band (as the original sectors section) with six rounded photo cards inside the page
   margins; names always visible; the photo zooms and the arrow turns red on hover. */
.pnx-ind { position: relative; padding: clamp(56px, 6vw, 96px) 0; color: var(--home-white); font-family: 'Lato', sans-serif;
  background: linear-gradient(160deg, var(--home-purple) 0%, var(--home-purple-deep) 100%); }
.pnx-ind h2 { margin: 0 0 clamp(28px, 3vw, 44px); font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-white); }
.pnx-ind-grid { --ind-cols: 6; --ind-h: 420px; display: grid; grid-template-columns: repeat(var(--ind-cols), minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pnx-ind-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: var(--ind-h); overflow: hidden; border-radius: 20px; padding: 20px;
  color: var(--home-white); text-decoration: none; isolation: isolate; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.pnx-ind-img { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; transition: transform .4s ease-out; }
.pnx-ind-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(18, 6, 54, .9) 0%, rgba(18, 6, 54, .45) 40%, rgba(18, 6, 54, .15) 70%, rgba(18, 6, 54, .5) 100%); }
.pnx-ind-telecom { background-image: url(/assets/images/homeImgs/img18.jpg); }
.pnx-ind-utilities { background-image: url(/assets/images/homeImgs/img20.jpg); }
.pnx-ind-mining { background-image: url(/assets/images/homeImgs/img8.jpg); }
.pnx-ind-datacentres { background-image: url(/assets/images/homeImgs/img19.jpg); }
.pnx-ind-government { background-image: url(/assets/images/homeImgs/australian-parliament-house-1.jpg); }
.pnx-ind-transport { background-image: url(/assets/images/homeImgs/Transport.jpg); }
.pnx-ind-name { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--home-white); }
.pnx-ind-go { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: auto; align-self: flex-end; border-radius: 50%;
  background: var(--home-white); color: var(--home-purple); font-size: 18px; transition: background .2s ease-out, color .2s ease-out; }
.pnx-ind-card:hover { color: var(--home-white); }
.pnx-ind-card:hover .pnx-ind-img { transform: scale(1.06); }
.pnx-ind-card:hover .pnx-ind-go { background: var(--home-red); color: var(--home-white); }
.pnx-ind-card:focus-visible { outline: 3px solid var(--home-white); outline-offset: 3px; }
@media (max-width: 1199.98px) { .pnx-ind-grid { --ind-cols: 3; --ind-h: 300px; } }
@media (max-width: 575.98px) {
  .pnx-ind-grid { --ind-cols: 2; --ind-h: 220px; gap: 10px; }
  .pnx-ind-card { padding: 14px; border-radius: 16px; }
  .pnx-ind-name { font-size: 15px; }
  .pnx-ind-go { flex-basis: 30px; width: 30px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnx-ind-img, .pnx-ind-go { transition: none; }
  .pnx-ind-card:hover .pnx-ind-img { transform: none; }
}
/* Industries: red line above each name, as the industry name in Challenges */
.pnx-ind-name::before { content: ''; display: block; width: 36px; height: 4px; margin-bottom: 12px; border-radius: 3px; background: var(--home-red); }
@media (max-width: 575.98px) { .pnx-ind-name::before { width: 28px; height: 3px; margin-bottom: 8px; } }

/* ---- industry.css ---- */
/* Photonix industry pages (/industries/<slug>). Generated into assets/css/industry.css by apply-site.mjs
   (hero photo classes are appended). Uses the home tokens and shared classes from home.css
   (--home-*, .pnx-eyebrow, .pnx-btn), which is loaded on every page. */
.ipg { display: block; font-family: 'Lato', sans-serif; }
.ipg section { position: relative; }
.ipg h2 { margin: 0 0 clamp(24px, 3vw, 40px); font-size: var(--home-h2); font-weight: 600; line-height: 1.2; color: var(--home-purple); }

/* Hero: rounded purple card with the sector photo fading in on the right (as the home hero) */
.ipg-hero { padding: 24px 0 0; background: var(--home-white); }
.ipg-hero-card { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; border-radius: 32px;
  background: linear-gradient(135deg, var(--home-purple-deep) 0%, var(--home-purple) 60%, #3b1fa3 100%); color: var(--home-white); }
.ipg-hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%); mask-image: linear-gradient(to right, transparent 0%, #000 40%); }
.ipg-hero-copy { position: relative; z-index: 1; width: 58%; padding: clamp(40px, 5vw, 72px); }
.ipg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #e7e8ff; }
.ipg-crumb::before { content: ''; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d50f0f, #ffb2af); }
.ipg-crumb a { color: #e7e8ff; text-decoration: none; }
.ipg-crumb a:hover { color: var(--home-white); text-decoration: underline; text-underline-offset: 4px; }
.ipg-hero h1 { margin: 0 0 18px; font-size: clamp(34px, 2.6vw + 14px, 52px); font-weight: 600; line-height: 1.12; color: var(--home-white); }
.ipg-lead { margin: 0 0 30px; max-width: 60ch; font-size: 18px; line-height: 1.7; color: var(--home-on-dark); }
.ipg a:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; border-radius: 4px; }
.ipg-hero a:focus-visible { outline-color: var(--home-white); }

/* Challenges: three numbered white cards */
.ipg-chal { padding: clamp(56px, 6vw, 96px) 0; background: var(--home-white); }
.ipg-chal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ipg-chal-card { position: relative; padding: 28px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-white);
  box-shadow: 0 12px 28px rgba(38, 14, 105, .06); }
.ipg-chal-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px;
  background: var(--home-chip); color: var(--home-purple); font-size: 22px; }
.ipg-num { position: absolute; top: 28px; right: 28px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #d50f0f; }
.ipg-chal-card h3, .ipg-help-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--home-purple); }
.ipg-chal-card p, .ipg-help-card > p:not(.ipg-tag) { margin: 0; font-size: 16px; line-height: 1.65; color: var(--home-body); }

/* How we help: solution cards with links; expanded capabilities tagged */
.ipg-help { padding: clamp(56px, 6vw, 96px) 0; background: var(--home-lavender); }
.ipg-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ipg-help-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-white); }
.ipg-help-card.is-expanded { border-left: 4px solid var(--home-red); }
.ipg-tag { align-self: flex-start; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: #fdecee; color: #b30d1a; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.ipg-tag-core { background: var(--home-chip); color: var(--home-purple); }
.ipg-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: auto; padding-top: 18px; }
.ipg-link { display: inline-flex; align-items: center; gap: 8px; color: var(--home-purple); font-size: 15px; font-weight: 700; text-decoration: none; }
.ipg-link i { transition: transform var(--home-ease); }
a.ipg-link:hover { color: #d50f0f; }
a.ipg-link:hover i { transform: translateX(4px); }
.ipg-link.is-soon { color: var(--home-body); font-weight: 600; }

/* Case study (hidden until approved) and clients (hidden until permission) */
.ipg-case, .ipg-clients { padding: clamp(48px, 5vw, 80px) 0; background: var(--home-white); }
.ipg-case[hidden], .ipg-clients[hidden], .ipg-faq[hidden] { display: none; }
.ipg-case-card { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--home-line); border-radius: 24px; background: var(--home-lavender); }
.ipg-client-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ipg-client-list li { padding: 10px 18px; border: 1px solid var(--home-line); border-radius: 999px; color: var(--home-purple); font-weight: 700; }

/* FAQ: native disclosure, fully keyboard accessible */
.ipg-faq { padding: clamp(56px, 6vw, 96px) 0; background: var(--home-white); }
.ipg-faq-list { max-width: 880px; border-top: 1px solid var(--home-line); }
.ipg-faq-item { border-bottom: 1px solid var(--home-line); }
.ipg-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 700; color: var(--home-purple); }
.ipg-faq-item summary::-webkit-details-marker { display: none; }
.ipg-faq-item summary i { flex: 0 0 auto; font-size: 22px; transition: transform var(--home-ease); }
.ipg-faq-item[open] summary i { transform: rotate(45deg); color: #d50f0f; }
.ipg-faq-item summary:focus-visible { outline: 3px solid var(--home-red); outline-offset: 2px; border-radius: 6px; }
.ipg-faq-item p { margin: 0; padding: 0 4px 22px; max-width: 70ch; font-size: 17px; line-height: 1.7; color: var(--home-body); }

/* Closing CTA: purple band (as Our purpose) */
.ipg-cta { padding: clamp(56px, 6vw, 96px) 0; text-align: center; color: var(--home-white);
  background: linear-gradient(160deg, var(--home-purple) 0%, var(--home-purple-deep) 100%); }
.ipg-cta-inner { max-width: 760px; margin: 0 auto; }
.ipg-cta h2 { margin-bottom: 16px; color: var(--home-white); }
.ipg-cta p { margin: 0 auto 30px; font-size: 18px; line-height: 1.7; color: var(--home-on-dark); }
.ipg-cta a:focus-visible { outline-color: var(--home-white); }

@media (max-width: 991.98px) {
  .ipg-hero-card { flex-direction: column; align-items: stretch; min-height: 0; }
  .ipg-hero-img { position: relative; width: auto; height: 240px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .ipg-hero-copy { width: auto; padding: 8px clamp(24px, 5vw, 48px) clamp(32px, 5vw, 48px); }
  .ipg-chal-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .ipg-help-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .ipg-hero { padding-top: 12px; }
  .ipg-hero-card { border-radius: 24px; }
  .ipg-hero-img { height: 190px; }
  .ipg-lead, .ipg-cta p { font-size: 16px; }
  .ipg-chal-card, .ipg-help-card { padding: 22px; }
  .ipg-num { top: 22px; right: 22px; }
  .ipg-faq-item summary { font-size: 17px; }
  .ipg .pnx-btn { width: 100%; justify-content: center; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ipg-link i, .ipg-faq-item summary i { transition: none; }
}

/* ---- Services page (/services; site-tools/services/services.mjs) ---- */
.svc-hero-img { background-image: url(/assets/images/homeImgs/img19.jpg); }
.svc-stats { margin: 22px 0 0; font-size: 15px; font-weight: 700; color: #e7e8ff; }
/* Jump links to the three service sections */
.svc-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.svc-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--home-white); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--home-ease); }
.svc-jump a:hover { background: rgba(255, 255, 255, .2); color: var(--home-white); }
.svc-jump a:focus-visible { outline: 3px solid var(--home-white); outline-offset: 3px; }

/* Service sections: heading left, introduction right, then numbered steps or the support table */
.svc-sec { padding: clamp(56px, 6vw, 96px) 0; background: var(--home-white); }
.svc-sec.is-alt { background: var(--home-lavender); }
.svc-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.svc-head h2 { margin-bottom: 0; }
.svc-intro { margin: 0; font-size: 17px; line-height: 1.75; color: var(--home-body); }
.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.svc-step { position: relative; padding: 28px; border: 1px solid var(--home-line); border-top: 4px solid var(--home-purple); border-radius: var(--home-radius); background: var(--home-white); }
.svc-step h3 { margin: 18px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--home-purple); }
.svc-step p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--home-body); }
.svc-step .ipg-num { position: static; display: block; }
.svc-table-wrap { overflow-x: auto; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-white); }
.svc-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.svc-table th, .svc-table td { padding: 18px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--home-line); line-height: 1.6; }
.svc-table tr:last-child th, .svc-table tr:last-child td { border-bottom: 0; }
.svc-table thead th { background: var(--home-purple); color: var(--home-white); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.svc-table tbody th { width: 30%; color: var(--home-purple); font-weight: 700; }
.svc-table td { color: var(--home-body); }

/* Why one team: image + text on the purple band */
.svc-why { padding: clamp(56px, 6vw, 96px) 0; color: var(--home-white); background: linear-gradient(160deg, var(--home-purple) 0%, var(--home-purple-deep) 100%); }
.svc-why-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.svc-why-img { aspect-ratio: 16 / 10; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .14); background: url(/assets/images/homeImgs/img29.jpg) center / cover no-repeat;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.svc-why h2 { color: var(--home-white); margin-bottom: 18px; }
.svc-why-copy p:not(.pnx-eyebrow) { margin: 0; font-size: 18px; line-height: 1.75; color: var(--home-on-dark); }

@media (max-width: 991.98px) {
  .svc-head, .svc-why-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .svc-step { padding: 22px; }
  .svc-table th, .svc-table td { padding: 14px 16px; font-size: 15px; }
  .svc-table tbody th { width: 38%; }
  .svc-intro, .svc-why-copy p:not(.pnx-eyebrow) { font-size: 16px; }
}

/* Hero photos (generated from industries.mjs) */
.ipg-img-telecom-carriers-operators { background-image: url(/assets/images/homeImgs/img18.jpg); }
.ipg-img-utilities-energy { background-image: url(/assets/images/homeImgs/img20.jpg); }
.ipg-img-mining-resources { background-image: url(/assets/images/homeImgs/img8.jpg); }
.ipg-img-data-centres-enterprise { background-image: url(/assets/images/homeImgs/img19.jpg); }
.ipg-img-government-local-councils { background-image: url(/assets/images/homeImgs/australian-parliament-house-1.jpg); }
.ipg-img-transport { background-image: url(/assets/images/homeImgs/Transport.jpg); }
/* Services page only. Brand colours and typography follow the current homepage. */
.sv-page {
 --sv-header: 98px; --sv-nav: 72px; --sv-space: clamp(56px, 6vw, 96px);
 --sv-gap: clamp(32px, 5vw, 80px); --sv-radius: 24px; --sv-small-radius: 12px;
 --sv-soft: #eee8ff; --sv-accent-ink: #aa1332; --sv-accent-bg: #fdeaf0;
 --sv-shadow: 0 20px 48px rgba(38,14,105,.09); --sv-photo-shade: rgba(10,5,34,.86);
 --sv-faint: #8b7ba9; --sv-nav-bg: rgba(255,255,255,.96);
 --sv-white-line: rgba(255,255,255,.19);
 font-family: 'Lato', sans-serif; color: var(--home-body); background: var(--home-white);
}
.sv-page *, .sv-page *::before, .sv-page *::after { box-sizing: border-box; }
.sv-page h1, .sv-page h2, .sv-page h3 { color: var(--home-purple); font-family: inherit; }
/* Type values below match the home page (home.css / fixes.css): h1 50px, h2 --home-h2, labels 14px/2px, leads 18px/1.75. */
.sv-page h2 { font-size: var(--home-h2); font-weight: 600; line-height: 1.2; margin: 0 0 20px; }
.sv-page h3 { font-weight: 700; line-height: 1.3; }
.sv-page p { line-height: 1.65; }
.sv-page .pnx-eyebrow { line-height: 1.5; }
.sv-page a { text-decoration: none; }
.sv-page :is(a,summary):focus-visible { outline: 3px solid var(--home-red); outline-offset: 5px; border-radius: 4px; }
.sv-page :is(.sv-hero,.sv-overview,.sv-stage) { scroll-margin-top: calc(var(--sv-header) + var(--sv-nav) + 20px); }
/* Icon arrows: same size as their text and the same hover movement as the home page */
.sv-page :is(.sv-text-link, .sv-nav-contact) i { transition: transform var(--home-ease); }
.sv-page :is(.sv-text-link, .sv-nav-contact):hover i.ri-arrow-right-line { transform: translateX(4px); }
.sv-page .sv-arrow { font-size: 20px; line-height: 1; }
.sv-hero { padding: 32px 0 var(--sv-space); }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: var(--sv-gap); align-items: center; }
.sv-hero-copy { padding: 32px 0; }
.sv-hero h1 { font-size: 50px; line-height: 1.15; font-weight: 600; margin: 0 0 20px; max-width: 19ch; text-wrap: balance; }
.sv-hero h1 span { display: block; }
.sv-page .sv-lead { font-size: 18px; line-height: 1.75; margin: 0 0 30px; max-width: 53ch; }
.sv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.sv-text-link { display: inline-flex; gap: 8px; align-items: center; min-height: 48px; color: var(--home-purple); font-size: 15px; font-weight: 700; }
.sv-text-link:hover { color: var(--home-purple); text-decoration: underline; text-underline-offset: 5px; }
.sv-hero-foot { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.sv-hero-foot p { margin: 0; font-size: 14px; line-height: 1.65; }
.sv-hero-foot strong { color: var(--home-purple); }
.sv-mini-line { width: 3px; align-self: stretch; border-radius: 4px; background: var(--home-red); }
.sv-hero-media { position: relative; height: 600px; border-radius: var(--sv-radius); overflow: hidden; background: var(--home-purple-deep); }
.sv-hero-media::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,var(--sv-photo-shade)); pointer-events: none; }
.sv-hero-media>img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%; }
.sv-photo-caption { position: absolute; inset: auto 32px 60px; z-index: 1; color: var(--home-white); }
.sv-photo-caption>span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.sv-photo-caption p { font-size: clamp(24px,2.2vw,32px); line-height: 1.25; margin: 16px 0 24px; font-weight: 600; }
.sv-caption-rule { display: block; width: 56px; height: 3px; background: var(--home-red); }
.sv-photo-note { position: absolute; left: 32px; bottom: 24px; z-index: 1; color: var(--home-on-dark); font-size: 11px; }
.sv-overview { padding: var(--sv-space) 0 40px; background: var(--home-lavender); }
.sv-section-heading { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: var(--sv-gap); align-items: end; margin-bottom: 40px; }
.sv-section-heading h2 { margin: 0; max-width: 20ch; }
.sv-page .sv-section-heading>p { font-size: 18px; line-height: 1.75; margin: 0; max-width: 49ch; }
.sv-lifecycle { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.sv-lifecycle li { min-width: 0; position: relative; }
.sv-lifecycle a { display: block; height: 100%; padding: 0 0 20px; border-bottom: 2px solid var(--home-line); color: var(--home-body); transition: border-color var(--home-ease); }
.sv-lifecycle a:hover { border-color: var(--home-purple); }
.sv-overview-art { position: relative; height: 178px; display: flex; justify-content: center; background: url(/assets/images/howwework/bg.svg) center / auto 180px; }
.sv-overview-art img { position: relative; z-index: 1; width: 178px; height: 178px; transition: transform var(--home-ease); }
.sv-lifecycle a:hover img { transform: translateY(-4px); }
.sv-stage-index { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--home-purple); margin: 8px 0 12px; }
.sv-stage-index>i { font-size: 20px; font-weight: 400; transition: color var(--home-ease), transform var(--home-ease); }
.sv-lifecycle a:hover .sv-stage-index>i { color: var(--home-red); transform: translate(2px, -2px); }
.sv-lifecycle h3 { font-size: 20px; margin: 0 0 10px; }
.sv-lifecycle p { font-size: 15.5px; line-height: 1.65; margin: 0; }
.sv-expanded-note { display: flex; gap: 12px; align-items: center; font-size: 13px; margin: 28px 0 0; }
.sv-badge { display: inline-block; width: fit-content; padding: 4px 8px; border-radius: 5px; background: var(--sv-accent-bg); color: var(--sv-accent-ink); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; }
.sv-stage-nav { position: sticky; top: var(--sv-header); z-index: 50; background: var(--sv-nav-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); }
.sv-stage-nav>.container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sv-stage-nav nav { flex: 1; min-width: 0; }
.sv-stage-nav ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 8px 0; }
.sv-stage-nav li>a { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 12px 24px; color: var(--home-purple); font-size: 15px; font-weight: 700; border-radius: 8px; transition: background var(--home-ease),color var(--home-ease); }
.sv-stage-nav li>a>span { font-size: 11px; font-weight: 400; }
.sv-stage-nav li>a:hover { background: var(--home-lavender); }
.sv-stage-nav li>a[aria-current="location"] { color: var(--home-white); background: var(--home-purple); }
.sv-nav-contact { display: flex; gap: 8px; align-items: center; min-height: 48px; color: var(--home-purple); font-size: 15px; font-weight: 700; white-space: nowrap; }
.sv-stage { padding: var(--sv-space) 0; }
.sv-stage-tint { background: var(--home-lavender); }
.sv-stage-grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: var(--sv-gap); align-items: start; }
.sv-stage-intro { position: sticky; top: calc(var(--sv-header) + var(--sv-nav) + 32px); }
.sv-stage-intro>p:not(.pnx-eyebrow) { font-size: 17px; line-height: 1.75; margin: 0; }
.sv-stage-visual { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.sv-stage-visual img { width: 160px; height: 160px; position: relative; z-index: 1; }
.sv-stage-visual>span { font-size: clamp(100px,10vw,148px); line-height: 1; font-weight: 700; letter-spacing: -.07em; color: var(--sv-faint); }
.sv-stage-intro>.sv-outcome { padding: 16px 0 0; border-top: 1px solid var(--home-line); color: var(--home-purple); font-size: 14px !important; font-weight: 700; }
.sv-list-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 24px; padding: 0 0 16px; border-bottom: 2px solid var(--home-purple); font-size: 10px; color: var(--home-purple); font-weight: 700; letter-spacing: .13em; }
.sv-service-list dl { margin: 0; }
.sv-service-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--home-line); }
.sv-service-row dt { display: flex; align-items: flex-start; gap: 14px; color: var(--home-purple); font-size: 17px; line-height: 1.45; font-weight: 700; }
.sv-row-number { font-size: 10px; font-weight: 400; margin-top: 5px; min-width: 14px; }
.sv-service-row .sv-badge { display: block; margin-top: 10px; }
.sv-service-row dd { margin: 0; font-size: 15px; line-height: 1.7; }
.sv-stage-cta { margin-top: 16px; }
.sv-engagement { padding: var(--sv-space) 0 32px; background: var(--home-purple-deep); color: var(--home-on-dark); }
.sv-engagement h2, .sv-engagement h3 { color: var(--home-white); }
.sv-engagement-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.sv-engagement-grid article { display: flex; flex-direction: column; padding: 28px 24px; background: var(--home-glass); border: 1px solid var(--sv-white-line); border-radius: var(--sv-small-radius); }
.sv-engagement-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--sv-white-line); border-radius: 50%; color: var(--home-white); margin-bottom: 32px; font-size: 12px; }
.sv-engagement-grid h3 { font-size: 23px; margin: 0 0 16px; }
.sv-engagement-grid p { font-size: 15px; margin: 0 0 32px; }
.sv-engagement-note { display: block; margin-top: auto; border-top: 1px solid var(--sv-white-line); padding-top: 16px; font-size: 12px; color: var(--home-white); }
.sv-continuity { display: flex; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sv-white-line); }
.sv-continuity strong { color: var(--home-white); font-size: 16px; }
.sv-continuity p { font-size: 14px; margin: 0; }
.sv-solutions { padding: var(--sv-space) 0; }
.sv-heritage { padding: 48px 0; background: var(--home-lavender); border-bottom: 1px solid var(--home-line); }
.sv-heritage .container>div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: var(--sv-gap); }
.sv-heritage h2 { margin: 0; max-width: 22ch; }
.sv-heritage p:not(.pnx-eyebrow) { font-size: 18px; line-height: 1.75; margin: 0; }
.sv-solution-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.sv-solution-card { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--home-line); border-radius: var(--sv-small-radius); background: var(--home-white); transition: background var(--home-ease),border-color var(--home-ease); }
.sv-solution-card:hover { background: var(--home-lavender); border-color: var(--home-purple); }
.sv-solution-category { color: var(--sv-accent-ink); font-size: 10px; font-weight: 700; letter-spacing: .09em; margin-bottom: 24px; }
.sv-solution-card h3 { font-size: 22px; margin: 0 32px 12px 0; }
.sv-solution-card p { font-size: 14px; color: var(--home-body); margin: auto 16px 0 0; }
.sv-solution-card>.sv-arrow { position: absolute; right: 24px; bottom: 24px; color: var(--home-purple); opacity: .45; transition: opacity var(--home-ease), transform var(--home-ease), color var(--home-ease); }
.sv-solution-card:hover>.sv-arrow { opacity: 1; color: var(--home-red); transform: translate(2px, -2px); }
.sv-faq { padding: var(--sv-space) 0; background: var(--home-lavender); }
.sv-faq-grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: var(--sv-gap); }
.sv-faq-grid>div>p:not(.pnx-eyebrow) { font-size: 16px; margin-bottom: 16px; }
.sv-faq-item { border-bottom: 1px solid var(--home-line); }
.sv-faq-item:first-child { border-top: 1px solid var(--home-line); }
.sv-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 19px; color: var(--home-purple); font-weight: 700; list-style: none; cursor: pointer; }
.sv-faq-item summary::-webkit-details-marker { display: none; }
.sv-faq-item summary>i { flex: 0 0 auto; font-size: 22px; font-weight: 400; transition: transform var(--home-ease); }
.sv-faq-item[open] summary>i { transform: rotate(45deg); color: #d50f0f; }
.sv-faq-item>p { font-size: 17px; line-height: 1.7; margin: 0; padding: 0 40px 22px 0; }
.sv-contact { padding: var(--sv-space) 0; }
.sv-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(28px,4vw,64px); background: var(--home-purple); border-radius: var(--sv-radius); }
.sv-contact-panel h2 { color: var(--home-white); }
.sv-contact-panel>div>p:last-child { font-size: 18px; line-height: 1.75; color: var(--home-on-dark); max-width: 55ch; margin: 0; }
.sv-contact-panel>.pnx-btn { flex-shrink: 0; }
@media (min-width:1600px) { .sv-hero-media { height: 650px; } }
@media (max-width:1199.98px) {
 .sv-hero h1 { font-size: 45px; }
 .sv-hero-grid { gap: 32px; } .sv-hero-media { height: 560px; }
 .sv-stage-nav li>a { padding: 12px 18px; } .sv-stage-nav ol { gap: 4px; }
 .sv-lifecycle { gap: 16px; } .sv-overview-art, .sv-overview-art img { width: 100%; height: 150px; }
 .sv-stage-grid { grid-template-columns: minmax(0,3fr) minmax(0,5fr); gap: 32px; }
 .sv-service-row, .sv-list-heading { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 16px; }
 .sv-engagement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
 .sv-page { --sv-header: 76px; }
 .sv-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); }
 .sv-hero h1 { font-size: 36px; } .sv-page .sv-lead { font-size: 18px; } .sv-hero-media { height: 550px; }
 .sv-hero-foot { margin-top: 24px; } .sv-photo-caption { left: 24px; right: 24px; }
 .sv-stage-nav li>a { padding: 12px 16px; } .sv-nav-contact { display: none; } .sv-stage-nav ol { width: 100%; justify-content: space-between; }
 .sv-section-heading { grid-template-columns: 1fr; gap: 20px; }
 .sv-heritage .container>div { grid-template-columns: 1fr; gap: 20px; }
 .sv-lifecycle { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
 .sv-overview-art, .sv-overview-art img { height: 115px; }
 .sv-lifecycle h3 { font-size: 16px; } .sv-lifecycle p { font-size: 13px; }
 .sv-stage-grid { grid-template-columns: 1fr; }
 .sv-stage-intro { position: relative; top: auto; padding-right: 190px; min-height: 180px; }
 .sv-stage-visual { position: absolute; top: 0; right: 0; margin: 0; }
 .sv-stage-visual>span { display: none; }
 .sv-stage-intro>.sv-outcome { margin-top: 20px; }
 .sv-stage-intro h2 { max-width: 20ch; }
 .sv-solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .sv-contact-panel { flex-direction: column; align-items: flex-start; }
 .sv-contact-panel>.pnx-btn { align-self: flex-end; }
 .sv-faq-grid { grid-template-columns: 1fr; gap: 24px; }
 .sv-continuity { flex-direction: column; gap: 8px; }
}
@media (max-width:767.98px) {
 .sv-hero { padding-top: 16px; } .sv-hero-grid { grid-template-columns: 1fr; gap: 16px; }
 .sv-hero-copy { padding: 24px 0 8px; } .sv-hero h1 { font-size: 36px; max-width: 17ch; }
 .sv-hero-media { height: 360px; } .sv-hero-media>img { object-position: 50% 48%; }
 .sv-hero-foot { display: none; }
 .sv-actions { gap: 8px 20px; }
 .sv-lifecycle { grid-template-columns: 1fr; gap: 0; }
 .sv-lifecycle a { display: grid; grid-template-columns: 90px 1fr 24px; column-gap: 16px; padding: 16px 0; border-bottom-width: 1px; }
 .sv-overview-art { grid-row: 1 / 4; width: 90px; height: 90px; background: none; }
 .sv-overview-art img { width: 90px; height: 90px; }
 .sv-stage-index { grid-column: 2; grid-row: 1; margin: 0 0 4px; }
 .sv-stage-index>span { position: absolute; right: 4px; top: 36px; }
 .sv-lifecycle h3 { grid-column: 2; font-size: 18px; margin: 0 0 4px; }
 .sv-lifecycle p { grid-column: 2; font-size: 14px; }
 .sv-expanded-note { align-items: flex-start; font-size: 12px; }
 .sv-expanded-note>.sv-badge { flex-shrink: 0; }
 .sv-stage-nav>.container { padding-left: 8px; padding-right: 8px; }
 .sv-stage-nav ol { gap: 2px; padding: 6px 0; }
 .sv-stage-nav li { flex: 1; }
 .sv-stage-nav li>a { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 4px; font-size: 12px; min-height: 52px; }
 .sv-stage-nav li>a>span { font-size: 9px; }
 .sv-stage-intro { padding: 0; }
 .sv-stage-intro h2 { max-width: 24ch; }
 .sv-stage-visual { display: none; }
 .sv-list-heading { display: none; }
 .sv-service-list dl { border-top: 2px solid var(--home-purple); }
 .sv-service-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
 .sv-service-row dt { font-size: 18px; } .sv-service-row dd { padding-left: 28px; }
 .sv-service-row .sv-badge { display: inline-block; margin: 4px 0 0 8px; vertical-align: middle; }
 .sv-stage-cta { display: flex; justify-content: flex-end; }
 .sv-engagement-grid { gap: 12px; }
 .sv-engagement-grid article { padding: 24px 20px; }
 .sv-engagement-grid h3 { font-size: 21px; }
 .sv-solution-card { padding: 24px; } .sv-solution-card h3 { font-size: 20px; }
 .sv-contact-panel { gap: 28px; }
 .sv-contact-panel .pnx-btn { font-size: 15px; }
}
@media (max-width:479.98px) {
 .sv-engagement-grid, .sv-solution-grid { grid-template-columns: 1fr; }
 .sv-engagement-icon { margin-bottom: 20px; }
 .sv-photo-caption p { font-size: 26px; }
 .sv-contact-panel { padding: 28px 24px; }
 .sv-contact-panel>.pnx-btn { align-self: stretch; justify-content: center; }
 .sv-hero h1 { font-size: 32px; } .sv-page .sv-lead { font-size: 17px; }
}
@media (prefers-reduced-motion:reduce) {
 .sv-page *, .sv-page *::before, .sv-page *::after { transition: none !important; scroll-behavior: auto !important; }
 .sv-lifecycle a:hover img { transform: none; }
}

/* ---- pages.css ---- */
/* Photonix inner pages built in site-tools/pages/pages.mjs (About, Technology Partners, legal documents,
   page not found) and the visual tidy-up of the Contact page. Copied to assets/css/pages.css.
   Uses the home page's tokens (--home-*, .pnx-eyebrow, .pnx-btn) and type scale: h1 50px/600/1.15,
   h2 --home-h2/600/1.2, leads 18px/1.75, links 15px/700, Lato throughout. */

.pg-page { display: block; font-family: 'Lato', sans-serif; color: var(--home-body); background: var(--home-white); }
.pg-page h1, .pg-page h2, .pg-page h3 { font-family: inherit; color: var(--home-purple); }
.pg-page h1 { margin: 0 0 20px; font-size: 50px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.pg-page h2 { position: relative; margin: 0 0 20px; font-size: var(--home-h2); font-weight: 600; line-height: 1.2; }
.pg-page h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.35; }
.pg-page p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; }
.pg-page ul, .pg-page ol { margin: 0; padding: 0; list-style: none; }
.pg-page img { display: block; max-width: 100%; }
.pg-page a:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; border-radius: 4px; }
.pg-section { padding: var(--home-section-space) 0; }
.pg-tint { background: var(--home-lavender); }
.pg-band { background: var(--home-purple); }
.pg-band h2, .pg-band h3, .pg-band p { color: var(--home-white); }
.pg-band .pg-text, .pg-band .pg-heading > p { color: var(--home-on-dark); }
.pg-page .pg-text { font-size: 18px; max-width: 60ch; }
.pg-page .pg-lead { margin: 0 0 16px; font-size: 18px; line-height: 1.75; max-width: 68ch; }
.pg-page .pg-lead:last-child { margin-bottom: 0; }

/* Text link with an arrow (same as the home page's section links) */
.pg-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--home-purple); font-size: 15px; font-weight: 700; text-decoration: none; }
.pg-link i { transition: transform var(--home-ease); }
.pg-link:hover { color: var(--home-purple); text-decoration: underline; text-underline-offset: 5px; }
.pg-link:hover i { transform: translateX(4px); }
.pg-page .pnx-btn { font-size: 15px; font-weight: 700; }

/* Page header */
.pg-hero { padding: clamp(44px, 5vw, 80px) 0; background: var(--home-lavender); }
.pg-hero-copy { max-width: 860px; }
.pg-hero-photo { position: relative; background: var(--home-purple-deep) url(/assets/images/aboutUsImgs/img1.jpg) center / cover no-repeat; }
.pg-hero-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 6, 54, .92) 0%, rgba(38, 14, 105, .78) 55%, rgba(38, 14, 105, .45) 100%); }
.pg-hero-photo .container { position: relative; }
.pg-hero-photo h1 { color: var(--home-white); }
.pg-hero-photo .pg-lead { color: rgba(255, 255, 255, .9); }
.pg-hero-photo { padding: clamp(64px, 7vw, 112px) 0; }

/* Section heading: title left, supporting text right */
.pg-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--home-layout-gap); align-items: end; margin-bottom: 36px; }
.pg-heading h2 { margin: 0; }
.pg-heading > p { margin: 0; font-size: 18px; max-width: 56ch; }

/* Two columns: copy and image */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--home-layout-gap); align-items: center; }
.pg-split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--home-radius); }
.pg-split-reverse .pg-split-media { order: -1; }
.pg-split-copy .pnx-btn { margin-top: 12px; }
.pg-page .pg-list-title { margin: 20px 0 14px; font-size: 20px; font-weight: 700; color: var(--home-purple); }
.pg-page .pg-list-title.pg-on-dark { color: var(--home-white); margin-top: 0; }

/* Tick list */
.pg-checks { display: grid; gap: 10px; margin: 0 0 22px !important; }
.pg-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--home-purple); }
.pg-checks i { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--home-chip); color: var(--home-purple); font-size: 16px; }
.pg-checks.pg-on-dark li { color: var(--home-white); }
.pg-checks.pg-on-dark i { background: var(--home-glass-hover); color: var(--home-white); }
.pg-page .pg-goal { margin: 0; padding: 20px 24px; border-left: 4px solid var(--home-red); border-radius: 0 var(--home-radius) var(--home-radius) 0; background: var(--home-lavender); font-size: 18px; color: var(--home-purple); }

/* Glass tiles on the purple band */
.pg-glass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-glass-grid a { display: flex; align-items: center; gap: 16px; min-height: 88px; height: 100%; padding: 18px 20px; border: 1px solid var(--home-glass-line); border-radius: var(--home-radius); background: var(--home-glass); color: var(--home-white); font-size: 17px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background var(--home-ease), border-color var(--home-ease); }
.pg-glass-grid a:hover { background: var(--home-glass-hover); border-color: rgba(255, 255, 255, .4); color: var(--home-white); }
.pg-glass-grid a:focus-visible { outline-color: var(--home-white); }
.pg-glass-grid span { flex: 1; }
.pg-glass-grid i:first-child { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--home-glass-hover); font-size: 22px; }
.pg-glass-go { flex: 0 0 auto; font-size: 20px; opacity: .55; transition: opacity var(--home-ease), transform var(--home-ease); }
.pg-glass-grid a:hover .pg-glass-go { opacity: 1; transform: translate(2px, -2px); }
.pg-page .pg-quote { margin: 32px 0 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--home-red); max-width: 76ch; font-size: 20px; line-height: 1.6; color: var(--home-white); }

/* Cards */
.pg-cards { display: grid; gap: 20px; margin-top: 32px !important; }
.pg-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-card { padding: 28px 24px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-white); transition: transform var(--home-ease), box-shadow var(--home-ease), border-color var(--home-ease); }
.pg-card:hover { transform: translateY(-3px); border-color: var(--home-purple); box-shadow: var(--home-shadow); }
.pg-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--home-chip); color: var(--home-purple); font-size: 22px; }
.pg-page .pg-card p { margin: 0; font-size: 16px; line-height: 1.7; }

/* Numbered steps */
.pg-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px !important; counter-reset: none; }
.pg-steps li { padding: 24px 22px; border: 1px solid var(--home-line); border-top: 3px solid var(--home-purple); border-radius: 0 0 var(--home-radius) var(--home-radius); background: var(--home-white); }
.pg-step-num { display: block; margin-bottom: 14px; font-size: 30px; font-weight: 700; line-height: 1; color: var(--home-red); }
.pg-page .pg-steps h3 { margin: 0 0 8px; font-size: 20px; }
.pg-steps h3 a { color: inherit; text-decoration: none; }
.pg-steps h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pg-page .pg-steps p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.pg-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 0 !important; }
.pg-page .pg-steps-3 p { font-size: 16px; line-height: 1.7; }

/* Call-to-action band */
.pg-cta { padding: var(--home-section-space) 0; }
.pg-cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 64px); border-radius: var(--home-radius); background: var(--home-purple); }
.pg-page .pg-cta-panel h2 { color: var(--home-white); }
.pg-page .pg-cta-panel > div > p:last-child { margin: 0; max-width: 55ch; font-size: 18px; color: var(--home-on-dark); }
.pg-cta-panel > .pnx-btn { flex-shrink: 0; }

/* Technology partners */
.pg-partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pg-partner { display: flex; flex-direction: column; padding: 26px 26px 18px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-white); transition: transform var(--home-ease), box-shadow var(--home-ease), border-color var(--home-ease); }
.pg-partner:hover { transform: translateY(-3px); border-color: var(--home-purple); box-shadow: var(--home-shadow); }
.pg-partner-logo { display: flex; align-items: center; height: 72px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--home-line); box-sizing: content-box; }
.pg-partner-logo img { max-height: 56px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
.pg-page .pg-partner h3 { margin-bottom: 6px; font-size: 22px; }
.pg-page .pg-partner-rel { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #b00d18; }
.pg-page .pg-partner-line { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.pg-page .pg-partner-platforms { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.pg-partner-platforms strong { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--home-purple); }
.pg-partner .pg-link { margin-top: auto; }

/* Legal documents */
.pg-legal-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--home-layout-gap); align-items: start; }
.pg-legal-side { position: sticky; top: 124px; display: grid; gap: 20px; }
.pg-legal-nav { padding: 20px 22px; border: 1px solid var(--home-line); border-radius: var(--home-radius); background: var(--home-white); }
.pg-page .pg-side-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--home-purple); }
.pg-legal-nav a { display: block; padding: 8px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: var(--home-body); font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.pg-legal-nav a:hover { background: var(--home-lavender); color: var(--home-purple); }
.pg-legal-nav a[aria-current="page"] { border-left-color: var(--home-red); background: var(--home-lavender); color: var(--home-purple); font-weight: 700; }
.pg-legal-toc a { font-weight: 400; }
.pg-legal-body { max-width: 76ch; }
.pg-page .pg-legal-body h2 { margin: 40px 0 14px; padding-top: 28px; border-top: 1px solid var(--home-line); font-size: 26px; }
.pg-page .pg-legal-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pg-page .pg-legal-body p { font-size: 17px; line-height: 1.8; color: #334155; }
.pg-legal-body a:not(.pg-link) { color: var(--home-purple); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pg-legal-contact { margin-top: 40px; padding: 26px 28px; border-radius: var(--home-radius); background: var(--home-lavender); }
.pg-page .pg-legal-contact h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: 22px; }
.pg-page .pg-legal-contact p { margin-bottom: 8px; }

/* Page not found */
.pg-notfound .pg-hero { padding: clamp(64px, 9vw, 140px) 0; }
.pg-notfound-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 24px 0 28px !important; }

@media (max-width: 1199.98px) {
  .pg-page h1 { font-size: 45px; }
  .pg-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .pg-page h1 { font-size: 36px; }
  .pg-heading, .pg-split { grid-template-columns: minmax(0, 1fr); }
  .pg-heading { gap: 16px; align-items: start; }
  .pg-split-reverse .pg-split-media { order: 0; }
  .pg-split-media img { aspect-ratio: 16 / 10; }
  .pg-glass-grid, .pg-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-steps-3 { grid-template-columns: minmax(0, 1fr); }
  .pg-cta-panel { flex-direction: column; align-items: flex-start; }
  .pg-legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pg-legal-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .pg-page h1 { font-size: 32px; }
  .pg-page .pg-lead, .pg-page .pg-text, .pg-heading > p { font-size: 17px; }
  .pg-cards-4, .pg-steps, .pg-glass-grid, .pg-partner-grid, .pg-legal-side { grid-template-columns: minmax(0, 1fr); }
  .pg-page .pg-quote { font-size: 18px; }
  .pg-cta-panel .pnx-btn { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-card, .pg-partner, .pg-link i, .pg-glass-grid a, .pg-glass-go { transition: none; }
  .pg-card:hover, .pg-partner:hover { transform: none; }
}

/* ---------- Contact page (the page keeps its own form; these rules bring it in line with the rest of the site).
   The page's own styles are attribute-scoped, hence !important. ---------- */
app-contact .contact-section { padding: var(--home-section-space) 0 !important; background: var(--home-lavender) !important; font-family: 'Lato', sans-serif; }
app-contact .contact-info, app-contact .contact-form { border: 1px solid var(--home-line); border-radius: var(--home-radius) !important; box-shadow: none !important; }
app-contact .contact-form { padding: clamp(24px, 3vw, 40px) !important; }
app-contact .form-title { margin: 0 0 8px !important; text-align: left !important; font-size: var(--home-h2) !important; font-weight: 600 !important; line-height: 1.2; color: var(--home-purple) !important; }
app-contact .form-title::after { content: 'Tell us about your network or project and we will be in touch.'; display: block; margin: 12px 0 26px; font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--home-body); }
app-contact .custom-input { min-height: 50px; margin-bottom: 26px !important; padding: 12px 14px !important; border: 1px solid #8d83b3 !important; border-radius: 10px !important; font-size: 16px; color: #1f1b2e; }
app-contact .custom-input::placeholder { color: #5b6477; opacity: 1; }
app-contact .custom-input:focus { border-color: var(--home-purple) !important; box-shadow: 0 0 0 3px rgba(38, 14, 105, .18) !important; outline: 0; }
app-contact textarea.custom-input { min-height: 140px; resize: vertical; }
app-contact :is(.formCol, .addForm) small { top: auto !important; bottom: 5px; left: 14px; font-size: 13px !important; font-weight: 600; color: #b00d18 !important; }
app-contact .button-wrapper { text-align: left !important; }
app-contact .submit-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 30px !important; border-radius: 50px !important; background: var(--home-purple) !important; color: var(--home-white); font-size: 15px !important; font-weight: 700 !important; letter-spacing: .3px; transition: background var(--home-ease); }
app-contact .submit-btn:hover { background: var(--home-purple-deep) !important; }
app-contact .submit-btn:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; }
app-contact .submit-btn:disabled { opacity: .6; cursor: progress; }
app-contact .info-box { align-items: flex-start; gap: 16px; margin-bottom: 22px !important; }
app-contact .info-box .icons { flex: 0 0 auto; width: auto !important; padding: 0; }
app-contact .info-box .contentCon { flex: 1; width: auto; margin: 0 !important; padding: 0; }
app-contact .icon-circle { border-radius: 14px !important; background: var(--home-chip) !important; color: var(--home-purple) !important; }
app-contact .info-box h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--home-purple); }
app-contact .info-box :is(p, a) { display: block; margin: 0; font-size: 16px !important; line-height: 1.6; color: var(--home-body) !important; }
app-contact .info-box a { font-weight: 700; color: var(--home-purple) !important; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
app-contact .info-box a:focus-visible { outline: 3px solid var(--home-red); outline-offset: 3px; border-radius: 4px; }
app-contact .divider { background: var(--home-line) !important; }
app-contact .googlemap iframe { display: block; border-radius: var(--home-radius) !important; }
app-contact .popup { top: 124px !important; border-radius: 10px !important; font-weight: 700 !important; }
app-contact .success-popup { background-color: #1b7a3a !important; }
app-contact .sending-popup { background-color: var(--home-purple) !important; }
app-contact .error-popup { background-color: #b00d18 !important; }
@media (max-width: 991.98px) { app-contact .popup { top: 84px !important; } app-contact .contactleftsec { width: 100% !important; } }
@media (max-width: 575.98px) { app-contact .contact-info { margin: 0 !important; } app-contact .formCol { width: 100% !important; } }

/* Retagged headings: step numbers that used to be <h1> are now <b>, laid out as the headings were. */
:where(app-solutions-one, app-solutions-two, app-solutions-three, app-solutions-four, app-solutions-five, app-solutions-six) b {
  display: block; margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; }

/* Product cards: the "View More" link fills its pill, so the whole pill is the click target (was 16px high). */
app-products-page .productsContent b { padding: 0 !important; }
app-products-page .productsContent b a { display: inline-block; padding: 4px 18px; }
@media (max-width: 991px) { app-products-page .productsContent b a { padding: 3px 12px; } }

/* Link wrappers that used to be <button> (a control inside a control): laid out as the buttons were. */
:where(app-networks, app-products-page) b { display: inline-block; font-weight: 400; text-align: center; }

.pg-page .pg-partner-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 28px 0 0; font-size: 17px; }