/* ===== Services listing + detail pages — reuses lux.css design tokens ===== */

/* ---------- LISTING (services.html) ---------- */
.listing-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:820px){.listing-grid{grid-template-columns:1fr;gap:22px}}

.listing-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));backdrop-filter:blur(12px);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
html[data-theme="light"] .listing-card{background:#fff;box-shadow:0 22px 54px -32px rgba(120,90,50,.4)}
.listing-card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 44px 100px -46px rgba(201,161,90,.5)}
.listing-card:active{transform:scale(.99)}

.lc-badge{position:absolute;top:18px;left:18px;z-index:3;background:var(--grad-gold);color:#20160a;
  font-size:11px;letter-spacing:.1em;padding:6px 14px;border-radius:100px;font-weight:600;text-transform:uppercase}
html[data-theme="light"] .lc-badge{color:#fffaf2}

.lc-img{position:relative;aspect-ratio:16/11;overflow:hidden}
.lc-img img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.listing-card:hover .lc-img img{transform:scale(1.05)}

.lc-body{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
.lc-body h3{font-family:'Fraunces',serif;font-size:28px;color:var(--cream);margin-bottom:8px}
.lc-desc{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:20px;flex:1}
.lc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  border-top:1px solid var(--line);padding-top:18px}
.lc-price small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.lc-price b{font-family:'Fraunces',serif;font-size:24px;color:var(--cream)}
.lc-price b em{font-style:normal;font-size:14px;color:var(--muted);margin-left:2px}
.lc-cta{font-size:13.5px;letter-spacing:.04em;color:var(--gold1);font-weight:600;white-space:nowrap;transition:.3s}
.listing-card:hover .lc-cta{color:var(--gold2)}

/* ---------- DETAIL (service-*.html) ---------- */
.detail-hero{position:relative;text-align:center;padding-top:150px;padding-bottom:20px;overflow:hidden}
.detail-hero .container{position:relative;z-index:2}
.svc-chip{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold1);
  padding:8px 18px;margin-bottom:18px}
.detail-hero h1{font-size:clamp(40px,7vw,72px);margin:6px 0 14px}
.detail-hero p{color:var(--muted);max-width:600px;margin:0 auto;font-size:16px;line-height:1.65}
.detail-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.detail-hero .crumb{margin-top:22px}

.detail-imgwrap{margin-top:38px}
.detail-img{border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:16/9;max-width:900px;margin:0 auto}
.detail-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.detail-img{aspect-ratio:4/3;border-radius:20px}}

/* Package block */
.package-wrap{max-width:900px;margin:0 auto}
.pkg-head{text-align:center;margin-bottom:32px}
.pkg-head h2{font-size:clamp(30px,4.4vw,48px);margin:12px 0 12px}
.pkg-head p{color:var(--muted);max-width:520px;margin:0 auto;font-size:15px}
.pkg-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;align-items:stretch}
@media(max-width:820px){.pkg-cols{grid-template-columns:1fr;gap:18px}}
/* included column becomes a balanced soft panel to match the add-ons box */
.incl-panel{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:26px 28px 24px}
html[data-theme="light"] .incl-panel{background:#fff;box-shadow:0 20px 48px -34px rgba(120,90,50,.36)}
.pkg-sub{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:20px;color:var(--cream);margin-bottom:16px}
.pkg-sub::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad-gold)}
.pkg-cols .tick{display:flex;gap:12px;align-items:flex-start;margin:11px 0;font-size:14.5px;color:var(--cream);line-height:1.5}
.pkg-cols .tick i{color:var(--gold2);font-style:normal;margin-top:2px}

/* Duration + price options — feel like premium selectable cards */
.price-opts{display:flex;gap:16px;flex-wrap:wrap;margin:0 auto;max-width:540px}
.price-opt{flex:1 1 180px;position:relative;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:22px 22px;text-align:center;overflow:hidden}
html[data-theme="light"] .price-opt{background:#fff;box-shadow:0 18px 44px -34px rgba(120,90,50,.32)}
.price-opt::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-gold);opacity:0;transition:opacity .3s var(--e-out,ease)}
.price-opt:hover{border-color:var(--gold2)}
.price-opt:hover::before{opacity:1}
.price-opt .dur-lab{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold3)}
html:not([data-theme="light"]) .price-opt .dur-lab{color:var(--muted)}
.price-opt .amt{font-family:'Fraunces',serif;font-size:30px;color:var(--cream);margin-top:8px;letter-spacing:-.01em}
.price-opt .amt em{font-style:normal;font-size:14px;color:var(--muted);margin-left:3px}

/* Add-ons panel */
.addon-panel{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:26px 28px 22px}
html[data-theme="light"] .addon-panel{background:#fff;box-shadow:0 20px 48px -34px rgba(120,90,50,.36)}
.addon-panel h4{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:20px;color:var(--cream);margin-bottom:5px}
.addon-panel h4::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad-gold)}
.addon-panel .hint{font-size:12.5px;color:var(--muted);margin-bottom:16px;padding-left:32px}
.addon-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 12px;margin:0 -12px;border-radius:12px;border-top:1px solid var(--line)}
.addon-row:first-of-type{border-top:none}
.addon-row .nm{font-size:14.5px;color:var(--cream)}
.addon-row .nm small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.addon-row .pr{font-family:'Fraunces',serif;color:var(--gold1);font-size:17px;white-space:nowrap}

/* Why-you'll-love-it cards */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.why-grid-4{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.why-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why-grid,.why-grid-4{grid-template-columns:1fr;gap:14px}}
.why-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:26px 24px}
html[data-theme="light"] .why-card{background:#fff;box-shadow:0 18px 44px -34px rgba(120,90,50,.3)}
.why-card:hover{border-color:var(--gold2)}
.why-card .ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;
  background:rgba(201,161,90,.12);font-size:20px;color:var(--gold1);margin-bottom:14px}
.why-card b{display:block;font-family:'Fraunces',serif;font-size:17.5px;margin-bottom:6px;color:var(--cream)}
.why-card span{font-size:13px;color:var(--muted);line-height:1.62}

/* tighten the stack between the why-grid and the closing CTA (two big pads
   were producing ~230px of dead space on the detail pages) */
.detail-hero ~ .cta-final,
body:has(.package-wrap) .cta-final{padding-block:96px 116px}
@media(max-width:600px){body:has(.package-wrap) .cta-final{padding-block:72px 84px}}

/* premium 4-hands strip */
.fourhand{max-width:900px;margin:0 auto;border:1px solid var(--line2);border-radius:22px;
  background:linear-gradient(120deg,rgba(201,161,90,.10),var(--panel));
  padding:30px 32px;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.fourhand .fh-l{flex:1 1 300px}
.fourhand .fh-l b{font-family:'Fraunces',serif;font-size:24px;color:var(--cream);display:block;margin-bottom:6px}
.fourhand .fh-l span{color:var(--muted);font-size:14px;line-height:1.6}
.fourhand .fh-r{flex-shrink:0}

/* included grid */
.incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:820px){.incl-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:480px){.incl-grid{grid-template-columns:1fr 1fr;gap:12px}}
.incl-card{border:1px solid var(--line);border-radius:18px;padding:32px 24px;text-align:center;background:var(--panel)}
html[data-theme="light"] .incl-card{background:#fff;box-shadow:0 18px 44px -34px rgba(120,90,50,.3)}
.incl-card:hover{border-color:var(--gold2)}
.incl-card .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;
  background:rgba(201,161,90,.12);font-size:24px;color:var(--gold1);margin-bottom:16px}
.incl-card b{display:block;font-family:'Fraunces',serif;font-size:20px;margin-bottom:6px}
.incl-card span{font-size:13px;color:var(--muted);line-height:1.55}
@media(max-width:480px){.incl-card{padding:26px 18px}.incl-card b{font-size:17px}}

/* FAQ accordion */
.faq{max-width:800px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-bottom:14px;overflow:hidden;transition:.3s}
.faq details[open]{border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-family:'Fraunces',serif;font-size:21px;color:var(--cream);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold2);font-size:26px;transition:.3s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 26px 24px;color:var(--muted);font-size:14.5px}
.faq .ans a{color:var(--gold1)}

/* mobile tuning */
@media(max-width:600px){
  .detail-hero{padding-top:116px;padding-bottom:8px}
  .detail-hero p{font-size:15px;line-height:1.6}
  .detail-imgwrap{margin-top:30px}
  .lc-body{padding:22px 22px 22px}
  .lc-body h3{font-size:25px}
  .fourhand{padding:26px 24px}
  .pkg-head{margin-bottom:26px}
  .pkg-cols{margin-top:26px}
  .incl-panel,.addon-panel{padding:24px 22px 20px}
  .price-opt{padding:20px 18px}
  .price-opt .amt{font-size:27px}
  .why-card{padding:22px 20px}
}