@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
    /* STITCH PALETTES - COSMIC PURPLE & BLUE SCHEME */
    --primary: #6f3b87;       
    --primary-hover: #4e2960; 
    --accent: #008bc4;        
    --accent-hover: #0077a8;
    --accent-light: #a7b5d1;  
    
    --bg-color: #f6f7fb;      
    --bg-main: #f6f7fb;
    --bg-alt: #eef0f6;        
    --bg-card: #ffffff;       
    
    --text-main: #3d2847;     
    --text-muted: #3a599b;    
    --border: rgba(61, 40, 71, 0.1); 
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    
    --font-heading: 'Jost', sans-serif;
    --font-body: 'Jost', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* BACKGROUND MANDALA PATTERN */
.bg-mandala {
    position: absolute;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0c27.614 0 50 22.386 50 50s-22.386 50-50 50S0 77.614 0 50 22.386 0 50 0zm0 2c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48S76.51 2 50 2zm0 14c18.778 0 34 15.222 34 34s-15.222 34-34 34-34-15.222-34-34 15.222-34 34-34zm0 2c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 12c11.046 0 20 8.954 20 20s-8.954 20-20 20-20-8.954-20-20 8.954-20 20-20zm0 2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z' fill='%23f89e80' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-size: cover;
    z-index: 0;
    pointer-events: none;
}
.bg-mandala.left { left: -100px; top: 20%; }
.bg-mandala.right { right: -100px; bottom: 10%; }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

h1 { font-size: clamp(48px, 6vw, 85px); font-weight: 600; letter-spacing: -0.04em; }
h2 { font-size: clamp(36px, 4vw, 55px); letter-spacing: -0.03em; }
h3 { font-size: 24px; font-weight: 500; }

p { color: var(--text-muted); }

a { color: var(--text-main); text-decoration: none; transition: 0.3s; }

.eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* BUTTONS */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(111,59,135,0.2);
}
.button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(111, 59, 135, 0.3);
    color: #fff;
}

/* Green circular button */
.circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(78,182,57,0.3);
    text-decoration: none;
    z-index: 10;
}
.circle-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.1) translateX(2px);
    color: #fff;
}
.circle-btn span { position: absolute; right: 60px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-main); white-space: nowrap; font-weight: 600; opacity: 0; transform: translateX(10px); transition: 0.3s; }
.circle-btn:hover span { opacity: 1; transform: translateX(0); }

/* SECTIONS */
.section { padding: 120px 5%; position: relative; }
.section-alt { background-color: var(--bg-alt); }
.text-center { text-align: center; }

/* HEADER */
header {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 5%;
    z-index: 100;
}
.brand { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: #fff; }
nav a { color: #fff; margin: 0 20px; font-size: 15px; font-weight: 400; opacity: 0.9; }
nav a:hover { opacity: 1; }
.menu { display: none; background: transparent; border: none; color: #fff; font-size: 28px; cursor: pointer; }

/* HERO */
.hero { background-image: url('/assets/images/ritual-river-sanctuary.png');
    position: relative;
    padding: 220px 5% 150px;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 30px 30px;
    min-height: 90vh;
    display: flex;
    align-items: center;
}
.hero::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%);
    border-radius: 0 0 30px 30px;
}
.hero-copy { position: relative; z-index: 2; max-width: 750px; }
.hero-copy h1, .hero-copy p, .hero-copy .eyebrow { color: #ffffff; }
.hero-copy .eyebrow { color: var(--primary); letter-spacing: 0.2em; font-size: 12px; }
.hero-copy p:not(.eyebrow) { font-size: 20px; margin: 25px 0 45px; opacity: 0.9; font-weight: 300; }

/* WHAT WE DO CARDS */
.cards-wrapper {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 60px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 60px auto 0;
    position: relative;
}
.card-line {
    position: relative;
    text-align: center;
    padding: 0 20px;
}
.card-line:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0,0,0,0.05);
}
.card-icon { height: 60px; margin-bottom: 25px; }
.card-icon img { height: 100%; object-fit: contain; }

/* COUNTERS */
.counters {
    display: flex;
    justify-content: space-around;
    max-width: 1000px;
    margin: 80px auto 0;
    text-align: center;
}
.counters h3 { font-size: 55px; font-weight: 400; margin-bottom: 5px; color: var(--text-main); }
.counters p { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-main); font-weight: 500; }

/* SPLIT LAYOUT */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}
.split-grid .img-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.split-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-grid.reverse .img-wrapper { order: 2; }
.split-grid.reverse .text-wrapper { order: 1; padding-right: 60px; }

/* BLOG/TIPS GRID */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 60px auto 0; }
.post-card img { border-radius: var(--radius-md); width: 100%; height: 280px; object-fit: cover; margin-bottom: 25px; }
.post-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; display: block; }
.post-card h3 { font-size: 22px; font-weight: 500; line-height: 1.3; }

/* FORMS */
.form-line { position: relative; margin-bottom: 30px; }
.form-line input, .form-line select {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-main);
    outline: none;
    transition: 0.3s;
}
.form-line input:focus, .form-line select:focus { border-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

/* QUOTE */
.quote-section { text-align: center; max-width: 800px; margin: 0 auto; }
.quote-text { font-size: 28px; line-height: 1.5; font-style: italic; color: var(--text-main); font-weight: 400; margin-bottom: 30px; }
.quote-avatar { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 15px; object-fit: cover; }

/* MEDIA QUERIES */
@media(max-width:900px){
    .split-grid { grid-template-columns: 1fr; gap: 40px; }
    .split-grid.reverse .img-wrapper { order: 1; }
    .split-grid.reverse .text-wrapper { order: 2; padding-right: 0; }
    .cards-wrapper { grid-template-columns: 1fr; padding: 40px 20px; gap: 30px; }
    .card-line:not(:last-child)::after { display: none; }
    .grid-3 { grid-template-columns: 1fr; }
    .counters { flex-wrap: wrap; gap: 40px; }
    .counters > div { width: 40%; }
    .hero { background-image: url('/assets/images/ritual-river-sanctuary.png'); padding-top: 150px; min-height: 70vh; }
}

/* Spirit Mode editorial refresh */
body{letter-spacing:.005em}.section{padding:130px max(6vw,36px)}.section-alt{background:var(--bg-alt)}h1,h2,h3{font-weight:500}h1 em,h2 em{font-weight:500}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--sage)}.button{border-radius:0;padding:17px 23px;text-transform:uppercase;font-size:10px;letter-spacing:.12em;box-shadow:none;background:var(--primary)}.button:hover{box-shadow:none;background:var(--primary-hover)}
header{padding:27px 5%;border-bottom:1px solid rgba(255,255,255,.25)}.brand{font-family:'Jost',sans-serif;font-size:17px;letter-spacing:.14em}.hero{border-radius:0;min-height:800px;padding:170px 11vw 110px;background-position:center}.hero:before{border-radius:0;background:linear-gradient(90deg,rgba(22,22,17,.75),rgba(22,22,17,.12))}.hero-copy{max-width:700px}.hero-copy h1{font-size:clamp(53px,6.4vw,92px);line-height:1}.hero-copy .eyebrow{color:#ddd6c6}.hero-copy p:not(.eyebrow){font-size:16px;max-width:520px;line-height:1.75}.hero-actions{display:flex;gap:28px;align-items:center}.hero-link{color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:.12em;border-bottom:1px solid rgba(255,255,255,.65);padding-bottom:5px}.hero-link:hover{color:#e7d9bd}
.journey-band{background:#3d2847;color:#f6f7fb;padding:28px 7vw;display:grid;grid-template-columns:1.5fr repeat(3,1fr);align-items:center;gap:30px}.journey-band>p{color:#d6c7ea;font-size:10px;letter-spacing:.18em;margin:0}.journey-band div{border-left:1px solid #657064;padding-left:18px}.journey-band span,.journey-band small{display:block;font-size:10px;letter-spacing:.1em;color:#bdc4b9}.journey-band strong{display:block;font:500 24px 'Jost', sans-serif;margin:3px 0}
.cards-wrapper{background:transparent;border-radius:0;padding:55px 0 0;gap:0;border-top:1px solid var(--text-main)}.card-line{text-align:left;padding:0 38px}.card-line:first-child{padding-left:0}.card-line:not(:last-child)::after{right:0;top:0;height:100%;background:var(--border)}.card-icon{filter:grayscale(1) sepia(.35);height:42px}.cards-wrapper h3{font-size:29px}.counters{border-top:1px solid var(--border);padding-top:45px}.counters h3{font-family:'Jost', sans-serif;font-size:50px}.counters p{font-size:10px}.bg-mandala{display:none}
.ritual-note{display:grid;grid-template-columns:1.08fr .92fr;background:#3d2847;color:#f6f7fb;min-height:680px}.ritual-photo{background:url('/assets/images/ritual-river-sanctuary.png') center/cover}.ritual-copy{padding:95px 11%;align-self:center;position:relative}.ritual-copy h2{color:#f6f7fb;font-size:clamp(39px,4vw,62px);margin:15px 0 25px}.ritual-copy p:not(.eyebrow){color:#ded7c9;max-width:440px}.giant-mark{font:100px/0.6 'Jost', sans-serif;color:#a7ad91;display:block}.underlined-link{display:inline-block;margin-top:25px;color:#f6f7fb;text-transform:uppercase;font-size:10px;letter-spacing:.12em;border-bottom:1px solid #f6f7fb;padding-bottom:6px}
.service-icon{width:72px;height:58px;background-image:url('assets/spirit-mode-service-icons.png');background-size:300% auto;background-repeat:no-repeat;filter:none!important}.icon-guidance{background-position:0 center}.icon-cleansing{background-position:50% center}.icon-alignment{background-position:100% center}
.split-grid .img-wrapper,.post-card img{border-radius:0}.quote-section{max-width:900px}.quote-text{font-family:'Jost', sans-serif;font-size:clamp(26px,3vw,43px);line-height:1.3}.grid-3{gap:22px}.post-card img{filter:saturate(.7)}.post-card h3{font-size:27px}.form-line input,.form-line select{border-radius:0}.section:has(.quote-section){background:#f9f7f1}
@media(max-width:900px){.journey-band{grid-template-columns:1fr 1fr;padding:32px 7vw}.journey-band>p{grid-column:span 2}.ritual-note{grid-template-columns:1fr}.ritual-photo{min-height:390px}.ritual-copy{padding:75px 8vw}.hero{min-height:720px;padding:150px 8vw 85px}.card-line,.card-line:first-child{padding:25px 0}.card-line:not(:last-child)::after{top:auto;bottom:0;width:100%;height:1px}.hero-actions{flex-wrap:wrap}}

/* =========================================================================
   PREMIUM NAVBAR (Brand | Nav | Action)
   ========================================================================= */
#site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: all 0.4s ease;
    background: var(--bg-main); /* Solid warm ivory by default for internal pages */
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
#site-header.is-home {
    background: transparent;
    border-bottom: 1px solid transparent;
}
#site-header.is-home.scrolled {
    background: var(--bg-main);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    height: 90px;
    transition: height 0.4s ease;
}
#site-header.scrolled .header-container {
    height: 76px;
}

.header-left { justify-self: start; }
.header-center { justify-self: center; }
.header-right { justify-self: end; display: flex; align-items: center; gap: 15px; }

/* Brand */
.brand { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; color: var(--text-main); transition: color 0.3s; }
.brand i { font-style: italic; color: var(--primary); }
#site-header.is-home:not(.scrolled) .brand { color: #fff; }

/* Desktop Nav */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.desktop-nav a {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s;
}
#site-header.is-home:not(.scrolled) .desktop-nav a { color: #fff; opacity: 0.9; }
#site-header.is-home:not(.scrolled) .desktop-nav a:hover { opacity: 1; color: #fff; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--primary); }
.desktop-nav a.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary);
}
#site-header.is-home:not(.scrolled) .desktop-nav a.active::after { background: #fff; }

/* Booking Button */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff !important;
    height: 48px;
    padding: 0 24px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(111, 59, 135, 0.3);
}
.header-btn:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(111, 59, 135, 0.4); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown .arrow { font-size: 10px; margin-left: 5px; opacity: 0.7; }
.dropdown-content {
    padding-top: 15px; /* Bridging the hover gap */

    display: none;
    position: absolute;
    top: 100%;
    margin-top: 10px;

    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 20px 0;
    z-index: 1000;
    border: 1px solid rgba(0,0,0,0.05);
}
.dropdown:hover .dropdown-content {
    padding-top: 15px; /* Bridging the hover gap */
 display: flex; flex-direction: column; }
.dropdown-content a {
    color: var(--text-main) !important;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 500;
}
.dropdown-content a.active::after { display: none; }
.dropdown-content a:hover { background: var(--bg-alt); color: var(--primary) !important; }
.dropdown-content hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

.menu-toggle { display: none; background: transparent; border: none; font-size: 28px; color: var(--text-main); cursor: pointer; transition: 0.3s; }
#site-header.is-home:not(.scrolled) .menu-toggle { color: #fff; }

@media(max-width: 900px) {
    .header-container { padding: 0 24px; height: 72px; display: flex; justify-content: space-between; }
    #site-header.scrolled .header-container { height: 68px; }
    .desktop-nav, .header-btn { display: none; }
    .menu-toggle { display: block; }
}

/* =========================================================================
   MOBILE MENU (Full Screen)
   ========================================================================= */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 9999;
    padding: 80px 5% 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    visibility: hidden;
}
.mobile-menu-overlay.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.close-menu {
    position: absolute;
    top: 30px; right: 5%;
    background: transparent;
    border: none;
    font-size: 40px;
    color: var(--text-main);
    cursor: pointer;
}
.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    margin-bottom: 50px;
}
.mobile-nav > a { font-size: 32px; font-weight: 500; color: var(--text-main); }
.sub-nav { display: flex; flex-direction: column; gap: 15px; margin-top: -5px; }
.sub-nav a { font-size: 18px; color: var(--text-muted); }
.mobile-actions { display: flex; flex-direction: column; gap: 15px; align-items: center; }
.mobile-actions .outline { width: 100%; border-color: var(--text-main); }
.mobile-actions .button { width: 100%; }

/* =========================================================================
   FOOTER (Rich & Spacious)
   ========================================================================= */
.pre-footer { padding: 100px 5%; border-top: 1px solid var(--border); }

footer {
    background: var(--text-main);
    color: #fcf9f6;
    padding: 100px 5% 30px;
}
.footer-top {
    max-width: 1400px;
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
}
.footer-brand-col { max-width: 400px; }
.footer-brand-col .brand { color: #fff; font-size: 32px; display: block; margin-bottom: 25px; }
.footer-desc { font-size: 22px; line-height: 1.4; margin-bottom: 20px; color: #fff; }
.footer-subdesc { font-size: 14px; color: #888; margin-bottom: 30px; }
.social-links { display: flex; gap: 20px; }
.social-links a { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.social-links a:hover { color: var(--primary); }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 25px; font-weight: 600; letter-spacing: 0.05em; }
.footer-col a { display: block; color: #aaa; margin-bottom: 12px; font-size: 15px; }
.footer-col a:hover { color: var(--primary); }
.footer-col p { color: #aaa; font-size: 14px; margin-bottom: 20px; }
.hours p { margin-bottom: 8px; font-size: 14px; }
.hours strong { color: #fff; font-weight: 500; }

.footer-cta { color: var(--primary) !important; font-weight: 500; font-size: 14px; display: inline-block; }

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
}
.footer-bottom a { color: #666; }
.footer-bottom a:hover { color: #fff; }
.slogan { font-family: 'Jost', sans-serif; font-style: italic; font-weight: 600; color: #fff; font-size: 16px; }

/* Responsive Adjustments */
@media(max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr; gap: 60px; }
    .footer-brand-col { max-width: 100%; }
}
@media(max-width: 800px) {
    .desktop-nav, .header-actions .button { display: none; }
    .menu-toggle { display: block; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}
@media(max-width: 500px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   MISSING BUTTON STYLES & IMAGE FIXES
   ========================================================================= */

.outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-main);
    padding: 16px 40px;
    border-radius: 50px;
    border: 1px solid var(--border);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}
.outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.button.light {
    background: #fff;
    color: var(--text-main);
    border: 1px solid #fff;
}
.button.light:hover {
    background: var(--bg-alt);
    border-color: var(--bg-alt);
    color: var(--text-main);
}

/* Fix image placement across all pages */
img {
    max-width: 100%;
    height: auto;
}
.img-rounded,
.img-wrapper img,
.post-card img,
.card img {
    border-radius: var(--radius-lg);
    object-fit: cover;
    width: 100%;
}

/* Specifically remove rigid heights that break layouts */
.split-grid .img-wrapper {
    height: auto !important;
    aspect-ratio: 4 / 5;
}
.split-grid.reverse .img-wrapper {
    aspect-ratio: 1 / 1;
}

/* Ensure the hero doesn't squash */
.hero { background-image: url('/assets/images/ritual-river-sanctuary.png');
    background-size: cover;
    background-position: center;
}

/* Fix the FAQ accordion on all pages */
.faq-accordion details { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-accordion summary { font-family: var(--font-heading); font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); }
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after { content: '+'; font-size: 24px; color: var(--primary); }
.faq-accordion details[open] summary::after { content: '-'; }
.faq-accordion p { margin-top: 15px; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* Sub-page Grid Fixes */
.service-list, .feature-grid, .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.portraits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }

/* ENHANCE CIRCLE BUTTONS */
.circle-btn {
    width: 56px;
    height: 56px;
    border-radius: 50% !important;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
}
.circle-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* FIX IMAGE PLACEMENT TO PREVENT SQUASHING */
.img-rounded, .img-wrapper img, .post-card img, .card img {
    border-radius: var(--radius-lg);
    object-fit: cover !important;
    width: 100% !important;
}

/* Ensure buttons are never square */
.button, .outline {
    border-radius: 50px !important;
}

/* =========================================================================
   CHARACTER & SHAPES (Nir-vana style)
   ========================================================================= */
.img-arch {
    border-radius: 200px 200px 24px 24px !important;
    object-fit: cover !important;
    width: 100% !important;
}

.img-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important;
    object-fit: cover !important;
    width: 100% !important;
}

.overlap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
}
.overlap-grid .text-box {
    background: var(--bg-card);
    padding: 60px;
    border-radius: var(--radius-lg);
    z-index: 2;
    margin-left: -50px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.decorative-text {
    font-family: 'Jost', sans-serif;
    font-style: italic;
    color: var(--primary);
    font-weight: 500;
}

/* SQUARE & FULL BLEED OVERRIDES */
.img-square, .img-square img {
    border-radius: 0 !important;
}

.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0 !important;
}
.full-bleed img {
    border-radius: 0 !important;
}

/* SQUARE & FULL BLEED OVERRIDES */
.img-square, .img-square img {
    border-radius: 0 !important;
}

.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0 !important;
}
.full-bleed img {
    border-radius: 0 !important;
}

/* SMALL RADIUS FOR SERVICE PAGES */
.img-sm-radius {
    border-radius: 8px !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* =========================================================================
   TEXT HEADERS & MODAL
   ========================================================================= */
.page-header {
    padding: 180px 5% 80px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.page-header .breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.page-header .breadcrumb a { color: var(--primary); }
.page-header h1 { font-size: clamp(40px, 5vw, 65px); margin-bottom: 20px; line-height: 1.1; }
.page-header p.intro { font-size: 18px; color: var(--text-muted); max-width: 600px; margin-bottom: 40px; }

/* Booking Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

.booking-modal {
    background: #fcf9f6; /* warm light background */
    width: 90%;
    max-width: 600px;
    border-radius: var(--radius-md);
    padding: 50px;
    position: relative;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}
.modal-overlay.open .booking-modal { transform: translateY(0); }

.modal-close {
    position: absolute;
    top: 25px; right: 25px;
    background: transparent;
    border: none;
    font-size: 30px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.booking-modal h2 { font-size: 32px; margin-bottom: 10px; }
.booking-modal p { font-size: 15px; color: var(--text-muted); margin-bottom: 30px; }

.booking-modal .form-line { margin-bottom: 25px; }
.booking-modal label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.booking-modal input, .booking-modal select, .booking-modal textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    font-size: 16px;
    font-family: inherit;
    color: var(--text-main);
    outline: none;
}
.booking-modal input:focus, .booking-modal select:focus, .booking-modal textarea:focus { border-color: var(--primary); }

#booking-success {
    display: none;
    text-align: center;
    padding: 40px 0;
}

/* Final premium alignment: applied after legacy rules so every page shares one visual system. */

body{font-family:'Jost',sans-serif;background:var(--bg-color);color:var(--text-main)}h1,h2,h3,h4{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:-.04em}h1{line-height:.98}h2{line-height:1.03}.button:hover{background:var(--primary-hover);transform:translateY(-2px)}
.hero{border-radius:0;min-height:800px;padding:170px 11vw 110px;background-position:center}.hero::before{border-radius:0;background:linear-gradient(90deg,rgba(24,24,19,.79),rgba(24,24,19,.12))}.hero-copy{max-width:690px}.hero-copy h1{font-size:clamp(55px,6.5vw,94px)}.hero-copy p:not(.eyebrow){max-width:510px;font-size:16px;line-height:1.75}.hero-copy .eyebrow{color:#d6c7ea;font-size:10px;letter-spacing:.21em}
.section{padding:130px max(6vw,36px)}.section-alt{background:var(--bg-alt)}.cards-wrapper{background:transparent;border-radius:0;padding:54px 0 0;gap:0;border-top:1px solid var(--text-main)}.card-line{padding:0 38px;text-align:left}.card-line:first-child{padding-left:0}.card-line:not(:last-child)::after{right:0;top:0;height:100%;background:var(--border)}.cards-wrapper h3{font-size:30px;line-height:1.08}.service-icon{width:84px;height:68px!important;background-image:url('/assets/spirit-mode-service-icons.png')!important;background-size:300% auto!important;background-repeat:no-repeat!important;filter:none!important;margin-bottom:27px!important}.icon-guidance{background-position:0 center!important}.icon-cleansing{background-position:50% center!important}.icon-alignment{background-position:100% center!important}.counters{border-top:1px solid var(--border);padding-top:47px}.counters h3{font-family:'Jost',sans-serif;font-size:52px}.counters p{font-size:10px;letter-spacing:.13em}
.split-grid{gap:9vw}.img-wrapper,.post-card img,.full-bleed{border-radius:0!important}.img-arch{border-radius:180px 180px 0 0!important}.decorative-text{font-family:'Jost',sans-serif;color:var(--primary)!important}.quote-section{max-width:900px}.quote-text{font-family:'Jost',sans-serif;font-size:clamp(28px,3.4vw,48px);line-height:1.22}.post-card img{filter:saturate(.72) contrast(1.03)}.post-card h3{font-size:27px;line-height:1.13}.pre-footer{background:#3d2847!important;color:#ffffff}.pre-footer h2,.pre-footer p{color:#ffffff!important}.pre-footer .outline{border-color:#ffffff;color:#ffffff}
@media(max-width:900px){.hero{min-height:710px;padding:145px 8vw 80px}.section{padding:82px 7vw}.cards-wrapper{padding-top:26px}.card-line,.card-line:first-child{padding:28px 0}.card-line:not(:last-child)::after{top:auto;bottom:0;width:100%;height:1px}.counters{gap:25px}.counters>div{width:42%}.service-icon{width:76px;height:62px!important}.split-grid{gap:42px}}

@media(max-width: 600px) {
    .booking-modal {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 40px 20px;
    }
}

/* Photo treatment: crisp editorial edges, never large rounded cards. */
.img-wrapper,.img-wrapper img,.post-card img,.full-bleed,.full-bleed img,
.img-rounded,.img-sm-radius,.quote-avatar,.gallery img,figure,img{border-radius:0!important}
/* An arch is an intentional portrait crop, not a generic card radius. */
.img-arch{border-radius:180px 180px 0 0!important}
@media(max-width:600px){.img-arch{border-radius:110px 110px 0 0!important}}

/* Conversion and navigation refinement */
.page-header{display:block!important;border:0!important;min-height:0!important;background:var(--bg-alt);padding:180px max(7vw,38px) 105px!important;text-align:left}.page-header .breadcrumb{font-size:10px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:36px}.page-header h1{max-width:830px;margin:0 0 24px}.page-header .intro{max-width:620px;font-size:17px;margin-bottom:32px}.desktop-nav a{margin:0!important}.desktop-nav{gap:28px!important}.dropdown{display:flex;align-items:center;gap:5px}.services-toggle{border:0;background:transparent;color:inherit;font:18px/1 Arial;cursor:pointer;padding:8px;transition:transform .25s}.dropdown:focus-within .services-toggle,.dropdown:hover .services-toggle{transform:rotate(180deg)}.dropdown-content{display:grid!important;grid-template-columns:1fr 1fr;gap:0;min-width:470px;top:calc(100% + 20px);left:50%;transform:translate(-50%,-8px);padding:22px!important;border:1px solid var(--border)!important;border-radius:0!important;background:#ffffff!important;box-shadow:0 18px 45px rgba(26,25,20,.13)!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}.dropdown:hover .dropdown-content,.dropdown:focus-within .dropdown-content,.dropdown.open .dropdown-content{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.dropdown-content .dropdown-label{grid-column:span 2;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;color:var(--text-muted)}.dropdown-content a{padding:13px 10px!important;font-family:'Jost',sans-serif!important;font-size:18px!important;border-bottom:1px solid var(--border)}.dropdown-content a small{font:600 9px 'Jost',sans-serif;letter-spacing:.12em;color:var(--accent);margin-right:8px}.dropdown-content .menu-all{grid-column:span 2;border:0;padding:17px 10px 0!important;font:600 10px 'Jost',sans-serif!important;letter-spacing:.12em;text-transform:uppercase}.dropdown-content .menu-all b{float:right}.faq-home{display:grid;grid-template-columns:.85fr 1.15fr;gap:10vw;background:#ffffff}.faq-heading h2{margin:15px 0}.faq-heading p:not(.eyebrow){max-width:380px}.faq-accordion details{border-bottom:1px solid var(--border);padding:20px 0}.faq-accordion summary{font-family:'Jost',sans-serif;font-size:21px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq-accordion summary::after{content:'+';font-family:'Jost',sans-serif;color:var(--accent)}.faq-accordion details[open] summary::after{content:'−'}.faq-accordion details p{margin:14px 35px 0 0}.faq-accordion summary:focus-visible,.services-toggle:focus-visible,.guide-launcher:focus-visible,.guide-options button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.guide-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:30px;cursor:pointer}.booking-guide h2{font-size:38px;margin:10px 0 14px}.guide-intro{font-size:14px}.guide-prompt{font:500 22px 'Jost',sans-serif;color:var(--text-main)!important;margin:28px 0 14px}.guide-options{display:grid;gap:8px}.guide-options button,.guide-restart{background:transparent;border:1px solid var(--border);padding:13px;text-align:left;font:500 13px 'Jost',sans-serif;color:var(--text-main);cursor:pointer}.guide-options button:hover{border-color:var(--primary);background:var(--bg-alt)}.guide-summary{border-left:3px solid var(--accent);padding:6px 15px;margin:10px 0 25px}.guide-summary strong{display:block;font:500 26px 'Jost',sans-serif}.guide-summary span{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.guide-summary p{margin:12px 0 0;font-size:13px}.guide-actions{display:flex;gap:10px;align-items:center}.guide-actions .outline{padding:15px 12px}.guide-restart{margin-top:15px;border:0;padding:0;text-decoration:underline;font-size:11px}.guide-privacy{margin:28px 0 0;font-size:10px;color:var(--text-muted)}
.service-visual{height:min(48vw,620px);min-height:300px;overflow:hidden;background:var(--bg-alt)}.service-visual img{width:100%;height:100%;object-fit:cover;border-radius:0!important}
@media(max-width:1050px){.desktop-nav{gap:16px!important}.header-container{padding:0 24px}.header-btn{padding:11px 12px!important}}@media(max-width:900px){.page-header{padding:135px 7vw 72px!important}.faq-home{grid-template-columns:1fr;gap:35px}.dropdown-content{display:none!important}.booking-guide{margin:0 0 12px auto;max-height:86vh}.guide-actions{flex-wrap:wrap}}

.dropdown::before {
    content: '';
    position: absolute;
    top: 100%; left: 0; right: 0; height: 30px;
    background: transparent;
    z-index: 999;
}

/* =========================================================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS
   ========================================================================= */

/* Mobile Menu Overlay Styles */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-main);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    visibility: hidden;
    overflow-y: auto;
}
.mobile-menu-overlay.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
.menu-toggle-close {
    background: transparent;
    border: none;
    font-size: 44px;
    line-height: 1;
    color: var(--text-main);
    cursor: pointer;
    transition: transform 0.3s;
}
.menu-toggle-close:hover { transform: rotate(90deg); color: var(--primary); }

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.mobile-nav-links a {
    font-size: 32px;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.3s, transform 0.3s;
    font-family: 'Jost', sans-serif;
    letter-spacing: -0.02em;
}
.mobile-nav-links > a:hover {
    color: var(--primary);
    transform: translateX(10px);
}
.mobile-subnav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 20px;
    margin-top: -5px;
    margin-bottom: 15px;
    border-left: 2px solid var(--border);
}
.mobile-subnav a {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 400;
    padding: 8px 0 8px 15px;
}
.mobile-subnav a:hover {
    color: var(--primary);
    transform: translateX(5px);
}
.mobile-menu-footer {
    margin-top: 40px;
    padding-bottom: 30px;
    border-top: 1px solid var(--border);
    padding-top: 30px;
}
.mobile-menu-footer .button {
    font-size: 16px;
    height: 54px;
    border-radius: 50px;
}

@media(max-width: 900px) {
    /* Header Fixes */
    .header-container { 
        display: flex !important; 
        justify-content: space-between !important; 
        padding: 0 20px !important; 
    }
    .header-center { display: none !important; } /* Remove empty center space on mobile */
    .header-right { margin-left: auto; }
    
    /* Typography Scaling */
    .page-header { padding: 120px 20px 60px !important; }
    .page-header h1 { font-size: 38px !important; }
    h1 { font-size: 42px !important; }
    h2 { font-size: 32px !important; }
    
    /* Layout Collapsing */
    .split-grid, .overlap-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .overlap-grid.reverse .img-wrapper { order: -1 !important; }
    .overlap-grid .text-box {
        margin: 0 !important;
        transform: translateY(-40px) !important;
        position: relative;
        z-index: 10;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .grid-3 { grid-template-columns: 1fr !important; }
    
    /* Cards and Columns */
    .cards-wrapper {
        grid-template-columns: 1fr !important;
        padding: 0 20px !important;
    }
    
    /* Service Pricing Cards */
    div[style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Cleansing specific horizontal cards to vertical */
    div[style*="grid-template-columns:1.5fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Forms */
    .form-grid { grid-template-columns: 1fr !important; }
    
    /* Modals */
    .booking-modal {
        padding: 30px 20px !important;
    }
    .booking-modal div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================================
   FINAL THEME LOCK  (cosmic violet / blue). Keep this block LAST.
   ========================================================================= */
:root {
    --primary: #6f3b87; --primary-hover: #4e2960;
    --accent: #008bc4; --accent-hover: #0077a8; --accent-light: #a7b5d1;
    --bg-color: #f6f7fb; --bg-main: #f6f7fb; --bg-alt: #eceef6; --bg-card: #ffffff;
    --text-main: #3d2847; --text-muted: #3a599b; --border: rgba(61,40,71,.12);
    --radius-lg: 24px; --radius-md: 12px; --radius-sm: 8px;
    --font-heading: 'Jost', sans-serif; --font-body: 'Jost', sans-serif;
}
body { font-family: var(--font-body); background: var(--bg-color); color: var(--text-main); }
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -.03em; color: var(--text-main); }
.hero h1, .hero-copy h1, .pre-footer h2 { color: #fff; }

/* Buttons: soft pills */
.button, .outline, .header-btn {
    border-radius: 50px !important; font-family: var(--font-body);
    text-transform: none; letter-spacing: .01em; font-size: 15px; font-weight: 500;
    box-shadow: none !important;
}
.button { background: var(--primary); color: #fff; padding: 15px 30px; display: inline-flex; align-items: center; justify-content: center; }
.button:hover { background: var(--primary-hover); }
.outline { border: 1px solid var(--primary); color: var(--primary); background: transparent; padding: 14px 28px; display: inline-flex; align-items: center; justify-content: center; }
.outline:hover { background: var(--primary); color: #fff; }

/* Navbar */
#site-header { padding: 0 !important; }
.brand { font-family: var(--font-heading); font-size: 28px !important; letter-spacing: -.03em !important; }
.desktop-nav { gap: 38px !important; }
.desktop-nav a { font-size: 15px !important; letter-spacing: 0 !important; }
.header-btn { background: var(--primary) !important; color: #fff !important; border: 0 !important; height: 48px; padding: 0 26px !important; font-size: 14px !important; letter-spacing: 0 !important; }
.header-btn:hover { background: var(--primary-hover) !important; }

/* Services dropdown: compact, single column, stays open while moving the mouse */
.dropdown { position: relative; display: block; }
.dropdown::before { content:''; position:absolute; left:-20px; right:-20px; top:100%; height:26px; }
.dropdown-content {
    display: flex !important; flex-direction: column; min-width: 250px !important; padding: 14px 0 !important;
    top: 100% !important; margin-top: 14px; left: 50%; transform: translate(-50%, 6px) !important;
    background: #fff !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(61,40,71,.12) !important;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s;
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) !important;
}
.dropdown-content a { padding: 11px 26px !important; font-family: var(--font-body) !important; font-size: 15px !important; border: 0 !important; color: var(--text-main) !important; }
.dropdown-content a:hover { background: var(--bg-alt); color: var(--primary) !important; }

/* Floating pill buttons */
.circle-btn { border-radius: 50px !important; background: #fff; color: var(--text-main); }
.circle-btn:hover { background: var(--primary) !important; color: #fff; }

/* Images: small radius on service content, arches stay arches, full-bleed stays square */
.img-sm-radius { border-radius: 8px !important; }
.img-wrapper img.img-sm-radius { border-radius: 8px !important; }

/* Dark sections use the deep eggplant */
.pre-footer, footer, .site-footer { background: #3d2847 !important; }
.eyebrow { color: var(--text-muted); font-family: var(--font-body); }


/* =========================================================================
   LAYOUT LOCK: navbar, heroes, page headers, mobile menu. Keep LAST.
   ========================================================================= */
:root { --header-h: 88px; --gutter: clamp(24px, 4vw, 56px); }

/* ---------- Navbar: full width, Brand | Nav | CTA, never overlapping ---------- */
#site-header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%;
    display: block !important; padding: 0 !important; z-index: 1000;
    background: var(--bg-color); border-bottom: 1px solid var(--border);
    transition: background .3s, border-color .3s, box-shadow .3s;
}
#site-header.is-home:not(.scrolled) { background: transparent; border-bottom-color: transparent; }
#site-header.scrolled { box-shadow: 0 2px 12px rgba(61,40,71,.06); }
#site-header .header-container {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px;
    width: 100%; max-width: none; margin: 0; padding: 0 var(--gutter); height: var(--header-h);
    transition: height .3s;
}
#site-header.scrolled .header-container { height: 76px; }
.header-left { justify-self: start; min-width: 0; }
.header-center { justify-self: center; }
.header-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
#site-header .brand { white-space: nowrap; font-size: 26px !important; line-height: 1; letter-spacing: -.02em !important; }
#site-header .desktop-nav { display: flex; align-items: center; gap: 36px !important; white-space: nowrap; }
#site-header .header-btn { white-space: nowrap; flex-shrink: 0; height: 46px; padding: 0 24px !important; font-size: 14px !important; }

.menu-toggle {
    display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-main);
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: background .3s; }
#site-header.is-home:not(.scrolled) .menu-toggle { color: #fff; }

/* The full navbar needs ~1000px; below 1180px switch to the hamburger */
@media (max-width: 1180px) {
    #site-header .header-container { display: flex; justify-content: space-between; height: 72px; }
    #site-header.scrolled .header-container { height: 68px; }
    .header-center, #site-header .header-btn { display: none !important; }
    .menu-toggle { display: flex; }
    :root { --header-h: 72px; }
}

/* ---------- Mobile menu (opened with .open by the footer script) ---------- */
.mobile-menu-overlay {
    position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column;
    padding: 20px var(--gutter) 28px; background: var(--bg-color); overflow-y: auto;
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility 0s linear .5s;
}
.mobile-menu-overlay.open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 36px; }
.mobile-menu-top .brand { font-size: 24px; color: var(--text-main); }
.close-menu {
    position: static !important; width: 44px; height: 44px; background: transparent; border: 0;
    font-size: 38px; line-height: 1; color: var(--text-main); cursor: pointer; transition: transform .3s, color .3s;
}
.close-menu:hover { transform: rotate(90deg); color: var(--primary); }
.mobile-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mobile-nav > a {
    font-family: var(--font-heading); font-size: 32px; font-weight: 500; letter-spacing: -.02em;
    color: var(--text-main); padding: 12px 0; border-bottom: 1px solid var(--border); transition: color .25s, padding-left .25s;
}
.mobile-nav > a:hover, .mobile-nav > a.active { color: var(--primary); padding-left: 8px; }
.sub-nav { display: flex; flex-direction: column; margin: 4px 0 8px 4px; padding-left: 18px; border-left: 2px solid var(--primary); gap: 2px; }
.sub-nav a { font-size: 18px; color: var(--text-muted); padding: 9px 0; }
.sub-nav a:hover { color: var(--primary); }
.mobile-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.mobile-actions .button, .mobile-actions .outline { width: 100%; height: 52px; }

/* ---------- Headings: calmer scale ---------- */
h1 { font-size: clamp(34px, 4vw, 56px) !important; line-height: 1.08; }
h2 { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.12; }
h3 { font-size: clamp(20px, 2vw, 26px); }

/* ---------- Home hero = exactly one screen; other heroes are compact ---------- */
.hero {
    position: relative; display: flex !important; flex-direction: column; justify-content: center;
    min-height: 56vh !important; height: auto; border-radius: 0 !important;
    padding: calc(var(--header-h) + 48px) clamp(24px, 8vw, 120px) 72px !important;
    background-size: cover; background-position: center;
}
.hero.hero-home { min-height: 100vh !important; min-height: 100svh !important; height: 100vh; height: 100svh; padding-bottom: 90px !important; }
.hero::before { background: linear-gradient(90deg, rgba(61,40,71,.80), rgba(61,40,71,.25)) !important; }
.hero-copy h1 { font-size: clamp(38px, 5vw, 72px) !important; line-height: 1.04; max-width: 15ch; }
.hero-copy p:not(.eyebrow) { font-size: clamp(16px, 1.4vw, 19px) !important; margin: 20px 0 34px !important; max-width: 520px; }
.hero.hero-sub .hero-copy h1 { font-size: clamp(34px, 4vw, 54px) !important; }

/* ---------- Page headers: full-width band, compact, aligned with the navbar ---------- */
.page-header {
    display: block !important; width: 100%; max-width: none !important; margin: 0 !important;
    padding: calc(var(--header-h) + 44px) var(--gutter) 56px !important;
    background: var(--bg-alt); border: 0 !important; border-bottom: 1px solid var(--border) !important; min-height: 0 !important;
}
.page-header .breadcrumb { margin-bottom: 18px !important; }
.page-header h1 { font-size: clamp(32px, 3.6vw, 52px) !important; margin: 0 0 14px !important; max-width: 20ch; }
.page-header .intro { font-size: 17px; max-width: 620px; margin: 0 0 26px !important; }
.page-header .split-grid { gap: clamp(28px, 5vw, 64px) !important; align-items: start !important; }
.page-header .contact-meta { padding: 26px 30px !important; }
.page-header .contact-meta > div { margin-bottom: 14px !important; }
.page-header .contact-meta > div:last-child { margin-bottom: 0 !important; }

/* Section rhythm */
.section { padding: clamp(60px, 7vw, 100px) clamp(24px, 5vw, 72px) !important; }

@media (max-width: 900px) {
    .hero { padding: calc(var(--header-h) + 32px) 24px 56px !important; }
    .hero.hero-home { padding-bottom: 64px !important; }
    .page-header { padding: calc(var(--header-h) + 28px) var(--gutter) 40px !important; }
    .page-header h1, h1 { font-size: clamp(30px, 8vw, 38px) !important; }
    .hero-copy h1 { font-size: clamp(34px, 9vw, 46px) !important; max-width: none; }
}


/* =========================================================================
   HERO ALIGNMENT + SERVICE CARDS. Keep LAST.
   ========================================================================= */
/* Only the home page has a hero. It is full screen and left aligned. */
.hero.hero-home {
    align-items: flex-start !important;     /* column flex: this is the horizontal axis */
    justify-content: center;
    text-align: left !important;
}
.hero.hero-home .hero-copy { margin: 0 !important; max-width: 680px; text-align: left; }
.hero.hero-home .hero-copy h1 { max-width: 14ch; }
.hero.hero-home .hero-copy .eyebrow { color: #d6c7ea !important; }

/* Home "what we do" cards: centre icon, title, text and link */
.cards-wrapper .card-line {
    display: flex; flex-direction: column; align-items: center; text-align: center !important;
    padding: 0 28px !important;
}
.cards-wrapper .card-line:first-child { padding-left: 28px !important; }
.cards-wrapper .service-icon, .cards-wrapper .card-icon {
    margin-left: auto !important; margin-right: auto !important;
    background-position-y: center;
}
.cards-wrapper .card-line h3 { text-align: center; }
.cards-wrapper .card-line p { max-width: 280px; margin-left: auto; margin-right: auto; }
.cards-wrapper .card-line > a { margin-top: auto; }
@media (max-width: 900px) {
    .cards-wrapper .card-line { padding: 28px 0 !important; }
}


/* =========================================================================
   SERVICES SYSTEM: overview, category and service pages share one language.
   Numbered editorial rows, thin dividers, plain arrows, small-radius imagery.
   ========================================================================= */
.svc-index, .svc-catalogue, .svc-note, .svc-facts, .svc-sec, .svc-cta { padding-left: var(--gutter); padding-right: var(--gutter); }
.svc-num { font-size: 13px; letter-spacing: .16em; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.svc-arrow { display: inline-block; font-weight: 400; font-size: 1.1em; color: var(--primary); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.svc-link { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--text-main); }

/* ---------- Level 1: category rows ---------- */
.svc-index { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(24px, 4vw, 48px); }
.svc-row {
    position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) clamp(200px, 22vw, 320px) 90px;
    align-items: center; column-gap: clamp(20px, 3vw, 48px);
    padding: clamp(30px, 3.6vw, 52px) 0; border-top: 1px solid var(--border); color: var(--text-main);
}
.svc-row:last-child { border-bottom: 1px solid var(--border); }
.svc-main .eyebrow { margin-bottom: 8px; font-size: 12px; letter-spacing: .18em; }
.svc-row h2 { margin: 0 0 12px; transition: color .3s; }
.svc-row .svc-main p:not(.eyebrow) { max-width: 52ch; margin: 0 0 18px; color: var(--text-muted); font-size: 16px; }
.svc-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--bg-alt); }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8) contrast(1.02); transform: scale(1.01); transition: filter .6s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.svc-count { justify-self: end; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.svc-row:hover h2, .svc-row:focus-visible h2 { color: var(--primary); }
.svc-row:hover .svc-arrow, .svc-item:hover .svc-arrow, .svc-more-list a:hover .svc-arrow { transform: translateX(8px); }
.svc-row:hover .svc-thumb img { filter: none; transform: scale(1.06); }

/* ---------- Level 2: catalogue ---------- */
.svc-catalogue {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px);
}
.svc-feature { position: sticky; top: calc(var(--header-h) + 28px); margin: 0; }
.svc-feature-frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--bg-alt); }
.svc-feature img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.svc-feature figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.svc-item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 24px; align-items: start;
    padding: clamp(24px, 2.6vw, 34px) 0; border-top: 1px solid var(--border); color: var(--text-main);
}
.svc-item:last-child { border-bottom: 1px solid var(--border); }
.svc-item h3 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.02em; transition: color .3s; }
.svc-item .svc-main p { margin: 0 0 10px; color: var(--text-muted); font-size: 16px; max-width: 54ch; }
.svc-item .svc-main .svc-meta { margin: 0; font-size: 13px; letter-spacing: .06em; font-weight: 500; color: var(--text-main); }
.svc-go { display: flex; align-items: center; gap: 10px; padding-top: 6px; white-space: nowrap; }
.svc-item:hover h3, .svc-item:focus-visible h3 { color: var(--primary); }

.svc-note { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); background: var(--bg-alt); }
.svc-note h2 { margin: 6px 0 10px; }
.svc-note p:not(.eyebrow) { max-width: 52ch; color: var(--text-muted); margin: 0; }
.svc-note-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Level 3: service page ---------- */
.svc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.svc-facts > div { padding: 28px 24px 28px 0; border-right: 1px solid var(--border); margin-right: 24px; }
.svc-facts > div:last-child { border-right: 0; margin-right: 0; }
.svc-facts span { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.svc-facts strong { display: block; font-weight: 500; font-size: 16px; line-height: 1.45; }

.svc-sec { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 80px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--border); }
.svc-sec > .eyebrow { margin: 4px 0 0; font-size: 12px; letter-spacing: .18em; }
.svc-lead { margin: 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; max-width: 62ch; }
.svc-small { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.svc-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.svc-ticks li { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 17px; }
.svc-ticks li:first-child { padding-top: 0; }
.svc-ticks li:last-child { border-bottom: 0; }
.svc-ticks li::before { content: '\2014'; color: var(--primary); margin-right: 14px; }
.svc-expect p { display: grid; grid-template-columns: 44px 1fr; margin: 0 0 18px; font-size: 17px; max-width: 62ch; }
.svc-expect span { font-size: 13px; letter-spacing: .14em; color: var(--text-muted); padding-top: 4px; }

.svc-prac-list { display: grid; }
.svc-prac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 32px; padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.svc-prac:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.svc-prac h3 { margin: 0 0 4px; font-size: clamp(22px, 2.2vw, 28px); }
.svc-role { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; }
.svc-best-label { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.svc-best { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.svc-best li { font-size: 15px; }
.svc-best li::before { content: '\2014'; color: var(--primary); margin-right: 8px; }
.svc-price { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.svc-price strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.02em; color: var(--primary); line-height: 1.15; }
.svc-price span { margin-bottom: 14px; font-size: 14px; color: var(--text-muted); }

.svc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.svc-steps > div { border-top: 2px solid var(--primary); padding-top: 18px; }
.svc-steps span { font-size: 13px; letter-spacing: .14em; color: var(--text-muted); }
.svc-steps h3 { margin: 8px 0 8px; font-size: 19px; letter-spacing: -.01em; }
.svc-steps p { margin: 0; font-size: 15px; color: var(--text-muted); }

.svc-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); background: var(--text-main); }
.svc-cta .eyebrow { color: #d6c7ea; margin: 0 0 8px; }
.svc-cta h2 { margin: 0; color: #fff; }
.svc-cta .button { background: #fff; color: var(--text-main) !important; }
.svc-cta .button:hover { background: var(--accent-light); }

.svc-more-list { display: grid; }
.svc-more-list a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); font-size: 18px; color: var(--text-main); transition: color .3s; }
.svc-more-list a:last-child { border-bottom: 1px solid var(--border); }
.svc-more-list a:hover { color: var(--primary); }
.svc-sec .faq-accordion { max-width: 760px; }
.svc-sec.svc-more { border-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .svc-row { grid-template-columns: 56px minmax(0, 1fr) clamp(160px, 24vw, 240px); }
    .svc-count { display: none; }
    .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-facts > div { border-bottom: 1px solid var(--border); }
    .svc-facts > div:nth-child(2n) { border-right: 0; margin-right: 0; }
}
@media (max-width: 900px) {
    .svc-catalogue { grid-template-columns: 1fr; }
    .svc-feature { display: none; }
    .svc-sec { grid-template-columns: 1fr; gap: 20px; }
    .svc-prac { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 700px) {
    .svc-row { grid-template-columns: 1fr; row-gap: 6px; padding: 28px 0; }
    .svc-row .svc-num { display: none; }
    .svc-thumb { display: none; }
    .svc-item { grid-template-columns: 40px minmax(0, 1fr); }
    .svc-go { grid-column: 2; padding-top: 8px; }
    .svc-facts { grid-template-columns: 1fr; }
    .svc-facts > div { border-right: 0; margin-right: 0; padding: 20px 0; }
    .svc-steps { grid-template-columns: 1fr; }
    .svc-cta .button, .svc-note-actions .button, .svc-note-actions .outline { width: 100%; }
}


/* --- LEVEL 3 EDITORIAL STYLING (NEW) --- */
.svc-editorial-sec {
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: clamp(24px, 5vw, 80px);
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--border);
}

.ed-left .eyebrow {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: .18em;
    position: sticky;
    top: 100px;
}

.ed-heading {
    margin: 0 0 24px;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 400;
    line-height: 1.3;
    color: var(--primary);
}

.overview-sec .svc-lead {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.7;
    max-width: 65ch;
    color: var(--text-main);
    margin: 0;
}

.suit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.suit-card {
    background: var(--bg-alt);
    padding: 24px;
    border-radius: 4px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.suit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    border-color: var(--border);
}

.suit-icon {
    color: var(--accent);
    font-size: 16px;
    padding-top: 2px;
}

.suit-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-main);
}

.expect-list {
    display: grid;
    gap: 0;
}

.expect-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
}

.expect-item:first-child {
    padding-top: 0;
}

.expect-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.expect-num {
    font-size: clamp(48px, 5vw, 64px);
    line-height: 1;
    font-weight: 300;
    color: var(--border);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.expect-item:hover .expect-num {
    color: var(--primary);
}

.expect-text p {
    margin: 0;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.6;
    max-width: 62ch;
    padding-top: 10px;
}

@media (max-width: 900px) {
    .svc-editorial-sec {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ed-left .eyebrow {
        position: static;
        margin-bottom: 8px;
    }
    .expect-item {
        grid-template-columns: 60px 1fr;
        gap: 16px;
    }
    .expect-num {
        font-size: 40px;
    }
}

/* --- 2-COLUMN LEVEL 1 (SERVICES OVERVIEW) --- */
.svc-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: clamp(40px, 6vw, 80px) var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
}

.svc-card-pro {
    display: flex;
    flex-direction: column;
    background: var(--bg-alt, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-main);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.svc-card-pro:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--primary);
}

.svc-card-img {
    position: relative;
    height: 320px;
    overflow: hidden;
}

.svc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.svc-card-pro:hover .svc-card-img img {
    transform: scale(1.05);
}

.svc-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

.svc-card-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.svc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.svc-num-accent {
    font-size: 16px;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.svc-count-pill {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--bg);
    padding: 6px 12px;
    border-radius: 20px;
    color: var(--text-muted);
}

.svc-card-content h2 {
    margin: 0 0 16px;
    font-size: clamp(24px, 2.5vw, 32px);
}

.svc-card-content p {
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    flex-grow: 1;
}

.svc-link-btn {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}
.svc-link-btn b { margin-left: 8px; transition: transform 0.3s; }
.svc-card-pro:hover .svc-link-btn b { transform: translateX(6px); }


/* --- LEVEL 2 (CATEGORY / PROGRAMS) DYNAMIC LAYOUT --- */
.dynamic-header {
    max-width: 1400px;
    margin: 0 auto;
}
.header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}
.header-image-accent {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,0.1);
}
.header-image-accent img {
    width: 100%;
    height: auto;
    display: block;
}

.svc-timeline-sec {
    background: var(--bg-alt);
    padding: 60px var(--gutter);
    margin: 60px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 24px; left: 50px; right: 50px;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.timeline-step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--bg-alt);
    padding: 0 20px;
}
.step-icon {
    width: 50px; height: 50px;
    margin: 0 auto 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 0 8px var(--bg-alt);
}
.timeline-step h4 { margin: 0 0 12px; font-size: 18px; color: var(--text-main); }
.timeline-step p { margin: 0; font-size: 15px; color: var(--text-muted); }

.svc-programs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 0 var(--gutter) 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.program-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s, box-shadow 0.4s;
    min-height: 260px;
}
.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.06);
}
.prog-image {
    width: 40%;
    position: relative;
    overflow: hidden;
}
.prog-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}
.program-card:hover .prog-image img { transform: scale(1.08); }
.prog-icon-badge {
    position: absolute;
    top: 20px; left: 20px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-size: 18px;
}
.prog-content {
    width: 60%;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.prog-meta { margin-bottom: 12px; }
.prog-format {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    background: rgba(111, 59, 135, 0.1); color: var(--primary);
    padding: 4px 10px; border-radius: 4px; font-weight: 600;
}
.prog-content h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.prog-content p { margin: 0 0 20px; font-size: 15px; color: var(--text-muted); flex-grow: 1; }
.prog-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    font-size: 14px; font-weight: 600; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.prog-arrow { transition: transform 0.3s; }
.program-card:hover .prog-arrow { transform: translateX(6px); }

@media (max-width: 1024px) {
    .svc-grid-2col, .svc-programs-grid, .header-grid { grid-template-columns: 1fr; }
    .timeline-container { grid-template-columns: 1fr; gap: 40px; }
    .timeline-container::before { display: none; }
    .program-card { height: auto; flex-direction: column; }
    .prog-image, .prog-content { width: 100%; }
    .prog-image { height: 240px; }
}


/* --- LEVEL 3: INDIVIDUAL SERVICE DYNAMIC LAYOUT --- */
.dynamic-svc-header {
    background: var(--bg-alt);
    padding: clamp(60px, 8vw, 100px) var(--gutter);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.svc-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.svc-header-text .eyebrow {
    margin: 24px 0 16px;
    font-weight: 600;
    color: var(--primary);
}
.svc-header-text h1 {
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
}
.lead-text {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 40px;
    max-width: 600px;
}
.quick-facts-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.qf-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.qf-icon { color: var(--primary); font-size: 16px; }

.svc-header-img {
    position: relative;
}
.svc-header-img img {
    width: 100%;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 48px rgba(0,0,0,0.15);
}
.img-accent-border {
    position: absolute;
    inset: -20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    z-index: 1;
    transform: translate(20px, 20px);
}

.svc-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: clamp(40px, 6vw, 80px);
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(60px, 8vw, 100px) var(--gutter);
}

.svc-content-block {
    margin-bottom: 60px;
}
.svc-content-block.bg-accent {
    background: var(--bg-alt);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.block-title {
    font-size: 28px;
    margin: 0 0 32px;
    color: var(--text-main);
    font-weight: 500;
}
.large-body {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.7;
    color: var(--text-muted);
}

.suit-grid-dynamic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.suit-item {
    display: flex;
    gap: 16px;
}
.suit-check {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.suit-item p { margin: 0; font-size: 16px; line-height: 1.5; padding-top: 2px; }

/* Timeline */
.vertical-timeline {
    position: relative;
    padding-left: 24px;
}
.vertical-timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: var(--border);
}
.v-timeline-item {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    position: relative;
}
.v-timeline-item:last-child { margin-bottom: 0; }
.v-timeline-marker {
    background: #fff;
    position: relative;
    z-index: 2;
    padding: 10px 0;
}
.v-num {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    background: var(--bg-alt);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: -29px;
    box-shadow: 0 0 0 8px #fff;
}
.v-timeline-content {
    padding-top: 14px;
}
.v-timeline-content p {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-main);
}

/* Sticky Booking Card */
.svc-sidebar {
    position: relative;
}
.sticky-booking-card {
    position: sticky;
    top: 120px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.06);
}
.sticky-booking-card h3 {
    margin: 0 0 32px;
    font-size: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 24px;
}
.sidebar-facts {
    display: grid;
    gap: 20px;
    margin-bottom: 32px;
}
.sb-fact span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.sb-fact strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
}
.sb-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.prac-offer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: var(--bg-alt);
    border-radius: 6px;
    margin-bottom: 12px;
}
.prac-info strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.prac-note {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
}
.prac-price {
    font-weight: 600;
    font-size: 15px;
    color: var(--primary);
    text-align: right;
}
.full-width-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 32px;
    padding: 18px;
    font-size: 16px;
}

/* FAQs */
.faq-accordion details {
    border-bottom: 1px solid var(--border);
}
.faq-accordion summary {
    padding: 24px 0;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after {
    content: '+';
    font-size: 24px;
    color: var(--primary);
    transition: transform 0.3s;
}
.faq-accordion details[open] summary::after {
    transform: rotate(45deg);
}
.faq-body {
    padding-bottom: 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .svc-header-inner, .svc-layout-grid {
        grid-template-columns: 1fr;
    }
    .img-accent-border { display: none; }
    .sticky-booking-card {
        position: relative;
        top: 0;
    }
    .v-num { margin-left: -32px; }
}

/* --- TESTIMONIALS SECTION --- */
.testimonial-sec {
    background: var(--bg-alt);
    padding: clamp(60px, 8vw, 100px) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.testimonial-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.testimonial-header {
    text-align: center;
    margin-bottom: 60px;
}
.testimonial-header h2 {
    font-size: clamp(32px, 4vw, 48px);
    margin: 12px 0 0;
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.testi-card {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,0.04);
    position: relative;
    transition: transform 0.3s;
}
.testi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.08);
}
.quote-mark {
    font-size: 80px;
    line-height: 1;
    color: var(--primary);
    opacity: 0.15;
    position: absolute;
    top: 20px;
    left: 24px;
    font-family: Georgia, serif;
}
.testi-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0 0 24px;
    position: relative;
    z-index: 2;
    font-style: italic;
}
.testi-author {
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px;
}

/* --- PRACTITIONERS PAGES --- */
.prac-grid-sec {
    max-width: 1400px;
    margin: 60px auto 100px;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
.prac-card-large {
    display: flex;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s, box-shadow 0.4s;
}
.prac-card-large:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.08);
    border-color: var(--primary);
}
.prac-img-wrapper {
    width: 40%;
    position: relative;
    overflow: hidden;
}
.prac-img-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}
.prac-card-large:hover .prac-img-wrapper img {
    transform: scale(1.05);
}
.prac-card-body {
    width: 60%;
    padding: 40px;
    display: flex;
    flex-direction: column;
}
.prac-card-body h2 {
    margin: 0 0 8px;
    font-size: 28px;
}
.prac-role {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    margin: 0 0 24px;
}
.prac-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    flex-grow: 1;
}
.spec-tag {
    background: #fff;
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
}
.prac-explore-btn {
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.prac-detail-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: clamp(40px, 8vw, 100px);
    max-width: 1400px;
    margin: 80px auto;
    padding: 0 var(--gutter);
}
.prac-image-sidebar img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.1);
    position: sticky;
    top: 100px;
}
.prac-info-main {
    padding-top: 20px;
}
.prac-info-main .eyebrow {
    color: var(--primary);
    margin: 24px 0 16px;
}
.prac-info-main h1 {
    font-size: clamp(40px, 5vw, 64px);
    margin: 0 0 40px;
    line-height: 1.1;
}
.prac-bio-content .large-body {
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.6;
    margin-bottom: 24px;
    color: var(--text-main);
}
.prac-bio-content p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.prac-specialty-list {
    margin: 48px 0;
    padding: 32px;
    background: var(--bg-alt);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.prac-specialty-list h3 { margin: 0 0 24px; font-size: 22px; }
.prac-specialty-list ul {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.prac-specialty-list li {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.check-icon {
    background: var(--primary);
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.prac-action-box {
    border-top: 1px solid var(--border);
    padding-top: 48px;
}
.prac-action-box h3 { margin: 0 0 12px; font-size: 28px; }
.prac-action-box p { margin: 0 0 24px; color: var(--text-muted); font-size: 18px; }

/* --- CHATBOT BOOKING GUIDANCE --- */
.chat-launcher {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(111, 59, 135, 0.4);
    cursor: pointer;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
}
.chat-launcher:hover {
    transform: scale(1.08);
    box-shadow: 0 16px 32px rgba(111, 59, 135, 0.5);
}
.chat-launcher svg, .chat-launcher svg * {
    width: 30px;
    height: 30px;
    pointer-events: none;
}

.chatbot-window {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 60px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.2);
    z-index: 100000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.chatbot-window.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}
.chat-header {
    background: var(--primary);
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-title strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
}
.chat-title span {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}
.chat-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.chat-close:hover { opacity: 1; }
.chat-body {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.chat-msg {
    max-width: 85%;
    animation: chatFadeIn 0.4s forwards;
}
@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-msg p {
    margin: 0;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
}
.bot-msg {
    align-self: flex-start;
}
.bot-msg p {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px;
    color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.user-msg {
    align-self: flex-end;
}
.user-msg p {
    background: var(--primary);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}

.chat-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    animation: chatFadeIn 0.4s forwards;
}
.chat-opt-btn {
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}
.chat-opt-btn:hover {
    background: var(--primary);
    color: #fff;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }

@media (max-width: 1024px) {
    .testimonial-grid, .prac-grid-sec, .prac-detail-layout { grid-template-columns: 1fr; }
    .prac-card-large { flex-direction: column; }
    .prac-img-wrapper, .prac-card-body { width: 100%; }
    .prac-img-wrapper { height: 280px; }
    .chatbot-window { width: calc(100% - 40px); right: 20px; bottom: 20px; }
}


/* --- PRACTITIONER SERVICES OVERRIDE --- */
.prac-services-section {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid var(--border);
}
.prac-services-section h2 {
    font-size: clamp(28px, 3vw, 36px);
    margin: 0 0 12px;
}
.prac-services-intro {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
}
.prac-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.prac-svc-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.prac-svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.06);
    border-color: var(--primary);
}
.ps-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ps-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary);
    background: rgba(111, 59, 135, 0.08);
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
}
.ps-price {
    font-weight: 600;
    color: var(--text-main);
    font-size: 15px;
    background: var(--bg-alt);
    padding: 6px 12px;
    border-radius: 4px;
}
.prac-svc-card h3 {
    margin: 0 0 12px;
    font-size: 22px;
}
.prac-svc-card p {
    margin: 0 0 24px;
    color: var(--text-muted);
    line-height: 1.6;
}
.ps-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}
.ps-learn-more {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    transition: color 0.3s;
}
.ps-learn-more:hover {
    color: var(--primary);
}
.ps-book-btn {
    padding: 12px 24px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .ps-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .ps-learn-more { text-align: center; }
}


/* --- MALEWATLE EDITORIAL PROFILE STYLES --- */
.mal-page-wrapper {
    background: #fff;
    color: var(--text-main);
}
.mal-section {
    padding: clamp(60px, 8vw, 100px) var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
}
.mal-bg-alt {
    background: var(--bg-alt);
    max-width: none;
    padding-left: max(var(--gutter), calc((100% - 1400px) / 2));
    padding-right: max(var(--gutter), calc((100% - 1400px) / 2));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mal-eyebrow {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin: 0 0 16px;
}
.mal-h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
}
.mal-h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    margin: 0 0 24px;
}
.mal-h3 {
    font-size: 24px;
    margin: 0 0 16px;
}
.mal-large-p {
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 1.6;
    margin-bottom: 24px;
    color: var(--text-main);
}
.mal-intro-lead {
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.5;
    margin: 0 0 24px;
}
.mal-intro-body {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 24px;
}
.mal-mb-40 { margin-bottom: 40px !important; }
.mal-mt-20 { margin-top: 20px !important; }
.max-800 { max-width: 800px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Hero */
.mal-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    padding: clamp(60px, 8vw, 100px) var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}
.mal-hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.justify-center { justify-content: center; }
.mal-hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.1);
}

/* Quick Profile */
.mal-quick-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 32px var(--gutter);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: 1400px;
    margin: 0 auto;
}
.mqp-item span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.mqp-item strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

/* Splits & Grids */
.mal-split {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(40px, 6vw, 80px);
}
.mal-split-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
}
.align-center { align-items: center; }

.mal-principles {
    display: grid;
    gap: 32px;
    margin-top: 48px;
    border-left: 2px solid var(--border);
    padding-left: 32px;
}
.mal-principle h3 {
    color: var(--primary);
    font-size: 20px;
    margin: 0 0 8px;
}
.mal-principle p { margin: 0; font-size: 16px; color: var(--text-muted); }

.mal-bullet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
    list-style: none;
    padding: 0; margin: 0 0 40px;
}
.mal-bullet-grid li {
    font-size: 18px;
    display: flex;
    align-items: flex-start;
}
.mal-bullet-grid li::before {
    content: '\2014';
    color: var(--primary);
    margin-right: 12px;
}
.mal-notice {
    background: #fff;
    padding: 24px;
    border-left: 4px solid var(--primary);
    font-size: 16px;
    color: var(--text-muted);
}

.mal-expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.mal-exp-card {
    background: var(--bg-alt);
    padding: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.mal-exp-card h3 { margin: 0 0 12px; font-size: 20px; }
.mal-exp-card p { margin: 0; font-size: 15px; color: var(--text-muted); }

/* Features */
.mal-feature-box {
    background: #fff;
    padding: 48px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,0.04);
}

/* Services */
.mal-svc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 24px;
}
.mal-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mal-filter-btn {
    background: transparent;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.mal-filter-btn:hover, .mal-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.mal-cat-label {
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin: 40px 0 24px;
}
.mal-svc-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.3s;
}
.mal-svc-row:hover {
    background: rgba(255,255,255,0.5);
}
.msr-info h4 { font-size: 20px; margin: 0 0 8px; }
.msr-info p { margin: 0; font-size: 15px; color: var(--text-muted); }
.msr-meta strong { display: block; font-size: 18px; margin-bottom: 4px; }
.msr-meta span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.msr-actions { display: flex; align-items: center; gap: 16px; justify-content: flex-end; }
.msr-link { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color 0.2s; }
.msr-link:hover { color: var(--primary); }
.msr-btn { padding: 10px 20px; font-size: 13px; }

/* Availability */
.mal-availability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
}
.ma-block h3 { color: var(--primary); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; }
.ma-block strong { font-size: 22px; display: block; margin-bottom: 12px; }
.ma-block p { font-size: 16px; color: var(--text-muted); margin: 0; }

/* Journey */
.mal-journey-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative;
}
.mjs-step {
    position: relative;
    z-index: 2;
}
.mjs-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--border);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    margin-bottom: 16px;
}
.mjs-step h4 { font-size: 18px; margin: 0 0 8px; }
.mjs-step p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; }
@media (min-width: 1025px) {
    .mal-journey-steps::before {
        content: ''; position: absolute;
        top: 16px; left: 16px; right: calc(20% + 16px);
        height: 1px; background: var(--border); z-index: 1;
    }
}

/* Standards */
.mal-standards-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.mal-standards-list li {
    font-size: 16px; display: flex; align-items: center; gap: 12px;
}
.mal-standards-list li::before {
    content: '\10003'; color: #fff; background: var(--primary);
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}

/* FAQ */
.mal-faq-wrapper { max-width: 800px; margin: 0 auto; }

/* Final CTA */
.mal-micro-text {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted); margin-top: 32px;
}

@media (max-width: 1024px) {
    .mal-hero, .mal-split, .mal-split-equal, .mal-expertise-grid, .mal-availability-grid, .mal-standards-list {
        grid-template-columns: 1fr;
    }
    .mal-bullet-grid { grid-template-columns: 1fr; }
    .mal-svc-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
    .msr-actions { justify-content: flex-start; }
    .mal-journey-steps { grid-template-columns: 1fr; gap: 32px; }
    .mal-journey-steps::before { display: none; }
}

/* --- PRACTITIONERS DISCOVERY PAGE STYLES --- */
.prac-discovery-wrapper {
    background: #fff;
    color: var(--text-main);
}
.prac-section {
    padding: clamp(60px, 8vw, 120px) var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
}
.bg-alt {
    background: var(--bg-alt);
    max-width: none;
    padding-left: max(var(--gutter), calc((100% - 1400px) / 2));
    padding-right: max(var(--gutter), calc((100% - 1400px) / 2));
}
.bg-white { background: #fff; }
.section-title {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    margin: 0 0 24px;
}
.large-body {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.6;
    color: var(--text-muted);
}
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.p-40 { padding: 40px; }
.radius-8 { border-radius: 8px; }
.border-1 { border: 1px solid var(--border); }
.overflow-hidden { overflow: hidden; }
.micro-text {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Hero */
.page-header .prac-hero-title {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.1;
    margin: 16px 0 24px;
}
.prac-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    margin-top: 30px;
    flex-wrap: wrap;
}
.hero-actions {
    position: relative;
    display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap;
}


/* Core Names */
.core-prac-names {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 48px 0;
    flex-wrap: wrap;
}
.cpn-block {
    text-align: center;
}
.cpn-block strong {
    display: block; font-size: 24px; color: var(--primary); margin-bottom: 4px;
}
.cpn-block span {
    font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}
.cpn-divider {
    font-size: 18px; font-style: italic; color: var(--text-muted);
}

/* Rich Prac Cards */
.rich-prac-cards {
    display: flex; flex-direction: column; gap: 80px;
}
.rich-prac-card {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: stretch;
}
.rich-prac-card.reverse {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.rich-prac-card.reverse .rpc-image { order: 2; }
.rich-prac-card.reverse .rpc-content { order: 1; }

.rpc-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.rpc-image img {
    width: 100%; height: 100%; object-fit: cover;
    box-shadow: 0 24px 48px rgba(0,0,0,0.1);
}
.rpc-num {
    position: absolute; top: 32px; left: 32px;
    font-size: 80px; line-height: 1; font-weight: 700; color: #fff;
    opacity: 0.3; font-variant-numeric: tabular-nums;
}
.rpc-content {
    display: flex; flex-direction: column; justify-content: center;
}
.rpc-name { font-size: 40px; margin: 0 0 8px; line-height: 1.1; }
.rpc-role { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); font-weight: 600; margin: 0 0 24px; }
.rpc-desc { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0 0 32px; }

.rpc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.rpc-split h4 { font-size: 18px; margin: 0 0 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.rpc-list { list-style: none; padding: 0; margin: 0; }
.rpc-list li { font-size: 15px; margin-bottom: 8px; display: flex; gap: 8px; }
.rpc-list li::before { content: '\2014'; color: var(--primary); }
.rpc-small-text { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; }

.rpc-best-for { padding: 24px; border-radius: 8px; margin-bottom: 32px; }
.rpc-best-for h4 { margin: 0 0 8px; color: var(--primary); }
.rpc-best-for p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-main); }
.rpc-avail { font-size: 15px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.rpc-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rpc-link { font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-main); transition: color 0.3s; }
.rpc-link:hover { color: var(--primary); }

/* Compare Table */
.compare-table-wrapper {
    overflow-x: auto;
    margin: 48px 0;
    box-shadow: 0 16px 32px rgba(0,0,0,0.04);
    border-radius: 12px;
    background: #fff;
}
.prac-compare-table {
    width: 100%; min-width: 800px;
    border-collapse: collapse;
}
.prac-compare-table th {
    padding: 24px; text-align: left; background: var(--bg);
    font-size: 20px; font-weight: 500; border-bottom: 2px solid var(--border);
}
.prac-compare-table td {
    padding: 24px; border-bottom: 1px solid var(--border);
    font-size: 16px; line-height: 1.5;
}
.prac-compare-table td:first-child { background: var(--bg-alt); width: 25%; }
.compare-footer p { margin: 0 0 12px; font-size: 18px; }

/* Principles */
.principles-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px;
}
.principle-box {
    border-top: 2px solid var(--primary); padding-top: 24px;
}
.principle-box h4 { font-size: 20px; margin: 0 0 12px; }
.principle-box p { margin: 0; color: var(--text-muted); line-height: 1.6; }

/* Topics Grid */
.topics-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px;
}
.topic-item {
    background: #fff; border: 1px solid var(--border); padding: 32px; border-radius: 8px;
}
.topic-item h3 { margin: 0 0 12px; font-size: 18px; color: var(--primary); }
.topic-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* Vertical Process */
.vertical-process {
    display: flex; flex-direction: column; gap: 32px; margin-top: 40px;
}
.vp-step { display: flex; gap: 24px; align-items: flex-start; }
.vp-num {
    font-size: 14px; font-weight: 700; color: var(--primary);
    border: 1px solid var(--border); width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0; background: var(--bg-alt);
}
.vp-step h4 { margin: 0 0 8px; font-size: 20px; }
.vp-step p { margin: 0; color: var(--text-muted); line-height: 1.5; }

/* Location Box */
.location-box { padding: 48px; border-radius: 12px; border: 1px solid var(--border); }
.loc-detail h3 { margin: 0 0 8px; color: var(--primary); }
.loc-detail strong { display: block; margin-bottom: 12px; font-size: 18px; }
.loc-detail p { margin: 0; color: var(--text-muted); line-height: 1.6; }

/* Bullet List */
.bullet-list-primary { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bullet-list-primary li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; }
.bullet-list-primary li::before { content: '\10003'; color: #fff; background: var(--primary); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 2px; flex-shrink: 0; }

/* Horizontal Journey */
.horizontal-journey {
    display: flex; align-items: center; justify-content: space-between; margin-top: 48px;
    gap: 16px;
}
.hz-step {
    flex: 1; text-align: center; background: var(--bg-alt); padding: 32px 16px;
    border-radius: 8px; position: relative;
}
.hz-step h4 { font-size: 18px; margin: 0 0 12px; color: var(--primary); }
.hz-step p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.hz-arrow {
    color: var(--primary); font-size: 24px; opacity: 0.5;
}

@media (max-width: 1024px) {
    .rich-prac-card, .rich-prac-card.reverse { grid-template-columns: 1fr; }
    .rich-prac-card.reverse .rpc-image { order: 1; }
    .rich-prac-card.reverse .rpc-content { order: 2; }
    .rpc-split { grid-template-columns: 1fr; }
    .topics-grid { grid-template-columns: repeat(2, 1fr); }
    .split-equal { grid-template-columns: 1fr; }
    .horizontal-journey { flex-direction: column; }
    .hz-arrow { transform: rotate(90deg); margin: 16px 0; }
}
@media (max-width: 768px) {
    .topics-grid { grid-template-columns: 1fr; }
    .bullet-list-primary { grid-template-columns: 1fr; }
    .core-prac-names { flex-direction: column; gap: 16px; }
}

/* --- INDIVIDUAL SERVICE PAGE (PRACTITIONER-FOCUSED) --- */
.svc-individual-wrapper {
    background: #fff;
}
.svc-breadcrumb {
    padding: 24px var(--gutter);
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}
.svc-header {
    padding: clamp(60px, 8vw, 100px) var(--gutter) 60px;
}
.svc-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
    margin: 16px 0 8px;
}
.svc-with-prac {
    font-size: clamp(20px, 3vw, 28px);
    color: var(--primary);
    margin: 0 0 48px;
}
.svc-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--bg-alt);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--border);
    text-align: left;
}
.smg-item span {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px;
}
.smg-item strong {
    font-size: 15px; color: var(--text-main);
}
.svc-main-content {
    padding: clamp(60px, 6vw, 80px) var(--gutter) 80px;
}
.svc-content-sec {
    margin-bottom: 60px;
}
.svc-content-sec h2 {
    font-size: 32px;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.pt-40 { padding-top: 40px; }
.border-top { border-top: 1px solid var(--border); }
.mb-24 { margin-bottom: 24px; }
.large-btn { padding: 16px 32px; font-size: 16px; }

/* Practitioner Preview Box */
.prac-preview-box {
    display: flex; gap: 32px; align-items: center; padding: 40px; border-radius: 12px; border: 1px solid var(--border);
}
.ppb-image { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ppb-image img { width: 100%; height: 100%; object-fit: cover; }
.ppb-info h3 { margin: 0 0 4px; font-size: 24px; }
.ppb-info .role { color: var(--primary); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 16px; font-weight: 600; }
.ppb-info p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.inline-block { display: inline-block; }

/* Related Services */
.svc-related-wrapper {
    padding: 80px var(--gutter);
    border-top: 1px solid var(--border);
}
.max-1200 { max-width: 1200px; }
.related-heading {
    font-size: 24px; margin: 0 0 32px; text-align: left;
}
.related-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
}
.related-card {
    background: #fff; padding: 32px; border-radius: 8px; border: 1px solid var(--border);
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: transform 0.3s, box-shadow 0.3s;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.06); border-color: var(--primary); }
.rc-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); font-weight: 600; margin: 0 0 12px; }
.related-card h4 { font-size: 20px; margin: 0 0 12px; line-height: 1.3; }
.rc-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.rc-meta { font-size: 14px; font-weight: 500; margin: 0 0 24px; flex-grow: 1; }
.rc-arrow { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color 0.3s; display: inline-block; }
.related-card:hover .rc-arrow, .rc-arrow:hover { color: var(--primary); }

@media (max-width: 768px) {
    .svc-meta-grid { grid-template-columns: 1fr 1fr; }
    .prac-preview-box { flex-direction: column; text-align: center; }
}

/* --- MULTI-STEP BOOKING MODAL --- */
.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.overlay.open {
    opacity: 1;
    visibility: visible;
}
.wizard-modal {
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    border-radius: 16px;
    background: #fff;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wizard-modal .close-modal {
    position: absolute; top: 20px; right: 24px;
    font-size: 32px; background: none; border: none; cursor: pointer; color: var(--text-muted);
    z-index: 10;
}
.modal-body {
    padding: 40px;
    overflow-y: auto;
    flex-grow: 1;
}
.wizard-step {
    display: none;
    animation: fadeIn 0.4s forwards;
}
.wizard-step.active {
    display: block;
}
.wizard-actions {
    margin-top: 40px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
    display: flex;
    justify-content: flex-end;
}
.wizard-actions.dual {
    justify-content: space-between;
}
.w-full { width: 100%; }

/* Prac Selection */
.prac-select-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.prac-option {
    cursor: pointer;
    display: block;
    position: relative;
}
.prac-radio { display: none; }
.prac-card-inner {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s;
    background: #fff;
    height: 100%;
}
.prac-option:hover .prac-card-inner {
    border-color: rgba(111, 59, 135, 0.5);
    background: var(--bg-alt);
}
.prac-radio:checked + .prac-card-inner {
    border-color: var(--primary);
    background: rgba(111, 59, 135, 0.04);
}
.prac-card-top {
    display: flex; align-items: center; gap: 16px; margin-bottom: 24px; position: relative;
}
.prac-card-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.prac-card-titles strong { display: block; font-size: 18px; margin-bottom: 4px; }
.prac-card-role { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); font-weight: 600; }
.check-indicator {
    position: absolute; top: 0; right: 0;
    width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    opacity: 0; transition: opacity 0.3s;
}
.prac-radio:checked + .prac-card-inner .check-indicator { opacity: 1; }
.prac-radio:checked + .prac-card-inner .prac-card-titles strong { font-weight: 700; color: var(--primary); }

.prac-card-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 12px; }
.prac-card-list { list-style: none; padding: 0; margin: 0 0 24px; }
.prac-card-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.prac-card-list li::before { content: '\2014'; color: var(--primary); }
.prac-card-meta { border-top: 1px solid var(--border); padding-top: 16px; }
.prac-card-meta span { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

.not-sure-opt { grid-column: span 2; }
.not-sure-opt .prac-card-inner { text-align: center; padding: 24px; position: relative; }
.not-sure-opt strong { display: block; font-size: 18px; margin-bottom: 8px; }
.not-sure-opt p { margin: 0; color: var(--text-muted); font-size: 15px; }

.help-choose-box {
    margin-top: 16px; padding: 24px; background: var(--bg-alt); border-radius: 8px; text-align: left;
    gap: 16px; font-size: 14px; line-height: 1.5; color: var(--text-main);
}
.text-link { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: 14px; }

/* Service Selection */
.svc-cat-group { margin-bottom: 32px; }
.svc-cat-group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px; }
.svc-sel-option { display: block; cursor: pointer; margin-bottom: 12px; position: relative; }
.svc-sel-option input { display: none; }
.svc-sel-inner {
    border: 1px solid var(--border); border-radius: 8px; padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s; background: #fff;
}
.svc-sel-option:hover .svc-sel-inner { border-color: rgba(111, 59, 135, 0.5); }
.svc-sel-option input:checked + .svc-sel-inner {
    border-color: var(--primary); border-width: 2px; padding: 15px 23px; background: rgba(111, 59, 135, 0.04);
}
.svc-sel-info strong { display: block; font-size: 16px; margin-bottom: 4px; }
.svc-sel-info span { font-size: 13px; color: var(--text-muted); }
.svc-sel-price { font-weight: 600; }
.svc-sel-inner .check-indicator { position: relative; width: 24px; height: 24px; margin-left: 16px; opacity: 0; }
.svc-sel-option input:checked + .svc-sel-inner .check-indicator { opacity: 1; }

/* Format Selection */
.format-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fmt-radio { display: none; }
.fmt-inner {
    border: 2px solid var(--border); border-radius: 8px; padding: 24px; text-align: center;
    cursor: pointer; transition: all 0.2s; position: relative; background: #fff;
}
.format-option:hover .fmt-inner { border-color: rgba(111, 59, 135, 0.5); }
.fmt-radio:checked + .fmt-inner { border-color: var(--primary); background: rgba(111, 59, 135, 0.04); }
.fmt-inner strong { display: block; font-size: 20px; margin-bottom: 8px; }
.fmt-inner p { margin: 0; color: var(--text-muted); font-size: 14px; }
.fmt-inner .check-indicator { position: absolute; top: -10px; right: -10px; }

/* Review */
.review-box { background: var(--bg-alt); padding: 32px; border-radius: 8px; border: 1px solid var(--border); }
.rb-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
.rb-row:last-child { border-bottom: none; }
.rb-row span { color: var(--text-muted); }

/* Forms */
.form-group { margin-bottom: 24px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.form-control { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 16px; }

.success-icon {
    width: 64px; height: 64px; background: var(--primary); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin: 0 auto 24px;
}

@media (max-width: 768px) {
    .prac-select-grid, .format-select-grid { grid-template-columns: 1fr; }
    .not-sure-opt { grid-column: span 1; }
    .svc-sel-inner { flex-wrap: wrap; gap: 12px; }
    .modal-body { padding: 24px; }
}

/* --- FIX HEADER OVERLAPS ON NEW LAYOUTS --- */
/* The #site-header is fixed, so custom wrappers need padding to push content down */

.prac-discovery-wrapper .prac-hero {
    padding-top: calc(var(--header-h) + clamp(40px, 8vw, 80px)) !important;
}

.mal-wrapper .mal-section:first-child {
    padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)) !important;
}

.prac-detail-layout {
    margin-top: calc(var(--header-h) + 40px) !important;
}

.svc-individual-wrapper .svc-breadcrumb {
    padding-top: calc(var(--header-h) + 24px) !important;
}

@media (max-width: 900px) {
    .prac-detail-layout {
        margin-top: calc(var(--header-h) + 24px) !important;
    }
}

/* --- GLOBAL FIXES FOR GRID & TEXT OVERFLOW --- */
.mal-hero, .mal-split, .mal-split-equal, .rich-prac-card {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.mal-hero-content, .rpc-content {
    min-width: 0; /* Prevents CSS grid blowout */
}

/* Ensure images don't stretch grids */
.mal-hero-image img, .rpc-image img {
    max-width: 100%;
    display: block;
}

/* Fix mobile scaling for large headings */
@media (max-width: 768px) {
    .mal-hero-content h1, .rpc-name, .section-title {
        font-size: clamp(28px, 6vw, 40px) !important;
        line-height: 1.2;
    }
}


/* =========================================================================
   PRACTITIONER PROFILE (unified template, .pp-*). Keep LAST.
   Fully namespaced so older .mal-* / .section rules cannot interfere.
   ========================================================================= */
.pp { background: #fff; color: var(--text-main); }
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp h1, .pp h2, .pp h3, .pp p, .pp ul, .pp dl, .pp dd, .pp figure, .pp blockquote { margin: 0; }
.pp p { color: var(--text-muted); }

.pp-section {
    width: 100%; max-width: 1280px; margin: 0 auto;
    padding: clamp(64px, 8vw, 112px) var(--gutter);
}
.pp-band { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.pp-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--primary) !important; margin-bottom: 16px !important;
}
.pp-h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.02em; color: var(--text-main); margin-bottom: 24px !important; }
.pp-h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.02em; color: var(--text-main); }
.pp-h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: var(--text-main); margin-bottom: 16px !important; }
.pp-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--text-main) !important; margin-bottom: 20px !important; }
.pp-body { font-size: 16px; line-height: 1.7; }

.pp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.pp-actions-center { justify-content: center; }

/* Hero */
.pp-hero {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px); align-items: center;
    padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)) !important;
}
.pp-hero-img { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg-alt); }
.pp-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-hero-text { min-width: 0; }
.pp-crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.pp-crumb a { color: var(--text-muted); text-decoration: none; }
.pp-crumb a:hover { color: var(--primary); }
.pp-crumb span { color: var(--text-main); }

/* Quick profile strip */
.pp-quick { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.pp-quick-grid {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.pp-quick-item { padding: 28px 24px; border-left: 1px solid var(--border); }
.pp-quick-item:first-child { border-left: 0; padding-left: 0; }
.pp-quick-item dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.pp-quick-item dd { font-size: 16px; font-weight: 500; color: var(--text-main); line-height: 1.35; }

/* Approach */
.pp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 80px); align-items: start; }
.pp-approach { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pp-approach .pp-h2 { margin-bottom: 24px; }
.pp-quote { margin-top: 32px !important; padding: 4px 0 4px 24px; border-left: 2px solid var(--primary); }
.pp-quote p { font-size: 19px; line-height: 1.6; font-style: italic; color: var(--text-main) !important; }
.pp-quote cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; color: var(--text-muted); }
.pp-expertise { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: clamp(28px, 3vw, 40px); }
.pp-expertise-list { list-style: none; padding: 0; }
.pp-expertise-list li {
    display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
    border-bottom: 1px solid var(--border); font-size: 17px; color: var(--text-main);
}
.pp-expertise-list li:last-child { border-bottom: 0; }
.pp-num { font-size: 12px; font-weight: 600; color: var(--primary); letter-spacing: .08em; min-width: 22px; }
.pp-style { margin-top: 20px !important; padding-top: 20px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-main) !important; }
.pp-style span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }

/* Services */
.pp-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 48px; }
.pp-section-intro { max-width: 460px; justify-self: end; }
.pp-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pp-svc {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: 28px 30px; text-decoration: none; color: inherit;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.pp-svc:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(61,40,71,.07); }
.pp-svc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.pp-svc-cat { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.pp-svc-price { font-size: 15px; font-weight: 600; color: var(--text-main); white-space: nowrap; }
.pp-svc-title { font-size: 22px; line-height: 1.25; color: var(--text-main); margin-bottom: 8px !important; transition: color .25s; }
.pp-svc:hover .pp-svc-title { color: var(--primary); }
.pp-svc-desc { font-size: 15px; line-height: 1.6; flex-grow: 1; }
.pp-svc-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.pp-svc-meta { font-size: 13px; color: var(--text-muted); }
.pp-svc-link { font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; }
.pp-svc:hover .pp-svc-link { color: var(--primary); }

/* Starting point + availability */
.pp-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.pp-start-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: clamp(28px, 3.5vw, 48px); }
.pp-start-card .button { margin-top: 28px; display: inline-flex; }
.pp-avail { padding: clamp(28px, 3.5vw, 48px) 0; }
.pp-avail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.pp-avail-item { border: 1px solid var(--border); border-radius: 10px; padding: 22px; }
.pp-avail-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.pp-avail-item strong { display: block; font-size: 17px; color: var(--text-main); margin-bottom: 6px; }
.pp-avail-item p { font-size: 14px; line-height: 1.5; }

/* CTA */
.pp-cta { text-align: center; }
.pp-cta .pp-h2 { max-width: 760px; margin: 0 auto; }

/* Responsive */
@media (max-width: 1024px) {
    .pp-hero, .pp-approach, .pp-split, .pp-start, .pp-section-head { grid-template-columns: minmax(0, 1fr); }
    .pp-hero-img { max-width: 520px; }
    .pp-section-intro { justify-self: start; }
    .pp-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-quick-item { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--border); }
    .pp-avail { padding: 0; }
}
@media (max-width: 680px) {
    .pp-svc-grid, .pp-avail-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    .pp-quick-item { padding: 18px 0; }
    .pp-svc { padding: 22px; }
    .pp-actions .button, .pp-actions .outline { width: 100%; justify-content: center; text-align: center; }
}


/* =========================================================================
   HEADER NAV ALIGNMENT FIX + PROFILE CREATIVE SECTIONS. Keep LAST.
   ========================================================================= */
/* Dropdown items ("About Us", "Services") were sitting lower than plain links
   because an older rule set .dropdown to display:block. Align everything on one line. */
#site-header .desktop-nav { align-items: center !important; }
#site-header .desktop-nav > a,
#site-header .desktop-nav .dropdown > a {
    display: inline-flex !important; align-items: center; gap: 6px; line-height: 1 !important;
    padding: 10px 0 !important; position: relative;
}
#site-header .desktop-nav .dropdown { display: flex !important; align-items: center; }
#site-header .desktop-nav .arrow { font-size: 9px; margin: 0 !important; line-height: 1; transform: translateY(1px); }
#site-header .desktop-nav a.active::after { bottom: 0 !important; }
#site-header .dropdown-content { grid-template-columns: 1fr !important; min-width: 220px !important; }

/* Align profile content with the header edges (header is full-width + gutter) */
.pp-section { max-width: none !important; }
.pp .pp-quick-grid { max-width: none; margin: 0; }
.pp .pp-crumb a { padding: 0 !important; margin: 0 !important; display: inline !important; }
.pp-hero-img { max-height: 760px; }

/* Shared section header spacing */
.pp-section-head .pp-eyebrow { margin-bottom: 14px !important; }

/* Signature method */
.pp-method { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--text-main); }
.pp-method-step { position: relative; padding: 36px 36px 8px 0; border-right: 1px solid var(--border); }
.pp-method-step + .pp-method-step { padding-left: 36px; }
.pp-method-step:last-child { border-right: 0; }
.pp-method-num { display: block; font-size: clamp(56px, 6vw, 96px); line-height: .9; font-weight: 500; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--primary); margin-bottom: 20px; }
.pp-method-step h3 { font-size: 26px; color: var(--text-main); margin-bottom: 10px !important; }
.pp-method-step p { font-size: 16px; line-height: 1.65; max-width: 34ch; }

/* Dark "who it's for" band */
.pp-dark { background: linear-gradient(135deg, #3d2847 0%, #5a2f70 60%, #6f3b87 100%); color: #fff; position: relative; overflow: hidden; }
.pp-dark::before { content: ''; position: absolute; right: -10%; top: -30%; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(0,139,196,.25), transparent 65%); pointer-events: none; }
.pp-dark-inner { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pp-dark .pp-eyebrow { color: #c9a8dc !important; }
.pp-dark .pp-h2 { color: #fff; margin-bottom: 36px; }
.pp-helps { list-style: none; padding: 0; margin: 0 0 40px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.pp-helps li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 17px; color: #fff; }
.pp-helps svg { width: 16px; height: 16px; fill: #c9a8dc; flex-shrink: 0; }
.pp-btn-light { background: #fff !important; color: var(--primary) !important; }
.pp-btn-light:hover { background: #f1e9f6 !important; }
.pp-dark-img { position: relative; aspect-ratio: 4 / 5; border-radius: 200px 200px 10px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); }
.pp-dark-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
.pp-dark-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(30,15,40,.75)); }

/* Session timeline */
.pp-timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.pp-timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--primary), var(--accent, #008bc4)); opacity: .5; }
.pp-timeline li { position: relative; padding-top: 40px; }
.pp-tl-dot { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 0 0 6px #fff; }
.pp-tl-step { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.pp-timeline h3 { font-size: 22px; color: var(--text-main); margin-bottom: 8px !important; }
.pp-timeline p { font-size: 15px; line-height: 1.6; }

/* Philosophy statement */
.pp-philosophy { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; position: relative; overflow: hidden; }
.pp-philosophy .pp-section { position: relative; }
.pp-quote-mark { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 280px; line-height: 1; color: var(--primary); opacity: .07; font-family: Georgia, serif; pointer-events: none; }
.pp-philosophy blockquote { max-width: 900px; margin: 0 auto !important; font-size: clamp(24px, 3vw, 40px); line-height: 1.35; letter-spacing: -.01em; color: var(--text-main); }
.pp-philosophy cite { display: block; margin-top: 28px; font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

/* Trust pillars */
.pp-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pp-pillar { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 30px 26px; transition: transform .25s, border-color .25s; }
.pp-pillar:hover { transform: translateY(-3px); border-color: var(--primary); }
.pp-pillar svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(111,59,135,.08); fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 20px; }
.pp-pillar h3 { font-size: 19px; color: var(--text-main); margin-bottom: 8px !important; }
.pp-pillar p { font-size: 15px; line-height: 1.6; }

/* FAQ */
.pp-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pp-faq-list details { border-bottom: 1px solid var(--border); padding: 22px 0; }
.pp-faq-list details:first-child { border-top: 1px solid var(--border); }
.pp-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; font-size: 19px; color: var(--text-main); }
.pp-faq-list summary::-webkit-details-marker { display: none; }
.pp-faq-list summary::after { content: '+'; color: var(--primary); font-size: 22px; line-height: 1; transition: transform .25s; }
.pp-faq-list details[open] summary::after { transform: rotate(45deg); }
.pp-faq-list details p { margin-top: 14px !important; font-size: 16px; line-height: 1.7; max-width: 62ch; }

/* Final CTA */
.pp-final { background: linear-gradient(135deg, #3d2847, #6f3b87); color: #fff; }
.pp-final-inner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pp-final-img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid rgba(255,255,255,.2); }
.pp-final .pp-eyebrow { color: #c9a8dc !important; }
.pp-final .pp-h2 { color: #fff; margin-bottom: 12px; }
.pp-final .pp-body { color: rgba(255,255,255,.75) !important; }
.pp-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.5) !important; background: transparent !important; }
.pp-btn-ghost:hover { border-color: #fff !important; }

@media (max-width: 1024px) {
    .pp-method { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .pp-method-step, .pp-method-step + .pp-method-step { padding: 28px 0; border-right: 0; border-top: 1px solid var(--border); }
    .pp-dark-inner, .pp-faq { grid-template-columns: minmax(0, 1fr); }
    .pp-dark-img { max-width: 420px; }
    .pp-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .pp-timeline::before { display: none; }
    .pp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .pp-helps, .pp-timeline, .pp-pillars { grid-template-columns: minmax(0, 1fr); }
    .pp-final-inner { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .pp-final-img { width: 140px; height: 140px; }
    .pp-quote-mark { font-size: 180px; }
}

/* Logo Styles */
.brand { display: flex !important; align-items: center !important; }
.brand img { height: 45px !important; width: auto !important; max-width: 100%; object-fit: contain !important; display: block !important; }

.footer-brand-col .brand { display: flex !important; margin-bottom: 25px !important; }
.footer-brand-col .brand img { height: 50px !important; }

.mobile-menu-top .brand img { height: 35px !important; }

/* ==========================================================================
   SPIRIT MODE - CENTRAL BOOKING PLATFORM & ENGINE STYLES
   ========================================================================== */
.booking-portal-wrap {
    padding: 40px 20px 80px;
    background: var(--bg-main);
    min-height: 80vh;
}
.portal-container {
    max-width: 1060px;
    margin: 0 auto;
}
.booking-portal-header {
    text-align: center;
    margin-bottom: 40px;
}
.booking-portal-header h1 {
    font-size: clamp(32px, 4.5vw, 48px);
    margin-bottom: 15px;
    color: var(--text-main);
}
.portal-intro {
    max-width: 700px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
}
.portal-nav-pills {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}
.portal-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 40px;
    border: 1px solid var(--border);
    background: #ffffff;
    font-weight: 500;
    font-size: 15px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.25s ease;
}
.portal-tab:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.portal-tab.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(111, 59, 135, 0.25);
}

/* Stepper */
.booking-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    position: relative;
    overflow-x: auto;
    padding: 10px 0;
}
.step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.3s;
}
.step-item.active .step-num {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(111, 59, 135, 0.15);
}
.step-item.active .step-label {
    color: var(--primary);
    font-weight: 600;
}
.step-item.completed .step-num {
    background: #27ae60;
    border-color: #27ae60;
    color: #ffffff;
}
.step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 12px;
    min-width: 20px;
    transition: background 0.3s;
}
.step-line.completed {
    background: #27ae60;
}

/* Booking Card */
.booking-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(61, 40, 71, 0.06);
    padding: clamp(24px, 4vw, 44px);
}
.step-panel {
    display: none;
    animation: fadeIn 0.35s ease;
}
.step-panel.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.panel-title-wrap {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 18px;
}
.panel-title-wrap h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}
.panel-title-wrap p {
    font-size: 15px;
    color: var(--text-muted);
}

/* Modality Selector */
.modality-selector-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 25px;
}
.modality-option {
    cursor: pointer;
}
.modality-option input {
    display: none;
}
.modality-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    transition: all 0.25s;
}
.modality-icon {
    font-size: 26px;
}
.modality-text strong {
    display: block;
    font-size: 15px;
    color: var(--text-main);
}
.modality-text small {
    font-size: 12px;
    color: var(--text-muted);
}
.modality-option input:checked + .modality-card {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(111, 59, 135, 0.12);
}

/* Filter Row & Forms */
.filter-row {
    margin-bottom: 25px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.form-control {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-main);
    transition: border-color 0.2s;
    outline: none;
}
.form-control:focus {
    border-color: var(--primary);
    background: #ffffff;
}

/* Services Selection Grid */
.services-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.service-selection-card {
    background: var(--bg-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 22px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
}
.service-selection-card:hover {
    transform: translateY(-2px);
    border-color: rgba(111, 59, 135, 0.3);
}
.service-selection-card.selected {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(111, 59, 135, 0.15);
}
.svc-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.svc-cat-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--primary);
}
.svc-price-tag {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
}
.svc-card-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
}
.svc-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 16px;
}
.svc-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* Slot Selection Layout */
.slot-selection-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 30px;
    margin-bottom: 30px;
}
.schedule-notice {
    margin-top: 15px;
    padding: 14px;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-muted);
}
.schedule-notice strong {
    color: var(--text-main);
    display: block;
    margin-bottom: 4px;
}
.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    min-height: 120px;
}
.slot-pill-btn {
    padding: 12px 10px;
    background: var(--bg-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.slot-pill-btn:hover {
    border-color: var(--primary);
    background: #ffffff;
}
.slot-pill-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.slot-pill-btn strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}
.slot-pill-btn small {
    display: block;
    font-size: 11px;
    opacity: 0.85;
}
.slot-pill-btn.selected small {
    color: rgba(255, 255, 255, 0.9);
}
.empty-slots-warning {
    grid-column: 1 / -1;
    padding: 24px;
    background: #fff8e6;
    border: 1px solid #f39c12;
    border-radius: var(--radius-sm);
    color: #7f5500;
}
.empty-slots-hint {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-style: italic;
    padding: 20px 0;
}

/* Requisites Box */
.requisites-box {
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-bottom: 30px;
}
.req-badge {
    font-size: 10px;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--primary);
    display: inline-block;
    margin-bottom: 6px;
}
.requisite-header h3 {
    font-size: 20px;
    margin-bottom: 12px;
}
.requisite-body {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    background: #ffffff;
    padding: 18px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
}
.requisites-universal ul {
    margin: 10px 0 20px 20px;
    font-size: 14px;
    line-height: 1.6;
}
.requisite-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    margin-top: 15px;
}
.requisite-checkbox-label input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* Summary Review Card */
.summary-review-card {
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    padding: 22px;
    margin: 25px 0;
}
.summary-review-card h3 {
    font-size: 18px;
    margin-bottom: 15px;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.summary-item .lbl {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.summary-item strong {
    font-size: 15px;
    color: var(--text-main);
}

/* Hold Timer Box */
.hold-timer-box {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #ffffff;
    border-radius: var(--radius-sm);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.hold-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #f39c12;
    font-weight: 700;
    display: block;
}
.hold-timer-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 0;
}
.hold-countdown {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: monospace;
    color: #f39c12;
}

/* Booking Receipt Card */
.booking-receipt-card {
    border: 1px solid var(--border);
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 18px;
}
.receipt-lbl {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.receipt-code {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.receipt-status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.receipt-status-badge.pending {
    background: #fff3cd;
    color: #856404;
}
.receipt-status-badge.review {
    background: #cce5ff;
    color: #004085;
}
.receipt-status-badge.confirmed {
    background: #d4edda;
    color: #155724;
}
.receipt-status-badge.cancelled {
    background: #f8d7da;
    color: #721c24;
}
.receipt-details-list .receipt-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
}
.receipt-details-list .receipt-row span {
    color: var(--text-muted);
}

/* Banking Details Grid */
.payment-methods-card {
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    padding: 25px;
    margin-bottom: 25px;
}
.banking-details-grid {
    background: #ffffff;
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--border);
}
.bank-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.bank-row:last-child {
    border-bottom: none;
}

/* POP Box */
.pop-submission-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 25px;
    margin-bottom: 25px;
}

/* Actions & Buttons */
.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 24px;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 15px;
}
.final-actions-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
}
.outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.alert-banner {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
}
.alert-banner.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.alert-banner.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.success-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #27ae60;
    color: #ffffff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}
.live-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 0;
    color: var(--text-muted);
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(111, 59, 135, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .slot-selection-layout {
        grid-template-columns: 1fr;
    }
    .modality-selector-bar {
        grid-template-columns: 1fr;
    }
    .booking-stepper {
        justify-content: flex-start;
        gap: 10px;
    }
    .step-line {
        display: none;
    }
    .hold-timer-box {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}