/* ==========================================================
   Industry Salon — Production CSS (Alta + DM Sans)
   Single-source selectors, no conflicting overrides
========================================================== */

/* -------------------- Tokens -------------------- */
:root{
  /* Palette */
  --bg:#EFE6DC;
  --text:#2B241E;
  --muted:#6F655D;
  --line:#E4D6C8;

  --logo-brown:#594E45;
  --brand:#B4896A;
  --brand2:#8A6F5A;

  /* Layout */
  --maxw:1200px;
  --radius:18px;

  /* Shadows */
  --shadow:0 12px 28px rgba(89,78,69,.10), 0 2px 6px rgba(89,78,69,.06);

  /* Glass surfaces */
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(228,214,200,.70);
  --glass-shadow: 0 14px 30px rgba(89,78,69,.10), 0 4px 10px rgba(89,78,69,.06);

  /* Header */
  --header-h:88px;
  --header-h-mobile:64px;
  --header-bg: rgba(255,255,255,.62);
  --header-blur: 14px;

  /* Typography */
  --nav-weight:500;
  --nav-letter:0.06em;

  /* Buttons */
  --btn-radius:14px;
  --btn-pad-y:.75rem;
  --btn-pad-x:1.25rem;
}

/* -------------------- Base -------------------- */
html{ font-size:21px; }
@media (max-width:480px){ html{ font-size:18px; } }

header{
  padding-top: env(safe-area-inset-top);
}

header::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(140%);
  z-index: 2999; /* just under header's 3000 */
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

html{
  /*background: var(--header-bg);*/
  background:var(--bg);
}
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin:0;
  padding:0;
  overflow-x:hidden;
  background: var(--bg);
  /*background: url("../assets/images/industry_bg.jpg");*/
}

main {
  flex: 1;
}

/*body::before{*/
/*  content:"";*/
/*  position: fixed;*/
/*  inset: 0;*/
/*  background:*/
/*          linear-gradient(to bottom, rgba(239,230,220,.82), rgba(239,230,220,.68));*/
/*  z-index: -2;*/
/*  pointer-events:none;*/
/*}*/

/*main.section .container{*/
/*  background: rgba(255,255,255,.22);*/
/*  border: 1px solid rgba(255,255,255,.28);*/
/*  backdrop-filter: blur(16px) saturate(140%);*/
/*  -webkit-backdrop-filter: blur(16px) saturate(140%);*/
/*  border-radius: 26px;*/
/*  padding: 44px 22px;*/
/*  box-shadow: 0 18px 48px rgba(0,0,0,.10);*/
/*}*/

@font-face{
  font-family:'Alta';
  src:
          url('../assets/fonts/Alta_regular.woff2') format('woff2'),
          url('../assets/fonts/Alta_regular.woff')  format('woff'),
          url('../assets/fonts/alta-regular.otf')  format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

body{
  font-family: 'Tinos', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--text);
  line-height: 1.65;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width:768px){
  body{ padding-top:var(--header-h-mobile); }
}

a{ color:inherit; text-decoration:none; }
p{ color:var(--muted); line-height:1.75; margin:0 0 1rem; }
ul,li{ font-family:inherit; color:var(--muted); line-height:1.7; }

h1,h2,h3,h4,h5,h6{
  font-family:'Scheherazade New', Georgia, 'Times New Roman', serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--logo-brown);
  margin:0 0 .5rem;
}

h1{ font-size:clamp(2.6rem,4.8vw,4.2rem); line-height:1.12; }
h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.22; }
h3{ font-size:1.45rem; line-height:1.25; }

/* -------------------- Layout -------------------- */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 22px;
}
.section{ padding: clamp(48px, 6vw, 84px) 0; }

.grid{ display:grid; gap:26px; }
.grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){
  .grid.two, .grid.three{ grid-template-columns:1fr; }
}

/* -------------------- Header -------------------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:3000;

  background:var(--header-bg);
  backdrop-filter: blur(var(--header-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(140%);

  border-bottom:1px solid rgba(228,214,200,.60);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

header .container{
  max-width: 1320px;          /* wider than 1200 */
  padding-left: 36px;         /* more room */
  padding-right: 36px;
}

header .nav{
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 3vw, 56px);
  padding: 0;
}

header .nav-left{
  justify-self: end;
}

header .brand{
  justify-self: center;
}

header .nav-right{
  justify-self: start;
  gap: clamp(14px, 2vw, 22px);
}


/*header .nav-right{*/
/*  padding-left: 48px;*/
/*}*/

/* MOBILE: 2-row header, logo on top, actions under it */
/*@media (max-width:768px){*/
/*  header .nav{*/
/*    display:grid !important;*/
/*    grid-template-columns: 1fr;*/
/*    grid-template-rows: auto auto;*/
/*    row-gap: 8px;*/
/*    padding: 10px 0 12px;*/
/*  }*/

/*  !* Logo centered in row 1 *!*/
/*  header .brand.brand-center{*/
/*    position: static !important;*/
/*    transform: none !important;*/
/*    justify-content: center;*/
/*    grid-row: 1;*/
/*  }*/

/*  !* Row 2 container *!*/
/*  .mobile-header-actions{*/
/*    grid-row: 2;*/
/*    display:flex;*/
/*    align-items:center;*/
/*    justify-content: space-between;*/
/*    padding: 0 22px; !* match container padding *!*/
/*    gap: 12px;*/
/*  }*/

/*  !* Put menu left and book right *!*/
/*  header .nav-right{*/
/*    margin-left: 0 !important;*/
/*    width: 100%;*/
/*  }*/

/*  !* Mobile book button sizing *!*/
/*  .mobile-book{*/
/*    padding: .7rem 1.05rem;*/
/*    font-size: .9rem;*/
/*    letter-spacing: .05em;*/
/*  }*/

/*  header .menu-toggle{*/
/*    margin-right:16px;*/
/*  }*/

/*  !* Hide desktop-only actions on mobile *!*/
/*  .desktop-only{ display:none !important; }*/
/*}*/

/* Logo */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo{ height:64px; width:auto; display:block; }
/*@media (max-width:768px){*/
/*  .brand{*/
/*    position:absolute;*/
/*    left:50%;*/
/*    transform:translateX(-50%);*/
/*    z-index:2;*/
/*  }*/
/*  .brand-logo{ height:44px; }*/
/*}*/

/* Nav sides */
.nav-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  z-index:3;
}

/* Desktop inline nav */
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: clamp(28px, 3vw, 56px);
  align-items:center;
}

/* Visibility helpers */
.desktop-only{ display:inline-flex; }
.mobile-only{ display:none; }
@media (max-width:768px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:block; }
}

/* Mobile header actions: hidden on desktop, visible on mobile */
.mobile-header-actions{ display:none; }

@media (max-width:768px){
  .mobile-header-actions{ display:flex; }
}

/* Header typography */
.site-nav a,
.nav-utility,
.cta-book,
.menu-toggle{
  font-family:'Scheherazade New', Georgia, 'Times New Roman', serif;
  font-weight:var(--nav-weight);
  letter-spacing:var(--nav-letter);
  text-transform:uppercase;
  color:var(--logo-brown);
}

/* Header hover spacing (desktop) */
.site-nav a,
.nav-utility{
  display: inline-block;
  white-space: nowrap;

  padding: 12px 18px;
  border-radius: 0;
  background: transparent;

  letter-spacing: var(--nav-letter);
  transition:
          letter-spacing .45s cubic-bezier(.16,1,.3,1),
          color .30s ease;
  will-change: letter-spacing;
}

/* Hover = only letters change */
.site-nav a:hover,
.site-nav a.is-active,
.nav-utility:hover{
  letter-spacing: 0.14em;
  color: var(--brand);
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  border:1px solid var(--line);
  background:var(--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:var(--glass-shadow);

  font-family:'Scheherazade New', Georgia, 'Times New Roman', serif;
  font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;

  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:rgba(255,255,255,.55);
  border:1px solid var(--brand);
  color:var(--brand2);
  box-shadow:none;
}
.btn-primary:hover{
  background:rgba(180,137,106,.12);
}

.btn-glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.btn-glass:hover{
  background:rgba(255,255,255,.85);
}

/* On very small screens keep hero buttons from wrapping text */
@media (max-width:480px){
  .btn{ font-size:.9rem; padding:.75rem 1rem; letter-spacing:.04em; }
}

/* -------------------- Hamburger Button -------------------- */
.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(228,214,200,.70);
  border-radius:12px;
  padding:8px 10px;
  box-shadow:0 12px 26px rgba(89,78,69,.12), 0 3px 8px rgba(89,78,69,.06);
  cursor:pointer;
  color:var(--logo-brown);
}

@media (max-width:768px){
  .menu-toggle{ display:inline-flex; }
}

/* ===================== MOBILE MENU (FULL WIDTH) ===================== */
@media (max-width:768px){
  #mobile-menu.site-nav{
    position:fixed;
    top: calc(env(safe-area-inset-top) + var(--header-h-mobile));
    left:0;
    right:0;
    width:100vw;
    z-index:2500;

    background:rgba(255,255,255,.92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);

    border-bottom:1px solid rgba(228,214,200,.75);
    box-shadow:0 14px 34px rgba(0,0,0,.10);

    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }

  #mobile-menu.site-nav.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  #mobile-menu.site-nav ul{
    list-style:none;
    margin:0;
    padding:14px 22px;
    display:grid;
    gap:8px;
  }

  #mobile-menu.site-nav a{
    display:block;
    padding:14px 12px;
    border-radius:12px;
  }

  #mobile-menu.site-nav a:hover{
    background:rgba(246,239,232,.80);
  }

  /* Ensure no old caret/triangle shows */
  #mobile-menu.site-nav::before{ display:none !important; }

  /* Optional: if you add a CTA block inside the menu */
  .mobile-cta .btn{
    width:100%;
    margin-top:6px;
  }

  .btn, #mobile-menu.site-nav a{ -webkit-tap-highlight-color:transparent; }
}

/* Hamburger -> X (keep outside media query if you want it to work at all sizes) */
.menu-icon .line{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  transform-box: fill-box;          /* IMPORTANT for Safari */
  transform-origin: 50% 50%;        /* IMPORTANT for Safari */
  transition: transform .22s ease, opacity .18s ease;
}
.menu-toggle.is-open .line1{ transform: translateY(5px) rotate(45deg); }
.menu-toggle.is-open .line2{ opacity:0; }
.menu-toggle.is-open .line3{ transform: translateY(-5px) rotate(-45deg); }


/* Scroll lock */
.no-scroll{ overflow:hidden; }

/* -------------------- Hero -------------------- */
.hero{
  padding:110px 0 70px;
  background:
          radial-gradient(1200px 600px at 0% -10%, rgba(180,137,106,.16), transparent 60%),
          radial-gradient(900px 500px at 100% -10%, rgba(154,167,163,.12), transparent 60%);
}

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:14px;
  justify-content:center;
}

@media (max-width:768px){
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-actions .btn{
    width: 100%;
    max-width: 320px; /* optional */
    margin: 0 auto;
  }
}

/* Titles */
.main-title{
  text-align:center;
  margin:0 0 1.2rem;
  font-size: clamp(2.7rem, 4.2vw, 4.4rem);
  white-space: nowrap;
  letter-spacing: 0.02rem;

  display: inline-block;
  position:relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width:768px){
  .main-title{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    padding: 0 12px;
    font-size: clamp(2.2rem, 7vw, 3.0rem);
    line-height: 1.1;
  }
}

.page-title{
  text-align:center;
  margin:0 0 1.2rem;
  font-size: clamp(2.7rem, 4.2vw, 4.4rem);
  white-space: nowrap;
  letter-spacing: 0.02rem;

  display: inline-block;
  position:relative;
  left: 50%;
  transform: translateX(-50%);
}

.page-title::after{
  content:'';
  display:block;
  width:64px;
  height:1px;
  background:var(--line);
  margin:16px auto 0;
}

@media (max-width:768px){
  .page-title{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    padding: 0 12px;
    font-size: clamp(2.2rem, 7vw, 3.0rem);
    line-height: 1.1;
  }
}
.page-body{ text-align:center; font-size:1.5rem; margin:0 auto 1.2rem; }

@media (max-width:768px){
  .page-body{
    font-size: clamp(1.3rem, 4.0vw, 2.0rem);
  }
}

.section-title{
  font-family:'Scheherazade New', Georgia, 'Times New Roman', serif;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  font-weight:400;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-align:center;
  color:var(--logo-brown);
  margin-bottom:2.5rem;
}
.section-title::after{
  content:'';
  display:block;
  width:64px;
  height:1px;
  background:var(--line);
  margin:16px auto 0;
}

/* -------------------- Cards (consistent, not bright white) -------------------- */
.card{
  background:var(--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--glass-shadow);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-align:center;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(89,78,69,.14), 0 6px 14px rgba(89,78,69,.08);
}

.card ul{ list-style:none; margin:0; padding:0; }
.card li{
  font-size:1rem;
  padding:8px 0;
  border-bottom:1px solid rgba(228,214,200,.60);
  color:var(--text);
}
.card li:last-child{ border-bottom:none; }

.card-note{
  margin-top: 12px;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(89,78,69,.65);
  text-align: center;
  font-style: italic;
}


/* -------------------- Footer -------------------- */
footer{
  background:#EAE0D6;
  border-top:1px solid var(--line);
  padding:40px 0 0;
}
footer h4{
  font-family:'Scheherazade New', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-size:1.25rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--logo-brown);
  margin:0 0 16px;
}
footer .cols.footer-new{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
  column-gap:clamp(36px, 6vw, 110px);
  row-gap:28px;
}
.footer-links{ justify-self:end; text-align:left; }
.footer-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer-links a{ font-weight:600; color:var(--logo-brown); }
.footer-links a:hover{ text-decoration:underline; }

.footer-center{
  justify-self:center;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.footer-logo{ width:220px; height:auto; display:block; }

.footer-social.center-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0;
}
.footer-social .icon{
  width:30px;
  height:30px;
  fill:none;
  stroke:var(--logo-brown);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.95;
  transition:transform .2s ease, opacity .2s ease;
}
.footer-social a:hover .icon{ transform:translateY(-2px); opacity:1; }

.footer-hours{ justify-self:start; text-align:left; }
.hours-list{ display:grid; gap:12px; }
.hours-row{ display:flex; justify-content:space-between; gap:32px; min-width:260px; }
.hours-row span:first-child{ font-weight:600; color:var(--logo-brown); }

.footer-bottom{
  background: var(--header-bg); /* same as header */
  padding: 18px 0;
  margin-top: 40px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:24px;

  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(89,78,69,.7);
  border-top: 1px solid rgba(228,214,200,.8);
  width: 100%;
}

.footer-copy,
.footer-dev{
  white-space: nowrap; /* remove this if you want wrapping */
}

/*.footer-bottom-inner{*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  font-size: .8rem;*/
/*  letter-spacing: .06em;*/
/*  color: rgba(89,78,69,.8);*/
/*  gap:40px;*/
/*}*/

.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;

  gap: 38px;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 0.75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(89,78,69,.7);
}

@media (max-width: 700px){
  .footer-bottom-inner{
    justify-content: center;
    text-align: center;
  }

  .footer-bottom .container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .footer-bottom a {
    display: block;
  }
}

.footer-bottom-inner a{
  color: rgba(89,78,69,.8);
  text-decoration: none;
}

.footer-bottom .container{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom a{
  color: rgba(89,78,69,.7);
  text-decoration: none;
  font-weight: 500;
}

.footer-bottom a:hover{
  color: var(--logo-brown);
}

@media (max-width: 768px){
  .footer-bottom{
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

@media (max-width:800px){
  footer .cols.footer-new{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .footer-links, .footer-hours{ justify-self:center; text-align:center; }
  .hours-row{ min-width:unset; justify-content:center; gap:18px; }
}

/* -------------------- Contact Page -------------------- */
/* Only on contact page */
.contact-page .page-title{
  left:auto;
  transform:none;
  display:block;
  text-align:center;
}

.contact-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:22px;
  max-width:560px;
  margin:0 auto;
}

/* keep each row readable with bigger icons */
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  line-height:1.6;
  font-size:1.05rem;
  color:var(--logo-brown);
  text-align:left;
}
.contact-item a{ font-weight:500; }
.contact-item a:hover{ text-decoration:underline; }

.contact-icon{
  width:30px;
  height:30px;
  min-width:30px;
  fill:none;
  stroke:var(--logo-brown);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-top:2px;
}

.contact-item span,
.contact-item a{ display:block; }

/* ===================== MOBILE HEADER (CLEAN) ===================== */
@media (max-width:768px){

  /* Two-row header: logo then actions */
  header .nav{
    display:grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
    padding: 12px 0 14px;
  }

  /* Logo row */
  header .brand.brand-center{
    position: static !important;
    transform: none !important;
    display:flex;
    justify-content:center;
  }
  .brand-logo{ height:44px; }

  /* Make nav-right full width so actions can span container */
  header .nav-right{
    width:100%;
    margin-left:0 !important;
    justify-content:stretch;
  }

  /* Action row */
  .mobile-header-actions{
    display: flex !important;
    align-items:center;
    gap:12px;
    width:100%;
    padding: 0;
  }

  /* Book Now fills remaining space (not huge) */
  .mobile-header-actions .mobile-book{
    flex:1;
    min-width:0;
    text-align:center;

    /* tighter than .btn defaults */
    padding: 12px 14px;
    font-size: .92rem;
    letter-spacing: .06em;
    border-radius: 16px;
    line-height: 1.1;
  }

  /* Hamburger stays a neat square on the right */
  .mobile-header-actions .menu-toggle{
    flex:0 0 46px;
    width:46px;
    height:46px;
    padding:0;
    border-radius: 16px;

    display:flex;
    align-items:center;
    justify-content:center;

    /* slightly lighter visual weight */
    box-shadow: 0 10px 22px rgba(89,78,69,.10), 0 3px 8px rgba(89,78,69,.05);
  }
}

@media (max-width:768px){
  /* The dropdown panel should NOT take up a grid row in the header */
  header .nav > #mobile-menu{
    position: fixed;
    top: calc(env(safe-area-inset-top) + var(--header-h-mobile));
    left: 0;
    right: 0;
  }

  /* True 2-row header: logo then action row */
  header .nav{
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
    padding: 12px 0 14px;
    min-height: auto;
  }

  /* Row 1: logo centered */
  header .brand.brand-center{
    grid-row: 1;
    justify-content: center;
    position: static !important;
    transform: none !important;
  }

  /* Row 2: actions */
  header .nav-right{
    grid-row: 2;
    width: 100%;
    margin-left: 0 !important;
  }

  /* Action row matches container padding */
  .mobile-header-actions{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 22px;
  }

  /* Book Now fills space, but not oversized */
  .mobile-header-actions .mobile-book{
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: .90rem;
    line-height: 1.1;
    border-radius: 16px;
  }

  /* Hamburger compact square on right */
  .mobile-header-actions .menu-toggle{
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===================== BODY OFFSET (NO LEAKING) ===================== */
/* Use the same var everywhere; your JS already sets --header-h dynamically */
body{ padding-top: var(--header-h); }

@media (max-width:768px){
  .mobile-header-actions .mobile-book{
    flex:1;
    margin-right:2px; /* micro-adjust to match visual balance */
    margin-left:2px;
  }
}

/* ===================== TEAM LEVELS ===================== */
.team-card{
  text-align: center;
}

/*.team-header{*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  gap: 14px;*/
/*  margin-bottom: 6px;*/
/*}*/


.team-name{
  font-family: 'Scheherazade New', Georgia, serif;
  font-size: clamp(1.45rem, 2.2vw, 1.65rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--logo-brown);
  text-align: center;
  margin: 0 0 6px;
}

/*.team-meta{*/
/*  display:flex;*/
/*  justify-content:center;*/
/*  align-items:center;*/
/*  gap:0.5rem;*/
/*  margin-bottom: 1.1rem;*/
/*  text-transform:uppercase;*/
/*  letter-spacing:0.08em;*/
/*  font-size:.85rem;              !* tweak bigger/smaller *!*/
/*  color:var(--muted);      !* logo-brown, softened *!*/
/*}*/

/*.team-dot{ opacity:.55; }*/

/*.team-level{*/
/*  width: 64px;*/
/*  height: 64px;*/
/*  border-radius: 999px;*/
/*  flex: 0 0 64px;*/

/*  display: flex;*/
/*  flex-direction: column;*/
/*  align-items: center;*/
/*  justify-content: center;*/

/*  background: rgba(255,255,255,.7);*/
/*  border: 1px solid rgba(89,78,69,.45);*/
/*}*/


/*.team-level .lvl{*/
/*  font-size: .65rem;*/
/*  letter-spacing: .12em;*/
/*  text-transform: uppercase;*/
/*  color: rgba(89,78,69,.75);*/
/*  line-height: 1;*/
/*}*/

/*.team-level .num{*/
/*  font-size: 1.25rem;*/
/*  line-height: 1.05;*/
/*  color: rgba(89,78,69,.95);*/
/*}*/

/*.team-title{*/
/*  font-family: 'Alta', Georgia, serif;*/
/*  text-transform: uppercase;*/
/*  letter-spacing: .09em;*/
/*  font-size: .9rem;*/
/*  color: rgba(89,78,69,.7);*/

/*  text-align: center;*/
/*  margin-bottom: 16px;*/
/*  max-width: 260px;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*}*/

.team-title{
  font-family: 'Scheherazade New', Georgia, serif;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 18px;

  color: rgba(89,78,69,.85);
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

/*.team-level::after{*/
/*  content:"";*/
/*  display:block;*/
/*  width:28px;*/
/*  height:1px;*/
/*  background: rgba(228,214,200,.9);*/
/*  margin: 8px auto 0;*/
/*}*/

/*.team-title::after{*/
/*  content:"";*/
/*  display:block;*/
/*  width:36px;*/
/*  height:1px;*/
/*  background: rgba(228,214,200,.8);*/
/*  margin: 10px auto 0;*/
/*}*/

.team-top{
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 14px 12px 10px;
  margin: -6px -6px 14px;   /* optional: makes it feel “built in” */
}

.team-bio p{
  margin: 0 0 0.9rem;
  line-height: 1.65;
  font-size: 0.95rem;
}

.team-bio p:last-child{
  margin-bottom: 0;
}

.team-level-wrap{
  display:flex;
  flex-direction: column;   /* ✅ stack circle + divider */
  align-items:center;       /* ✅ center horizontally */
  justify-content:flex-start;
  margin: 10px 0 8px;
}

.team-level-wrap::after{
  content:"";
  width:20px;
  height:1px;
  background: rgba(228,214,200,.9);
  margin-top: 10px;
}

.team-level-circle{
  width: 64px;
  height: 64px;
  border-radius: 50%;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(89,78,69,.55);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.level-label{
  font-family: 'Scheherazade New', Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;

  color: rgba(89,78,69,.85);
  font-size: .65rem;
}

.level-number{
  font-family: 'Scheherazade New', Georgia, serif;
  line-height: 1.1;

  color: rgba(89,78,69,1);
  font-size: 1.15rem;
}

/*.team-name::after{*/
/*  content:"";*/
/*  display:block;*/
/*  width:36px;*/
/*  height:1px;*/
/*  background:var(--line);*/
/*  margin:10px auto 12px;*/
/*}*/

/* -------------------- Reviews -------------------- */
.reviews .section-title{ margin-bottom: 1.8rem; }

.reviews-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 18px;

  overflow-x: auto;
  padding: 8px 6px 18px;

  scroll-snap-type: x mandatory;
  scroll-padding: 6px;

  -webkit-overflow-scrolling: touch;
}

.reviews-track::-webkit-scrollbar{ height: 10px; }
.reviews-track::-webkit-scrollbar-thumb{
  background: rgba(89,78,69,.20);
  border-radius: 999px;
}
.reviews-track::-webkit-scrollbar-track{
  background: rgba(89,78,69,.06);
  border-radius: 999px;
}

.review-card{
  scroll-snap-align: start;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 22px;
}

.review-text{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.review-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  font-family: 'Scheherazade New', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: rgba(89,78,69,.75);
}

.review-stars{
  letter-spacing: .14em;
  color: rgba(89,78,69,.65);
}

/* Buttons */
.reviews-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 14px;
}

.reviews-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(89,78,69,.10), 0 3px 8px rgba(89,78,69,.06);
  cursor: pointer;

  font-size: 1.3rem;
  line-height: 1;
  color: var(--logo-brown);
}

.reviews-cta{
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.reviews-btn:active{ transform: translateY(1px); }

@media (min-width: 900px){
  .reviews-track{
    grid-auto-columns: minmax(320px, 360px);
    justify-content: center;
  }
}

/* -------------------- Pricing Note -------------------- */
.pricing-note-wrap{
  margin-top: clamp(28px, 5vw, 56px);
  padding-top: 18px;
  text-align: center;
  position: relative;
}

.pricing-note-wrap::before{
  content:"";
  display:block;
  width: 72px;
  height: 1px;
  margin: 0 auto 16px;
  background: rgba(228,214,200,.85);
}

.pricing-note{
  font-family: 'Scheherazade New', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: rgba(89,78,69,.65);
  max-width: 520px;
  margin: 0 auto;
}

/* Mobile tuning */
@media (max-width: 768px){
  .pricing-note-wrap{
    margin-top: 36px;
    padding-top: 14px;
  }

  .pricing-note{
    font-size: .95rem;
    max-width: 90%;
  }

  .pricing-note-wrap::before{
    width: 48px; /* slightly shorter on mobile */
  }
}