/* ==========================================================================
   Podium Pages — shared stylesheet for hand-authored HTML pages
   Everything is scoped under .pd-page so it can never leak into WPBakery
   pages, and so it outranks Salient's element-level defaults.
   ========================================================================== */

.pd-page {
  --pd-ink:        #0A0A0A;
  --pd-ink-90:     #141414;
  --pd-green:      #01644D;
  --pd-green-dark: #013D2E;
  --pd-mint:       #5FC0A6;
  --pd-white:      #ffffff;
  --pd-surface:    #F4F4F2;
  --pd-border:     #E4E4E0;
  --pd-border-lt:  #E9E9E6;
  --pd-field:      #DEDED9;
  --pd-body:       #26261F;
  --pd-muted:      #5A5A54;
  --pd-faint:      #8A8A82;
  --pd-placeholder:#A0A099;

  /* MUST match Salient's own container (Theme Options → Max Website Container
     Width / Container Left-Right Padding) so every section lines up with the
     logo and nav above it. Change these two together if that theme setting
     ever changes — a mismatch shows immediately as the nav being narrower or
     wider than the content.
     Raised from 1425 to 2560 on 30 Jul so the layout keeps growing with the
     viewport rather than stopping dead on wide screens. Prose is capped
     separately (see below) so line length stays readable. */
  --pd-max:  2560px;
  --pd-pad:  20px;
  --pd-rhythm: 96px;

  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--pd-ink);
  background: var(--pd-white);
  -webkit-font-smoothing: antialiased;
}

/* Neutralise Salient's content wrapper so full-bleed bands reach the edges. */
.pd-container-wrap {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--pd-white) !important;
  overflow: visible !important;
}
.pd-page img { max-width: 100%; height: auto; }
.pd-page *, .pd-page *::before, .pd-page *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. Layout
   -------------------------------------------------------------------------- */
.pd-sec {
  max-width: var(--pd-max);
  margin: 0 auto;
  padding: var(--pd-rhythm) var(--pd-pad) 0;
}
/* First section on the page: Salient's header already supplies the breathing
   room the mock got from its own sticky nav, so the hero is inset by the same
   20px it has left and right. */
.pd-sec.is-first { padding-top: 20px; }
.pd-sec.is-pt-56 { padding-top: 56px; }
.pd-sec.is-pt-20 { padding-top: 20px; }
.pd-sec.is-pt-16 { padding-top: 16px; }
.pd-sec.is-pb-96 { padding-bottom: var(--pd-rhythm); }

/* Full-bleed dark band */
.pd-band {
  margin-top: var(--pd-rhythm);
  background: var(--pd-ink);
  padding: var(--pd-rhythm) 0;
}
.pd-band__inner {
  max-width: var(--pd-max);
  margin: 0 auto;
  padding: 0 var(--pd-pad);
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.pd-stack   { display: flex; flex-direction: column; gap: 18px; }
.pd-stack-l { display: flex; flex-direction: column; gap: 44px; }
.pd-stack-m { display: flex; flex-direction: column; gap: 48px; }
.pd-stack-s { display: flex; flex-direction: column; gap: 14px; }

.pd-split   { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pd-split.is-end { align-items: end; }

.pd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pd-grid-4.is-g16 { gap: 16px; }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
.pd-page h1, .pd-page h2, .pd-page h3, .pd-page h4 {
  font-family: inherit;
  margin: 0;
  color: inherit;
  text-transform: none;
}
.pd-page p { margin: 0; }
.pd-page a { color: var(--pd-green); text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.pd-page a:hover { color: var(--pd-green-dark); }

.pd-eyebrow {
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pd-green);
}
.pd-eyebrow.is-mint  { color: var(--pd-mint); }
.pd-eyebrow.is-white { color: rgba(255,255,255,0.78); }

.pd-page .pd-h1 { font-size: 80px; font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; max-width: 23ch; text-wrap: balance; }
.pd-page .pd-h2 { font-size: 50px; font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }
.pd-page .pd-h2.is-panel { font-size: 48px; }
.pd-page .pd-h2.is-case  { font-size: 44px; line-height: 1.04; }
.pd-page .pd-h2.is-lg    { font-size: 52px; line-height: 1.0; }
.pd-page .pd-h2.is-sm    { font-size: 38px; line-height: 1.05; letter-spacing: -0.035em; }
.pd-page .pd-h3 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.pd-page .pd-h3.is-lg { font-size: 27px; line-height: 1.15; letter-spacing: -0.025em; }
.pd-page .pd-h3.is-faq { font-size: 22px; line-height: 1.3; }

.pd-lead    { font-size: 19px; line-height: 1.6; }
.pd-lead.is-sm { font-size: 18px; }
.pd-body    { font-size: 16px; line-height: 1.65; }
.pd-body.is-lg { font-size: 17px; line-height: 1.6; }
.pd-small   { font-size: 15px; line-height: 1.55; }
.pd-caption { font-size: 13px; line-height: 1.5; }

/* Colour helpers are scoped to .pd-page so they outrank the heading reset
   above, which sets `color: inherit` to shake off Salient's h1–h4 colours. */
/* Line-length caps. The container is fluid up to --pd-max, so without these
   prose would run to 100+ characters per line on a wide monitor. Cards are
   already narrower than 75ch, so they are unaffected. */
.pd-page .pd-hero__copy .pd-lead,
.pd-page .pd-hero__copy .pd-body,
.pd-page .pd-split > .pd-stack > .pd-lead,
.pd-page .pd-split > .pd-stack > .pd-body,
.pd-page .pd-strip > .pd-body,
.pd-page .pd-faq__a { max-width: 75ch; }

.pd-page .pd-muted { color: var(--pd-muted); }
.pd-page .pd-dense { color: var(--pd-body); }
.pd-page .pd-faint { color: var(--pd-faint); }
.pd-page strong { font-weight: 700; }

/* On dark backgrounds */
.pd-page .pd-on-dark    { color: rgba(255,255,255,0.9); }
.pd-page .pd-on-dark-80 { color: rgba(255,255,255,0.82); }
.pd-page .pd-on-dark-72 { color: rgba(255,255,255,0.72); }
.pd-page .pd-on-dark-66 { color: rgba(255,255,255,0.66); }
.pd-page .pd-white      { color: var(--pd-white); }
.pd-page .pd-link-mint  { color: var(--pd-mint); border-bottom: 1px solid rgba(95,192,166,0.5); padding-bottom: 2px; }
.pd-page .pd-link-mint:hover { color: var(--pd-white); border-bottom-color: var(--pd-white); }
.pd-page .pd-link-white { color: var(--pd-white); border-bottom: 1px solid rgba(255,255,255,0.5); }
.pd-page .pd-link-under { color: var(--pd-green); border-bottom: 1px solid var(--pd-green); padding-bottom: 2px; font-weight: 500; }

/* 26×2 accent rule that heads each card */
.pd-rule { width: 26px; height: 2px; background: var(--pd-green); flex-shrink: 0; }
.pd-rule.is-mint  { background: var(--pd-mint); }
.pd-rule.is-white { background: rgba(255,255,255,0.6); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.pd-page .pd-btn {
  display: inline-block;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  padding: 17px 28px;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  opacity: 1 !important;
  filter: none !important;
}
.pd-page .pd-btn.is-sm  { font-size: 15px; padding: 12px 24px; }
.pd-page .pd-btn.is-lg  { font-size: 17px; font-weight: 700; padding: 20px 32px; }
.pd-page .pd-btn.is-block { display: block; width: 100%; }

.pd-page .pd-btn-green  { background: var(--pd-green); color: var(--pd-white); }
.pd-page .pd-btn-green:hover { background: var(--pd-green-dark); color: var(--pd-white); }
.pd-page .pd-btn-white  { background: var(--pd-white); color: var(--pd-green); }
.pd-page .pd-btn-white:hover { background: #F0F0ED; color: var(--pd-green); }
.pd-page .pd-btn-ink    { background: var(--pd-white); color: var(--pd-ink); }
.pd-page .pd-btn-ink:hover { background: #F0F0ED; color: var(--pd-ink); }
.pd-page .pd-btn-ghost  { border-color: rgba(255,255,255,0.35); color: var(--pd-white); font-weight: 400; }
.pd-page .pd-btn-ghost:hover { background: rgba(255,255,255,0.1); color: var(--pd-white); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.pd-hero {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 76px 68px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  background-color: var(--pd-green);
  background-image:
    linear-gradient(100deg, rgba(1,80,62,0.96) 0%, rgba(1,100,77,0.92) 55%, rgba(1,100,77,0.74) 100%),
    var(--pd-hero-img, none);
  background-size: cover, cover;
  background-position: center, 62% 38%;
  background-repeat: no-repeat, no-repeat;
}
.pd-hero > * { position: relative; }

.pd-bubble {
  position: absolute;
  border-radius: 999px;
  will-change: transform;
  pointer-events: none;
}
.pd-bubble.a { right: -140px; top: -140px; width: 520px; height: 520px; background: rgba(255,255,255,0.10); animation: pdDriftA 17s ease-in-out infinite; }
.pd-bubble.b { right: 60px; bottom: -220px; width: 380px; height: 380px; background: rgba(255,255,255,0.09); animation: pdDriftB 21s ease-in-out infinite; }
.pd-bubble.c { right: 390px; top: 120px; width: 150px; height: 150px; background: rgba(255,255,255,0.07); animation: pdDriftC 13s ease-in-out infinite; }

@keyframes pdDriftA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-34px,26px,0) scale(1.06); } }
@keyframes pdDriftB { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(28px,-32px,0) scale(0.94); } }
@keyframes pdDriftC { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-18px,-22px,0); } }

.pd-hero__badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-badge {
  background: rgba(255,255,255,0.14);
  color: var(--pd-white);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px;
}
.pd-rating { font-size: 14px; color: rgba(255,255,255,0.82); display: flex; align-items: center; gap: 8px; }
.pd-stars { letter-spacing: 0.14em; }

.pd-hero__cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: end; }
.pd-hero__copy { display: flex; flex-direction: column; gap: 16px; }
.pd-hero__ctas { display: flex; flex-direction: column; gap: 12px; }

/* Accreditation / integration pills along the foot of the hero
   (NICEIC, Gas Safe, Dentally, RCVS …) */
.pd-hero__creds {
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pd-cred {
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--pd-white);
}

/* --------------------------------------------------------------------------
   5. Stats + strips
   -------------------------------------------------------------------------- */
.pd-stat {
  background: var(--pd-surface);
  border-radius: 20px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.pd-stat__fig { font-weight: 700; font-size: 38px; letter-spacing: -0.04em; line-height: 1; color: var(--pd-ink); }
.pd-stat__lbl { font-size: 14px; color: var(--pd-muted); }

.pd-strip {
  border: 1px solid var(--pd-border);
  border-radius: 20px;
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.pd-strip.is-dark {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  padding: 32px 0 0;
  gap: 40px;
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.pd-card {
  border: 1px solid var(--pd-border);
  border-radius: 24px;
  padding: 38px 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.pd-card.is-green { background: var(--pd-green); border-color: var(--pd-green); color: var(--pd-white); }
.pd-card.is-ink   { background: var(--pd-ink);   border-color: var(--pd-ink);   color: var(--pd-white); gap: 18px; justify-content: space-between; }
.pd-card.is-ink .pd-h3 { font-size: 32px; font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; }

.pd-tile {
  background: var(--pd-surface);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.pd-tile__tick {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--pd-green); color: var(--pd-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.pd-tile__txt { font-size: 17px; line-height: 1.45; color: var(--pd-ink); font-weight: 400; }

/* Hairline grid — 1px gaps over a tinted parent */
.pd-hair {
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,0.16);
  border-radius: 20px;
  overflow: hidden;
}
.pd-hair.is-3 { grid-template-columns: repeat(3, 1fr); }
.pd-hair.is-1 { grid-template-columns: 1fr; }
.pd-hair__cell { background: var(--pd-ink); padding: 38px 34px; display: flex; flex-direction: column; gap: 14px; }
.pd-hair__cell.is-row { background: var(--pd-ink-90); padding: 26px 28px; flex-direction: row; gap: 16px; align-items: flex-start; }

/* --------------------------------------------------------------------------
   7. Check lists
   -------------------------------------------------------------------------- */
.pd-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; color: var(--pd-body); }
.pd-checks.is-sm { gap: 10px; font-size: 15px; line-height: 1.55; }
.pd-checks.is-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.pd-checks li { display: flex; gap: 12px; margin: 0; }
.pd-checks.is-sm li, .pd-checks.is-2col li { gap: 10px; }
.pd-checks li::before {
  content: "\2713";
  color: var(--pd-green);
  font-weight: 700;
  flex-shrink: 0;
}
.pd-checks.is-mint li::before { color: var(--pd-mint); }

.pd-builtlist { list-style: none; margin: 0; padding: 0; }
.pd-builtlist li { margin: 0; }
.pd-built__tick {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(95,192,166,0.18); color: var(--pd-mint);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 2px;
}
.pd-built__txt { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.9); }

/* --------------------------------------------------------------------------
   8. Pricing
   -------------------------------------------------------------------------- */
.pd-panel {
  border-radius: 32px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.pd-panel.is-surface { background: var(--pd-surface); }
.pd-panel.is-ink     { background: var(--pd-ink); color: var(--pd-white); }

/* Panel that stacks rather than splitting into two columns */
.pd-panel.is-stack { display: flex; flex-direction: column; gap: 40px; }

/* Tiered pricing cards (Starter / Professional / Ecommerce) */
.pd-tier {
  background: var(--pd-white);
  border-radius: 24px;
  padding: 36px 34px;
  display: flex; flex-direction: column; gap: 16px;
}
.pd-tier.is-green { background: var(--pd-green); color: var(--pd-white); }
.pd-tier.is-outline { background: transparent; border: 1px solid var(--pd-border); }
.pd-tier__label { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pd-green); }
.pd-tier.is-green .pd-tier__label { color: var(--pd-mint); }
.pd-tier__price { font-weight: 700; font-size: 44px; letter-spacing: -0.04em; line-height: 1; color: var(--pd-ink); }
.pd-tier.is-green .pd-tier__price { color: var(--pd-white); }
.pd-checks.is-white li::before { color: var(--pd-white); }

/* Full-width CTA bar sitting inside a panel */
.pd-ctabar {
  border-radius: 24px;
  padding: 32px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.pd-ctabar.is-green { background: var(--pd-green); color: var(--pd-white); }
.pd-ctabar.is-ink   { background: var(--pd-ink);   color: var(--pd-white); }

.pd-price-card {
  background: var(--pd-white);
  border-radius: 24px;
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 24px;
  align-self: start;
}
.pd-price-fig { font-weight: 700; font-size: 56px; letter-spacing: -0.045em; line-height: 1; color: var(--pd-ink); }
.pd-price-sub { font-size: 14px; color: var(--pd-green); font-weight: 500; }
.pd-hr { height: 1px; background: var(--pd-border-lt); border: 0; margin: 0; }
.pd-label { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pd-faint); font-weight: 500; }
.pd-note { border-top: 1px solid #E0E0DB; padding-top: 20px; font-size: 15px; line-height: 1.6; color: var(--pd-muted); }
.pd-page .pd-btn.is-start { align-self: flex-start; }

/* --------------------------------------------------------------------------
   9. Portfolio
   -------------------------------------------------------------------------- */
.pd-page .pd-work {
  display: flex; flex-direction: column;
  border: 1px solid var(--pd-border);
  border-radius: 24px;
  overflow: hidden;
  color: var(--pd-ink);
}
.pd-page .pd-work:hover { color: var(--pd-ink); border-color: var(--pd-green); }
.pd-work__img {
  height: 340px; background: var(--pd-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--pd-placeholder); text-align: center; padding: 20px;
  /* The portfolio shots are device mockups with their own margin, so they
     are contained rather than cropped. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* Wide variant: image left, copy right, for a single featured project */
.pd-page .pd-work.is-wide { display: grid; grid-template-columns: 1fr 1fr; }
.pd-work.is-wide .pd-work__img { height: 100%; min-height: 280px; }
.pd-work.is-wide .pd-work__body { justify-content: center; padding: 32px 34px; }

.pd-work__body { padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; }
.pd-tag { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pd-green); }
.pd-page .pd-work .pd-h3 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.15; }

/* --------------------------------------------------------------------------
   10. Case study
   -------------------------------------------------------------------------- */
.pd-quote { border-left: 2px solid var(--pd-mint); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pd-quote.is-faint { border-left-color: rgba(255,255,255,0.3); }
.pd-quote__lbl { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pd-mint); }
.pd-quote.is-faint .pd-quote__lbl { color: rgba(255,255,255,0.6); }

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */
.pd-step { display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--pd-green); padding-top: 24px; }
.pd-step__marker { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; color: var(--pd-green); }
.pd-step__marker::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--pd-green); display: block; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   12. FAQs
   -------------------------------------------------------------------------- */
.pd-faqs { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 64px; align-items: start; }
.pd-faqs__intro { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 110px; }
.pd-faqs__list { display: flex; flex-direction: column; }

.pd-faq { border-top: 1px solid var(--pd-border); padding: 24px 0; }
.pd-faq:last-child { border-bottom: 1px solid var(--pd-border); }
.pd-faq > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; }
.pd-faq > summary::-webkit-details-marker { display: none; }
.pd-faq > summary:focus-visible { outline: 2px solid var(--pd-green); outline-offset: 4px; }
.pd-faq__plus { flex-shrink: 0; font-size: 22px; color: var(--pd-green); line-height: 1; transition: transform 0.2s ease; }
.pd-faq[open] .pd-faq__plus { transform: rotate(45deg); }
.pd-faq__a { margin: 14px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--pd-muted); }

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.pd-contact { border-radius: 32px; overflow: hidden; background: var(--pd-green); }
.pd-contact__photo {
  height: 300px;
  background-image:
    linear-gradient(180deg, rgba(1,60,47,0.42) 0%, rgba(1,70,54,0.12) 34%, rgba(1,80,62,0.55) 78%, #01644D 100%),
    var(--pd-contact-img, none);
  background-size: cover, cover;
  background-position: center, 50% 46%;
  background-repeat: no-repeat, no-repeat;
}
.pd-contact__grid {
  padding: 48px 60px 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: -60px;
  position: relative;
}
.pd-contact__meta { border-top: 1px solid rgba(255,255,255,0.22); padding-top: 24px; display: flex; gap: 44px; flex-wrap: wrap; }
.pd-meta { display: flex; flex-direction: column; gap: 6px; }
.pd-meta__lbl { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.pd-page .pd-meta__val { font-size: 18px; color: var(--pd-white); font-weight: 500; }
.pd-page .pd-meta__val:hover { color: rgba(255,255,255,0.8); }

.pd-form-card {
  background: var(--pd-white);
  border-radius: 24px;
  padding: 40px;
  display: flex; flex-direction: column; gap: 18px;
  align-self: start;
}
.pd-form-card__title { font-weight: 700; font-size: 26px; letter-spacing: -0.03em; color: var(--pd-ink); }

/* Contact Form 7, restyled to the design. Salient styles inputs hard,
   hence the !important on the visual properties. */
.pd-form-card .wpcf7 { margin: 0; }
.pd-form-card .wpcf7-form > p { margin: 0 0 14px; }
/* CF7 applies its own wpautop, so each .form-row arrives as ONE <p> holding
   both fields separated by a <br> — and Salient renders that <p> as flex.
   So the row itself must not be a grid, or both fields get squeezed into its
   first column. Let the flex do the columns and make the fields grow. */
.pd-form-card .form-row { display: block; margin: 0; }
.pd-form-card .form-row > p { display: flex; gap: 14px; margin: 0 0 14px; }
.pd-form-card .form-row > p > br { display: none; }
.pd-form-card .form-row .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; }
.pd-form-card .wpcf7-form-control-wrap { display: block; width: 100%; }

.pd-page .pd-form-card input[type="text"],
.pd-page .pd-form-card input[type="tel"],
.pd-page .pd-form-card input[type="email"],
.pd-page .pd-form-card select,
.pd-page .pd-form-card textarea {
  width: 100% !important;
  border: 1px solid var(--pd-field) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--pd-body) !important;
  background: var(--pd-white) !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 48px;
}
.pd-page .pd-form-card textarea { min-height: 96px; resize: vertical; }
.pd-page .pd-form-card input::placeholder,
.pd-page .pd-form-card textarea::placeholder { color: var(--pd-placeholder) !important; opacity: 1; }
.pd-page .pd-form-card input:focus,
.pd-page .pd-form-card select:focus,
.pd-page .pd-form-card textarea:focus {
  border-color: var(--pd-green) !important;
  outline: 2px solid rgba(1,100,77,0.25);
  outline-offset: 1px;
}
.pd-page .pd-form-card input[type="submit"] {
  width: 100% !important;
  background: var(--pd-green) !important;
  color: var(--pd-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 19px 30px !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  min-height: 48px;
  transition: background-color .15s ease;
}
.pd-page .pd-form-card input[type="submit"]:hover { background: var(--pd-green-dark) !important; }
.pd-form-card .wpcf7-not-valid-tip { font-size: 13px; color: #B3261E; margin-top: 6px; }
.pd-form-card .wpcf7-response-output { margin: 12px 0 0 !important; padding: 12px 14px !important; border-radius: 12px; font-size: 14px; }

/* Embedded map (contact page) */
.pd-map { border-radius: 24px; overflow: hidden; line-height: 0; background: var(--pd-surface); }
.pd-map iframe { display: block; width: 100%; border: 0; }

/* --------------------------------------------------------------------------
   14. Sector pills
   -------------------------------------------------------------------------- */
.pd-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-page .pd-pill {
  border: 1px solid var(--pd-border);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 15px;
  color: var(--pd-body);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.pd-page .pd-pill:hover { border-color: var(--pd-green); color: var(--pd-green); }
.pd-page .pd-pill.is-active {
  border-color: var(--pd-green);
  background: var(--pd-green);
  color: var(--pd-white);
  font-weight: 500;
}
.pd-page .pd-pill.is-active:hover { background: var(--pd-green-dark); border-color: var(--pd-green-dark); color: var(--pd-white); }

/* Brand marks inside the "ask an AI about me" pills. Inline SVG rather than
   remote logo files so the pills carry no third-party requests. currentColor
   so they invert correctly on .is-active. */
.pd-pill__logo { width: 17px; height: 17px; flex-shrink: 0; margin-right: 8px; }
.pd-pill__logo svg { width: 100%; height: 100%; display: block; fill: currentColor; }

.pd-sectors__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* --pd-pad stays 20px at every width so sections keep tracking the nav. */
  .pd-page { --pd-rhythm: 72px; }
  .pd-split,
  .pd-panel,
  .pd-contact__grid,
  .pd-hero__cols { grid-template-columns: 1fr; gap: 36px; }
  .pd-faqs { grid-template-columns: 1fr; gap: 36px; }
  .pd-faqs__intro { position: static; }
  .pd-grid-3, .pd-hair.is-3 { grid-template-columns: repeat(2, 1fr); }
  .pd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pd-page .pd-h1 { font-size: 56px; max-width: none; }
  .pd-page .pd-h2,
  .pd-page .pd-h2.is-panel,
  .pd-page .pd-h2.is-case,
  .pd-page .pd-h2.is-lg { font-size: 38px; }
  .pd-hero { padding: 56px 40px; }
  .pd-panel { padding: 44px 36px; }
  .pd-bubble.c { display: none; }
  .pd-sectors__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 760px) {
  .pd-page { --pd-pad: 20px; --pd-rhythm: 56px; }
  .pd-grid-2, .pd-grid-3, .pd-grid-4,
  .pd-hair.is-3, .pd-checks.is-2col { grid-template-columns: 1fr; }
  .pd-hero { padding: 40px 24px; border-radius: 20px; gap: 28px; }
  .pd-page .pd-h1 { font-size: 40px; }
  .pd-page .pd-h2,
  .pd-page .pd-h2.is-panel,
  .pd-page .pd-h2.is-case,
  .pd-page .pd-h2.is-lg,
  .pd-page .pd-h2.is-sm { font-size: 30px; }
  .pd-page .pd-h3, .pd-page .pd-h3.is-lg { font-size: 21px; }
  .pd-page .pd-card.is-ink .pd-h3 { font-size: 24px; }
  .pd-lead, .pd-lead.is-sm { font-size: 17px; }
  .pd-panel, .pd-contact { border-radius: 20px; }
  .pd-panel { padding: 32px 24px; gap: 28px; }
  .pd-card, .pd-tile, .pd-hair__cell { padding: 26px 22px; }
  .pd-price-card { padding: 30px 24px; }
  .pd-price-fig { font-size: 42px; }
  .pd-form-card { padding: 26px 22px; }
  .pd-form-card .form-row > p { flex-direction: column; }
  .pd-contact__photo { height: 200px; }
  .pd-contact__grid { margin-top: 0; padding: 32px 24px 40px; }
  .pd-contact__meta { gap: 24px; }
  .pd-strip, .pd-ctabar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pd-ctabar { padding: 24px 22px; }
  .pd-tier { padding: 28px 24px; }
  .pd-tier__price { font-size: 36px; }
  .pd-work__img { height: 220px; }
  .pd-page .pd-work.is-wide { grid-template-columns: 1fr; }
  .pd-work.is-wide .pd-work__img { min-height: 200px; height: 200px; }
  .pd-bubble { display: none; }
  .pd-page .pd-btn.is-lg { font-size: 16px; padding: 17px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-page *, .pd-page *::before, .pd-page *::after {
    animation: none !important;
    transition: none !important;
  }
}