/* ==========================================================================
   Your Parents Keeper — enhancements.css
   Added 2026-08-29. Loads AFTER css/styles.css.
   Everything here is additive and namespaced so it cannot break existing rules.
   Components: trust bar, sticky mobile CTA, FAQ accordion, response-time
   badge, service-area block, hero CTA row on interior pages.
   ========================================================================== */

:root{
  --ypk-navy:#12304d;
  --ypk-ink:#1d1d1b;
  --ypk-line:rgba(18,48,77,.14);
  --ypk-soft:#f4f1ea;
  --ypk-accent:#b4633f;
}

/* --------------------------------------------------------------------------
   01 TRUST BAR — slim proof strip directly under the hero
   -------------------------------------------------------------------------- */
.ypk-trustbar{
  background:var(--ypk-soft);
  border-top:1px solid var(--ypk-line);
  border-bottom:1px solid var(--ypk-line);
  padding:22px 0;
}
.ypk-trustbar .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:18px 32px;
  align-items:center;
  justify-content:space-between;
}
.ypk-trustbar ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:14px 30px;
  width:100%;
}
.ypk-trustbar li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14px;
  line-height:1.45;
  color:var(--ypk-navy);
  flex:1 1 200px;
  min-width:180px;
  margin:0;
}
.ypk-trustbar li strong{
  display:block;
  font-weight:700;
  letter-spacing:.01em;
}
.ypk-trustbar li span{
  display:block;
  opacity:.78;
  font-size:13px;
}
.ypk-trustbar .ypk-tick{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:3px;
  color:var(--ypk-accent);
}
.ypk-trustbar--navy{
  background:var(--ypk-navy);
  border-color:rgba(255,255,255,.16);
}
.ypk-trustbar--navy li{color:#fff}
.ypk-trustbar--navy .ypk-tick{color:#e0a980}

@media (max-width:640px){
  .ypk-trustbar{padding:18px 0}
  .ypk-trustbar ul{gap:12px}
  .ypk-trustbar li{flex:1 1 100%}
}

/* --------------------------------------------------------------------------
   02 STICKY MOBILE CTA — mobile and small-tablet only
   -------------------------------------------------------------------------- */
.ypk-sticky-cta{display:none}

@media (max-width:820px){
  .ypk-sticky-cta{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border-top:1px solid var(--ypk-line);
    box-shadow:0 -6px 24px rgba(18,48,77,.10);
  }
  .ypk-sticky-cta a{
    flex:1 1 0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:48px;
    padding:12px 10px;
    border-radius:6px;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    line-height:1.15;
    text-decoration:none;
  }
  .ypk-sticky-cta .ypk-sticky-primary{
    background:var(--ypk-navy);
    color:#fff;
    border:1px solid var(--ypk-navy);
  }
  .ypk-sticky-cta .ypk-sticky-secondary{
    background:#fff;
    color:var(--ypk-navy);
    border:1px solid var(--ypk-navy);
  }
  /* keep the footer clear of the bar */
  body{padding-bottom:74px}
}

/* --------------------------------------------------------------------------
   03 FAQ ACCORDION — native details/summary, no JS required
   -------------------------------------------------------------------------- */
.ypk-faq{
  margin-top:26px;
  border-top:1px solid var(--ypk-line);
}
.ypk-faq details{
  border-bottom:1px solid var(--ypk-line);
  padding:0;
}
.ypk-faq summary{
  cursor:pointer;
  list-style:none;
  padding:20px 44px 20px 0;
  position:relative;
  font-family:inherit;
  font-weight:700;
  font-size:18px;
  line-height:1.35;
  color:var(--ypk-navy);
}
.ypk-faq summary::-webkit-details-marker{display:none}
.ypk-faq summary::after{
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:10px;
  height:10px;
  margin-top:-7px;
  border-right:2px solid var(--ypk-accent);
  border-bottom:2px solid var(--ypk-accent);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.ypk-faq details[open] summary::after{
  transform:rotate(-135deg);
  margin-top:-3px;
}
.ypk-faq summary:focus-visible{
  outline:2px solid var(--ypk-accent);
  outline-offset:3px;
}
.ypk-faq .ypk-faq-a{
  padding:0 8px 22px 0;
  max-width:64ch;
}
.ypk-faq .ypk-faq-a p{margin:0 0 14px}
.ypk-faq .ypk-faq-a p:last-child{margin-bottom:0}

.section--navy .ypk-faq,
.section--navy .ypk-faq details{border-color:rgba(255,255,255,.2)}
.section--navy .ypk-faq summary{color:#fff}

/* --------------------------------------------------------------------------
   04 RESPONSE TIME BADGE
   -------------------------------------------------------------------------- */
.ypk-response{
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  padding:12px 16px;
  background:var(--ypk-soft);
  border-left:3px solid var(--ypk-accent);
  border-radius:0 4px 4px 0;
  font-size:14.5px;
  line-height:1.5;
  max-width:60ch;
}
.ypk-response svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--ypk-accent)}
.ypk-response strong{display:block}
.section--navy .ypk-response{
  background:rgba(255,255,255,.09);
  color:#fff;
  border-left-color:#e0a980;
}
.section--navy .ypk-response svg{color:#e0a980}

.ypk-response-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:560px){ .ypk-response-list{grid-template-columns:1fr} }
.ypk-response-list li{
  margin:0;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--ypk-line);
  border-radius:5px;
  font-size:15px;
  line-height:1.5;
}
.ypk-response-list li strong{
  display:block;
  color:var(--ypk-navy);
  margin-bottom:4px;
}
.ypk-response-list li span{
  display:block;
  font-weight:700;
  color:var(--ypk-accent);
  font-size:14px;
  margin-top:6px;
}

/* --------------------------------------------------------------------------
   05 SERVICE AREA BLOCK (in place of a street-address map)
   -------------------------------------------------------------------------- */
.ypk-servicearea{
  display:grid;
  gap:26px;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  margin-top:26px;
  padding:26px;
  background:var(--ypk-soft);
  border:1px solid var(--ypk-line);
  border-radius:6px;
}
.ypk-servicearea h3{margin-top:0}
.ypk-servicearea p{margin:0 0 12px}
.ypk-servicearea p:last-child{margin-bottom:0}
.ypk-servicearea-map{
  width:100%;
  border:0;
  border-radius:5px;
  min-height:240px;
  background:#dfe6ea;
}
.ypk-servicearea .ypk-directions{
  display:inline-block;
  margin-top:6px;
  font-weight:700;
}
@media (max-width:820px){
  .ypk-servicearea{grid-template-columns:1fr;padding:20px}
  .ypk-servicearea-map{min-height:200px}
}

/* --------------------------------------------------------------------------
   06 INTERIOR-PAGE HERO CTA ROW (above the fold on every page)
   -------------------------------------------------------------------------- */
.page-hero .ypk-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.page-hero .ypk-hero-cta .btn{margin:0}
.ypk-hero-note{
  margin-top:14px;
  font-size:14px;
  opacity:.8;
}

/* --------------------------------------------------------------------------
   07 THANK YOU PAGE
   -------------------------------------------------------------------------- */
.ypk-thanks{max-width:62ch;margin:0 auto;text-align:center}
.ypk-thanks .ypk-check{
  width:58px;height:58px;margin:0 auto 20px;display:block;color:var(--ypk-accent);
}
.ypk-next{
  list-style:none;
  margin:30px 0 0;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  text-align:left;
}
.ypk-next li{
  margin:0;
  padding:20px;
  border:1px solid var(--ypk-line);
  border-radius:6px;
  background:#fff;
}
.ypk-next li h3{margin:0 0 8px;font-size:18px}
.ypk-next li p{margin:0 0 12px;font-size:15px}

/* --------------------------------------------------------------------------
   08 LEGAL PAGE TYPE SCALE (privacy / terms readability)
   -------------------------------------------------------------------------- */
.ypk-legal{max-width:70ch}
.ypk-legal h2{margin-top:38px}
.ypk-legal h3{margin-top:26px;font-size:19px}
.ypk-legal ul{margin:14px 0 14px 22px}
.ypk-legal li{margin-bottom:8px}
.ypk-legal .ypk-updated{
  font-size:14px;
  opacity:.75;
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   09 FOUNDER BYLINE — small round portrait, replaces the large founder image
   -------------------------------------------------------------------------- */
.ypk-byline{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--ypk-line);
}
.ypk-byline img{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 22%;
  background:var(--ypk-soft);
  display:block;
}
.ypk-byline-name{
  font-weight:700;
  line-height:1.25;
  color:var(--ypk-navy);
  margin:0;
}
.ypk-byline-role{
  margin:2px 0 0;
  font-size:14px;
  opacity:.75;
  line-height:1.3;
}
.section--navy .ypk-byline{border-top-color:rgba(255,255,255,.2)}
.section--navy .ypk-byline-name{color:#fff}

/* larger variant for the About page lede */
.ypk-byline--lg img{width:88px;height:88px}
.ypk-byline--lg .ypk-byline-name{font-size:19px}

/* neutralise the old oversized founder portrait wherever it remains */
.founder-img{
  max-width:180px;
  height:auto;
  border-radius:50%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 22%;
}

/* --------------------------------------------------------------------------
   10 PRICING GRID — four tiers
   -------------------------------------------------------------------------- */
.ypk-pricing{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:30px;
  align-items:stretch;
}
@media (max-width:1080px){ .ypk-pricing{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .ypk-pricing{grid-template-columns:1fr} }

.ypk-tier{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 24px 24px;
  background:#fff;
  border:1px solid var(--ypk-line);
  border-radius:8px;
}
.ypk-tier--featured{
  background:var(--ypk-soft);
  border-color:var(--ypk-navy);
  box-shadow:0 10px 30px rgba(18,48,77,.10);
}
.ypk-tier-flag{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:var(--ypk-navy);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
}
.ypk-tier--featured .ypk-tier-flag{background:var(--ypk-accent)}
.ypk-tier h3{
  margin:0 0 4px;
  font-size:19px;
  line-height:1.25;
  color:var(--ypk-navy);
  min-height:2.5em; /* keeps prices and buttons on one line across the row */
}
@media (max-width:620px){ .ypk-tier h3{min-height:0} }
.ypk-tier-for{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.4;
  opacity:.75;
  min-height:4.3em; /* 3 lines, so prices align across the row */
}
@media (max-width:620px){ .ypk-tier-for{min-height:0} }
.ypk-tier-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 4px;
}
.ypk-tier-price b{
  font-family:inherit;
  font-size:38px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ypk-navy);
}
.ypk-tier-price span{font-size:14px;opacity:.7}
.ypk-tier-was{
  margin:0 0 14px;
  font-size:13.5px;
  min-height:1.4em;
}
.ypk-tier-was s{opacity:.55}
.ypk-tier-was em{
  font-style:normal;
  font-weight:700;
  color:var(--ypk-accent);
}
.ypk-tier ul{
  list-style:none;
  margin:0 0 22px;
  padding:16px 0 0;
  border-top:1px solid var(--ypk-line);
  flex:1 1 auto;
}
.ypk-tier li{
  position:relative;
  margin:0 0 11px;
  padding-left:24px;
  font-size:14.5px;
  line-height:1.45;
}
.ypk-tier li::before{
  content:"";
  position:absolute;
  left:2px;
  top:5px;
  width:11px;
  height:6px;
  border-left:2px solid var(--ypk-accent);
  border-bottom:2px solid var(--ypk-accent);
  transform:rotate(-45deg);
}
.ypk-tier .btn{width:100%;text-align:center;margin:0}
.ypk-tier-note{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.45;
  opacity:.7;
  text-align:center;
  min-height:4.5em; /* holds 3 lines, so the buttons sit on one line */
}
@media (max-width:620px){ .ypk-tier-note{min-height:0} }
.ypk-pricing-foot{
  margin-top:24px;
  font-size:14.5px;
  line-height:1.6;
  max-width:74ch;
}

/* --------------------------------------------------------------------------
   11 SOCIAL ICON ROW — footer
   -------------------------------------------------------------------------- */
.ypk-social{margin-top:22px}
.ypk-social-label{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.72;
}
.site-footer .ypk-social ul,
.ypk-social ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.site-footer .ypk-social li,
.ypk-social li{margin:0;padding:0;width:auto}
.site-footer .ypk-social a,
.ypk-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.ypk-social a:hover,
.ypk-social a:focus-visible{
  background:#fff;
  border-color:#fff;
  color:var(--ypk-navy);
  transform:translateY(-2px);
}
.ypk-social a:focus-visible{outline:2px solid #e0a980;outline-offset:3px}
.site-footer .ypk-social svg,
.ypk-social svg{width:17px;height:17px;max-width:17px;display:block;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .ypk-social a{transition:none}
  .ypk-social a:hover,.ypk-social a:focus-visible{transform:none}
}

/* --------------------------------------------------------------------------
   12 PRINT — hide the sticky bar
   -------------------------------------------------------------------------- */
@media print{
  .ypk-sticky-cta,.announce{display:none !important}
  body{padding-bottom:0 !important}
}

/* --------------------------------------------------------------------------
   10 REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ypk-faq summary::after{transition:none}
}