/* ==============  Base theme  ============== */
:root{
  --bg:#0b1220;
  --panel:#121a2b;
  --ink:#eaf2ff;
  --muted:#b9c6e6;
  --brand:#37c0fb;    /* link blue */
  --accent:#37c0fb;   /* action blue */
  --gold:#ffd166;

  --border:#1f2b45;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.18);

  --container:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}

/* Global container spacing */
.container{max-width:var(--container);margin-inline:auto;padding-inline:16px}
.section{padding:48px 0}
h1,h2,h3{margin:0 0 12px}

/* Links */
a{color:var(--brand);text-decoration:none}
a:hover{color:#fff}

/* Buttons */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;
  background:var(--accent);color:#071018;font-weight:700;border:0;cursor:pointer;
  transition:transform .12s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(55,192,251,.35); }
.btn.secondary{ background:transparent; color:var(--ink); border:1px solid var(--accent); }

/* Cards / grids */
.grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.card{ background:var(--panel); border:1px solid #243251; border-radius:var(--radius); overflow:hidden; position:relative; }
.card .p{ padding:16px }

/* Card images: tidy headshots and hero thumbnails */
.card img{ width:100%; display:block; aspect-ratio:3/2; object-fit:cover; object-position:center; }

/* If you want a subtle upward face crop on headshots, add class="headshot" to those <img> */
.card img.headshot{ object-position:center 25%; }

/* Panels */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }

/* Small chips */
.badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:8px;background:#0f172a;color:#a5b4fc;border:1px solid #243251}

/* Forms (if used) */
input,select,textarea{background:#0d152b;color:var(--ink);border:1px solid #243251;border-radius:10px;padding:12px;width:100%}
label{display:block;margin:8px 0 4px;color:#c7d2fe}

/* Footer */
.footer{border-top:1px solid #1f2a44;padding:24px;color:#9ca3af}

/* ================= Header / Nav ================= */
.header{
  position:sticky; top:0; z-index:10; background:#0b1220cc; backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;margin-right:6px;text-decoration:none}
.brand-pill{
  display:inline-block;background:#0f1b33;color:#b9dfff!important;
  padding:6px 12px;border-radius:10px;font-weight:800;letter-spacing:.02em
}
.nav a{
  color:var(--brand); font-weight:600; font-size:18px;
  padding:0; border-radius:0; background:transparent; text-decoration:none; /* kill default underline */
}
.nav a:hover{ color:#ffffff }
.nav a.active, .nav a[aria-current="page"]{
  color:#ffffff; border-bottom:2px solid var(--brand); padding-bottom:2px; text-decoration:none;
}
.spacer{flex:1 1 auto}

/* ================== Hero ================== */
.hero{
  position:relative; isolation:isolate;
  padding:72px 0 32px;
  background:
    radial-gradient(900px 280px at 25% -40px, rgba(46,168,255,.22), transparent 70%),
    radial-gradient(700px 240px at 85% -60px, rgba(85,200,255,.12), transparent 70%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(600px 400px at 90% 10%, rgba(55,192,251,.12), transparent 60%),
    radial-gradient(700px 500px at 10% 20%, rgba(120,80,255,.10), transparent 60%);
}

/* Big headline glow (optional) */
.h1--glow{
  background:linear-gradient(0deg,#fff 0%,#d9e6ff 60%,#b9c6e6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 30px rgba(46,168,255,.16);
}

/* Eyebrow / kicker */
.kicker, .eyebrow{ text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-size:.8rem; }

/* =================  Global color wash  ================= */
/* Soft glows behind the whole page */
body::before{
  content:""; position:fixed; inset:-20vh -10vw -20vh -10vw; z-index:-2; pointer-events:none;
  background:
    radial-gradient(45vw 45vh at 10% 10%, rgba(55,192,251,.10), transparent 60%),
    radial-gradient(35vw 35vh at 90% 0%,  rgba(120,80,255,.08), transparent 65%),
    radial-gradient(50vw 40vh at 50% 120%, rgba(255,215,0,.06), transparent 70%);
  filter:saturate(110%);
}

/* Subtle highlight behind panels/cards on hover */
.panel::before,
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(400px 280px at 80% 0%, rgba(55,192,251,.06), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgba(120,80,255,.05), transparent 70%);
  opacity:.9;
}

/* ============ Page-specific helpers ============ */

/* Lightbox backdrop (if used elsewhere) */
.lb-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:9999; }
.lb-backdrop.open{ display:flex; }
.lb-backdrop img{ max-width:90vw; max-height:88vh; border-radius:12px; border:1px solid #1f2b45; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.lb-close{ position:fixed; top:14px; right:16px; background:#111a2b; color:#cfe0ff; border:1px solid #2a3b5f; border-radius:999px; padding:8px 12px; cursor:pointer; }

/* Gallery grid (AW Hair) */
.mini-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media (min-width:900px){ .mini-gallery{ grid-template-columns:repeat(3,1fr) } }
.mini-gallery figure{ margin:0; border-radius:12px; overflow:hidden; background:var(--panel); border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,.12) }
.mini-gallery img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .2s ease }
.mini-gallery img:hover{ transform:scale(1.02) }

/* Chips row used on AW Hair hero */
.statrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.stat{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:#0e172b; border:1px solid #243251; color:#cfe0ff; box-shadow:0 6px 18px rgba(0,0,0,.12); font-weight:600; font-size:.95rem; }

/* AW Hair price card spacing tweak (reduce gap) */
#prices .container.split{ row-gap:12px; }
#prices .panel:first-child{ margin-top:-12px; }

/* Book button (header, if used) */
.btn-book{
  background:var(--accent); color:#001026; font-weight:700; border-radius:999px; padding:10px 16px;
  text-decoration:none; transition:transform .12s ease, box-shadow .25s ease;
}
.btn-book:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(55,192,251,.35) }


/* ==== Header normalize (fix legacy pill styles on Terms, etc.) ==== */

/* Hide the old badge + old SVG logo if present */
.header .nav .badge,
.header .nav .logo img,
.topbar .badge { display:none !important; }

/* Keep the wordmark pill consistent */
.header .nav .logo,
.topbar .logo { padding:0 !important; background:transparent !important; box-shadow:none !important; }
.brand-pill{
  background:#0f1b33 !important;
  color:#b9dfff !important;
  padding:6px 12px !important;
  border-radius:10px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
}

/* Kill any leftover “blue pill” styles on nav links */
.header .nav a,
.topbar nav a{
  color:var(--brand) !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  font-weight:600;
  font-size:18px;
}
.header .nav a:hover,
.topbar nav a:hover{ color:#fff !important; }

/* Active underline only (no double underline) */
.header .nav a.active,
.header .nav a[aria-current="page"],
.topbar nav a.active,
.topbar nav a[aria-current="page"]{
  color:#fff !important;
  border-bottom:2px solid var(--brand) !important;
  padding-bottom:2px !important;
}

/* Make sure the bar itself matches the new pages */
.topbar{
  background:#0b1220cc !important;
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; z-index:10;
}
.topbar nav{ display:flex; gap:18px; align-items:center; }

/* Keep spacing consistent */
.header .nav{ align-items:center; gap:18px; }


/* —— Cards: equal heights + bigger image area —— */
.grid{ align-items: stretch; }            /* was start */

.card{
  display:flex;
  flex-direction:column;                  /* lets content stretch */
  height:100%;
}

.card > img{
  width:100%;
  height:280px;                           /* show more of the image */
  object-fit:cover;
  object-position:50% 22%;                /* bias upward to keep faces in frame */
}

@media (max-width: 640px){
  .card > img{ height:220px; }            /* slightly smaller on phones */
}

/* Make the text area fill remaining space and pin the button to the bottom */
.card .p{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.card .p .btn{ margin-top:auto; align-self:flex-start; }