/* ===== Intro to Services (Lotus style) ===== */

/* Use your existing variables if defined; these are fallbacks */
:root{
    --mint: #cfe7dc;
    --mint-deeper: #c6e1d5;
    --mint-extradeep: #14734c;
    --cream: #f7f5eb;
    --gold: #c6a66a;
    --ink: #1f2d28;       /* deep sage/ink for headings */
    --card: #ffffff;
    --shadow: 0 0.625em 1.875em rgba(20, 60, 40, 0.08);

    /* Core */
    --bg: #FAF7F2;           /* champagne linen */
    --bg-alt: #F3EFE9;       /* warm cream band */
    --surface: #FFFFFF;      /* cards/nav */
    --text: #2B2A28;         /* charcoal */
    --text-muted: #6B6A66;

    /* Brand & Accents */
    --accent: #B88672;       /* rosegold (buttons/links) */
    --accent-600: #A6745F;   /* hover */
    --accent-100: #F1E6E1;   /* subtle fills/chips */
    --sage-200: #DDE8E1;     /* soft sage for cards/icons */
    --border: #E7E0D8;

    /* Shadows */
    --elev: 0 0.625em 1.875em rgba(47,60,51,.08);

    /* Back-compat to your old names */
    --mint: var(--bg-alt);
    --mint-nav: var(--surface);
    --mint-deeper: #ECE6DE;
    --mint-extradeep: var(--brand);
    --mint-dark: #AFC4B7;
    --cream: var(--bg);
    --cream-strip: #EFE7DD;
}

#services-intro {
    background: var(--cream);
    color: var(--text);
    padding: clamp(3em, 6vw, 6em) 1.5em 0;
    border-top: 0.0625em solid rgba(0,0,0,0.03);
}

.services-intro .intro-wrap{
    max-width: 75em;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;   /* copy | highlights */
    gap: 3.5em;
    align-items: start;
    padding-bottom: 3em;
}

.intro-title{
    font-family: "Cinzel", serif;
    font-weight: 600;
    line-height: 1.15;
    color: var(--nav-pill);
    font-size: clamp(1.75em, 2.4vw, 2.5em);
    margin: 0 0 1em 0;
}

.intro-lead{
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1em, 1.05vw, 1.125em);
    line-height: 1.7;
    margin: 0 0 0.625em 0;
    color: var(--text);
}

.intro-body{
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1em;
    line-height: 1.75;
    margin: 0;
    opacity: 0.95;
}

/* Highlights grid */
.intro-highlights{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.highlight{
    background: var(--card);
    border: 0.0625em solid rgba(20, 60, 40, 0.06);
    border-radius: 1em;
    padding: 1.125em 1.125em 1em;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.highlight:hover{
    transform: translateY(-0.125em);
    box-shadow: 0 0.75em 2.375em rgba(20,60,40,.12);
}

.hl-icon{
    width: 2.5em;
    height: 2.5em;
    display: grid;
    place-items: center;
    border-radius: 0.75em;
    background: var(--pink-pill);
    color: var(--ink);
    font-size: 1.25em;
    margin-bottom: 0.625em;
}

.highlight h3{
    margin: 0 0 0.375em;
    font-size: 1em;
    color: var(--ink);
    font-weight: 700;
    font-family: "Inter", system-ui, sans-serif;
}

.highlight p{
    margin: 0;
    font-size: 0.875em;
    line-height: 1.6;
    color: #4a5a55;
}

.pricing-note h3{
    font-family: "Cinzel", serif;
    margin: 0 0 0.5em;
    color: var(--ink);
    font-size: clamp(1.25em, 1.8vw, 1.75em);
    font-weight: 600;
}

.pricing-note p{
    margin: 0 0 0.5em;
    font-size: 1em;
    line-height: 1.75;
    color: var(--text);
    max-width: 80ch;
}

.pricing-points{
    margin: 0.75em 0 0 0;
    padding-left: 1.125em;
    color: #42524d;
}
.pricing-points li{ margin: 0.375em 0; }

/* Responsive */
@media (max-width: 61.25em){
    .services-intro .intro-wrap{
        grid-template-columns: 1fr;
        gap: 1.75em;
        padding-bottom: 3em;
    }
    .intro-highlights{
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 40em){
    .intro-highlights{
        grid-template-columns: 1fr;
    }
}

/* ===== Pricing Philosophy (Lotus style) ===== */
:root{
    --cream: #f7f5eb;
    --card: #ffffff;
    --mint: #cfe7dc;
    --mint-deeper: #c6e1d5;
    --ink: #1f2d28;      /* deep sage for headings */
    --text: #3a4a44;     /* body text */
    --gold: #c6a66a;
    --shadow: 0 0.75em 2em rgba(20,60,40,.08);
}

.pricing-philosophy{
    background:
            radial-gradient(75em 25em at 15% -20%, rgba(198,166,106,.18), transparent 60%),
            linear-gradient(180deg, #fff, #fbfaf6 60%, #fff 100%);
    padding: clamp(3.5em, 3vw, 6em) 1.5em;
    border-top: 0.0625em solid rgba(20,60,40,.05);
    border-bottom: 0.0625em solid rgba(20,60,40,.05);
    color: var(--text);
}

.pp-wrap{
    max-width: 68.75em;
    margin: 0 auto;
}

.pp-badge{
    display: inline-block;
    background: rgba(198,166,106,.18);
    color: #725f34;
    padding: 0.375em 0.625em;
    border-radius: 999em;
    font-weight: 600;
    letter-spacing: .02em;
    font-size: 0.75em;
    margin-bottom: 0.625em;
}

.pp-title{
    font-family: "Cinzel", serif;
    color: var(--nav-pill);
    font-weight: 600;
    font-size: clamp(1.625em, 2.3vw, 2.5em);
    line-height: 1.2;
    margin: 0 0 0.625em 0;
}

.pp-lead{
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.0625em;
    line-height: 1.8;
    max-width: 78ch;
    margin: 0 0 1.75em 0;
    opacity: .95;
}

/* Inclusions */
.pp-inclusions{
    background: var(--card);
    border: 0.0625em solid rgba(20,60,40,.06);
    border-radius: 1em;
    box-shadow: var(--shadow);
    padding: clamp(1.25em, 3vw, 1.75em);
    margin-bottom: clamp(1.75em, 4vw, 2.5em);
}

.pp-inclusions h3{
    margin: 0 0 0.5em 0;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--ink);
    font-size: 1.125em;
}

.pp-inclusions ul{
    margin: 0 0 0.375em 0;
    padding-left: 1.125em;
}

.pp-note{
    margin: 0.5em 0 0;
    font-size: 0.875em;
    color: #566760;
}

/* Comparison */
.pp-compare{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125em;
    margin-bottom: clamp(1.75em, 4vw, 2.5em);
}

.pp-card{
    background: var(--card);
    border: 0.0625em solid rgba(20,60,40,.08);
    border-radius: 1.125em;
    padding: clamp(1.125em, 2.5vw, 1.5em);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.pp-card h4{
    margin: 0 0 0.5em 0;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--ink);
    font-size: 1.125em;
}

.pp-card ul{
    margin: 0;
    padding-left: 1.125em;
    line-height: 1.7;
}

.pp-card.pp-room{
    border-color: rgba(20,60,40,.14);
    background:
            linear-gradient(180deg, #ffffff, #fdfcf9);
}

.pp-card.pp-hourly{
    background:
            linear-gradient(180deg, #ffffff, #f6f8f7);
}

.pp-tag{
    position: absolute;
    top: 0.875em;
    right: 0.875em;
    font-size: 0.75em;
    background: var(--pink-pill);
    color: var(--ink);
    padding: 0.375em 0.625em;
    border-radius: 999em;
    font-weight: 700;
    letter-spacing: .02em;
}

/* FAQs */
.pp-faq h3{
    margin: 0 0 0.625em 0;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--ink);
    font-size: 1.125em;
}

.pp-faq details{
    background: var(--card);
    border: 0.0625em solid rgba(20,60,40,.06);
    border-radius: 0.875em;
    padding: 0.875em 1em;
    margin: 0.625em 0;
}

.pp-faq summary{
    cursor: pointer;
    list-style: none; /* Safari */
    font-weight: 600;
    color: var(--ink);
}
.pp-faq summary::-webkit-details-marker{ display:none; }

.pp-faq details p{
    margin: 0.625em 0 0 0;
    line-height: 1.7;
}

/* CTA */
.pp-cta{
    margin-top: clamp(1.25em, 3vw, 1.875em);
}
.pp-button{
    display: inline-block;
    padding: 0.75em 1.25em;
    border-radius: 999em;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 0.375em 1.125em rgba(31,45,40,.18);
}
.pp-button:hover{ transform: translateY(-0.0625em); }

/* Responsive */
@media (max-width: 56.25em){
    .pp-compare{ grid-template-columns: 1fr; }
}

/* ===== Packages (Lotus style) — corrected ===== */
:root{
    /* keep if not already set in your site */
    --cream:#f7f5eb; --card:#ffffff;
    --ink:#1f2d28; --text:#3a4a44;
    --mint:#cfe7dc; --mint-deeper:#c6e1d5;
    --gold:#c6a66a;
    --shadow:0 0.75em 2em rgba(20,60,40,.08);
}

.packages{
    background: linear-gradient(180deg,#fbfaf6, #ffffff 60%);
    padding: clamp(3em,6vw,6em) 1.5em;
    border-top: 0.0625em solid rgba(20,60,40,.05);
}

.packages-wrap{ max-width: 68.75em; margin: 0 auto; }

.packages-title{
    font-family: "Cinzel", serif;
    color: var(--nav-pill);
    font-size: clamp(1.625em,2.3vw,2.5em);
    margin: 0 0 0.5em;
    font-weight: 600;
}
.packages-lead{
    margin: 0 0 1.5em;
    max-width: 72ch;
    line-height: 1.75;
    color: var(--text);
    font-family: "Inter", system-ui, sans-serif;
}

/* Grid: 2 wide on desktop */
.packages-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25em;
}

/* ---- Card base ---- */
.pkg-card{
    background: var(--card);
    border: 0.0625em solid rgba(20,60,40,.08);
    border-radius: 1em;
    box-shadow: var(--shadow);
    padding: 1.75em;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pkg-card:hover{
    transform: translateY(-0.125em);
    box-shadow: 0 0.875em 2.5em rgba(20,60,40,.12);
}

/* Header / title */
.pkg-head .badge-mint{
    display:inline-block;
    background: var(--pink-pill);
    color: var(--ink);
    border-radius: 999em;
    padding: 0.25em 0.625em;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing:.02em;
    margin-bottom: 0.375em;
}

.pkg-title{
    margin: 0 0 0.375em 0;
    font-family: "Cinzel", serif;
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.125em,1.6vw,1.5em);
    line-height: 1.25;
}
.pkg-sub{
    margin: 0.25em 0 1em;
    color: #4a5a55;
    line-height: 1.6;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.875em;
}

/* Inclusions list */
.pkg-includes{
    margin: 0 0 1em;
    padding-left: 1.125em;
    line-height: 1.7;
    color: var(--text);
    flex: 1 1 auto; /* pushes price/cta to bottom */
}
.pkg-includes li{ margin: 0.25em 0; }

/* Price row */
.pkg-price{
    margin: 0.375em 0 1em;
    display: flex;
    align-items: baseline;
    gap: 0.375em;
    color: var(--ink);
}
.pkg-price .from{ font-size: 0.75em; opacity:.7; }
.pkg-price .amount{ font-weight: 800; font-size: 1.375em; }
.pkg-price .gst{ font-size: 0.75em; opacity:.75; }

/* ---- CTA ---- */
.pkg-cta{
    margin-top: auto;
    padding: 0;                 /* remove any background strip */
    background: transparent;    /* ensure no pale green bar */
    border: 0;
}
.btn-primary, .btn-secondary{
    display:inline-block;
    text-decoration:none;
    border-radius:999em;
    padding: 0.75em 1.25em;
    font-weight:700;
    letter-spacing:.02em;
    transition: transform .15s ease, box-shadow .15s ease;
    font-family: "Inter", system-ui, sans-serif;
}
.btn-primary{
    background: var(--nav-pill);
    color:#fff;
    box-shadow: 0 0.375em 1.125em rgba(31,45,40,.18);
}
.btn-primary:hover{ transform: translateY(-0.0625em); }
.btn-primary:focus-visible{
    outline: 0.1875em solid var(--nav-pill);
    outline-offset: 0.125em;
}
.btn-secondary{
    background: var(--nav-pill);
    color:#ffffff;
}
.btn-secondary:hover{ transform: translateY(-0.0625em); }
.btn-secondary:focus-visible{
    outline: 0.1875em solid var(--nav-pill);
    outline-offset: 0.125em;
}

/* ---- Deal card ---- */
.pkg-deal{
    background:
            radial-gradient(50em 13.75em at -10% -20%, rgba(198,166,106,.22), transparent 60%),
            linear-gradient(180deg,#ffffff,#fdfcf9);
    border-color: rgba(198,166,106,.45);
}
.pkg-deal .pkg-title{ color:#725f34; }

.deal-ribbon{
    position:absolute;
    top:0.75em;
    right:-2.125em;
    background: linear-gradient(180deg,var(--gold),#b79659);
    color:#fff;
    font-weight:800;
    letter-spacing:.06em;
    font-size:0.6875em;
    padding: 0.375em 3.375em;
    transform: rotate(12deg);
    box-shadow: 0 0.625em 1.5em rgba(198,166,106,.35);
    pointer-events: none;
}

.deal-price{ color:#b7893b; font-weight:700; }
.deal-note{ margin: 0.5em 0 0; font-size: 0.75em; color:#725f34; opacity:.9; }

/* Utility / a11y */
.sr-only{
    position:absolute;
    width:0.0625em;
    height:0.0625em;
    padding:0;
    margin:-0.0625em;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Responsive */
@media (max-width: 56.25em){
    .packages-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
    .pkg-card, .btn-primary, .btn-secondary{
        transition: none;
    }
}

/* ===== Services CTA ===== */
.services-inquiry {
    background: linear-gradient(180deg, #fbfaf6, #fff);
    border-top: 0.0625em solid rgba(20,60,40,.06);
    text-align: center;
    padding: 4em 1.5em;
}

.services-inquiry .wrap {
    max-width: 50em;
    margin: 0 auto;
}

.services-inquiry h2 {
    font-family: Cinzel, serif;
    color: var(--ink);
    font-size: clamp(1.375em, 2vw, 2em);
    margin: 0 0 0.75em;
}

.services-inquiry p {
    color: var(--text);
    margin: 0 auto 1.5em;
    max-width: 60ch;
    line-height: 1.7;
}

.services-inquiry .btn-primary {
    display: inline-block;
    padding: 0.75em 1.25em;
    border-radius: 999em;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 0.375em 1.125em rgba(31,45,40,.18);
}

.services-inquiry .btn-primary:hover {
    transform: translateY(-0.0625em);
}

/* ===== Page hero ===== */
.page-hero.services-hero {
    padding: 3.5em 1.5em 2.625em;
    background: linear-gradient(180deg,#fff,#fbfaf6);
    border-bottom: 0.0625em solid rgba(20,60,40,.06);
    text-align: center;
}

.page-hero.services-hero .wrap {
    max-width: 56.25em;
    margin: 0 auto;
}

.page-hero.services-hero h1 {
    font-family: Cinzel, serif;
    font-size: clamp(1.875em,4vw,2.75em);
    color: var(--ink);
    margin: 0 0 0.5em;
}

.page-hero.services-hero p {
    color: var(--sub);
    margin: 0 auto;
    max-width: 45em;
}