@font-face{
  font-family:'Gudlak Bold';
  src:url('../assets/fonts/GcGudlakDemoBold.ttf') format('truetype');
  font-weight:600 900;
  font-style:normal;
  font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#2E8B6E;--gold-lt:#FFFFFF;--gold-dk:#1A7055;
  --purple:#E8F2EE;--purple-mid:#D0E8DF;--purple-lt:#B8DCCE;
  --bg:#F7FAF8;--bg2:#EDF5F1;--bg3:#E2EFE9;
  --text:#1A3329;--text-muted:#2F4D40;--text-dim:#335041;
  --text-readable:#213D31;
  --border:rgba(46,139,110,0.18);--border-bright:rgba(46,139,110,0.45);
  --glow:rgba(46,139,110,0.25);--glow-soft:rgba(46,139,110,0.1);
}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;color-scheme:light only}
body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;min-height:100dvh;color-scheme:light only}
/* Focus visible for keyboard navigation */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.page{display:none;animation:fadeIn 0.5s cubic-bezier(0.22,0.8,0.32,1);overflow-x:hidden;max-width:100%}
.page.active{display:block}
.page.page-leaving{animation:fadeOutPage 0.18s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOutPage{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion: reduce){
  .page{animation:none}
  .page.page-leaving{animation:none}
}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(247,250,248,0.98),rgba(247,250,248,0.0));border-bottom:1px solid rgba(46,139,110,0.1);backdrop-filter:blur(8px)}
.nav-logo{font-family:'Gudlak Bold',sans-serif;font-size:1.1rem;color:var(--gold);letter-spacing:0.14em;cursor:pointer;text-shadow:0 0 20px rgba(46,139,110,0.2);font-kerning:none;font-feature-settings:"kern" 0}
.nav-logo-img{display:flex;align-items:center}
.nav-logo-img img{height:104px;width:auto;display:block;transition:transform 0.3s}
.nav-logo-img:hover img{transform:scale(1.04)}
@media(max-width:768px){
  .nav-logo-img img{height:88px}
}
.nav-logo span{font-size:0.7rem;display:block;color:var(--text-dim);font-family:'Gudlak Bold',sans-serif;letter-spacing:0.3em;font-weight:400;text-transform:uppercase}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links a{font-family:'Gudlak Bold',sans-serif;font-size:0.72rem;letter-spacing:0.18em;color:var(--text-muted);text-decoration:none;cursor:pointer;transition:color 0.3s,text-shadow 0.3s;text-transform:uppercase}
.nav-links a:hover{color:var(--gold);text-shadow:0 0 12px rgba(46,139,110,0.3)}
.nav-book{background:transparent;border:1.5px solid var(--gold);color:var(--gold-dk);font-family:'Gudlak Bold',sans-serif;font-size:0.74rem;font-weight:600;letter-spacing:0.18em;padding:0.65rem 1.35rem;cursor:pointer;transition:all 0.3s;text-transform:uppercase;position:relative;overflow:hidden;border-radius:4px}
@media(min-width:769px){
  /* Move Book a Session to the far right of the desktop header, past Sign In */
  .nav-auth{order:2}
  .nav-book{order:3}
}
.nav-book::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(46,139,110,0.15),transparent);opacity:0;transition:opacity 0.3s}
.nav-book:hover{background:var(--gold);color:var(--bg);box-shadow:0 0 20px rgba(46,139,110,0.3)}
.nav-book:hover::before{opacity:1}
@media(max-width:1320px) and (min-width:769px){
  nav{padding:1rem 1.25rem}
  .nav-links{gap:0.85rem}
  .nav-links a{font-size:0.6rem;letter-spacing:0.1em}
  .nav-book{padding:0.55rem 0.9rem;font-size:0.6rem}
  .nav-logo{font-size:0.88rem}
  .nav-auth{margin-right:0.4rem!important;gap:0.5rem!important}
  .nav-signin-link{font-size:0.6rem!important;letter-spacing:0.1em!important}
}

/* ── HAMBURGER MENU (C-01 fix) ── */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:transparent;border:1px solid var(--border);cursor:pointer;padding:0;transition:border-color 0.3s;flex-shrink:0;border-radius:4px}
.nav-hamburger:hover{border-color:var(--border-bright)}
.nav-hamburger span{display:block;width:18px;height:1px;background:var(--gold);transition:all 0.35s cubic-bezier(0.22,0.8,0.32,1);transform-origin:center}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer overlay */
.nav-drawer-overlay{display:none;position:fixed;inset:0;z-index:150;background:rgba(26,51,41,0.45);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 0.35s}
.nav-drawer-overlay.is-open{opacity:1;pointer-events:all}

/* Mobile drawer panel */
/* ── CUSTOMER PROFILE SLIDE-OVER ── */
.customer-profile-panel{transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.22,0.8,0.32,1)}
.customer-profile-panel.is-open{transform:translateX(0)}
@media(max-width:900px){
  .customer-profile-panel{width:92vw!important}
}
@media(max-width:640px){
  .customer-profile-panel{width:100vw!important;width:100dvw!important;border-left:none!important}
}
.cd-section-label{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.24em;color:var(--gold-dk);text-transform:uppercase;margin-bottom:0.85rem;font-weight:600}
.cd-filter-row-label{font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;letter-spacing:0.14em;color:var(--text-dim);text-transform:uppercase;flex-shrink:0}
.cd-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:600px){.cd-info-grid{grid-template-columns:repeat(2,1fr)}}
.cd-info-item span{display:block}
.cd-info-label{font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;letter-spacing:0.14em;color:var(--text-dim);text-transform:uppercase;margin-bottom:0.25rem}
.cd-info-value{font-size:0.92rem;color:var(--text);font-weight:600}
.cd-action-btn{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.55rem 0.9rem;border:1px solid var(--border-bright);background:transparent;color:var(--gold-dk);cursor:pointer;transition:all 0.25s;border-radius:4px;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem}
.cd-action-btn:hover{background:var(--gold-dk);color:#fff}
.cd-action-btn.danger{border-color:rgba(192,57,43,0.4);color:#C0392B}
.cd-action-btn.danger:hover{background:#C0392B;color:#fff}
.cd-timeline-item{position:relative;padding:0.9rem 0 0.9rem 1.4rem;border-left:2px solid var(--border);margin-left:0.3rem}
.cd-timeline-item::before{content:'';position:absolute;left:-6px;top:1.2rem;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--bg)}
.cd-timeline-item.is-latest::before{background:#C0392B}
.cd-attach-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem}
@media(max-width:600px){.cd-attach-row{grid-template-columns:repeat(2,1fr)}}
.cd-attach-slot{border:1px dashed var(--border-bright);padding:1.1rem 0.75rem;text-align:center;border-radius:6px}
.cd-attach-slot-icon{font-size:1.3rem;opacity:0.5;display:block;margin-bottom:0.4rem}
.cd-attach-slot-label{font-family:'Gudlak Bold',sans-serif;font-size:0.54rem;letter-spacing:0.12em;color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:0.5rem}
.cd-attach-slot-btn{font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;letter-spacing:0.08em;padding:0.3rem 0.6rem;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;border-radius:3px}

/* ── FILES & ATTACHMENTS: multi-file upload system ── */
.fa-category-block{margin-bottom:1.6rem;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.fa-category-header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:rgba(46,139,110,0.05);border-bottom:1px solid var(--border)}
.fa-category-title{font-family:'Gudlak Bold',sans-serif;font-size:0.68rem;letter-spacing:0.16em;color:var(--text);text-transform:uppercase;display:flex;align-items:center;gap:0.5rem}
.fa-category-count{color:var(--text-dim);font-weight:400}
.fa-dropzone{margin:0.9rem;padding:1.4rem 1rem;border:1.5px dashed var(--border-bright);border-radius:6px;text-align:center;transition:all 0.2s;cursor:pointer;background:rgba(46,139,110,0.02)}
.fa-dropzone:hover,.fa-dropzone.drag-over{border-color:var(--gold);background:rgba(46,139,110,0.07)}
.fa-dropzone-text{font-family:'Montserrat',sans-serif;font-size:0.88rem;color:var(--text-dim);margin-bottom:0.6rem}
.fa-browse-btn{font-family:'Gudlak Bold',sans-serif;font-size:0.58rem;font-weight:600;letter-spacing:0.12em;padding:0.5rem 1rem;border:1px solid var(--gold-dk);background:transparent;color:var(--gold-dk);cursor:pointer;border-radius:4px;text-transform:uppercase}
.fa-browse-btn:hover{background:var(--gold-dk);color:#fff}
.fa-progress-wrap{margin:0 0.9rem 0.9rem;height:5px;background:var(--border);border-radius:3px;overflow:hidden;display:none}
.fa-progress-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-dk));width:0%;transition:width 0.2s}
.fa-file-list{padding:0 0.9rem 0.9rem}
.fa-file-row{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0.75rem;border:1px solid var(--border);border-radius:6px;margin-bottom:0.5rem;background:var(--bg)}
.fa-file-icon{font-size:1.3rem;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(46,139,110,0.08);border-radius:5px}
.fa-file-thumb{width:52px;height:36px;flex-shrink:0;border-radius:5px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.fa-file-thumb img,.fa-file-thumb canvas{width:100%;height:100%;object-fit:cover}
.fa-file-info{flex:1;min-width:0}
.fa-file-name{font-size:0.85rem;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-file-meta{font-size:0.72rem;color:var(--text-dim);margin-top:0.15rem}
.fa-file-actions{display:flex;gap:0.35rem;flex-shrink:0}
.fa-file-action-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;border-radius:4px;font-size:0.75rem;transition:all 0.2s}
.fa-file-action-btn:hover{border-color:var(--gold-dk);color:var(--gold-dk)}
.fa-file-action-btn.danger:hover{border-color:#C0392B;color:#C0392B}
.fa-audio-row .fa-file-info{width:100%}
.fa-audio-row audio{width:100%;height:32px;margin-top:0.3rem}
.fa-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.6rem;padding:0 0.9rem 0.9rem}
.fa-image-tile{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--border);cursor:pointer}
.fa-image-tile img{width:100%;height:100%;object-fit:cover;display:block}
.fa-image-tile-overlay{position:absolute;inset:0;background:rgba(15,74,56,0.75);opacity:0;pointer-events:none;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center;gap:0.4rem}
.fa-image-tile:hover .fa-image-tile-overlay{opacity:1;pointer-events:auto}
.fa-image-tile-overlay button{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);cursor:pointer;font-size:0.7rem;display:flex;align-items:center;justify-content:center}
.fa-empty-note{font-family:'Montserrat',sans-serif;font-size:0.82rem;color:var(--text-dim);font-style:italic;padding:0 0.9rem 0.9rem}
/* Preview lightbox */
.fa-lightbox-overlay{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.88);align-items:center;justify-content:center;padding:2rem}
.fa-lightbox-overlay.open{display:flex}
.fa-lightbox-content{max-width:90vw;max-height:85vh}
.fa-lightbox-content img,.fa-lightbox-content video{max-width:90vw;max-height:80vh;border-radius:4px}
.fa-lightbox-close{position:absolute;top:1.2rem;right:1.5rem;color:#fff;font-size:1.6rem;background:none;border:none;cursor:pointer}
.fa-timeline-file{display:flex;align-items:center;gap:0.5rem}

/* ── BOOKING LIFECYCLE PROGRESS STEPPER ── */
.bd-stepper{display:flex;align-items:flex-start;gap:0}
.bd-step{flex:1;text-align:center;position:relative}
.bd-step-dot{width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid var(--border-bright);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem;font-size:0.65rem;color:var(--text-dim);position:relative;z-index:1}
.bd-step.done .bd-step-dot{background:#40815F;border-color:#40815F;color:#fff}
.bd-step.current .bd-step-dot{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 0 0 4px rgba(46,139,110,0.15)}
.bd-step-label{font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;letter-spacing:0.08em;color:var(--text-dim);text-transform:uppercase}
.bd-step.done .bd-step-label,.bd-step.current .bd-step-label{color:var(--text);font-weight:600}
.bd-step::before{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0}
.bd-step:first-child::before{display:none}
.bd-step.done::before{background:#40815F}
.bd-cancelled-banner{background:rgba(192,57,43,0.08);border:1px solid rgba(192,57,43,0.3);color:#C0392B;padding:0.8rem 1rem;font-family:'Gudlak Bold',sans-serif;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;text-align:center;border-radius:6px}

.nav-drawer{position:fixed;top:0;right:0;bottom:0;z-index:151;width:min(340px,88vw);background:linear-gradient(160deg,rgba(247,250,248,0.99),rgba(237,245,241,0.99));border-left:1px solid var(--border);transform:translateX(100%);transition:transform 0.4s cubic-bezier(0.22,0.8,0.32,1);display:flex;flex-direction:column;padding:0;overflow:hidden}
.nav-drawer.is-open{transform:translateX(0)}
@media(max-width:600px){
  .nav-drawer{width:100vw;width:100dvw}
}

.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid var(--border)}
.nav-drawer-brand{font-family:'Gudlak Bold',sans-serif;font-size:0.9rem;color:var(--gold);letter-spacing:0.08em}
.nav-drawer-close{background:transparent;border:1px solid var(--border);color:var(--text-dim);width:34px;height:34px;cursor:pointer;font-size:0.65rem;letter-spacing:0.1em;font-family:'Gudlak Bold',sans-serif;transition:all 0.3s;flex-shrink:0;border-radius:4px}
.nav-drawer-close:hover{border-color:var(--gold);color:var(--gold)}

.nav-drawer-links{flex:1;padding:1.5rem 0;overflow-y:auto}
.nav-drawer-group-label{font-family:'Gudlak Bold',sans-serif;font-size:0.58rem;letter-spacing:0.3em;color:var(--text-dim);text-transform:uppercase;padding:0.5rem 1.5rem 0.6rem;opacity:0.8}
.nav-drawer-link{display:flex;align-items:center;gap:0.75rem;padding:1.15rem 1.5rem;font-family:'Gudlak Bold',sans-serif;font-size:0.74rem;letter-spacing:0.2em;color:var(--text);font-weight:500;text-transform:uppercase;cursor:pointer;transition:all 0.25s;border-left:2px solid transparent;min-height:52px}
.nav-drawer-link:hover{color:var(--gold);background:rgba(46,139,110,0.05);border-left-color:rgb(40,122,97)}
.nav-drawer-link-dot{width:4px;height:4px;border:1px solid rgba(46,139,110,0.4);transform:rotate(45deg);flex-shrink:0;transition:background 0.25s}
.nav-drawer-link:hover .nav-drawer-link-dot{background:var(--gold);border-color:var(--gold)}
.nav-drawer-divider{height:1px;background:var(--border);margin:0.5rem 1.5rem}

.nav-drawer-foot{padding:1.5rem}
.nav-drawer-book-btn{width:100%;background:linear-gradient(135deg,var(--gold-dk),var(--gold));color:white;font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;letter-spacing:0.22em;padding:1rem;border:none;cursor:pointer;text-transform:uppercase;transition:all 0.35s;box-shadow:0 4px 20px rgba(46,139,110,0.22)}
.nav-drawer-book-btn:hover{box-shadow:0 6px 28px rgba(46,139,110,0.38);transform:translateY(-1px)}

/* ── GEOMETRIC BACKGROUND ── */
.stars-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;border-radius:50%;animation:twinkle var(--d,3s) var(--delay,0s) infinite alternate}
.star.dot{width:2px;height:2px;background:rgba(46,139,110,0.55)}
.star.cross{width:6px;height:6px;background:transparent;border:none}
.star.cross::before,.star.cross::after{content:'';position:absolute;background:rgba(46,139,110,0.35);border-radius:1px}
.star.cross::before{width:1px;height:100%;left:50%;transform:translateX(-50%)}
.star.cross::after{width:100%;height:1px;top:50%;transform:translateY(-50%)}
.star.ring{width:8px;height:8px;background:transparent;border:1px solid rgba(46,139,110,0.2);border-radius:50%}
@keyframes twinkle{from{opacity:0.1}to{opacity:0.9}}

/* ── HERO ── */
.hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:10.5rem 2rem 3.5rem;text-align:center;overflow:hidden;background:linear-gradient(180deg,#f0f8f4 0%,#e8f4ee 40%,#dff0e9 70%,#f0f8f4 100%);perspective:1200px}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at 50% 35%,rgba(46,139,110,0.11) 0%,rgba(46,139,110,0.04) 50%,transparent 80%);pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 40% at 50% 60%,rgba(255,255,255,0.6) 0%,transparent 70%);pointer-events:none;z-index:0}

/* Rotating sacred geometry ring and decorative depth-ring circles removed (v114/v117/v127) */

/* Pause all hero infinite animations once scrolled out of view (toggled by JS) */
.hero.hero-offscreen .float-card,
.hero.hero-offscreen .float-card-sheen,
.hero.hero-offscreen .hero-scroll-line{
  animation-play-state:paused;
}

/* Typography */
.hero-kicker{font-family:'Gudlak Bold',sans-serif;font-size:0.58rem;letter-spacing:0.65em;color:var(--gold-dk);text-transform:uppercase;margin-bottom:0.8rem;opacity:0;animation:reveal 1s 0.2s forwards;position:relative;z-index:5}
.hero-eyebrow{font-family:'Gudlak Bold',sans-serif;font-size:0.72rem;letter-spacing:0.45em;color:var(--gold);text-transform:uppercase;margin-bottom:1.8rem;opacity:0;animation:reveal 1s 0.4s forwards;position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:1rem}
.hero-eyebrow-line{display:inline-block;width:36px;height:1px;background:linear-gradient(to right,transparent,var(--gold));opacity:0.6}
.hero-eyebrow-line.r{background:linear-gradient(to left,transparent,var(--gold))}
.hero-title{font-family:'Gudlak Bold',sans-serif;font-size:clamp(2.8rem,8.5vw,5.8rem);font-weight:900;line-height:1.02;margin-bottom:0.6rem;color:var(--gold-dk);background:linear-gradient(165deg,#aad6c5 0%,#2E8B6E 30%,#1a6b52 60%,#0f4a38 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;animation:reveal 1.1s 0.55s forwards;position:relative;z-index:5;filter:drop-shadow(0 4px 32px rgba(46,139,110,0.18)) drop-shadow(0 1px 2px rgba(46,139,110,0.1));letter-spacing:-0.01em;white-space:nowrap;font-kerning:none;font-feature-settings:"kern" 0}
.hero-title-the{display:block;font-size:1em;letter-spacing:-0.01em;font-weight:900;margin-bottom:0.1em;background:linear-gradient(165deg,#aad6c5 0%,#2E8B6E 30%,#1a6b52 60%,#0f4a38 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-dk);text-shadow:none;font-kerning:none;font-feature-settings:"kern" 0}
@media(max-width:600px){.hero-title{white-space:normal}}
.hero-divider-line{display:flex;align-items:center;justify-content:center;gap:0.7rem;margin:1.1rem auto;opacity:0;animation:reveal 1s 0.75s forwards;position:relative;z-index:5}
.hero-divider-line span{width:50px;height:1px;background:linear-gradient(to right,transparent,rgba(46,139,110,0.4),transparent)}
.hero-divider-symbol{font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;color:var(--gold-dk);letter-spacing:0.4em}
.hero-sub{font-family:'Gudlak Bold',sans-serif;font-size:clamp(0.72rem,2vw,0.88rem);letter-spacing:0.5em;color:rgb(26,112,85);margin-bottom:0.2rem;opacity:0;animation:reveal 1s 0.65s forwards;text-transform:uppercase;position:relative;z-index:5}
.hero-desc{font-size:clamp(1.08rem,2.5vw,1.24rem);font-weight:400;color:var(--text-readable);max-width:460px;margin:1.4rem auto 3rem;line-height:1.85;opacity:0;animation:reveal 1s 0.9s forwards;position:relative;z-index:5;letter-spacing:0.01em}
.hero-ctas{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:reveal 1s 1.1s forwards;position:relative;z-index:5}
@keyframes reveal{to{opacity:1;transform:none}}

/* Scroll cue */
.hero-scroll-cue{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0;animation:reveal 1s 1.6s forwards;z-index:5;cursor:default}
.hero-scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(46,139,110,0.4),transparent);animation:scrollLine 2s ease-in-out 2s infinite}
@keyframes scrollLine{0%,100%{transform:scaleY(1);opacity:0.4}50%{transform:scaleY(0.6);opacity:1}}

/* ── PREMIUM FLOATING TAROT CARDS ── */
.cards-float{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
/* Keep hero content (kicker, title, CTAs) above the floating cards visually
   and ensure floating cards never intrude on the central content column */
.hero-kicker,.hero-eyebrow,.hero-title,.hero-sub,.hero-divider-line,.hero-desc,.hero-ctas{position:relative;z-index:5}
@media(min-width:769px){
  /* Push edge cards slightly further out on wide viewports so the
     center content column (roughly 30%–70%) is always clear */
  .float-card{max-width:8vw}
}

/* Layer depth groups */
.float-card{position:absolute;border-radius:6px;animation:floatCard var(--dur,8s) var(--delay,0s) infinite ease-in-out alternate;overflow:hidden;transform-origin:center center;will-change:transform}
/* Far layer — smaller, dimmer, slower (sized -25% from original) */
.float-card.layer-far{width:38px;height:65px;box-shadow:0 6px 24px rgba(46,139,110,0.1),0 2px 6px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.8);opacity:0.5;filter:blur(0.5px)}
/* Mid layer (sized -25% from original) */
.float-card.layer-mid{width:48px;height:83px;box-shadow:0 10px 32px rgba(46,139,110,0.15),0 3px 10px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.9);opacity:0.8}
/* Near layer — largest, sharpest (sized -25% from original) */
.float-card.layer-near{width:59px;height:101px;box-shadow:0 16px 50px rgba(46,139,110,0.2),0 5px 16px rgba(0,0,0,0.07),inset 0 1px 0 rgba(255,255,255,1);opacity:1}

.float-card-inner{width:100%;height:100%;position:relative;background:linear-gradient(155deg,#ffffff 0%,#eef8f3 35%,#e0f2ea 65%,#d6ecdf 100%);border:1px solid rgba(46,139,110,0.28)}
.float-card-inner::before{content:'';position:absolute;inset:5px;border:0.5px solid rgba(46,139,110,0.18);pointer-events:none;z-index:1}
.float-card-inner::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.5) 0%,transparent 60%);pointer-events:none;z-index:2}

/* Card sheen on hover */
.float-card-sheen{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 60%);z-index:3;animation:cardSheen var(--sdur,6s) var(--sdelay,0s) infinite ease-in-out}
@keyframes cardSheen{0%,100%{transform:translateX(-120%) skewX(-20deg)}50%{transform:translateX(220%) skewX(-20deg)}}

.float-card-numeral{position:absolute;top:7px;left:7px;font-family:'Gudlak Bold',sans-serif;font-size:0.44rem;letter-spacing:0.06em;color:var(--gold-dk);line-height:1;z-index:4}
.float-card-numeral-bot{position:absolute;bottom:7px;right:7px;font-family:'Gudlak Bold',sans-serif;font-size:0.44rem;letter-spacing:0.06em;color:var(--gold-dk);line-height:1;transform:rotate(180deg);z-index:4}
.float-card-name{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:'Gudlak Bold',sans-serif;font-size:0.33rem;letter-spacing:0.14em;color:var(--gold-dk);text-transform:uppercase;z-index:4}
.float-card-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4}

@keyframes floatCard{
  from{transform:translateY(0) rotate(var(--r,-5deg)) scale(var(--sc,1)) translateZ(var(--tz,0px))}
  to{transform:translateY(var(--fy,-20px)) rotate(var(--r2,5deg)) scale(var(--sc2,1)) translateZ(var(--tz2,0px))}
}

@media(max-width:768px){
  .float-card.layer-far{display:none}
  .float-card.layer-near{width:47px;height:80px;opacity:0.65}
  .float-card.layer-mid{width:39px;height:68px;opacity:0.6}
  .hero-title{font-size:clamp(2.4rem,11vw,3.5rem)}
  .hero{padding:9rem 1.5rem 3rem}
  .hero-desc{margin-bottom:2rem;margin-top:1rem}
}

/* ── BUTTONS ── */
.btn-primary{background:linear-gradient(135deg,var(--gold-dk),var(--gold));color:white;font-family:'Gudlak Bold',sans-serif;font-size:0.72rem;letter-spacing:0.22em;padding:1rem 2.5rem;border:none;cursor:pointer;text-transform:uppercase;transition:all 0.35s;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(46,139,110,0.25);border-radius:4px}
.btn-primary::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.12);opacity:0;transition:opacity 0.3s}
.btn-primary:hover{box-shadow:0 6px 28px rgba(46,139,110,0.4);transform:translateY(-1px)}
.btn-primary:hover::after{opacity:1}
.btn-secondary{background:transparent;border:1px solid var(--border-bright);color:var(--gold);font-family:'Gudlak Bold',sans-serif;font-size:0.72rem;letter-spacing:0.22em;padding:1rem 2.5rem;cursor:pointer;text-transform:uppercase;transition:all 0.35s;position:relative;overflow:hidden;border-radius:4px}
.btn-secondary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(46,139,110,0.08),transparent);opacity:0;transition:opacity 0.3s}
.btn-secondary:hover{background:rgba(46,139,110,0.08);border-color:var(--gold);box-shadow:inset 0 0 20px rgba(46,139,110,0.08)}
.btn-secondary:hover::before{opacity:1}

/* ── SECTION STYLES ── */
/* V27: Standardised to 5rem top/bottom throughout. Individual overrides removed below. */
section{padding:1.75rem 2.5rem;max-width:100%;margin:0 auto;position:relative;z-index:1;scroll-margin-top:90px;scroll-margin-top:calc(var(--nav-h,90px) + 14px)}
/* Full-bleed alternating tint bands so sections read as distinct, not one flat block (V57) */
.section-band{position:relative;width:100%}
.section-band-about{background:#E3F1EA;border-top:1px solid rgba(46,139,110,0.14);border-bottom:1px solid rgba(46,139,110,0.14)}
.section-band-services{background:#D2E8DD;border-top:1px solid rgba(46,139,110,0.14);border-bottom:1px solid rgba(46,139,110,0.14)}
.section-band-testimonials{background:#E3F1EA;border-top:1px solid rgba(46,139,110,0.14);border-bottom:1px solid rgba(46,139,110,0.14)}
.section-band-draw-card{background:#E3F1EA;border-top:1px solid rgba(46,139,110,0.14);border-bottom:1px solid rgba(46,139,110,0.14)}
#draw-a-card .section-eyebrow{color:var(--gold-dk);opacity:1;font-weight:600}
.section-eyebrow{font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;font-weight:600;letter-spacing:0.45em;color:var(--gold-dk);text-transform:uppercase;text-align:center;margin-bottom:1rem;opacity:0.95}
.section-title{font-family:'Gudlak Bold',sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);text-align:center;margin-bottom:1rem;letter-spacing:0.02em;color:var(--gold-dk);background:linear-gradient(145deg,var(--text) 0%,var(--gold) 60%,var(--gold-dk) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-sub{text-align:center;color:var(--text-readable);font-size:1.12rem;font-style:italic;max-width:500px;margin:0 auto 2rem;line-height:1.9;letter-spacing:0.01em}
.divider{width:100px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:1.5rem auto;position:relative}
.divider::before{content:'◇';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.5rem;color:var(--gold);background:var(--bg);padding:0 6px}

/* ── ABOUT ── */
.about-visual{position:relative}
.about-frame{width:100%;max-width:260px;margin:0 auto;aspect-ratio:3/4.2;position:relative;perspective:1400px}

/* ── DRAW A CARD: shuffle + draw animations ── */
.tflip.shuffling{animation:tflipShuffle 0.45s ease-in-out infinite}
@keyframes tflipShuffle{
  0%,100%{transform:translateX(0) rotate(0deg)}
  25%{transform:translateX(-5px) rotate(-2.5deg)}
  75%{transform:translateX(5px) rotate(2.5deg)}
}
.about-frame.is-shuffling::before,.about-frame.is-shuffling::after{
  content:'';position:absolute;inset:0;border:1px solid rgba(46,139,110,0.3);
  pointer-events:none;animation:tflipEcho 0.45s ease-in-out infinite;z-index:-1;
}
.about-frame.is-shuffling::after{animation-delay:0.15s;border-color:rgb(40,122,97)}
@keyframes tflipEcho{
  0%,100%{transform:translate(0,0) rotate(0deg);opacity:0.55}
  50%{transform:translate(7px,-5px) rotate(3deg);opacity:0.15}
}
.tflip.drawing{animation:tflipDrawPulse 0.18s ease-in-out infinite}
@keyframes tflipDrawPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
  .tflip.shuffling,.tflip.drawing{animation:none}
  .about-frame.is-shuffling::before,.about-frame.is-shuffling::after{animation:none;display:none}
}
/* ── Interactive flip tarot card (replaces static moon card) ── */
.tflip{width:100%;height:100%;position:relative;cursor:pointer}
.tflip-inner{position:relative;width:100%;height:100%;transition:transform 0.7s cubic-bezier(0.22,1,0.36,1);transform-style:preserve-3d}
.tflip.flipped .tflip-inner{transform:rotateY(180deg)}
.tflip.tapped .tflip-inner{animation:tflipWiggle 0.45s cubic-bezier(0.34,1.56,0.64,1)}
.tflip.flipped.tapped .tflip-inner{animation:tflipWiggleFlipped 0.45s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes tflipWiggle{0%{transform:scale(1) rotate(0deg)}30%{transform:scale(0.94) rotate(-3deg)}60%{transform:scale(1.03) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes tflipWiggleFlipped{0%{transform:rotateY(180deg) scale(1) rotate(0deg)}30%{transform:rotateY(180deg) scale(0.94) rotate(3deg)}60%{transform:rotateY(180deg) scale(1.03) rotate(-2deg)}100%{transform:rotateY(180deg) scale(1) rotate(0deg)}}
@media(prefers-reduced-motion: reduce){.tflip.tapped .tflip-inner,.tflip.flipped.tapped .tflip-inner{animation:none}}
.tflip-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--border-bright);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(46,139,110,0.1)}
.tflip-front{background:linear-gradient(160deg,#f0f8f4,#e2efe9);padding:1.5rem}
.tflip-back{background:linear-gradient(160deg,#0f2a21,#163d30);transform:rotateY(180deg);padding:1.1rem 1.15rem;text-align:center;gap:0}
.tflip-front-rule{position:absolute;inset:10px;border:1px solid rgba(46,139,110,0.3)}
.tflip-front-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72%;height:auto;color:var(--gold-dk);opacity:0.07;z-index:0;pointer-events:none}
.tflip-numeral{font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.3em;color:var(--gold-dk);text-transform:uppercase;margin-bottom:0.9rem;position:relative;z-index:1}
.tflip-front-svg{position:relative;z-index:1;margin-bottom:0.9rem}
.tflip-front-name{font-family:'Gudlak Bold',sans-serif;font-size:1.05rem;color:var(--gold-dk);letter-spacing:0.04em;text-align:center;position:relative;z-index:1}
.tflip-hint{position:absolute;bottom:13px;left:10px;right:10px;text-align:center;font-family:'Gudlak Bold',sans-serif;font-size:0.44rem;line-height:1.6;letter-spacing:0.12em;color:var(--gold-dk);text-transform:uppercase;z-index:1;opacity:0.85}
.tflip-back-art{width:38px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:0.35rem;background:radial-gradient(ellipse at center,rgba(184,220,206,0.14),transparent 70%);border-radius:4px}
.tflip-back-art svg{width:30px;height:38px}
.tflip-back-name{font-family:'Gudlak Bold',sans-serif;font-size:1rem;color:#dff0e7;margin-bottom:0.15rem;letter-spacing:0.03em}
.tflip-back-numeral{font-family:'Gudlak Bold',sans-serif;font-size:0.5rem;letter-spacing:0.28em;color:#8CD7BE;text-transform:uppercase;opacity:0.85;margin-bottom:0.55rem}
.tflip-back-rule{width:28px;height:1px;background:rgba(184,220,206,0.4);margin-bottom:0.55rem}
.tflip-back-desc{font-family:'Montserrat',sans-serif;font-style:italic;font-size:0.78rem;line-height:1.45;color:#DFF0E7}
.tflip-back-guidance{margin-top:0.55rem;padding-top:0.55rem;border-top:1px solid rgba(184,220,206,0.22);width:100%}
.tflip-back-guidance-label{display:block;font-family:'Gudlak Bold',sans-serif;font-size:0.46rem;letter-spacing:0.2em;color:var(--gold,#C9A84C);text-transform:uppercase;margin-bottom:0.3rem}
.tflip-back-guidance p{font-family:'Montserrat',sans-serif;font-size:0.74rem;line-height:1.4;color:#B8DCCE}
.tflip-caption{text-align:center;margin-top:0.9rem;font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;letter-spacing:0.22em;color:var(--text-dim);text-transform:uppercase}
.about-frame::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(46,139,110,0.08),transparent 60%);pointer-events:none}
.about-corner{position:absolute;width:24px;height:24px;border-color:var(--gold)}
.about-corner.tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.about-corner.tr{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid}
.about-corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid;border-left:2px solid}
.about-corner.br{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.about-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}
.stat{text-align:center}
.stat-num{font-family:'Gudlak Bold',sans-serif;font-weight:700;font-size:2.1rem;color:var(--gold-dk);display:block;text-shadow:0 0 12px rgba(46,139,110,0.1);font-variant-numeric:tabular-nums}
.stat-label{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;font-weight:600;letter-spacing:0.25em;color:var(--text-dim);text-transform:uppercase;margin-top:0.3rem;display:block}
.about-stats-center{justify-content:center;flex-wrap:nowrap;gap:clamp(1.1rem,5vw,3.2rem)}
.about-stats-center .stat-num{font-size:clamp(1.55rem,6vw,2.5rem);white-space:nowrap}
.about-stats-center .stat-label{font-size:clamp(0.5rem,1.8vw,0.65rem);letter-spacing:0.16em;white-space:normal;margin-top:0.5rem;line-height:1.4}
@media(max-width:480px){
  .about-stats-center{gap:0.7rem}
  .about-stats-center .stat-label{letter-spacing:0.06em}
}

/* Draw a Card: side-by-side on tablet/desktop; stacks cleanly on phones so the card stays legible */
.draw-card-row{
  display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:center;
  gap:clamp(1.2rem,4vw,4rem);
  margin-top:1.75rem;text-align:left
}
.draw-card-visual{
  flex:0 1 260px;min-width:0;margin:0;
}
.draw-card-visual .about-frame{max-width:100%;width:clamp(120px,32vw,260px)}
.draw-card-text{flex:1 1 360px;min-width:0}
.draw-card-text h3{font-family:'Gudlak Bold',sans-serif;color:var(--gold-dk);margin-bottom:1.2rem;line-height:1.35;letter-spacing:0.02em;font-size:clamp(1.05rem,3.2vw,1.75rem)}
.draw-card-text p{color:var(--text-readable);line-height:1.9;margin-bottom:1.1rem;font-size:clamp(0.8rem,2.4vw,1.08rem)}
@media(max-width:600px){
  .draw-card-row{
    flex-direction:column;
    align-items:center;
    gap:2rem;
    margin-top:1.5rem;
    text-align:center;
  }
  .draw-card-visual{flex:0 0 auto;width:min(220px,62vw)}
  .draw-card-visual .about-frame{width:100%;max-width:220px}
  .draw-card-text{flex:0 0 auto;width:100%;text-align:left}
  .draw-card-text h3{text-align:center;font-size:1.3rem}
  .draw-card-text p{font-size:0.98rem;line-height:1.85}
}

/* About stats standalone (heading/paragraph moved to Draw a Card section) */
.about-stats-standalone{
  margin-top:1.5rem;padding-top:0;border-top:none;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2.5rem;max-width:1150px;margin-left:auto;margin-right:auto;
  width:100%;justify-items:center;align-items:start
}
.about-stats-standalone .stat{width:100%;text-align:center}
@media(max-width:768px){
  .about-stats-standalone{gap:1.5rem;max-width:100%}
}
@media(max-width:480px){
  .about-stats-standalone{gap:1.1rem}
}


/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.service-card{
  border:1px solid var(--border);
  background:linear-gradient(155deg,rgba(255,255,255,0.97) 0%,rgba(240,249,244,0.85) 60%,rgba(232,244,238,0.7) 100%);
  padding:0;cursor:pointer;transition:all 0.45s cubic-bezier(0.22,0.8,0.32,1);
  position:relative;overflow:hidden;
  box-shadow:0 2px 16px rgba(46,139,110,0.06),0 1px 4px rgba(0,0,0,0.03);
  display:flex;flex-direction:column;
}
/* Top accent line */
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent 5%,rgba(46,139,110,0.55) 35%,rgba(46,139,110,0.8) 50%,rgba(46,139,110,0.55) 65%,transparent 95%);
  opacity:0;transition:opacity 0.4s;z-index:2
}
/* Radial inner glow on hover */
.service-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(46,139,110,0.07) 0%,transparent 70%);
  opacity:0;transition:opacity 0.4s
}
.service-card:hover{
  border-color:rgb(40,122,97);
  transform:translateY(-6px) scale(1.008);
  box-shadow:0 20px 50px rgba(46,139,110,0.14),0 6px 16px rgba(46,139,110,0.08),0 2px 4px rgba(0,0,0,0.04);
}
.service-card:hover::before,.service-card:hover::after{opacity:1}

/* Card inner padding wrapper */
.service-card-body{padding:2rem 2rem 1.7rem;flex:1 1 auto}

/* Icon container */
.service-icon-wrap{
  width:60px;height:60px;
  border:1px solid rgba(46,139,110,0.2);
  background:linear-gradient(145deg,rgba(255,255,255,0.9),rgba(232,244,238,0.6));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.4rem;
  position:relative;
  transition:border-color 0.4s,box-shadow 0.4s;
  box-shadow:0 2px 10px rgba(46,139,110,0.06)
}
.service-icon-wrap::before{
  content:'';position:absolute;inset:-4px;
  border:1px solid rgba(46,139,110,0.08);
  pointer-events:none;
  transition:border-color 0.4s
}
.service-card:hover .service-icon-wrap{
  border-color:rgb(40,122,97);
  box-shadow:0 4px 18px rgba(46,139,110,0.14)
}
.service-card:hover .service-icon-wrap::before{border-color:rgb(40,122,97)}

.service-icon{display:block}

/* Eyebrow category label */
.service-eyebrow{
  font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;letter-spacing:0.45em;
  color:var(--gold-dk);text-transform:uppercase;
  margin-bottom:0.55rem;display:block
}
.service-card h3{
  font-family:'Gudlak Bold',sans-serif;font-size:1rem;letter-spacing:0.12em;
  color:var(--gold);margin-bottom:0.2rem;text-transform:uppercase;
  line-height:1.3
}
/* Ornamental rule under heading */
.service-rule{
  display:flex;align-items:center;gap:0.5rem;margin:0.85rem 0 1.1rem;
}
.service-rule-line{
  width:28px;height:1px;
  background:linear-gradient(to right,rgba(46,139,110,0.4),transparent);
}
.service-rule-dot{
  width:4px;height:4px;border:1px solid rgba(46,139,110,0.4);
  transform:rotate(45deg);flex-shrink:0
}

.service-card p{
  color:var(--text-readable);font-size:1.03rem;line-height:1.95;
  margin-bottom:0;letter-spacing:0.01em
}

/* Feature tag chips (replaces long descriptive copy — V57) */
.service-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.2rem}
.service-chip{
  font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;letter-spacing:0.1em;
  color:var(--gold-dk);border:1px solid rgba(46,139,110,0.28);
  padding:0.32rem 0.75rem;text-transform:uppercase;
  background:rgba(46,139,110,0.045);border-radius:4px;
  white-space:nowrap;transition:background 0.3s,border-color 0.3s,transform 0.3s
}
.service-card:hover .service-chip{border-color:rgb(40,122,97)}
.service-chip:nth-child(1){transition-delay:0.02s}
.service-chip:nth-child(2){transition-delay:0.06s}
.service-chip:nth-child(3){transition-delay:0.1s}
.service-chip:nth-child(4){transition-delay:0.14s}
.service-card:hover .service-chip{transform:translateY(-2px)}

/* Icon micro-animation on hover (premium feel) */
.service-icon-wrap{transform:scale(1) rotate(0deg)}
.service-card:hover .service-icon-wrap{transform:scale(1.06) rotate(-3deg)}
.service-icon-wrap,.service-card:hover .service-icon-wrap{transition:border-color 0.4s,box-shadow 0.4s,transform 0.5s cubic-bezier(0.22,0.8,0.32,1)}

/* Card footer bar */
.service-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem 2rem 1.1rem;
  border-top:1px solid rgba(46,139,110,0.1);
  margin-top:1.4rem
}
.service-tag{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:'Gudlak Bold',sans-serif;font-size:0.55rem;letter-spacing:0.25em;
  color:var(--gold-dk);border:1px solid rgba(46,139,110,0.25);
  padding:0.35rem 1rem;text-transform:uppercase;
  background:rgba(46,139,110,0.04);
  transition:background 0.3s,border-color 0.3s
}
.service-card:hover .service-tag{
  background:rgba(46,139,110,0.08);
  border-color:rgb(40,122,97)
}
.service-tag-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(46,139,110,0.45);flex-shrink:0
}

.service-arrow{
  display:flex;align-items:center;gap:0.4rem;
  color:var(--gold-dk);font-size:0.62rem;
  font-family:'Gudlak Bold',sans-serif;letter-spacing:0.18em;
  text-transform:uppercase;font-weight:600;
  border:1px solid rgba(46,139,110,0.3);
  background:rgba(46,139,110,0.08);
  padding:0.5rem 0.9rem;border-radius:2px;
  transition:all 0.35s
}
.service-arrow svg{transition:transform 0.3s}
.service-card:hover .service-arrow{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:0 4px 14px rgba(46,139,110,0.25)}
.service-card:hover .service-arrow svg path{stroke:#fff}
.service-card:hover .service-arrow svg{transform:translateX(3px)}

/* ── SERVICES — CIRCULAR, BOX-FREE LAYOUT (V64) ── */
/* ── SERVICES V2: compact 2x2 card grid, CTA near top, clear differentiator badge ── */
.services-grid-v2{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.75rem;margin-top:1.5rem;
}
.svc-card2{
  position:relative;
  border:1px solid var(--border);
  border-top:3px solid rgb(var(--svc-c));
  background:linear-gradient(160deg,rgba(255,255,255,0.97) 0%,rgba(var(--svc-c),0.05) 100%);
  padding:1.75rem 1.75rem 1.5rem;
  transition:transform 0.35s cubic-bezier(0.22,0.8,0.32,1),box-shadow 0.35s,border-color 0.35s;
  display:flex;flex-direction:column;
  border-radius:8px;
  overflow:hidden;
}
.svc-card2:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(var(--svc-c),0.16);border-color:rgba(var(--svc-c),0.4)}
.svc2-bgart{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center}
.svc2-bgart svg{width:148px;height:148px;color:rgb(var(--svc-c));opacity:0.06}
.svc-card2:hover .svc2-bgart svg{opacity:0.08;transition:opacity 0.35s}
.svc2-top{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:1rem;position:relative;z-index:1}
.svc-card2 h3,.svc2-cta,.svc2-desc{position:relative;z-index:1}
.svc2-icon{
  flex-shrink:0;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:rgb(var(--svc-c));
  background:radial-gradient(circle at 35% 30%,rgba(var(--svc-c),0.16),rgba(var(--svc-c),0.05));
  border:1.5px solid rgba(var(--svc-c),0.35);
}
.svc2-badge{
  font-family:'Gudlak Bold',sans-serif;font-size:0.58rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:#fff;
  border:1px solid rgba(var(--svc-c),0.5);background:rgb(var(--svc-c));
  padding:0.35rem 0.7rem;white-space:nowrap;border-radius:4px;
}
.svc-card2 h3{
  font-family:'Gudlak Bold',sans-serif;font-size:1.15rem;letter-spacing:0.05em;
  color:rgb(var(--svc-c));margin-bottom:0.9rem;line-height:1.3;
}
.svc2-cta{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:'Gudlak Bold',sans-serif;font-size:0.68rem;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:600;color:#fff;
  background:rgb(var(--svc-c));border:none;cursor:pointer;
  padding:0.7rem 1.2rem;width:100%;justify-content:center;
  margin-bottom:1rem;transition:all 0.3s;border-radius:4px;
}
.svc2-cta:hover{box-shadow:0 6px 18px rgba(var(--svc-c),0.35);transform:translateY(-1px)}
.svc2-cta svg{transition:transform 0.3s}
.svc2-cta:hover svg{transform:translateX(3px)}
.svc2-desc{color:var(--text-readable);font-size:0.94rem;line-height:1.65;margin-bottom:1.1rem;flex:1 1 auto}
@media(max-width:768px){
  .services-grid-v2{grid-template-columns:1fr;gap:1.25rem}
  .svc-card2{padding:1.5rem 1.5rem 1.25rem}
}

/* ── TESTIMONIALS (see marquee rules below) ── */

/* ── CTA SECTION ── */
.cta-section{text-align:center;padding:1.75rem 2rem;position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(46,139,110,0.08) 0%,transparent 70%);pointer-events:none}
.cta-section::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 30% 40% at 50% 50%,rgba(46,139,110,0.04) 0%,transparent 60%);pointer-events:none}
.cta-section .section-title{font-size:clamp(2.2rem,5vw,3.4rem)}
.cta-section .section-sub{font-size:1.18rem;max-width:640px;margin-left:auto;margin-right:auto}
.cta-section .btn-primary,.cta-section .btn-secondary{padding:1.25rem 2.9rem;font-size:0.8rem}
.cta-ornament{font-family:'Gudlak Bold',sans-serif;font-size:1rem;color:var(--gold);opacity:0.4;display:block;margin-bottom:1rem;letter-spacing:0.8em}

/* ── FOOTER ── */
footer{padding:1.75rem 1.25rem 1.5rem;border-top:1px solid var(--border);max-width:1320px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:1.75rem}
.footer-brand .nav-logo{display:inline-block;margin-bottom:0.6rem}
.footer-brand p{color:var(--text-dim);font-size:0.86rem;line-height:1.6;max-width:280px}
.footer-col h4{font-family:'Gudlak Bold',sans-serif;font-size:0.68rem;letter-spacing:0.3em;color:var(--gold);text-transform:uppercase;margin-bottom:0.9rem}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:0.45rem}
.footer-col ul li a{color:var(--text-dim);font-size:0.86rem;text-decoration:none;cursor:pointer;transition:color 0.3s}
.footer-col ul li a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:var(--text-dim);font-size:0.72rem;line-height:1.5}
.footer-social{display:flex;gap:1rem}
.social-link{width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;font-size:0.8rem;color:var(--text-dim);border-radius:6px}
.social-link:hover{border-color:var(--gold);color:var(--gold)}

/* ── BOOKING PAGES ── */
.booking-page{min-height:100vh;min-height:100dvh;padding:8rem 2rem 4rem;max-width:750px;margin:0 auto;position:relative;z-index:1}
/* Guarantees clearance under the fixed nav even if the nav renders taller
   than the 8rem assumption above (larger logo, OS font metrics, zoom, DPI
   scaling) — never shrinks the existing spacing, only raises it if needed. */
.booking-page{padding-top:max(8rem,calc(var(--nav-h,137px) + 24px))}
.booking-header{text-align:center;margin-bottom:3rem}
.booking-header h1{font-family:'Gudlak Bold',sans-serif;font-size:2rem;color:var(--gold);margin-bottom:0.75rem}
.booking-header p{color:var(--text-muted);font-style:italic}
/* ── SHOP PAGE HERO ── */
.shop-page-hero{text-align:center;padding:8rem 2rem 2.5rem;max-width:700px;margin:0 auto}
.shop-page-hero{padding-top:max(8rem,calc(var(--nav-h,137px) + 24px))}
.shop-page-title{font-family:'Gudlak Bold',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--gold);margin:0.6rem 0 0.9rem;line-height:1.2}
.shop-page-sub{color:var(--text-muted);font-style:italic;font-family:'Montserrat',sans-serif;font-size:1.05rem;line-height:1.7}
@media(max-width:600px){.shop-page-hero{padding:6.5rem 1.25rem 1.5rem}.shop-page-hero{padding-top:max(6.5rem,calc(var(--nav-h,110px) + 16px))}}
.progress-bar{display:flex;justify-content:center;gap:0;margin-bottom:3rem;overflow-x:auto;padding-bottom:0.25rem}
.progress-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;position:relative;min-width:64px}
.progress-step+.progress-step::before{content:'';position:absolute;right:50%;top:16px;width:100%;height:1px;background:var(--border);z-index:-1}
.progress-step.done+.progress-step::before{background:var(--gold)}
.step-dot{width:32px;height:32px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;color:var(--text-dim);background:var(--bg);position:relative;z-index:1;transition:all 0.3s}
.progress-step.active .step-dot{border-color:var(--gold);color:var(--gold);background:rgba(46,139,110,0.1)}
.progress-step.done .step-dot{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.step-label{font-family:'Gudlak Bold',sans-serif;font-size:0.55rem;letter-spacing:0.15em;color:var(--text-dim);text-transform:uppercase;white-space:nowrap}
.progress-step.active .step-label{color:var(--gold)}

/* ── FORM ── */
.form-card{border:1px solid var(--border);background:rgba(255,255,255,0.8);padding:2.5rem;margin-bottom:1.5rem;border-radius:8px}
.form-card h2{font-family:'Gudlak Bold',sans-serif;font-size:0.9rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:0.5rem}
.form-group.full{grid-column:1/-1}
label{font-family:'Gudlak Bold',sans-serif;font-size:0.67rem;font-weight:600;letter-spacing:0.2em;color:var(--text-readable);text-transform:uppercase}
input::placeholder,textarea::placeholder{color:var(--text-dim);opacity:1}
input,select,textarea{background:rgba(247,250,248,0.9);border:1px solid rgba(46,139,110,0.2);color:var(--text);font-family:'Montserrat',sans-serif;font-size:1rem;padding:0.85rem 1rem;transition:border-color 0.3s;outline:none;width:100%;border-radius:4px}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
select option{background:var(--bg2)}
textarea{resize:vertical;min-height:100px}
.form-nav{display:flex;justify-content:space-between;align-items:flex-start;margin-top:1.5rem;gap:1rem;flex-wrap:wrap}

/* ── SERVICE SELECTION CARDS ── */
.service-select-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-bottom:1.5rem}

/* ── READING FORMAT: dropdown selects (replaces long list of individual cards) ── */
.reading-select-label{
  display:block;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--text-readable);margin-bottom:0.5rem
}
.reading-select{
  width:100%;padding:0.85rem 1rem;
  font-family:'Montserrat',sans-serif;font-size:1rem;color:var(--text);
  background:linear-gradient(150deg,rgba(255,255,255,0.95),rgba(240,249,244,0.7));
  border:1px solid var(--border);cursor:pointer;
  transition:border-color 0.3s,box-shadow 0.3s;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%232E8B6E' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;
  border-radius:4px;
}
.reading-select:hover,.reading-select:focus{border-color:var(--border-bright);outline:none;box-shadow:0 0 0 3px rgba(46,139,110,0.08)}
.reading-select.has-value{color:var(--gold-dk);font-weight:600}
@media(max-width:640px){
  .reading-select{font-size:0.92rem;padding:0.75rem 0.9rem}
}

.service-select-card{
  border:1px solid var(--border);
  padding:1.6rem 1.6rem 1.4rem;
  cursor:pointer;
  transition:all 0.32s cubic-bezier(0.22,0.8,0.32,1);
  position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,0.95),rgba(240,249,244,0.7));
  box-shadow:0 1px 8px rgba(46,139,110,0.04);
  border-radius:8px;
  display:flex;flex-direction:column;height:100%
}
.service-select-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent 10%,rgba(46,139,110,0.5) 50%,transparent 90%);
  opacity:0;transition:opacity 0.3s
}
.service-select-card:hover{
  border-color:rgb(40,122,97);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(46,139,110,0.1)
}
.service-select-card:hover::before{opacity:1}
.service-select-card.selected{
  border-color:var(--gold);
  background:linear-gradient(150deg,rgba(232,249,241,0.9),rgba(220,243,233,0.8));
  box-shadow:0 6px 20px rgba(46,139,110,0.12)
}
.service-select-card.selected::before{opacity:1}
.service-select-card .check{
  position:absolute;top:1.1rem;right:1.1rem;
  width:22px;height:22px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;transition:all 0.3s;
  background:rgba(255,255,255,0.7)
}
.service-select-card.selected .check{
  background:var(--gold);border-color:var(--gold);color:var(--bg);
  box-shadow:0 2px 8px rgba(46,139,110,0.25)
}
/* Energy Healing quick-select cards (Switchwords/Sigils/Energy Circle/Bay Leaf):
   these use centered plain-text labels rather than the .sc-eyebrow/h3 layout,
   so the selection checkmark in the top-right corner can sit on top of the
   heading text. Reserve clear space for it so the two never overlap. */
#eh-sw > div, #eh-si > div, #eh-ec > div{padding-left:1.7rem;padding-right:1.7rem}
/* Pull the selection checkmark further into the top-right corner on these
   3 cards so it never sits close to/overlaps the title text below it. */
#eh-sw .check, #eh-si .check, #eh-ec .check{top:0.65rem;right:0.6rem}
/* Nudge content vertically toward center so shorter cards (e.g. Switchwords,
   Sigils) don't sit awkwardly high with empty space below, once the row is
   stretched to match the tallest card (Energy Circle). Card height unchanged. */
#eh-sw, #eh-si, #eh-ec{justify-content:center}
#eh-bl1, #eh-bl2, #eh-bl3, #eh-bl4{padding-top:2.2rem!important}
/* Card eyebrow */
.service-select-card .sc-eyebrow{
  font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;font-weight:700;letter-spacing:0.28em;
  color:var(--text);text-transform:uppercase;
  display:block;margin-bottom:0.5rem
}
.service-select-card h3{
  font-family:'Gudlak Bold',sans-serif;font-size:0.86rem;letter-spacing:0.14em;
  color:var(--gold-dk);text-transform:uppercase;margin-bottom:0;
  line-height:1.4;padding-right:2rem
}
/* Thin rule under heading */
.service-select-card .sc-rule{
  width:24px;height:1px;
  background:linear-gradient(to right,rgba(46,139,110,0.45),transparent);
  margin:0.6rem 0 0.65rem
}
.service-select-card p{
  color:var(--text-readable);font-size:0.9rem;line-height:1.8;
  margin-bottom:0.85rem;flex:1 1 auto
}
/* ── BOOKING SUMMARY BAR ── */
.booking-summary{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--border);
  background:linear-gradient(to right,rgba(232,244,238,0.6),rgba(255,255,255,0.9));
  margin-bottom:1.5rem;overflow:hidden;
  border-radius:6px
}
.booking-summary-item{
  flex:1;padding:0.85rem 1.1rem;
  border-right:1px solid var(--border);
  text-align:center
}
.booking-summary-item:last-child{border-right:none}
.booking-summary-label{
  font-family:'Gudlak Bold',sans-serif;font-size:0.5rem;font-weight:600;letter-spacing:0.26em;
  color:var(--text-readable);text-transform:uppercase;
  display:block;margin-bottom:0.25rem
}
.booking-summary-value{
  font-family:'Gudlak Bold',sans-serif;font-size:0.74rem;font-weight:600;letter-spacing:0.08em;
  color:var(--gold-dk);display:block;word-break:break-word;
  white-space:normal;overflow:hidden;text-overflow:ellipsis
}
.booking-summary-value.empty{color:var(--text-dim);font-style:italic;font-family:'Montserrat',sans-serif;font-size:0.8rem}

/* Booking summary bar stays a single horizontal row down to tablet/small-phone width — only wraps to 2 columns when 6-across truly won't fit */
@media(max-width:768px) and (min-width:561px){
  .booking-summary-item{padding:0.65rem 0.5rem}
  .booking-summary-label{font-size:0.42rem;letter-spacing:0.18em}
  .booking-summary-value{font-size:0.62rem}
}
@media(max-width:560px){
  .booking-summary{flex-wrap:wrap}
  .booking-summary-item{
    flex:1 1 45%;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:0.55rem 0.65rem;
  }
  .booking-summary-item:nth-child(2n){border-right:none}
  .booking-summary-item:nth-last-child(-n+2){border-bottom:none}
}

/* ── PAYMENT PLACEHOLDER ── */
.payment-card{border:1px solid var(--border-bright);background:linear-gradient(135deg,rgba(210,235,225,0.5),rgba(237,245,241,0.9));padding:3rem;text-align:center;border-radius:8px}
.payment-icon{font-size:2rem;margin-bottom:1.5rem;font-family:'Gudlak Bold',sans-serif;color:var(--gold);letter-spacing:0.3em}
.payment-card h2{font-family:'Gudlak Bold',sans-serif;font-size:1rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem}
.payment-card p{color:var(--text-muted);font-style:italic;margin-bottom:2rem;line-height:1.8}
.payment-badge{display:inline-flex;gap:1.5rem;border:1px solid var(--border);padding:1rem 2rem;margin-bottom:2rem;color:var(--text-dim);font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;border-radius:6px}
.slot-hold-banner{display:flex;align-items:center;justify-content:center;gap:0.6rem;background:rgba(46,139,110,0.08);border:1px solid var(--border-bright);padding:0.85rem 1.2rem;margin-bottom:1.6rem;font-family:'Montserrat',sans-serif;font-style:italic;font-size:0.92rem;color:var(--text-readable);flex-wrap:wrap;text-align:center}
.slot-hold-banner.expiring{background:rgba(196,90,60,0.08);border-color:rgb(176,81,54);color:#8a3d28}
.slot-hold-icon{font-size:1rem;flex-shrink:0}
#slotHoldTimer{font-family:'Gudlak Bold',sans-serif;font-style:normal;letter-spacing:0.05em;color:var(--gold)}
.slot-hold-banner.expiring #slotHoldTimer{color:#c45a3c}
.availability-badge{display:inline-flex;align-items:center;gap:0.5rem;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:#a8552f;background:rgba(196,120,60,0.1);border:1px solid rgba(196,120,60,0.3);padding:0.45rem 0.9rem;margin:0 auto 1.2rem;width:fit-content}
.availability-badge-dot{width:6px;height:6px;border-radius:50%;background:#c4783c;animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}

/* ── CALENDAR ── */
.calendar-card{border:1px solid var(--border);background:rgba(255,255,255,0.8);padding:2rem;border-radius:8px}
.calendar-card h2{font-family:'Gudlak Bold',sans-serif;font-size:0.9rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.cal-nav{background:transparent;border:1px solid var(--border);color:var(--gold);width:32px;height:32px;cursor:pointer;font-size:0.9rem;transition:all 0.3s;border-radius:4px}
.cal-nav:hover{background:rgba(46,139,110,0.1)}
.cal-month{font-family:'Gudlak Bold',sans-serif;font-size:0.85rem;letter-spacing:0.2em;color:var(--text);text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-name{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.1em;color:var(--text-dim);text-align:center;text-transform:uppercase;padding:0.5rem 0;margin-bottom:0.5rem}
.cal-day{aspect-ratio:1;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;cursor:pointer;transition:all 0.3s;border:1px solid transparent;color:var(--text-muted)}
.cal-day.available:hover{border-color:rgb(40,122,97);background:rgba(46,139,110,0.08);color:var(--gold)}
.cal-day.selected{background:var(--gold);color:var(--bg);font-weight:600}
.cal-day.empty,.cal-day.past{color:var(--text-dim);cursor:default;opacity:0.3}
.cal-day.unavailable{color:var(--text-dim);cursor:default;text-decoration:line-through;opacity:0.4}
.time-slots{margin-top:1.5rem}
.time-slots h3{font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem}
.slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem}
.time-slot{border:1px solid var(--border);padding:0.6rem;text-align:center;font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;letter-spacing:0.1em;color:var(--text-muted);cursor:pointer;transition:all 0.3s;position:relative;border-radius:4px}
.time-slot:hover{border-color:var(--gold);color:var(--gold)}
.time-slot.selected{background:linear-gradient(135deg,#1A7055,#0F4A38);border-color:#1A7055;color:#FFFFFF;font-weight:600}
.slot-left-tag{display:block;margin-top:0.3rem;font-family:'Montserrat',sans-serif;font-style:italic;font-size:0.62rem;letter-spacing:0.02em;color:#a8552f;text-transform:none}
.slot-left-tag.urgent{color:#c4453c}

/* ── CONFIRMATION ── */
.confirm-card{border:1px solid var(--border-bright);background:linear-gradient(135deg,rgba(210,235,225,0.3),rgba(237,245,241,0.9));padding:3rem;text-align:center;position:relative;overflow:hidden}
.confirm-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(46,139,110,0.1),transparent 60%);pointer-events:none}
.confirm-sigil{font-size:4rem;margin-bottom:1.5rem;display:block;animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{from{text-shadow:0 0 10px rgba(46,139,110,0.3)}to{text-shadow:0 0 30px rgba(46,139,110,0.7)}}
.confirm-card h2{font-family:'Gudlak Bold',sans-serif;font-size:1.5rem;color:var(--gold);margin-bottom:1rem}
.confirm-card>p{color:var(--text-muted);font-style:italic;margin-bottom:2.5rem;line-height:1.8}
.booking-details{text-align:left;border:1px solid var(--border);padding:1.5rem;margin-bottom:2rem;background:rgba(247,250,248,0.7);border-radius:8px}
.detail-row{display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid rgba(46,139,110,0.08);font-size:0.9rem}
.detail-row:last-child{border-bottom:none}
.detail-label{font-family:'Gudlak Bold',sans-serif;font-size:0.65rem;letter-spacing:0.15em;color:var(--text-dim);text-transform:uppercase;padding-top:2px}
.detail-value{color:var(--text);text-align:right}
.booking-id{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.3em;color:var(--text-dim);text-transform:uppercase;margin-top:2rem}

/* ── ADMIN ── */
.admin-layout{display:grid;grid-template-columns:264px 1fr;min-height:100vh;padding-top:var(--crm-nav-h,140px);min-width:0;overflow-x:hidden;max-width:100vw}
.admin-sidebar{background:rgba(237,245,241,0.98);border-right:1px solid var(--border);padding:2rem 0 1.5rem;min-height:calc(100vh - var(--crm-nav-h,140px));display:flex;flex-direction:column}
.admin-sidebar-brand{padding:0 1.75rem 1.75rem;border-bottom:1px solid var(--border);margin-bottom:1rem}
.admin-sidebar-brand .nav-logo{font-size:1.15rem!important;display:block;margin-bottom:0.35rem}
.admin-sidebar-brand p{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.25em;color:var(--gold);text-transform:uppercase}
.admin-notif-wrap{position:fixed;top:calc(var(--crm-nav-h,140px) + 10px);right:18px;z-index:90}
.admin-mobile-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;position:fixed;top:calc(var(--crm-nav-h,140px) + 10px);left:18px;width:40px;height:40px;background:#fff;border:1px solid var(--border);cursor:pointer;padding:0;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,0.08);transition:border-color 0.3s;z-index:210}
.admin-mobile-hamburger:hover{border-color:var(--gold)}
.admin-mobile-hamburger span{display:block;width:16px;height:1px;background:var(--gold-dk);transition:all 0.35s cubic-bezier(0.22,0.8,0.32,1);transform-origin:center}
.admin-mobile-hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.admin-mobile-hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.admin-mobile-hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.admin-sidebar-overlay{display:none;position:fixed;inset:0;z-index:195;background:rgba(26,51,41,0.45);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 0.35s}
.admin-sidebar-overlay.is-open{opacity:1;pointer-events:all}
.admin-notif-bell{display:flex;align-items:center;gap:0.5rem;background:#fff;border:1px solid var(--border);cursor:pointer;padding:0.55rem 0.9rem;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.14em;color:var(--text-dim);text-transform:uppercase;border-radius:999px;transition:all 0.25s;box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.admin-notif-bell:hover{border-color:var(--gold);color:var(--gold-dk)}
.admin-notif-badge{background:var(--gold-dk,#946C4F);color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:none;align-items:center;justify-content:center;font-size:0.68rem;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1}
.admin-notif-badge.has-items{display:inline-flex}
.admin-notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,0.14);border-radius:8px;max-height:420px;overflow-y:auto;display:none;z-index:91}
.admin-notif-panel.is-open{display:block}
.admin-notif-panel-header{padding:0.75rem 1rem;border-bottom:1px solid var(--border);font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.admin-notif-item{display:flex;gap:0.6rem;padding:0.7rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.2s}
.admin-notif-item:last-child{border-bottom:none}
.admin-notif-item:hover{background:rgba(46,139,110,0.06)}
.admin-notif-icon{font-size:0.95rem;line-height:1.3}
.admin-notif-text{flex:1;font-family:'Montserrat',sans-serif;font-size:0.88rem;color:var(--text);line-height:1.4}
.admin-notif-time{display:block;font-family:'Gudlak Bold',sans-serif;font-size:0.55rem;letter-spacing:0.08em;color:var(--text-dim);text-transform:uppercase;margin-top:0.2rem}
.admin-notif-empty{padding:1.5rem 1rem;text-align:center;font-family:'Montserrat',sans-serif;font-size:0.85rem;color:var(--text-dim);font-style:italic}
.admin-nav-item{display:flex;align-items:center;gap:0.9rem;padding:0.95rem 1.75rem;cursor:pointer;transition:all 0.3s;font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;letter-spacing:0.15em;color:var(--text-dim);text-transform:uppercase;border-left:2px solid transparent}
.admin-nav-item:hover{color:var(--text);background:rgba(46,139,110,0.05)}
.admin-nav-item.active{color:var(--gold);border-left-color:var(--gold);background:rgba(46,139,110,0.08)}
.admin-nav-item span:first-child{font-size:1.05rem;width:20px;text-align:center;flex-shrink:0}
.admin-sidebar-back{padding:1.75rem;margin-top:1.75rem}
.admin-content{padding:2.5rem;background:var(--bg);min-width:0;overflow-x:hidden}
.admin-header{margin-bottom:2.5rem}
.admin-header h1{font-family:'Gudlak Bold',sans-serif;font-size:clamp(0.95rem,2.5vw,1.5rem);color:var(--gold);margin-bottom:0.5rem;line-height:1.35;word-break:break-word;white-space:normal;overflow-wrap:break-word}
.admin-header p{color:var(--text-dim);font-size:0.9rem;line-height:1.6;white-space:normal}

/* ── ADMIN STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.5rem;min-width:0}
.stat-card{border:1px solid var(--border);background:rgba(255,255,255,0.75);padding:1.5rem;transition:border-color 0.3s;border-radius:8px}

/* ── ANALYTICS ── */
.range-tab{
  font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.55rem 1rem;border:1px solid var(--border);background:transparent;color:var(--text-dim);
  cursor:pointer;transition:all 0.25s;border-radius:4px;
}
.range-tab:hover{border-color:var(--border-bright);color:var(--text)}
.range-tab.active{background:var(--gold);border-color:var(--gold);color:#fff}
.an-bar-row{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:10px}
.an-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.an-bar{width:100%;max-width:34px;background:linear-gradient(180deg,var(--gold),var(--gold-dk));transition:height 0.4s cubic-bezier(0.22,0.8,0.32,1);min-height:2px}
.an-bar-label{font-family:'Gudlak Bold',sans-serif;font-size:0.5rem;letter-spacing:0.02em;color:var(--text-dim);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.an-bar-value{font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;color:var(--text-muted);margin-bottom:3px}
.an-donut-legend{display:flex;flex-direction:column;gap:0.6rem;margin-top:1rem}
.an-donut-legend-item{display:flex;align-items:center;gap:0.6rem;font-family:'Montserrat',sans-serif;font-size:0.9rem;color:var(--text-muted)}
.an-donut-swatch{width:11px;height:11px;border-radius:50%;flex-shrink:0}
@media(max-width:900px){
  #analytics-charts-grid{grid-template-columns:1fr!important}
}
.stat-card:hover{border-color:var(--border-bright)}
.stat-card .label{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:0.75rem;display:block}
.stat-card .value{font-family:'Gudlak Bold',sans-serif;font-size:2rem;color:var(--gold)}
.stat-card .delta{font-size:0.75rem;color:#40815F;margin-top:0.25rem;font-family:'Gudlak Bold',sans-serif;letter-spacing:0.1em}

/* ── ADMIN TABLE ── */
.admin-table-wrap{border:1px solid var(--border);background:rgba(255,255,255,0.75);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;margin-bottom:2rem;max-width:100%;border-radius:8px}
.admin-table-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.admin-table-header h2{font-family:'Gudlak Bold',sans-serif;font-size:0.8rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase}
.admin-table-header .actions{display:flex;gap:0.75rem}
.search-input{background:rgba(247,250,248,0.9);border:1px solid var(--border);color:var(--text);font-family:'Montserrat',sans-serif;font-size:0.9rem;padding:0.5rem 1rem;outline:none;width:200px;transition:border-color 0.3s;border-radius:4px}
.search-input:focus{border-color:var(--gold)}
table{width:100%;border-collapse:collapse}
th{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;padding:1rem 1.5rem;text-align:left;border-bottom:1px solid var(--border);background:rgba(226,239,233,0.6);white-space:nowrap}
td{padding:1rem 1.5rem;color:var(--text-muted);font-size:0.9rem;border-bottom:1px solid rgba(46,139,110,0.06);white-space:nowrap}
tr:hover td{background:rgba(46,139,110,0.03)}
.badge{display:inline-flex;align-items:center;gap:0.35rem;font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.3rem 0.75rem;border:1px solid;border-radius:4px}
.badge-confirmed{color:#40815F;border-color:#5BB888;background:rgba(91,184,136,0.1)}
.badge-pending{color:#1A7055;border-color:#C9A84C;background:rgba(201,168,76,0.1)}
.badge-completed{color:#617397;border-color:#8BA5D8;background:rgba(139,165,216,0.1)}
.badge-review{color:#946C4F;border-color:#E8A87C;background:rgba(232,168,124,0.1)}
.badge-vip{color:#827045;border-color:#D9B65C;background:rgba(217,182,92,0.12)}
.badge-cancelled{color:#C0392B;border-color:rgba(192,57,43,0.35);background:rgba(192,57,43,0.07)}
/* Payment badges: pill-shaped + ₹ glyph baked in, so they read as a different
   category from booking-status badges even when they share a color family. */
.badge-pay{border-radius:999px;font-weight:600}
.badge-pay::before{content:'₹ ';font-weight:700}
.badge-reschedule-tag{display:inline-flex;align-items:center;gap:0.3rem;font-family:'Gudlak Bold',sans-serif;font-size:0.55rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.22rem 0.55rem;border:1px dashed #8B6FB8;color:#6B4F9E;background:rgba(139,111,184,0.08);border-radius:4px;margin-left:0.4rem}
.client-cell{display:flex;align-items:center;gap:0.75rem}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2E8B6E,#1A7055);display:flex;align-items:center;justify-content:center;font-family:'Gudlak Bold',sans-serif;font-size:0.7rem;color:var(--gold);flex-shrink:0}
.client-name{color:var(--text);font-weight:600;font-size:0.95rem}
.client-email{font-size:0.78rem;color:var(--text-dim);margin-top:1px}
.crm-row-clickable{cursor:pointer;transition:background-color 0.15s}
.crm-row-clickable:hover{background:rgba(46,139,110,0.05)}

/* ── ADMIN RECENT ACTIVITY ── */
.activity-list{padding:0 1.5rem}
.activity-item{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid rgba(46,139,110,0.06)}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:6px;flex-shrink:0}
.activity-body strong{color:var(--text);font-family:'Gudlak Bold',sans-serif;font-size:0.75rem;letter-spacing:0.05em;display:block;margin-bottom:0.25rem}
.activity-body span{color:var(--text-dim);font-size:0.8rem}
.activity-time{margin-left:auto;font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.1em;color:var(--text-dim);white-space:nowrap;text-transform:uppercase}

/* ── SPELL/GROUP/NUMEROLOGY PAGES ── */
.simple-form-page{min-height:100vh;min-height:100dvh;padding:8rem 2rem 4rem;max-width:650px;margin:0 auto;position:relative;z-index:1}
.simple-form-page{padding-top:max(8rem,calc(var(--nav-h,137px) + 24px))}
.success-message{border:1px solid rgba(91,184,136,0.4);background:rgba(91,184,136,0.08);padding:3rem;text-align:center}
.success-message .icon{font-size:3rem;margin-bottom:1.5rem;display:flex;justify-content:center;align-items:center}
.success-message h2{font-family:'Gudlak Bold',sans-serif;font-size:1.5rem;color:#40815F;margin-bottom:1rem}
.success-message p{color:var(--text-muted);font-style:italic;line-height:1.8}

/* ── SERVICE CARD IDENTITY THEMES ── */
.service-card.svc-tarot{border-color:rgb(40,122,97)}
.service-card.svc-tarot::before{background:linear-gradient(to right,transparent 5%,rgba(46,139,110,0.6) 35%,rgba(46,139,110,0.9) 50%,rgba(46,139,110,0.6) 65%,transparent 95%)}
.service-card.svc-tarot .service-icon-wrap{border-color:rgb(40,122,97);background:linear-gradient(145deg,rgba(230,248,240,0.9),rgba(210,240,228,0.5))}
.service-card.svc-tarot .service-tag{color:var(--gold-dk);border-color:rgb(40,122,97)}
.service-card.svc-tarot:hover{border-color:rgb(40,122,97);box-shadow:0 20px 50px rgba(46,139,110,0.14),0 6px 16px rgba(46,139,110,0.08)}

.service-card.svc-spell{border-color:rgb(110,70,180);background:linear-gradient(155deg,rgba(255,255,255,0.97) 0%,rgba(246,241,255,0.82) 60%,rgba(236,228,255,0.67) 100%)}
.service-card.svc-spell::before{background:linear-gradient(to right,transparent 5%,rgba(130,90,200,0.55) 35%,rgba(130,90,200,0.82) 50%,rgba(130,90,200,0.55) 65%,transparent 95%)}
.service-card.svc-spell::after{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(110,70,180,0.07) 0%,transparent 70%)}
.service-card.svc-spell .service-icon-wrap{border-color:rgb(110,70,180);background:linear-gradient(145deg,rgba(245,238,255,0.9),rgba(230,220,255,0.5))}
.service-card.svc-spell .service-eyebrow{color:rgb(110,70,180)}
.service-card.svc-spell h3{color:rgb(90,55,155)}
.service-card.svc-spell .service-rule-line{background:linear-gradient(to right,rgba(110,70,180,0.4),transparent)}
.service-card.svc-spell .service-rule-dot{border-color:rgb(110,70,180)}
.service-card.svc-spell .service-tag{color:rgb(80,45,140);border-color:rgb(110,70,180);background:rgba(110,70,180,0.04)}
.service-card.svc-spell .service-tag-dot{background:rgba(110,70,180,0.45)}
.service-card.svc-spell .service-arrow{color:rgb(90,55,155);border-color:rgb(110,70,180);background:rgba(110,70,180,0.06)}
.service-card.svc-spell:hover .service-arrow{background:rgb(110,70,180);border-color:rgb(110,70,180);color:#fff}
.service-card.svc-spell:hover{border-color:rgb(110,70,180);box-shadow:0 20px 50px rgba(110,70,180,0.11),0 6px 16px rgba(110,70,180,0.06)}
.service-card.svc-spell:hover .service-tag{background:rgba(110,70,180,0.1);border-color:rgb(110,70,180)}
.service-card.svc-spell:hover .service-icon-wrap{border-color:rgb(110,70,180);box-shadow:0 4px 18px rgba(110,70,180,0.12)}

.service-card.svc-group{border-color:rgb(162,90,36);background:linear-gradient(155deg,rgba(255,255,255,0.97) 0%,rgba(255,246,232,0.82) 60%,rgba(255,238,215,0.67) 100%)}
.service-card.svc-group::before{background:linear-gradient(to right,transparent 5%,rgba(200,130,50,0.55) 35%,rgba(200,130,50,0.82) 50%,rgba(200,130,50,0.55) 65%,transparent 95%)}
.service-card.svc-group::after{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(200,130,50,0.07) 0%,transparent 70%)}
.service-card.svc-group .service-icon-wrap{border-color:rgb(152,99,38);background:linear-gradient(145deg,rgba(255,245,225,0.9),rgba(255,230,195,0.5))}
.service-card.svc-group .service-eyebrow{color:rgb(155,95,34)}
.service-card.svc-group h3{color:rgb(155,88,22)}
.service-card.svc-group .service-rule-line{background:linear-gradient(to right,rgba(200,130,50,0.45),transparent)}
.service-card.svc-group .service-rule-dot{border-color:rgb(152,99,38)}
.service-card.svc-group .service-tag{color:rgb(140,80,20);border-color:rgb(152,99,38);background:rgba(200,130,50,0.04)}
.service-card.svc-group .service-tag-dot{background:rgba(200,130,50,0.45)}
.service-card.svc-group .service-arrow{color:rgb(155,88,22);border-color:rgb(152,99,38);background:rgba(200,130,50,0.06)}
.service-card.svc-group:hover .service-arrow{background:rgb(200,130,50);border-color:rgb(200,130,50);color:#fff}
.service-card.svc-group:hover{border-color:rgb(152,99,38);box-shadow:0 20px 50px rgba(200,130,50,0.11),0 6px 16px rgba(200,130,50,0.06)}
.service-card.svc-group:hover .service-tag{background:rgba(200,130,50,0.09);border-color:rgb(152,99,38)}
.service-card.svc-group:hover .service-icon-wrap{border-color:rgb(152,99,38);box-shadow:0 4px 18px rgba(200,130,50,0.12)}

.service-card.svc-num{border-color:rgb(30,100,160);background:linear-gradient(155deg,rgba(255,255,255,0.97) 0%,rgba(231,241,255,0.82) 60%,rgba(215,232,255,0.67) 100%)}
.service-card.svc-num::before{background:linear-gradient(to right,transparent 5%,rgba(50,120,200,0.55) 35%,rgba(50,120,200,0.82) 50%,rgba(50,120,200,0.55) 65%,transparent 95%)}
.service-card.svc-num::after{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(50,120,200,0.07) 0%,transparent 70%)}
.service-card.svc-num .service-icon-wrap{border-color:rgb(46,110,184);background:linear-gradient(145deg,rgba(225,238,255,0.9),rgba(205,225,255,0.5))}
.service-card.svc-num .service-eyebrow{color:rgb(40,100,175)}
.service-card.svc-num h3{color:rgb(28,82,158)}
.service-card.svc-num .service-rule-line{background:linear-gradient(to right,rgba(50,120,200,0.45),transparent)}
.service-card.svc-num .service-rule-dot{border-color:rgb(46,110,184)}
.service-card.svc-num .service-tag{color:rgb(25,75,145);border-color:rgb(46,110,184);background:rgba(50,120,200,0.04)}
.service-card.svc-num .service-tag-dot{background:rgba(50,120,200,0.45)}
.service-card.svc-num .service-arrow{color:rgb(28,82,158);border-color:rgb(46,110,184);background:rgba(50,120,200,0.06)}
.service-card.svc-num:hover .service-arrow{background:rgb(50,120,200);border-color:rgb(50,120,200);color:#fff}
.service-card.svc-num:hover{border-color:rgb(46,110,184);box-shadow:0 20px 50px rgba(50,120,200,0.11),0 6px 16px rgba(50,120,200,0.06)}
.service-card.svc-num:hover .service-tag{background:rgba(50,120,200,0.09);border-color:rgb(46,110,184)}
.service-card.svc-num:hover .service-icon-wrap{border-color:rgb(46,110,184);box-shadow:0 4px 18px rgba(50,120,200,0.12)}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.75s cubic-bezier(0.22,0.8,0.32,1),transform 0.75s cubic-bezier(0.22,0.8,0.32,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-26px);transition:opacity 0.75s cubic-bezier(0.22,0.8,0.32,1),transform 0.75s cubic-bezier(0.22,0.8,0.32,1)}
.reveal-left.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.32s}.reveal-delay-4{transition-delay:0.44s}.reveal-delay-5{transition-delay:0.55s}

/* ── Journey / Trust horizontal-scroll nav arrows (shared pattern) ── */
.journey-scroll-wrap{position:relative;display:flex;align-items:center}
.journey-scroll-wrap .journey-scroll{flex:1;scroll-padding-left:44px;scroll-padding-right:44px}
.journey-nav,.trust-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border-bright);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:4;
  box-shadow:0 4px 16px rgba(46,139,110,0.15);
  transition:background 0.3s,box-shadow 0.3s,transform 0.3s;
}
.journey-nav:hover,.trust-nav:hover{background:rgba(255,255,255,1);box-shadow:0 6px 22px rgba(46,139,110,0.22)}
/* Positioned with a small inset so arrows sit in their own safe-zone
   padding, never overlapping card text content */
.journey-nav-left,.trust-nav-left{left:6px}
.journey-nav-right,.trust-nav-right{right:6px}
@media(max-width:900px){
  .journey-nav,.trust-nav{width:32px;height:32px}
  .journey-scroll-wrap .journey-scroll,.trust-scroll-wrap .trust-pillars{padding-left:42px!important;padding-right:42px!important}
}
@media(max-width:600px){
  /* On small phones keep arrows visible but compact so they never
     overlap card content or risk edge clipping */
  .journey-nav,.trust-nav{width:26px;height:26px;box-shadow:0 3px 12px rgba(46,139,110,0.18)}
  .journey-nav-left,.trust-nav-left{left:2px}
  .journey-nav-right,.trust-nav-right{right:2px}
  /* Widen the scroll container's edge padding so the first/last card
     never sits directly beneath the overlaid arrow buttons */
  .journey-scroll-wrap .journey-scroll,.trust-scroll-wrap .trust-pillars{padding-left:34px!important;padding-right:34px!important}
}
.journey-dot,.trust-dot{width:18px;height:2px;background:rgba(46,139,110,0.18);transition:all 0.3s;cursor:pointer}
.journey-dot.active,.trust-dot.active{width:30px;background:var(--gold)}

/* ── TRUST / TRANSFORMATION ── */
.trust-section{padding:2.75rem 0;position:relative;z-index:1;overflow:hidden}
.trust-section::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg3) 45%,var(--bg2) 75%,var(--bg) 100%);pointer-events:none}
.trust-inner{max-width:1320px;margin:0 auto;padding:0 1.25rem}
.trust-header{text-align:center;margin-bottom:2.2rem}
.trust-scroll-wrap{position:relative;display:flex;align-items:center}
.trust-pillars{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1.4rem;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -2rem;padding-left:2rem;padding-right:2rem;flex:1;scroll-padding-left:44px;scroll-padding-right:44px}
.trust-pillars::-webkit-scrollbar{display:none}
.trust-pillar{flex:0 0 260px;min-height:250px;border:1px solid var(--border);background:linear-gradient(160deg,rgba(255,255,255,0.95),rgba(237,245,241,0.7));padding:1.9rem 1.7rem;position:relative;overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;transition:all 0.4s cubic-bezier(0.22,0.8,0.32,1);border-radius:8px}
.trust-pillar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--gold),transparent);opacity:0;transition:opacity 0.35s}
.trust-pillar:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:0 14px 40px rgba(46,139,110,0.1)}.trust-pillar:hover::before{opacity:1}
.tp-icon{width:58px;height:58px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(255,255,255,0.9),rgba(232,244,238,0.5));display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;transition:border-color 0.35s,box-shadow 0.35s,transform 0.35s;border-radius:8px}
.trust-pillar:hover .tp-icon{border-color:var(--border-bright);box-shadow:0 5px 16px rgba(46,139,110,0.14);transform:scale(1.05)}
.tp-title{font-family:'Gudlak Bold',sans-serif;font-size:0.86rem;letter-spacing:0.13em;color:var(--gold);text-transform:uppercase;margin-bottom:0.5rem;display:block;font-weight:600}
.tp-rule{width:24px;height:1px;background:linear-gradient(to right,rgba(46,139,110,0.5),transparent);margin-bottom:0.85rem}
.tp-desc{font-family:'Montserrat',sans-serif;font-size:0.93rem;color:var(--text-readable);line-height:1.75;font-style:italic}

/* ── TESTIMONIALS: CONTINUOUS MARQUEE (never looks "finished", scales as more are added) ── */
.testimonials-marquee{
  overflow:hidden;
  width:100%;
  max-width:100%;
  cursor:grab;
  touch-action:pan-y;
}
.testimonials-marquee:active{cursor:grabbing}
.testimonials-track{
  display:flex;
  gap:1.5rem;
  width:max-content;
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  .testimonials-track{transition:none!important}
}
.testimonial{border:1px solid var(--border);background:linear-gradient(160deg,rgba(255,255,255,0.96),rgba(237,245,241,0.68));padding:0;position:relative;transition:all 0.4s cubic-bezier(0.22,0.8,0.32,1);box-shadow:0 2px 12px rgba(46,139,110,0.04);overflow:hidden;flex:0 0 auto;width:min(380px,82vw);border-radius:8px}
.testimonial::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent 5%,rgba(46,139,110,0.5) 50%,transparent 95%);opacity:0;transition:opacity 0.35s}
.testimonial:hover{border-color:var(--border-bright);box-shadow:0 12px 36px rgba(46,139,110,0.1)}.testimonial:hover::before{opacity:1}
.testimonial-inner{padding:2.2rem 2rem 0}
.testimonial-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.1rem}
.testimonial-stars{color:var(--gold);font-size:0.68rem;letter-spacing:0.2em}
.testimonial-qm{font-family:'Gudlak Bold',sans-serif;font-size:3rem;color:var(--gold);opacity:0.15;line-height:0.75;flex-shrink:0}
.testimonial-text{color:var(--text-readable);font-style:italic;line-height:2;font-size:1.0rem;letter-spacing:0.01em;margin-bottom:0}
.testimonial-footer{padding:1.2rem 2rem 1.5rem;border-top:1px solid rgba(46,139,110,0.08);display:flex;align-items:center;gap:0.9rem;margin-top:1.4rem}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-dk),var(--gold));display:flex;align-items:center;justify-content:center;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;color:#FFFFFF;flex-shrink:0;border:1px solid rgba(46,139,110,0.2);overflow:hidden}
.testimonial-avatar svg{display:block}
.testimonial-author{font-family:'Gudlak Bold',sans-serif;font-size:0.64rem;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase}
.testimonial-service{font-size:0.78rem;color:var(--text-dim);margin-top:0.18rem;font-style:italic}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .about-visual{order:-1;margin-bottom:1rem}
  .about-frame{max-width:200px}
  .services-grid{grid-template-columns:1fr;gap:1rem}
  .service-card-body{padding:1.6rem 1.6rem 1.3rem}
  .service-card-footer{padding:0.8rem 1.6rem 1rem}
  .testimonial{width:min(320px,78vw)}
  footer{padding:1.5rem 1.25rem 1.25rem!important;width:100%;box-sizing:border-box}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:1.5rem 1.25rem!important;margin-bottom:1.5rem!important;width:100%}
  .footer-brand{grid-column:1/-1;width:100%}
  .footer-brand p{font-size:0.86rem!important;line-height:1.7!important;max-width:100%!important}
  .footer-col{width:100%}
  .footer-col h4{font-size:0.74rem!important;letter-spacing:0.22em!important;margin-bottom:0.85rem!important}
  .footer-col ul li{margin-bottom:0.55rem!important}
  .footer-col ul li a{font-size:0.95rem!important}
  .footer-contact-email{font-size:0.8rem!important}
  .footer-bottom{flex-direction:column;align-items:flex-start!important;gap:1rem!important;width:100%}
  .footer-bottom > p{max-width:100%!important;width:100%}
  .footer-bottom > div{align-self:flex-start;width:100%}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .nav-drawer-overlay{display:block}
  nav{padding:0.85rem 1.1rem;gap:0.6rem}
  .nav-book{font-size:0.66rem;padding:0.6rem 1rem;letter-spacing:0.12em;margin-left:auto}
  .nav-signin-link{font-size:0.66rem;letter-spacing:0.12em}
  .nav-auth{gap:0.5rem}
  .form-grid{grid-template-columns:1fr}
  .service-select-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .admin-layout{grid-template-columns:1fr}
  /* Sidebar hidden by default on mobile, opens as a slide-out drawer (see 768px CRM block) */
  .slots-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0.6rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:0.3rem;margin:0 -0.2rem;padding-left:0.2rem;padding-right:0.2rem}
  .slots-grid::-webkit-scrollbar{display:none}
  .time-slot{flex:0 0 86px;scroll-snap-align:start}
  .trust-pillar{flex:0 0 230px}
  .trust-pillars{margin:0 -1rem;padding-left:1rem;padding-right:1rem}
}

/* ── ARTICLE MODAL ── */
.article-overlay{position:fixed;inset:0;z-index:500;background:rgba(26,51,41,0.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s;padding:2rem}
.article-overlay.open{opacity:1;pointer-events:all}
.article-modal{background:var(--bg);border:1px solid var(--border-bright);max-width:680px;width:100%;max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 24px 60px rgba(0,0,0,0.2)}
.article-modal-band{height:2px;background:linear-gradient(to right,transparent,rgba(46,139,110,0.7),transparent);flex-shrink:0}
.article-modal-body{padding:3rem 2.8rem 3rem}
.article-modal-cat{font-family:'Gudlak Bold',sans-serif;font-size:0.5rem;letter-spacing:0.42em;color:var(--gold-dk);text-transform:uppercase;display:block;margin-bottom:1rem}
.article-modal-title{font-family:'Gudlak Bold',sans-serif;font-size:1.1rem;letter-spacing:0.1em;color:var(--gold);line-height:1.5;margin-bottom:0.5rem}
.article-modal-date{font-family:'Gudlak Bold',sans-serif;font-size:0.48rem;letter-spacing:0.25em;color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.article-modal-text p{font-family:'Montserrat',sans-serif;font-size:1.08rem;color:var(--text-muted);line-height:2.1;font-style:italic;margin-bottom:1.5rem;letter-spacing:0.01em}
.article-modal-close{position:absolute;top:1rem;right:1.2rem;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.15em;color:var(--text-dim);cursor:pointer;background:none;border:none;padding:0.25rem;transition:color 0.3s}
.article-modal-close:hover{color:var(--gold)}
@media(max-width:600px){.article-modal-body{padding:2rem 1.5rem}.article-overlay{padding:1rem}}

/* ── SPELL CATEGORY GRID — contained, no overflow ── */
#page-spell-booking .service-select-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  width:100%;
  box-sizing:border-box;
}
#page-spell-booking .service-select-card{
  min-width:0;
  box-sizing:border-box;
}
/* Last odd card spans full width to stay aligned */
#page-spell-booking .service-select-grid .service-select-card:last-child:nth-child(odd){
  grid-column:1 / -1;
  max-width:calc(50% - 0.5rem);
  justify-self:center;
}

/* ── ADDITIONAL RESPONSIVE BREAKPOINTS (Disha UX) ── */

/* Hero — prevent button overflow on very small phones */
@media(max-width:420px){
  .hero-title{font-size:clamp(2.1rem,12vw,3rem)}
  .hero-ctas{flex-direction:column;align-items:center}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{width:100%;text-align:center;box-sizing:border-box}
  .hero-kicker{white-space:normal;text-align:center}
}

/* Prevent horizontal overflow on all major content wrappers */
section,
.trust-inner,.circle-inner,
.shop-inner,
.about-ak-inner{
  overflow-x:hidden;
}

/* Booking pages — full-width with box-sizing */
.booking-page,.simple-form-page{width:100%;box-sizing:border-box}
.form-card,.payment-card,.confirm-card,.calendar-card{box-sizing:border-box;width:100%}

/* ── FIX 1: Reading / service selection cards — 2-column on mobile ──
   Keep desktop unchanged. On mobile use 2-col grid for all selection
   screens (tarot, numerology, spell). Group booking stays 1-col
   because it shows dated event rows that need full width to be legible. */
@media(max-width:600px){
  /* Tarot reading selection: 2-col grid */
  #page-tarot-booking .service-select-grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:0.75rem!important;
  }
  /* Numerology: 2-col grid */
  #page-numerology-booking .service-select-grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:0.75rem!important;
  }
  /* Group booking: keep 1-col (dated events need full width) */
  #page-group-booking .service-select-grid{
    grid-template-columns:1fr!important;
  }
  /* Make card inner text tighter on small screens */
  #page-tarot-booking .service-select-card,
  #page-numerology-booking .service-select-card{
    padding:1rem 0.85rem!important;
  }
  #page-tarot-booking .service-select-card p,
  #page-numerology-booking .service-select-card p{
    font-size:0.82rem!important;
    line-height:1.65!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Odd last card centred */
  #page-tarot-booking .service-select-grid .service-select-card:last-child:nth-child(odd),
  #page-numerology-booking .service-select-grid .service-select-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:calc(50% - 0.375rem);
    justify-self:center;
  }
}
@media(max-width:640px){
  /* Spell booking: keep existing 2-col (already correct from v20) */
  #page-spell-booking .service-select-grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:0.75rem!important;
  }
  #page-spell-booking .service-select-card{
    padding:1rem 0.85rem!important;
  }
  #page-spell-booking .service-select-card p{
    font-size:0.82rem!important;
    line-height:1.65!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
/* Very small phones (≤380px): drop to 1-col so cards aren't too cramped */
@media(max-width:380px){
  #page-tarot-booking .service-select-grid,
  #page-numerology-booking .service-select-grid,
  #page-spell-booking .service-select-grid{
    grid-template-columns:1fr!important;
  }
  #page-tarot-booking .service-select-card,
  #page-numerology-booking .service-select-card,
  #page-spell-booking .service-select-card{
    padding:1rem 1rem!important;
  }
  #page-tarot-booking .service-select-card p,
  #page-numerology-booking .service-select-card p,
  #page-spell-booking .service-select-card p{
    -webkit-line-clamp:unset;
    overflow:visible;
  }
  /* Single-column grid means the odd last card must span full width too —
     otherwise it stays squeezed at ~50% width and its title gets clipped */
  #page-tarot-booking .service-select-grid .service-select-card:last-child:nth-child(odd),
  #page-numerology-booking .service-select-grid .service-select-card:last-child:nth-child(odd),
  #page-spell-booking .service-select-grid .service-select-card:last-child:nth-child(odd){
    max-width:100%!important;
    justify-self:stretch!important;
  }
}
/* ══════════════════════════════════════════════════════════════
   V27 — MOBILE SPACING SYSTEM (clean consolidated pass)
   Desktop spacing standardised to 5rem globally above.
   These rules reduce padding proportionally on mobile.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  section{ padding:1.25rem 1.25rem!important }
  #draw-a-card{ padding-top:2.25rem!important }
  .trust-section{ padding:2.25rem 0!important }
  .trust-inner,.circle-inner{ padding:0 1.25rem!important }
  .circle-section{ padding:3.5rem 0!important }
  .circle-header{ margin-bottom:1.75rem!important }
  .circle-intro{ margin-bottom:1.75rem!important }
  .circle-benefits{ gap:0.85rem!important }
  .shop-inner{ padding:0 1.25rem!important }
  .about-ak-section{ padding:1.25rem 0!important }
  .about-ak-inner{ padding:0 1.25rem!important }
  .trust-header{ margin-bottom:2rem!important }
  .services-grid{ gap:0.9rem!important }
  .section-sub{ margin-bottom:1.5rem!important }
  .booking-page{ padding:5rem 1rem 3rem!important }
  .booking-page{ padding-top:max(5rem, calc(var(--nav-h,90px) + 16px))!important }
  .booking-header{ margin-bottom:1.25rem!important }
  .booking-header h1{ font-size:1.4rem!important }
  .progress-bar{ margin-bottom:1.25rem!important }
  .form-card{ padding:1.25rem 1rem!important; margin-bottom:0.85rem!important }
  .form-card h2{ margin-bottom:0.9rem!important; padding-bottom:0.6rem!important }
  .calendar-card{ padding:1.1rem 0.9rem!important }
  .payment-card{ padding:1.8rem 1.2rem!important }
  .payment-badge{ flex-wrap:wrap!important;gap:0.7rem 1rem!important;justify-content:center!important;padding:0.85rem 1.1rem!important }
  .form-nav{ margin-top:0.9rem!important }
  .simple-form-page{ padding:5rem 1rem 3rem!important }
  .simple-form-page{ padding-top:max(5rem, calc(var(--nav-h,90px) + 16px))!important }
  .cta-section{ padding:1.25rem 1.25rem!important }
  footer{ padding:1.5rem 1.25rem 1.25rem!important }
  .shop-inner{ padding:3.5rem 1.25rem!important }
}

/* ══════════════════════════════════════════════════════════════
   V23 — FIX 4: ACCORDION — Reading selection on mobile only
   Desktop grid (>600px) is completely untouched.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Accordion container */
  .v23-accordion{
    display:block!important;
    border:1px solid var(--border);
    background:linear-gradient(150deg,rgba(255,255,255,0.97),rgba(240,249,244,0.82));
    margin-bottom:1.25rem;
    overflow:hidden;
  }
  /* Each card is an accordion row */
  .v23-accordion .service-select-card{
    border:none!important;
    border-bottom:1px solid var(--border)!important;
    padding:0!important;
    box-shadow:none!important;
    transform:none!important;
    background:transparent!important;
    display:block;
    position:relative;
  }
  .v23-accordion .service-select-card:last-child{
    border-bottom:none!important;
  }
  .v23-accordion .service-select-card.selected{
    background:linear-gradient(150deg,rgba(232,249,241,0.65),rgba(220,243,233,0.45))!important;
  }
  /* Hide original desktop card internals */
  .v23-accordion .service-select-card > .check,
  .v23-accordion .service-select-card > .sc-eyebrow,
  .v23-accordion .service-select-card > h3,
  .v23-accordion .service-select-card > .sc-rule,
  .v23-accordion .service-select-card > p{ display:none!important; }
  /* Header row — always visible */
  .v23-acc-hdr{
    display:flex;
    align-items:center;
    padding:0.85rem 1rem;
    cursor:pointer;
    gap:0.6rem;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .v23-acc-check{
    width:20px; height:20px;
    border:1px solid var(--border);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.6rem; flex-shrink:0;
    background:rgba(255,255,255,0.85);
    transition:all 0.25s ease;
    color:transparent;
  }
  .service-select-card.selected .v23-acc-check{
    background:var(--gold)!important;
    border-color:var(--gold)!important;
    color:var(--bg)!important;
  }
  .v23-acc-labels{
    flex:1; min-width:0;
    display:flex; flex-direction:column; gap:0.08rem;
  }
  .v23-acc-sub{
    font-family:'Gudlak Bold',sans-serif;
    font-size:0.42rem; letter-spacing:0.3em;
    color:var(--gold-dk); text-transform:uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .v23-acc-title{
    font-family:'Gudlak Bold',sans-serif;
    font-size:0.76rem; letter-spacing:0.12em;
    color:var(--gold); text-transform:uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .v23-acc-arrow{
    font-size:0.62rem; color:var(--text-dim);
    flex-shrink:0;
    transition:transform 0.28s cubic-bezier(0.22,0.8,0.32,1);
    line-height:1;
  }
  .v23-acc-arrow.is-open{ transform:rotate(180deg); }
  /* Collapsible body */
  .v23-acc-body{
    overflow:hidden; max-height:0;
    transition:max-height 0.32s cubic-bezier(0.22,0.8,0.32,1),
                padding   0.25s ease;
    padding:0 1rem;
  }
  .v23-acc-body.is-open{
    max-height:280px;
    padding:0 1rem 0.9rem;
  }
  .v23-acc-desc{
    font-family:'Montserrat',sans-serif;
    font-size:0.93rem; color:var(--text-muted);
    line-height:1.8; margin-bottom:0.55rem; font-style:italic;
  }
  .v23-acc-tags{ display:flex; flex-wrap:wrap; gap:0.35rem; }
}

/* ── RESPONSIVENESS AUDIT FIXES ────────────────────────── */

/* Large desktop (1920px+): ensure content doesn't stretch oddly */
@media(min-width:1600px){
  .about-ak-grid{gap:6rem!important}
  .about-ak-portrait{max-width:360px!important}
}

/* Laptop (1366px–1600px): tighten grid gap slightly */
@media(max-width:1440px) and (min-width:1024px){
  .about-ak-grid{gap:3.5rem!important}
}

/* V26: Footer — now matches desktop 3-column layout at all sizes, per client request */
/* Tablet (768px–1023px): prevent about-ak left column from being too narrow */
@media(max-width:1024px) and (min-width:769px){
  .about-ak-grid{grid-template-columns:1fr 1.8fr!important;gap:3rem!important}
  .about-ak-portrait{max-width:260px!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}
  .testimonial{width:min(340px,80vw)}
}

/* Prevent admin-header from overflowing on mid-range screens */
@media(max-width:900px){
  .admin-content{padding:1.5rem}
  .admin-header h1{font-size:1.15rem}
}

/* Nav overflow on very wide or narrow screens */
@media(max-width:480px){
  .nav-logo{font-size:0.78rem;letter-spacing:0.04em}
  .nav-logo span{font-size:0.58rem;letter-spacing:0.16em}
  .about-ak-portrait{max-width:230px!important}
  .about-ak-seal-line{font-size:0.48rem!important;letter-spacing:0.3em!important}
  nav{padding:0.8rem 0.7rem;gap:0.35rem}
  .nav-book{font-size:0.55rem;padding:0.45rem 0.65rem;letter-spacing:0.06em;white-space:nowrap}
  .nav-auth{margin-right:0.3rem!important;gap:0.3rem!important}
  .nav-signin-link{font-size:0.56rem!important;letter-spacing:0.08em!important;gap:0.2rem!important;white-space:nowrap}
  .nav-hamburger{width:32px;height:32px;flex-shrink:0}
}
@media(max-width:360px){
  /* Smallest phones: drop the "By Akanksha" subtitle so the logo line
     stays compact and the nav cluster never wraps or overflows */
  .nav-logo span{display:none}
  .nav-logo{font-size:0.7rem}
  .nav-book{font-size:0.5rem;padding:0.4rem 0.5rem;letter-spacing:0.03em}
  .nav-signin-link{font-size:0.5rem!important}
}

@media(max-width:480px){
  /* Booking progress bar: shrink steps so all 5 fit without the
     first/last labels getting clipped by the viewport edge */
  .progress-step{min-width:48px;gap:0.3rem}
  .step-dot{width:26px;height:26px;font-size:0.6rem}
  .step-label{font-size:0.46rem;letter-spacing:0.08em}
  /* Calendar: tighter card padding so 7 columns of 44px-min touch
     targets fit without overflowing on narrow phones */
  .calendar-card{padding:1.25rem 0.6rem}
  .cal-grid{gap:2px}
}
@media(max-width:360px){
  .progress-step{min-width:40px}
  .step-dot{width:22px;height:22px;font-size:0.55rem}
  .step-label{font-size:0.46rem;letter-spacing:0.04em}
}

/* Prevent service select cards from collapsing text on tablet */
@media(max-width:900px) and (min-width:641px){
  #page-spell-booking .service-select-grid{grid-template-columns:repeat(2,1fr)}
  #page-spell-booking .service-select-grid .service-select-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:calc(50% - 0.5rem);
    justify-self:center;
  }
}


/* ── SECTION HEADINGS — ensure they never disappear ── */
.section-eyebrow,.section-title,.section-sub{
  /* Force repaint layer to fix disappearing headings on some mobile browsers */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* ══════════════════════════════════════════
   ABOUT AKANKSHA — PREMIUM PERSONAL SECTION
══════════════════════════════════════════ */
.about-ak-section{padding:1.75rem 0;position:relative;z-index:1;overflow:hidden}
.about-ak-section::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,var(--bg2) 0%,rgba(230,248,240,0.65) 50%,var(--bg3) 100%);pointer-events:none}
.about-ak-inner{max-width:1320px;margin:0 auto;padding:0 1.25rem}
.about-ak-grid{display:grid;grid-template-columns:1fr 1.55fr;gap:5rem;align-items:center}
.about-ak-visual{position:relative;display:flex;flex-direction:column;align-items:center}
.about-ak-portrait{width:100%;max-width:320px;aspect-ratio:5/4;background:linear-gradient(160deg,rgba(230,248,240,0.9),rgba(210,238,226,0.5));position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.about-ak-portrait::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(46,139,110,0.1),transparent 70%);pointer-events:none}
.about-ak-portrait-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.about-ak-sigil{animation:akSigilSpin 60s linear infinite;opacity:0.18;position:absolute}
@keyframes akSigilSpin{to{transform:rotate(360deg)}}
.about-ak-monogram{font-family:'Gudlak Bold',sans-serif;font-size:5rem;color:var(--gold);opacity:0.55;text-shadow:0 0 40px rgba(46,139,110,0.2);position:relative;z-index:2;letter-spacing:0.05em}
.about-ak-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:2}
.about-ak-photo-placeholder{position:absolute;inset:14px;z-index:3;border:1.5px dashed rgba(46,139,110,0.4);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;background:rgba(255,255,255,0.55);backdrop-filter:blur(1px)}
.about-ak-photo-placeholder-icon{font-size:1.6rem;opacity:0.55}
.about-ak-photo-placeholder-text{font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-dk);opacity:0.75;text-align:center;padding:0 1rem}
.about-ak-corner{position:absolute;width:22px;height:22px;border-color:var(--gold)}
.about-ak-corner.tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.about-ak-corner.tr{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid}
.about-ak-corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid;border-left:2px solid}
.about-ak-corner.br{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.about-ak-seal{margin-top:1.8rem;text-align:center}
.about-ak-seal-line{font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;font-weight:700;letter-spacing:0.42em;color:#123D30;text-transform:uppercase;display:block}
.about-ak-seal-name{font-family:'Gudlak Bold',sans-serif;font-size:0.9rem;font-weight:700;color:#0F4A38;display:block;margin-top:0.3rem;letter-spacing:0.12em}
.about-ak-text{}
.about-ak-eyebrow{font-family:'Gudlak Bold',sans-serif;font-size:0.68rem;font-weight:600;letter-spacing:0.44em;color:var(--gold-dk);text-transform:uppercase;display:block;margin-bottom:1rem}
.about-ak-name{font-family:'Gudlak Bold',sans-serif;font-size:clamp(2rem,4.2vw,3rem);color:var(--gold-dk);margin-bottom:0.5rem;line-height:1.2;font-weight:700}
.about-ak-title{font-family:'Gudlak Bold',sans-serif;font-size:0.82rem;font-weight:600;letter-spacing:0.3em;color:var(--text-readable);text-transform:uppercase;display:block;margin-bottom:2.2rem}
.about-ak-divider{display:flex;align-items:center;gap:0.8rem;margin-bottom:2rem}
.about-ak-divider-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(46,139,110,0.5),transparent)}
.about-ak-divider-symbol{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;color:var(--gold-dk);letter-spacing:0.4em}
.about-ak-body{color:var(--text);font-size:1.12rem;line-height:2.05;margin-bottom:1.5rem;letter-spacing:0.01em}
.about-ak-body strong{color:var(--gold-dk);font-style:normal;font-weight:600}
.about-ak-pullquote{border-left:2px solid rgba(46,139,110,0.55);padding:1rem 4.5rem 1rem 1.8rem;margin:2rem 0;font-style:italic;font-size:1.18rem;color:var(--text);line-height:1.85;letter-spacing:0.02em;position:relative;background:rgba(46,139,110,0.03)}
.about-ak-pullquote::before{content:'"';font-family:'Gudlak Bold',sans-serif;font-size:3rem;color:var(--gold);opacity:0.28;position:absolute;top:-0.6rem;left:0.4rem;line-height:1}
.about-ak-credentials{
  display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;
  gap:0.5rem;margin:0 0 2.25rem;padding:1.5rem 0;
  width:100%;
  border-bottom:1px solid var(--border);
}
.about-ak-cred{
  font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;letter-spacing:0.1em;color:#0F4A38;font-weight:600;
  text-transform:uppercase;text-align:center;cursor:default;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:0.6rem;
  flex:1 1 0;min-width:0;
}
.about-ak-cred svg{width:20px;height:20px;flex-shrink:0;color:var(--gold-dk);opacity:0.95;padding:11px;box-sizing:content-box;background:rgba(46,139,110,0.08);border:1px solid rgba(46,139,110,0.15);border-radius:50%}
@media(max-width:600px){
  .about-ak-credentials{display:grid;grid-template-columns:repeat(3,1fr);flex-wrap:unset;gap:1.75rem 0.5rem;padding:1.5rem 0.75rem}
  .about-ak-cred{flex:none;min-width:0}
}
@media(max-width:768px){
  .about-ak-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-ak-visual{align-items:center}
  .about-ak-pullquote{padding-right:3.5rem}
}

/* ══════════════════════════════════════════
   THE OCULTT INNER CIRCLE
══════════════════════════════════════════ */
.circle-section{padding:3.25rem 0;position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--border)}
.circle-section::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(26,48,40,0.97) 0%,rgba(15,35,25,0.99) 60%,rgba(20,42,32,0.97) 100%)}
.circle-section::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(46,139,110,0.12) 0%,transparent 70%);pointer-events:none}
.circle-inner{max-width:1320px;margin:0 auto;padding:0 1.25rem;position:relative;z-index:1}
.circle-geo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.07;pointer-events:none;animation:circleSpin 90s linear infinite}
@keyframes circleSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.circle-header{text-align:center;margin-bottom:3rem}
.circle-header .section-eyebrow{color:#B8DCCE !important}
.circle-header .section-title{color:#2E8B6E;background:linear-gradient(145deg,#c8e6d8 0%,#8ecfb5 40%,#2E8B6E 100%) !important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.circle-header .section-sub{color:#B8DCCE !important}
.circle-intro{max-width:600px;margin:0 auto 2.5rem;text-align:center;font-family:'Montserrat',sans-serif;font-size:1.12rem;color:#D2EBE1;line-height:2;font-style:italic;letter-spacing:0.02em}
.circle-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-bottom:2.5rem}
.cbenefit{border:1px solid rgba(46,139,110,0.25);background:rgba(255,255,255,0.04);padding:2rem 2rem 1.8rem;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.22,0.8,0.32,1)}
.cbenefit::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 10%,rgba(46,139,110,0.5) 50%,transparent 90%);opacity:0;transition:opacity 0.35s}
.cbenefit::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(46,139,110,0.06),transparent 70%);opacity:0;transition:opacity 0.35s}
.cbenefit:hover{border-color:rgb(40,122,97);background:rgba(255,255,255,0.07);transform:translateY(-3px)}.cbenefit:hover::before,.cbenefit:hover::after{opacity:1}
.cb-icon{width:40px;height:40px;border:1px solid rgba(46,139,110,0.3);background:rgba(46,139,110,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;transition:border-color 0.35s}.cbenefit:hover .cb-icon{border-color:rgb(40,122,97)}
.cb-title{font-family:'Gudlak Bold',sans-serif;font-size:0.78rem;letter-spacing:0.18em;color:#B8DCCE;text-transform:uppercase;display:block;margin-bottom:0.4rem}
.cb-rule{width:18px;height:1px;background:linear-gradient(to right,rgba(46,139,110,0.5),transparent);margin-bottom:0.8rem}
.cb-desc{font-family:'Montserrat',sans-serif;font-size:0.97rem;color:#D4EBE1;line-height:1.88;font-style:italic}
.circle-cta{text-align:center;padding:3rem;border:1px solid rgba(46,139,110,0.25);background:rgba(255,255,255,0.03);position:relative;overflow:hidden}
.circle-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(46,139,110,0.08),transparent 70%);pointer-events:none}
.circle-cta-eyebrow{font-family:'Gudlak Bold',sans-serif;font-size:0.56rem;letter-spacing:0.45em;color:#82D2B9;text-transform:uppercase;display:block;margin-bottom:0.8rem}
.circle-cta-title{font-family:'Gudlak Bold',sans-serif;font-size:1.5rem;color:#C8E6D7;margin-bottom:1rem;line-height:1.3}
.circle-cta-desc{font-family:'Montserrat',sans-serif;font-size:1.05rem;color:#D4EBE1;font-style:italic;line-height:1.9;margin-bottom:2rem;max-width:460px;margin-left:auto;margin-right:auto}
.btn-circle{background:linear-gradient(135deg,rgba(46,139,110,0.9),rgba(26,112,85,0.95));color:#FFFFFF;font-family:'Gudlak Bold',sans-serif;font-size:0.72rem;letter-spacing:0.22em;padding:1rem 2.5rem;border:1px solid rgba(46,139,110,0.5);cursor:pointer;text-transform:uppercase;transition:all 0.35s;box-shadow:0 4px 20px rgba(46,139,110,0.25);position:relative;overflow:hidden}
.btn-circle::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.08);opacity:0;transition:opacity 0.3s}
.btn-circle:hover{box-shadow:0 6px 30px rgba(46,139,110,0.4);transform:translateY(-1px)}.btn-circle:hover::after{opacity:1}
.circle-disclaimer{font-family:'Gudlak Bold',sans-serif;font-size:0.5rem;letter-spacing:0.25em;color:#B8DCCE;text-transform:uppercase;display:block;margin-top:1.2rem}
@media(max-width:768px){.circle-benefits{grid-template-columns:1fr}}

/* ══════════════════════════════════════════
   SCROLL ANIMATION ADDITIONS
══════════════════════════════════════════ */
.reveal-up{opacity:0;transform:translateY(28px);transition:opacity 0.7s cubic-bezier(0.22,0.8,0.32,1),transform 0.7s cubic-bezier(0.22,0.8,0.32,1)}
.reveal-up.visible{opacity:1;transform:none}
.reveal-fade{opacity:0;transition:opacity 0.9s ease}
.reveal-fade.visible{opacity:1}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.7s cubic-bezier(0.22,0.8,0.32,1),transform 0.7s cubic-bezier(0.22,0.8,0.32,1)}
.reveal-right.visible{opacity:1;transform:none}

/* ══════════════════════════════════════════════════
   ENHANCED REVEAL ANIMATIONS
══════════════════════════════════════════════════ */
.v7-reveal{opacity:0;transform:translateY(36px);transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1)}
.v7-reveal.vis{opacity:1;transform:none}
.v7-reveal-l{opacity:0;transform:translateX(-36px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.v7-reveal-l.vis{opacity:1;transform:none}
.v7-reveal-r{opacity:0;transform:translateX(36px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.v7-reveal-r.vis{opacity:1;transform:none}
.v7-reveal-scale{opacity:0;transform:scale(0.91);transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.v7-reveal-scale.vis{opacity:1;transform:none}
.v7-d1{transition-delay:0.1s}.v7-d2{transition-delay:0.2s}.v7-d3{transition-delay:0.32s}
.v7-d4{transition-delay:0.44s}.v7-d5{transition-delay:0.56s}.v7-d6{transition-delay:0.68s}

/* ══════════════════════════════════════════════════
   ECOMMERCE PREVIEW — THE OCULTT SHOP
══════════════════════════════════════════════════ */
.shop-section{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--border)}
.shop-section::before{content:'';position:absolute;inset:0;background:linear-gradient(165deg,rgba(20,42,32,0.96) 0%,rgba(10,24,18,0.99) 55%,rgba(16,36,26,0.97) 100%)}
.shop-section::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(46,139,110,0.1) 0%,transparent 70%);pointer-events:none}
.shop-geo{position:absolute;bottom:-100px;right:-100px;opacity:0.05;pointer-events:none;animation:shopGeoRot 100s linear infinite}
@keyframes shopGeoRot{to{transform:rotate(360deg)}}
.shop-inner{max-width:1320px;margin:0 auto;padding:3.25rem 1.25rem;position:relative;z-index:1}
.shop-header{text-align:center;margin-bottom:3rem}
.shop-sup{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;font-weight:600;letter-spacing:0.4em;color:#8CD7BE;text-transform:uppercase;display:block;margin-bottom:1rem}
.shop-title{font-family:'Gudlak Bold',sans-serif;font-size:clamp(1.8rem,4.5vw,3rem);color:#2E8B6E;background:linear-gradient(145deg,#c2e8d4 0%,#7ecfae 35%,#2E8B6E 70%,#1a6b52 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0.7rem;line-height:1.15}
.shop-tagline{font-family:'Montserrat',sans-serif;font-size:1.12rem;color:#D2EBE1;font-style:italic;max-width:480px;margin:0 auto 0.5rem;line-height:1.9}
/* Coming soon badge */
.shop-badge{display:inline-flex;align-items:center;gap:0.5rem;font-family:'Gudlak Bold',sans-serif;font-size:0.54rem;font-weight:600;letter-spacing:0.28em;color:#8CD7BE;text-transform:uppercase;border:1px solid rgba(140,215,190,0.4);padding:0.4rem 1.15rem;margin:1.5rem auto 0;background:rgba(140,215,190,0.08)}
.shop-badge-dot{width:6px;height:6px;background:rgba(46,139,110,0.7);border-radius:50%;animation:shopBlink 2s ease-in-out infinite}
@keyframes shopBlink{0%,100%{opacity:0.4}50%{opacity:1}}
/* Product grid */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:3.5rem}
.sprod{border:1px solid rgba(46,139,110,0.2);background:rgba(255,255,255,0.04);position:relative;overflow:hidden;transition:all 0.42s cubic-bezier(0.16,1,0.3,1);cursor:default;display:flex;flex-direction:column}
.sprod::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 8%,rgba(46,139,110,0.55) 50%,transparent 92%);opacity:0;transition:opacity 0.35s}
.sprod:hover{background:rgba(255,255,255,0.06);border-color:rgb(40,122,97);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,0.3),0 0 20px rgba(46,139,110,0.06)}.sprod:hover::before{opacity:1}
.sprod-img{height:160px;background:rgba(46,139,110,0.07);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(46,139,110,0.1);position:relative;overflow:hidden;flex-shrink:0}
.sprod-img::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(46,139,110,0.1),transparent 70%)}
.sprod-soon{position:absolute;top:0.6rem;right:0.6rem;font-family:'Gudlak Bold',sans-serif;font-size:0.4rem;letter-spacing:0.22em;color:#8CD7BE;border:1px solid rgba(46,139,110,0.4);padding:0.2rem 0.6rem;background:rgba(15,35,25,0.8);text-transform:uppercase}
.sprod-body{padding:1.4rem 1.4rem 1.2rem;flex:1;display:flex;flex-direction:column}
.sprod-cat{font-family:'Gudlak Bold',sans-serif;font-size:0.44rem;letter-spacing:0.38em;color:#82D2B9;text-transform:uppercase;display:block;margin-bottom:0.4rem}
.sprod-name{font-family:'Gudlak Bold',sans-serif;font-size:0.78rem;letter-spacing:0.12em;color:#C8EBD7;line-height:1.45;margin-bottom:0.5rem}
.sprod-desc{font-family:'Montserrat',sans-serif;font-size:0.88rem;color:#D4EBE1;line-height:1.75;font-style:italic;flex:1;margin-bottom:1rem}
.sprod-foot{display:flex;align-items:center;justify-content:space-between;padding:0.85rem 1.4rem;margin:0.9rem -1.4rem -1.2rem;background:linear-gradient(135deg,#1A7055,#0F4A38);border-top:1px solid rgba(255,255,255,0.1)}
.sprod-price{font-family:'Gudlak Bold',sans-serif;font-size:1.05rem;font-weight:700;color:#FFFFFF}
.sprod-price-note{font-family:'Gudlak Bold',sans-serif;font-size:0.42rem;letter-spacing:0.22em;color:rgba(255,255,255,0.75);text-transform:uppercase;display:block;margin-top:0.1rem}
.sprod-notify{font-family:'Gudlak Bold',sans-serif;font-size:0.54rem;font-weight:600;letter-spacing:0.16em;color:#FFFFFF;text-transform:uppercase;border:1px solid rgba(255,255,255,0.55);padding:0.4rem 0.8rem;cursor:pointer;transition:all 0.3s;background:rgba(255,255,255,0.08);border-radius:3px}
.sprod-notify:hover{border-color:#FFFFFF;color:#0F4A38;background:#FFFFFF}
/* Shop CTA */
.shop-cta-row{text-align:center}
.shop-cta-text{font-family:'Montserrat',sans-serif;font-size:1.06rem;color:#D2EBE1;font-style:italic;margin-bottom:1.5rem;line-height:1.9}
.btn-shop{font-family:'Gudlak Bold',sans-serif;font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;padding:1rem 2.8rem;background:transparent;border:1px solid rgba(46,139,110,0.45);color:#B8DCCE;cursor:pointer;transition:all 0.35s;position:relative;overflow:hidden}
.btn-shop::before{content:'';position:absolute;inset:0;background:rgba(46,139,110,0.1);opacity:0;transition:opacity 0.3s}
.btn-shop:hover{border-color:rgb(40,122,97);color:#D2F8E8;box-shadow:0 0 24px rgba(46,139,110,0.15)}.btn-shop:hover::before{opacity:1}
@media(max-width:768px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.shop-grid{grid-template-columns:1fr}}

/* ── FIX 4: Toast notification — 6s minimum visibility, close button
   V27: Improved close button contrast, wider gap, no white-space:nowrap
   on mobile, cleaner layout.                                          */
#ocultt-toast{
  position:fixed;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,rgba(26,112,85,0.98),rgba(15,74,56,0.99));
  color:#D2F8E8;
  font-family:'Gudlak Bold',sans-serif;
  font-size:0.68rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:0.9rem 1rem 0.9rem 1.8rem;
  border:1px solid rgba(46,139,110,0.6);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 0 1px rgba(46,139,110,0.15);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease, transform 0.5s ease;
  transform:translateX(-50%) translateY(8px);
  max-width:90vw;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  border-radius:2px;
}
#ocultt-toast.toast-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
#ocultt-toast-msg{flex:1;line-height:1.5}
#ocultt-toast-close{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  color:#D2F8E8;
  font-family:'Gudlak Bold',sans-serif;
  font-size:0.58rem;
  letter-spacing:0.08em;
  cursor:pointer;
  flex-shrink:0;
  padding:0.28rem 0.6rem;
  line-height:1;
  transition:background 0.2s,border-color 0.2s;
  border-radius:1px;
}
#ocultt-toast-close:hover{background:rgba(255,255,255,0.22);border-color:#FFFFFF}
@media(max-width:520px){
  #ocultt-toast{
    font-size:0.6rem;
    padding:0.85rem 0.9rem 0.85rem 1.2rem;
    letter-spacing:0.12em;
    max-width:calc(100vw - 2rem);
    bottom:1.25rem;
  }
}

/* ── FLOATING AI GUIDE BUTTON (premium placeholder, not a chatbot) ── */
#aiGuideBtn{
  position:fixed;
  bottom:1.8rem;
  right:1.8rem;
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--gold-dk),var(--gold));
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 8px 28px rgba(46,139,110,0.35),0 0 0 1px rgba(46,139,110,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:950;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s,opacity 0.25s;
/* Hidden during the booking flow — it was overlapping the calendar/payment
   continue buttons, and a competing CTA during checkout adds friction. */
}
#aiGuideBtn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 34px rgba(46,139,110,0.45),0 0 0 1px rgba(46,139,110,0.15)}
#aiGuideBtn.ai-guide-hidden{opacity:0;pointer-events:none;}
#aiGuideBtn svg{width:26px;height:26px;position:relative;z-index:1}
#aiGuideBtn::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(46,139,110,0.35);
  animation:aiGuidePulse 2.6s ease-out infinite;
}
@keyframes aiGuidePulse{
  0%{transform:scale(0.92);opacity:0.7}
  70%{transform:scale(1.18);opacity:0}
  100%{transform:scale(1.18);opacity:0}
}
#aiGuideLabel{
  position:fixed;
  bottom:2.4rem;
  right:6.2rem;
  background:rgba(15,42,33,0.92);
  color:#DFF0E7;
  font-family:'Gudlak Bold',sans-serif;
  font-size:0.58rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.5rem 0.85rem;
  border-radius:3px;
  white-space:nowrap;
  z-index:949;
  opacity:0;
  pointer-events:none;
  transform:translateX(6px);
  transition:opacity 0.3s,transform 0.3s;
}
#aiGuideBtn:hover + #aiGuideLabel,#aiGuideLabel.show-hint{opacity:1;transform:translateX(0)}
#aiGuidePanel{
  position:fixed;
  bottom:6.2rem;
  right:1.8rem;
  width:300px;
  max-width:calc(100vw - 2.4rem);
  background:linear-gradient(165deg,rgba(20,52,41,0.98),rgba(13,36,28,0.99));
  border:1px solid rgba(46,139,110,0.45);
  box-shadow:0 20px 60px rgba(0,0,0,0.35),0 0 0 1px rgba(46,139,110,0.12);
  border-radius:6px;
  z-index:951;
  padding:1.6rem 1.5rem 1.4rem;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px) scale(0.97);
  transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
#aiGuidePanel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.aig-close{position:absolute;top:0.7rem;right:0.7rem;background:transparent;border:none;color:#B8DCCE;font-size:0.85rem;cursor:pointer;line-height:1;padding:0.3rem;transition:color 0.2s}
.aig-close:hover{color:#B8DCCE}
.aig-sigil{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--gold-dk),var(--gold));display:flex;align-items:center;justify-content:center;margin-bottom:0.9rem}
.aig-sigil svg{width:18px;height:18px}
.aig-title{font-family:'Gudlak Bold',sans-serif;font-size:1rem;color:#dff0e7;margin-bottom:0.5rem;letter-spacing:0.02em}
.aig-badge{display:inline-block;font-family:'Gudlak Bold',sans-serif;font-size:0.5rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-dk);background:rgba(46,139,110,0.18);border:1px solid rgba(46,139,110,0.4);padding:0.25rem 0.6rem;border-radius:2px;margin-bottom:0.85rem}
.aig-desc{font-family:'Montserrat',sans-serif;font-style:italic;font-size:0.9rem;line-height:1.7;color:#DFF0E7;margin-bottom:1.1rem}
.aig-cta{display:block;width:100%;background:linear-gradient(135deg,var(--gold-dk),var(--gold));color:white;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;padding:0.7rem 1rem;border:none;border-radius:3px;cursor:pointer;text-align:center;transition:all 0.3s}
.aig-cta:hover{box-shadow:0 4px 18px rgba(46,139,110,0.35)}
@media(max-width:600px){
  #aiGuideBtn{width:52px;height:52px;bottom:1.4rem;right:1.4rem}
  #aiGuideBtn svg{width:23px;height:23px}
  #aiGuideLabel{display:none}
  #aiGuidePanel{bottom:5.6rem;right:1.1rem;width:calc(100vw - 2.2rem)}
}

/* Tarot topic pills */
.reading-format-divider{position:relative;display:flex;align-items:center;justify-content:center;min-width:2.5rem}
.reading-format-divider::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--border)}
.reading-format-divider span{position:relative;z-index:1;background:#fdfefe;padding:0.5rem 0;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase}
.tarot-topic-pill{font-family:'Gudlak Bold',sans-serif;font-size:0.58rem;font-weight:600;letter-spacing:0.12em;color:var(--gold-dk);border:1px solid rgba(46,139,110,0.4);padding:0.4rem 0.8rem;background:rgba(46,139,110,0.06);cursor:default;pointer-events:none;transition:all 0.25s;border-radius:4px;font-weight:600}
.tarot-topic-pill:hover{background:rgba(46,139,110,0.05);border-color:rgb(40,122,97);transform:none}
.tarot-topic-pill.active{background:#1A7055;color:#fff;border-color:#1A7055}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD & ADMIN — MOBILE RESPONSIVE (Issues 14, 15, 16)
   Target: 360px–768px (Samsung S, iPhone SE/14, Pixel)
═══════════════════════════════════════════════════════════════ */

/* All admin tables: always scroll inside their container, never page */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table-wrap table { min-width: 520px; }

/* ── 768px: tablet ── */
@media (max-width: 768px) {
  /* Layout: sidebar hidden by default, content takes full width, sidebar opens as a slide-out drawer */
  .admin-layout { grid-template-columns: 1fr; padding-top: var(--crm-nav-h,120px); }
  .admin-content { width: 100%; }
  .admin-mobile-hamburger { display: flex; }
  .admin-sidebar-overlay { display: block; }
  .admin-sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: var(--crm-nav-h,120px);
    left: 0;
    bottom: 0;
    width: min(300px, 82vw);
    height: auto;
    min-height: 0;
    z-index: 200;
    padding: 1.5rem 0;
    border-right: 1px solid var(--border);
    border-bottom: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.22,0.8,0.32,1);
    box-shadow: 8px 0 28px rgba(0,0,0,0.14);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-sidebar-brand { display: block; }
  .admin-notif-wrap { top: calc(var(--crm-nav-h,120px) + 8px); right: 12px; }
  .admin-notif-bell { padding: 0.28rem 0.55rem; font-size: 0.56rem; gap: 0.35rem; }
  .admin-notif-label { display: none; }
  .admin-notif-badge { min-width: 16px; height: 16px; font-size: 0.62rem; }
  .admin-notif-panel { width: calc(100vw - 24px); right: -6px; top: calc(100% + 14px); }
  .admin-nav-item {
    flex-direction: row;
    gap: 0.9rem;
    padding: 0.95rem 1.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    border-left: 2px solid transparent;
    border-bottom: none;
    white-space: normal;
    flex-shrink: 0;
  }
  .admin-nav-item.active { border-bottom-color: transparent; border-left-color: var(--gold); }
  .admin-nav-item span:first-child { font-size: 1.05rem; }
  .admin-sidebar-back { margin-top: 1rem; padding: 1.5rem 1.75rem; display: block; flex-shrink: 0; }
  .admin-sidebar-back button { white-space: nowrap; width: 100% !important; }

  /* Greeting: compact */
  .admin-header { margin-bottom: 1.25rem; }
  .admin-header h1 { font-size: 1.05rem !important; margin-bottom: 0.25rem; }
  .admin-header p { font-size: 0.8rem; }

  /* Stats: 2 columns */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; margin-bottom: 1.5rem; }
  .stat-card { padding: 1rem; }
  .stat-card .value { font-size: 1.5rem; }
  .stat-card .label { font-size: 0.55rem; margin-bottom: 0.4rem; }

  /* Admin content padding — extra top clearance for the fixed hamburger/notif row */
  .admin-content { padding: 4.5rem 1rem 1.25rem; }

  /* Tables: scroll inside wrapper, never overflow page */
  .admin-table-wrap table { min-width: 480px; }
  .admin-table-wrap th, .admin-table-wrap td { padding: 0.6rem 0.7rem; font-size: 0.78rem; }
  .admin-table-header { padding: 0.9rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .admin-table-header .actions { flex-wrap: wrap; gap: 0.5rem; width: 100%; }
  .search-input { width: 100%; }

  /* Spell video modal */
  #spell-video-modal > div { max-width: 98vw; margin: 0.5rem; }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  /* Stats: stack to 1 column for very small screens */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }
  .stat-card { padding: 0.85rem; }
  .stat-card .value { font-size: 1.3rem; }

  /* Greeting: minimal */
  .admin-header h1 { font-size: 0.9rem !important; }
  .admin-header p { font-size: 0.75rem; }

  /* Admin content: full-width breathing room, keep clearance for fixed hamburger/notif row */
  .admin-content { padding: 4.25rem 0.75rem 1rem; }

  /* Tables: tighter cells */
  .admin-table-wrap table { min-width: 420px; font-size: 0.75rem; }
  .admin-table-wrap th, .admin-table-wrap td { padding: 0.5rem 0.55rem; font-size: 0.72rem; }

  /* Client cell: stack name and email */
  .client-cell { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .client-name { font-size: 0.75rem; }
  .client-email { font-size: 0.65rem; }
  .avatar { width: 28px; height: 28px; font-size: 0.55rem; flex-shrink: 0; }

  /* Nav tabs: even tighter */
  .admin-nav-item { padding: 0.55rem 0.75rem; font-size: 0.5rem; }
  .admin-nav-item span:first-child { font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE QA — ALL PAGES (Issue 16)
═══════════════════════════════════════════════════════════════ */

/* Booking pages: no horizontal overflow at any width */
.booking-page, .simple-form-page { max-width: 100%; overflow-x: hidden; }

@media (max-width: 640px) {
  /* Form grid: always 1 column on phone */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-card { padding: 1.2rem; }
  .form-card h2 { font-size: 0.85rem; }

  /* Service select grids: 1 column */
  .service-select-grid { grid-template-columns: 1fr !important; }
  #page-spell-booking .service-select-grid { grid-template-columns: 1fr !important; }
  #page-numerology-booking .service-select-grid { grid-template-columns: 1fr !important; }
  #page-tarot-booking .service-select-grid { grid-template-columns: 1fr !important; }
  #page-energy-healing .service-select-grid { grid-template-columns: 1fr !important; }

  /* Tarot pricing grid: stack to 1 column */
  #page-tarot-booking > .booking-page > .form-card > div[style*="grid-template-columns:1fr 1fr"],
  .form-card div[style*="grid-template-columns:1fr 1fr"],
  .reading-format-grid {
    grid-template-columns: 1fr !important;
  }

  /* OR divider: horizontal line + centered label when stacked */
  .reading-format-divider { min-width:0; padding:0.4rem 0; }
  .reading-format-divider::before { top:50%; bottom:auto; left:0; right:0; width:auto; height:1px; }
  .reading-format-divider span { padding:0 0.8rem; }

  /* Booking header: tighter */
  .booking-header { padding: 5.5rem 1.2rem 1.2rem; }
  .booking-header h1 { font-size: clamp(1.4rem, 7vw, 2rem); }

  /* Progress bar: all 5 steps fit */
  .progress-bar { gap: 0; }
  .progress-step { min-width: 44px; flex: 1; }
  .step-label { font-size: 0.42rem; }

  /* About/Founder section stacks */
  .about-ak-inner { flex-direction: column !important; gap: 2rem !important; }
  .about-ak-portrait-wrap { max-width: 200px !important; margin: 0 auto !important; }

  /* Testimonials: marquee card scales for small phones */
  .testimonial { width: min(300px,80vw) !important; }

  /* Trust section scrollable on mobile — no clip */
  .trust-scroll-wrap { overflow: hidden; }
  .trust-pillars { flex-wrap: nowrap; }

  /* CTA section */
  .cta-section { padding: 3.75rem 1.2rem; }

  /* Checkout / payment */
  .payment-card { padding: 1.2rem; }
  .confirm-card { padding: 1.5rem; }
  .success-message { padding: 1.5rem; }

  /* Buttons: full width on phone */
  .form-nav { flex-direction: column-reverse; gap: 0.75rem; }
  .form-nav .btn-primary, .form-nav .btn-secondary { width: 100%; text-align: center; }

  /* Energy healing: 1-col on phone */
  #page-energy-healing .form-card div[style*="grid-template-columns:1fr 1fr 1fr"],
  #page-energy-healing .form-card div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Fix: selection checkmark overlapping the service title on the
     Switchwords / Personalized Sigils / Energy Circle cards on mobile */
  #eh-sw .check, #eh-si .check, #eh-ec .check{
    width:18px;height:18px;top:0.6rem;right:0.55rem;font-size:0.55rem;
  }
  #eh-sw > div, #eh-si > div, #eh-ec > div{
    padding-left:1.3rem;padding-right:2.1rem;
  }

  /* Spell category grid: 2 columns on phone */
  #spell-step-category .service-select-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Numerology report includes: 1 col on phone */
  .form-card div[style*="grid-template-columns:1fr 1fr;gap:0.5rem"] { 
    grid-template-columns: 1fr !important;
  }

  /* Audio/Phone pricing split: stack on phone */
  #page-tarot-booking .form-card > div[style*="grid-template-columns:1fr 1fr;gap:2rem"] {
    grid-template-columns: 1fr !important;
  }

  /* Bay leaf ritual tiers: 2 per row */
  #page-energy-healing div[style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 380px) {
  /* Smallest phones: spell grid 1-col */
  #spell-step-category .service-select-grid { grid-template-columns: 1fr !important; }
  .form-nav { gap: 0.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE MOBILE POLISH (Issue 15)
   Responsive tables — scroll inside container, never page
═══════════════════════════════════════════════════════════════ */
/* Already have overflow-x:auto on .admin-table-wrap */
/* Extra: ensure table cells don't break layout */
table { border-collapse: collapse; width: 100%; }
th, td { white-space: nowrap; }
/* Client/service columns: allow wrapping to save space */
td.wrap, th.wrap { white-space: normal; min-width: 100px; }

/* Empty state polish */
[style*="padding:3rem;text-align:center"] {
  padding: 2.5rem 1.5rem !important;
}



/* ══════════════════════════════════════════════════════════
   SUPPLEMENTAL STYLES (Google Auth, floating UI, CRM extras)
   ══════════════════════════════════════════════════════════ */


/* ── GOOGLE AUTH ── */
.nav-auth{display:flex;align-items:center;gap:0.75rem;margin-right:0.75rem}
/* ── FLOATING BACK PILL — always reachable, no scrolling needed ── */
.floating-back-pill{
  position:fixed;
  left:1.1rem;
  top:50%;
  transform:translateY(-50%) translateX(0);
  display:none;
  align-items:center;
  gap:0.45rem;
  font-family:'Gudlak Bold',sans-serif;
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-dk);
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border-bright);
  padding:0.6rem 0.9rem 0.6rem 0.7rem;
  border-radius:20px;
  cursor:pointer;
  z-index:940;
  box-shadow:0 4px 16px rgba(46,139,110,0.14);
  transition:all 0.3s cubic-bezier(0.22,0.8,0.32,1);
}
.floating-back-pill.show{display:flex}
.floating-back-pill:hover{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:0 6px 20px rgba(46,139,110,0.28);transform:translateY(-50%) translateX(3px)}
.floating-back-pill svg{flex-shrink:0;transition:transform 0.3s}
.floating-back-pill:hover svg{transform:translateX(-2px)}
@media(max-width:768px){
  .floating-back-pill{
    left:1rem;right:auto;top:auto;bottom:1.1rem;
    transform:none;
    padding:0.55rem 0.85rem 0.55rem 0.65rem;
  }
  .floating-back-pill:hover{transform:none}
}

.nav-user-pill{display:flex;align-items:center;gap:0.6rem;font-family:'Gudlak Bold',sans-serif;font-size:0.62rem;letter-spacing:0.16em;color:var(--text-muted);text-transform:uppercase;padding:0.45rem 0.9rem 0.45rem 0.5rem;border:1px solid var(--border);background:rgba(255,255,255,0.7);cursor:default;transition:border-color 0.3s;border-radius:20px}
.nav-user-pill:hover{border-color:var(--border-bright)}
.nav-user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
.nav-user-avatar-init{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold-dk),var(--gold));display:flex;align-items:center;justify-content:center;font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;color:#FFFFFF;flex-shrink:0;border:1px solid rgba(46,139,110,0.3);letter-spacing:0}
.nav-logout{font-family:'Gudlak Bold',sans-serif;font-size:0.58rem;letter-spacing:0.18em;color:var(--text-dim);text-transform:uppercase;cursor:pointer;padding:0.45rem 0.75rem;border:1px solid var(--border);background:transparent;transition:all 0.3s;border-radius:4px}
.nav-logout:hover{color:var(--gold);border-color:var(--border-bright)}
.nav-user-pill{display:flex;align-items:center;gap:0.5rem}
.nav-user-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,rgba(46,139,110,0.55),rgba(46,139,110,0.2));border:1px solid var(--border-bright);display:flex;align-items:center;justify-content:center;font-family:'Gudlak Bold',sans-serif;font-size:0.55rem;color:var(--gold);letter-spacing:0.05em;text-transform:uppercase;flex-shrink:0}
.nav-user-name{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.16em;color:var(--text-muted);text-transform:uppercase}

/* Google sign-in modal overlay */
.gauth-overlay{position:fixed;inset:0;z-index:999;background:rgba(26,51,41,0.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s}
.gauth-overlay.open{opacity:1;pointer-events:all}
.gauth-modal{background:var(--bg);border:1px solid var(--border-bright);max-width:400px;width:90%;padding:0;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.18),0 8px 20px rgba(46,139,110,0.1);animation:modalIn 0.4s cubic-bezier(0.16,1,0.3,1)}
@keyframes modalIn{from{opacity:0;transform:scale(0.93) translateY(16px)}to{opacity:1;transform:none}}
.gauth-modal-band{height:3px;background:linear-gradient(to right,transparent,rgba(46,139,110,0.65),transparent)}
.gauth-modal-body{padding:2.8rem 2.4rem 2.4rem;text-align:center}
.gauth-modal-sigil{font-family:'Gudlak Bold',sans-serif;font-size:2.2rem;color:var(--gold);opacity:0.3;display:block;margin-bottom:1rem;line-height:1}
.gauth-modal-eyebrow{font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;letter-spacing:0.45em;color:var(--gold-dk);text-transform:uppercase;display:block;margin-bottom:0.7rem}
.gauth-modal-title{font-family:'Gudlak Bold',sans-serif;font-size:1.35rem;color:var(--gold);margin-bottom:0.6rem;line-height:1.25}
.gauth-modal-desc{font-family:'Montserrat',sans-serif;font-size:1rem;color:var(--text-muted);font-style:italic;line-height:1.85;margin-bottom:2rem}
.gauth-modal-rule{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.75rem}
.gauth-modal-rule-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(46,139,110,0.25))}
.gauth-modal-rule-line.r{background:linear-gradient(to left,transparent,rgba(46,139,110,0.25))}
.gauth-modal-rule-sym{font-family:'Gudlak Bold',sans-serif;font-size:0.52rem;color:var(--gold-dk);letter-spacing:0.4em}
/* Google button container — GIS renders into this */
#gauth-google-btn{display:flex;justify-content:center;margin-bottom:1.2rem}
.gauth-modal-close{position:absolute;top:0.9rem;right:1rem;font-family:'Gudlak Bold',sans-serif;font-size:0.65rem;letter-spacing:0.15em;color:var(--text-dim);cursor:pointer;background:none;border:none;transition:color 0.3s;padding:0.25rem}
.gauth-modal-close:hover{color:var(--gold)}
.gauth-disclaimer{font-family:'Gudlak Bold',sans-serif;font-size:0.46rem;letter-spacing:0.22em;color:var(--text-dim);text-transform:uppercase;display:block}

/* ── INLINE VALIDATION MESSAGES (C-06 fix) ── */
.field-error{
  display:none;
  font-family:'Gudlak Bold',sans-serif;
  font-size:0.55rem;
  letter-spacing:0.18em;
  color:#c0392b;
  text-transform:uppercase;
  margin-top:0.4rem;
  padding:0.35rem 0.7rem;
  border:1px solid rgba(192,57,43,0.25);
  background:rgba(192,57,43,0.05);
  line-height:1.5;
}
.field-error.is-visible{display:block}
input.field-invalid,select.field-invalid,textarea.field-invalid{border-color:rgb(192,57,43)!important}
input.field-invalid:focus,select.field-invalid:focus,textarea.field-invalid:focus{border-color:#c0392b!important}

/* Step-level banner for selection steps */
.step-error-banner{
  display:none;
  font-family:'Gudlak Bold',sans-serif;
  font-size:0.6rem;
  letter-spacing:0.22em;
  color:#c0392b;
  text-transform:uppercase;
  padding:0.8rem 1.2rem;
  border:1px solid rgba(192,57,43,0.3);
  background:rgba(192,57,43,0.06);
  margin-top:1rem;
  margin-bottom:0.5rem;
  text-align:center;
  line-height:1.6;
  width:100%;
}
.step-error-banner.is-visible{display:block}
.nav-signin-link{font-family:'Gudlak Bold',sans-serif;font-size:0.74rem;font-weight:600;letter-spacing:0.18em;color:var(--gold-dk);text-decoration:none;cursor:pointer;transition:color 0.3s;text-transform:uppercase;display:none!important;align-items:center;gap:0.4rem}
.nav-signin-link:hover{color:var(--gold)}
.nav-signin-link::before{content:'◇';font-size:0.55rem;opacity:0.6}

@media(max-width:768px){
  .nav-user-pill span.nav-user-name{display:none}
  .nav-logout{font-size:0;padding:0.45rem 0.55rem}
  .nav-logout::after{content:'↩';font-size:0.75rem}
  .nav-auth{gap:0.4rem}
}

/* ══════════════════════════════════════════════════════════════
   V34 — POLISH, RESPONSIVENESS & UX IMPROVEMENTS
   Preserves all V33 design, branding, identity and structure.
   Only refines, optimises and fixes.
══════════════════════════════════════════════════════════════ */

/* ── HERO: SAFE ZONE FOR FLOATING CARDS ─────────────────────── */
/* On wide screens ensure cards stay in outer columns only */
@media(min-width:1024px){
  .cards-float { pointer-events:none }
  /* Guard central 36%–64% horizontally with a transparent blocked zone */
  .hero-content-guard {
    position:absolute;
    top:0;bottom:0;
    left:36%;right:36%;
    z-index:4;
    pointer-events:none;
  }
}
/* Mobile: hide far layer already done; reduce mid opacity further */
@media(max-width:480px){
  .float-card.layer-mid { opacity: 0.45 !important; }
  .float-card.layer-near { opacity: 0.55 !important; }
}

/* Mobile banner declutter: fewer floating elements competing with the message */
@media(max-width:600px){
  .float-card.layer-mid{display:none}
  .hero{padding:8.5rem 1.25rem 2.75rem}
  .hero-sub{letter-spacing:0.32em;margin-bottom:0.5rem}
  .hero-desc{max-width:345px;margin:1rem auto 1.75rem;line-height:1.58;font-size:0.86rem}
  .hero-ctas{gap:0.85rem}
  .hero-scroll-cue{bottom:1.25rem;opacity:0.6!important}
}

/* ── HERO TITLE: ALLOW WRAP ON SMALL TABLETS ────────────────── */
@media(max-width:900px) and (min-width:601px){
  .hero-title { font-size: clamp(2.6rem, 7vw, 4rem); white-space:normal; }
  .hero { padding: 9.5rem 1.5rem 4rem; }
}

/* ── HERO BUTTONS: LARGER TOUCH TARGETS ON MOBILE ──────────── */
@media(max-width:600px){
  .btn-primary, .btn-secondary {
    font-size: 0.72rem !important;
    padding: 0.9rem 1.8rem !important;
    letter-spacing: 0.16em !important;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: block;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: min(280px, 85vw);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── SERVICES SECTION: BETTER SPACING ───────────────────────── */
/* Padding now inherited from the shared section rule for consistency with About/Testimonials/Draw-a-Card */

/* Tablet: 2-col services grid */
@media(max-width:1023px) and (min-width:769px){
  .services-grid { grid-template-columns: repeat(2,1fr) !important; gap: 1.4rem !important; }
}

/* ── SECTION TITLES: PREVENT GRADIENT CLIP CUTTING OFF ──────── */
.section-title { 
  padding-bottom: 0.1em; /* prevent bottom of letters clipping */
  -webkit-text-fill-color: transparent; 
}

/* ── TESTIMONIALS: BETTER READABILITY ───────────────────────── */
.testimonial-text {
  color: #2e5a49 !important; /* slightly darker than text-readable */
  font-size: 1.02rem !important;
  line-height: 2.05 !important;
}
/* Testimonial card width on tablets */
@media(max-width:1023px) and (min-width:601px){
  .testimonial { width: min(360px,42vw) !important; }
}

/* ── SCROLLABLE SECTIONS: VISUAL FADE INDICATORS ────────────── */
.trust-scroll-wrap {
  position: relative;
}

/* Left fade – indicates more content to the left */
.trust-scroll-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 1.5rem;
  width: 42px;
  background: linear-gradient(to right, rgba(247,250,248,0.88), transparent);
  z-index: 5;
  pointer-events: none;
  opacity: 0; /* only shown when not at start — JS controls */
  transition: opacity 0.3s;
}
/* Right fade – indicates more content to the right */
.trust-scroll-wrap::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 1.5rem;
  width: 42px;
  background: linear-gradient(to left, rgba(247,250,248,0.88), transparent);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s;
}
/* Show right-fade by default (user hasn't scrolled yet) */
.trust-scroll-wrap.has-right::after { opacity: 1; }
.trust-scroll-wrap.has-left::before { opacity: 1; }

/* Mobile scroll hint text under scroll rows */
.scroll-swipe-hint {
  display: none;
  text-align: center;
  font-family:'Gudlak Bold',sans-serif;
  font-size: 0.46rem;
  letter-spacing: 0.32em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 0.65rem;
}
@media(max-width:768px){
  .scroll-swipe-hint { display: block; }
}

/* ── ABOUT AKANKSHA: COMPACT THE PORTRAIT ───────────────────── */
/* Reduce the visual weight — brand focus over personal photo */
.about-ak-portrait {
  aspect-ratio: 4/3.5 !important; /* was 5/4 — slightly squarer, less towering */
  max-width: 280px !important; /* was 320px */
}
@media(max-width:1440px) and (min-width:1025px){
  .about-ak-grid { gap: 4rem !important; }
}
@media(max-width:768px){
  .about-ak-portrait { max-width: 240px !important; aspect-ratio: 4/3.5 !important; }
}
/* More breathing room for text column */
.about-ak-body { line-height: 2 !important; margin-bottom: 1.2rem !important; }

/* ── CIRCLE BENEFITS: 2-COL ALWAYS ON TABLET ────────────────── */
@media(max-width:1023px) and (min-width:601px){
  .circle-benefits { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── SHOP GRID: BETTER TABLET ────────────────────────────────── */
@media(max-width:1023px) and (min-width:769px){
  .shop-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── FOOTER: CONTACT STYLING ─────────────────────────────────── */
.footer-contact-email {
  display: block;
  color: var(--text-dim);
  font-family:'Gudlak Bold',sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  margin-top: 0.75rem;
  transition: color 0.3s;
}
.footer-contact-email:hover { color: var(--gold); }

/* Social link icons */
.social-link svg { display: block; }

/* ── POPUP / TOAST: READABLE ON NARROW ──────────────────────── */
/* Already has 6s timer — just ensure line-height on narrow */
@media(max-width:380px){
  #ocultt-toast { font-size: 0.56rem !important; letter-spacing: 0.1em !important; }
}

/* ── BOOKING PAGES: BETTER ON LARGE SCREENS ─────────────────── */
@media(min-width:1400px){
  .booking-page { max-width: 800px !important; }
  .simple-form-page { max-width: 700px !important; }
}

/* ── LARGE SCREEN IMPROVEMENTS ───────────────────────────────── */
@media(min-width:1600px){
  .trust-inner,
  .shop-inner,
  .about-ak-inner, .circle-inner { max-width: 1200px; }
  .hero-title { font-size: clamp(3rem, 5.5vw, 7rem); }
}

/* ── ULTRA-WIDE PREVENTION: cap hero card drift ─────────────── */
@media(min-width:1400px){
  /* Push any near-layer cards further from center */
  .float-card.layer-near { max-width: 70px !important; }
  .float-card.layer-mid  { max-width: 55px !important; }
}

/* ── IPAD / TABLET PORTRAIT: SPECIFIC FIXES ─────────────────── */
/* iPad portrait ~768px */
@media(max-width:820px) and (min-width:768px){
  .about-ak-grid { grid-template-columns: 1fr !important; }
  .about-ak-portrait { max-width: 260px !important; margin: 0 auto; }
  .about-visual { margin-bottom: 1.5rem !important; }
}

/* ── GENERAL TOUCH IMPROVEMENTS ─────────────────────────────── */
/* Minimum 44px touch targets for all buttons */
.btn-primary, .btn-secondary, .nav-book, .nav-drawer-book-btn,
.btn-circle, .btn-shop { min-height: 44px; }

/* Prevent text selection while interacting with scroll cards */
.journey-scroll, .trust-pillars, .featured-scroll-row {
  -webkit-user-select: none;
  user-select: none;
}

/* ── PREVENT LAYOUT SHIFT FROM ANIMATIONS ON LOW-POWER DEVICES ─ */
@media(prefers-reduced-motion: reduce){
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .float-card { display: none !important; }
  .reveal, .reveal-left, .reveal-scale, .reveal-up,
  .v7-reveal, .v7-reveal-l, .v7-reveal-r, .v7-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── ANDROID CHROME: FIX BOTTOM SAFE AREA ───────────────────── */
#aiGuideBtn {
  bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
}
#aiGuidePanel {
  bottom: calc(6.2rem + env(safe-area-inset-bottom, 0px));
}
#ocultt-toast {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
@media(max-width:600px){
  #aiGuideBtn { bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
  #aiGuidePanel { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ── TRUST CARD TABLET ─────────────────────────────────── */
@media(max-width:1023px) and (min-width:769px){
  .trust-pillar { flex: 0 0 260px !important; }
}

/* ── BETTER LINK CURSOR ──────────────────────────────────────── */
.footer-col ul li a { cursor: pointer; }

/* ── REMOVE HORIZONTAL SCROLL ON BODY ───────────────────────── */
body { max-width: 100vw; }

/* ── IMPROVE AI GUIDE BUTTON ON TABLET ──────────────────────── */
@media(max-width:1023px) and (min-width:601px){
  #aiGuideBtn { width: 54px !important; height: 54px !important; }
}

/* ── CRM INLINE PROMPT MODAL (replaces native prompt/alert) ────── */
#_crm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:100000;display:flex;align-items:center;justify-content:center;padding:1rem}
#_crm-modal-box{background:var(--bg);border:1px solid var(--border);padding:1.8rem 1.6rem;max-width:460px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,0.3)}
#_crm-modal-box h4{font-family:'Gudlak Bold',sans-serif;font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-dk);margin:0 0 1rem}
#_crm-modal-box textarea,#_crm-modal-box input[type=text],#_crm-modal-box input[type=date]{width:100%;font-family:'Montserrat',sans-serif;font-size:0.95rem;color:var(--text);background:transparent;border:1px solid var(--border);padding:0.55rem 0.7rem;resize:vertical;margin-bottom:0.75rem;box-sizing:border-box}
#_crm-modal-box textarea{min-height:80px}
._crm-modal-btns{display:flex;gap:0.6rem;justify-content:flex-end;margin-top:0.5rem}
._crm-modal-btns button{font-family:'Gudlak Bold',sans-serif;font-size:0.6rem;letter-spacing:0.12em;padding:0.5rem 1rem;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text);text-transform:uppercase}
._crm-modal-btns button.primary{background:var(--gold-dk);color:#fff;border-color:var(--gold-dk)}