/* ===========================================================================
   Prime Partners — shared site chrome
   Header, navigation, newsletter block and footer.

   This file is loaded by every page. Individual pages keep their own inline
   styles for their own content, so anything in here should only ever describe
   the header, the nav, the newsletter block or the footer.

   Colours and type follow the Prime Partners design system:
   navy #000d40, blue #0645b9, light azure #b3d9f7, yellow #ffde59, Onest.
   =========================================================================== */

/* ===========================================================================
   THE PALETTE

   These are the Prime Partners colours, and this block is where they are
   settled. Every page also declares its own copy in its inline styles,
   because each page carries its own layout CSS, and they are checked against
   this list by:

       python3 tools/check-styles.py

   That reports any page whose colours have drifted. If you change a colour
   here, run the checker to see which pages still hold the old one.

   navy          #000d40   headings, dark sections, body text
   blue          #0645b9   links, primary buttons, eyebrow labels
   azure         #1985c8   mid blue, used for accents on white
   light azure   #b3d9f7   pale bands and section backgrounds
   yellow        #ffde59   the one accent, used sparingly
   light yellow  #fff6d4   soft yellow fills
   grey          #5a6480   secondary body text
   body grey     #3a4661   article body text
   line          #e6eaf2   hairline rules and borders
   soft          #f7f9fc   the off white page ground

   Some pages use a second name for the same colour, inherited from whoever
   built them: --vivid is --blue, --paper is --white, --light-blue and
   --section-azure are --light-azure. The checker knows about these, so they
   are reported as aliases rather than as mistakes.
   =========================================================================== */

/* ==========================================================================
   Buttons

   One treatment, applied from here so every button on the site behaves the
   same. A button lifts, its fill deepens from the left, and the arrow steps
   forward. All of it stops under prefers-reduced-motion.
   ========================================================================== */
.pp-btn-primary, .pp-btn-blue, .pp-btn-white-box, .pp-btn-navy,
.pp-btn-outline, .pp-header-cta, .btn, .ev-btn-register, .ev-btn-watch{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),
             box-shadow .32s ease,
             background-color .32s ease,
             color .32s ease;
}
.pp-btn-primary::before, .pp-btn-blue::before, .pp-btn-navy::before,
.pp-header-cta::before, .btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,.22);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.pp-btn-primary:hover::before, .pp-btn-blue:hover::before, .pp-btn-navy:hover::before,
.pp-header-cta:hover::before, .btn:hover::before{ transform:scaleX(1); }

.pp-btn-primary:hover, .pp-btn-blue:hover, .pp-btn-white-box:hover,
.pp-btn-navy:hover, .pp-btn-outline:hover, .pp-header-cta:hover, .btn:hover,
.ev-btn-register:hover, .ev-btn-watch:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,13,64,.18);
}
.pp-btn-primary:active, .pp-btn-blue:active, .pp-header-cta:active, .btn:active{
  transform:translateY(-1px);
}

/* the arrow steps forward with it */
.pp-btn-primary svg, .pp-btn-blue svg, .pp-btn-white-box svg, .pp-btn-navy svg,
.pp-btn-outline svg, .btn svg, .btn .arr, .pp-btn-arrow{
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.pp-btn-primary:hover svg, .pp-btn-blue:hover svg, .pp-btn-white-box:hover svg,
.pp-btn-navy:hover svg, .pp-btn-outline:hover svg, .btn:hover svg,
.btn:hover .arr, a:hover > .pp-btn-arrow{
  transform:translateX(5px);
}

@media (prefers-reduced-motion: reduce){
  .pp-btn-primary, .pp-btn-blue, .pp-btn-white-box, .pp-btn-navy, .pp-btn-outline,
  .pp-header-cta, .btn, .ev-btn-register, .ev-btn-watch,
  .pp-btn-primary::before, .pp-btn-blue::before, .pp-btn-navy::before,
  .pp-header-cta::before, .btn::before,
  .btn svg, .btn .arr, .pp-btn-arrow{ transition:none; }
  .pp-btn-primary:hover, .pp-btn-blue:hover, .pp-btn-white-box:hover,
  .pp-btn-navy:hover, .pp-btn-outline:hover, .pp-header-cta:hover, .btn:hover{
    transform:none;
  }

  /* Two things on the site scroll by themselves, the Google reviews and the
     membership logos. Stopping them is right at this setting, but stopping
     them on their own leaves the reader looking at the first card with no way
     to reach the rest. So the frame they sit in becomes scrollable instead.
     The pages ask for this already, on the track rather than the frame, and
     that cannot work: the track sizes itself to its contents, so it never
     overflows and never gets a scrollbar. */
  .pp-mm-track-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .pp-mm-track{animation:none;}
}

/* ==========================================================================
   Type and spacing scale

   The single source of truth. This file loads after each page's own styles,
   so what is set here wins, and a page only needs its own rule when it is
   doing something genuinely different.

   Six levels, two weights. Bold is 700, regular is 400, nothing in between.
   The rule underneath the whole thing: a heading is never lighter than the
   heading above it.
   ========================================================================== */
:root{
  --pp-hero-h1:60px;   /* a hub or service page opening over video or photo */
  --pp-h1:54px;        /* an article headline, or a page that is not a hero */
  --pp-h2:36px;        /* a section heading */
  --pp-h3:22px;        /* a card title, a question, a sub heading */
  --pp-h4:18px;        /* the deepest level, inside an article */
  --pp-body:16px;
  --pp-eyebrow:13px;

  --pp-line-tight:1.05;
  --pp-line-heading:1.15;
  --pp-line-body:1.65;

  /* vertical rhythm for a section band */
  --pp-section-sm:64px;
  --pp-section:88px;
  --pp-section-lg:120px;
}

/* The scale has to come down on a narrow screen, and it has to come down
   here. A page setting its own smaller heading inside a media query cannot
   win, because a media query adds no specificity and site.css is linked
   after the page, so the desktop size above would beat it. Sizing the scale
   itself is the only place that holds. */
@media(max-width:900px){
  :root{
    --pp-hero-h1:44px;
    --pp-h1:40px;
    --pp-h2:30px;
    --pp-h3:20px;
  }
}
@media(max-width:600px){
  :root{
    --pp-hero-h1:36px;
    --pp-h1:32px;
    --pp-h2:26px;
    --pp-h3:19px;
  }
}

.pp-hero-h1{
  font-size:var(--pp-hero-h1);
  font-weight:700;
  line-height:var(--pp-line-tight);
  letter-spacing:-0.025em;
}
.pp-h1{
  font-size:var(--pp-h1);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.025em;
}
.pp-h2{
  font-size:var(--pp-h2);
  font-weight:300;
  line-height:var(--pp-line-heading);
  letter-spacing:-0.03em;
}

/* A section heading is light. It sits under a bold eyebrow, and the contrast
   between the two is what opens a section. Weight only, never size, so a page
   that sets its own size for a heading keeps it. The :not() is there to carry
   enough specificity to beat a page's own `.something h2` rule, which is how
   most of them are written. */
h2:not(.pp-h2-bold){font-weight:300;}

/* Two places keep the bold. Inside a piece of writing an H2 is signposting
   rather than announcing, so it has to hold its own against the body copy
   around it. And the author name under an article is a name, not the opening
   of a section. */
.post-prose h2,
.post-body h2,
h2.author-name{font-weight:700;}
.pp-h3{
  font-size:var(--pp-h3);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
}
.pp-h4{
  font-size:var(--pp-h4);
  font-weight:700;
  line-height:1.35;
}
/* An eyebrow is always bold. At 400 it goes weak against the heading below.
   The list is long because the same thing was built under a different name on
   almost every page. They are all the small uppercase line that sits above a
   heading, so they are all one thing and they all sit at 13px and 700. */
.pp-eyebrow,
.pp-divider-label,
.pp-section-divider-label,
.pp-hero-eyebrow,
.pp-story-eyebrow,
.pp-newsletter-label,
.pp-pillar-eyebrow,
.pp-stat-label,
.pp-events-label,
.pp-memberships-label{
  font-size:var(--pp-eyebrow);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

:root{
  --pp-navy:#000d40;
  --pp-navy-deep:#000a33;
  --pp-blue:#0645b9;
  --pp-azure:#bad8f4;
  --pp-light-azure:#b3d9f7;
  /* bright blue, the hover and focus state of the brand blue */
  --pp-blue-bright:#0a5cf5;
  --pp-yellow:#ffde59;
  --pp-white:#ffffff;
  --pp-header-height:86px;

  /* The short names, available everywhere rather than only inside the footer
     block. A rule that reaches for one of these outside that block used to
     get nothing at all, and CSS says nothing when that happens: the property
     is simply dropped. That is how the hero lost its darkening for anyone
     with reduce motion turned on, and it looked plausible enough that it
     took a screenshot from a real phone to find. Every page already sets
     these to exactly these values. */
  --navy:var(--pp-navy);
  --navy-deep:var(--pp-navy-deep);
  --blue:var(--pp-blue);
  --azure:var(--pp-azure);
  --light-azure:var(--pp-light-azure);
  --yellow:var(--pp-yellow);
  --white:var(--pp-white);
}

/* The footer block was written against these names, so keep them available
   on pages that do not define their own. */
.pp-anchor{
  --navy:var(--pp-navy);
  --navy-deep:var(--pp-navy-deep);
  --blue:var(--pp-blue);
  --azure:var(--pp-azure);
  --light-azure:var(--pp-azure);
  --yellow:var(--pp-yellow);
  --white:var(--pp-white);
}

/* ===========================================================================
   HEADER
   =========================================================================== */

.pp-site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--pp-navy);
  color:var(--pp-white);
  font-family:'Onest','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pp-site-header *{box-sizing:border-box;}

.pp-site-header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
  height:var(--pp-header-height);
  display:flex;
  align-items:center;
  gap:32px;
}

/* ---- Wordmark ---- */
.pp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--pp-white);
  flex-shrink:0;
}
/* The supplied logo is the stacked lockup, three lines deep, so it needs
   more height than a single line wordmark would. It is dropped so its top
   edge lines up with the top of the menu text, rather than sitting above it. */
.pp-brand img{height:46px;width:auto;display:block;}
.pp-brand-text{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  white-space:nowrap;
}
.pp-brand-dot{color:var(--pp-yellow);}

/* ---- Desktop navigation ---- */
.pp-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
}
.pp-nav-item{position:relative;}
.pp-nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:4px;
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.pp-nav-link:hover,
.pp-nav-item:focus-within > .pp-nav-link{
  color:var(--pp-white);
  background:rgba(255,255,255,.07);
}
.pp-nav-link[aria-current="page"],
.pp-nav-link.is-section{
  color:var(--pp-yellow);
}
.pp-nav-caret{
  width:11px;
  height:11px;
  flex-shrink:0;
  transition:transform .2s ease;
}
.pp-nav-item:hover .pp-nav-caret,
.pp-nav-item:focus-within .pp-nav-caret{transform:rotate(180deg);}

/* ---- Dropdown ---- */
.pp-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:320px;
  background:var(--pp-white);
  border-radius:8px;
  box-shadow:0 18px 48px rgba(0,13,64,.22);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.pp-nav-item:hover .pp-dropdown,
.pp-nav-item:focus-within .pp-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.pp-dropdown-link{
  display:block;
  padding:11px 14px;
  border-radius:5px;
  font-size:14.5px;
  line-height:1.35;
  color:var(--pp-navy);
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.pp-dropdown-link:hover{background:#f2f6fd;color:var(--pp-blue);}
.pp-dropdown-link[aria-current="page"]{color:var(--pp-blue);font-weight:600;}
.pp-dropdown-divider{
  height:1px;
  background:rgba(0,13,64,.1);
  margin:8px 12px;
}
.pp-dropdown-all{
  display:block;
  padding:11px 14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--pp-blue);
  text-decoration:none;
}
.pp-dropdown-all:hover{text-decoration:underline;}

/* ---- Header actions ---- */
.pp-header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.pp-header-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:4px;
  background:var(--pp-yellow);
  color:var(--pp-navy);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,background .18s ease;
}
.pp-header-cta:hover{background:#ffe883;transform:translateY(-1px);}

/* ---- Burger ---- */
.pp-burger{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  padding:0;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--pp-white);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.pp-burger:hover{background:rgba(255,255,255,.08);}
.pp-burger svg{width:24px;height:24px;}
.pp-burger .pp-burger-close{display:none;}
.pp-burger[aria-expanded="true"] .pp-burger-open{display:none;}
.pp-burger[aria-expanded="true"] .pp-burger-close{display:block;}

/* ---- Mobile panel ---- */
.pp-mobile-nav{
  display:none;
  background:var(--pp-navy-deep);
  border-top:1px solid rgba(255,255,255,.08);
  max-height:calc(100vh - var(--pp-header-height));
  overflow-y:auto;
}
.pp-mobile-nav.is-open{display:block;}
.pp-mobile-nav-inner{padding:14px 24px 28px;}
.pp-mobile-group{border-bottom:1px solid rgba(255,255,255,.09);}
.pp-mobile-link{
  display:block;
  padding:16px 2px;
  font-size:17px;
  font-weight:500;
  color:var(--pp-white);
  text-decoration:none;
}
.pp-mobile-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 2px;
  border:none;
  background:none;
  font-family:inherit;
  font-size:17px;
  font-weight:500;
  color:var(--pp-white);
  cursor:pointer;
  text-align:left;
}
.pp-mobile-toggle svg{width:14px;height:14px;transition:transform .2s ease;}
.pp-mobile-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.pp-mobile-sub{display:none;padding:0 0 12px 14px;}
.pp-mobile-sub.is-open{display:block;}
.pp-mobile-sub a{
  display:block;
  padding:11px 0;
  font-size:15px;
  color:rgba(255,255,255,.78);
  text-decoration:none;
}
.pp-mobile-sub a:hover{color:var(--pp-yellow);}
.pp-mobile-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:24px;
}
.pp-mobile-actions .pp-header-cta{justify-content:center;padding:16px 22px;}

@media(max-width:1180px){
  .pp-site-header-inner{padding:0 28px;gap:20px;}
  .pp-nav-link{padding:10px 10px;font-size:14.5px;}
}
@media(max-width:1000px){
  .pp-nav{display:none;}
  .pp-header-actions{display:none;}
  .pp-burger{display:flex;}
}
@media(max-width:1000px){
  /* Once the nav collapses there is no menu to line up with, so the logo
     goes back to sitting centred in a shorter header. */
  :root{--pp-header-height:76px;}
  .pp-brand img{height:42px;}
}
@media(max-width:560px){
  .pp-site-header-inner{padding:0 20px;}
  .pp-mobile-nav-inner{padding:14px 20px 28px;}
}

/* Skip link, for keyboard and screen reader users */
.pp-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1100;
  background:var(--pp-yellow);
  color:var(--pp-navy);
  padding:14px 22px;
  font-weight:700;
  text-decoration:none;
}
.pp-skip:focus{left:12px;top:12px;}

/* ===========================================================================
   NEWSLETTER + FOOTER
   Lifted unchanged from the original prime-footer.html so the published
   footer matches what was signed off.
   =========================================================================== */

.pp-anchor{
  font-family:'Onest','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.pp-anchor *{box-sizing:border-box;}
.pp-anchor img{max-width:100%;}

/* ============ DARK ANCHOR (newsletter + footer share one navy zone) ============ */
.pp-anchor{
  background:var(--navy);
  color:var(--white);
}

/* ---- Newsletter CTA ---- */
.pp-newsletter{
  padding:56px 32px 48px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pp-newsletter-inner{
  max-width:1280px;
  margin:0 auto;
}
.pp-below-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  margin-top:36px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.12);
}
.pp-newsletter-label{
  /* Size, weight, tracking and case come from the eyebrow rule above. This
     one only says what is different about it: the colour and the gap under. */
  color:var(--light-azure);
  margin-bottom:14px;
}
.pp-newsletter h2{
  font-size:36px;
  /* weight comes from the section heading rule above */
  line-height:1.1;
  letter-spacing:-0.03em;
  margin-bottom:12px;
}
.pp-newsletter p{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  margin-bottom:28px;
}
.pp-newsletter-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pp-newsletter-row{
  display:flex;
  gap:12px;
}
.pp-newsletter input[type="email"],
.pp-newsletter input[type="text"]{
  flex:1;
  min-width:0;
  background:var(--white);
  border:none;
  border-radius:8px;
  padding:17px 20px;
  font-family:inherit;
  font-size:16px;
  color:var(--navy);
  outline:none;
}
.pp-newsletter input::placeholder{color:#7a869a;}
.pp-newsletter-btn{
  background:var(--blue);
  color:var(--white);
  border:none;
  border-radius:4px;
  padding:0 34px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  transition:background .25s ease,transform .25s ease;
}
.pp-newsletter-btn:hover{background:#0a55de;transform:translateY(-2px);}
.pp-newsletter-btn svg{transition:transform .25s ease;}
.pp-newsletter-btn:hover svg{transform:translateX(3px);}
.pp-newsletter-consent{
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.66);
}
.pp-newsletter-consent a{color:var(--white);text-decoration:underline;}
.pp-newsletter-social{
  margin-top:0;
  padding-top:0;
}
.pp-newsletter-social-head{
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:14px;
}
.pp-newsletter-social-copy{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin-bottom:16px;
}
.pp-newsletter-social-icons{
  display:flex;
  align-items:center;
  gap:14px;
}
.pp-newsletter-social-icons a{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
  transition:color .22s ease,transform .22s ease;
}
.pp-newsletter-social-icons a svg{width:26px;height:26px;fill:currentColor;}
.pp-newsletter-social-icons a:hover{color:var(--yellow);transform:translateY(-2px);}

/* ---- EEAT trust signals (right column of below-row) ---- */
.pp-trust-inline{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  width:100%;
}
.pp-trust-head{
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:14px;
}
.pp-trust-marks{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px 36px;
  margin-top:8px;
}
.pp-trust-mark{
  height:34px;
  opacity:.85;
  transition:opacity .2s ease;
}
.pp-trust-mark img{height:100%;width:auto;display:block;}
.pp-trust-mark:hover{opacity:1;}
.pp-trust-mark-xero{
  height:40px;
  opacity:1;
}
.pp-trust-mark-chip{
  height:48px;
  background:var(--white);
  border-radius:8px;
  padding:8px 14px;
  opacity:1;
  display:inline-flex;
  align-items:center;
}
.pp-trust-mark-cpa{
  height:42px;
  opacity:1;
}
.pp-trust-rating{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  text-decoration:none;
  transition:opacity .2s ease;
}
.pp-trust-rating:hover{opacity:.85;}
.pp-trust-rating:hover .pp-trust-rating-arrow{transform:translate(2px,-2px);}
.pp-trust-rating-arrow{
  width:14px;height:14px;
  color:rgba(255,255,255,.7);
  transition:transform .2s ease;
}
.pp-trust-experience{
  font-size:13px;
  color:rgba(255,255,255,.72);
  padding-left:20px;
  margin-left:4px;
  border-left:1px solid rgba(255,255,255,.16);
  white-space:nowrap;
}
.pp-trust-right{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.pp-trust-stars{
  color:var(--yellow);
  font-size:15px;
  letter-spacing:2px;
}
.pp-trust-rating-text{
  font-size:13px;
  color:rgba(255,255,255,.82);
}
.pp-trust-rating-text strong{font-weight:700;color:var(--white);}

/* ---- Footer ---- */
.pp-footer{
  padding:64px 32px 36px;
}
.pp-footer-inner{
  max-width:1280px;
  margin:0 auto;
}
.pp-footer-acknowledgement{
  padding-bottom:44px;
  margin-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pp-footer-acknowledgement-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:12px;
}
.pp-footer-acknowledgement p{
  font-size:14.5px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
}
.pp-footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pp-footer-brand{
  font-size:21px;
  font-weight:700;
  color:var(--white);
  margin-bottom:14px;
}
.pp-footer-brand-line{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  margin-bottom:8px;
}
.pp-footer-tagline{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.58);
  margin-bottom:22px;
}
.pp-footer-social{
  display:flex;
  gap:12px;
}
.pp-footer-social a{
  width:38px;
  height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.pp-footer-social a svg{
  width:18px;height:18px;
  stroke:currentColor;
  transition:stroke .22s ease;
}
.pp-footer-social a:hover{
  background:var(--blue);
  border-color:var(--blue);
  transform:translateY(-2px);
}
.pp-footer-col-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:18px;
}
.pp-footer-col-link{
  display:block;
  font-size:15px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  margin-bottom:13px;
  transition:color .2s ease,padding-left .2s ease;
  cursor:pointer;
}
.pp-footer-col-link:hover{color:var(--white);padding-left:4px;}
.pp-footer-legal{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding-top:28px;
}
.pp-footer-legal-text{
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.58);
  max-width:680px;
}
.pp-footer-legal-copyright{
  font-size:13px;
  color:rgba(255,255,255,.48);
  white-space:nowrap;
}

/* ---- Hero video overlay ---- */
/* Every hero video carried its own overlay value, so the footage showed
   through more on some pages than others. One value now, dark enough that the
   headline sits on navy and the film reads as a glint behind it. Because
   site.css is linked after each page's own styles, this is what wins. */
.pp-hero-video-overlay,
video ~ .pp-hero-overlay,
video ~ .hero-overlay{
  background:linear-gradient(180deg,
    rgba(0,13,64,.93) 0%,
    rgba(0,13,64,.90) 55%,
    rgba(0,13,64,.96) 100%);
}
/* ---- Card hover ---- */
/* Every page had grown its own version of this, lifting anywhere from 2px to
   6px with a different shadow and border each time, so a card behaved
   differently depending on which page you were on. Two treatments now, one
   for a card on a light ground and one for a card on navy. site.css is
   linked after each page's own styles, so this is what wins. */
.pp-pillar,
.pp-card,
.hub-card,
.card,
.pp-team-card,
.role{
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             box-shadow .3s ease,
             border-color .3s ease,
             background .3s ease;
}
.pp-pillar:hover,
.pp-card:hover,
.hub-card:hover,
.card:hover,
.pp-team-card:hover,
.role:hover{
  transform:translateY(-6px);
  border-color:rgba(6,69,185,.3);
  box-shadow:0 18px 44px rgba(0,13,64,.12);
}

/* On navy the lift is smaller and the edge picks up the yellow, because a
   shadow does nothing against a dark ground. */
.pp-industry,
.pp-personal-card{
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             border-color .3s ease,
             background .3s ease;
}
.pp-industry:hover,
.pp-personal-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,222,89,.4);
  background:rgba(255,255,255,.07);
}

@media (prefers-reduced-motion: reduce){
  .pp-pillar,.pp-card,.hub-card,.card,.pp-team-card,.role,
  .pp-industry,.pp-personal-card,
  .pp-pillar:hover,.pp-card:hover,.hub-card:hover,.card:hover,
  .pp-team-card:hover,.role:hover,
  .pp-industry:hover,.pp-personal-card:hover{transform:none;transition:none;}
}

/* ---- No widows ---- */
/* A single word left stranded on the last line reads as a mistake. The
   browser can prevent it: balance evens the lines of a heading out, and
   pretty keeps the last line of a paragraph from holding one word on its
   own. Anything that does not support them wraps as it always did. */
h1,h2,h3,h4,h5,h6,
.pp-hero-h1,.pp-h1,.pp-h2,.pp-h3,.pp-h4,
.pp-eyebrow,.pp-divider-label,.pp-section-divider-label,
blockquote,figcaption,
.pp-card-title,.pp-pillar-title,.pp-article-title,.card-body h3{
  text-wrap:balance;
}
p,li,dd,
.pp-prose,.pp-section-intro,.pp-lead{
  text-wrap:pretty;
}

/* ---- Layering behind a hero or a photo band ---- */
/* These sections put a photo or a video behind the words and a navy wash
   over it, and they did it by pushing both to a negative level so they sat
   under the text. Safari on a phone does not paint a negative level reliably
   inside a section that isolates itself, and the wash disappears, which
   leaves white text sitting on an undarkened photograph and parts of the
   headline become unreadable.
   The order is the same, it is just built upwards instead: picture, then
   wash, then words. */
.pp-hero-video,
.pp-parallax-bg{z-index:0;}
.pp-hero-video-overlay,
.pp-parallax-overlay-navy{z-index:1;}
.pp-hero > .pp-inner,
.pp-has-parallax > .pp-inner{position:relative;z-index:2;}

.pp-pillar::before{z-index:0;}
.pp-pillar > *{position:relative;z-index:1;}

/* iOS hands a playing video to the system to draw, on a layer of its own,
   and that layer can end up painted over the top of things that are meant to
   sit above it. Giving the wash a layer of its own too keeps the two in the
   right order. */
.pp-hero-video-overlay,
.pp-parallax-overlay-navy{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

/* ---- Google reviews on a small screen ---- */
/* The cards are 420px wide, which is wider than a phone, so the first review
   was cut off mid sentence with the rest of it somewhere off the side. And a
   row of text sliding past on its own is hard to read on a phone even when it
   is moving.
   So a phone, and anyone with reduce motion turned on, gets a carousel they
   move themselves: one review at a time, sized to the screen, snapping into
   place as it is swiped. */
@media(max-width:600px){
  .pp-rev-track{animation:none;}
}
@media(max-width:600px),(prefers-reduced-motion:reduce){
  .pp-rev-track-wrap{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    mask-image:none;
    -webkit-mask-image:none;
  }
  .pp-rev-track{padding:0.5rem 1.25rem;gap:1rem;}
  .pp-rev-card{
    flex:0 0 auto;
    width:calc(100vw - 3.5rem);
    max-width:420px;
    scroll-snap-align:center;
  }
  /* The second set of four exists only so the loop can join up seamlessly.
     With nothing looping, they are the same four reviews a second time. */
  .pp-rev-card[aria-hidden="true"]{display:none;}
}

@media(max-width:880px){
  .pp-newsletter{padding:60px 24px 52px;}
  .pp-below-row{grid-template-columns:1fr;gap:36px;}
  .pp-footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media(max-width:560px){
  .pp-newsletter-row{flex-direction:column;}
  .pp-newsletter-btn{padding:16px 30px;justify-content:center;}
  .pp-trust-mark + .pp-trust-mark{padding-left:0;border-left:none;}
  .pp-footer-grid{grid-template-columns:1fr;}
  .pp-footer-legal{flex-direction:column;align-items:flex-start;}
}

/* ===========================================================================
   Call to action buttons

   Several hero and section buttons were plain <button> elements that did
   nothing. They are real links now, so they need the underline taken off.
   =========================================================================== */
a.pp-btn,
a.pp-btn-primary,
a.pp-btn-blue,
a.pp-btn-navy-box,
a.pp-btn-white-box{
  text-decoration:none;
  cursor:pointer;
}