/* =========================================================================
   Elite Golden Care - services.html design layer
   -------------------------------------------------------------------------
   Linked LAST in <head> of services.html (after the inline <style> blocks and
   after egc-site.css) so it refines them instead of fighting them.
   Additive and reversible: delete the single
   <link rel="stylesheet" href="egc-services-design.css"> line to roll back.
   Sections: 1 tokens - 2 type - 3 rhythm - 4 page hero - 5 jump chips -
   6 collection band + service cards - 7 card type, check list, CTA and the
   light variant - 8 photo bands - 9 FAQ - 10 small screens
   ========================================================================= */

/* 1. Tokens (mirrors egc-index-design.css so both pages stay in step) ----- */
:root{
  --egc-gold:#b58a2b;
  --egc-gold-soft:#d8b45a;
  --egc-gold-deep:#8a6410;
  --egc-ink:#172d3b;
  --egc-body:#5c6b76;
  --egc-meta:#5d6b74;
  --egc-radius:22px;
  --egc-gap:clamp(30px,4.2vw,64px);
  --egc-section:clamp(64px,7.5vw,104px);
}

/* 2. Typography ---------------------------------------------------------- */
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}
p{color:var(--egc-body);line-height:1.72}
.eyebrow{letter-spacing:.22em}

/* 3. Vertical rhythm ----------------------------------------------------- */
.section{padding:var(--egc-section) 0}
.section-head{max-width:760px;margin-bottom:clamp(30px,4vw,50px)}
.section-head h2{margin-bottom:14px}
.section-head p{max-width:64ch;margin-inline:auto}

/* 4. Page hero -----------------------------------------------------------
   Adds the missing call to action, replaces the plain-text breadcrumb with a
   real breadcrumb nav, and takes over the layout of the flagged image (which
   used to carry hard-coded inline width/height). */
.page-hero{
  min-height:0;
  padding:clamp(52px,6.5vw,92px) 0;
  background:
    radial-gradient(circle at 12% 15%,rgba(216,180,90,.16),transparent 32%),
    linear-gradient(120deg,#f7f2e7 0%,#fbfaf6 58%,#eef3f1 100%);
}
.page-hero-inner{gap:clamp(30px,4vw,56px)}
.page-hero-copy{max-width:620px}
.page-hero h1{font-size:clamp(40px,4.8vw,64px);letter-spacing:-.035em;margin-bottom:18px}
.page-hero-copy p{font-size:clamp(15px,1.1vw,16.5px);max-width:56ch;margin-bottom:0}
.page-hero .breadcrumb{
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--egc-meta);margin:0 0 16px;
}
.page-hero .breadcrumb a{color:var(--egc-gold-deep)}
.page-hero .breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.page-hero .breadcrumb span[aria-hidden]{color:rgba(23,45,59,.28)}
.page-hero .hero-actions{margin-top:clamp(24px,2.6vw,32px);gap:12px}
.page-hero .hero-actions .btn{min-height:50px;padding:15px 26px;font-size:13.5px}
.page-hero img.egc-hero-photo{
  width:min(420px,40%);height:auto;border-radius:24px;
  box-shadow:18px 18px 0 rgba(216,180,90,.38),0 25px 55px rgba(17,42,56,.14);
}
@media (max-width:900px){
  .page-hero{padding:clamp(44px,7vw,64px) 0}
  .page-hero img.egc-hero-photo{width:100%!important;max-width:520px;box-shadow:10px 10px 0 rgba(216,180,90,.38),0 18px 40px rgba(17,42,56,.12)}
}

/* 5. "Jump to a service" chips -------------------------------------------
   A 14-item catalogue needs in-page navigation; the chips are sticky on
   desktop so they stay reachable while scrolling the grid. */
.egc-svc-jump{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:22px;
  border:1px solid #ece6da;border-radius:18px;
  background:linear-gradient(180deg,#fff,#fdfbf6);
  box-shadow:0 8px 28px rgba(23,45,59,.07);
}
.egc-svc-jump-label{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--egc-gold-deep);padding-right:12px;border-right:1px solid #ece6da;white-space:nowrap;
}
.egc-svc-chips{display:flex;flex-wrap:wrap;gap:8px}
.egc-svc-chips a{
  font-size:12.5px;font-weight:600;color:var(--egc-ink);
  background:#fff;border:1px solid #e7e2d8;border-radius:999px;padding:7px 13px;
  transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
}
.egc-svc-chips a:hover{background:var(--egc-ink);color:#fff;border-color:var(--egc-ink);transform:translateY(-2px)}
.egc-svc-chips a:focus-visible{outline:3px solid rgba(181,138,43,.5);outline-offset:2px}
@media (min-width:901px){
  .egc-svc-jump{
    position:sticky;top:82px;z-index:40;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
}

/* 6. Service cards -------------------------------------------------------
   Structure and motion adapted from the Prestige PXL "book now" cards:
   dark card surface, circular icon with a pulsing ring, centred title and
   copy, left-aligned check list, 4px gradient rail that wipes in on hover,
   and a pill CTA whose hover wipes a light layer in from the left.
   Their emerald-on-dark-green palette is translated to our ink + gold.
   All card colours come from the variables below - see the LIGHT VARIANT
   comment at the end of section 7 to switch back to light cards. */
.egc-collection{
  --egc-band-bg:linear-gradient(165deg,#0b1c24,#14303c 55%,#0b1c24);
  --egc-band-text:rgba(255,255,255,.74);
  --egc-card-bg:linear-gradient(145deg,#123544,#0c2634);
  --egc-card-border:rgba(216,180,90,.22);
  --egc-card-title:#fff;
  --egc-card-text:rgba(255,255,255,.70);
  --egc-card-feature:rgba(255,255,255,.80);
  --egc-icon-bg:rgba(216,180,90,.12);
  position:relative;overflow:hidden;
  background:var(--egc-band-bg);
}
.egc-collection:before{
  content:"";position:absolute;top:-260px;right:-200px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,180,90,.20),transparent 62%);
  pointer-events:none;
}
.egc-collection>.container{position:relative;z-index:1}
.egc-collection .eyebrow{color:var(--egc-gold-soft)}
.egc-collection .section-head h2{color:#fff}
.egc-collection .section-head p{color:var(--egc-band-text)}
.egc-collection .section-head .line{background:var(--egc-gold-soft)}

.service-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1200px;margin:0 auto}
.service-book-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:40px 30px;text-align:center;
  background:var(--egc-card-bg);
  border:1px solid var(--egc-card-border);
  border-radius:20px;
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
  scroll-margin-top:190px;
}
.service-book-card:before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--egc-gold),#f1d48a);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.service-book-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(216,180,90,.16);border-color:var(--egc-gold)}
.service-book-card:hover:before{transform:scaleX(1)}
.service-book-card:target{border-color:#f1d48a;box-shadow:0 30px 60px rgba(216,180,90,.24)}
.service-book-card .number{
  align-self:center;font-family:"Playfair Display",Georgia,serif;
  font-size:13px;font-weight:600;letter-spacing:.14em;
  color:var(--egc-gold-soft);margin:0 0 18px;
}
.service-icon-wrapper{
  width:100px;height:100px;margin:0 auto 25px;position:relative;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--egc-icon-bg);border-radius:50%;
}
.service-icon-wrapper:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--egc-gold);opacity:.3;
  animation:egcPulseRing 2s ease-out infinite;
}
.service-book-card:hover .service-icon-wrapper:before{animation-duration:1s}
.service-icon-wrapper .ico{
  width:38px;height:38px;color:var(--egc-gold-soft);stroke-width:1.5;
  transition:transform .4s ease,color .4s ease;
}
.service-book-card:hover .service-icon-wrapper .ico{transform:scale(1.18);color:#fff}
@keyframes egcPulseRing{
  0%{transform:scale(1);opacity:.3}
  50%{transform:scale(1.2);opacity:.1}
  100%{transform:scale(1);opacity:.3}
}

/* 7. Card typography, check list, CTA and the light variant ------------- */
.service-book-card h3{
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.5rem;line-height:1.25;color:var(--egc-card-title);margin:0 0 15px;
}
.service-book-card>p{font-size:.95rem;line-height:1.7;color:var(--egc-card-text);margin:0 0 25px}
.service-features{list-style:none;margin:0 0 30px;padding:0;text-align:left;display:grid;gap:2px}
.service-features li{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 0;font-size:.85rem;line-height:1.5;color:var(--egc-card-feature);
}
.service-features li:before{
  content:"";flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  background:rgba(216,180,90,.16);border:1px solid rgba(216,180,90,.50);
}
.service-features li:after{
  content:"";position:absolute;left:4.5px;top:12.5px;width:4px;height:7px;
  border:solid var(--egc-gold-soft);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.btn-book-service{
  align-self:center;display:inline-flex;align-items:center;justify-content:center;
  margin-top:auto;padding:14px 32px;position:relative;overflow:hidden;isolation:isolate;
  border-radius:50px;background:linear-gradient(135deg,#e6c87c,#c89b3c);
  color:#0b2029;font-size:12.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;
  transition:transform .3s ease,box-shadow .3s ease,color .3s ease;
}
.btn-book-service span{position:relative;z-index:1}
.btn-book-service:before{
  content:"";position:absolute;inset:0;z-index:0;background:#fdfaf1;
  transform:translateX(-101%);transition:transform .35s ease;
}
.btn-book-service:hover{transform:translateY(-3px);color:#7d5a0f;box-shadow:0 12px 30px rgba(216,180,90,.35)}
.btn-book-service:hover:before{transform:translateX(0)}
.btn-book-service:focus-visible{outline:3px solid var(--egc-gold-soft);outline-offset:3px}

/* The jump chips now sit on the dark band, so they need restyling. */
.egc-collection .egc-svc-jump{background:rgba(255,255,255,.06);border-color:rgba(216,180,90,.24);box-shadow:none}
.egc-collection .egc-svc-jump-label{color:var(--egc-gold-soft);border-right-color:rgba(216,180,90,.24)}
.egc-collection .egc-svc-chips a{background:rgba(255,255,255,.06);border-color:rgba(216,180,90,.22);color:#f2ede2}
.egc-collection .egc-svc-chips a:hover{background:var(--egc-gold-soft);border-color:var(--egc-gold-soft);color:#0b2029}

/* LIGHT VARIANT - uncomment to put the same cards on white instead.
.egc-collection{
  --egc-band-bg:linear-gradient(160deg,#fbf9f4,#fff);
  --egc-band-text:var(--egc-body);
  --egc-card-bg:linear-gradient(145deg,#fff,#fdfcf9);
  --egc-card-border:#e9e5dc;
  --egc-card-title:var(--egc-ink);
  --egc-card-text:var(--egc-body);
  --egc-card-feature:#3d4f5b;
  --egc-icon-bg:rgba(181,138,43,.10);
}
.egc-collection .section-head h2{color:var(--egc-ink)}
.egc-collection .eyebrow{color:var(--egc-gold-deep)}
.egc-collection .section-head .line{background:var(--egc-gold)}
.egc-collection .egc-svc-jump{background:#fff;border-color:#ece6da}
.egc-collection .egc-svc-jump-label{color:var(--egc-gold-deep);border-right-color:#ece6da}
.egc-collection .egc-svc-chips a{background:#fff;border-color:#e7e2d8;color:var(--egc-ink)}
.egc-collection .egc-svc-chips a:hover{background:var(--egc-ink);border-color:var(--egc-ink);color:#fff}
.service-icon-wrapper .ico{color:var(--egc-gold-deep)}
.service-book-card:hover .service-icon-wrapper .ico{color:var(--egc-ink)}
*/

/* 8. Photo + copy band --------------------------------------------------- */
.split{gap:var(--egc-gap)}
.split .eyebrow{margin-bottom:6px}
.split h2{margin-bottom:14px}
.split p{max-width:56ch}
.split>img.egc-split-photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--egc-radius);box-shadow:var(--shadow);
}

/* 9. FAQ (native details/summary: no JavaScript, keyboard accessible) ----- */
.egc-faq-section{background:#fff;border-top:1px solid #f1ece2}
.egc-faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.egc-faq details{
  border:1px solid #e9e5dc;border-radius:16px;background:#fff;
  box-shadow:0 8px 28px rgba(23,45,59,.06);overflow:hidden;
}
.egc-faq summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:15px;font-weight:700;color:var(--egc-ink);transition:background .22s ease;
}
.egc-faq summary::-webkit-details-marker{display:none}
.egc-faq summary:after{content:"+";font-size:20px;line-height:1;color:var(--egc-gold-deep);transition:transform .25s ease}
.egc-faq details[open] summary:after{transform:rotate(45deg)}
.egc-faq summary:hover{background:#fdfbf6}
.egc-faq summary:focus-visible{outline:3px solid rgba(181,138,43,.5);outline-offset:-3px}
.egc-faq details[open] summary{border-bottom:1px solid #f1ece2}
.egc-faq .egc-faq-body{padding:16px 22px 20px;font-size:13.5px;line-height:1.75;color:var(--egc-body)}
.egc-faq .egc-faq-body a{color:var(--egc-gold-deep);font-weight:700}
.egc-faq .egc-faq-body a:hover{text-decoration:underline;text-underline-offset:3px}

/* 10. Small screens ------------------------------------------------------ */
@media (max-width:900px){
  .service-detail-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .service-book-card{padding:34px 26px;scroll-margin-top:112px}
  .egc-svc-jump{position:static;flex-direction:column;align-items:flex-start;gap:10px}
  .egc-svc-jump-label{border-right:0;padding-right:0}
  .egc-svc-chips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px}
  .egc-svc-chips a{flex:0 0 auto}
}
@media (max-width:680px){
  :root{--egc-section:58px}
  .service-detail-grid{grid-template-columns:1fr}
  .service-book-card{padding:30px 22px}
  .service-book-card h3{font-size:1.35rem}
  .service-icon-wrapper{width:84px;height:84px;margin-bottom:20px}
  .service-icon-wrapper .ico{width:32px;height:32px}
  .egc-faq summary{padding:16px 18px;font-size:14px}
  .egc-faq .egc-faq-body{padding:14px 18px 18px}
}
@media (prefers-reduced-motion:reduce){
  .service-book-card,.service-book-card:before,.service-icon-wrapper:before,
  .service-icon-wrapper .ico,.btn-book-service,.btn-book-service:before,
  .egc-svc-chips a,.egc-faq summary:after{transition:none;animation:none}
  .service-book-card:hover,.egc-svc-chips a:hover,.btn-book-service:hover,
  .service-book-card:hover .service-icon-wrapper .ico{transform:none}
}
