/* Shared visual foundation, measured from the approved homepage.
   Loaded last on every page. Layout and alignment belong to individual pages;
   brand colors, heading roles and label treatment belong here. */
:root {
  --ypn-navy: #001f3d;
  --ypn-orange: #e87a00;
  --ypn-font-display: Besley, Georgia, serif;
  --ypn-font-body: "Muoto VAR", MuotoWeb, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ypn-label-size: 12px;
  --ypn-label-weight: 600;
  --ypn-label-leading: 1.2;
  --ypn-label-tracking: 1.2px;
  --ypn-label-gap: 16px;
  --ypn-title-size: 42px;
  --ypn-title-leading: 1.2;
  --ypn-title-tracking: -2px;
  --ypn-subtitle-size: 28px;
  --ypn-card-title-size: 25px;
  --ypn-subtitle-leading: 1.3;
  --ypn-subtitle-tracking: -.78px;
}
#main-content.sv3 {
  --navy: var(--ypn-navy);
  --orange: var(--ypn-orange);
  --amber: var(--ypn-orange);
  --serif: var(--ypn-font-display);
  --sans: var(--ypn-font-body);
}
/* Labels are a visual role, independent of whether the HTML uses p, h2 or h3. */
#main-content#main-content :is(.ypn-reference-eyebrow,.ypn-section-eyebrow,.sv3-eyebrow,.ypn-contact-kicker),
.subfooter .ypn-reference-eyebrow {
  font-family: var(--ypn-font-body) !important;
  font-size: var(--ypn-label-size) !important;
  font-weight: var(--ypn-label-weight) !important;
  line-height: var(--ypn-label-leading) !important;
  letter-spacing: var(--ypn-label-tracking) !important;
  color: var(--ypn-orange) !important;
  text-transform: uppercase;
  margin: 0 0 var(--ypn-label-gap) !important;
}
#main-content .sv3-eyebrow::before,
#main-content .sv3-eyebrow::after { content: none; display: none; }
#main-content .sv3-kicker-rule { display: none; }
/* Section titles share the homepage's exact scale, weight and tracking.
   Keep existing white text on navy and page-specific alignment/line lengths. */
#main-content#main-content :is(.ss-tabs-heading h2,h2.section-heading,.ypn-section-intro h2,.ypn-more-features-head h2,.ypn-faq-heading h2,.sv3-h2,.sv3-cta-h,.tf3-h,.ct3-office-h) {
  font-family: var(--ypn-font-display) !important;
  font-size: var(--ypn-title-size) !important;
  font-weight: 400 !important;
  line-height: var(--ypn-title-leading) !important;
  letter-spacing: var(--ypn-title-tracking) !important;
}
#main-content .ss-panel-subheading {
  font-size: var(--ypn-subtitle-size) !important;
  line-height: var(--ypn-subtitle-leading) !important;
  letter-spacing: var(--ypn-subtitle-tracking) !important;
}
#main-content#main-content.sv3 :is(.sv3-step h3,.sv3-doc h3,.sv3-tile h3,.sv3-index-t,.sv3-services-t,.ab3-why h3,.ab3-how h3,.ct3-steps h3,.si3-card h3,.bl3-guide h3,.pl3-vs-col h3) {
  font-family: var(--ypn-font-display) !important;
  font-size: var(--ypn-card-title-size) !important;
  font-weight: 400 !important;
  line-height: var(--ypn-subtitle-leading) !important;
  letter-spacing: var(--ypn-subtitle-tracking) !important;
}
@media (max-width:640px) {
  :root {
    --ypn-title-size: 32px;
    --ypn-title-tracking: -1.2px;
    --ypn-subtitle-size: 25px;
    --ypn-card-title-size: 22px;
  }
}
/* Emphasized words use the same brand accent as their section labels. */
#main-content.sv3 :is(.sv3-h2,.sv3-display,.ab3-display,.tf3-h) em {
  color: var(--ypn-orange);
}

/* Contained heroes need page-colored breathing room before the next surface. */
:root { --ypn-hero-section-gap: 48px; }
#main-content.sv3 > .sv3-ticker,
#main-content.sv3 > :is(.sv3-hero,.ab3-hero,.au3-hero):not(:has(+ .sv3-ticker)) {
  margin-bottom: var(--ypn-hero-section-gap);
}
@media (max-width:640px) {
  :root { --ypn-hero-section-gap: 32px; }
}

/* Balance the attached strip with the first section's content spacing. */
#main-content.sv3 > .sv3-ticker .sv3-ticker-track > span {
  padding-block: 10px;
}
#main-content.sv3 > .sv3-ticker + .sv3-section,
#main-content.sv3 > :is(.sv3-hero,.ab3-hero,.au3-hero) + .sv3-section {
  padding-top: 56px;
}
@media (max-width:640px) {
  #main-content.sv3 > .sv3-ticker .sv3-ticker-track > span { padding-block: 8px; }
  #main-content.sv3 > .sv3-ticker + .sv3-section,
  #main-content.sv3 > :is(.sv3-hero,.ab3-hero,.au3-hero) + .sv3-section {
    padding-top: 40px;
  }
}

/* The approved cream surround joins contained heroes to their first section. */
body:has(#main-content > :is(.sv3-hero,.ab3-hero,.au3-hero)),
body:has(#main-content > :is(.sv3-hero,.ab3-hero,.au3-hero)) > .body-wrapper {
  background: #f5efe4;
}
#main-content.sv3:has(> :is(.sv3-hero,.ab3-hero,.au3-hero)) {
  background: var(--cream);
}

/* Service detail pages reuse the homepage's navy/orange line icons. */
#main-content.sv3 .sv3-index:has(.sv3-cover-icon) > li { align-items:start; }
#main-content.sv3 .sv3-cover-icon {
  width:32px;height:32px;object-fit:contain;margin-top:1px;
}
#main-content.sv3 .sv3-services a:has(.sv3-service-icon) {
  grid-template-columns:36px minmax(0,1fr) 40px;gap:20px;
}
#main-content.sv3 .sv3-service-icon { width:32px;height:32px;object-fit:contain; }
#main-content.sv3 .sv3-services a:hover .sv3-service-icon { filter:brightness(0) invert(1); }
@media(max-width:640px) {
  #main-content.sv3 .sv3-index:has(.sv3-cover-icon) > li { grid-template-columns:28px minmax(0,1fr);gap:14px; }
  #main-content.sv3 .sv3-cover-icon,
  #main-content.sv3 .sv3-service-icon { width:28px;height:28px; }
  #main-content.sv3 .sv3-services a:has(.sv3-service-icon) { grid-template-columns:28px minmax(0,1fr) 28px;gap:12px; }
}