/* ============================================================
   NTRS — Naked Truth Radiant Skincare
   style.css
   Fonts: Cormorant Garamond (Livory substitute) · Jost (Brandon Grotesque substitute)
   Replace with licensed Livory + Brandon Grotesque at deployment
   ============================================================ */

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Anchor the page horizontally so it can't be panned sideways off-screen
   (notably iPhone landscape). `clip` prevents horizontal scroll without
   creating a scroll container, so the sticky nav keeps working. */
html, body { overflow-x: clip; max-width: 100%; }

/* ── Responsive / accessible type ──────────────────────────────────────────────
   All font sizes are in rem, anchored to the root below, so the whole site scales
   from a single root value. The root is set to 20px so the default reading size is
   comfortably large on every device without asking the visitor to change anything.
   Layout spacing stays in px on purpose, so type scales without breaking layout. */
html { font-size: 20px; }

body {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  color: #2F2F2F;
  background: #ffffff;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

/* --- COLOUR TOKENS --- */
:root {
  --col-charcoal:    #2F2F2F;
  --col-etiquette:   #D8D2C7;
  --col-white-oak:   #EAE3D8;
  --col-onyxa:       #E6D8C9;
  --col-sandstone:   #CBBDA8;
  --col-sand:        #C9B39A;
  --col-walnut:      #8A5A3C;
  --col-text:        #2F2F2F;
  --col-muted:       #5F5E5A;
  --col-subtle:      #888780;
  --col-border:      #CBBDA8;
}

/* --- TYPOGRAPHY HELPERS --- */
.livory { font-family: 'Cormorant Garamond', serif; }

/* --- SPLASH --- */
.splash {
  position: fixed;
  inset: 0;
  background: var(--col-charcoal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s ease;
}
.splash.hidden { opacity: 0; pointer-events: none; }

.splash-logo {
  /* 4x the original 160px; capped at 80% of screen width and 70% of screen height so it fits on phones and short laptop screens */
  width: min(640px, 80vw, 70vh);
  height: min(640px, 80vw, 70vh);
  /* 15% slower spin: was 2.5s, now 2.5 / 0.85 = 2.94s */
  animation: splashSpin 2.94s ease-in-out forwards;
}
@keyframes splashSpin {
  0%   { transform: perspective(600px) rotateY(0deg) scale(0.8); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: perspective(600px) rotateY(720deg) scale(1.1); }
  100% { transform: perspective(600px) rotateY(1080deg) scale(1); opacity: 1; }
}

.splash-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--col-sand);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 20px;
  opacity: 0;
  animation: fadeUp 0.6s ease 1.8s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#site {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* --- NAV --- */
.nav {
  background: var(--col-charcoal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  min-height: 62px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo spins at 8.7s = 15% faster than 10s */
.nav-logo-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  animation: navSpin 8.7s linear infinite;
  
}
@keyframes navSpin {
  0%   { transform: perspective(500px) rotateY(0deg); }
  100% { transform: perspective(500px) rotateY(360deg); }
}

/* Public site top bar: logo 40% larger (38px -> 53px). The bar itself stays
   the same height, leaving black space above and below the logo. */
#main-nav .nav-logo-wrap { width: 53px; height: 53px; }

.nav-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.nav-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--col-white-oak);
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
}
.nav-wordmark:hover { color: var(--col-sand); }

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-links a {
  font-family: 'Jost', sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B4B2A9;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--col-white-oak); }

.nav-cart-link {
  font-family: 'Jost', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B4B2A9;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  margin-top: 2px;
}
.nav-cart-link:hover { color: var(--col-white-oak); }
.cart-badge {
  font-family: 'Jost', sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0 4px;
  transition: background 0.2s, color 0.2s;
}
/* Red badge when cart has items — JS adds class 'has-items' to cart-count span */
.cart-badge.has-items {
  background: #C0392B;
  color: #fff;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--col-white-oak);
  font-size: 1.25rem;
  cursor: pointer;
}

/* Mobile nav dropdown */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 62px;
  left: 0;
  right: 0;
  background: var(--col-charcoal);
  z-index: 99;
  padding: 20px 28px;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.nav-mobile-menu a {
  font-family: 'Jost', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B4B2A9;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover { color: var(--col-white-oak); }
.nav-mobile-menu.open { display: flex; }

/* --- HERO --- */
.hero {
  background: var(--col-white-oak);
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1; /* grows to fill remaining space in hero-strip-wrapper */
  min-height: 0;
}

/* Wrapper that makes hero + strip fill the viewport, but is allowed to grow
   taller than the viewport when the content needs it (e.g. browser zoom or
   short/landscape windows) so nothing overflows onto the section below. */
.hero-strip-wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 62px); /* subtract nav */
}

.hero-left {
  padding: 72px 48px 72px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-eyebrow {
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--col-walnut);
  margin-bottom: 22px;
}

.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.12;
  color: var(--col-charcoal);
  margin-bottom: 20px;
}
.hero-h1 em {
  font-style: italic;
  color: var(--col-walnut);
}

.hero-body {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--col-muted);
  margin-bottom: 36px;
}

.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-hero {
  font-family: 'Jost', sans-serif;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--col-walnut);
  border: 1px solid var(--col-walnut);
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-hero:hover {
  background: var(--col-walnut);
  color: var(--col-white-oak);
}

.hero-right {
  overflow: hidden;
  background: var(--col-sandstone);
}
.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* --- STRIP --- */
.strip {
  background: var(--col-sandstone);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
  height: 91px;
  min-height: 91px;
}
.strip-item {
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--col-charcoal);
  font-weight: 400;
}
.strip-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--col-walnut);
  opacity: 0.5;
  flex-shrink: 0;
}
/* Keep the hero strip stacked on three lines for phones in LANDSCAPE too
   (portrait ≤700 already stacks it lower down). Matches the shop's 1024px
   mobile breakpoint so orientation changes stay consistent. */
@media (min-width: 701px) and (max-width: 1024px) {
  .strip { height: auto; min-height: 0; padding: 14px 16px; flex-direction: column;
           flex-wrap: nowrap; align-items: center; text-align: center; gap: 6px; margin-bottom: 0; }
  .strip-dot { display: none; }
  .strip-item { font-size: 0.5rem; letter-spacing: 0.14em; line-height: 1.5; }
}

/* --- INTRO SECTION --- */
.intro {
  background: var(--col-white-oak);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.intro-text {
  padding: 72px 48px 72px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec-label {
  font-size: 0.5625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--col-walnut);
  margin-bottom: 16px;
}
.sec-label.light { color: var(--col-sand); }

.sec-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--col-charcoal);
  margin-bottom: 20px;
}
.sec-h2.light { color: var(--col-white-oak); }

.sec-body {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--col-muted);
  margin-bottom: 26px;
}
.sec-body.muted { color: var(--col-subtle); }

.link-cta {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--col-walnut);
  text-decoration: none;
  transition: opacity 0.2s;
}
.link-cta:hover { opacity: 0.7; }
.link-cta.light { color: var(--col-sand); }

.intro-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--col-sandstone);
}
.intro-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

.loc-tag {
  position: absolute;
  bottom: 20px;
  right: 0;
  background: var(--col-charcoal);
  color: var(--col-sand);
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 9px 18px;
}

/* --- SERVICES --- */
.services {
  background: var(--col-etiquette);
  padding: 72px 40px;
}

.services-top { margin-bottom: 12px; }

.services-sub-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
}

.services-sub {
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--col-muted);
  line-height: 1.65;
}

.view-link {
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--col-walnut);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.view-link:hover { opacity: 0.7; }

.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 2px;
}

.svc-card {
  background: var(--col-white-oak);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-card.dark { background: var(--col-charcoal); }

.svc-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--col-sandstone);
  flex-shrink: 0;
}
.svc-dot.dk { background: #444441; }

.svc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--col-charcoal);
  line-height: 1.2;
}
.svc-name.w { color: var(--col-white-oak); }

.svc-desc {
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--col-subtle);
}

.svc-price {
  font-size: 0.75rem;
  color: var(--col-walnut);
  margin-top: 4px;
}
.svc-price.w { color: var(--col-sand); }

.svc-upgrade {
  color: var(--col-subtle);
  font-size: 0.625rem;
}

.btn-book {
  font-family: 'Jost', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: transparent;
  color: var(--col-walnut);
  border: 1px solid var(--col-sandstone);
  padding: 9px 18px;
  cursor: pointer;
  margin-top: auto;
  align-self: flex-start;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-book:hover {
  background: var(--col-walnut);
  color: var(--col-white-oak);
  border-color: var(--col-walnut);
}
.btn-book.w {
  color: var(--col-sand);
  border-color: #444441;
}
.btn-book.w:hover {
  
  color: var(--col-charcoal);
  border-color: var(--col-sand);
}

.members-bar {
  background: var(--col-white-oak);
  padding: 14px 28px;
  text-align: center;
  border: 1px solid var(--col-sandstone);
}
.members-bar-text {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--col-walnut);
  font-weight: 400;
}

/* --- SHOP --- */
.shop {
  background: var(--col-charcoal);
  padding: 72px 40px;
  min-height: 100vh;
}

.shop-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.prod-card {
  background: var(--col-white-oak);
  display: flex;
  flex-direction: column;
}
.prod-card .prod-img {
  width: 100%;
  height: 200px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.prod-card .prod-img img {
  width: 70%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.prod-info {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.prod-img {
  background: #ffffff;
  height: 110px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prod-img.img-missing::after {
  content: 'Product Image';
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--col-walnut);
}

.prod-info {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.prod-brand {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--col-walnut);
}
.prod-name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--col-charcoal);
  line-height: 1.45;
}
.prod-price {
  font-size: 0.8125rem;
  color: var(--col-muted);
  padding-top: 6px;
  margin-top: auto;
}

.btn-cart {
  font-family: 'Jost', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: transparent;
  color: var(--col-walnut);
  border: 1px solid var(--col-sandstone);
  padding: 8px 0;
  cursor: pointer;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.btn-cart:hover {
  background: var(--col-walnut);
  color: var(--col-white-oak);
}

/* --- ABOUT KYLIE --- */
.kylie {
  background: var(--col-charcoal);
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Desktop: photo on the left spanning both text rows; the About-Kylie label +
     heading top-right, and the bio + reviews bottom-right. The image is
     positioned absolutely inside its column so a tall portrait can't balloon the
     section. (On mobile the image slots between the heading and the bio.) */
  grid-template-areas:
    "img intro"
    "img body";
  min-height: 60vh;
}

.kylie-img {
  grid-area: img;
  overflow: hidden;
  position: relative;
  background: #3a3530;
}
.kylie-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.kylie-text {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.kylie-intro { grid-area: intro; padding: 40px 48px 8px; justify-content: flex-end; }
.kylie-body { grid-area: body; padding: 8px 48px 40px; justify-content: flex-start; }

.kylie-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.75rem;
  color: #444441;
  line-height: 0.5;
  margin-bottom: 18px;
}
.kylie-q-close {
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 0.5;
}

.kylie-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--col-white-oak);
  margin-bottom: 10px;
}

.kylie-attr {
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--col-subtle);
}

.kylie-divider {
  border: none;
  border-top: 1px solid #3a3a38;
  margin: 28px 0;
}

.read-more-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--col-sand);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  align-self: center;   /* centre the button within the flex-column .kylie-body */
  text-align: center;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}
.read-more-link:hover { color: var(--col-white-oak); }

/* --- MEMBERSHIP CTA --- */
.member-cta {
  background: var(--col-walnut);
  padding: 64px 40px;
  text-align: center;
}
.mc-eyebrow {
  font-size: 0.5625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--col-white-oak);
  opacity: 0.65;
  margin-bottom: 12px;
}
.mc-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.125rem;
  font-weight: 400;
  color: var(--col-white-oak);
  margin-bottom: 14px;
}
.mc-body {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--col-white-oak);
  opacity: 0.8;
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}
.btn-member {
  font-family: 'Jost', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--col-white-oak);
  border: 1px solid rgba(234,227,216,0.5);
  padding: 13px 32px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-member:hover {
  background: var(--col-white-oak);
  color: var(--col-walnut);
}

/* --- FOOTER --- */
.footer {
  background: var(--col-charcoal);
  padding: 60px 40px 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.3fr;
  gap: 32px;
  margin-bottom: 44px;
}

.footer-bname {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--col-white-oak);
  margin-bottom: 10px;
}
.footer-addr {
  font-size: 0.875rem;
  font-weight: 300;
  color: #BDB3A2;
  line-height: 1.9;
}
.footer-addr a { color: #BDB3A2; }
.footer-addr a:hover { color: var(--col-sand); }
.footer-col-h {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--col-sand);
  margin-bottom: 14px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 0.875rem;
  font-weight: 300;
  color: #BDB3A2;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--col-sand); }

.footer-hr {
  border: none;
  border-top: 1px solid #3a3a38;
  margin-bottom: 22px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-copy {
  font-size: 0.75rem;
  color: #9A9184;
}

/* Sign out button — never wraps */
.btn-signout {
  font-family: 'Jost', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888780;
  text-decoration: none;
  border: 1px solid #D8D2C7;
  padding: 8px 16px;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-signout:hover { border-color: var(--col-charcoal); color: var(--col-charcoal); }

.email-row {
  display: flex;
  margin-top: 8px;
}
.email-row input {
  font-family: 'Jost', sans-serif;
  font-size: 0.6875rem;
  padding: 9px 10px;
  background: #3a3a38;
  border: none;
  color: var(--col-white-oak);
  flex: 1;
  min-width: 0;
  outline: none;
}
.email-row input::placeholder { color: #5F5E5A; }
.email-row button {
  font-family: 'Jost', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  
  color: var(--col-charcoal);
  border: none;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.email-row button:hover { background: var(--col-sandstone); }

/* --- MODALS --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47,47,47,0.88);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-box {
  background: var(--col-white-oak);
  max-width: 580px;
  width: 92%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 44px 44px 40px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.125rem;
  color: var(--col-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--col-charcoal); }
.modal-label {
  font-size: 0.5625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--col-walnut);
  margin-bottom: 14px;
}
.modal-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--col-charcoal);
  margin-bottom: 22px;
  line-height: 1.25;
}
.modal-body p {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--col-muted);
  margin-bottom: 14px;
}
.modal-body h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--col-charcoal);
  margin: 22px 0 8px;
}
.modal-divider {
  border: none;
  border-top: 1px solid var(--col-sandstone);
  margin: 22px 0;
}
.modal-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--col-charcoal);
  margin-bottom: 8px;
}
.modal-attr {
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--col-walnut);
  margin-bottom: 22px;
}

/* Keep the hamburger on a phone held sideways (landscape). In landscape the
   viewport is wider than the 700px portrait breakpoint, but the full desktop nav
   still won't fit — so on any touch device up to 1024px wide we keep the compact
   hamburger layout instead of dropping to the (overflowing) desktop nav. */
@media (min-width: 701px) and (max-width: 1024px) and (pointer: coarse) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: block; }
  .nav { flex-wrap: nowrap; padding: 0 16px; gap: 10px; }
  .nav-brand { min-width: 0; flex-shrink: 1; gap: 8px; }
  .nav-wordmark { min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-right { flex-shrink: 0; gap: 16px; margin-left: auto; }
}

/* --- RESPONSIVE --- */
@media (max-width: 700px) {
  /* NAV — keep brand + cart + hamburger on ONE row (no wrap to a second line).
     The wordmark shrinks/ellipses if a very narrow screen needs it; the cart +
     hamburger never wrap below. */
  .nav-links { display: none !important; }
  .nav-hamburger { display: block; }
  .nav { flex-wrap: nowrap; padding: 0 16px; gap: 10px; }
  .nav-brand { min-width: 0; flex-shrink: 1; gap: 8px; }
  .nav-wordmark { font-size: 0.75rem; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-right { flex-shrink: 0; gap: 16px; margin-left: auto; }

  /* HERO — mobile layout */
  .hero-strip-wrapper { height: auto; min-height: 0; margin-bottom: 0; }
  .hero-strip-wrapper + section,
  .hero-strip-wrapper + div { margin-top: 0; padding-top: 0; }
  .hero { grid-template-columns: 1fr; flex: none; }
  .hero-left { padding: 28px 24px 20px; order: 1; }
  .hero-eyebrow { font-size: 0.5rem; margin-bottom: 8px; }
  .hero-h1 { font-size: 2.125rem; margin-bottom: 10px; }
  .hero-body { font-size: 0.8125rem; margin-bottom: 18px; }
  .hero-btns { flex-direction: row; gap: 10px; }
  .btn-hero { padding: 10px 14px; font-size: 0.5rem; letter-spacing: 0.12em; flex: 1; white-space: nowrap; }
  .hero-right { order: 2; min-height: 220px; max-height: 36svh; }
  .hero-right img { object-position: center 20%; }
  /* Strip — stack into clean centered lines on mobile (breaks at the spacer dots) */
  .strip { height: auto; min-height: 0; padding: 14px 16px; flex-direction: column; flex-wrap: nowrap; align-items: center; text-align: center; gap: 6px; margin-bottom: 0; }
  .strip-item { font-size: 0.5rem; letter-spacing: 0.14em; line-height: 1.5; }
  .strip-dot { display: none; }
  /* Remove any gap between strip and intro */
  .hero-strip-wrapper + * { margin-top: 0; }

  /* INTRO */
  .intro { grid-template-columns: 1fr; min-height: auto; }
  .intro-text { padding: 36px 24px 28px; }
  .intro-img-wrap { min-height: 60vw; max-height: 70vw; }

  /* SERVICES — alternating light/dark on single column */
  .svc-grid { grid-template-columns: 1fr; gap: 2px; }
  .svc-card:nth-child(odd) { background: var(--col-white-oak); }
  .svc-card:nth-child(even) { background: var(--col-charcoal); }
  /* Fix text colors for forced light backgrounds */
  .svc-card:nth-child(odd) .svc-name { color: var(--col-charcoal); }
  .svc-card:nth-child(odd) .svc-desc { color: var(--col-subtle); }
  .svc-card:nth-child(odd) .svc-price { color: var(--col-walnut); }
  .svc-card:nth-child(odd) .svc-dot { background: var(--col-sandstone); }
  .svc-card:nth-child(odd) .btn-book { color: var(--col-walnut); border-color: var(--col-sandstone); }
  /* Tap/hold on a LIGHT block fills the button brown with light copy. It's
     instant (transition: none) so the FIRST tap shows the rich colour instead
     of a faded mid-fade; :focus is excluded so the fill can't stick after you
     navigate and come back. */
  .svc-card:nth-child(odd) .btn-book:hover,
  .svc-card:nth-child(odd) .btn-book:active {
    background: var(--col-walnut);
    color: var(--col-white-oak);
    border-color: var(--col-walnut);
    transition: none;
  }
  /* Fix text colors for forced dark backgrounds */
  .svc-card:nth-child(even) .svc-name { color: var(--col-white-oak); }
  .svc-card:nth-child(even) .svc-desc { color: var(--col-subtle); }
  .svc-card:nth-child(even) .svc-price { color: var(--col-sand); }
  .svc-card:nth-child(even) .svc-dot { background: #444441; }
  .svc-card:nth-child(even) .btn-book { color: var(--col-sand); border-color: #444441; }
  .svc-card:nth-child(even) .btn-book:hover,
  .svc-card:nth-child(even) .btn-book:active { background: var(--col-walnut); color: var(--col-white-oak); border-color: var(--col-walnut); transition: none; }
  .members-bar { font-size: 0.6875rem; padding: 14px 20px; }

  /* KYLIE — stack: About-Kylie label + heading, THEN the photo, THEN bio + reviews. */
  .kylie {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "img" "body";
    height: auto; min-height: 0; max-height: none; overflow: visible;
  }
  .kylie-img { height: 55vw; min-height: 220px; max-height: 300px; }
  .kylie-intro { padding: 28px 24px 16px; }
  .kylie-body { padding: 20px 24px 32px; }
  .kylie-q { font-size: 2.75rem; line-height: 0.6; margin-bottom: 10px; }
  .kylie-quote { font-size: 0.875rem; }
  .kylie-divider { margin: 16px 0; }

  /* FOOTER — center aligned, larger fonts */
  .footer { padding: 48px 24px 24px; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; text-align: center; }
  .footer-links { align-items: center; }
  .footer-bname { font-size: 1.125rem; text-align: center; }
  .footer-addr { font-size: 0.875rem; line-height: 2; text-align: center; }
  .footer-col-h { font-size: 0.6875rem; text-align: center; }
  .footer-links a { font-size: 0.875rem; }
  .footer-bottom { justify-content: center; }
  .footer-copy { font-size: 0.75rem; text-align: center; }
  /* Center the subscribe form along with the rest of the mobile footer. */
  .footer-subscribe { display: flex; flex-direction: column; align-items: center; }
  .footer-sub-label { text-align: center; }
  .footer-sub-row { margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-links { align-items: center; }
  .services-sub-row { flex-direction: column; align-items: flex-start; }
  /* Shop header: stack + left-align "View all products" like the Services row. */
  .shop-hdr { flex-direction: column; align-items: flex-start; gap: 14px; }
  .shop-hdr .link-cta { align-self: flex-start; }
  /* "Read More" is a full-width flex item, so its (centered) button text looked
     centered — pin it left. */
  .read-more-link { align-self: center; text-align: center; }
  .sec-h2 { font-size: 1.625rem; }
  .strip { gap: 6px; }
  .strip-dot { display: none; }
}

/* ============================================================
   NTRS RESPONSIVE STANDARDS
   Breakpoints:
     Mobile  : max-width 600px  (iPhone)
     Tablet  : max-width 900px  (iPad / small desktop)
   
   Rules for all new pages:
   1. All page wrappers use padding: 60px 40px desktop → 32px 16px mobile
   2. All form inputs/selects/buttons: width:100%; box-sizing:border-box;
      -webkit-appearance:none; appearance:none; border-radius:0
   3. All multi-column grid layouts collapse to 1 column on mobile
   4. All admin tables hide on mobile and show as stacked cards
   5. No fixed heights on containers — use min-height only
   6. All buttons that are full-width on desktop stay full-width on mobile
   7. Font sizes scale down: h1 48px→30px, h2 32px→22px, body 13px stays
   ============================================================ */

/* --- GLOBAL FORM STANDARDS (all pages) --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
  width: 100%;
  font-family: 'Jost', sans-serif;
}

/* iOS date input fix — prevents system styling from breaking layout */
input[type="date"],
input[type="datetime-local"] {
  min-height: 44px;
  font-size: 1rem; /* prevents iOS zoom on focus */
}

/* All submit/action buttons full width and consistent */
button[type="submit"],
.btn-save,
.btn-confirm,
.btn-auth {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
}

/* --- INTERIOR PAGE RESPONSIVE (dashboard, admin, booking, member) --- */
@media (max-width: 900px) {
  /* Admin table — hide grid headers, show as labeled cards */
  .admin-table-head { display: none !important; }
  .admin-row {
    display: block !important;
    padding: 20px !important;
    border-bottom: 1px solid #F0EDE8;
  }
  .admin-cell {
    display: block !important;
    margin-bottom: 8px;
    font-size: 0.75rem;
  }
  .admin-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 0.5625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #888780;
    margin-bottom: 2px;
  }
  .admin-actions {
    display: flex !important;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  /* Two-column layouts → single column */
  .reschedule-layout,
  .form-row,
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  /* Admin page padding */
  .admin-page { padding: 28px 20px !important; }
  .admin-header h1 { font-size: 1.75rem !important; }
  .admin-nav { gap: 12px !important; flex-wrap: wrap; }
  .admin-nav a { font-size: 0.5625rem !important; }
  .form-box { padding: 32px 24px !important; }
  .panel { padding: 24px 20px !important; }
}

@media (max-width: 600px) {
  /* Page containers */
  .book-page,
  .appts-page,
  .dashboard-page,
  .auth-page { padding: 28px 16px !important; }

  /* Form containers */
  .book-box,
  .auth-box,
  .form-box { padding: 28px 20px !important; width: 100% !important; max-width: 100% !important; }

  /* Date picker full width match */
  .date-picker { padding: 20px 16px !important; }
  .current-appt { padding: 16px !important; }

  /* Form/member buttons go full width on mobile. NOTE: the hero-services
     "Book Now" (.btn-book) is intentionally excluded — it should hug its copy,
     not span the screen. */
  .btn-confirm,
  .btn-save,
  .btn-auth {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Typography scale */
  .book-box h1,
  .appts-page h1,
  .dashboard-header h1 { font-size: 1.75rem !important; }

  /* Appointment cards stack */
  .appt-card { flex-direction: column !important; align-items: flex-start !important; }
  .appt-actions { flex-wrap: wrap !important; }

  /* Member info grid */
  .member-info { gap: 16px !important; padding: 16px 20px !important; }
  .member-info-item { flex: 1 1 40% !important; }

  /* Time slots wrap cleanly */
  #time-slots, .slot-row { gap: 8px !important; }
  .time-slot { padding: 10px 12px !important; font-size: 0.625rem !important; }

  /* Service cards full width */
  .service-card { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .btn-book-now { align-self: flex-start !important; }

  /* Dashboard grid single column */
  .dashboard-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .dashboard-card { border-bottom: 1px solid #F0EDE8 !important; }
  .dashboard-card:last-child { border-bottom: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN SHELL NAV  —  appended to style.css
   Mobile-first: bottom nav + top bar.
   Desktop (≥768px): left sidebar + top bar, bottom nav hidden.
═══════════════════════════════════════════════════════════════ */

:root {
  --asn-bg:           #2c2720;
  --asn-border:       #3d3028;
  --asn-inactive:     #6b5f52;
  --asn-active:       #f5f0ea;
  --asn-accent:       #c8a882;
  --asn-topbar-h:     52px;
  --asn-sidebar-w:    200px;
  --asn-bottomnav-h:  60px;
}

/* ── Top bar ── */
.admin-shell-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--asn-topbar-h);
  background: var(--asn-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 500;
  border-bottom: 1px solid var(--asn-border);
}
.ast-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.ast-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--asn-active);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ast-divider {
  width: 1px;
  height: 16px;
  background: var(--asn-border);
  flex-shrink: 0;
}
.ast-name {
  font-size: 0.6875rem;
  color: var(--asn-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  display: none; /* shown only on desktop */
}
.ast-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.ast-icon-btn {
  color: var(--asn-active);
  display: flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.ast-icon-btn:hover { opacity: 1; }
.ast-hamburger {
  background: none;
  border: none;
  color: var(--asn-active);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
}

/* ── Mobile slide-down menu ── */
.ast-mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: var(--asn-topbar-h);
  left: 0; right: 0;
  background: var(--asn-bg);
  border-bottom: 1px solid var(--asn-border);
  z-index: 499;
  padding: 8px 0 12px;
}
.ast-mobile-menu.open { display: flex; }
.ast-mm-link {
  padding: 13px 20px;
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asn-inactive);
  text-decoration: none;
  border-bottom: 1px solid var(--asn-border);
  transition: color 0.15s;
}
.ast-mm-link:last-child { border-bottom: none; }
.ast-mm-link:hover,
.ast-mm-link.active { color: var(--asn-active); }
.ast-mm-signout { color: var(--asn-inactive); font-size: 0.6875rem; }

/* ── Desktop sidebar — hidden on mobile ── */
.admin-shell-sidebar { display: none; }

/* ── Mobile bottom nav ── */
.admin-shell-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--asn-bottomnav-h);
  background: var(--asn-bg);
  border-top: 1px solid var(--asn-border);
  display: flex;
  align-items: stretch;
  z-index: 500;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.asb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--asn-inactive);
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  position: relative;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 4px 6px;
}
.asb-item.active { color: var(--asn-active); }
.asb-item.active .asb-pip { opacity: 1; }
.asb-pip {
  position: absolute;
  top: 5px;
  width: 20px; height: 2px;
  background: var(--asn-accent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.asb-label {
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Content offset — mobile ── */
.admin-page {
  margin-top: var(--asn-topbar-h) !important;
  padding-bottom: calc(var(--asn-bottomnav-h) + 16px) !important;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP  ≥ 768px
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  .ast-name      { display: block; }
  .ast-hamburger { display: none; }

  /* Sidebar */
  .admin-shell-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    width: var(--asn-sidebar-w);
    height: 100vh;
    background: var(--asn-bg);
    border-right: 1px solid var(--asn-border);
    z-index: 499;
    padding-top: var(--asn-topbar-h);
  }
  .ass-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
  }
  .ass-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    color: var(--asn-inactive);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    position: relative;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
  }
  .ass-item:hover { background: rgba(255,255,255,0.04); }
  .ass-item.active { color: var(--asn-active); }
  .ass-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    background: var(--asn-accent);
    border-radius: 0 2px 2px 0;
  }
  .ass-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--asn-border);
  }
  .ass-admin-name {
    font-size: 0.6875rem;
    color: var(--asn-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ass-signout {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    color: var(--asn-inactive);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.04em;
    transition: color 0.15s;
  }
  .ass-signout:hover { color: var(--asn-active); }

  /* Hide bottom nav on desktop */
  .admin-shell-bottomnav { display: none; }

  /* Top bar clears sidebar */
  .admin-shell-topbar { left: var(--asn-sidebar-w); }

  /* Content pushed right of sidebar */
  .admin-page {
    margin-left: var(--asn-sidebar-w) !important;
    margin-top: var(--asn-topbar-h) !important;
    padding-bottom: 48px !important;
  }
}
/* ── end admin shell nav ── */

/* ============================================================
   NTRS CUSTOM DATE CALENDAR
   Shared by the client booking page (book_confirm.html) and the
   admin New Appointment page (admin_appointment_new.html).
   Replaces the browser's built-in date box so we can grey out
   the days the studio is closed.
   ============================================================ */
.ntrs-cal { max-width: 340px; }
.ntrs-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ntrs-cal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.125rem; font-weight: 400; color: var(--col-charcoal);
  letter-spacing: 0.02em;
}
.ntrs-cal-nav {
  background: none; border: 1px solid var(--col-etiquette);
  width: 36px; height: 36px; cursor: pointer; color: var(--col-charcoal);
  font-size: 0.9375rem; line-height: 1; display: flex; align-items: center;
  justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.ntrs-cal-nav:hover:not(:disabled) {
  background: var(--col-charcoal); color: #fff; border-color: var(--col-charcoal);
}
.ntrs-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.ntrs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ntrs-cal-dow {
  text-align: center; font-family: 'Jost', sans-serif; font-size: 0.5625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--col-subtle);
  padding: 6px 0 8px;
}
.ntrs-cal-day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-size: 0.875rem; color: var(--col-charcoal);
  background: #FAFAF8; border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s; user-select: none;
}
.ntrs-cal-day:hover:not(.is-disabled):not(.is-empty):not(.is-selected) {
  border-color: var(--col-sand);
}
.ntrs-cal-day.is-selected { background: var(--col-charcoal); color: #fff; }
.ntrs-cal-day.is-today:not(.is-selected) { border-color: var(--col-walnut); }
.ntrs-cal-day.is-empty { background: transparent; cursor: default; }
/* Closed / unavailable days — greyed out (past days, and closed days on the client page) */
.ntrs-cal-day.is-disabled { color: #B4AEA2; background: #E9E5DD; cursor: not-allowed; }
/* Closed day that admin may still override (clearly greyed but clickable) */
.ntrs-cal-day.is-closed { color: #9E978A; background: #E4DFD6; }
.ntrs-cal-day.is-closed:hover { border-color: var(--col-sand); }
.ntrs-cal-day.is-closed.is-selected { background: var(--col-walnut); color: #fff; }

/* Collapsible date field (admin) — tap to open the calendar, like a dropdown */
#cal-mount { margin-top: 10px; }
.ntrs-cal-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #D8D2C7; padding: 12px 14px; background: #FAFAF8;
  font-family: 'Jost', sans-serif; font-size: 0.8125rem; color: var(--col-subtle);
  cursor: pointer; border-radius: 0; -webkit-appearance: none; appearance: none;
  text-align: left; box-sizing: border-box;
}
.ntrs-cal-trigger:hover { border-color: var(--col-sand); }
.ntrs-cal-trigger.has-value { color: var(--col-charcoal); }
.ntrs-cal-caret { color: var(--col-subtle); font-size: 0.625rem; transition: transform 0.15s; margin-left: 12px; }
.ntrs-cal-trigger[aria-expanded="true"] .ntrs-cal-caret { transform: rotate(180deg); }
.ntrs-cal-legend {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: 'Jost', sans-serif; font-size: 0.6875rem; color: var(--col-subtle);
}
.ntrs-cal-legend .sw {
  width: 13px; height: 13px; background: #F3F1EC; border: 1px solid #E0DBD2;
  display: inline-block; flex-shrink: 0;
}
@media (max-width: 600px) {
  .ntrs-cal { max-width: 100%; }
  .ntrs-cal-day { font-size: 0.9375rem; }
}


/* ── STANDARD BACK CONTROL (partials/back_link.html) — used site-wide ──
   Rendered in ONE place per shell: public_nav.html for public/member pages,
   admin_nav.html for admin pages. This guarantees identical placement on every
   page. Do not paste it into individual page templates. */
.ntrs-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Jost', sans-serif; font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6f6d67; text-decoration: none; cursor: pointer;
  background: none; border: none; padding: 2px 0; margin: 0; transition: color 0.15s;
}
.ntrs-back:hover { color: #2F2F2F; }
.ntrs-back .ntrs-back-ico { display: block; flex: none; }

/* Public / member row rendered right under the nav. Painted the page's cream so
   it matches the header section (not the white body) on light pages like brands
   and cart. Compact top padding — it never pushes the page down. */
.ntrs-back-wrap { background: var(--col-white-oak); padding: 9px 40px 0; }
@media (max-width:600px){ .ntrs-back-wrap { padding: 8px 20px 0; } }

/* Dark header pages: paint the row the SAME dark as that page's header section
   (not the nav bar) and lighten the arrow. Two tones so the row matches the
   hero exactly: charcoal (member portal, shop) and warm espresso (gift cards,
   profile — their headers are #2c2720, not charcoal). */
.ntrs-back-wrap--ondark      { background: var(--col-charcoal); }
.ntrs-back-wrap--ondark-warm { background: #2c2720; }
.ntrs-back-wrap--ondark .ntrs-back,
.ntrs-back-wrap--ondark-warm .ntrs-back { color: #B4B2A9; }
.ntrs-back-wrap--ondark .ntrs-back:hover,
.ntrs-back-wrap--ondark-warm .ntrs-back:hover { color: #EAE3D8; }

/* Admin: match the System (Forms) page spec — 13px, muted, 15px icon, normal
   case. The row is the first child of the content column; the column's top
   padding is neutralised (below) so the row sits tight under the topbar like
   Forms, and its left inset comes from the column so it aligns with the title. */
.ntrs-back-wrap--admin { padding: 16px 0 0; margin: 0; }
.ntrs-back-wrap--admin .ntrs-back {
  font-size: 0.8125rem; letter-spacing: 0.03em; text-transform: none;
  color: #6b5f52; padding: 0;
}
.ntrs-back-wrap--admin .ntrs-back:hover { color: #2c2720; }
.ntrs-back-wrap--admin .ntrs-back-ico { width: 15px; height: 15px; }
/* Neutralise the top padding of a column ONLY when it holds the admin back row,
   so the row (not a big empty gap) is what sits under the topbar — matches Forms,
   no push-down. Scoped with :has() so pages that keep their own back are untouched. */
.admin-page:has(> .ntrs-back-wrap--admin),
.cal-page:has(> .ntrs-back-wrap--admin),
.aco-wrap:has(> .ntrs-back-wrap--admin),
.fi-page:has(> .ntrs-back-wrap--admin),
.det-page:has(> .ntrs-back-wrap--admin),
.member-edit-page:has(> .ntrs-back-wrap--admin),
.members-page:has(> .ntrs-back-wrap--admin),
.requests-page:has(> .ntrs-back-wrap--admin),
.agc-page:has(> .ntrs-back-wrap--admin),
.admin-catalogue-page:has(> .ntrs-back-wrap--admin) {
  padding-top: 0 !important;
}
/* Checkout header section is near-black, so its row matches that, not cream. */
.ntrs-back-wrap--admin.on-dark { background: #1A1410; padding-left: 24px; }
.ntrs-back-wrap--admin.on-dark .ntrs-back { color: #C8A882; }
.ntrs-back-wrap--admin.on-dark .ntrs-back:hover { color: #F5EFE6; }


/* ============================================================
   TABLET / iPAD RESPONSIVE PASS  (2026-09-01)
   Breakpoints were 600 / 700 / 1024(nav only), so every iPad
   portrait width (744, 810, 820, 834, 1024) fell through to the
   DESKTOP layout at roughly half the desktop width.
   ============================================================ */
@media (min-width: 701px) and (max-width: 1024px) {

  /* HERO — was 1fr 1fr; the 402px text column grew the row to
     ~1030px tall, forcing kylie-hero.jpg (landscape) into a
     402x1033 portrait slot and cropping her head off. */
  .hero { grid-template-columns: 1fr; flex: 0 0 auto; }
  .hero-left { order: 1; padding: 56px 44px 44px; }
  .hero-right { order: 2; width: 100%; aspect-ratio: 16 / 10; max-height: 58svh; }
  .hero-right img { object-position: center 20%; }

  /* INTRO */
  .intro { grid-template-columns: 1fr; min-height: 0; }
  .intro-text { padding: 56px 44px; }
  .intro-img-wrap { width: 100%; aspect-ratio: 4 / 3; max-height: 52svh; }

  /* MEET KYLIE */
  .kylie { grid-template-columns: 1fr;
           grid-template-areas: "intro" "img" "body";
           min-height: 0; height: auto; }
  /* kylie-about.jpg is a 1825x2738 portrait. A 803x420 frame is a 1.9:1
     letterbox band that cropped her just under the chin — taller frame. */
  .kylie-img { width: 100%; height: 68vw; max-height: 560px; }

  /* SHOP STRIP — min-height:100vh left a large empty band below
     the products on a 1180px-tall iPad. */
  .shop { min-height: 0; padding: 64px 32px 72px; }

  /* HERO TYPE — the desktop scale was sized for a 400px half-column.
     Full-width on tablet it read small and left-hugging, so bump the
     scale and widen the paragraph measure. */
  .hero-eyebrow { font-size: 0.6875rem; letter-spacing: 0.24em; margin-bottom: 18px; }
  .hero-h1 { font-size: 3.75rem; margin-bottom: 24px; }
  .hero-body { font-size: 1rem; line-height: 1.8; max-width: 580px; margin-bottom: 40px; }
  .btn-hero { font-size: 0.625rem; padding: 14px 30px; }

  /* FOOTER — brand block full width on top, then three link columns,
     then Social full width so the subscribe field keeps its 240px.
     (A flat 2-col grid left the rows ragged and the brand row too tall.) */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr));
                 gap: 30px 32px; text-align: center; }
  .footer-grid > :nth-child(1),
  .footer-grid > :nth-child(5) { grid-column: 1 / -1; }
  .footer-sub-row { margin-left: auto; margin-right: auto; }
}

/* Product cards: 4 across was unreadable below 1024px. */
@media (min-width: 601px) and (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   UNIFIED PAGE HEADER: Brands, Services, Shop, Gift Cards
   One black band, same fonts, sizes and colours on every page.
   "body" in front of each rule makes these win over each page's
   own older header styles, so nothing else needs deleting.
   ============================================================ */

/* The Back row above the header: same black as the header */
body:has(.brands-hero, .svc-hero, .shop-header, .gc-hero) .ntrs-back-wrap { background: #2F2F2F; }
body:has(.brands-hero, .svc-hero, .shop-header, .gc-hero) .ntrs-back-wrap .ntrs-back { color: #C9B39A; }
body:has(.brands-hero, .svc-hero, .shop-header, .gc-hero) .ntrs-back-wrap .ntrs-back:hover { color: #EAE3D8; }

/* The band */
body .brands-hero,
body .svc-wrap .svc-hero,
body .shop-page .shop-header,
body .gc-page .gc-hero {
  background: #2F2F2F;
  box-sizing: border-box;
  min-height: 240px;
  padding: 24px 40px 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Small line above the title (Gift Cards only, today) */
body .brands-hero .bh-eyebrow,
body .gc-page .gc-hero .gc-hero-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C9B39A;
  margin: 0 0 20px;
}

/* The title: grows with the screen, one line on computers and tablets */
body .brands-hero .bh-title,
body .svc-wrap .svc-hero h1,
body .shop-page .shop-header .shop-title,
body .gc-page .gc-hero .gc-hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(32px, 6.5vw, 96px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #EAE3D8;
  max-width: none;
  margin: 0;
  text-wrap: balance;
}
body .brands-hero .bh-title em,
body .svc-wrap .svc-hero h1 em,
body .shop-page .shop-header .shop-title em,
body .gc-page .gc-hero .gc-hero-h1 em {
  font-style: italic;
  color: #C9B39A;
}

/* The lines under the title */
body .brands-hero .bh-subtitle,
body .brands-hero .bh-lead,
body .svc-wrap .svc-hero p,
body .shop-page .shop-header .shop-subtitle,
body .gc-page .gc-hero .gc-hero-sub {
  font-family: 'Jost', sans-serif;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0;
  color: #BDB4A8;
  max-width: 900px;
  margin: 4px auto 0;
  text-wrap: balance;
}
body .brands-hero .bh-title + p,
body .svc-wrap .svc-hero h1 + p,
body .shop-page .shop-header .shop-title + p,
body .gc-page .gc-hero .gc-hero-h1 + p { margin-top: 16px; }
body .brands-hero .bh-subtitle em { font-style: italic; color: #C9B39A; }

/* Services: the small approval note */
body .svc-wrap .svc-hero .members {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A89E91;
  margin-top: 16px;
}

/* Phones */
@media (max-width: 600px) {
  body .brands-hero,
  body .svc-wrap .svc-hero,
  body .shop-page .shop-header,
  body .gc-page .gc-hero {
    min-height: 0;
    padding: 28px 22px 40px;
  }
  body .brands-hero .bh-title + p,
  body .svc-wrap .svc-hero h1 + p,
  body .shop-page .shop-header .shop-title + p,
  body .gc-page .gc-hero .gc-hero-h1 + p { margin-top: 18px; }
  body .svc-wrap .svc-hero .members { font-size: 11px; letter-spacing: 0.16em; }
}

/* ============================================================
   GIFT CARDS ONLY: wide sub copy + "radiance." in logo style
   Sits after the unified header block so it wins over it.
   Banner height is shared by all four pages (see block above).
   ============================================================ */

/* Sub copy stretched wide so it stays on one line and doesn't push the banner taller */
body .gc-page .gc-hero .gc-hero-sub {
  max-width: 1200px;
  text-wrap: wrap;
}

/* "radiance." in the logo's font and gold foil colour, lowercase */
body .gc-page .gc-hero .gc-hero-h1 em {
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  font-size: 0.72em;
  color: #d0a060; /* fallback if gradient text is unsupported */
  background: linear-gradient(100deg, #a06030 0%, #e0b070 28%, #f0d080 48%, #c08050 68%, #d0a060 84%, #a06030 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}