/* Prodocom 2026 design system.
   Values measured from demoprodo/site/Prodocom Home.dc.html.
   Namespaced .p-* to avoid collisions with Bootstrap 4 and the legacy newsite.css. */

:root {
  --p-orange: #e77d20;
  --p-orange-hover: #cf6c14;
  --p-ink: #1b2c38;
  --p-blue: #1d7eb3;
  --p-navy: #1b3e5d;
  --p-navy-deep: #0b2236;
  --p-body: #5d6b76;      /* dominant body colour, 15 hits in the source */
  --p-body-alt: #4a5b66;  /* section leads, 5 hits */
  --p-body-2: #3f5563;    /* secondary text, 8 hits */
  --p-surface: #fbfaf7;
  --p-surface-2: #ece8e1;
  --p-border: #e0d8ca;
  --p-success: #7fd0a0;
  --p-hairline: rgba(27, 62, 93, 0.1);
  --p-font-ui: 'Geist', system-ui, sans-serif;
  --p-font-display: 'Ranade', Georgia, serif;
}

/* Page background: one full-page gradient on body, not a hero block. */
body.p-page {
  background-color: #e8eff7;
  background-image: linear-gradient(180deg, #0b2236 0%, #123a59 12%, #1d6191 26%,
    #4f97c4 42%, #a9cfe6 58%, #d7e6f2 74%, #e8eff7 100%);
  background-repeat: no-repeat;
  background-size: 100% 1500px;
  min-height: 100vh;
  font-family: var(--p-font-ui);
  color: var(--p-body);
}

.p-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Signature: stacked frosted panels, each overlapping the one above. */
.p-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  padding: 5.5rem 0;
  border-radius: 44px 44px 0 0;
  margin-top: -30px;
  box-shadow: 0 -16px 40px rgba(27, 62, 93, 0.05);
}

.p-panel--warm {
  background: linear-gradient(180deg, rgba(249, 245, 238, 0.46), rgba(243, 238, 227, 0.46));
  backdrop-filter: blur(22px) saturate(1.12);
}

.p-panel--navy {
  background: linear-gradient(155deg, rgba(9, 26, 44, 0.9), rgba(16, 52, 80, 0.85) 55%,
    rgba(27, 92, 142, 0.82));
  backdrop-filter: none;
}

.p-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-orange);
}

.p-h1 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.8vw, 4.2rem);
  color: var(--p-ink);
  text-wrap: balance;
}

.p-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--p-ink);
  text-wrap: balance;
}

.p-card {
  background: #fff;
  border: 1px solid var(--p-hairline);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(27, 62, 93, 0.08);
  transition: transform 0.18s, box-shadow 0.18s;
}

.p-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(27, 62, 93, 0.12);
}

/* Buttons are .p-btn-*, never .btn-primary — that collides with Bootstrap. */
.p-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.5rem;
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.18s, transform 0.18s;
}

.p-btn--orange { background: var(--p-orange); color: #fff; }
.p-btn--orange:hover { background: var(--p-orange-hover); transform: translateY(-1px); color: #fff; }
.p-btn--ghost { background: transparent; color: var(--p-ink); border: 1.5px solid var(--p-hairline); }
.p-btn--ghost:hover { border-color: var(--p-ink); }

/* Large CTA size from the .dc hero/CTA buttons. Already referenced by every
   migrated page's "Start for free" button; defined here so it takes effect. */
.p-btn-lg { font-size: 1rem; padding: 0.95rem 1.8rem; border-radius: 11px; }

/* default.php's `a:link, a:hover, a:active, a:visited {color:#3366bb}` outranks a lone
   class selector on anchor buttons, so each variant's text colour is restated at
   link-state specificity. */
.p-btn--orange:link, .p-btn--orange:visited, .p-btn--orange:active,
.p-btn--navy:link, .p-btn--navy:visited, .p-btn--navy:active,
.p-btn--ghost-navy:link, .p-btn--ghost-navy:visited, .p-btn--ghost-navy:active { color: #fff; }
.p-btn--ghost:link, .p-btn--ghost:visited, .p-btn--ghost:active,
.p-btn--outline:link, .p-btn--outline:visited, .p-btn--outline:active { color: var(--p-ink); }

/* ---------- nav ----------
   Geometry measured from the .dc source: max-width 1600px, height 80px.
   The nav is transparent over the dark top of the body gradient and turns
   frosted white once scrolled. It is only ever rendered on p-page bodies
   (see the $prodo2026Sections gate in header.php), which is what guarantees
   there is a dark gradient behind the white links. */
.p-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}

.p-nav[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--p-hairline);
}

.p-nav-in {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.p-nav-brand { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
/* No `display` here: the -w/-c swap rules below set it. A shared `display:block`
   would out-specify `.p-nav-logo-c { display:none }` and render both logos at once. */
/* Scoped to the logo anchor, not the whole brand block: `.p-nav-brand img` also
   matched .p-nav-badge and out-specified it (0,1,1 beats 0,1,0), pinning the badge
   to 26px. */
.p-nav-logo img { height: 26px; width: auto; }

/* Two-image logo swap, as the source does: white over the dark gradient, colour
   once the nav goes frosted. */
.p-nav-logo-w { display: block; }
.p-nav-logo-c { display: none; }
.p-nav[data-scrolled="true"] .p-nav-logo-w { display: none; }
.p-nav[data-scrolled="true"] .p-nav-logo-c { display: block; }

/* Fallback for before logo-white.png is uploaded to the server images dir. The
   onerror handler tags the anchor, and the colour logo is inverted to white
   instead. Delete this block once the asset is confirmed live. */
.p-nav-logo--nowhite .p-nav-logo-c { display: block; filter: brightness(0) invert(1); transition: filter 0.25s; }
.p-nav[data-scrolled="true"] .p-nav-logo--nowhite .p-nav-logo-c { filter: none; }

.p-nav-divider { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.28); transition: background 0.25s; }
.p-nav[data-scrolled="true"] .p-nav-divider { background: rgba(27, 62, 93, 0.18); }

.p-nav-badge { height: 48px; width: 48px; display: block; flex-shrink: 0; }

.p-nav-links {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* flex:1 + centre, matching the old nav (.nav-links), so the links sit in the
     middle and leave the right side clear for the fixed login panel (top:40px
     right:0). Right-aligned links would sit under it. */
  flex: 1;
  justify-content: center;
}

.p-nav-links a {
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  transition: color 0.2s;
}

/* css/default.php loads after this file and its a:link/a:visited (0,1,1) outranks
   the base rule above at rest, painting the links #3366bb - the same collision the
   buttons had. Shielded here, before :hover/.active/scrolled so those still win. */
.p-nav-links a:link,
.p-nav-links a:visited { color: rgba(255, 255, 255, 0.82); }

.p-nav-links a:hover { color: #ffffff; }
.p-nav-links a.active { color: #ffffff; font-weight: 600; }

/* #52636e is the source's scrolled link colour. It occurs once, so it stays a
   nav-local value rather than a palette token. */
.p-nav[data-scrolled="true"] .p-nav-links a { color: #52636e; }
.p-nav[data-scrolled="true"] .p-nav-links a:hover { color: var(--p-ink); }
.p-nav[data-scrolled="true"] .p-nav-links a.active { color: var(--p-blue); }

/* The demo's nav Login button is deliberately not implemented. This site's login is
   an existing fixed panel (#user_login) that already occupies the same corner at a
   higher z-index, and there is no /login route. Its styling belongs with the panel
   in task 4, not here. */

.p-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.p-nav-toggle span { display: block; width: 24px; height: 2px; background: #ffffff; border-radius: 2px; }
.p-nav[data-scrolled="true"] .p-nav-toggle span { background: var(--p-ink); }

@media (max-width: 980px) {
  .p-nav-in { height: 64px; padding: 0 1.25rem; }
  .p-nav-toggle { display: flex; }
  .p-nav-badge { display: none; }

  /* footer.php toggles .open on #navLinks. That contract is kept from the
     previous nav so the existing mobile-menu JS keeps working untouched. */
  .p-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--p-hairline);
    box-shadow: 0 14px 30px rgba(27, 62, 93, 0.1);
    padding: 0.6rem 2rem 1.4rem;
    flex-direction: column;
    align-items: stretch;
  }

  .p-nav-links.open { display: flex; }

  .p-nav-links a,
  .p-nav[data-scrolled="true"] .p-nav-links a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--p-ink);
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid rgba(27, 62, 93, 0.08);
  }

  /* Re-shield for the white dropdown: outranks both default.php's a:link and the
     desktop shield above (same specificity, later in file). The scrolled variants
     out-specify the desktop scrolled rule; .active below still wins by order. */
  .p-nav-links a:link,
  .p-nav-links a:visited,
  .p-nav[data-scrolled="true"] .p-nav-links a:link,
  .p-nav[data-scrolled="true"] .p-nav-links a:visited { color: var(--p-ink); }

  .p-nav-links a.active,
  .p-nav[data-scrolled="true"] .p-nav-links a.active { color: var(--p-blue); }
}

/* ---------- sky ----------
   The .dc source's fixed data-sky layer: full-viewport atmosphere behind every
   section - three blurred colour blooms plus the drifting-dot canvas drawn by the
   inline script in home.php. z-index 0 plus earliest-in-DOM keeps it under the
   hero (z-index 1), the frosted panels and the nav; the panels' backdrop blur
   softens the dots behind them, same as the demo. */
.p-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.p-sky canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-sky-bloom {
  position: absolute;
  border-radius: 50%;
}

.p-sky-bloom--a {
  right: -14%;
  top: -14%;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle, rgba(231, 125, 32, 0.4), rgba(231, 125, 32, 0) 62%);
  filter: blur(24px);
  animation: p-bloomA 28s ease-in-out infinite;
}

.p-sky-bloom--b {
  left: -18%;
  top: 22%;
  width: 54vw;
  height: 54vw;
  background: radial-gradient(circle, rgba(45, 111, 219, 0.3), rgba(45, 111, 219, 0) 62%);
  filter: blur(26px);
  animation: p-bloomB 34s ease-in-out infinite;
}

.p-sky-bloom--c {
  left: 16%;
  bottom: -18%;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgba(202, 208, 216, 0.3), rgba(202, 208, 216, 0) 64%);
  filter: blur(24px);
  animation: p-bloomA 31s ease-in-out infinite reverse;
}

@keyframes p-bloomA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 5%) scale(1.13); }
}

@keyframes p-bloomB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, -4%) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .p-sky-bloom { animation: none; }
}

/* ---------- hero ----------
   Measured from the .dc source. The dark backdrop is the body gradient from
   body.p-page, not a background on the hero itself. */
@keyframes p-emailPop {
  from { transform: translateY(26px) scale(.965); }
  to   { transform: none; }
}

.p-hero { position: relative; z-index: 1; overflow: hidden; }

/* Interactive constellation canvas, confined to the hero. Behind .p-hero-in
   (z-index 2); drawn by the inline script in home.php. */
.p-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Uluru horizon along the hero's bottom edge, between the constellation and
   the content. Positions are the .dc source's. */
.p-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* One photograph, anchored to the hero's bottom edge. Its sky is transparent, so
   the page gradient reads as the sky above the horizon. */
.p-uluru-landscape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.p-hero-in {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2.5rem 2.5rem 5rem;
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Transform-only pop, never opacity. The source learned this the hard way: an
   opacity-gated animation leaves the card invisible if the timeline is throttled. */
.p-hero-card {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
  animation: p-emailPop .8s cubic-bezier(.2, .85, .25, 1.15) both;
}

/* Radial scrim so the white text stays legible over the gradient. */
.p-hero-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 115%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(8, 24, 40, .55) 0%, rgba(8, 24, 40, .32) 45%, transparent 75%);
}

.p-hero-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 1.07rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.p-hero-h1 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.8vw, 4.2rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #ffffff;
  margin: 1.4rem auto 0;
  white-space: nowrap; /* with the vw-based clamp this scales to fit rather than wrapping */
  text-shadow: 0 1px 2px rgba(6, 18, 32, .5), 0 4px 22px rgba(6, 18, 32, .45);
}

.p-hero-sub {
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #dbeaf3;
  margin: 1.6rem 0 0;
}

/* Rotating phrase in the sub-headline. home.php swaps its text on a timer and
   crossfades it; the transition duration here must match that script's FADE.

   The box is sized by __sizer, a copy of the longest phrase left in the markup and
   hidden with visibility. Both children share grid cell 1/1, so the box is always
   as wide as the longest phrase and the live text overlays it. That keeps the line's
   total width constant, so the white lead-in does not move as the phrase changes.

   Sized in CSS rather than by measuring in JS on purpose: a measured min-width has
   to be re-taken when the webfont applies, and every font-loading event fires too
   early to catch it - document.fonts.ready resolved at 1ms and fonts.load() before
   layout adopted the face, leaving min-width 9.5px short and the line jumping on the
   longest phrase. A sizer in the DOM reflows with the font by itself.

   justify-self:start matters: the hero centres its text, so a stretched child would
   centre each phrase in the reserved width and open a gap after "that".

   Do not add height or overflow. The first version of this was an inline-block
   window clipping a stack of phrases, and overflow:hidden is what broke the
   alignment: CSS 2.1 10.8.1 aligns a clipping box by its bottom margin edge instead
   of its baseline, which sat the orange text ~1.4px high. */
.p-reel {
  display: inline-grid;
  color: var(--p-orange);
  font-weight: 700;
}

.p-reel > span {
  grid-area: 1 / 1;
  justify-self: start;
}

.p-reel__live { transition: opacity .28s ease; }

/* Keep this in sync with the longest entry in home.php's PHRASES. */
.p-reel__sizer { visibility: hidden; }

.p-hero-cta { margin: 1.9rem auto 0; }

.p-hero-trust {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: .86rem;
  color: rgba(255, 255, 255, .7);
  margin-top: 1.9rem;
}

.p-hero-trust .p-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--p-orange); }

/* ---------- client logo marquee ---------- */
@keyframes p-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Solid white rather than the frosted panel default, so the logo band reads as a
   clean break under the hero. Backdrop blur is dropped - nothing shows through. */
.p-logos {
  padding: 3.4rem 0 2.6rem;
  margin-top: 0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.p-logos-label {
  text-align: center;
  font-family: var(--p-font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-navy);
  margin-bottom: 1.9rem;
}

.p-logos-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.p-logos-track {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 7vw, 5rem);
  width: max-content;
  animation: p-marquee 40s linear infinite;
}

.p-logos-track img { height: 41px; width: auto; display: block; opacity: .9; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .p-hero-card { animation: none; }
  .p-logos-track { animation: none; }
}

@media (max-width: 600px) {
  .p-hero-in { padding: 2rem 1.25rem 3.5rem; min-height: auto; }
  .p-hero-eyebrow { font-size: .8rem; letter-spacing: .14em; }
}

/* ---------- section headings ---------- */
.p-eyebrow--blue { color: var(--p-blue); }

.p-sec-head { max-width: 780px; }
.p-sec-head h2 { margin: 1.1rem 0 0; }
.p-sec-lead {
  font-family: var(--p-font-ui);
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--p-body-alt);
  margin: 1.4rem 0 0;
  max-width: 32rem;
}

/* ---------- service cards ---------- */
.p-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 3.4rem;
}

.p-service {
  display: block;
  background: #fff;
  border: 1px solid var(--p-hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(27, 62, 93, .06);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
}

.p-service:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(27, 62, 93, .1); }
.p-service-media { padding: 1.1rem 1.1rem 0; }
/* Only the image wrapper, not the mock. Targeting every child div would out-specify
   .p-service-mock's dark background and paint it beige with its white text invisible. */
.p-service-media > div:not(.p-service-mock) {
  border-radius: 12px;
  overflow: hidden;
  min-height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-surface-2);
}
.p-service-media img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
/* Cards 5-6 have no photo in the source; they are small dark UI mockups. */
.p-service-mock {
  width: 100%;
  background: #0f2c44;
  border-radius: 12px;
  padding: 14px;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.p-mock-row, .p-mock-step {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .5rem .6rem;
}
.p-mock-ico {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
}
.p-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-mock-name { font-family: var(--p-font-ui); font-size: .72rem; color: #fff; font-weight: 600; }
.p-mock-meta { font-family: var(--p-font-ui); font-size: .62rem; color: rgba(255, 255, 255, .5); }
.p-mock-note { font-family: var(--p-font-ui); font-size: .62rem; color: rgba(255, 255, 255, .5); padding-left: .2rem; }
.p-mock-tag { font-family: var(--p-font-ui); font-size: .58rem; font-weight: 700; text-transform: uppercase; margin-left: auto; }
.p-mock-tag--ok { color: var(--p-success); }
.p-mock-tag--live { color: rgba(255, 255, 255, .4); }
.p-mock-num {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--p-font-display); font-weight: 700; font-size: .62rem;
}
.p-mock-num--ok { background: rgba(127, 208, 160, .2); color: var(--p-success); }
.p-mock-num--live { background: rgba(231, 125, 32, .2); color: var(--p-orange); }
.p-mock-step-t { font-family: var(--p-font-ui); font-size: .7rem; color: #fff; font-weight: 600; }

.p-service-body { padding: 1.05rem 1.3rem 1.4rem; }
.p-service-title {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  color: var(--p-ink);
  margin-bottom: .35rem;
}
.p-service-desc { font-family: var(--p-font-ui); font-size: .92rem; line-height: 1.5; color: var(--p-body); }

/* ---------- full-bleed pay strip ---------- */
.p-strip-wrap { padding: 1rem 0 5rem; background: rgba(255, 255, 255, .42); }
.p-strip {
  background: var(--p-navy);
  padding: 2.3rem max(2.5rem, calc((100vw - 1520px) / 2));
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  box-shadow: 0 24px 60px rgba(27, 62, 93, .18);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.p-strip-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--p-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(231, 125, 32, .35);
}
.p-strip-title {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.1;
}
.p-strip-sub {
  font-family: var(--p-font-ui);
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  margin-top: .45rem;
  max-width: 46rem;
}

/* ---------- CRM ---------- */
.p-crm { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.p-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.p-chip {
  font-family: var(--p-font-ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--p-navy);
  background: rgba(29, 126, 179, .09);
  border: 1px solid rgba(29, 126, 179, .18);
  border-radius: 999px;
  padding: .42rem .85rem;
}
/* Hub-and-spoke CRM cluster (the .dc data-cluster): dashed spokes animate
   toward the hub, chips float around it. Per-item coordinates and timings are
   inline in the markup; only the shared presentation lives here. */
@keyframes p-flow { to { stroke-dashoffset: -16; } }
@keyframes p-floaty {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 7px)); }
}
@keyframes p-hubpulse {
  0% { transform: translate(-50%, -50%) scale(0.65); opacity: 0.55; }
  70% { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.p-crm-cluster { position: relative; height: 480px; }
.p-crm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-crm-lines line {
  stroke: url(#crmline);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  animation: p-flow linear infinite;
}

.p-crm-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.p-crm-pulse {
  position: absolute;
  left: 50%;
  top: 35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid rgba(29, 126, 179, 0.55);
  pointer-events: none;
  animation: p-hubpulse 2.6s ease-out infinite;
}
.p-crm-pulse--alt { border-color: rgba(231, 125, 32, 0.45); animation-delay: 1.3s; }
.p-crm-hub-ico {
  width: 70px;
  height: 70px;
  border-radius: 21px;
  background: linear-gradient(150deg, #2a8fc4, #15567f);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(21, 86, 127, 0.42), 0 0 0 6px rgba(255, 255, 255, 0.7);
}
.p-crm-hub-label {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--p-ink);
  background: #fff;
  border: 1px solid var(--p-hairline);
  box-shadow: 0 6px 16px rgba(27, 62, 93, 0.1);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
}

.p-crm-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid var(--p-hairline);
  box-shadow: 0 8px 22px rgba(27, 62, 93, 0.1);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--p-ink);
  white-space: nowrap;
  animation: p-floaty ease-in-out infinite;
}
.p-crm-chip .p-dot-brand { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 980px) {
  .p-crm { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
  .p-crm-chip { font-size: 0.66rem; padding: 0.32rem 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .p-crm-lines line, .p-crm-chip, .p-crm-pulse { animation: none; }
}

/* ---------- myths ---------- */
/* Honest-bit top grid (source data-myths-top): heading spans both columns,
   intro paragraph left, the "Up to 80%" stat card right. One column at 900px
   with the card centred, like the source's [data-honest-card] override. */
.p-honest-top {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  grid-template-areas: 'head head' 'intro card';
  column-gap: 3.5rem;
  row-gap: 1.4rem;
}
.p-honest-head { grid-area: head; }
.p-honest-head .p-h2 { max-width: 13ch; }
.p-honest-intro {
  grid-area: intro;
  align-self: start;
  font-family: var(--p-font-ui);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--p-body-alt);
  margin: 0;
  max-width: 30rem;
}
.p-honest-card {
  grid-area: card;
  justify-self: start;
  align-self: start;
  margin-top: .6rem;
  width: 100%;
  max-width: 290px;
  background: #fff;
  border: 1px solid rgba(29, 126, 179, .18);
  border-radius: 16px;
  padding: .85rem 1.1rem;
  box-shadow: 0 10px 28px rgba(27, 62, 93, .08);
}
.p-honest-card-top { display: flex; align-items: baseline; gap: .55rem; }
.p-honest-upto {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--p-orange);
}
.p-honest-stat {
  font-family: var(--p-font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--p-orange);
}
.p-honest-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: .54rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-orange);
  border: 1.5px solid var(--p-orange);
  border-radius: 999px;
  padding: .16rem .48rem;
  margin-left: auto;
  white-space: nowrap;
}
.p-honest-card p { font-family: var(--p-font-ui); font-size: .83rem; line-height: 1.45; color: var(--p-body-2); margin: .45rem 0 0; }
.p-honest-card p + p { margin-top: .7rem; }

@media (max-width: 900px) {
  .p-honest-top { grid-template-columns: 1fr; grid-template-areas: 'head' 'intro' 'card'; gap: 2.2rem; }
  .p-honest-card { justify-self: center; max-width: 30rem; }
}

/* Myth cards: still native <details> for keyboard/screen-reader access, but
   with the source's chrome - Myth stamp, blue chevron, dashed divider and
   "The truth" kicker. */
.p-myths { margin-top: 2.6rem; display: flex; flex-direction: column; gap: .9rem; }
.p-myth {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, .12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(27, 62, 93, .05);
}
.p-myth-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: left;
  cursor: pointer;
  padding: 1.3rem 1.5rem;
  list-style: none;
}
.p-myth-q::-webkit-details-marker { display: none; }
.p-myth-stamp {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-orange);
  border: 1.5px solid var(--p-orange);
  border-radius: 6px;
  padding: .22rem .55rem;
}
.p-myth-chev { margin-left: auto; color: var(--p-blue); font-size: 1rem; line-height: 1; transition: transform .2s; }
.p-myth[open] .p-myth-chev { transform: rotate(180deg); }
.p-myth-title {
  flex-basis: 100%;
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  color: var(--p-ink);
  margin-top: .75rem;
}
.p-myth-a { margin: 0 1.5rem; border-top: 1px dashed rgba(27, 62, 93, .22); padding: 1.1rem 0 1.3rem; }
.p-myth-a p { font-family: var(--p-font-ui); font-size: 1rem; line-height: 1.6; color: var(--p-body-2); margin: 0 0 .9rem; }
.p-myth-a p:last-child { margin-bottom: 0; }
.p-myth-truth,
.p-myth-help {
  font-family: var(--p-font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.p-myth-truth { color: #b5490f; }
.p-myth-help { color: var(--p-blue); margin-top: 1rem; }

/* ---------- navy band ---------- */
.p-band { padding: 6rem 0; }
.p-band .p-eyebrow { color: #8fd0f5; }
.p-band h2 { color: #fff; }
.p-band p { font-family: var(--p-font-ui); font-size: 1.12rem; line-height: 1.65; color: rgba(255, 255, 255, .72); margin: 1.4rem 0 0; max-width: 40rem; }
/* Image left, copy right - column ratio and gap are the .dc source's data-whyb grid. */
.p-band-split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 3.8rem; align-items: center; }
.p-band-media {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(27, 62, 93, .2);
  aspect-ratio: 4 / 5;
  background: #cdd9e2;
}
.p-band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* This heading has its own scale in the source - deliberately larger than the
   .p-h2 the surrounding sections use - and drops to an orange second line. */
.p-band-split h2 {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  max-width: 13ch;
}
.p-band-kicker {
  display: inline-block;
  color: var(--p-orange);
  font-size: .5em;
  letter-spacing: .01em;
  margin-top: .5rem;
}
.p-band-split p { font-size: 1.14rem; color: rgba(236, 245, 251, .82); max-width: 34rem; }

/* ---------- industries ---------- */
.p-industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 3rem; }
.p-industry { background: #fff; border: 1px solid var(--p-hairline); border-radius: 16px; padding: 1.6rem; box-shadow: 0 14px 40px rgba(27, 62, 93, .06); }
.p-industry-ico {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(29, 126, 179, .1);
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  color: var(--p-blue);
}
.p-industry-ico--orange { background: rgba(231, 125, 32, .12); color: var(--p-orange); }
.p-industry h3 { font-family: var(--p-font-display); font-weight: 600; font-size: 1.15rem; color: var(--p-ink); margin: 0 0 .5rem; }
.p-industry p { font-family: var(--p-font-ui); font-size: .92rem; line-height: 1.55; color: var(--p-body); margin: 0; }

/* ---------- testimonials ---------- */
.p-sec-head--center { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.p-sec-head--center .p-sec-lead { margin-left: auto; margin-right: auto; }

.p-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.p-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 1px solid var(--p-hairline);
  border-radius: 18px;
  padding: 1.9rem 1.9rem 1.7rem;
  box-shadow: 0 14px 40px rgba(27, 62, 93, .06);
}
.p-quote-stars { display: flex; gap: 2px; margin-bottom: 1.1rem; color: var(--p-orange); }
.p-quote-stars svg { display: block; }
/* The border, shadow, white background and padding undo css/default.php's global
   blockquote rule, which loads after this file. A class beats a bare element
   selector, so the reset needs no !important - it just has to be declared. */
.p-quote-text {
  flex: 1;
  font-family: var(--p-font-ui);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--p-body-2);
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.p-quote-by { display: flex; align-items: center; gap: .75rem; }
.p-quote-av {
  display: flex;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
/* One flat colour per reviewer, as in the source. */
.p-quote-av--blue { background: var(--p-blue); }
.p-quote-av--purple { background: #8e44ad; }
.p-quote-av--green { background: #1f8a5b; }
.p-quote-name { display: block; font-family: var(--p-font-display); font-weight: 600; font-size: 1rem; color: var(--p-ink); }
.p-quote-src { display: block; font-family: var(--p-font-ui); font-size: .8rem; color: #8a99a4; }

/* ---------- final CTA ---------- */
.p-final { text-align: center; }
.p-final h2 { margin: 1rem auto 0; }
.p-final p { font-family: var(--p-font-ui); font-size: 1.12rem; line-height: 1.65; color: var(--p-body-alt); margin: 1.3rem auto 0; max-width: 40rem; }
.p-final-ctas { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

@media (max-width: 980px) {
  .p-services, .p-industries { grid-template-columns: repeat(2, 1fr); }
  .p-crm { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Three quotes never split evenly two-up, so they go straight to one column. */
  .p-quotes { grid-template-columns: 1fr; }
  .p-band-split { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Stacked, the 4:5 portrait would eat the fold, so it caps and centres. */
  .p-band-media { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .p-services, .p-industries { grid-template-columns: 1fr; }
  .p-band { padding: 3.5rem 0; }
}

/* ---------- footer ----------
   Measured from the .dc source: background #0b2236, max-width 1600px,
   grid 1.7fr 1fr 1.1fr 1.2fr, padding 4.5rem 0 2rem. */
.p-footer {
  position: relative;
  z-index: 1;
  background: var(--p-navy-deep);
  padding: 4.5rem 0 2rem;
}

.p-footer-in { max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; }

/* Four columns again with the Help & guides column - the .dc footgrid ratios. */
.p-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 3.2rem;
}

.p-footer-logo { height: 30px; width: auto; display: block; }

.p-footer-blurb {
  font-family: var(--p-font-ui);
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  margin: 1.2rem 0 0;
  max-width: 25rem;
}

.p-footer-badge { width: 96px; height: 96px; display: block; flex-shrink: 0; margin-top: 1.5rem; }

.p-footer h5 {
  font-family: var(--p-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 1.1rem;
}

.p-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.p-footer-col a {
  font-family: var(--p-font-ui);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 0.15s;
}

/* Shield against css/default.php's later a:link/a:visited rule, like the nav
   and buttons; placed before :hover so hover still wins. */
.p-footer-col a:link,
.p-footer-col a:visited { color: rgba(255, 255, 255, 0.58); }

.p-footer-col a:hover { color: #ffffff; }

.p-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.p-footer-bottom p {
  font-family: var(--p-font-ui);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

.p-footer-legal { display: flex; gap: 1.4rem; }

.p-footer-legal a {
  font-family: var(--p-font-ui);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.15s;
}

.p-footer-legal a:link,
.p-footer-legal a:visited { color: rgba(255, 255, 255, 0.38); }

.p-footer-legal a:hover { color: #ffffff; }

@media (max-width: 980px) { .p-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .p-footer-grid { grid-template-columns: 1fr; }
  .p-footer-in { padding: 0 1.25rem; }
}

/* ---------- login panel ----------
   #user_login is an existing fixed panel (css/default.php:238, top:40px right:0
   z-index:1900). It is deliberately left untouched so the home login looks and
   behaves exactly like the un-migrated pages (products, solutions) - the agreed
   reference. No reposition, no restyle. Instead the nav (below) keeps its right
   side clear so the panel sits in the header top-right, as it does on products,
   rather than floating over the content.
   css/default.php is shared and must not be edited; the form markup and ids are
   untouched - js/login.php and js/forms.php depend on them. */

@media (prefers-reduced-motion: reduce) {
  .p-card, .p-btn { transition: none; }
  .p-card:hover, .p-btn--orange:hover { transform: none; }
  .p-nav, .p-nav-logo img, .p-nav-divider { transition: none; }
  .p-footer-col a, .p-footer-legal a { transition: none; }
}

@media (max-width: 600px) {
  .p-wrap { padding: 0 1.25rem; }
  .p-panel { padding: 3.5rem 0; border-radius: 28px 28px 0 0; }
}

/* ==================== about page ====================
   Measured from About.dc.html. The about page does not use the frosted-panel
   stack: after its shorter, grey-toned gradient fades out, sections sit
   directly on the light background. Its dot field comes from js/atmosphere-grey.js
   (self-injecting), not from the home sky layer. */

/* Shared inner-page gradient: every migrated non-home page gets p-page--inner
   from header.php. Pages needing a different backdrop (solutions) override it
   with their own body class further down. */
body.p-page--inner {
  background-color: #f6f7f7;
  background-image: linear-gradient(180deg, #0b2236 0%, #0f3152 16%, #1d6191 36%,
    #c3c6c8 56%, #e6e8e8 76%, #f6f7f7 100%);
  background-size: 100% 780px;
}

/* ---------- about hero ----------
   Owns its backdrop rather than borrowing the body.p-page--inner gradient, for
   the same reason .p-arthero does: that gradient reaches light grey at 437px,
   and hero copy runs well past it once the headline wraps. On a 390px screen it
   always wraps, so the standfirst was painted white-on-near-white - measured
   1.04:1 on /products/mms, i.e. invisible. Owning the band puts every inner hero
   at 5.9:1 or better regardless of headline length.
   Pulled up under the 81px sticky nav (80px bar + 1px border) and padded back
   down, so the band runs unbroken from the top of the page. The nav's z-index 50
   keeps it above this. */
.p-abhero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: -81px;
  padding-top: 81px;
  background: linear-gradient(180deg, #0b2236 0%, #123a59 45%, #17527d 75%, #1d6191 100%);
}

.p-abhero-stars {
  position: absolute;
  top: 8%;
  right: 5%;
  width: min(200px, 24vw);
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

.p-abhero-stars svg { width: 100%; height: auto; display: block; }

/* Slim bottom padding: the dark band must end just under the hero copy so the
   timeline script can rest the first card 55-70px below the text while still
   clearing the band (it floors the card 10px under the hero's bottom edge). */
.p-abhero-in {
  max-width: 1600px;
  margin: 0 auto;
  padding: 5rem 2.5rem 0.5rem;
  position: relative;
  z-index: 2;
}

/* About only: line the hero copy up with the timeline carousel underneath it.
   The shared hero container is 1600px + a 2.5rem gutter, while .p-ht-card is
   min(1040px, 84vw) centred in the viewport - so the headline started well left
   of the first card. Repeating the card's own width here puts both left edges on
   the same axis at every desktop width. Below 901px the carousel is hidden and
   the vertical spine (.p-vt-in) takes over at the shared 1600px width, so the
   override stops there. Vertical padding is unchanged: the timeline script
   anchors the first card off the hero's bottom edge. */
@media (min-width: 901px) {
  body.p-page--about .p-abhero-in {
    /* The third term is the card's own max-width: 100% - it sits inside a track
       padded 8vw a side, so below ~1240px that clamp, not 84vw, sets its width. */
    width: min(1040px, 84vw, 100% - 16vw);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    /* Then nudged 30px further left, onto the photo's visible edge rather than
       the card box: the active card scales its image to 1.2 about its own
       centre, so a 300px image (the first beat's flex-basis) hangs 30px past
       the box on each side. Relative rather than a margin so the container
       stays auto-centred and the offset reads as what it is (the base rule
       already sets position: relative). */
    left: -30px;
  }
}

.p-abhero-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-orange);
}

/* The About page runs its eyebrows ~30% larger than the rest of the site. This
   class is the shared inner-page hero eyebrow (31 layouts), so the bump is
   scoped to body.p-page--about rather than applied to the base rule. */
body.p-page--about .p-abhero-eyebrow { font-size: 1.04rem; }

.p-abhero-h1 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 1.1rem 0 0;
  max-width: 22ch;
  text-shadow: 0 1px 2px rgba(6, 18, 32, 0.5), 0 4px 22px rgba(6, 18, 32, 0.45);
}

.p-abhero-sub {
  font-family: var(--p-font-ui);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  color: rgba(220, 235, 245, 0.82);
  margin: 1.1rem 0 0;
  max-width: 36rem;
}

/* ---------- timeline, shared card typography ---------- */
.p-tl-year {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: 0.03em;
  color: var(--p-orange);
  margin-bottom: 0.5rem;
}

.p-tl-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  margin: 0 0 0.7rem;
}

.p-tl-p {
  font-family: var(--p-font-ui);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--p-body-2);
  margin: 0;
}

.p-tl-p + .p-tl-p { margin-top: 1rem; }

/* --p-tl-scale is the resting size; the active timeline card raises it. Hover
   multiplies it rather than replacing it, so both effects compose. */
.p-tl-img {
  --p-tl-scale: 1;
  transform: scale(var(--p-tl-scale));
  transition: transform 0.6s cubic-bezier(0.25, 0.9, 0.3, 1.4);
}

.p-tl-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  box-shadow: 0 14px 34px rgba(11, 34, 54, 0.18);
}

.p-tl-img:hover { transform: rotate(-1.6deg) translateY(-5px) scale(calc(var(--p-tl-scale) * 1.015)); }
.p-tl-img--tilt-r:hover { transform: rotate(1.8deg) translateY(-5px) scale(calc(var(--p-tl-scale) * 1.015)); }

/* ---------- timeline (desktop): sticky scroll-driven track, travels vertically.
   The .p-ht- prefix predates the direction change; the track now slides on Y,
   one card per viewport. ---------- */
.p-ht { position: relative; z-index: 1; }

/* Pulled up under the hero: the layout script anchors the first beat's top
   edge 55-70px below the hero sub line, and that anchor point must fall inside
   this (overflow: hidden) sticky view - so the pull must stay comfortably
   larger than the hero's bottom padding plus the 70px max gap. */
.p-ht-wrap { position: relative; height: 220vh; margin-top: -9rem; }

.p-ht-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.p-ht-view {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Vertical padding stays 0 and the gap stays 0: card height alone drives the
   travel distance, so translateY steps land exactly one card at a time. */
.p-ht-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 0 8vw;
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* Slot height sets the gap between beats. 40% of the viewport keeps them close,
   with a 430px floor so the text-heavy "Now" card still fits (its body is
   capped to the slot and clipped, so a lower floor loses text), and a 100%
   ceiling so a card never outgrows the viewport. */
.p-ht-card {
  flex: 0 0 min(100%, max(430px, 40%));
  width: min(1040px, 84vw);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: center;
  transform-origin: left center;
}

/* Beats alternate: image left, right, left, right. row-reverse also moves the
   row's free space to the left, so the image lands flush against the far edge. */
.p-ht-card:nth-child(even) { flex-direction: row-reverse; }

.p-ht-card.is-active .p-tl-img { --p-tl-scale: 1.2; }

.p-ht-card .p-tl-img { flex: 0 0 300px; max-width: 38%; }
.p-ht-card--w390 .p-tl-img { flex-basis: 390px; max-width: 42%; }
.p-ht-card--w410 .p-tl-img { flex-basis: 410px; max-width: 42%; }
.p-ht-card--w370 .p-tl-img { flex-basis: 370px; max-width: 42%; }

.p-ht-body { flex: 1; min-width: 0; max-width: 34rem; }

/* The "Now" card holds three paragraphs; cap it to its slot so it cannot bleed
   into the neighbouring beats. */
.p-ht-card--now .p-ht-body { max-height: 100%; overflow: hidden; }

/* Shares the cards' centred column so the strip lines up with the card edge. */
.p-ht-thumbs {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: min(1040px, 84vw);
  margin: 0 auto 1rem;
  transition: opacity 0.2s;
}

.p-ht-thumbs-label {
  font-family: var(--p-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8ba0ac;
  margin-right: 0.3rem;
}

.p-ht-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.p-ht-thumb-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(11, 34, 54, 0.14);
}

.p-ht-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p-ht-thumb-cap {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 0.66rem;
  color: var(--p-orange);
}

.p-ht-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: min(1040px, 84vw);
  margin: 0 auto 2.5rem;
}

.p-ht-progressbar {
  width: 180px;
  height: 2px;
  background: rgba(27, 62, 93, 0.13);
  border-radius: 2px;
  overflow: hidden;
}

.p-ht-progress {
  width: 0%;
  height: 100%;
  background: var(--p-orange);
  border-radius: 2px;
}

.p-ht-dots { display: flex; gap: 9px; }

.p-ht-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(27, 62, 93, 0.22);
  transition: background 0.2s, transform 0.2s;
}

/* ---------- vertical timeline (mobile) with canvas spine ----------
   2rem top padding compensates for the hero's slimmed bottom padding, keeping
   the first beat ~40px under the hero band on mobile as before. */
.p-vt { position: relative; z-index: 1; padding: 2rem 0 4rem; display: none; }

.p-vt-in {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
}

.p-vt-spine {
  position: absolute;
  left: 2.5rem;
  top: 0;
  width: 44px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.p-vt-beat {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 1.5rem;
  padding: 0 0 3.2rem;
}

.p-vt-beat:first-child { padding-top: 1.5rem; }

.p-vt-rail { position: relative; height: 100%; }

.p-vt-node {
  position: absolute;
  left: 50%;
  top: 2.4rem;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p-orange);
  box-shadow: 0 0 10px rgba(231, 125, 32, 0.65);
  animation: p-orbPulse 3.2s ease-in-out infinite;
}

.p-vt-node--blue {
  background: var(--p-blue);
  box-shadow: 0 0 10px rgba(29, 126, 179, 0.55);
}

.p-vt-tick {
  position: absolute;
  left: calc(50% + 3.5px);
  top: 2.4rem;
  width: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(231, 125, 32, 0.6), rgba(231, 125, 32, 0));
}

.p-vt-tick--blue {
  background: linear-gradient(90deg, rgba(29, 126, 179, 0.55), rgba(29, 126, 179, 0));
}

.p-vt-body {
  display: flex;
  gap: 2.8rem;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1180px;
}

.p-vt-body .p-tl-img { flex: 0 0 300px; max-width: 100%; }
.p-vt-body .p-tl-img img { height: auto; aspect-ratio: 4 / 3; }
.p-vt-text { flex: 1; min-width: 240px; max-width: 34rem; }

@keyframes p-orbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* ---------- values band ---------- */
.p-vals {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(160deg, #1b3e5d 0%, #0b2236 100%);
  padding: clamp(3.4rem, 6vw, 5.4rem) 0;
}

.p-vals-glow-a,
.p-vals-glow-b {
  position: absolute;
  pointer-events: none;
  filter: blur(6px);
}

.p-vals-glow-a {
  top: -30%;
  left: -6%;
  width: 46%;
  height: 160%;
  background: radial-gradient(circle, rgba(231, 125, 32, 0.32), transparent 66%);
}

.p-vals-glow-b {
  bottom: -45%;
  right: -10%;
  width: 52%;
  height: 180%;
  background: radial-gradient(circle, rgba(63, 130, 179, 0.3), transparent 64%);
}

.p-vals-in {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.p-vals-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }

.p-vals-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: 1rem;
}

.p-vals-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1.1rem;
  text-shadow: 0 1px 2px rgba(6, 18, 32, 0.45);
}

.p-vals-lead {
  font-family: var(--p-font-ui);
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(220, 235, 245, 0.9);
  margin: 0;
  max-width: 38rem;
}

.p-vals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}

.p-vals-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 1.7rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.p-vals-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(231, 125, 32, 0.16);
  border: 1px solid rgba(231, 125, 32, 0.4);
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--p-orange);
}

.p-vals-card-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: #fff;
}

.p-vals-card p {
  font-family: var(--p-font-ui);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(220, 235, 245, 0.82);
  margin: 0;
}

.p-vals-quote {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  border-left: 3px solid var(--p-orange);
  padding-left: 1.5rem;
  max-width: 46rem;
}

.p-vals-quote p {
  font-family: var(--p-font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

/* ---------- client stories ---------- */
.p-stories { position: relative; z-index: 1; padding: 4.75rem 0 5.5rem; }

.p-stories-in { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }

.p-stories-head { max-width: 44rem; margin-bottom: 2.6rem; }

.p-stories-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: 1rem;
}

.p-stories-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--p-ink);
  margin: 0;
}

.p-stories-list { display: flex; flex-direction: column; gap: 1.6rem; }

.p-story {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(27, 62, 93, 0.06);
}

.p-story-img { width: 100%; height: 260px; overflow: hidden; }
.p-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p-story-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
  padding: 2.6rem;
}

.p-story-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--p-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-blue);
  background: rgba(29, 126, 179, 0.09);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  margin-bottom: 1rem;
}

.p-story-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  margin: 0 0 1.6rem;
}

.p-story-kicker {
  font-family: var(--p-font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b5490f;
  margin-bottom: 0.45rem;
}

.p-story-kicker--blue { color: var(--p-blue); }

.p-story-p {
  font-family: var(--p-font-ui);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--p-body-2);
  margin: 0 0 1.4rem;
}

.p-story-p:last-child { margin-bottom: 0; }

.p-story-quote {
  background: rgba(29, 126, 179, 0.05);
  border-radius: 16px;
  padding: 2rem 2.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-story-quote-mark {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.6;
  color: rgba(29, 126, 179, 0.28);
  margin-bottom: 0.6rem;
}

.p-story-quote p {
  font-family: var(--p-font-ui);
  font-size: 1.08rem;
  line-height: 1.62;
  color: #243743;
  margin: 0 0 1.2rem;
}

.p-story-quote-by {
  font-family: var(--p-font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--p-ink);
}

/* ---------- about final CTA ---------- */
.p-abcta {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #1b3e5d, #0b2236);
  padding: 5.5rem 0;
  text-align: center;
}

.p-abcta-in { max-width: 760px; margin: 0 auto; padding: 0 2.5rem; }

.p-abcta-h2 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.p-abcta-sub {
  font-family: var(--p-font-ui);
  font-size: 1.14rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 1.4rem auto 0;
  max-width: 32rem;
}

.p-abcta-ctas {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.3rem;
}

.p-btn--ghost-navy {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.p-btn--ghost-navy:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  color: #fff;
}

/* ---------- about responsive ---------- */
@media (max-width: 900px) {
  .p-ht { display: none; }
  .p-vt { display: block; }
  .p-story-body { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .p-vt-node { animation: none; }
  .p-tl-img, .p-tl-img:hover { transition: none; transform: none; }
}

/* ==================== solutions page ====================
   Measured from Solutions.dc.html. Dark scene (hero + framed workspace) over a
   1900px gradient, then flat frosted bands - no rounded overlapping panels on
   this page. The dot field comes from js/atmosphere-grey.js. */

body.p-page--solutions {
  background-color: #f6f7f7;
  background-image: linear-gradient(180deg, #0b2236 0%, #123a59 10%, #1d6191 22%,
    #3f82b3 38%, #c3c6c8 55%, #e6e8e8 72%, #f6f7f7 88%, #f6f7f7 100%);
  background-size: 100% 1900px;
}

/* ---------- solutions hero ---------- */
.p-solhero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: clamp(3.5rem, 8vh, 6.5rem) 0 5rem;
}

.p-solhero-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.p-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  width: 2px;
  height: 2px;
  animation: p-twinkle 3.8s ease-in-out infinite;
}

.p-star--lg { width: 3px; height: 3px; }

@keyframes p-twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.p-solhero-glow {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 56%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 60% 55%, rgba(231, 125, 32, 0.16) 0%,
    rgba(29, 126, 179, 0.14) 45%, transparent 72%);
  filter: blur(30px);
}

/* Waratah group: three copies of the same cut-out, masked so the leaves, the big
   flower and the small flower are separate layers the scroll handler can scatter
   as the workspace frame rises. Masks are the .dc source's data-URI ellipses. */
.p-waratah {
  position: absolute;
  top: 0;
  right: -4%;
  z-index: 1;
  width: min(700px, 52vw);
  aspect-ratio: 1122 / 1402;
  transition: opacity 0.2s linear;
  pointer-events: none;
}

.p-waratah-shadow {
  position: absolute;
  inset: 14% 8% 6% 4%;
  background: radial-gradient(ellipse 60% 55% at 55% 55%, rgba(15, 52, 82, 0.5) 0%,
    rgba(15, 52, 82, 0.22) 46%, transparent 76%);
  filter: blur(32px);
}

.p-waratah-glow {
  position: absolute;
  left: 36%;
  top: 2%;
  width: 56%;
  height: 34%;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(231, 125, 32, 0.42) 0%,
    rgba(231, 125, 32, 0.15) 45%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: 0.5;
  transition: opacity 0.2s linear;
}

.p-waratah-branch {
  position: absolute;
  inset: 0;
  transform-origin: 90% 96%;
  animation: p-leafSway 8s ease-in-out infinite alternate;
}

@keyframes p-leafSway {
  from { transform: rotate(0deg); }
  to { transform: rotate(1.4deg); }
}

.p-waratah-layer { position: absolute; inset: 0; transition: transform 0.2s linear, opacity 0.2s linear, filter 0.2s linear; }

.p-waratah-layer img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
  filter: drop-shadow(0 26px 36px rgba(6, 18, 32, 0.46)) saturate(0.97) brightness(0.98) contrast(1.03);
}

.p-waratah-leaves {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='h' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='black'/%3E%3Cstop offset='68%25' stop-color='black'/%3E%3Cstop offset='100%25' stop-color='white'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='white'/%3E%3Cellipse cx='36' cy='16' rx='23' ry='17' fill='url(%23h)'/%3E%3Cellipse cx='25' cy='47' rx='17' ry='14' fill='url(%23h)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='h' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='black'/%3E%3Cstop offset='68%25' stop-color='black'/%3E%3Cstop offset='100%25' stop-color='white'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='white'/%3E%3Cellipse cx='36' cy='16' rx='23' ry='17' fill='url(%23h)'/%3E%3Cellipse cx='25' cy='47' rx='17' ry='14' fill='url(%23h)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.p-waratah-big {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='b' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='white'/%3E%3Cstop offset='68%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='black'/%3E%3Cellipse cx='36' cy='16' rx='23' ry='17' fill='url(%23b)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='b' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='white'/%3E%3Cstop offset='68%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='black'/%3E%3Cellipse cx='36' cy='16' rx='23' ry='17' fill='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.p-waratah-big img,
.p-waratah-small img {
  filter: drop-shadow(0 22px 30px rgba(6, 18, 32, 0.42)) saturate(0.98) brightness(1) contrast(1.03);
}

.p-waratah-small {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='c' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='white'/%3E%3Cstop offset='68%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='black'/%3E%3Cellipse cx='25' cy='47' rx='17' ry='14' fill='url(%23c)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='c' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='white'/%3E%3Cstop offset='68%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='black'/%3E%3Cellipse cx='25' cy='47' rx='17' ry='14' fill='url(%23c)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Orange bloom over each flower head, screened onto the cut-out. */
.p-waratah-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 62% 18%, rgba(231, 125, 32, 0.22) 0%, transparent 60%);
  mix-blend-mode: screen;
}

.p-solhero-in {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
}

.p-solhero-text { max-width: 34rem; margin-left: calc(18px + clamp(1.4rem, 3vw, 2.2rem)); }

.p-solhero-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: 1.2rem;
}

.p-solhero-h1 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

.p-solhero-sub {
  font-family: var(--p-font-ui);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: #d7e6f0;
  margin: 1.5rem 0 0;
}

.p-solhero-ctas { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }

.p-solhero-scroll {
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

.p-solhero-scroll:hover { border-bottom-color: #fff; }

/* ---------- framed workspace ---------- */
.p-ws {
  position: relative;
  z-index: 3;
  max-width: 1600px;
  margin: -120px auto 0;
  padding: 0 2.5rem;
  transform-origin: 50% 100%;
  will-change: transform;
  transition: transform 0.15s ease-out;
}

.p-ws-glass {
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 34px;
  padding: 18px;
  box-shadow: 0 50px 100px rgba(6, 18, 32, 0.45);
}

.p-ws-panel {
  background: #fff;
  border-radius: 22px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 3vw, 2.2rem) clamp(2.2rem, 4vw, 3rem);
}

.p-ws-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--p-ink);
  margin: 0 0 2rem;
  max-width: 38rem;
}

.p-ws-tabsbar { background: #eef2f5; border-radius: 18px 18px 0 0; padding: 0.6rem 0.6rem 0; }
.p-ws-tabs { display: flex; align-items: flex-end; gap: 0.5rem; }

.p-ws-tab {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  flex: 0.72 1 0;
  align-self: flex-end;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  padding: 0.7rem 0.8rem;
  box-shadow: none;
  margin-bottom: 0;
  z-index: 1;
  transition: flex 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.28s, box-shadow 0.28s, padding 0.28s;
}

.p-ws-tab:hover { background: rgba(255, 255, 255, 0.55); }

.p-ws-tab.active {
  flex: 2.3 1 0;
  align-self: stretch;
  background: #fff;
  border-color: rgba(27, 62, 93, 0.08);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 1.1rem 1.3rem 1.3rem;
  box-shadow: 0 -10px 22px rgba(20, 60, 95, 0.05);
  margin-bottom: -1px;
  z-index: 2;
}

.p-ws-tab-top { display: flex; align-items: center; justify-content: space-between; }

.p-ws-tab-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--p-blue);
  opacity: 0.5;
  transition: background 0.2s, opacity 0.2s;
}

.p-ws-tab.active .p-ws-tab-dot { background: var(--p-orange); opacity: 1; }

.p-ws-tab-arrow {
  font-family: var(--p-font-ui);
  font-size: 0.95rem;
  color: var(--p-orange);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s, transform 0.22s;
}

.p-ws-tab.active .p-ws-tab-arrow { opacity: 1; transform: translateX(0); }

.p-ws-tab-label {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: #7c8a93;
  transition: font-size 0.28s, color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-ws-tab.active .p-ws-tab-label { font-size: 1.14rem; color: var(--p-ink); white-space: normal; }

.p-ws-tab-underline {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  width: 0;
  background: var(--p-orange);
  transition: width 0.28s ease;
}

.p-ws-tab.active .p-ws-tab-underline { width: 26px; }

.p-ws-tab-desc {
  display: none;
  font-family: var(--p-font-ui);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--p-body);
}

.p-ws-tab.active .p-ws-tab-desc { display: block; }

/* Mobile chip rails, hidden on desktop. */
.p-ws-chips {
  display: none;
  position: sticky;
  top: 64px;
  z-index: 6;
  background: #fff;
  padding: 0.7rem 0;
  margin: 0 -0.2rem;
  overflow-x: auto;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(27, 62, 93, 0.08);
}

.p-ws-itemchips { display: none; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1.4rem; }

.p-ws-chip {
  flex-shrink: 0;
  font-family: var(--p-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  background: #f0f3f5;
  color: var(--p-body-2);
}

.p-ws-chip.active { background: var(--p-blue); color: #fff; }

.p-ws-itemchips .p-ws-chip { font-size: 0.8rem; padding: 0.42rem 0.8rem; }

.p-ws-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 2.2rem;
  align-items: start;
  background: #fff;
  border-radius: 0 0 18px 18px;
  padding-top: 1.8rem;
}

.p-ws-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.6rem; }

.p-ws-rail-label {
  font-family: var(--p-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-ink);
  padding-left: 0.9rem;
}

.p-ws-rail-items { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.65rem; }

.p-ws-item {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  font-family: var(--p-font-ui);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.62rem 0.9rem 0.68rem 1.05rem;
  border-radius: 13px;
  background: transparent;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, border-color 0.2s;
}

.p-ws-item:hover { background: rgba(29, 126, 179, 0.05); }

.p-ws-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 3px;
  border-radius: 3px;
  background: var(--p-blue);
  opacity: 0;
  transition: opacity 0.2s;
}

.p-ws-item::after {
  content: "";
  position: absolute;
  right: -2.2rem;
  top: 50%;
  width: 2.2rem;
  height: 2px;
  background: linear-gradient(90deg, #1d7eb3, rgba(29, 126, 179, 0));
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s;
}

.p-ws-item span {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--p-body-2);
  transition: color 0.2s;
}

.p-ws-item.active {
  border-color: rgba(29, 126, 179, 0.3);
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 60, 95, 0.14), 0 1px 0 rgba(27, 62, 93, 0.04);
  transform: translateX(5px) scale(1.015);
}

.p-ws-item.active:hover { background: #fff; }
.p-ws-item.active::before { opacity: 1; }
.p-ws-item.active::after { opacity: 0.55; }
.p-ws-item.active span { font-weight: 700; color: var(--p-ink); }

.p-ws-detailwrap { min-width: 0; }

@keyframes p-detailPop {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.p-ws-detail {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 400px);
  gap: 2.6rem;
  align-items: start;
  animation: p-detailPop 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.p-ws-detail-h {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  margin: 0;
  text-wrap: balance;
}

.p-ws-detail-p {
  font-family: var(--p-font-ui);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--p-body-alt);
  margin: 1rem 0 0;
  max-width: 34rem;
  text-wrap: pretty;
}

.p-ws-detail-ctas { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 2rem; }

.p-btn--navy { background: var(--p-navy); color: #fff; font-size: 0.95rem; padding: 0.75rem 1.4rem; border-radius: 10px; }
.p-btn--navy:hover { background: #152f47; color: #fff; transform: none; }

.p-ws-learn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--p-navy);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.p-ws-learn-toggle:hover { color: var(--p-orange); }

.p-ws-vig {
  border-radius: 20px;
  padding: 1.6rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  align-self: stretch;
}

/* width:auto + max-height keeps a portrait screenshot (sms-phone.png is 460x854)
   from stretching the detail row taller than the copy beside it. Landscape
   vignettes are unaffected - max-width still governs them. */
.p-ws-vig > img {
  display: block;
  width: auto;
  max-width: min(100%, 360px);
  max-height: 420px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
  filter: drop-shadow(0 24px 44px rgba(9, 30, 48, 0.18));
}

.p-vig-dark {
  background: #0f2c44;
  border-radius: 16px;
  padding: 1.3rem;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 20px 44px rgba(9, 30, 48, 0.28);
}

.p-vig-dark-title {
  font-family: var(--p-font-ui);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f97ab;
  margin-bottom: 0.9rem;
}

.p-vig-bubble {
  background: var(--p-blue);
  color: #fff;
  border-radius: 14px 14px 14px 4px;
  padding: 0.7rem 0.85rem;
  font-family: var(--p-font-ui);
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 94%;
}

.p-vig-meta {
  text-align: right;
  font-family: var(--p-font-ui);
  font-size: 0.68rem;
  color: #6f869a;
  margin-top: 0.9rem;
}

.p-vig-card {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.08);
  border-radius: 16px;
  padding: 1.3rem;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 20px 44px rgba(9, 30, 48, 0.14);
}

.p-vig-card-title {
  font-family: var(--p-font-ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a96a1;
  margin-bottom: 0.9rem;
}

.p-vig-rows { display: flex; flex-direction: column; gap: 0.7rem; }

.p-vig-row { display: flex; align-items: center; gap: 0.6rem; font-family: var(--p-font-ui); }
.p-vig-row-mark { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; }
.p-vig-row-mark--ok { color: #2f8f54; }
.p-vig-row-mark--bad { color: var(--p-orange); }
.p-vig-row-mark--warn { color: #c9a24e; }
.p-vig-row-mark--dot { color: var(--p-blue); }
.p-vig-row-text { font-size: 0.88rem; color: var(--p-ink); }
.p-vig-row-right { margin-left: auto; font-size: 0.7rem; color: #8a96a1; }
.p-vig-row-right--ok { color: #2f8f54; font-weight: 600; }

.p-vig-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.p-vig-chip {
  font-family: var(--p-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--p-navy);
  background: #eef4f8;
  border: 1px solid rgba(27, 62, 93, 0.1);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
}

.p-vig-bars { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; max-width: 290px; }

.p-vig-bar {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.1);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 14px 30px rgba(9, 30, 48, 0.12);
  font-family: var(--p-font-ui);
}

.p-vig-bar-head { display: flex; align-items: center; }
.p-vig-bar-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: #8a96a1; }
.p-vig-bar--win .p-vig-bar-tag { color: var(--p-orange); }

.p-vig-bar-badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--p-orange);
  border-radius: 5px;
  padding: 0.12rem 0.45rem;
}

.p-vig-bar-text { font-size: 0.9rem; color: var(--p-ink); margin-top: 0.3rem; }
.p-vig-bar-track { height: 5px; border-radius: 5px; background: #e2e7ec; margin-top: 0.7rem; }
.p-vig-bar-fill { height: 100%; background: #b7c2cb; border-radius: 5px; }
.p-vig-bar--win .p-vig-bar-fill { background: var(--p-orange); }
.p-vig-bar-note { font-size: 0.7rem; margin-top: 0.35rem; color: #8a96a1; }
.p-vig-bar--win .p-vig-bar-note { color: #2f8f54; font-weight: 600; }

.p-vig-code {
  background: #0f2c44;
  border-radius: 16px;
  padding: 1.3rem;
  font-family: ui-monospace, Menlo, monospace;
  color: #e9f1f7;
  width: 100%;
  max-width: 290px;
  box-shadow: 0 20px 44px rgba(9, 30, 48, 0.28);
}

.p-vig-code-lines { font-size: 0.78rem; line-height: 1.9; }
.p-vig-code-rule { border-top: 1px dashed rgba(255, 255, 255, 0.18); margin: 0.8rem 0; }
.p-vig-code-status { font-size: 0.78rem; color: var(--p-success); font-weight: 700; }

.p-vig-job-head { display: flex; align-items: center; font-family: var(--p-font-ui); }
.p-vig-job-id { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a96a1; }
.p-vig-job-cost { margin-left: auto; font-style: italic; font-size: 0.82rem; color: var(--p-body); }
.p-vig-job-text { font-family: var(--p-font-ui); font-size: 0.95rem; color: var(--p-ink); line-height: 1.4; margin: 0.7rem 0 1rem; }
.p-vig-job-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.p-vig-tag {
  font-family: var(--p-font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2f8f54;
  border: 1.5px solid #2f8f54;
  border-radius: 5px;
  padding: 0.18rem 0.45rem;
}

.p-vig-tag--live { color: var(--p-orange); border-color: var(--p-orange); }

.p-vig-proof-note {
  font-family: var(--p-font-ui);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--p-body);
  margin-top: 1.1rem;
  border-top: 1px solid rgba(27, 62, 93, 0.1);
  padding-top: 0.9rem;
}

.p-ws-learn {
  border-top: 1px solid rgba(27, 62, 93, 0.08);
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
  animation: p-detailPop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.p-ws-learn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}

.p-ws-learn-h {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--p-ink);
}

.p-ws-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem 2.2rem;
}

.p-ws-learn-t { font-family: var(--p-font-ui); font-weight: 700; font-size: 0.96rem; color: var(--p-ink); margin: 0 0 0.35rem; }
.p-ws-learn-d { font-family: var(--p-font-ui); font-size: 0.92rem; line-height: 1.58; color: var(--p-body-alt); margin: 0; text-wrap: pretty; }

/* ---------- solutions bands (frosted, flat) ---------- */
.p-solband {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}

.p-feat {
  overflow: hidden;
  padding: clamp(6rem, 14vh, 9.5rem) 0 clamp(3rem, 7vh, 4.5rem);
  border-top: 1px solid rgba(27, 62, 93, 0.06);
}

.p-feat-ghost {
  position: absolute;
  left: -11%;
  top: -7%;
  width: min(440px, 40vw);
  aspect-ratio: 1122 / 1402;
  z-index: 0;
  pointer-events: none;
  transform-origin: 22% 24%;
  animation: p-leafSway 10s ease-in-out infinite alternate;
}

.p-feat-ghost-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 52% at 50% 48%, rgba(231, 125, 32, 0.13) 0%,
    rgba(201, 60, 40, 0.05) 46%, transparent 74%);
  filter: blur(32px);
}

.p-feat-ghost img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.1;
  filter: blur(2.5px) saturate(0.92);
}

.p-feat-in { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; }

.p-feat-head { max-width: 44rem; margin-bottom: clamp(3.4rem, 7vw, 5rem); }

.p-feat-h2 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--p-ink);
  text-wrap: balance;
}

.p-feat-lead {
  font-family: var(--p-font-ui);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--p-body-alt);
  margin: 1.3rem 0 0;
  text-wrap: pretty;
}

.p-feat-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.62fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.p-feat-row:last-child { margin-bottom: 0; }

.p-feat-row--flip { grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.82fr); }

.p-feat-kicker {
  font-family: var(--p-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b5490f;
  margin-bottom: 1rem;
}

.p-feat-h3 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  text-wrap: balance;
}

.p-feat-p {
  font-family: var(--p-font-ui);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--p-body-alt);
  margin: 1.2rem 0 0;
  max-width: 42ch;
  text-wrap: pretty;
}

.p-feat-cta { margin-top: 1.9rem; }

.p-feat-shot {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.08);
  border-radius: 24px;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  box-shadow: 0 26px 56px rgba(9, 30, 48, 0.13);
}

.p-feat-shot img { display: block; width: 100%; height: auto; }

/* ---------- trust marquee (reuses .p-logos-mask / .p-logos-track) ---------- */
/* Solid white rather than the translucent .p-solband, so the band matches the
   white background baked into the client logo files. Blur is dropped - nothing
   shows through. Same treatment as .p-logos on the home page. */
.p-soltrust {
  padding: 3.4rem 0 2.6rem;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.p-soltrust-in { max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; }

.p-soltrust-label {
  text-align: center;
  font-family: var(--p-font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-navy);
  margin-bottom: 1.9rem;
}

/* ---------- infrastructure ---------- */
.p-infra {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(240, 241, 242, 0.46) 0%, rgba(232, 233, 234, 0.46) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  padding: clamp(4rem, 10vh, 6.5rem) 0;
  overflow: hidden;
}

.p-infra-in { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 2.5rem; }

.p-infra-head { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.6rem; }

.p-infra-head-text { max-width: 620px; }

.p-infra-h2 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--p-ink);
}

.p-infra-lead {
  font-family: var(--p-font-ui);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--p-body-alt);
  margin: 1.3rem 0 0;
}

.p-infra-badge { width: 90px; height: 90px; flex-shrink: 0; margin-left: auto; }

.p-infra-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(27, 62, 93, 0.1);
}

.p-infra-row:last-of-type { border-bottom: 1px solid rgba(27, 62, 93, 0.1); }

.p-infra-row-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--p-ink);
}

.p-infra-row-p { font-family: var(--p-font-ui); font-size: 0.98rem; line-height: 1.6; color: var(--p-body-alt); }

.p-infra-cta { margin-top: 2.6rem; }

/* ---------- solutions final CTA ---------- */
.p-solcta { padding: clamp(4.5rem, 11vh, 7rem) 0; text-align: center; }

.p-solcta-in { max-width: 820px; margin: 0 auto; padding: 0 2.5rem; }

.p-solcta-h2 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}

.p-solcta-sub {
  font-family: var(--p-font-ui);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--p-body-alt);
  margin: 1.4rem auto 0;
  max-width: 32ch;
}

.p-solcta-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }

.p-btn--outline { background: #fff; color: var(--p-ink); border: 1.5px solid rgba(27, 62, 93, 0.2); }
.p-btn--outline:hover { border-color: var(--p-blue); color: var(--p-blue); }

/* ---------- solutions responsive ---------- */
@media (max-width: 900px) {
  .p-waratah { opacity: 0.4; }
  .p-ws-tabsbar, .p-ws-rail { display: none; }
  .p-ws-chips { display: flex; }
  .p-ws-itemchips { display: flex; }
  .p-ws-grid { grid-template-columns: 1fr; padding-top: 0.4rem; }
  .p-ws-detail { grid-template-columns: 1fr; gap: 1.8rem; }
  .p-feat-row, .p-feat-row--flip { grid-template-columns: 1fr; }
  .p-feat-row--flip .p-feat-media { order: 1; }
  .p-infra-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .p-star, .p-waratah-branch, .p-feat-ghost { animation: none; }
  .p-ws-detail, .p-ws-learn { animation-duration: 0s; }
}

/* ==================== products page ====================
   No .dc counterpart exists for /products (the demo has no Products page), so
   this section composes the established system: About-style hero over the
   short grey gradient, card grids for the eight product subpages, and the
   shared final-CTA band. Copy comes from the previous products.php. */

.p-prod { position: relative; z-index: 1; padding: 1.5rem 0 4rem; }

.p-prod-in { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }

.p-prod-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 0 0 3.4rem;
}

.p-prod-point {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--p-hairline);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  font-family: var(--p-font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--p-body-2);
}

.p-prod-point-mark { flex-shrink: 0; font-weight: 700; color: #2f8f54; }

.p-prod-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.015em;
  color: var(--p-ink);
  margin: 0 0 0.4rem;
}

.p-prod-sec-note {
  font-family: var(--p-font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--p-body-alt);
  margin: 0 0 1.8rem;
  max-width: 44rem;
}

.p-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4rem;
  margin-bottom: 3.4rem;
}

.p-prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--p-hairline);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(27, 62, 93, 0.06);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}

.p-prod-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(27, 62, 93, 0.11);
}

.p-prod-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.p-prod-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.6rem; }

.p-prod-card-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  margin: 0 0 0.45rem;
}

.p-prod-card-p { font-family: var(--p-font-ui); font-size: 0.95rem; line-height: 1.55; color: var(--p-body); margin: 0; }

.p-prod-ul {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.p-prod-ul li {
  position: relative;
  padding-left: 1.1rem;
  font-family: var(--p-font-ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--p-body-2);
}

.p-prod-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-orange);
}

.p-prod-card-link {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--p-blue);
}

.p-prod-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem 2.2rem;
  border-top: 1px solid rgba(27, 62, 93, 0.1);
  padding-top: 2.4rem;
}

.p-prod-trust-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--p-ink);
  margin: 0 0 0.4rem;
}

.p-prod-trust-p { font-family: var(--p-font-ui); font-size: 0.95rem; line-height: 1.6; color: var(--p-body-alt); margin: 0; }

/* ==================== contact page ====================
   From Contact.dc.html. Adaptation notes: the demo hero carries its own
   diagonal gradient under the demo's overlapping nav; here the standard
   780px inner-page body gradient plays that role so the sticky nav stays
   readable. The demo's mock enquiry form is deliberately not ported - the
   real forms are the ajax-injected ones on /contact/email_sales and
   /contact/email_support, and the pathway cards link there instead. */

/* Same self-owned dark band as .p-abhero - the contact/pay/register heroes wrap
   to four or five lines at 390px and ran off the bottom of the body gradient. */
.p-cthero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: -81px;
  padding-top: 81px;
  background: linear-gradient(180deg, #0b2236 0%, #123a59 45%, #17527d 75%, #1d6191 100%);
}

.p-cthero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.p-cthero-bloom-a,
.p-cthero-bloom-b {
  position: absolute;
  border-radius: 50%;
}

.p-cthero-bloom-a {
  right: -12%;
  top: -18%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgba(231, 125, 32, 0.34), rgba(231, 125, 32, 0) 62%);
  filter: blur(30px);
  animation: p-bloomA 30s ease-in-out infinite;
}

.p-cthero-bloom-b {
  left: -14%;
  top: 26%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(70, 150, 215, 0.3), rgba(70, 150, 215, 0) 64%);
  filter: blur(32px);
  animation: p-bloomB 36s ease-in-out infinite;
}

/* Larger glowing stars used only on this hero; colour and glow are inline. */
.p-star--glow { border-radius: 50%; position: absolute; animation: p-twinkle 6s ease-in-out infinite; }

.p-cthero-in {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 7rem) 2.5rem clamp(6.5rem, 15vh, 10rem);
}

.p-cthero-text { max-width: 47rem; }
.p-cthero-text .p-abhero-h1 { max-width: none; }
.p-cthero-text .p-abhero-sub { max-width: 42rem; }

/* ---------- pathway cards, overlapping the hero ---------- */
.p-ctpaths {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  padding: 0 0 clamp(1rem, 3vh, 2rem);
}

.p-ctpath-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  transform: translateY(-4.5rem);
  margin-bottom: -2.5rem;
}

.p-ctpath {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.09);
  border-radius: 16px;
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 34px rgba(9, 30, 48, 0.08);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.p-ctpath:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(9, 30, 48, 0.12);
  border-color: rgba(231, 125, 32, 0.45);
}

.p-ctpath-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(231, 125, 32, 0.12);
  color: var(--p-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.p-ctpath-ico--blue { background: rgba(29, 126, 179, 0.12); color: var(--p-blue); }

.p-ctpath-h {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--p-ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.p-ctpath-p {
  font-family: var(--p-font-ui);
  font-size: 0.86rem;
  color: var(--p-body-alt);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.p-ctpath-link {
  margin-top: 1rem;
  font-family: var(--p-font-ui);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--p-orange);
  text-decoration: none;
}

.p-ctpath--navy {
  background: linear-gradient(157deg, #1b3e5d 0%, #0b2236 100%);
  border: none;
}

.p-ctpath--navy:hover { border-color: transparent; }
.p-ctpath--navy .p-ctpath-ico { background: rgba(255, 255, 255, 0.1); color: var(--p-orange); }
.p-ctpath--navy .p-ctpath-h { color: #fff; }
.p-ctpath--navy .p-ctpath-p { color: rgba(220, 235, 245, 0.62); }

/* ---------- details + map ---------- */
.p-ctinfo {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(250, 241, 231, 0.48) 0%, rgba(246, 241, 230, 0.48) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  padding: clamp(3.5rem, 8vh, 5.5rem) 0;
}

.p-ctinfo-in { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }

.p-ctinfo-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3.2rem;
  align-items: start;
  margin-bottom: 2.4rem;
}

.p-ctinfo-card {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.08);
  border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 20px 48px rgba(9, 30, 48, 0.08);
}

.p-ctinfo-h2 {
  margin: 0 0 0.4rem;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -0.015em;
  color: var(--p-ink);
}

.p-ctinfo-lead { font-family: var(--p-font-ui); font-size: 0.94rem; color: var(--p-body-alt); margin: 0 0 1.6rem; }

.p-ctdept { padding: 1.1rem 0; border-top: 1px solid rgba(27, 62, 93, 0.08); }
.p-ctdept:last-child { padding-bottom: 0; }

.p-ctdept-h {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--p-ink);
  margin: 0 0 0.5rem;
}

.p-ctdept-h span { font-family: var(--p-font-ui); font-size: 0.78rem; font-weight: 600; color: var(--p-orange); }

.p-ctdept-rows { display: flex; flex-direction: column; gap: 0.3rem; }

.p-ctdept-row {
  display: flex;
  gap: 0.8rem;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-body-2);
}

.p-ctdept-row b { font-weight: 600; color: var(--p-body); min-width: 5.5rem; }
/* accountsdept@prodocom.com.au is one unbreakable 326px token. Left alone it set
   the row's min-content width, which pushed the grid track to 377px inside a
   310px column and made the whole page 30px wider than a 390px screen. */
.p-ctdept-row a { color: var(--p-blue); text-decoration: none; overflow-wrap: anywhere; }
.p-ctdept-row span { min-width: 0; overflow-wrap: anywhere; }
.p-ctdept-row a:hover { text-decoration: underline; }

.p-ctside {
  background: linear-gradient(157deg, #1b3e5d 0%, #0b2236 100%);
  color: #fff;
  border-radius: 18px;
  padding: 1.7rem;
}

.p-ctside-h { margin: 0 0 1.1rem; font-family: var(--p-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: #fff; }

.p-ctside-row { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1rem; }
.p-ctside-row:last-child { margin-bottom: 0; }

.p-ctside-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--p-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-ctside-label {
  font-family: var(--p-font-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(220, 235, 245, 0.45);
  margin-bottom: 0.15rem;
}

.p-ctside-val,
.p-ctside-val a { font-family: var(--p-font-ui); font-size: 0.95rem; font-weight: 600; color: #fff; text-decoration: none; }

.p-ctmap {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.08);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(9, 30, 48, 0.08);
}

.p-ctmap iframe { display: block; width: 100%; height: clamp(300px, 45vw, 440px); border: 0; border-radius: 14px; }

@media (max-width: 980px) {
  .p-ctpath-grid { grid-template-columns: 1fr 1fr; }
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), whose automatic
     minimum is the item's min-content width, so a long contact detail could
     still force the track wider than the screen. */
  .p-ctinfo-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}

@media (max-width: 600px) {
  .p-ctpath-grid { grid-template-columns: 1fr; }
}

/* ---------- ajax-injected contact form, restyled by CSS only ----------
   The form inside #formcontainer is emitted by ajax/class_contact.php and
   driven by js/contact.php + js/forms.php - its markup, names, ids and the
   .invalid show/hide behaviour are untouchable. Everything here is scoped
   under .p-ctform and only re-skins the classes the handler already emits. */
.p-ctform #contactus .form-group { margin-bottom: 0.9rem; }

.p-ctform #contactus .form-control {
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-ink);
  padding: 0.72rem 0.9rem;
  height: auto;
  border: 1.5px solid rgba(27, 62, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.15s;
}

.p-ctform #contactus .form-control:focus {
  border-color: var(--p-blue);
  box-shadow: none;
  outline: none;
}

.p-ctform #contactus textarea.form-control { min-height: 110px; resize: vertical; }

.p-ctform #contactus .invalid {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  color: #b3400f;
}

.p-ctform #captchaContainer img { border-radius: 8px; }

.p-ctform #captchaContainer a {
  font-family: var(--p-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--p-blue);
}

/* The submit is an <input class="form-control font-prodo-orange"> - the id
   out-specifies both so it can become the standard orange button. */
.p-ctform #contactus #contactUsFormButton {
  background: var(--p-orange);
  color: #fff;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem;
  border: none;
  border-radius: 11px;
  box-shadow: 0 12px 26px rgba(231, 125, 32, 0.26);
  transition: background 0.2s;
}

.p-ctform #contactus #contactUsFormButton:hover { background: var(--p-orange-hover); color: #fff; }

/* Thank-you state the handler swaps in after a successful send. */
.p-ctform #ajaxResult h4 {
  font-family: var(--p-font-display);
  font-weight: 700;
  color: var(--p-ink);
}

.p-ctform #ajaxResult p { font-family: var(--p-font-ui); color: var(--p-body-alt); }

/* Fieldset variant of the injected form. requestAjaxForm() uppercases its
   params, so CONTACT&SALES / CONTACT&SUPPORT reach salesForm()/supportForm()
   - the bare label+input fieldset markup - not the .form-control enquiry
   variant above (that one is kept for ENQUIRY forms injected elsewhere). */
.p-ctform #contactus fieldset { border: none; margin: 0; padding: 0; }

.p-ctform #contactus fieldset label {
  display: block;
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--p-body);
  letter-spacing: 0.02em;
  margin: 1rem 0 0.35rem;
}

.p-ctform #contactus fieldset label .red { color: var(--p-orange); }

.p-ctform #contactus fieldset input[type="text"],
.p-ctform #contactus fieldset select,
.p-ctform #contactus fieldset textarea {
  width: 100%;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-ink);
  padding: 0.72rem 0.9rem;
  border: 1.5px solid rgba(27, 62, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.p-ctform #contactus fieldset input[type="text"]:focus,
.p-ctform #contactus fieldset select:focus,
.p-ctform #contactus fieldset textarea:focus { border-color: var(--p-blue); }

.p-ctform #contactus fieldset textarea { min-height: 110px; resize: vertical; }

.p-ctform #contactus #captchaContainer { margin: 1.1rem 0 0.4rem; }

.p-ctform #contactus #registerbuttons { display: flex; gap: 0.8rem; margin-top: 1.5rem; }

.p-ctform #contactus #contactUsFormButton { cursor: pointer; padding: 0.9rem 2.2rem; }

.p-ctform #contactus #reset {
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--p-ink);
  background: transparent;
  border: 1.5px solid rgba(27, 62, 93, 0.2);
  border-radius: 11px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.p-ctform #contactus #reset:hover { border-color: var(--p-ink); }

/* ==================== pay pages ====================
   /pay is static copy about the NAB payment process; /pay/invoice carries the
   ajax-injected #payForm (ajax/class_pay.php -> invoiceForm, then cardForm
   before the NAB redirect). Markup, names, ids and js/pay.php stay untouched;
   these rules only re-skin what the handler already emits, same approach as
   the contact forms. */
.p-payform #payForm fieldset { border: none; margin: 0; padding: 0; }

.p-payform #payForm label {
  display: block;
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--p-body);
  letter-spacing: 0.02em;
  margin: 1rem 0 0.35rem;
}

.p-payform #payForm label .red { color: var(--p-orange); }

.p-payform #payForm input[type="text"] {
  width: 100%;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-ink);
  padding: 0.72rem 0.9rem;
  border: 1.5px solid rgba(27, 62, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.p-payform #payForm input[type="text"]:focus { border-color: var(--p-blue); }

/* The expiry month/year pair sits inline either side of the "/" separator. */
.p-payform #payForm select {
  width: auto;
  min-width: 90px;
  display: inline-block;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-ink);
  padding: 0.6rem 0.7rem;
  border: 1.5px solid rgba(27, 62, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  outline: none;
}

.p-payform #payForm input[type="radio"] { accent-color: var(--p-orange); margin-right: 0.25rem; }

.p-payform #payForm .invalid {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  color: #b3400f;
}

.p-payform #payForm #captchaContainer { margin: 1.1rem 0 0.4rem; }
.p-payform #payForm #captchaContainer img { border-radius: 8px; }

.p-payform #payForm #captchaContainer a {
  font-family: var(--p-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--p-blue);
}

.p-payform #payForm #submitPayInvoiceFormBotton,
.p-payform #payForm #submitPayCardFormButton {
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 1rem;
  background: var(--p-orange);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 0.9rem 2.2rem;
  margin-top: 1.5rem;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(231, 125, 32, 0.26);
  transition: background 0.2s;
}

.p-payform #payForm #submitPayInvoiceFormBotton:hover,
.p-payform #payForm #submitPayCardFormButton:hover { background: var(--p-orange-hover); }

.p-payform #ajaxResult h2,
.p-payform #ajaxResult h4 { font-family: var(--p-font-display); font-weight: 700; color: var(--p-ink); }

.p-payform #ajaxResult p { font-family: var(--p-font-ui); color: var(--p-body-alt); }

/* Static /pay content card. */
.p-paycopy p { font-family: var(--p-font-ui); font-size: 0.98rem; line-height: 1.65; color: var(--p-body-2); margin: 0 0 1rem; }
.p-paycopy p a { color: var(--p-blue); font-weight: 600; text-decoration: none; }
.p-paycopy p a:hover { text-decoration: underline; }
.p-paycopy .nablogo { max-width: 220px; height: auto; }

/* ==================== register account ====================
   The multi-step registration flow: #registerAcc forms are ajax-injected by
   requestAjaxForm(['register','accountform']) -> ajax/class_register.php,
   with js/register.php stepping company -> login/T&C -> additional -> credit.
   Markup, names, ids, the submitbuttondisabled class toggle and the
   .regoTsandCs scroll box (css/default.php:109) all stay; these rules only
   re-skin what the handler emits, across every step. */
.p-regform #registerAcc fieldset { border: none; margin: 0 0 0.6rem; padding: 0; }

.p-regform #registerAcc legend {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--p-ink);
  margin: 1.4rem 0 0.2rem;
  padding: 0;
  border-bottom: none;
}

.p-regform #registerAcc label {
  display: block;
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--p-body);
  letter-spacing: 0.02em;
  margin: 1rem 0 0.35rem;
}

.p-regform #registerAcc label .red { color: var(--p-orange); }

.p-regform #registerAcc input[type="text"],
.p-regform #registerAcc input[type="password"],
.p-regform #registerAcc textarea {
  width: 100%;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-ink);
  padding: 0.72rem 0.9rem;
  border: 1.5px solid rgba(27, 62, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.p-regform #registerAcc input[type="text"]:focus,
.p-regform #registerAcc input[type="password"]:focus,
.p-regform #registerAcc textarea:focus { border-color: var(--p-blue); }

.p-regform #registerAcc input[readonly] { background: #f4f6f8; color: var(--p-body); }

.p-regform #registerAcc select {
  width: 100%;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  color: var(--p-ink);
  padding: 0.72rem 0.9rem;
  border: 1.5px solid rgba(27, 62, 93, 0.18);
  border-radius: 10px;
  background: #fff;
  outline: none;
}

.p-regform #registerAcc input[type="checkbox"],
.p-regform #registerAcc input[type="radio"] { accent-color: var(--p-orange); margin-right: 0.35rem; }

.p-regform #registerAcc .invalid {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  color: #b3400f;
}

/* Refine the T&C scroll box's look; height/scroll come from css/default.php. */
.p-regform #registerAcc .regoTsandCs {
  border: 1.5px solid rgba(27, 62, 93, 0.14);
  border-radius: 12px;
  font-family: var(--p-font-ui);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--p-body-2);
}

/* Step buttons across all forms: orange when live, muted while the
   submitbuttondisabled class (toggled by js/register.php) is present. */
.p-regform #registerAcc input[type="button"],
.p-regform #registerAcc input[type="submit"] {
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 1rem;
  background: var(--p-orange);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 0.9rem 2.2rem;
  margin-top: 1.2rem;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(231, 125, 32, 0.26);
  transition: background 0.2s;
}

.p-regform #registerAcc input[type="button"]:hover,
.p-regform #registerAcc input[type="submit"]:hover { background: var(--p-orange-hover); }

.p-regform #registerAcc input.submitbuttondisabled,
.p-regform #registerAcc input.submitbuttondisabled:hover {
  background: #c6ccd2;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

.p-regform #ajaxResult h2,
.p-regform #ajaxResult h3,
.p-regform #ajaxResult h4 { font-family: var(--p-font-display); font-weight: 700; color: var(--p-ink); }

.p-regform #ajaxResult p { font-family: var(--p-font-ui); color: var(--p-body-alt); }

/* ==================== product subpage article template ====================
   No .dc counterparts exist for the /products/* subpages, so they share one
   article layout composed from the system: About-style hero, framed explainer
   video, single-column copy with figure cards, the .p-story-quote testimonial
   card where the page has one, and the shared final CTA band. */
.p-sub { position: relative; z-index: 1; padding: 0.5rem 0 4.5rem; }

.p-sub-in { max-width: 900px; margin: 0 auto; padding: 0 2.5rem; }

.p-sub-video {
  background: #fff;
  border: 1px solid var(--p-hairline);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(9, 30, 48, 0.1);
  margin: 0 0 3rem;
}

.p-sub-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
}

.p-sub-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--p-ink);
  margin: 2.6rem 0 1rem;
}

.p-sub-h3 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--p-ink);
  margin: 2rem 0 0.8rem;
}

.p-sub p {
  font-family: var(--p-font-ui);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--p-body-2);
  margin: 0 0 1rem;
}

.p-sub p a { color: var(--p-blue); font-weight: 600; text-decoration: none; }
.p-sub p a:hover { text-decoration: underline; }

.p-sub-fig {
  border: 1px solid var(--p-hairline);
  border-radius: 16px;
  overflow: hidden;
  margin: 1.4rem 0 1.6rem;
}

.p-sub-fig img { display: block; width: 100%; height: auto; }

.p-sub .p-prod-ul { margin: 1rem 0 1.4rem; }
.p-sub .p-prod-ul li { font-size: 0.95rem; }
.p-sub .p-prod-ul .p-prod-ul { margin: 0.5rem 0 0.2rem 0.3rem; }
.p-sub .p-prod-ul .p-prod-ul li::before { background: var(--p-blue); width: 5px; height: 5px; }

.p-sub .p-story-quote { margin: 2.2rem 0 0.6rem; }

/* Definition rows on the integrate page (protocol / format explanations). */
.p-sub-def { display: grid; grid-template-columns: 160px 1fr; gap: 0.55rem 1.4rem; margin: 0 0 1.4rem; }
.p-sub-def dt { font-family: var(--p-font-ui); font-weight: 700; font-size: 0.92rem; color: var(--p-ink); }
.p-sub-def dd { font-family: var(--p-font-ui); font-size: 0.95rem; line-height: 1.6; color: var(--p-body-2); margin: 0; }
@media (max-width: 600px) { .p-sub-def { grid-template-columns: 1fr; gap: 0.15rem 0; } .p-sub-def dd { margin-bottom: 0.6rem; } }

/* Testimonial cards on /about/testimonials - white cards with the client logo. */
.p-testi {
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.1);
  border-radius: 20px;
  padding: 2rem 2.1rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 14px 40px rgba(27, 62, 93, 0.06);
}

.p-testi-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.p-testi-name {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}

.p-testi-head img { height: 44px; width: auto; max-width: 150px; object-fit: contain; }

.p-testi-by { font-family: var(--p-font-ui); font-weight: 600; font-size: 0.88rem; color: var(--p-ink); margin-top: 0.4rem; }

/* Indented legal clauses on terms_and_conditions. */
.p-sub .p-ind1 { margin-left: 1.6rem; }
.p-sub .p-ind2 { margin-left: 3.2rem; }

/* ==================================================================
   pricing page — measured from demoprodo/site/Pricing.dc.html
   ================================================================== */

/* The .dc pricing body keeps the home (blue) gradient, shortened to 780px,
   overriding the grey inner-page default. */
body.p-page--pricing {
  background-color: #e8eff7;
  background-image: linear-gradient(180deg, #0b2236 0%, #123a59 12%, #1d6191 26%,
    #4f97c4 42%, #a9cfe6 58%, #d7e6f2 74%, #e8eff7 100%);
  background-size: 100% 780px;
}

.p-pr-in { max-width: 1600px; margin: 0 auto; padding: 0 2.5rem; }

/* ---------- hero: split card, dark panel + photo ---------- */
.p-prhero { position: relative; z-index: 1; padding: 1.6rem 0 3rem; }

.p-prhero-card {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 44px 100px rgba(6, 18, 32, 0.45);
  min-height: 552px;
}

.p-prhero-dark {
  position: relative;
  background: linear-gradient(157deg, #1b3e5d 0%, #0b2236 100%);
  padding: clamp(1.9rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.p-prhero-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: 1.1rem;
}

.p-prhero-h1 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 15ch;
}

.p-prhero-sub {
  font-family: var(--p-font-ui);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: #dbeaf3;
  margin: 1.3rem 0 0;
  max-width: 40ch;
}

.p-prhero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; }

.p-prhero-note { font-family: var(--p-font-ui); font-size: 0.86rem; color: rgba(220, 235, 245, 0.72); margin-top: 1.4rem; }

.p-prhero-photo {
  position: relative;
  min-height: 320px;
  background-color: #0b2236;
  background-position: center 32%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Kakadu photo. The inline style on .p-prhero-photo carries the 1400px variant
   for desktop; a phone only ever shows it 350px wide, so override it here rather
   than making every mobile visitor fetch the large file. !important is needed to
   beat the element's own inline background-image. */
@media (max-width: 780px) {
  .p-prhero-photo { background-image: url("../images/au-kakadu-780.jpg") !important; }
}

@media (max-width: 460px) {
  .p-prhero-photo { background-image: url("../images/au-kakadu-420.jpg") !important; }
}


.p-prhero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 34, 54, 0.55) 0%, rgba(11, 34, 54, 0) 34%); }

.p-prhero-float {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 15px;
  box-shadow: 0 20px 46px rgba(6, 18, 32, 0.3);
}

.p-prhero-float--send { top: 12%; right: 9%; width: min(290px, 54%); padding: 0.95rem 1.05rem; }

.p-prhero-float-head { display: flex; align-items: center; justify-content: space-between; }

.p-prhero-float-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--p-font-ui); font-weight: 700; font-size: 0.84rem; color: var(--p-ink); }

.p-prhero-float-arrow { color: #9aa8b2; font-size: 1.1rem; line-height: 1; }

.p-prhero-float-bar { height: 6px; border-radius: 4px; background: #e4e9ee; margin-top: 0.8rem; }
.p-prhero-float-bar--short { width: 62%; margin-top: 0.42rem; }

.p-prhero-float--row { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; width: min(345px, 72%); }
.p-prhero-float--delivered { top: 37%; right: 6%; }
.p-prhero-float--pulled { top: 59%; right: 12%; }

.p-prhero-fico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-prhero-fico--green { background: rgba(47, 143, 84, 0.14); color: #2f8f54; }
.p-prhero-fico--orange { background: rgba(231, 125, 32, 0.16); color: var(--p-orange); }

.p-prhero-float-t { font-family: var(--p-font-ui); font-weight: 700; font-size: 0.86rem; color: var(--p-ink); line-height: 1.25; }
.p-prhero-float-s { font-family: var(--p-font-ui); font-size: 0.72rem; color: #7a8791; margin-top: 1px; }

/* ---------- choose your path ---------- */
.p-prplans-head { max-width: 680px; margin: 0 auto 1.8rem; text-align: center; }

.p-prplans-head .p-eyebrow { color: #b5490f; display: block; margin-bottom: 1rem; }

.p-prplans-h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--p-ink);
  margin: 0;
}

.p-prplans-sub { font-family: var(--p-font-ui); font-size: 1.05rem; line-height: 1.6; color: #4a5b66; margin: 1.1rem 0 0; }

.p-prpromises { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; max-width: 840px; margin: 0 auto 3rem; }

.p-prpromise {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--p-navy);
  background: #fbfcfd;
  border: 1px solid rgba(27, 62, 93, 0.12);
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
}

.p-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; align-items: stretch; }

.p-plan { position: relative; border-radius: 20px; background: #fff; border: 1px solid rgba(27, 62, 93, 0.12); box-shadow: 0 10px 30px rgba(27, 62, 93, 0.05); }

.p-plan-in { display: flex; flex-direction: column; height: 100%; padding: 1.9rem 1.7rem 1.8rem; position: relative; z-index: 1; }

.p-plan--featured { background: #f5fafd; border: 2px solid var(--p-blue); box-shadow: 0 22px 50px rgba(20, 60, 95, 0.14); }
.p-plan--featured .p-plan-in { padding-top: 2.1rem; }

.p-plan--dark { background: linear-gradient(160deg, #1b3e5d, #0b2236); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 26px 60px rgba(11, 34, 54, 0.28); overflow: hidden; }

.p-plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--p-font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--p-orange);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  box-shadow: 0 6px 16px rgba(231, 125, 32, 0.32);
  white-space: nowrap;
}

.p-plan-waratah {
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 250px;
  height: 250px;
  pointer-events: none;
  opacity: 0.16;
  filter: blur(1px) saturate(0.85);
  transform: scaleX(-1);
}

.p-plan-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem; }

.p-plan-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.p-plan-ico--blue { background: rgba(29, 126, 179, 0.1); color: var(--p-blue); }
.p-plan-ico--solid { background: var(--p-blue); color: #fff; }
.p-plan-ico--orange { background: rgba(231, 125, 32, 0.18); color: var(--p-orange); }

.p-plan-level { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.p-plan-meter { display: flex; gap: 3px; }
.p-plan-meter span { width: 16px; height: 5px; border-radius: 3px; background: #e2e7ec; }
.p-plan-meter .on { background: var(--p-orange); }
.p-plan--featured .p-plan-meter span:not(.on) { background: #cddbe4; }

.p-plan-tag { font-family: var(--p-font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #90a0ab; }
.p-plan--featured .p-plan-tag { color: #6a8598; }
.p-plan--dark .p-plan-tag { color: rgba(220, 235, 245, 0.6); }

.p-plan-h3 { font-family: var(--p-font-ui); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--p-ink); margin: 0 0 0.5rem; }

.p-plan-p { font-family: var(--p-font-ui); font-size: 0.98rem; line-height: 1.55; color: #4a5b66; margin: 0; }

.p-plan-label { font-family: var(--p-font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a96a1; margin: 1.35rem 0 0.5rem; }
.p-plan-label--list { margin-bottom: 0.65rem; }

.p-plan-list { display: flex; flex-direction: column; gap: 0.55rem; }

.p-plan-item { display: flex; gap: 0.6rem; align-items: flex-start; font-family: var(--p-font-ui); font-size: 0.92rem; line-height: 1.45; color: var(--p-body-strong, #3f5563); }
.p-plan-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--p-orange); flex-shrink: 0; margin-top: 0.5rem; }

.p-plan--dark .p-plan-h3 { color: #fff; }
.p-plan--dark .p-plan-p { color: rgba(220, 235, 245, 0.78); }
.p-plan--dark .p-plan-label { color: rgba(220, 235, 245, 0.5); }
.p-plan--dark .p-plan-item { color: rgba(220, 235, 245, 0.82); }

.p-plan-cta {
  display: block;
  text-align: center;
  margin-top: auto;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--p-orange);
  color: #fff;
  text-decoration: none;
  border-radius: 11px;
  padding: 0.8rem 1rem;
  box-shadow: 0 10px 24px rgba(231, 125, 32, 0.26);
  transition: background 0.15s;
}
.p-plan-cta:link, .p-plan-cta:visited { color: #fff; }
.p-plan-cta:hover { background: var(--p-orange-hover); color: #fff; }

/* CTAs sit at the bottom of the card; content above needs breathing room. */
.p-plan-list, .p-plan-ps { margin-bottom: 1.6rem; }

.p-plan-ps { border-top: 1px solid rgba(27, 62, 93, 0.12); margin-top: 1.5rem; }
.p-plan-ps summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 0 0.9rem;
  font-family: var(--p-font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--p-blue);
}
.p-plan-ps summary:hover { color: #155f88; }
.p-plan-ps summary::-webkit-details-marker { display: none; }
.p-plan-ps svg { flex-shrink: 0; transition: transform 0.3s ease; }
.p-plan-ps[open] svg { transform: rotate(180deg); }

.p-plan-ps-row { display: grid; grid-template-columns: 1fr auto; gap: 0.9rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid rgba(27, 62, 93, 0.08); }
.p-plan-ps-desc { font-family: var(--p-font-ui); font-size: 0.86rem; line-height: 1.5; color: #3f5563; }
.p-plan-ps-desc span { color: #8a97a1; }
.p-plan-ps-price { text-align: right; white-space: nowrap; }
.p-plan-ps-amount { font-family: var(--p-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--p-navy); }
.p-plan-ps-per { font-family: var(--p-font-ui); font-size: 0.68rem; color: #8a97a1; }
.p-plan-ps-note { font-family: var(--p-font-ui); font-size: 0.76rem; color: #8a97a1; margin: 0.7rem 0 0; }

.p-prplans-more { text-align: center; margin-top: 2.6rem; }
.p-prplans-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--p-blue);
  text-decoration: none;
  border-bottom: 2px solid rgba(29, 126, 179, 0.35);
  padding-bottom: 3px;
}
.p-prplans-more a:hover { color: #155f8a; border-color: var(--p-blue); }

/* ---------- quick estimate ---------- */
.p-panel--est {
  background:
    radial-gradient(ellipse 70% 60% at 12% 8%, rgba(45, 111, 219, 0.26), transparent 55%),
    radial-gradient(ellipse 75% 65% at 88% 92%, rgba(231, 125, 32, 0.42), transparent 60%),
    rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
  padding: 2.4rem 0 5rem;
}

.p-est-head { max-width: 640px; margin: 0 0 2.6rem; }
.p-est-head .p-eyebrow { color: #b5490f; display: block; margin-bottom: 1rem; }
.p-est-sub { font-family: var(--p-font-ui); font-size: 1.08rem; line-height: 1.6; color: #4a5b66; margin: 1.2rem 0 0; max-width: 40rem; }

.p-est-card { max-width: 640px; background: #fbfcfd; border: 1px solid rgba(27, 62, 93, 0.1); border-radius: 22px; padding: 2.1rem 2.1rem 2.2rem; }

.p-est-q { margin-bottom: 1.7rem; }

.p-est-qlabel { font-family: var(--p-font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #6a7884; margin-bottom: 0.7rem; }

.p-est-qhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; }
.p-est-qhead .p-est-qlabel { margin-bottom: 0; }
.p-est-vol { font-family: var(--p-font-ui); font-weight: 700; font-size: 1.05rem; color: var(--p-blue); }

.p-est-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.p-est-chip {
  font-family: var(--p-font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.14s;
  border: 1px solid rgba(27, 62, 93, 0.18);
  background: #fff;
  color: #3f5563;
}
.p-est-chip.is-on { border-color: var(--p-navy); background: var(--p-navy); color: #fff; }

.p-est-slider { width: 100%; accent-color: var(--p-orange); height: 6px; cursor: pointer; }
.p-est-scale { display: flex; justify-content: space-between; font-family: var(--p-font-ui); font-size: 0.72rem; color: #90a0ab; margin-top: 0.45rem; }

.p-est-result { border-top: 1px solid rgba(27, 62, 93, 0.1); padding-top: 1.5rem; }
.p-est-range { font-family: var(--p-font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -0.015em; color: var(--p-navy); line-height: 1.1; }
.p-est-unit { font-family: var(--p-font-ui); font-size: 0.86rem; font-weight: 600; color: #6a7884; margin-top: 0.3rem; }
.p-est-note { font-family: var(--p-font-ui); font-size: 0.9rem; line-height: 1.55; color: #5d6b76; margin: 1rem 0 0; max-width: 44ch; }
.p-est-talk { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--p-font-ui); font-weight: 600; font-size: 0.98rem; color: var(--p-blue); text-decoration: none; border-bottom: 2px solid rgba(29, 126, 179, 0.35); padding-bottom: 2px; margin-top: 1.3rem; }
.p-est-talk:link, .p-est-talk:visited { color: var(--p-blue); }
.p-est-talk:hover { color: #155f8a; border-color: var(--p-blue); }

/* ---------- trust banner ---------- */
.p-prtrust-wrap { position: relative; z-index: 2; background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); padding: 0 0 3.8rem; }

.p-prtrust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  background: #fbfcfd;
  border: 1px solid rgba(27, 62, 93, 0.1);
  border-radius: 20px;
  padding: 1.5rem 2.2rem;
  box-shadow: 0 14px 40px rgba(27, 62, 93, 0.05);
}

.p-prtrust-left { display: flex; align-items: center; gap: 1.4rem 2.2rem; flex-wrap: wrap; }
.p-prtrust-label { font-family: var(--p-font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--p-navy); max-width: 15ch; line-height: 1.45; }
.p-prtrust-logos { display: flex; align-items: center; gap: 1.9rem; }
.p-prtrust-logos img { width: auto; opacity: 0.82; }

.p-prtrust-stats { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); }
.p-prtrust-stat { text-align: center; }
.p-prtrust-num { font-family: var(--p-font-display); font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: -0.02em; color: var(--p-navy); }
.p-prtrust-num--star { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.p-prtrust-cap { font-family: var(--p-font-ui); font-size: 0.8rem; color: var(--p-body); margin-top: 0.3rem; }
.p-prtrust-div { width: 1px; height: 38px; background: rgba(27, 62, 93, 0.13); }

/* ---------- how pricing works ---------- */
.p-prhow-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.p-prhow-head .p-eyebrow { color: var(--p-blue); display: block; margin-bottom: 1rem; }

.p-prhow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

.p-prhow-card { background: #fff; border: 1px solid #ece2ce; border-radius: 18px; padding: 1.9rem; }
.p-prhow-num { font-family: var(--p-font-ui); font-weight: 700; font-size: 1.05rem; color: var(--p-orange); width: 38px; height: 38px; border-radius: 11px; background: rgba(231, 125, 32, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.p-prhow-h { font-family: var(--p-font-ui); font-weight: 600; font-size: 1.28rem; color: var(--p-ink); margin-bottom: 0.55rem; letter-spacing: -0.01em; }
.p-prhow-p { font-family: var(--p-font-ui); font-size: 0.98rem; line-height: 1.65; color: #4a5b66; margin: 0; }

/* ---------- principles marquee ---------- */
.p-panel--cool { background: linear-gradient(180deg, rgba(238, 244, 250, 0.44), rgba(228, 238, 246, 0.44)); }

.p-prmarq-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.p-prmarq-head .p-eyebrow { color: #b5490f; }

.p-prmarq-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

.p-prmarq-track { display: flex; align-items: center; gap: 2.6rem; width: max-content; animation: p-marquee 28s linear infinite; }

.p-prmarq-item { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; font-family: var(--p-font-display); font-weight: 600; font-size: 1.32rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--p-ink); }
.p-prmarq-item::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, #ffb877, #e77d20 60%, #e77d20); box-shadow: 0 0 10px rgba(231, 125, 32, 0.55); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .p-prmarq-track { animation: none; }
}

/* ---------- pricing FAQ ---------- */
.p-faq-in { max-width: 820px; margin: 0 auto; padding: 0 2.5rem; }

.p-faq-head { text-align: center; margin-bottom: 2.6rem; }
.p-faq-head .p-eyebrow { color: var(--p-blue); display: block; margin-bottom: 1rem; }

.p-faq-list { border-top: 1px solid rgba(27, 62, 93, 0.1); }

.p-faq { border-bottom: 1px solid rgba(27, 62, 93, 0.1); }
.p-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.35rem 0.2rem;
  font-family: var(--p-font-ui);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--p-ink);
  transition: color 0.18s;
}
.p-faq summary:hover { color: var(--p-blue); }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq svg { flex-shrink: 0; transition: transform 0.3s ease; }
.p-faq[open] svg { transform: rotate(180deg); }
.p-faq-ans { font-family: var(--p-font-ui); font-size: 1rem; line-height: 1.65; color: #4a5b66; padding: 0 3rem 1.4rem 0.2rem; max-width: 60ch; }

.p-faq-cta { text-align: center; margin-top: 2.6rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .p-prhero-card { grid-template-columns: 1fr; }
  .p-prhero-photo { min-height: 360px; }
  .p-plan-grid { grid-template-columns: 1fr; }
  .p-prhow-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .p-est-chips { gap: 0.45rem; }
  .p-prtrust { flex-direction: column; text-align: center; gap: 1.5rem; }
  .p-prtrust-left { justify-content: center; }
}

/* ==================================================================
   nav login button + login panel (migrated pages only)
   ==================================================================
   The #user_login form markup is shared with the legacy design and its CSS
   lives in css/default.php, which loads AFTER this file - so every override
   here carries a body.p-page prefix to win on specificity, and the legacy
   look is untouched on un-migrated pages. */

.p-nav-login {
  font-family: var(--p-font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  padding: 0.5rem 1.15rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.p-nav-login:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }

.p-nav[data-scrolled="true"] .p-nav-login { color: var(--p-navy); border-color: rgba(27, 62, 93, 0.22); }
.p-nav[data-scrolled="true"] .p-nav-login:hover { border-color: var(--p-navy); background: rgba(27, 62, 93, 0.06); }

/* Hidden panel by default; the button and panel swap visibility. */
body.p-page #user_login { display: none; }
body.p-page.p-login-open #user_login { display: block; }
body.p-page.p-login-open .p-nav-login { display: none; }

body.p-page #user_login {
  top: 92px;
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(27, 62, 93, 0.28);
  padding: 1.1rem 1.25rem 1.35rem;
}

.p-login-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }

.p-login-title { font-family: var(--p-font-display); font-weight: 600; font-size: 1.05rem; color: var(--p-ink); }

.p-login-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: rgba(27, 62, 93, 0.06);
  color: var(--p-ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.p-login-close:hover { background: rgba(27, 62, 93, 0.12); }

body.p-page #loginSlider {
  position: static;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

body.p-page #loginSlider .field { margin-bottom: 0.7rem; }
body.p-page #loginSlider .field i { display: none; }

body.p-page #loginSlider input[type=text],
body.p-page #loginSlider input[type=password] {
  width: 100%;
  font-family: var(--p-font-ui);
  font-size: 0.95rem;
  font-weight: 400;
  text-shadow: none;
  padding: 11px 13px;
  border: 1px solid var(--p-hairline);
  border-radius: 10px;
  background: var(--p-surface, #fbfaf7);
  color: var(--p-ink);
  box-shadow: none;
  margin-bottom: 0;
}
body.p-page #loginSlider input:focus { border-color: var(--p-blue); }

body.p-page #loginSlider p a {
  font-family: var(--p-font-ui);
  font-size: 0.85rem;
  color: var(--p-blue);
}

body.p-page #login_message { width: auto; font-family: var(--p-font-ui); font-size: 0.88rem; }

/* The legacy submit is a fixed 60px circle pinned to the viewport edge;
   restore it to a normal full-width orange button inside the card. */
body.p-page #submitButton .submit {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0.9rem 0 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
body.p-page #submitButton .submit::after { content: none; }

body.p-page #submitButton button {
  width: 100%;
  height: auto;
  font-family: var(--p-font-ui);
  font-weight: 600;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background-color: var(--p-orange);
  cursor: pointer;
  transition: background 0.15s;
}
body.p-page #submitButton button:hover { background: var(--p-orange-hover); }
body.p-page #submitButton button:active { background: var(--p-orange-hover); box-shadow: none; }

body.p-page #submitButton .icon-arrow-right.icon-large {
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .p-nav-login { padding: 0.4rem 0.85rem; font-size: 0.88rem; }
  body.p-page #user_login { right: 12px; }
}

/* ==================================================================
   live chat widget shell (migrated pages) — .dc Prodo assistant geometry,
   honest live-chat labels. The panel body is the existing chat/index.php
   iframe; its inner look lives in chat/css/chat.css.
   ================================================================== */

.p-chat-pulse {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--p-orange);
  opacity: 0.32;
  z-index: 8999;
  animation: p-chat-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes p-chat-pulse {
  0% { transform: scale(0.55); opacity: 0.5; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p-chat-pulse { animation: none; opacity: 0; }
}

.p-chat-launch {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--p-navy);
  border: 2px solid #fff;
  box-shadow: 0 8px 24px rgba(27, 62, 93, 0.32);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.p-chat-launch:hover { background: #16334d; }

.p-chat-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3fae6a;
  border: 2px solid var(--p-navy);
}

.p-chat.open .p-chat-launch, .p-chat.open .p-chat-pulse { display: none; }

.p-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9001;
  width: 374px;
  max-width: calc(100vw - 32px);
  height: 580px;
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(27, 62, 93, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.p-chat-panel[hidden] { display: none; }

.p-chat-head {
  background: var(--p-navy);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.p-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #13293c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.p-chat-dot--head { right: 0; bottom: 0; width: 11px; height: 11px; }

.p-chat-title { font-family: var(--p-font-display); font-weight: 700; font-size: 1.02rem; color: #fff; line-height: 1.1; }
.p-chat-sub { font-family: var(--p-font-ui); font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }

.p-chat-close {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-chat-close:hover { background: rgba(255, 255, 255, 0.2); }

.p-chat-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; }

/* ==================================================================
   resources page — measured from demoprodo/site/Resources.dc.html
   ================================================================== */

/* The .dc puts a 174deg dark-to-sky ramp on its hero block over a #f6f7f7 page;
   here it goes on the body like the other inner pages, so the transparent nav
   sits on the dark top. */
body.p-page--resources {
  background-color: #f6f7f7;
  background-image: linear-gradient(174deg, #0b2236 0%, #123a59 20%, #1d6191 40%,
    #3f82b3 56%, #79add4 72%, #aed2e9 88%, #c8e0ef 100%);
  background-size: 100% 640px;
}

/* Anchored sections (#guides etc.) land clear of the sticky nav. */
html { scroll-padding-top: 96px; }

.p-res-in { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }

.p-eyebrow--rust { color: #b5490f; }

/* ---------- hero ---------- */
.p-reshero { position: relative; z-index: 1; padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(5rem, 11vh, 8rem); }
.p-reshero-text { max-width: 47rem; }
.p-reshero-eyebrow {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: 1.2rem;
}
.p-reshero-h1 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #fff;
}
.p-reshero-sub {
  font-family: var(--p-font-ui);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  color: #d7e6f0;
  margin: 1.6rem 0 0;
  max-width: 40rem;
}
@keyframes p-birdfloat {
  0%, 100% { transform: translateY(-50%) translate(0, 0) rotate(0); }
  50% { transform: translateY(-50%) translate(-12px, -18px) rotate(-1.5deg); }
}
.p-reshero-bird {
  position: absolute;
  right: clamp(-2.5rem, 2vw, 4.5rem);
  top: 44%;
  transform: translateY(-50%);
  width: clamp(170px, 19vw, 320px);
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 26px 40px rgba(6, 18, 32, 0.45));
  animation: p-birdfloat 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .p-reshero-bird { animation: none; } }

/* ---------- category cards over the grassland band ---------- */
.p-rescats { position: relative; z-index: 1; padding: clamp(3.5rem, 7vh, 5rem) 0 clamp(5rem, 10vh, 8rem); overflow: hidden; }
/* Grassland band. Was an inline style pointing at grassland.png - a 1920px
   photograph saved as a 2.9MB 32-bit PNG, downloaded whole on every phone. It is
   now a JPEG in three widths, picked per breakpoint here. Relative url()
   resolves against the stylesheet, i.e. <domain>/<siteVersion>/images/. */
.p-rescats-bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/grassland-1920.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 1400px) {
  .p-rescats-bg { background-image: url("../images/grassland-1400.jpg"); }
}

@media (max-width: 780px) {
  .p-rescats-bg { background-image: url("../images/grassland-780.jpg"); }
}
.p-rescats-fade { position: absolute; left: 0; right: 0; pointer-events: none; }
.p-rescats-fade--top { top: 0; height: 30%; background: linear-gradient(180deg, #c8e0ef 0%, rgba(200, 224, 239, 0) 100%); }
.p-rescats-fade--bottom { bottom: 0; height: 48%; background: linear-gradient(180deg, rgba(243, 236, 224, 0) 0%, #f3ece0 86%); }
.p-rescats-in { position: relative; }
.p-rescat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.p-rescat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid rgba(27, 62, 93, 0.09);
  border-radius: 16px;
  padding: 1.35rem;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(9, 30, 48, 0.08);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.p-rescat:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(9, 30, 48, 0.12); border-color: rgba(231, 125, 32, 0.45); }
.p-rescat-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(29, 126, 179, 0.12);
  color: var(--p-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-rescat-ico--orange { background: rgba(231, 125, 32, 0.12); color: var(--p-orange); }
.p-rescat-t { font-family: var(--p-font-display); font-weight: 700; font-size: 1rem; color: var(--p-ink); letter-spacing: -0.01em; }
.p-rescat-s { font-family: var(--p-font-ui); font-size: 0.82rem; color: var(--p-body); line-height: 1.45; }

/* ---------- section bands ---------- */
.p-resband { position: relative; z-index: 1; padding: clamp(4rem, 10vh, 6.5rem) 0; }
.p-resband--warm {
  background: linear-gradient(180deg, rgba(250, 241, 231, 0.48) 0%, rgba(246, 241, 230, 0.48) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
}
.p-resband--white {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}
.p-resband--grey {
  background: linear-gradient(180deg, rgba(240, 241, 242, 0.46) 0%, rgba(232, 233, 234, 0.46) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
}
.p-resband-head { max-width: 44rem; margin-bottom: 2.8rem; }
.p-resband-head .p-eyebrow { display: block; margin-bottom: 1rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; }
.p-resband-h2 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--p-ink);
}
.p-resband-lead { font-family: var(--p-font-ui); font-size: 1.08rem; line-height: 1.6; color: var(--p-body-alt); margin: 1.1rem 0 0; }

/* ---------- guide cards (static: no articles exist yet) ---------- */
.p-resart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.p-resart { background: #fff; border: 1px solid rgba(27, 62, 93, 0.09); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.p-resart-top { height: 148px; display: flex; align-items: flex-end; padding: 1.1rem; position: relative; }
.p-resart-glyph {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 2.6rem;
  position: absolute;
  top: 0.4rem;
  right: 1.1rem;
  opacity: 0.26;
  letter-spacing: -0.03em;
  color: #fff;
}
.p-resart-glyph--orange { color: var(--p-orange); opacity: 0.3; }
.p-resart-tag {
  font-family: var(--p-font-ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--p-ink);
}
.p-resart-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.p-resart-body h3 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--p-ink);
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0 0 0.5rem;
}
.p-resart-body p { font-family: var(--p-font-ui); font-size: 0.9rem; color: var(--p-body-alt); line-height: 1.55; margin: 0; flex: 1; }

/* ---------- getting started steps ---------- */
.p-resgs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.p-resgs { background: #fff; border: 1px solid var(--p-hairline); border-radius: 16px; padding: 1.7rem; }
.p-resgs-n { font-family: var(--p-font-display); font-weight: 700; font-size: 1.7rem; color: var(--p-orange); line-height: 1; margin-bottom: 0.8rem; }
.p-resgs h4, .p-resbp h4 {
  font-family: var(--p-font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--p-ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.p-resgs p, .p-resbp p { font-family: var(--p-font-ui); font-size: 0.88rem; color: var(--p-body-alt); line-height: 1.55; margin: 0; }

/* ---------- best practice cards ---------- */
.p-resbp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.p-resbp { background: #fff; border: 1px solid rgba(27, 62, 93, 0.08); border-radius: 16px; padding: 1.7rem; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.p-resbp:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(9, 30, 48, 0.1); border-color: rgba(231, 125, 32, 0.4); }
.p-resbp h4 { font-size: 1.1rem; }
.p-resbp-tag {
  font-family: var(--p-font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-orange);
  margin-bottom: 0.6rem;
}

/* ---------- checklist rows (static: no downloads exist yet) ---------- */
.p-restpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.p-restpl { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid rgba(27, 62, 93, 0.09); border-radius: 16px; padding: 1.4rem 1.6rem; }
.p-restpl-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(29, 126, 179, 0.12);
  color: var(--p-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-restpl h4 { font-family: var(--p-font-display); font-weight: 600; font-size: 1.02rem; color: var(--p-ink); margin: 0; letter-spacing: -0.01em; }
.p-restpl p { font-family: var(--p-font-ui); font-size: 0.84rem; color: var(--p-body); margin: 0.2rem 0 0; }
.p-restpl-note { font-family: var(--p-font-ui); font-size: 0.95rem; color: var(--p-body-alt); margin: 1.6rem 0 0; }

/* ---------- final CTA ---------- */
.p-rescta { text-align: center; border-top: 1px solid rgba(27, 62, 93, 0.06); }
.p-rescta-in { max-width: 820px; margin: 0 auto; padding: 0 2.5rem; }
.p-rescta-in .p-eyebrow { display: block; margin-bottom: 1rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; }
.p-rescta-h2 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}
.p-rescta-sub {
  font-family: var(--p-font-ui);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--p-body-alt);
  margin: 1.3rem auto 0;
  max-width: 38ch;
}
.p-rescta-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }

/* ---------- responsive (the .dc's 980/860/600 rules) ---------- */
@media (max-width: 980px) {
  .p-rescat-grid { grid-template-columns: repeat(3, 1fr); }
  .p-resgs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .p-resart-grid, .p-resbp-grid { grid-template-columns: 1fr 1fr; }
  .p-restpl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .p-rescat-grid, .p-resart-grid, .p-resbp-grid, .p-resgs-grid { grid-template-columns: 1fr; }
  .p-reshero-bird { width: 190px; top: auto; bottom: 1.5rem; right: -1.5rem; transform: none; animation: none; }
}

/* ================================================================
   RESOURCE ARTICLES  (/resources/<slug>)
   Shared by every page rendered through layout/_resource_article.php.
   Body class is p-page--inner p-page--resources-<slug>, so the article
   rules key off the substring rather than listing all seven slugs.
   ================================================================ */

/* Reading measure, narrower than the 1180px content width used elsewhere. */
.p-art-in { max-width: 780px; margin: 0 auto; padding: 0 2.5rem; }

/* ---------- article hero ----------
   The hero paints its own dark band rather than borrowing the shared
   p-page--inner body gradient. That gradient reaches light grey at 437px, but
   hero content runs past it whenever a headline wraps to three lines, which
   left the light-blue standfirst unreadable. Owning the backdrop makes hero
   contrast independent of headline length. */
.p-arthero {
  position: relative;
  z-index: 1;
  /* Pulled up under the 81px sticky nav (80px bar + its 1px border) and padded
     back down, so the band runs unbroken from the top of the page instead of
     seaming against the body gradient behind the nav. The nav's z-index 50
     keeps it above this. */
  margin-top: -81px;
  padding: calc(81px + clamp(2.5rem, 6vh, 4rem)) 0 clamp(4rem, 9vh, 6rem);
  background: linear-gradient(180deg, #0b2236 0%, #123a59 45%, #17527d 75%, #1d6191 100%);
}
.p-arthero-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--p-font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.18s;
}
.p-arthero-back:link, .p-arthero-back:visited { color: rgba(255, 255, 255, 0.78); }
.p-arthero-back:hover { color: #fff; text-decoration: none; }
.p-arthero-meta { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.p-arthero-tag {
  font-family: var(--p-font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  background: var(--p-orange);
  color: #fff;
}
.p-arthero-read {
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.p-arthero-h1 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.p-arthero-sub {
  font-family: var(--p-font-ui);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.62;
  color: #d7e6f0;
  margin: 1.4rem 0 0;
}

/* ---------- the frosted article panel ---------- */
.p-artbody {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border-radius: 44px 44px 0 0;
  /* Signature overlap: the panel rises over the hero, so the dark band shows
     through the notches outside its rounded top corners. */
  margin-top: -30px;
  padding: clamp(3rem, 7vh, 4.5rem) 0 clamp(3rem, 7vh, 4.5rem);
  box-shadow: 0 -16px 40px rgba(27, 62, 93, 0.05);
}

/* ---------- prose ---------- */
.p-prose { font-family: var(--p-font-ui); font-size: 1.06rem; line-height: 1.76; color: var(--p-body); }
.p-prose > :first-child { margin-top: 0; }
.p-prose > :last-child { margin-bottom: 0; }
.p-prose p { margin: 0 0 1.35rem; }
.p-prose h2 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.42rem, 2.4vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--p-ink);
  margin: 3rem 0 1.05rem;
}
.p-prose h3 {
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--p-navy);
  margin: 2rem 0 0.7rem;
}
.p-prose ul, .p-prose ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
.p-prose li { margin-bottom: 0.6rem; }
.p-prose li::marker { color: var(--p-orange); font-weight: 700; }
.p-prose strong { color: var(--p-body-2); font-weight: 700; }
.p-prose a { color: var(--p-blue); text-decoration: underline; text-underline-offset: 2px; }
.p-prose a:hover { color: var(--p-orange); }
.p-prose code {
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  border-radius: 5px;
  background: rgba(29, 126, 179, 0.1);
  color: var(--p-navy);
}

/* Pull-out box for a point the reader should not skim past. */
.p-prose-call {
  margin: 2rem 0;
  padding: 1.5rem 1.7rem;
  border-radius: 16px;
  border-left: 3px solid var(--p-orange);
  background: linear-gradient(180deg, rgba(250, 241, 231, 0.9), rgba(246, 241, 230, 0.9));
}
.p-prose-call p { margin: 0; color: var(--p-body-2); }
.p-prose-call-l {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b5490f;
  margin-bottom: 0.6rem;
}

/* Worked example: a message as the recipient would receive it. */
.p-prose-eg {
  margin: 1.4rem 0 1.9rem;
  padding: 1.3rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(29, 126, 179, 0.22);
  background: rgba(29, 126, 179, 0.07);
}
.p-prose-eg p { margin: 0; color: var(--p-ink); font-size: 1rem; line-height: 1.62; }
.p-prose-eg-l {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-blue);
  margin-bottom: 0.6rem;
}

/* Closing checklist: a white card so it reads as a takeaway, not body copy. */
.p-prose-check {
  margin: 2.6rem 0;
  padding: 2rem 2.2rem 1.6rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--p-border);
  box-shadow: 0 14px 34px rgba(9, 30, 48, 0.06);
}
.p-prose-check h2 { margin: 0 0 1.1rem; font-size: 1.3rem; }
.p-prose-check ul, .p-prose-check ol { margin-bottom: 0; }

/* Small print (the legal-information note on the compliance article). */
.p-artnote {
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--p-hairline);
  font-family: var(--p-font-ui);
  font-size: 0.86rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--p-body);
}

/* ---------- closing offer ---------- */
.p-artcta {
  margin-top: 3.2rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--p-hairline);
  text-align: center;
}
.p-artcta-h2 {
  margin: 0;
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--p-ink);
}
.p-artcta-sub {
  font-family: var(--p-font-ui);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--p-body-alt);
  margin: 0.9rem auto 0;
  max-width: 42ch;
}
.p-artcta-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; margin-top: 1.8rem; }

/* ---------- related reading ---------- */
/* The cards reuse .p-resart from the /resources grid; these rules cover it
   being an <a> rather than the <div> it started as. */
a.p-resart { text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
a.p-resart:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(9, 30, 48, 0.12);
  border-color: rgba(231, 125, 32, 0.45);
  text-decoration: none;
}
.p-resart-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-family: var(--p-font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--p-orange);
}
.p-resart-more::after { content: "\2192"; transition: transform 0.18s; }
a.p-resart:hover .p-resart-more::after { transform: translateX(3px); }
.p-artrel { border-radius: 44px 44px 0 0; margin-top: -30px; }

@media (max-width: 600px) {
  .p-artbody, .p-artrel { border-radius: 28px 28px 0 0; }
  .p-prose-check { padding: 1.5rem 1.4rem 1.2rem; }
  .p-prose-call, .p-prose-eg { padding: 1.2rem 1.3rem; }
}

/* ================================================================
   MOBILE REFINEMENTS
   Cross-cutting phone-screen fixes, kept together at the end of the file so they
   win over the section rules above without editing each one. Measured on a 390px
   viewport, the width this design was never checked at.
   ================================================================ */

/* ---------- content gutters ----------
   Every section container carried the desktop 2.5rem (40px) gutter down to the
   smallest screen, so a 390px phone had only 310px of usable width - long
   paragraphs wrapped every four or five words. 1.25rem matches what .p-hero-in
   and .p-footer-in already use at this breakpoint and returns 40px of measure.
   Only the horizontal padding is touched: the hero containers set vertical
   padding in the same shorthand and must keep it. */
@media (max-width: 600px) {
  .p-wrap,
  .p-abhero-in,
  .p-vt-in,
  .p-vals-in,
  .p-solhero-in,
  .p-ws,
  .p-stories-in,
  .p-abcta-in,
  .p-feat-in,
  .p-soltrust-in,
  .p-infra-in,
  .p-solcta-in,
  .p-prod-in,
  .p-ctinfo-in,
  .p-sub-in,
  .p-pr-in,
  .p-faq-in,
  .p-res-in,
  .p-rescta-in,
  .p-art-in {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---------- stacked call-to-action buttons ----------
   These rows are flex-wrap, so on a phone the buttons drop onto separate lines
   but keep their content widths - a 183px "Start for free" next to a 212px "Talk
   to a real person", centred, giving a ragged double edge. Stacking them full
   width makes one clean column and gives each a full-width tap area. */
@media (max-width: 600px) {
  .p-final-ctas,
  .p-abcta-ctas,
  .p-solcta-ctas,
  .p-rescta-ctas,
  .p-artcta-ctas,
  .p-prhero-ctas,
  .p-solhero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .p-final-ctas > .p-btn,
  .p-abcta-ctas > .p-btn,
  .p-solcta-ctas > .p-btn,
  .p-rescta-ctas > .p-btn,
  .p-artcta-ctas > .p-btn,
  .p-prhero-ctas > .p-btn,
  .p-solhero-ctas > .p-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ---------- tap targets ----------
   The hamburger was a 40x32 hit area and the footer links 18px tall, both well
   under the ~44px a thumb needs. The footer links stay visually the same size;
   only their hit area grows, so the column rhythm is unchanged. */
@media (max-width: 980px) {
  .p-nav-toggle {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .p-footer-col a,
  .p-footer-legal a { display: inline-block; padding: 0.45rem 0; }

  .p-footer-col ul { gap: 0.1rem; }

  /* The bottom row wraps to two lines here, and space-between then left-aligned
     the legal links under centred copy. Centre both so they agree. */
  .p-footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- footer legal contrast ----------
   0.78rem at 38% white over #0b2236 measured about 3.4:1 - under AA for text
   this size. 62% clears it while staying visibly secondary. Not scoped to a
   breakpoint: it is just as unreadable on a desktop screen. */
.p-footer-bottom p,
.p-footer-legal a,
.p-footer-legal a:link,
.p-footer-legal a:visited { color: rgba(255, 255, 255, 0.62); }

/* ---------- home hero headline and word reel ----------
   Both size themselves with a vw-based clamp on the assumption, stated in the
   .p-hero-h1 comment, that "this scales to fit rather than wrapping". That holds
   only until the clamp's rem floor takes over: below a 441px viewport 5.8vw is
   under 1.6rem, so the headline stops shrinking but is still white-space:nowrap,
   and "You've got a message to send." was cut off mid-word by .p-hero's
   overflow:hidden on every phone - 395px of text in a 350px box at 390px wide.
   Letting it wrap is the fix; the type stays at its floor size.

   .p-hero-sub no longer shares that defect: its rotating phrase is plain inline
   text now, so it wraps instead of pushing past the screen edge. The vw size is
   kept for rhythm, not to prevent overflow - at 320px it holds the sub-headline
   to two lines where the clamp's 22.4px floor gives three. */
@media (max-width: 460px) {
  .p-hero-h1 { white-space: normal; text-wrap: balance; }
  .p-hero-sub { font-size: 4.4vw; }
}

/* ---------- long unbreakable strings ----------
   Email addresses and URLs in body copy are single tokens wider than a phone
   column; without this they force their container past the viewport, which is
   what made /contact 30px too wide. */
.p-ctdept-row,
.p-ctside-val,
.p-sub-def dd { overflow-wrap: anywhere; }
/* ---------- narrow-phone nav row ----------
   The bar needs 369px for its brand + Login + hamburger, so on a 360px phone -
   still one of the two commonest widths - it overflowed and the browser widened
   the layout viewport to 369px, side-scrolling every page. The wordmark is the
   bulk of it at 192px; dropping it to 22px tall and tightening the row's own
   padding and gap brings the whole bar inside a 320px screen. */
@media (max-width: 460px) {
  .p-nav-in { padding-left: 1rem; padding-right: 1rem; gap: 0.5rem; }
  .p-nav-logo img { height: 22px; }
  .p-nav-login { padding-left: 0.85rem; padding-right: 0.85rem; }
}
/* ---------- decorations that bleed off the edge ----------
   .p-reshero-bird is placed at right:-1.5rem on a phone so the cockatoo runs off
   the edge on purpose, but nothing clipped it, so the document became 24px wider
   than the screen and every /resources page scrolled sideways. Clipping the hero
   keeps the intended bleed and stops the scroll. overflow-x alone would make the
   box a scroll container vertically too. */
.p-reshero { overflow: hidden; }

/* The pricing trust row is a nowrap flex line of three stats plus dividers, 319px
   wide inside a 280px column on a 320px screen. Letting it wrap and centre keeps
   it inside the smallest phones. */
@media (max-width: 600px) {
  .p-prtrust-stats { flex-wrap: wrap; justify-content: center; row-gap: 1.1rem; }
  .p-prtrust-div { display: none; }
}
/* ---------- about timeline on a phone ----------
   .p-vt is the mobile-only timeline (shown under 900px). Its rail column is 44px
   plus a 24px gap, and .p-vt-text carries min-width:240px, so a beat demanded
   308px inside the 280px available on a 320px screen - the page scrolled
   sideways, and even at 390px the rail ate 68px of an already narrow column.
   Halving the rail and dropping the text floor gives the content back.
   .p-vt-spine is positioned at left:2.5rem to line up with the container's own
   gutter, so it has to follow the 1.25rem mobile gutter set above or the line
   stops meeting its dots. */
@media (max-width: 600px) {
  .p-vt-spine { left: 1.25rem; width: 22px; }
  .p-vt-beat { grid-template-columns: 22px 1fr; column-gap: 0.9rem; }
  /* Not 0: .p-vt-body is a wrap flex row holding a 300px image and this text.
     At 0 the text never triggers a wrap, it just gets crushed to 12px and its
     words spill out. 200px still fits the 244px available on a 320px screen
     while being wide enough to push the image onto its own line. */
  .p-vt-text { min-width: 200px; }
  .p-vt-body { gap: 1.6rem; }
}
/* ---------- remaining confirmed defects: link-state shield ----------
   css/default.php:18 sets `a:link,a:hover,a:active,a:visited{color:#3366bb}`,
   specificity (0,1,1), which outranks .p-solhero-scroll's (0,1,0) `color:#fff`
   whichever file loads first. The link rendered #3366bb on the #3477a8 hero -
   1.16:1, invisible but for its underline. Same shield the button variants
   already carry above. Not breakpoint-scoped: it is wrong at every width. */
.p-solhero-scroll:link,
.p-solhero-scroll:visited,
.p-solhero-scroll:active { color: #fff; }

@media (max-width: 600px) {
  /* The waratah is already faded to 0.4 on tablet, but at phone width the hero
     text runs under the flower rather than beside it, and even 0.4 of a dark red
     bloom swallowed the end of the H1.
     !important is load-bearing here: solutions.php's parallax script writes
     `opacity` straight onto this element's style attribute every frame, so a
     plain rule never applies. Pinning it also disables the opacity part of that
     parallax, which is the right call on a phone - it tracks a pointer that a
     touch screen does not have. */
  .p-waratah { opacity: 0.2 !important; }

  /* The cockatoo is 190px tall and pinned to the hero's bottom edge, which put
     it straight over the last two lines of the standfirst. Giving the hero a
     deeper foot lets the bird have its own band under the copy. */
  .p-reshero { padding-bottom: 13rem; }
  .p-reshero-bird { width: 150px; }

  /* .link-button is the legacy newsite.css control (width:50%), still used by
     the A/B testing and Science of Emails download links. Half of a phone column
     is 155px, so the label wrapped to two cramped lines. Scoped under .p-page so
     only migrated pages change and newsite.css keeps the rest; that also beats
     newsite.css's (0,1,0), which would otherwise win on load order. */
  .p-page .link-button { width: 100%; }

  /* Desktop card padding left a ~220px measure inside a 390px screen. */
  .p-ws-panel { padding-left: 1rem; padding-right: 1rem; }
  .p-story-quote { padding: 1.4rem 1.3rem; }
}