/* =====================================================================
   PREMARK REFRESH — design system + motion layer
   ---------------------------------------------------------------------
   Loaded AFTER style.css on every page. It sets one coherent type pair,
   one token set and one motion language, and replaces the stacked
   "override" layers visually without touching page markup.

   Type:   Fraunces (display, editorial serif)  +  Inter Tight (UI/body)
   Colour: forest / sage (brand), warm ivory surfaces, terracotta accent
   Motion: calm, 600–900ms, one easing curve; all off with reduced motion

   Sections
     1  Tokens & base
     2  Typography
     3  Buttons & links
     4  Header, mega menu, mobile menu
     5  Home hero carousel (.hx)
     6  Interior heroes (.page-hero) + designed image fallback
     7  Sections & cards
     8  Home: about, clients, difference, process, sectors, founder, CTA
     9  Forms, modal, FAQ
    10  Footer, cookie bar, floating buttons
    11  Scroll-reveal system (used by motion.js)
    12  Page transitions
    13  Reduced motion
   ===================================================================== */

/* 1 ─ TOKENS & BASE ─────────────────────────────────────────────────── */
:root {
  --pm-forest: #14211a;
  --pm-forest-2: #1d2e24;
  --pm-sage: #3f4f3d;
  --pm-sage-2: #5e7667;
  --pm-sage-3: #8fa394;
  --pm-mist: #eaefe9;
  --pm-ivory: #f8f6f1;
  --pm-paper: #fffdf9;
  --pm-ink: #18201b;
  --pm-ink-2: #4c554e;
  --pm-ink-3: #7c847d;
  --pm-line: #e3dfd5;
  --pm-line-2: #eeebe4;
  --pm-accent: #c2583a;
  --pm-accent-2: #a8442a;
  --pm-accent-soft: #f6e4dc;
  --pm-gold: #b89462;

  --pm-display: "Fraunces", Georgia, "Times New Roman", serif;
  --pm-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pm-r-xs: 10px;
  --pm-r-sm: 14px;
  --pm-r: 20px;
  --pm-r-lg: 28px;

  /* brand-tinted shadows: depth carries the sage green, not neutral grey */
  --pm-shadow-1: 0 1px 2px rgba(31, 56, 42, 0.06), 0 2px 8px rgba(46, 82, 62, 0.05);
  --pm-shadow-2: 0 2px 4px rgba(31, 56, 42, 0.05), 0 18px 40px -12px rgba(46, 82, 62, 0.3);
  --pm-shadow-3: 0 34px 80px -26px rgba(31, 56, 42, 0.42);

  --pm-ease: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint — the one curve */
  --pm-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --pm-dur: 0.8s;

  /* re-point the legacy tokens so every older rule inherits the new system */
  --font-head: var(--pm-sans);
  --font-body: var(--pm-sans);
  --font-fx: var(--pm-sans);
  --ink: var(--pm-ink);
  --ink-soft: var(--pm-ink-2);
  --ink-mute: var(--pm-ink-3);
  --line: var(--pm-line);
  --line-soft: var(--pm-line-2);
  --bg-alt: var(--pm-ivory);
  --bg-sage: var(--pm-mist);
  --sage: var(--pm-sage);
  --sage-deep: #2c3a2a;
  --accent: var(--pm-accent);
  --accent-deep: var(--pm-accent-2);
  --ease-smooth: var(--pm-ease);
  --fx-grad: linear-gradient(90deg, var(--pm-sage) 0%, var(--pm-accent) 100%);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}
html body {
  font-family: var(--pm-sans);
  color: var(--pm-ink);
  background: var(--pm-paper);
  font-size: 16.5px;
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body::before {
  display: none !important; /* retire the old body aurora */
}
::selection {
  background: var(--pm-accent);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
img {
  max-width: 100%;
}

/* 2 ─ TYPOGRAPHY ────────────────────────────────────────────────────── */
html body h1,
html body h2,
html body .section-title,
html body .hx-title,
html body .cta-band h2,
html body .pos-strip {
  font-family: var(--pm-display);
  font-optical-sizing: auto;
  font-weight: 450;
  letter-spacing: -0.022em;
  color: var(--pm-ink);
  text-wrap: balance;
}
html body h3,
html body h4,
html body h5 {
  font-family: var(--pm-sans);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--pm-ink);
}
html body .section-title {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  margin-bottom: 18px;
}
html body .section-title em,
html body h1 em,
html body h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--pm-accent-2);
  -webkit-text-fill-color: currentColor;
  background: none;
}
html body p,
html body .lead-txt,
html body .text-soft {
  text-wrap: pretty;
}
html body .lead-txt {
  font-size: clamp(1.04rem, 1.2vw, 1.16rem);
  line-height: 1.72;
  color: var(--pm-ink-2);
}

/* eyebrow: a quiet editorial label with a short rule (replaces the glowing pill) */
html body .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--pm-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pm-accent-2);
  margin-bottom: 18px;
}
html body .eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: none;
  animation: none;
  flex: none;
  transform-origin: left center;
  transition: transform 0.9s var(--pm-ease) 0.15s;
}
html body .bg-dark .eyebrow,
html body .cta-band .eyebrow,
html body footer .eyebrow,
html body #founder .eyebrow {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: #e8b9a4 !important;
}
.text-center > .eyebrow,
.head > .eyebrow {
  justify-content: center;
}

/* 3 ─ BUTTONS & LINKS ───────────────────────────────────────────────── */
html body .btn {
  font-family: var(--pm-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition:
    background-color 0.35s var(--pm-ease),
    color 0.35s var(--pm-ease),
    border-color 0.35s var(--pm-ease),
    box-shadow 0.45s var(--pm-ease),
    transform 0.45s var(--pm-ease);
}
html body .btn-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pm-forest) !important;
  background-size: auto !important;
  border: 1px solid var(--pm-forest);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(20, 33, 26, 0.55);
  padding: 0.82rem 1.5rem;
}
html body .btn-brand.btn-lg {
  padding: 0.98rem 1.8rem;
  font-size: 1rem;
}
html body .btn-brand.btn-sm {
  padding: 0.5rem 1.1rem;
}
/* fill wipe: terracotta rises from the bottom on hover */
html body .btn-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pm-accent-2);
  transform: translateY(101%);
  border-radius: inherit;
  transition: transform 0.55s var(--pm-ease);
}
html body .btn-brand:hover,
html body .btn-brand:focus-visible {
  color: #fff;
  border-color: var(--pm-accent-2);
  background: var(--pm-forest) !important;
  box-shadow: 0 18px 34px -14px rgba(168, 68, 42, 0.6);
}
html body .btn-brand:hover::before,
html body .btn-brand:focus-visible::before {
  transform: translateY(0);
}
html body .btn-brand::after {
  display: none; /* retire old sheen */
}
html body .btn-ghost,
html body .btn-ghost-sm {
  background: transparent;
  border: 1px solid rgba(20, 33, 26, 0.22);
  color: var(--pm-ink);
}
html body .btn-ghost:hover,
html body .btn-ghost-sm:hover {
  background: var(--pm-forest);
  border-color: var(--pm-forest);
  color: #fff;
}
/* arrow characters in buttons nudge on hover */
.btn .pm-arr {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.45s var(--pm-ease);
}
.btn:hover .pm-arr {
  transform: translateX(4px);
}

/* animated underline for in-text and "read more" links */
html body .post-more,
html body .crumb a,
html body .lead-txt a,
html body .dtext a,
html body .faq-a a {
  color: var(--pm-accent-2);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition:
    background-size 0.5s var(--pm-ease),
    color 0.3s;
}
html body .post-more:hover,
html body .crumb a:hover,
html body .lead-txt a:hover,
html body .dtext a:hover,
html body .faq-a a:hover {
  background-size: 100% 1.5px;
}
html body .post-more svg {
  transition: transform 0.45s var(--pm-ease);
}
html body .post-more:hover svg {
  transform: translateX(4px);
}

/* 4 ─ HEADER ────────────────────────────────────────────────────────── */
html body .site-header {
  top: 14px;
  border: 1px solid rgba(20, 33, 26, 0.08);
  background: rgba(255, 253, 249, 0.8) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 30px -12px rgba(20, 33, 26, 0.18);
  transition:
    transform 0.6s var(--pm-ease),
    background-color 0.4s,
    box-shadow 0.4s,
    top 0.4s var(--pm-ease);
}
html body .site-header.scrolled {
  background: rgba(255, 253, 249, 0.94) !important;
  box-shadow: 0 14px 40px -16px rgba(20, 33, 26, 0.28);
}
/* hide on scroll down, return on scroll up (class set by motion.js) */
html body .site-header.pm-hide {
  transform: translate(-50%, calc(-100% - 24px));
}
html body .site-header::after {
  display: none !important; /* old hairline under header */
}
html body .brand img {
  height: 50px;
  transition: height 0.4s var(--pm-ease);
}
html body .site-header.scrolled .brand img {
  height: 44px;
}
html body .mainnav > .nav-item > a {
  position: relative;
  font-family: var(--pm-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--pm-ink);
}
html body .mainnav > .nav-item > a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 1.5px;
  background: var(--pm-accent);
  border-radius: 2px;
  transition:
    left 0.45s var(--pm-ease),
    right 0.45s var(--pm-ease);
}
html body .mainnav > .nav-item > a:hover::after,
html body .mainnav > .nav-item > a.active::after {
  left: 14px;
  right: 14px;
}
/* mega menu: soft drop-in */
html body .mega {
  border-radius: var(--pm-r);
  border: 1px solid var(--pm-line);
  box-shadow: var(--pm-shadow-3);
}
@media (min-width: 992px) {
  html body .has-mega .mega {
    transform-origin: top center;
    transition:
      opacity 0.35s var(--pm-ease),
      transform 0.45s var(--pm-ease),
      visibility 0s linear 0.35s;
  }
}
/* mobile off-canvas menu: links slide in one after another */
html body .offcanvas {
  background: var(--pm-paper);
  border-left: 0;
  box-shadow: -30px 0 80px -30px rgba(20, 33, 26, 0.4);
}
html body .offcanvas .mnav-item {
  font-family: var(--pm-display);
  font-size: 1.35rem;
  font-weight: 450;
  letter-spacing: -0.01em;
}
html body .offcanvas.showing .offcanvas-body > *,
html body .offcanvas.show .offcanvas-body > * {
  animation: pmSlideIn 0.6s var(--pm-ease) both;
}
html body .offcanvas .offcanvas-body > :nth-child(2) { animation-delay: 0.04s; }
html body .offcanvas .offcanvas-body > :nth-child(3) { animation-delay: 0.08s; }
html body .offcanvas .offcanvas-body > :nth-child(4) { animation-delay: 0.12s; }
html body .offcanvas .offcanvas-body > :nth-child(5) { animation-delay: 0.16s; }
html body .offcanvas .offcanvas-body > :nth-child(6) { animation-delay: 0.2s; }
html body .offcanvas .offcanvas-body > :nth-child(7) { animation-delay: 0.24s; }
html body .offcanvas .offcanvas-body > :nth-child(n + 8) { animation-delay: 0.28s; }
@keyframes pmSlideIn {
  from {
    opacity: 0;
    transform: translateX(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 5 ─ HOME HERO CAROUSEL ────────────────────────────────────────────── */
html body .hx {
  background: var(--pm-paper);
}
html body .hx-slide {
  min-height: clamp(560px, 92vh, 880px);
  transition:
    opacity 1.2s var(--pm-ease-io),
    visibility 0s linear 1.2s;
}
html body .hx-slide.is-active {
  transition: opacity 1.2s var(--pm-ease-io);
}
html body .hx-media {
  overflow: hidden;
}
/* slow Ken Burns push + parallax offset (--pm-py set by motion.js) */
html body .hx-media img {
  translate: 0 var(--pm-py, 0px);
  transform: scale(1.12);
  transition: transform 9s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform, translate;
}
html body .hx-slide.is-active .hx-media img {
  transform: scale(1.04);
}
@media (min-width: 992px) {
  html body .hx-media::after {
    background:
      linear-gradient(90deg, rgba(255, 253, 249, 0.97) 0%, rgba(255, 253, 249, 0.9) 30%, rgba(255, 253, 249, 0.4) 47%, rgba(255, 253, 249, 0) 62%),
      linear-gradient(0deg, rgba(255, 253, 249, 0.6) 0%, rgba(255, 253, 249, 0) 22%);
  }
}
html body .hx-copy {
  max-width: 600px;
}
html body .hx-title {
  font-family: var(--pm-display);
  font-weight: 420;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--pm-ink);
  margin: 6px 0 20px;
}
html body .hx-title em {
  color: var(--pm-accent-2) !important;
  -webkit-text-fill-color: var(--pm-accent-2);
  font-weight: 380;
}
html body .hx-sub {
  font-family: var(--pm-sans);
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  color: var(--pm-ink-2);
  margin-bottom: 32px;
}
/* staggered copy entrance, longer & softer */
html body .hx-copy > * {
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--pm-ease),
    transform 1.1s var(--pm-ease);
}
html body .hx-slide.is-active .hx-copy > :nth-child(1) { transition-delay: 0.25s; }
html body .hx-slide.is-active .hx-copy > :nth-child(2) { transition-delay: 0.35s; }
html body .hx-slide.is-active .hx-copy > :nth-child(3) { transition-delay: 0.5s; }
html body .hx-slide.is-active .hx-copy > :nth-child(4) { transition-delay: 0.62s; }

/* dots → progress bars that fill over the 6s slide interval */
html body .hx-dots {
  left: auto;
  right: max(24px, calc((100vw - 1200px) / 2 + 12px));
  transform: none;
  bottom: 36px;
  gap: 8px;
  align-items: center;
}
html body .hx-dots button {
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: rgba(20, 33, 26, 0.18);
}
html body .hx-dots button.is-active {
  width: 72px;
  background: rgba(20, 33, 26, 0.18);
}
html body .hx-dots button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pm-forest);
  transform: scaleX(0);
  transform-origin: left center;
}
html body .hx-dots button.is-active::after {
  animation: pmDotFill 6s linear forwards;
}
html body .hx:hover .hx-dots button.is-active::after,
html body .hx:focus-within .hx-dots button.is-active::after {
  animation-play-state: paused;
}
@keyframes pmDotFill {
  to {
    transform: scaleX(1);
  }
}
/* scroll cue */
.pm-scroll-cue {
  position: absolute;
  left: max(24px, calc((100vw - 1200px) / 2 + 12px));
  bottom: 30px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pm-ink-2);
  text-decoration: none;
}
.pm-scroll-cue i {
  position: relative;
  width: 1.5px;
  height: 38px;
  background: rgba(20, 33, 26, 0.15);
  overflow: hidden;
}
.pm-scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: var(--pm-accent);
  animation: pmCue 2.2s var(--pm-ease-io) infinite;
}
@keyframes pmCue {
  to {
    top: 100%;
  }
}
@media (max-width: 767.98px) {
  html body .hx-slide {
    min-height: 0;
  }
  html body .hx-title {
    font-size: clamp(2.1rem, 9vw, 2.6rem);
  }
  html body .hx-media {
    border-radius: var(--pm-r);
  }
  html body .hx-dots {
    position: static;
    justify-content: center;
    padding: 6px 0 28px;
  }
  .pm-scroll-cue {
    display: none;
  }
}

/* 6 ─ INTERIOR HEROES ───────────────────────────────────────────────── */
/* One rule for every interior page: the photo is a clean band with nothing
   written on it, and all copy (breadcrumb, title, text, buttons) sits below
   it on the page background. Works for both markup patterns on the site:
   heroes that carry their own copy (.container) and image-only heroes whose
   intro is the next section.                                           */
html body .page-hero,
html body .hero {
  box-shadow: none !important;
}
html body .page-hero:not(.blog-hero) {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--pm-paper) !important;
}
html body .page-hero:not(.blog-hero) .hero-bg {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: clamp(300px, 52vh, 540px) !important;
  overflow: hidden !important;
  background: var(--pm-forest);
}
/* a soft shade at the very top only, so the floating header stays readable */
html body .page-hero:not(.blog-hero) .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 22, 17, 0.22) 0%, rgba(14, 22, 17, 0) 26%);
}
/* image: parallax + slow settle-in */
html body .page-hero:not(.blog-hero) .hero-bg img,
html body .page-hero:not(.blog-hero) .hero-bg .is-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  translate: 0 var(--pm-py, 0px);
  transform: scale(1.1) !important;
  transition: transform 2.2s var(--pm-ease) !important;
  will-change: transform, translate;
}
html.pm-ready body .page-hero:not(.blog-hero) .hero-bg img,
html.pm-ready body .page-hero:not(.blog-hero) .hero-bg .is-photo {
  transform: scale(1.04) !important;
}

/* heroes that carry their own copy: show it, below the photo, in dark text */
html body .page-hero:not(.blog-hero) > .container {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  padding-top: clamp(36px, 5vw, 64px) !important;
  padding-bottom: clamp(16px, 2vw, 28px) !important;
}
html body .page-hero:not(.blog-hero) .hero-copy {
  max-width: 860px !important;
}
html body .page-hero:not(.blog-hero) h1 {
  color: var(--pm-ink) !important;
  -webkit-text-fill-color: var(--pm-ink) !important;
  font-family: var(--pm-display);
  font-weight: 420;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
html body .page-hero:not(.blog-hero) .sub {
  color: var(--pm-ink-2) !important;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  max-width: 680px;
}
html body .page-hero:not(.blog-hero) .eyebrow {
  color: var(--pm-accent-2) !important;
}
html body .page-hero:not(.blog-hero) .crumb,
html body .page-hero:not(.blog-hero) .crumb span {
  color: var(--pm-ink-3) !important;
}
html body .page-hero:not(.blog-hero) .crumb a {
  color: var(--pm-accent-2) !important;
}
html body .page-hero:not(.blog-hero) .btn-ghost {
  color: var(--pm-ink) !important;
  border-color: rgba(20, 33, 26, 0.22) !important;
  background: transparent !important;
  backdrop-filter: none;
}
html body .page-hero:not(.blog-hero) .btn-ghost:hover {
  background: var(--pm-forest) !important;
  border-color: var(--pm-forest) !important;
  color: #fff !important;
}
html body .page-hero:not(.blog-hero) .trust-strip {
  border-top-color: var(--pm-line) !important;
}
html body .page-hero:not(.blog-hero) .trust-strip .ts {
  color: var(--pm-ink-2) !important;
}
html body .page-hero:not(.blog-hero) .trust-strip .ts svg {
  color: var(--pm-accent) !important;
}

/* image-only heroes: the intro section simply follows the photo */
html body .page-hero:not(.blog-hero):not(:has(> .container)) + .section {
  padding-top: clamp(40px, 5vw, 64px);
}
html body .page-hero:not(.blog-hero):not(:has(> .container)) + .section h1 {
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  line-height: 1.06;
}
@media (max-width: 767.98px) {
  html body .page-hero:not(.blog-hero) .hero-bg {
    height: 240px !important;
  }
  html body .page-hero:not(.blog-hero) > .container {
    padding-top: 28px !important;
  }
}

/* designed fallback for heroes still waiting on a photo:
   brand gradient, fine grid, slow-drifting glow — no "Image space" brief */
html body .img-space-hero:not(.has-photo) {
  position: absolute !important;
  inset: 0;
  background:
    radial-gradient(60% 80% at var(--pm-gx, 78%) 20%, rgba(194, 88, 58, 0.42) 0%, rgba(194, 88, 58, 0) 60%),
    radial-gradient(50% 70% at 12% 100%, rgba(143, 163, 148, 0.35) 0%, rgba(143, 163, 148, 0) 70%),
    linear-gradient(135deg, #1d2e24 0%, #14211a 55%, #0f1913 100%) !important;
  border: 0 !important;
  animation: pmGlowDrift 14s ease-in-out infinite alternate;
}
html body .img-space-hero:not(.has-photo)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000 0%, transparent 80%);
  mask-image: radial-gradient(80% 90% at 70% 40%, #000 0%, transparent 80%);
}
html body .img-space-hero:not(.has-photo)::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.015),
    0 0 0 140px rgba(255, 255, 255, 0.012);
}
html body .img-space-hero:not(.has-photo) > :not(.is-photo) {
  display: none !important;
}
@property --pm-gx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78%;
}
@keyframes pmGlowDrift {
  to {
    --pm-gx: 58%;
  }
}
/* in-content image slots without a photo: neat tinted tile, no brief text */
html body .img-space:not(.img-space-hero):not(.has-photo) {
  background:
    radial-gradient(70% 90% at 80% 10%, rgba(194, 88, 58, 0.12), transparent 60%),
    linear-gradient(135deg, var(--pm-mist), #dfe6df) !important;
  border: 0 !important;
  border-radius: var(--pm-r);
  min-height: 260px;
}
html body .img-space:not(.img-space-hero):not(.has-photo) > :not(.is-photo):not(.is-ic) {
  display: none !important;
}
html body .img-space:not(.img-space-hero):not(.has-photo) > .is-ic {
  opacity: 0.35;
}

/* blog article hero keeps its own layout, just new type */
html body .page-hero.blog-hero h1 {
  font-family: var(--pm-display);
  font-weight: 420;
  letter-spacing: -0.025em;
}

/* 7 ─ SECTIONS & CARDS ──────────────────────────────────────────────── */
html body .section {
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
}
html body .bg-alt {
  background: var(--pm-ivory);
}
html body .bg-sage {
  background: var(--pm-mist);
}

/* one card language everywhere */
html body .svc-card,
html body .offer-card,
html body .detail-card,
html body .meta-card,
html body .proc-step,
html body .approach-card,
html body .exp-card,
html body .ind-card,
html body .diff-card,
html body .why-card,
html body .post-card,
html body .svc-link-card {
  background: #fff;
  border: 1px solid var(--pm-line-2);
  border-radius: var(--pm-r);
  box-shadow: var(--pm-shadow-1);
  transition:
    transform 0.6s var(--pm-ease),
    box-shadow 0.6s var(--pm-ease),
    border-color 0.4s;
}
html body .svc-card::before,
html body .offer-card::before,
html body .ind-card::before,
html body .diff-card::before,
html body .proc-step::before,
html body .why-card::before {
  display: none;
}
html body a.svc-card:hover,
html body a.svc-link-card:hover,
html body a.why-card:hover,
html body .post-card:hover,
html body .ind-card:hover,
html body .proc-step:hover,
html body .offer-card:hover,
html body .detail-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pm-shadow-2);
  border-color: rgba(20, 33, 26, 0.1);
}
/* cursor-follow light on linked cards (vars set by main.js) */
html body a.svc-card,
html body a.svc-link-card,
html body .post-card {
  position: relative;
  overflow: hidden;
}
html body a.svc-card::after,
html body a.svc-link-card::after,
html body .post-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(194, 88, 58, 0.08), transparent 45%);
}
html body a.svc-card:hover::after,
html body a.svc-link-card:hover::after,
html body .post-card:hover::after {
  opacity: 1;
}

/* checklist in service pages */
html body .check-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--pm-line-2);
  align-items: center;
}
html body .check-list li:last-child {
  border-bottom: 0;
}
html body .check-list li svg {
  color: var(--pm-accent);
}

/* 8 ─ HOME SECTIONS ─────────────────────────────────────────────────── */

/* franchise strip */
html body .mt-strip {
  background: var(--pm-ivory);
  border-top: 1px solid var(--pm-line-2);
  border-bottom: 1px solid var(--pm-line-2);
}
html body .mt-strip h3 {
  font-family: var(--pm-display);
  font-weight: 450;
  letter-spacing: -0.015em;
}

/* about statement */
html body .pos-strip {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.15;
  border-left: 2px solid var(--pm-accent);
  padding-left: 26px;
  margin: 0;
  color: var(--pm-ink);
}

/* clients marquee: calmer chips, colour on hover, edge fade */
html body .logo-mask {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .logo-chip {
  background: #fff;
  border: 1px solid var(--pm-line-2);
  box-shadow: none;
  border-radius: var(--pm-r-sm);
  transition:
    transform 0.5s var(--pm-ease),
    box-shadow 0.5s var(--pm-ease);
}
html body .logo-chip img {
  filter: none !important;
  opacity: 1 !important;
  transition:
    filter 0.5s var(--pm-ease),
    opacity 0.5s;
}
html body .logo-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-shadow-2);
}
html body .logo-chip:hover img {
  filter: none;
  opacity: 1;
}
html body .logo-mask:hover .logo-row {
  animation-play-state: paused;
}

/* difference: fixed number column so every row lines up */
html body .diff-card {
  padding: 28px 30px;
}
html body .diff-main {
  display: grid !important;
  grid-template-columns: 112px 1fr;
  align-items: start;
  gap: 8px 20px !important;
}
html body .diff-card .dn {
  font-family: var(--pm-display);
  font-weight: 380;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--pm-sage-3);
  transition: color 0.6s var(--pm-ease);
  font-variant-numeric: lining-nums tabular-nums;
}
html body .diff-card .dl {
  font-size: 1.08rem;
  display: block;
  margin-bottom: 6px;
}
html body .diff-card p {
  color: var(--pm-ink-2);
  margin: 0;
}
html body .diff-card .diff-ic {
  transition:
    background-color 0.6s var(--pm-ease),
    color 0.6s var(--pm-ease),
    transform 0.6s var(--pm-ease);
}
/* the card at the centre of the viewport becomes "current" (motion.js) */
html body .diff-card.is-current {
  border-color: rgba(194, 88, 58, 0.35);
  box-shadow: var(--pm-shadow-2);
}
html body .diff-card.is-current .dn {
  color: var(--pm-accent-2);
}
html body .diff-card.is-current .diff-ic {
  background: var(--pm-forest);
  color: #fff;
  transform: rotate(-8deg);
}
@media (max-width: 575.98px) {
  html body .diff-main {
    grid-template-columns: 1fr;
  }
}

/* process: a line draws across the steps as the section arrives */
html body .proc-grid {
  position: relative;
}
@media (min-width: 992px) {
  html body .proc-grid::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 46px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--pm-sage-3), var(--pm-accent));
    transform: scaleX(var(--pm-line, 1));
    transform-origin: left center;
    transition: transform 1.6s var(--pm-ease) 0.2s;
    z-index: 0;
  }
  html.reveal-anim body .proc-grid:not(.in)::before {
    --pm-line: 0;
  }
}
html body .proc-step {
  position: relative;
  z-index: 1;
  padding: 26px 24px 28px;
  height: 100%;
}
html body .proc-badge {
  background: var(--pm-forest) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
}
html body .proc-badge .n {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-family: var(--pm-display);
  font-weight: 450;
}
html body .proc-step h4 {
  margin-top: 16px;
}

/* sectors */
html body .ind-card {
  padding: 22px;
}
html body .ind-ic {
  transition:
    background-color 0.5s var(--pm-ease),
    color 0.5s var(--pm-ease),
    transform 0.6s var(--pm-ease);
}
html body .ind-card:hover .ind-ic {
  background: var(--pm-forest);
  color: #fff;
  border-color: var(--pm-forest);
  transform: scale(1.06) rotate(-6deg);
}

/* founder note: editorial pull-quote */
html body .founder-panel {
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(194, 88, 58, 0.22), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(143, 163, 148, 0.18), transparent 70%),
    var(--pm-forest);
  border-radius: var(--pm-r-lg);
  box-shadow: var(--pm-shadow-3);
  overflow: hidden;
  position: relative;
}
html body .founder-panel::before {
  content: "\201C";
  position: absolute;
  top: -0.18em;
  left: 0.12em;
  font-family: var(--pm-display);
  font-size: clamp(10rem, 22vw, 18rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
html body #founder blockquote,
html body #founder .founder-quote,
html body #founder .founder-inner > p:not(.eyebrow) {
  font-family: var(--pm-display);
  font-weight: 380;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: #f4f1ea;
}

/* insights */
html body .post-card {
  overflow: hidden;
}
html body .post-card img {
  transition: transform 1.1s var(--pm-ease);
}
html body .post-card:hover img {
  transform: scale(1.06);
}
html body .post-card h3 {
  font-family: var(--pm-display);
  font-weight: 450;
  font-size: 1.32rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
}
html body .post-card h3 a {
  color: var(--pm-ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--pm-ease);
}
html body .post-card:hover h3 a {
  background-size: 100% 1px;
}

/* closing CTA: deep forest with slow-moving aurora */
html body .cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--pm-r-lg);
  background: var(--pm-forest);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 80px);
  box-shadow: var(--pm-shadow-3);
}
html body .cta-band::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(30% 40% at 30% 40%, rgba(194, 88, 58, 0.45), transparent 70%),
    radial-gradient(30% 40% at 70% 60%, rgba(143, 163, 148, 0.4), transparent 70%);
  filter: blur(30px);
  animation: pmAurora 18s linear infinite;
  opacity: 0.9;
}
@keyframes pmAurora {
  to {
    transform: rotate(360deg);
  }
}
html body .cta-band h2 {
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.8rem);
  line-height: 1.04;
}
html body .cta-band p {
  color: rgba(255, 255, 255, 0.78);
}
html body .cta-band .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
html body .cta-band .btn-ghost:hover {
  background: #fff;
  color: var(--pm-ink);
}
html body .cta-band .btn-brand {
  background: #fff !important;
  border-color: #fff;
  color: var(--pm-forest) !important;
  -webkit-text-fill-color: currentColor;
}
html body .cta-band .btn-brand:hover {
  color: #fff !important;
  background: #fff !important;
}

/* tabs used on linen pages */
html body .lx-tab {
  border-radius: 999px;
  transition:
    background-color 0.4s var(--pm-ease),
    color 0.4s,
    border-color 0.4s,
    transform 0.4s var(--pm-ease);
}
html body .lx-tab:hover {
  transform: translateY(-2px);
}
html body .lx-tab[aria-selected="true"] {
  background: var(--pm-forest);
  border-color: var(--pm-forest);
  color: #fff;
}
html body .lx-panel.active {
  animation: pmPanelIn 0.7s var(--pm-ease) both;
}
@keyframes pmPanelIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 9 ─ FORMS, MODAL, FAQ ─────────────────────────────────────────────── */
html body .modal-backdrop.show {
  opacity: 1;
  background: rgba(14, 22, 17, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html body .modal-backdrop {
  background: rgba(14, 22, 17, 0);
}
html body .modal.fade .modal-dialog {
  transform: translateY(30px) scale(0.97);
  transition: transform 0.6s var(--pm-ease);
}
html body .modal.show .modal-dialog {
  transform: none;
}
html body .modal-content {
  border-radius: var(--pm-r-lg);
  border: 0;
  box-shadow: var(--pm-shadow-3);
  overflow: hidden;
}
html body input,
html body select,
html body textarea {
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
html body .cf-field input:focus,
html body .cf-field select:focus,
html body .cf-field textarea:focus {
  border-color: var(--pm-sage-2);
  box-shadow: 0 0 0 4px rgba(94, 118, 103, 0.15);
  outline: 0;
}

html body .faq-item {
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-r-sm);
  background: #fff;
  transition:
    border-color 0.4s,
    box-shadow 0.4s var(--pm-ease);
}
html body .faq-item[open] {
  border-color: rgba(20, 33, 26, 0.18) !important;
  box-shadow: var(--pm-shadow-2);
}
html body .faq-item summary {
  font-weight: 600;
}
html body .faq-item .faq-a {
  animation: pmFaqIn 0.5s var(--pm-ease);
}
@keyframes pmFaqIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* smooth height animation where supported (Chrome 129+) */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  html body .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.5s var(--pm-ease),
      content-visibility 0.5s allow-discrete;
  }
  html body .faq-item[open]::details-content {
    height: auto;
  }
}

/* 10 ─ FOOTER, COOKIE BAR, FLOATING BUTTONS ─────────────────────────── */
html body .site-footer {
  background: var(--pm-forest);
}
html body .site-footer a {
  transition:
    color 0.3s,
    padding-left 0.4s var(--pm-ease);
}
html body .site-footer .footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

/* cookie notice: compact card in the corner instead of a centre-screen bar */
html body .cookie-bar {
  left: 16px;
  right: auto;
  bottom: 16px;
  padding: 0;
  max-width: min(400px, calc(100vw - 32px));
  transform: translateY(calc(100% + 32px));
  transition: transform 0.8s var(--pm-ease);
}
html body .cookie-bar.show {
  transform: none;
}
html body .cookie-bar .cookie-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px;
  border-radius: var(--pm-r);
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pm-line);
  box-shadow: var(--pm-shadow-3);
}
html body .cookie-bar .cookie-copy {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
html body .cookie-bar .cookie-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* WhatsApp + back-to-top stack */
html body .wa-float {
  transition: transform 0.5s var(--pm-ease);
}
html body .wa-float:hover {
  transform: translateY(-3px) scale(1.04);
}
.pm-top {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 1040;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(12px);
  color: var(--pm-ink);
  box-shadow: var(--pm-shadow-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition:
    opacity 0.4s,
    visibility 0s linear 0.4s,
    transform 0.5s var(--pm-ease);
}
.pm-top.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.4s,
    transform 0.5s var(--pm-ease);
}
.pm-top svg.ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.pm-top svg.ring circle {
  fill: none;
  stroke: var(--pm-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 138.2;
  stroke-dashoffset: calc(138.2 * (1 - var(--fx-p, 0)));
}
.pm-top:hover {
  transform: translateY(-3px);
}
@media (max-width: 767.98px) {
  .pm-top {
    right: 18px;
    bottom: 88px;
    width: 44px;
    height: 44px;
  }
}
/* thin progress bar at top: brand gradient */
html body .fx-progress {
  background: linear-gradient(90deg, var(--pm-sage-2), var(--pm-accent));
  height: 2px;
}

/* 11 ─ SCROLL-REVEAL SYSTEM ─────────────────────────────────────────── */
/* Everything here is gated by html.reveal-anim (set in <head>, kept by
   main.js). If JS fails, nothing is ever hidden.                      */
html.reveal-anim .reveal {
  transition:
    opacity 0.55s var(--pm-ease),
    transform 0.7s var(--pm-ease) !important;
}
html.reveal-anim .reveal:not(.in) {
  transform: translateY(20px);
}

/* staggered children: groups of cards rise one after another */
html.reveal-anim .pm-rv {
  transition:
    opacity 0.5s var(--pm-ease),
    transform 0.7s var(--pm-ease);
  transition-delay: calc(var(--pm-i, 0) * 60ms);
}
html.reveal-anim .pm-rv.pm-done {
  transition:
    transform 0.6s var(--pm-ease),
    box-shadow 0.6s var(--pm-ease),
    border-color 0.4s,
    background-color 0.4s,
    opacity 0.3s;
  transition-delay: 0s;
}
html.reveal-anim .pm-rv:not(.in) {
  opacity: 0;
  transform: translateY(18px);
}

/* image reveal: soft clip-wipe + settle */
html.reveal-anim .pm-img {
  transition:
    clip-path 0.9s var(--pm-ease),
    transform 1.1s var(--pm-ease),
    opacity 0.45s;
}
html.reveal-anim .pm-img:not(.in) {
  clip-path: inset(6% 4% 6% 4% round 20px);
  transform: scale(1.05);
  opacity: 0.5;
}
html.reveal-anim .pm-img.in {
  clip-path: inset(0 0 0 0 round 0);
}

/* headline word rise (words wrapped by motion.js) */
.pm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.pm-wi {
  display: inline-block;
  transition: transform 0.75s var(--pm-ease);
  transition-delay: calc(var(--pm-wi, 0) * 30ms);
}
html.reveal-anim .pm-split:not(.pm-in) .pm-wi {
  transform: translateY(105%);
}

/* eyebrow rule draws in with its section */
html.reveal-anim .reveal:not(.in) .eyebrow::before,
html.reveal-anim .pm-rv:not(.in) .eyebrow::before {
  transform: scaleX(0);
}

/* hero copy on interior pages: staggered on load */
html.reveal-anim body .page-hero .hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s var(--pm-ease),
    transform 1.1s var(--pm-ease);
}
html.reveal-anim.pm-ready body .page-hero .hero-copy > * {
  opacity: 1 !important;
  transform: none !important;
}
html.pm-ready body .page-hero .hero-copy > :nth-child(2) { transition-delay: 0.1s; }
html.pm-ready body .page-hero .hero-copy > :nth-child(3) { transition-delay: 0.2s; }
html.pm-ready body .page-hero .hero-copy > :nth-child(4) { transition-delay: 0.3s; }
html.pm-ready body .page-hero .hero-copy > :nth-child(n + 5) { transition-delay: 0.4s; }

/* 12 ─ PAGE TRANSITIONS ─────────────────────────────────────────────── */
/* Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+):
   pages cross-fade with a slight rise. Other browsers ignore it.      */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: pmVtOut 0.35s var(--pm-ease-io) both;
}
::view-transition-new(root) {
  animation: pmVtIn 0.6s var(--pm-ease) both;
}
@keyframes pmVtOut {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@keyframes pmVtIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
html body .site-header {
  view-transition-name: pm-header; /* header stays put between pages */
}

/* 13 ─ REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .pm-rv,
  .pm-img,
  .pm-wi,
  .page-hero .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  @view-transition {
    navigation: none;
  }
}

/* =====================================================================
   14 ─ HOMEPAGE v2 (single hero, vendor juggle, services, stacking
   process, FAQ, enquiry form) + ready-but-hidden proof templates
   ===================================================================== */
.pm-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.pm-head-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px 60px;
  align-items: end;
}
.pm-head-split .section-title { margin-bottom: 0; }
.pm-head-split .text-soft { margin: 0; color: var(--pm-ink-2); }
@media (max-width: 767.98px) { .pm-head-split { grid-template-columns: 1fr; } }

/* ---- hero: one fixed message, one rotating word ---- */
.pm-hero {
  position: relative;
  overflow: hidden;
  background: var(--pm-paper);
  min-height: clamp(600px, 94vh, 900px);
  display: flex;
  align-items: center;
}
.pm-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.pm-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  translate: 0 var(--pm-py, 0px);
  opacity: 0;
  transform: scale(1.1);
  transition:
    opacity 1.2s var(--pm-ease-io),
    transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.pm-hero-media img.is-on { opacity: 1; transform: scale(1.02); }
/* smaller photos whose subject sits on the left are mirrored so the
   subject lands on the right, clear of the headline */
.pm-hero-media img.is-flip { object-position: 30% 40%; transform: scaleX(-1) scale(1.1); }
.pm-hero-media img.is-flip.is-on { transform: scaleX(-1) scale(1.02); }
.pm-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.97) 0%, rgba(255, 253, 249, 0.9) 34%, rgba(255, 253, 249, 0.35) 52%, rgba(255, 253, 249, 0) 66%),
    linear-gradient(0deg, rgba(255, 253, 249, 0.75) 0%, rgba(255, 253, 249, 0) 26%);
}
.pm-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 130px;
  padding-bottom: 80px;
}
.pm-hero-copy { max-width: 640px; }
html body .pm-hero-title {
  font-size: clamp(2.7rem, 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 420;
  margin: 4px 0 22px;
}
/* rotating word: all words share one grid cell, so the line never jumps */
.pm-rot {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.pm-rot em {
  grid-area: 1 / 1;
  font-style: italic;
  font-weight: 400;
  color: var(--pm-accent-2);
  padding-right: 0.08em;
  opacity: 0;
  transform: translateY(110%);
  transition:
    opacity 0.45s var(--pm-ease),
    transform 0.8s var(--pm-ease);
}
.pm-rot em.is-on { opacity: 1; transform: none; }
.pm-rot em.is-out { opacity: 0; transform: translateY(-110%); }
.pm-hero-sub {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.65;
  color: var(--pm-ink-2);
  max-width: 50ch;
  margin-bottom: 30px;
}
.pm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pm-hero-proof {
  list-style: none;
  padding: 26px 0 0;
  margin: 38px 0 0;
  border-top: 1px solid rgba(20, 33, 26, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
}
.pm-hero-proof li { display: grid; gap: 2px; }
.pm-hero-proof b {
  font-family: var(--pm-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pm-forest);
}
.pm-hero-proof span { font-size: 0.86rem; color: var(--pm-ink-2); }
/* staggered entrance */
html.reveal-anim .pm-hero-copy > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--pm-ease), transform 1.1s var(--pm-ease);
}
html.reveal-anim.pm-ready .pm-hero-copy > * { opacity: 1; transform: none; }
html.pm-ready .pm-hero-copy > :nth-child(2) { transition-delay: 0.1s; }
html.pm-ready .pm-hero-copy > :nth-child(3) { transition-delay: 0.22s; }
html.pm-ready .pm-hero-copy > :nth-child(4) { transition-delay: 0.32s; }
html.pm-ready .pm-hero-copy > :nth-child(5) { transition-delay: 0.42s; }
@media (max-width: 767.98px) {
  .pm-hero { min-height: 0; display: block; padding-top: 92px; }
  .pm-hero-media { position: relative; inset: auto; height: 260px; margin: 0 12px; border-radius: var(--pm-r); }
  .pm-hero-media::after { display: none; }
  .pm-hero-inner { padding-top: 28px; padding-bottom: 48px; }
  html body .pm-hero-title { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .pm-hero-actions .btn { width: 100%; justify-content: center; }
  .pm-hero-proof { gap: 14px 28px; }
  .pm-hero-proof b { font-size: 1.6rem; }
}

/* ---- vendor juggle: ten vendors fold into one partner ---- */
.pm-jg {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 80px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.pm-jg-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pm-ink-3);
  margin-bottom: 16px;
}
.pm-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pm-chips li {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px dashed rgba(20, 33, 26, 0.25);
  background: #fff;
  font-size: 0.92rem;
  color: var(--pm-ink-2);
  transition:
    opacity 0.7s var(--pm-ease),
    transform 0.9s var(--pm-ease),
    color 0.5s,
    border-color 0.5s;
  transition-delay: calc(var(--i) * 30ms + 150ms);
}
.pm-jg-foot { margin: 16px 0 0; font-size: 0.9rem; color: var(--pm-ink-3); }
.pm-jg-arrow { display: grid; place-items: center; height: 100%; }
.pm-jg-arrow span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--pm-sage-3), var(--pm-accent));
  position: relative;
  transform-origin: left;
  transition: transform 0.7s var(--pm-ease) 0.35s;
}
.pm-jg-arrow span::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -5px;
  border: 5.5px solid transparent;
  border-left: 8px solid var(--pm-accent);
}
.pm-jg-after {
  position: relative;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--pm-r-lg);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(194, 88, 58, 0.28), transparent 60%),
    var(--pm-forest);
  color: #f4f1ea;
  box-shadow: var(--pm-shadow-3);
  transition:
    transform 0.8s var(--pm-ease) 0.5s,
    opacity 0.6s var(--pm-ease) 0.5s,
    box-shadow 0.8s var(--pm-ease) 0.5s;
}
.pm-jg-after .pm-jg-label { color: #e8b9a4; }
.pm-one-name {
  font-family: var(--pm-display);
  font-weight: 420;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #fff;
}
.pm-one-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.pm-one-list li { display: flex; gap: 10px; align-items: baseline; color: rgba(244, 241, 234, 0.86); }
.pm-one-list li::before { content: "\2713"; color: #e8b9a4; font-weight: 700; }
html body .pm-jg-after .btn-brand { background: #fff !important; border-color: #fff; color: var(--pm-forest) !important; }
html body .pm-jg-after .btn-brand:hover { color: #fff !important; }
/* the moment: vendors dim and drift right, then the one partner lights up */
html.reveal-anim .pm-jg:not(.in) .pm-jg-after { opacity: 0.75; transform: scale(0.97); box-shadow: none; }
html.reveal-anim .pm-jg:not(.in) .pm-jg-arrow span { transform: scaleX(0); }
.pm-jg.in .pm-chips li {
  opacity: 0.45;
  transform: translateX(10px);
  text-decoration: line-through;
  text-decoration-color: rgba(168, 68, 42, 0.5);
}
@media (max-width: 860px) {
  .pm-jg { grid-template-columns: 1fr; }
  .pm-jg-arrow { height: 48px; }
  .pm-jg-arrow span { width: 1.5px; height: 100%; background: linear-gradient(180deg, var(--pm-sage-3), var(--pm-accent)); transform-origin: top; }
  .pm-jg-arrow span::after { right: -5px; top: auto; bottom: -1px; border: 5.5px solid transparent; border-top: 8px solid var(--pm-accent); }
  html.reveal-anim .pm-jg:not(.in) .pm-jg-arrow span { transform: scaleY(0); }
  .pm-jg.in .pm-chips li { transform: translateY(4px); }
}

/* ---- services grid ---- */
.pm-svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1099.98px) { .pm-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .pm-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 459.98px) { .pm-svc-grid { grid-template-columns: 1fr; } }
.pm-svc {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  padding: 22px 22px 24px;
  border-radius: var(--pm-r);
  background: #fff;
  border: 1px solid var(--pm-line-2);
  box-shadow: var(--pm-shadow-1);
  text-decoration: none;
  color: var(--pm-ink);
  text-align: left;
  font: inherit;
  overflow: hidden;
  transition:
    transform 0.6s var(--pm-ease),
    box-shadow 0.6s var(--pm-ease),
    border-color 0.4s;
}
.pm-svc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(194, 88, 58, 0.09), transparent 45%);
}
.pm-svc:hover, .pm-svc:focus-visible { transform: translateY(-5px); box-shadow: var(--pm-shadow-2); border-color: rgba(46, 82, 62, 0.2); color: var(--pm-ink); }
.pm-svc:hover::after { opacity: 1; }
.pm-svc-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--pm-mist);
  color: var(--pm-forest);
  margin-bottom: 10px;
  transition: background-color 0.5s var(--pm-ease), color 0.5s, transform 0.6s var(--pm-ease);
}
.pm-svc-ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.pm-svc:hover .pm-svc-ic { background: var(--pm-forest); color: #fff; transform: rotate(-6deg); }
.pm-svc-t { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.3; }
.pm-svc-l { font-size: 0.9rem; color: var(--pm-ink-2); line-height: 1.5; }
.pm-svc-go {
  position: absolute;
  right: 20px;
  top: 22px;
  color: var(--pm-accent-2);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s, transform 0.5s var(--pm-ease);
}
.pm-svc:hover .pm-svc-go, .pm-svc:focus-visible .pm-svc-go { opacity: 1; transform: none; }
.pm-svc-cta {
  cursor: pointer;
  background: var(--pm-forest);
  border-color: var(--pm-forest);
  color: #fff;
  align-content: end;
}
.pm-svc-cta .pm-svc-t { font-family: var(--pm-display); font-weight: 420; font-size: 1.35rem; }
.pm-svc-cta .pm-svc-l { color: rgba(244, 241, 234, 0.75); }
.pm-svc-cta .pm-svc-go { opacity: 1; transform: none; color: #e8b9a4; }
.pm-svc-cta:hover { color: #fff; background: var(--pm-accent-2); border-color: var(--pm-accent-2); }

/* ---- process: sticky heading + cards that stack as you scroll ---- */
.pm-proc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pm-proc-head { position: sticky; top: 120px; }
.pm-proc-head .text-soft { margin-bottom: 26px; color: var(--pm-ink-2); }
.pm-steps { list-style: none; margin: 0; padding: 0; }
.pm-step {
  position: sticky;
  top: calc(120px + var(--i) * 22px);
  min-height: 220px;
  margin-bottom: 28px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--pm-r-lg);
  background: #fff;
  border: 1px solid var(--pm-line-2);
  box-shadow: 0 -16px 40px -26px rgba(31, 56, 42, 0.45);
  display: grid;
  align-content: space-between;
  gap: 26px;
}
.pm-step:nth-child(2) { background: var(--pm-ivory); }
.pm-step:nth-child(3) { background: var(--pm-sage); color: #fff; border-color: var(--pm-sage); }
.pm-step:nth-child(4) { background: var(--pm-forest); color: #fff; border-color: var(--pm-forest); margin-bottom: 0; }
.pm-step-n { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pm-accent-2); }
.pm-step:nth-child(n + 3) .pm-step-n { color: #f0c3ad; }
html body .pm-step h3 { font-family: var(--pm-display); font-weight: 420; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.025em; margin: 0 0 8px; color: inherit; }
.pm-step p { margin: 0; color: var(--pm-ink-2); font-size: 1.02rem; }
.pm-step:nth-child(n + 3) p { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 860px) {
  .pm-proc { grid-template-columns: 1fr; }
  .pm-proc-head { position: static; }
  .pm-step { top: calc(84px + var(--i) * 14px); min-height: 180px; }
}

/* ---- proof templates (hidden until filled) ---- */
.pm-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pm-result { padding: 28px; border-radius: var(--pm-r); background: #fff; border: 1px solid var(--pm-line-2); box-shadow: var(--pm-shadow-1); display: grid; gap: 10px; }
.pm-result-num { font-family: var(--pm-display); font-weight: 380; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; color: var(--pm-accent-2); margin: 0; }
.pm-result-what { font-weight: 600; margin: 0; }
.pm-result-who { font-size: 0.88rem; color: var(--pm-ink-3); margin: 0; }
.pm-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pm-quote { margin: 0; padding: 28px; border-radius: var(--pm-r); background: #fff; border: 1px solid var(--pm-line-2); display: grid; gap: 18px; align-content: space-between; }
.pm-quote blockquote { margin: 0; font-family: var(--pm-display); font-size: 1.2rem; line-height: 1.45; }
.pm-quote figcaption { display: grid; font-size: 0.9rem; }
.pm-quote figcaption span { color: var(--pm-ink-3); }
@media (max-width: 860px) { .pm-results, .pm-quotes { grid-template-columns: 1fr; } }
.pm-timeline { margin-top: clamp(56px, 7vw, 96px); }
.pm-tl { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 28px; }
.pm-tl::before { content: ""; position: absolute; left: 70px; top: 6px; bottom: 6px; width: 1.5px; background: linear-gradient(180deg, var(--pm-sage-3), var(--pm-accent)); transform-origin: top; transform: scaleY(var(--pm-tlp, 1)); }
.pm-tl li { display: grid; grid-template-columns: 70px 1fr; gap: 28px; align-items: baseline; }
.pm-tl-y { font-family: var(--pm-display); font-size: 1.3rem; color: var(--pm-accent-2); }
.pm-tl li p { margin: 0; padding-left: 4px; }

/* ---- FAQ ---- */
.pm-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pm-faq .pm-head { position: sticky; top: 120px; }
.pm-faq .faq-list { max-width: none; margin: 0; display: grid; gap: 10px; }
@media (max-width: 860px) { .pm-faq { grid-template-columns: 1fr; } .pm-faq .pm-head { position: static; } }

/* ---- enquiry: closing band with the form built in ---- */
.pm-enquire {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(32px, 6vw, 80px);
  border-radius: var(--pm-r-lg);
  background: var(--pm-forest);
  color: #f4f1ea;
  box-shadow: var(--pm-shadow-3);
}
.pm-enquire::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(30% 40% at 25% 35%, rgba(194, 88, 58, 0.42), transparent 70%),
    radial-gradient(30% 40% at 70% 70%, rgba(143, 163, 148, 0.32), transparent 70%);
  filter: blur(30px);
  animation: pmAurora 22s linear infinite;
}
html body .pm-enq-copy h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.04; margin: 0 0 16px; }
/* gradient text: one phrase per page, on dark only */
html body .pm-enq-copy h2 em {
  background: linear-gradient(100deg, #e7b48c 0%, #fff 25%, #c2583a 50%, #e7b48c 75%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
  animation: pmSheen 6s linear infinite;
}
@keyframes pmSheen { to { background-position: -200% 0; } }
.pm-enq-copy > p { color: rgba(244, 241, 234, 0.78); max-width: 44ch; }
.pm-enq-contact { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.pm-enq-contact li { display: grid; gap: 2px; font-size: 0.95rem; color: rgba(244, 241, 234, 0.85); }
.pm-enq-contact span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #e8b9a4; }
.pm-enq-contact a { color: #fff; text-decoration: none; }
.pm-enq-contact a:hover { text-decoration: underline; }
.pm-enq-form { background: var(--pm-paper); color: var(--pm-ink); border-radius: var(--pm-r); padding: clamp(20px, 3vw, 32px); box-shadow: var(--pm-shadow-3); }
.pm-enq-form .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-enq-form .cf-field { display: grid; gap: 6px; min-width: 0; }
.pm-enq-form .cf-field.full { grid-column: 1 / -1; }
.pm-enq-form label { font-size: 0.84rem; font-weight: 600; color: var(--pm-ink-2); }
.pm-enq-form input, .pm-enq-form select, .pm-enq-form textarea {
  width: 100%;
  border: 1px solid var(--pm-line);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--pm-ink);
}
.pm-enq-form input:focus, .pm-enq-form select:focus, .pm-enq-form textarea:focus {
  outline: 0;
  border-color: var(--pm-sage-2);
  box-shadow: 0 0 0 4px rgba(94, 118, 103, 0.15);
}
.pm-enq-note { font-size: 0.8rem; color: var(--pm-ink-3); margin: 10px 0 0; text-align: center; }
@media (max-width: 860px) { .pm-enquire { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pm-enq-form .cf-grid { grid-template-columns: 1fr; } }

/* ---- reduced motion for the new pieces ---- */
@media (prefers-reduced-motion: reduce) {
  .pm-rot em:not(.is-on) { display: none; }
  .pm-jg-after, .pm-chips li, .pm-hero-copy > * { opacity: 1 !important; transform: none !important; }
  html body .pm-enq-copy h2 em { animation: none; }
}

html body #faq + #contact { padding-top: 0; }

/* =====================================================================
   15 ─ SCOPE PICKER (service pages) + SECTOR EXPLORER (home)
   ===================================================================== */

/* ---- scope lists become tiles (all 127 pages; works without JS) ---- */
html body ul.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 575.98px) { html body ul.check-list { grid-template-columns: 1fr; } }
html body ul.check-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 18px 16px;
  margin: 0;
  border: 1px solid var(--pm-line-2) !important;
  border-radius: var(--pm-r-sm);
  background: #fff;
  box-shadow: var(--pm-shadow-1);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--pm-ink);
  transition:
    transform 0.5s var(--pm-ease),
    box-shadow 0.5s var(--pm-ease),
    border-color 0.3s,
    background-color 0.35s,
    color 0.35s;
}
html body ul.check-list li svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  margin: -4px 0;
  border-radius: 50%;
  background: var(--pm-accent-soft);
  color: var(--pm-accent-2);
  stroke-width: 1.6;
  transition: background-color 0.35s, color 0.35s, transform 0.5s var(--pm-ease);
}
html body ul.check-list li strong { display: block; font-weight: 600; margin-bottom: 2px; }
html body ul.check-list li span { min-width: 0; }
/* odd count: last tile spans the row so nothing sits alone */
html body ul.check-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 575.98px) { html body ul.check-list li:last-child:nth-child(odd) { grid-column: auto; } }
/* heading column stays in view beside longer lists */
@media (min-width: 992px) {
  html body .row:has(> .col-lg-7 .check-list) > .col-lg-5 { position: sticky; top: 120px; }
}

/* selectable mode (motion.js adds .pm-scope to "In scope"-type lists) */
html body ul.check-list.pm-scope li { cursor: pointer; user-select: none; }
html body ul.check-list.pm-scope li::after {
  display: none !important;
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 6px;
  border: 1.5px solid rgba(20, 33, 26, 0.25);
  background: #fff;
  transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--pm-ease);
}
html body ul.check-list.pm-scope li:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-shadow-2);
  border-color: rgba(46, 82, 62, 0.25) !important;
}
html body ul.check-list.pm-scope li:hover svg { transform: rotate(-12deg) scale(1.05); }
html body ul.check-list.pm-scope li[aria-checked="true"] {
  background: var(--pm-forest);
  border-color: var(--pm-forest) !important;
  color: #fff;
}
html body ul.check-list.pm-scope li[aria-checked="true"] svg { background: rgba(255, 255, 255, 0.12); color: #f0c3ad; }
html body ul.check-list.pm-scope li[aria-checked="true"]::after {
  border-color: #f0c3ad;
  background: #f0c3ad url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314211a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 14px no-repeat;
  transform: scale(1.08);
}
html body ul.check-list.pm-scope li:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 3px; }
.pm-scope-hint { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pm-ink-3); margin: 0 0 14px; }
.pm-scope-bar {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 14px 14px 22px;
  border-radius: 999px;
  background: var(--pm-mist);
  border: 1px solid var(--pm-line-2);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.pm-scope-bar.has-picks { background: #fff; box-shadow: var(--pm-shadow-2); }
.pm-scope-msg { font-size: 0.95rem; color: var(--pm-ink-2); }
.pm-scope-msg b { color: var(--pm-ink); font-weight: 600; }
.pm-scope-n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--pm-accent-2);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.pm-scope-n.bump { animation: pmBump 0.45s var(--pm-ease); }
@keyframes pmBump { 40% { transform: scale(1.3); } }
@media (max-width: 575.98px) {
  .pm-scope-bar { border-radius: var(--pm-r); padding: 14px; }
  .pm-scope-bar .btn { width: 100%; justify-content: center; }
}

/* ---- sector explorer (home) ---- */
.pm-sx {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: stretch;
}
.pm-sx-tabs { display: grid; gap: 6px; align-content: start; }
.pm-sx-tab {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--pm-r-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  color: var(--pm-ink-2);
  position: relative;
  transition: background-color 0.35s, color 0.35s, padding-left 0.5s var(--pm-ease);
}
.pm-sx-tab:hover { background: rgba(255, 255, 255, 0.7); color: var(--pm-ink); padding-left: 18px; }
.pm-sx-tab[aria-selected="true"] { background: #fff; color: var(--pm-ink); box-shadow: var(--pm-shadow-1); padding-left: 18px; }
.pm-sx-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--pm-accent);
}
.pm-sx-tab:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 2px; }
.pm-sx-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--pm-mist);
  color: var(--pm-forest);
  transition: background-color 0.35s, color 0.35s;
}
.pm-sx-ic svg { width: 19px; height: 19px; stroke-width: 1.6; }
.pm-sx-tab[aria-selected="true"] .pm-sx-ic { background: var(--pm-forest); color: #fff; }
.pm-sx-panels { position: relative; display: grid; }
.pm-sx-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--pm-r-lg);
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(194, 88, 58, 0.3), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(143, 163, 148, 0.22), transparent 70%),
    var(--pm-forest);
  color: #f4f1ea;
  box-shadow: var(--pm-shadow-3);
  display: grid;
  align-content: start;
  gap: 4px;
}
/* without JS every panel shows, stacked; with JS only the chosen one */
.pm-sx.is-js .pm-sx-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.5s var(--pm-ease), transform 0.7s var(--pm-ease), visibility 0s linear 0.5s; }
.pm-sx.is-js .pm-sx-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--pm-ease) 0.05s, transform 0.7s var(--pm-ease) 0.05s; }
.pm-sx:not(.is-js) .pm-sx-panels { gap: 16px; }
.pm-sx:not(.is-js) .pm-sx-tabs { display: none; }
.pm-sx:not(.is-js) { grid-template-columns: 1fr; }
.pm-sx-big {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 260px;
  height: 260px;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.pm-sx-big svg { width: 100%; height: 100%; stroke-width: 0.8; }
html body .pm-sx-panel h3 {
  font-family: var(--pm-display);
  font-weight: 420;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 10px;
}
.pm-sx-d { font-size: 1.12rem; color: rgba(244, 241, 234, 0.82); max-width: 40ch; margin: 0 0 26px; }
.pm-sx-k { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #e8b9a4; margin: 0 0 12px; }
.pm-sx-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.pm-sx-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--pm-ease);
}
.pm-sx-links a span { transition: transform 0.4s var(--pm-ease); color: #f0c3ad; }
.pm-sx-links a:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); color: #fff; }
.pm-sx-links a:hover span { transform: translateX(3px); }
html body .pm-sx-panel .btn-brand { justify-self: start; background: #fff !important; border-color: #fff; color: var(--pm-forest) !important; }
html body .pm-sx-panel .btn-brand:hover { color: #fff !important; }
/* panel children rise in when a sector is chosen */
.pm-sx.is-js .pm-sx-panel > :not(.pm-sx-big) { transition: opacity 0.6s var(--pm-ease), transform 0.8s var(--pm-ease); }
.pm-sx.is-js .pm-sx-panel:not(.is-on) > :not(.pm-sx-big) { opacity: 0; transform: translateY(12px); }
.pm-sx.is-js .pm-sx-panel.is-on > :nth-child(3) { transition-delay: 0.06s; }
.pm-sx.is-js .pm-sx-panel.is-on > :nth-child(4) { transition-delay: 0.12s; }
.pm-sx.is-js .pm-sx-panel.is-on > :nth-child(5) { transition-delay: 0.16s; }
.pm-sx.is-js .pm-sx-panel.is-on > :nth-child(6) { transition-delay: 0.2s; }
@media (max-width: 860px) {
  .pm-sx { grid-template-columns: 1fr; }
  .pm-sx-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .pm-sx-tabs::-webkit-scrollbar { display: none; }
  .pm-sx-tab { flex: none; scroll-snap-align: start; padding: 8px 14px 8px 8px; border: 1px solid var(--pm-line); background: #fff; white-space: nowrap; }
  .pm-sx-tab:hover, .pm-sx-tab[aria-selected="true"] { padding-left: 8px; }
  .pm-sx-tab[aria-selected="true"] { background: var(--pm-forest); color: #fff; border-color: var(--pm-forest); }
  .pm-sx-tab[aria-selected="true"]::before { display: none; }
  .pm-sx-ic { width: 30px; height: 30px; border-radius: 8px; }
  .pm-sx-tab[aria-selected="true"] .pm-sx-ic { background: rgba(255, 255, 255, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-sx.is-js .pm-sx-panel, .pm-sx.is-js .pm-sx-panel > * { transition: none !important; }
}

/* client logos directly under the vendor comparison: one calm ivory band */
html body .clients {
  background: var(--pm-ivory);
  border-top: 1px solid var(--pm-line-2);
  border-bottom: 1px solid var(--pm-line-2);
}
html body #about.pm-juggle { padding-bottom: clamp(64px, 7vw, 96px); }

/* =====================================================================
   16 ─ LEGAL & COMPLIANCE LANDING (hero, practice cards, sub-topics)
   ===================================================================== */
.lg-hero {
  position: relative;
  overflow: hidden;
  background: var(--pm-paper);
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: center;
}
.lg-hero-media { position: absolute; inset: 0; overflow: hidden; }
.lg-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  translate: 0 var(--pm-py, 0px);
  transform: scale(1.08);
  transition: transform 2.4s var(--pm-ease);
}
html.pm-ready .lg-hero-media img { transform: scale(1.02); }
.lg-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.97) 0%, rgba(255, 253, 249, 0.9) 32%, rgba(255, 253, 249, 0.35) 50%, rgba(255, 253, 249, 0) 64%),
    linear-gradient(0deg, rgba(255, 253, 249, 0.7) 0%, rgba(255, 253, 249, 0) 24%);
}
.lg-hero-inner { position: relative; z-index: 2; padding-top: 130px; padding-bottom: 70px; }
.lg-hero-copy { max-width: 560px; }
.lg-hero-copy .crumb { margin-bottom: 26px; font-size: 0.86rem; color: var(--pm-ink-3); }
.lg-hero-rule { display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--pm-accent); margin-bottom: 18px; }
html body .lg-hero h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 420;
  color: var(--pm-forest);
  margin: 0 0 18px;
}
.lg-hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--pm-ink-2); margin: 0 0 30px; max-width: 44ch; }
html.reveal-anim .lg-hero-copy > * { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--pm-ease), transform 1.1s var(--pm-ease); }
html.reveal-anim.pm-ready .lg-hero-copy > * { opacity: 1; transform: none; }
html.pm-ready .lg-hero-copy > :nth-child(3) { transition-delay: 0.1s; }
html.pm-ready .lg-hero-copy > :nth-child(4) { transition-delay: 0.2s; }
html.pm-ready .lg-hero-copy > :nth-child(5) { transition-delay: 0.3s; }
@media (max-width: 767.98px) {
  .lg-hero { min-height: 0; display: block; padding-top: 92px; }
  .lg-hero-media { position: relative; inset: auto; height: 230px; margin: 0 12px; border-radius: var(--pm-r); }
  .lg-hero-media::after { display: none; }
  .lg-hero-inner { padding-top: 26px; padding-bottom: 40px; }
  .lg-hero .hero-actions .btn { width: 100%; justify-content: center; }
}

/* practice cards: 4 on the first row, 3 on the second */
html body .lg-practices { padding-top: clamp(40px, 5vw, 64px); background: var(--pm-ivory); }
.lgp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.lgp-card { grid-column: span 3; }
.lgp-card:nth-child(n + 5) { grid-column: span 4; }
@media (max-width: 1099.98px) {
  .lgp-card, .lgp-card:nth-child(n + 5) { grid-column: span 6; }
  .lgp-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) { .lgp-card, .lgp-card:nth-child(n + 5), .lgp-card:last-child { grid-column: 1 / -1; } }
.lgp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--pm-r);
  background: #fff;
  border: 1px solid var(--pm-line-2);
  box-shadow: var(--pm-shadow-1);
  overflow: hidden;
  text-decoration: none;
  color: var(--pm-ink);
  transition: transform 0.6s var(--pm-ease), box-shadow 0.6s var(--pm-ease), border-color 0.4s;
}
.lgp-card:hover, .lgp-card:focus-visible { transform: translateY(-6px); box-shadow: var(--pm-shadow-2); border-color: rgba(46, 82, 62, 0.2); color: var(--pm-ink); }
.lgp-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pm-mist); }
.lgp-card:nth-child(n + 5) .lgp-media { aspect-ratio: 16 / 7.5; }
.lgp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--pm-ease); }
.lgp-card:hover .lgp-media img { transform: scale(1.06); }
.lgp-ic {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  margin: -32px 0 0 20px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--pm-accent);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px -10px rgba(168, 68, 42, 0.6);
  transition: transform 0.6s var(--pm-ease), background-color 0.4s;
}
.lgp-ic svg { width: 26px; height: 26px; }
.lgp-card:hover .lgp-ic { transform: rotate(-6deg) scale(1.05); background: var(--pm-accent-2); }
.lgp-body { display: grid; gap: 8px; padding: 14px 22px 22px; flex: 1; align-content: start; }
.lgp-t { font-family: var(--pm-display); font-weight: 450; font-size: clamp(1.3rem, 1.7vw, 1.5rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--pm-forest); }
.lgp-d { font-size: 0.93rem; line-height: 1.55; color: var(--pm-ink-2); }
.lgp-rule { display: block; width: 32px; height: 2px; background: var(--pm-accent); margin-top: 6px; transition: width 0.6s var(--pm-ease); }
.lgp-card:hover .lgp-rule { width: 64px; }

/* key sub-topics strip */
.lgs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-radius: var(--pm-r);
  background: #fff;
  border: 1px solid var(--pm-line-2);
  box-shadow: var(--pm-shadow-1);
}
.lgs-label { margin: 0; font-family: var(--pm-display); font-weight: 450; font-size: 1.3rem; line-height: 1.15; color: var(--pm-forest); }
.lgs-label span { display: block; font-size: 1.05rem; }
.lgs-items { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lgs-item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 8px 10px;
  border-left: 1px solid var(--pm-line);
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--pm-ink-2);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.3s, background-color 0.3s;
}
.lgs-ic { color: var(--pm-sage); transition: transform 0.5s var(--pm-ease), color 0.3s; }
.lgs-ic svg { width: 30px; height: 30px; }
.lgs-item:hover, .lgs-item:focus-visible { color: var(--pm-accent-2); background: var(--pm-ivory); }
.lgs-item:hover .lgs-ic { transform: translateY(-3px); color: var(--pm-accent-2); }
@media (max-width: 1099.98px) {
  .lgs { grid-template-columns: 1fr; }
  .lgs-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .lgs-item { border-left: 0; background: var(--pm-ivory); }
}
@media (max-width: 575.98px) { .lgs-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* legal advisory: photo beside the opening copy */
.lg-adv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lg-adv-media img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 70% center; border-radius: var(--pm-r-lg); box-shadow: var(--pm-shadow-2); }
.lg-adv-copy .lead-txt { margin-bottom: 14px; }
.lg-adv-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lg-adv-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--pm-line);
  background: #fff;
  color: var(--pm-ink);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--pm-ease);
}
.lg-adv-links a span { color: var(--pm-accent-2); transition: transform 0.4s var(--pm-ease); }
.lg-adv-links a:hover { background: var(--pm-forest); border-color: var(--pm-forest); color: #fff; transform: translateY(-2px); }
.lg-adv-links a:hover span { color: #f0c3ad; transform: translateX(3px); }
@media (max-width: 860px) { .lg-adv { grid-template-columns: 1fr; } }


/* sub-service cards whose photo hasn't been supplied yet: a designed brand
   tile (soft glow + fine grid) instead of the dashed "Image space" box */
html body .slc-thumb:not(.has-photo) {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(194, 88, 58, 0.38), transparent 60%),
    radial-gradient(60% 80% at 10% 100%, rgba(143, 163, 148, 0.3), transparent 70%),
    linear-gradient(135deg, #1d2e24 0%, #14211a 60%, #0f1913 100%) !important;
}
html body .slc-thumb:not(.has-photo)::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 30%, #000, transparent 80%);
  mask-image: radial-gradient(80% 90% at 70% 30%, #000, transparent 80%);
}
html body .slc-thumb:not(.has-photo) > svg,
html body .slc-thumb:not(.has-photo) > .slc-tag {
  display: none !important;
}
html body .slc-thumb .slc-photo { transition: transform 1.1s var(--pm-ease); }
html body .svc-link-card:hover .slc-thumb .slc-photo { transform: scale(1.06); }

/* =====================================================================
   17 ─ LEGAL SUB-PAGES: split hero (title left, framed photo right),
   overview band, illustrated sub-service cards (unique icon per topic)
   ===================================================================== */
html body .lg-hero.lg-hero--page {
  display: block;
  min-height: 0;
  padding: clamp(118px, 13vw, 150px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(194, 88, 58, 0.07), transparent 60%),
    var(--pm-paper);
}
.lgph-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.lg-hero--page .lg-hero-copy { max-width: 600px; }
html body .lg-hero--page h1 {
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 16px;
  text-wrap: balance;
}
.lg-hero--page .lg-hero-sub { font-size: clamp(1.02rem, 1.25vw, 1.15rem); margin-bottom: 26px; }
.lg-hero--page .eyebrow { margin-bottom: 12px; }
.lgph-media {
  position: relative;
  margin: 0;
}
/* a terracotta block peeks out behind the photo, echoing the icon badges */
.lgph-media::before {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 42%;
  height: 46%;
  border-radius: var(--pm-r-lg);
  background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent-2));
  opacity: 0.9;
}
.lgph-media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--pm-r-lg);
  box-shadow: var(--pm-shadow-3);
  transition: transform 1.2s var(--pm-ease);
}
html.reveal-anim:not(.pm-ready) .lgph-media img { transform: scale(0.97); }
@media (max-width: 991.98px) {
  .lgph-grid { grid-template-columns: 1fr; }
  .lgph-media { order: -1; max-width: 640px; }
  html body .lg-hero.lg-hero--page { padding-top: 104px; }
}
@media (max-width: 575.98px) {
  .lgph-media::before { right: -8px; bottom: -8px; }
  .lg-hero--page .hero-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lgph-media img { opacity: 1 !important; transform: none !important; } }

/* overview band: the page's opening copy, one comfortable column */
html body .lg-overview { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); background: var(--pm-ivory); border-top: 1px solid var(--pm-line-2); }
.lg-overview-inner { max-width: 860px; }
.lg-overview-inner .lead-txt { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.75; color: var(--pm-ink); margin-bottom: 14px; }

/* sub-service cards on practice pages: same card as the landing page,
   with an illustrated header instead of a repeated group photo */
html body .row > [class*="col"] > .lgp-card { height: 100%; }
.lgp-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8 !important;
  overflow: hidden;
}
.lgp-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(90% 100% at 75% 30%, #000, transparent 85%);
  mask-image: radial-gradient(90% 100% at 75% 30%, #000, transparent 85%);
}
.lgp-tone-forest { background: radial-gradient(70% 90% at 90% 0%, rgba(194, 88, 58, 0.45), transparent 60%), linear-gradient(135deg, #24382c, #14211a); }
.lgp-tone-sage { background: radial-gradient(70% 90% at 90% 0%, rgba(240, 195, 173, 0.45), transparent 60%), linear-gradient(135deg, #5e7667, #3f4f3d); }
.lgp-tone-clay { background: radial-gradient(70% 90% at 90% 0%, rgba(255, 220, 200, 0.35), transparent 60%), linear-gradient(135deg, #b35a3c, #8a3f26); }
.lgp-art-ic {
  position: absolute;
  right: 6%;
  top: 50%;
  width: 46%;
  height: 120%;
  transform: translateY(-50%) rotate(-8deg);
  color: rgba(255, 255, 255, 0.16);
  stroke-width: 0.9;
  transition: transform 1s var(--pm-ease), color 0.6s;
}
.lgp-card:hover .lgp-art-ic { transform: translateY(-50%) rotate(0deg) scale(1.06); color: rgba(255, 255, 255, 0.26); }
.lgp-card--art .lgp-t { font-size: clamp(1.15rem, 1.4vw, 1.3rem); }
.lgp-card--art .lg-spec { justify-self: start; }
.lgp-card--art .lgp-tone-clay + .lgp-ic { background: var(--pm-forest); }

.lg-hero--page .lg-hero-rule { display: none; }

/* =====================================================================
   18 ─ BOLD THEME: Poppins headings, capitalised key phrases in green,
   solid green label pills, green icon tiles. Overrides earlier type and
   accent choices site-wide.
   ===================================================================== */
:root {
  --pm-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pm-head: #18201b;
  --pm-g-900: #a8442a;
  --pm-g-700: #14211a;
  --pm-g-600: #a8442a;
  --pm-g-500: #c2583a;
  --pm-g-300: #8fa394;
  --pm-g-100: #f6e4dc;
  --pm-grad: linear-gradient(135deg, #2c3a2a 0%, #14211a 100%);
  --pm-grad-text: linear-gradient(90deg, #a8442a 0%, #c2583a 100%);
}

/* ---- headings: heavy Poppins, deep green ---- */
html body h1,
html body h2,
html body .section-title,
html body .hx-title,
html body .pm-hero-title,
html body .lg-hero h1,
html body .cta-band h2,
html body .pm-enq-copy h2,
html body .pos-strip,
html body .mt-strip h3,
html body .pm-one-name,
html body .pm-sx-panel h3,
html body .pm-step h3,
html body .post-card h3,
html body .lgs-label,
html body .lgp-t,
html body .pm-svc-cta .pm-svc-t,
html body .page-hero:not(.blog-hero) h1,
html body .page-hero.blog-hero h1 {
  font-family: var(--pm-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  font-style: normal;
}
html body h1,
html body h2,
html body .section-title,
html body .pm-hero-title,
html body .lg-hero h1,
html body .page-hero:not(.blog-hero) h1 {
  color: var(--pm-head);
  -webkit-text-fill-color: currentColor;
}
html body .section-title { font-size: clamp(1.75rem, 3.1vw, 2.75rem); line-height: 1.12; }
html body .pm-hero-title { font-size: clamp(2.3rem, 4.6vw, 4.1rem) !important; line-height: 1.08 !important; font-weight: 800 !important; }
html body .lg-hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); line-height: 1.06; font-weight: 800 !important; }
html body .lg-hero--page h1 { font-size: clamp(1.85rem, 3.1vw, 2.8rem); line-height: 1.12; }
html body .page-hero:not(.blog-hero) h1 { font-size: clamp(1.95rem, 3.6vw, 3.1rem) !important; line-height: 1.1 !important; }
html body .page-hero:not(.blog-hero):not(:has(> .container)) + .section h1 { font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important; }
html body .cta-band h2, html body .pm-enq-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem) !important; line-height: 1.1; color: #fff; }
html body .pm-one-name { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
html body .pm-sx-panel h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
html body .pm-step h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
html body .post-card h3 { font-size: 1.12rem; line-height: 1.35; letter-spacing: -0.015em !important; }
html body .lgp-t { font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.25; color: var(--pm-head); }
html body .lgs-label { font-size: 1.15rem; }
html body .lgs-label span { font-size: 0.95rem; font-weight: 600; }
html body .pos-strip { font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.25; }
html body h3, html body h4, html body .pm-svc-t, html body .pm-sx-tab, html body .ind-card h4, html body .diff-card .dl {
  font-family: var(--pm-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- the key phrase: bold capitals in a green gradient ---- */
html body h1 em,
html body h2 em,
html body .section-title em {
  font-style: normal !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  background: var(--pm-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  padding-right: 0;
}
/* hero emphasis: white capitals on a solid green highlight */
html body .pm-rot em,
html body .lg-hero h1 em {
  font-style: normal !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--pm-grad) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  padding: 0.02em 0.28em 0.06em !important;
  border-radius: 0.16em;
  line-height: 1.12;
  box-shadow: 0 14px 30px -16px rgba(20, 33, 26, 0.7);
}
html body .pm-rot { padding: 0.06em 0.04em 0.14em; margin: -0.06em -0.04em -0.14em; }
/* on dark bands the key phrase turns light green */
html body .cta-band h2 em,
html body .pm-enq-copy h2 em,
html body .founder-panel em,
html body .bg-dark h2 em {
  background: linear-gradient(100deg, #e7b48c 0%, #fff 25%, #c2583a 50%, #e7b48c 75%, #fff 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ---- section labels: solid green pill, white spaced capitals ---- */
html body .eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  padding: 0.68em 1.3em !important;
  border-radius: 9px !important;
  border: 0 !important;
  background: var(--pm-grad) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-family: var(--pm-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  line-height: 1;
  box-shadow: 0 12px 26px -14px rgba(20, 33, 26, 0.6);
  margin-bottom: 20px;
}
html body .eyebrow::before { display: none !important; }
html body .bg-dark .eyebrow,
html body .cta-band .eyebrow,
html body .pm-enq-copy .eyebrow,
html body #founder .eyebrow {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
html body .pm-head .eyebrow + .section-title,
html body .eyebrow + h1,
html body .eyebrow + h2 { margin-top: 0; }

/* ---- icon tiles: green gradient squares with white icons ---- */
html body .pm-sx-ic,
html body .ind-ic,
html body .pm-svc-ic,
html body .diff-card .diff-ic,
html body .lgp-ic,
html body .lgs-ic {
  background: var(--pm-grad) !important;
  color: #fff !important;
  border-color: transparent;
  border-radius: 12px;
  box-shadow: 0 10px 22px -12px rgba(20, 33, 26, 0.65);
  transition: transform 0.45s var(--pm-ease), box-shadow 0.45s var(--pm-ease);
}
html body .lgp-ic { border: 3px solid #fff !important; border-radius: 16px; }
html body .lgs-ic { width: 46px; height: 46px; display: grid; place-items: center; }
html body .lgs-ic svg { width: 24px; height: 24px; }
html body .lgs-item:hover .lgs-ic, html body .pm-svc:hover .pm-svc-ic, html body .lgp-card:hover .lgp-ic, html body .ind-card:hover .ind-ic, html body .pm-sx-tab:hover .pm-sx-ic {
  transform: translateY(-3px) scale(1.06) rotate(-4deg);
  box-shadow: 0 16px 28px -12px rgba(20, 33, 26, 0.75);
}
html body .lgp-card--art .lgp-tone-clay + .lgp-ic { background: var(--pm-grad) !important; }
html body ul.check-list li svg { background: var(--pm-g-100); color: var(--pm-g-600); }
html body .proc-badge { background: var(--pm-grad) !important; }

/* sector list rows look like the reference cards: white, icon tile + label */
html body .pm-sx-tab { font-family: var(--pm-display); font-weight: 600; color: var(--pm-head); background: #fff; border: 1px solid var(--pm-line-2); box-shadow: var(--pm-shadow-1); }
html body .pm-sx-tab[aria-selected="true"] { border-color: rgba(194, 88, 58, 0.35); box-shadow: 0 16px 34px -18px rgba(20, 33, 26, 0.45); }
html body .pm-sx-tab[aria-selected="true"]::before { background: var(--pm-g-500); }
html body .pm-sx-tabs { gap: 10px; }

/* ---- buttons: green gradient, darker wipe on hover ---- */
html body .btn { font-family: var(--pm-display); font-weight: 600; letter-spacing: 0; }
html body .btn-brand { background: var(--pm-grad) !important; border-color: #14211a; box-shadow: 0 14px 28px -14px rgba(20, 33, 26, 0.7); }
html body .btn-brand::before { background: var(--pm-g-900); }
html body .btn-brand:hover, html body .btn-brand:focus-visible { border-color: var(--pm-g-900); box-shadow: 0 18px 34px -14px rgba(20, 33, 26, 0.75); }
html body .cta-band .btn-brand, html body .pm-jg-after .btn-brand, html body .pm-sx-panel .btn-brand { background: #fff !important; color: var(--pm-g-700) !important; }

/* ---- numbers and quotes ---- */
html body .diff-card .dn, html body .pm-hero-proof b, html body .pm-result-num, html body .ring b {
  font-family: var(--pm-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
}
html body .diff-card .dn { font-size: clamp(2.2rem, 3.4vw, 2.9rem); color: var(--pm-g-300); }
html body .diff-card.is-current .dn { color: var(--pm-g-600); }
html body .pm-hero-proof b { color: var(--pm-g-700); }
html body #founder blockquote, html body #founder .founder-quote {
  font-family: var(--pm-display) !important;
  font-weight: 500 !important;
  font-size: clamp(1.2rem, 2vw, 1.65rem) !important;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
html body .offcanvas .mnav-item { font-family: var(--pm-display); font-weight: 600; font-size: 1.15rem; }
html body .founder-panel::before { font-family: Georgia, serif; }

/* bold theme fixes: highlight hugs each word; room for the box line; pills wrap cleanly */
html body .pm-rot em { justify-self: start; width: max-content; }
html body .pm-rot { vertical-align: baseline; }
html body .lg-hero h1 { line-height: 1.18 !important; }
html body .lg-hero h1 em { display: inline-block; margin-top: 0.06em; line-height: 1.08; }
html body .pm-hero-title { line-height: 1.14 !important; }
html body .eyebrow {
  font-size: 0.74rem !important;
  line-height: 1.45 !important;
  padding: 0.55em 1.25em !important;
  max-width: 100%;
  flex-wrap: wrap;
}


/* hero rotating word: terracotta capitals on a soft underline (no box),
   followed by "consultancy"; the slot eases to each word's width */
html body .pm-rot {
  display: inline-grid !important;
  vertical-align: bottom;
  overflow: hidden;
  padding: 0 0 0.12em !important;
  margin: 0 0 -0.12em !important;
  transition: width 0.7s var(--pm-ease);
}
html body .pm-rot em {
  position: relative;
  background: var(--pm-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  line-height: inherit;
  white-space: nowrap;
}
html body .pm-rot em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 0.16em;
  border-radius: 0.1em;
  background: rgba(194, 88, 58, 0.22);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s var(--pm-ease) 0.25s;
}
html body .pm-rot em.is-on::after { transform: scaleX(1); }
html body .pm-rot-tail { margin-left: 0.25em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html body .pm-rot { transition: none; } }

html body .pm-rot-tail { margin-left: 0; }
html body .pm-hero-copy { max-width: 820px; }
html body .pm-hero-title { font-size: clamp(2.1rem, 3.9vw, 3.5rem) !important; }
html body .pm-hero-sub { max-width: 52ch; }
html body .pm-rot em.is-out { opacity: 0; transition: opacity 0.25s ease, transform 0.5s var(--pm-ease); }
@media (max-width: 767.98px) { html body .pm-hero-title br { display: none; } }


/* heading font: Plus Jakarta Sans (replaces Poppins site-wide) */
:root { --pm-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* hero: calmer weight; rotating word in normal case at the headline weight */
html body .pm-hero-title { font-weight: 700 !important; letter-spacing: -0.03em !important; }
html body .pm-rot em { text-transform: capitalize !important; font-weight: 700 !important; letter-spacing: -0.03em; }