/* =========================================================================
   Elite Golden Care - index.html design uplift layer
   -------------------------------------------------------------------------
   Loaded LAST in the <head> of index.html (after the three inline <style>
   blocks) so it can refine the site-wide design instead of fighting it.
   Everything in here is additive and fully reversible: delete the single
   <link rel="stylesheet" href="egc-index-design.css"> line and the whole
   layer is gone.
   Sections: 1 tokens - 2 type - 3 rhythm - 4 hero - 5 trust strip -
   6 service cards - 7 feature band - 8 photo sections - 9 stats -
   10 button sizing - 11 interaction/focus - 12 small screens -
   13 how-it-works steps - 14 testimonials - 15 explore-all tile
   ========================================================================= */

/* 1. Design tokens ------------------------------------------------------- */
:root{
  --egc-gold:#b58a2b;
  --egc-gold-soft:#d8b45a;
  --egc-gold-deep:#8a6410;   /* deep gold, dark enough for white text */
  --egc-ink:#172d3b;
  --egc-body:#5c6b76;        /* AA-safe body copy on white / cream */
  --egc-meta:#5d6b74;        /* AA-safe 11-13px meta text */
  --egc-radius:22px;
  --egc-gap:clamp(30px,4.2vw,64px);
  --egc-section:clamp(64px,7.5vw,104px);
}

/* 2. Typography ----------------------------------------------------------
   Matches the families the stylesheets already declare, with real fallbacks
   so the page still looks intentional if the webfonts are blocked. */
body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Playfair Display",Georgia,"Times New Roman",serif;text-wrap:balance}
.signature,.quote-photo{font-family:Caveat,"Segoe Script","Brush Script MT",cursive}
p{color:var(--egc-body);line-height:1.72}
.section-head h2{margin-bottom:14px}
.section-head p{max-width:64ch;margin-inline:auto}

/* 3. Vertical rhythm ----------------------------------------------------- */
.section{padding:var(--egc-section) 0}
.feature-band{padding:clamp(56px,6.5vw,86px) 0}
.section-head{margin-bottom:clamp(34px,4vw,54px)}

/* 4. Hero ----------------------------------------------------------------
   Same composition, better framing: the source photo is small, so capping
   the media height keeps it from being blown up as far and object-position
   keeps faces in frame instead of the middle of the crop. */
.hero-copy{padding:clamp(52px,6.5vw,80px) clamp(24px,4vw,46px) clamp(52px,6.5vw,74px) 0}
.hero-copy p{font-size:clamp(15px,1.1vw,16.5px);max-width:clamp(320px,46ch,560px)}
.hero-actions{margin-top:clamp(22px,2.4vw,32px)}
.hero-media{height:clamp(420px,44vw,560px)}
.hero-media img{object-position:center 34%}
@media (min-width:901px) and (max-height:780px){
  .hero-inner{min-height:0}
  .hero-media{height:470px}
  .hero-copy{padding-top:46px;padding-bottom:46px}
}

/* 5. Trust strip --------------------------------------------------------- */
.trust-row{border-top:1px solid #f1ece2}
.trust{padding:32px 18px;transition:background .25s ease,box-shadow .25s ease}
.trust:hover{background:#fffdf9;box-shadow:0 12px 30px rgba(23,45,59,.06)}
.trust .icon-circle{box-shadow:0 8px 20px rgba(181,138,43,.12),inset 0 0 0 5px #fff}
.trust .trust-title{
  font-family:"DM Sans",system-ui,Arial,sans-serif;
  font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:0;
  color:var(--egc-ink);margin:0 0 4px;
}
.trust p:not(.trust-title){font-size:12.5px;line-height:1.6;color:var(--egc-meta);margin:0 auto;max-width:24ch}

/* 6. Service cards -------------------------------------------------------
   grid-auto-rows makes every row the same height so the copy no longer
   leaves ragged cards, and a gold rail + icon tint signal "this is a link". */
.service-grid{grid-auto-rows:1fr;gap:16px}
.service-card{
  align-items:center;gap:18px;padding:24px;
  background:linear-gradient(180deg,#fff,#fdfcf9);
  position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;
}
.service-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--egc-gold-soft),rgba(216,180,90,0));
  opacity:0;transition:opacity .28s ease;
}
.service-card:hover:before{opacity:1}
.service-card h3{font-size:16.5px;line-height:1.35;margin:0 0 6px}
.service-card p{font-size:12.5px;line-height:1.62;color:var(--egc-meta);margin:0}
.service-card .svc-icon{border-radius:16px;transition:background .28s ease,transform .28s ease}
.service-card:hover .svc-icon{background:#f7edd8;transform:scale(1.05)}

/* 7. Feature band ("Why choose Elite Golden Care") ----------------------- */
.feature{display:flex;flex-direction:column;gap:6px;transition:background .28s ease}
.feature:hover{background:#fffdf9}
.feature .svc-icon{margin-bottom:6px}
.feature h3{margin:0;font-size:16px}
.feature p{margin:0;font-size:12.5px;line-height:1.65;color:var(--egc-meta)}

/* 8. Photo + copy sections ----------------------------------------------
   aspect-ratio keeps the two images identical (the originals are both 4:3)
   so the two bands line up instead of drifting apart in height. */
.split{gap:var(--egc-gap)}
.split .eyebrow{margin-bottom:6px}
.split h2{margin-bottom:14px}
.split p{max-width:58ch}
.split>img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--egc-radius)}

/* 9. Editorial / stats sections ----------------------------------------- */
.orbit-head p{max-width:52ch}
.stat-strip span{color:var(--egc-meta)}
.stat-strip strong{letter-spacing:-.02em}
.orbit-card:hover{transform:translateY(-8px)}
/* keep .dark-card p{color:#c7d6dc} from the inline styles intact */
.orbit-card:not(.dark-card) p{color:var(--egc-meta)}

/* 10. Button sizing ------------------------------------------------------
   The AA-safe gold colours now live in egc-site.css (section 2) so every
   page matches; only the index-specific sizing stays here. */
.hero-actions .btn,.cta .btn{min-height:50px;padding:15px 26px;font-size:13.5px}

/* 11. Focus, skip link, motion ------------------------------------------ */
.btn:focus-visible,.service-card:focus-visible,.orbit-card:focus-visible,.trust:focus-visible{
  outline:3px solid rgba(181,138,43,.5);outline-offset:3px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99999;
  background:#122632;color:#fff;padding:12px 18px;
  border-radius:0 0 12px 0;font-size:13px;font-weight:600;
}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  .trust:hover,.service-card:hover,.orbit-card:hover,
  .service-card:hover .svc-icon{transform:none}
}

/* 12. Small screens ----------------------------------------------------- */
@media (max-width:900px){
  .hero-media{height:auto;aspect-ratio:16/11;margin-bottom:26px}
  .trust{padding:24px 14px}
  .feature{padding:18px 16px}
}
@media (max-width:680px){
  :root{--egc-section:58px}
  .hero-media{aspect-ratio:4/3;margin-bottom:18px}
  .trust:nth-child(2n){border-right:0}
  .trust p:not(.trust-title){font-size:12px;max-width:26ch}
  .service-card{padding:20px 18px}
  .feature-grid{grid-template-columns:1fr}
  .feature{border-right:0;border-bottom:1px solid #e3ddd0;padding:20px 4px}
  .feature:last-child{border-bottom:0}
  .split>img{aspect-ratio:3/2}
}

/* 13. "How it works" steps ----------------------------------------------- */
.egc-steps-section{background:linear-gradient(180deg,#fff,#faf7f0)}
.egc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.egc-step{
  background:#fff;border:1px solid #e9e5dc;border-radius:var(--egc-radius);
  padding:30px 26px 28px;box-shadow:var(--shadow-soft);position:relative;
  display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;
}
.egc-step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#dcc58d}
.egc-step-num{
  font-family:"Playfair Display",Georgia,serif;font-size:34px;line-height:1;
  color:var(--egc-gold-soft);margin-bottom:10px;
}
.egc-step h3{font-family:"DM Sans",system-ui,Arial,sans-serif;font-size:17px;margin:0 0 6px}
.egc-step p{font-size:13px;line-height:1.65;color:var(--egc-meta);margin:0}
.egc-steps-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}

/* 14. Testimonials ------------------------------------------------------- */
.egc-quotes-section{background:#fff;border-top:1px solid #f1ece2}
.egc-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.egc-quote{
  background:linear-gradient(160deg,#fbf8f1,#fff);
  border:1px solid #ebe4d4;border-radius:var(--egc-radius);
  padding:28px;margin:0;box-shadow:var(--shadow-soft);
}
.egc-quote-mark{font-family:"Playfair Display",Georgia,serif;font-size:52px;line-height:.7;color:rgba(181,138,43,.35)}
.egc-quote blockquote{margin:12px 0 18px;font-size:14px;line-height:1.75;font-style:italic;color:#3d4f5b}
.egc-quote figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid #eee7d8;padding-top:14px}
.egc-quote figcaption strong{font-size:13.5px;color:var(--egc-ink)}
.egc-quote figcaption span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--egc-meta)}
.egc-quote.is-placeholder{border-style:dashed;box-shadow:none}

/* 15. Closing "explore all services" tile -------------------------------- */
.service-card.is-cta{background:linear-gradient(145deg,#163744,#0b2029);border-color:rgba(255,255,255,.14)}
.service-card.is-cta h3{color:#fff}
.service-card.is-cta p{color:#c7d6dc}
.service-card.is-cta .svc-icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--egc-gold-soft)}
.service-card.is-cta:before{background:linear-gradient(180deg,var(--egc-gold-soft),rgba(216,180,90,0))}

@media (max-width:900px){
  .egc-steps,.egc-quotes{grid-template-columns:1fr 1fr}
  .egc-quote:last-child{grid-column:1/-1}
}
@media (max-width:680px){
  .egc-steps,.egc-quotes{grid-template-columns:1fr}
  .egc-quote:last-child{grid-column:auto}
  .egc-step,.egc-quote{padding:24px 20px}
}


