/* ============================================================
   NASHA DA STYLIST — Design System
   ============================================================ */

:root {
  /* Colors */
  --bg: #000000;
  --bg-alt: #151515;
  --bg-card: #171216;
  --accent: #FF2E9F;
  --accent-dim: rgba(255, 46, 159, 0.55);
  --accent-soft: rgba(255, 46, 159, 0.12);
  --accent-glow: rgba(255, 46, 159, 0.35);
  --text: #F5F5F5;
  --text-muted: #9A9A9A;
  --text-faint: #6E6E6E;
  --border: rgba(245, 245, 245, 0.08);
  --border-strong: rgba(245, 245, 245, 0.14);

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-script: 'Alex Brush', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing / layout */
  --max-w: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;

  /* Subtle leopard-print texture (used at very low opacity only) */
  --leopard-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23FF2E9F' stroke-width='2.5'%3E%3Cpath d='M20 15c6-4 13-2 15 4s-3 11-9 11-12-9-6-15z'/%3E%3Cpath d='M78 30c7-3 14 1 14 8s-8 10-14 7-6-12 0-15z'/%3E%3Cpath d='M45 70c6-5 15-3 16 4 1 6-6 12-13 10-6-2-9-9-3-14z'/%3E%3Cpath d='M105 85c7-3 14 2 13 9-1 6-9 9-15 5-5-3-5-11 2-14z'/%3E%3Cpath d='M15 105c6-4 14-1 15 5 1 7-6 12-13 10-6-2-8-11-2-15z'/%3E%3Cpath d='M120 20c5-3 11 0 11 6 0 5-6 9-11 6-4-2-5-9 0-12z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Typography helpers ---------- */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  /* Explicit, generous line-height + a hair of top padding — uppercase,
     widely-letter-spaced text like this can still get its very top sliver
     visually clipped in some browsers if the line box is too tight against
     the glyphs, especially once display gets switched to block (several
     kicker instances do this via an inline style). */
  line-height: 1.6;
  padding-top: 0.15em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  /* Bumped from 1.15 — a display serif's tall caps/ascenders need more
     headroom than that, especially combined with the background-clip:text
     shine effect above, which paints strictly within the line box. */
  line-height: 1.3;
  padding-top: 0.1em;
  margin-bottom: 1rem;
}

.section-sub {
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 560px;
  margin-bottom: 2.75rem;
}
.section-sub a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.section-sub a:hover { color: #ff5cad; }

.flourish {
  font-family: var(--font-script);
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 400;
  display: inline-block;
  line-height: 1;
}

/* ---------- Section dividers ---------- */
.section {
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  position: relative;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.25rem 0;
}
.section-divider .line {
  height: 1px;
  width: clamp(40px, 12vw, 140px);
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
}
.section-divider .mark {
  font-family: var(--font-script);
  color: var(--accent);
  font-size: 1.8rem;
  line-height: 1;
}

.alt-bg { background: var(--bg-alt); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px; /* fully rounded pill, not the sharp --radius used elsewhere */
  border: 1px solid transparent;
  transition: all 0.25s ease;
  white-space: nowrap;
}

/* Same shine-sweep + pink<->white invert treatment as .btn-book in the
   Services section, so the footer's Book Now pill matches it exactly. */
.btn-primary {
  background-color: var(--accent);
  background-image: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.62) 50%, transparent 72%);
  background-size: 260% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  color: #ffffff;
  border-color: transparent;
  font-weight: 700; /* same thickness as .btn-book in the Services section */
  transition: background-color 0.25s ease, background-position 0.7s ease-out,
    color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: #ffffff;
  background-position: -60% 0;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 46, 159, 0.28);
  transition: background-color 0.25s ease 0.45s, background-position 0.7s ease-out,
    color 0.25s ease 0.45s, border-color 0.25s ease 0.45s, transform 0.2s ease, box-shadow 0.25s ease 0.45s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.96); }

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  /* Dark and a little transparent from the very first frame, not just after
     scrolling — the page now opens straight into the video carousel, so a
     fully transparent starting state let the header effectively vanish
     over playing video, which read as a glitch rather than a design. */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}
.nav.scrolled {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0;
}
.nav .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}
.nav-ig-icon {
  position: absolute;
  /* left:0 would sit at .container's outer edge, ignoring its own
     --gutter padding — that's what was pushing this too far left,
     outside the inset every other bit of header content respects
     (including the hamburger, which sits flush with the same gutter
     on the right via the grid). Matching that inset here instead. */
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches the hamburger icon's brightness (var(--text), not the dimmer
     --text-muted) so the two icon "bookends" of the header read as the
     same visual weight instead of one looking washed out next to the other. */
  color: var(--text);
  transition: color 0.2s ease;
}
.nav-ig-icon svg { width: 18px; height: 18px; }
.nav-ig-icon:hover { color: var(--accent); }

.logo-mark {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  user-select: none;
}
.logo-mark .logo-img {
  height: clamp(56px, 9vw, 78px);
  width: auto;
  display: block;
}

/* The wrap "disappears" on desktop (display:contents) so its two <nav>
   children — left and right — become direct items of .nav .container's own
   3-column grid, landing on either side of the centered logo. See the HTML
   comment above the wrap for the full explanation. */
.nav-links-wrap {
  display: contents;
}
/* Fixed, equal gap between every link — not justify-content:space-between,
   which stretched them across the full column width and gave a 2-item
   group (left) and a 3-item group (right) very different-looking gaps
   (one wide gap vs. two narrower ones) even though each side was
   "evenly spaced" on its own. Both groups hug the outer edge of their
   column instead, mirroring each other around the centered logo. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links--left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  /* Room for the absolutely-positioned IG icon, which sits at the same
     left inset as this group on desktop (nav-links--left is only inside
     the hidden mobile drawer on small screens, so there's no collision
     there) — without this, "Portfolio" rendered directly on top of it. */
  margin-left: 2.75rem;
}
.nav-links--right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap; /* every label stays on a single line, never wraps */
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover { color: var(--text); }
/* Same shine-sweep + pink<->white invert treatment as .btn-book in the
   Services section, sized down to fit the nav. */
.nav-links a.nav-cta {
  background-color: var(--accent);
  background-image: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.62) 50%, transparent 72%);
  background-size: 260% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-weight: 700; /* same thickness as .btn-book in the Services section */
  transition: background-color 0.25s ease, background-position 0.7s ease-out,
    color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:active {
  background-color: #ffffff;
  background-position: -60% 0;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 46, 159, 0.28);
  transition: background-color 0.25s ease 0.45s, background-position 0.7s ease-out,
    color 0.25s ease 0.45s, border-color 0.25s ease 0.45s, transform 0.2s ease, box-shadow 0.25s ease 0.45s;
}
.nav-links a.nav-cta:hover { transform: translateY(-1px); }
.nav-links a.nav-cta:active { transform: translateY(0) scale(0.96); }

.nav-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: none;
  background: none;
  border: none;
  width: 28px;
  height: 20px;
  position: relative;
  z-index: 110;
}
.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--text);
  transition: all 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Portfolio: first section (no hero — sits under the fixed nav) ---------- */
.section-first {
  padding-top: clamp(7.5rem, 16vw, 10rem);
}

/* The carousel's own bottom padding (below) already gives the glow room to
   breathe, so the section's usual bottom padding on top of that was piling
   up into a big dead gap before Services now that there's no divider to
   visually justify it — trim it back here specifically. */
#portfolio { padding-bottom: clamp(1rem, 3vw, 2rem); }

.carousel-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.25rem;
}
.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.15s ease;
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover,
.carousel-arrow:active {
  background-color: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 46, 159, 0.3);
}
.carousel-arrow:active { transform: scale(0.94); }

/* ---------- Portfolio video carousel (sliding, infinite loop, side clips peek through) ---------- */
.video-carousel {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  /* Lets touch drags move the carousel horizontally under our own JS while
     the page can still be scrolled vertically as normal. */
  touch-action: pan-y;
  /* Vertical padding needs to be bigger than the tallest glow's blur radius
     (the hover/active box-shadow + running-border glow reach well past
     44px once a card is scaled up) — otherwise this overflow:hidden
     wrapper clips the glow (and, at the extreme, the card itself) flat at
     the top and bottom instead of letting it fade out naturally.
     IMPORTANT: this belongs on .video-carousel itself, unconditionally —
     it was accidentally scoped to only .is-dragging .video-slide at one
     point, which put 3.5rem+ of padding INSIDE each card's own box (only
     while a drag/hold was active), squeezing the actual <video> down and
     leaving it visibly disconnected from its own border/glow. */
  padding: 5rem 0 5.25rem;
}
.video-carousel.is-dragging { cursor: grabbing; }
.video-carousel.is-dragging .carousel-track,
.video-carousel.is-dragging .video-slide {
  user-select: none; /* avoid text/selection artifacts while dragging */
}
.carousel-track {
  display: flex;
  align-items: center;
  /* No justify-content here on purpose: the JS transform math assumes the
     track's un-transformed baseline sits flush-left (the flex default).
     Adding justify-content:center here would shift that baseline too,
     and the JS offset would stack on top of it — double-shifting the
     whole track and pushing the "active" slide off-center. */
  gap: 1.2rem;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.video-slide {
  position: relative;
  flex: 0 0 min(300px, 68vw);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  /* No overflow:hidden here on purpose — an element's own box-shadow gets
     clipped by its own overflow:hidden, which was cutting the glow off
     flush at the border instead of letting it bleed outward. The rounded
     corners are enforced on the <video> below instead, so the card still
     reads as cleanly rounded while the glow around it stays free. */
  background: var(--bg-card);
  opacity: 0.55;
  transform: scale(0.84);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent; /* swap the default gray tap flash for our own glow */
}
.video-slide.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: var(--accent-dim);
  box-shadow: 0 0 32px rgba(255, 46, 159, 0.16);
}

/* Press/hover feedback — a glowing border "line" plus a size bump. :hover
   covers desktop and the Android tap-simulates-hover behavior; :active
   covers press-and-hold everywhere; .touch-active is set by JS on
   touchstart/touchend for iOS Safari, which doesn't reliably fire :active
   on plain (non-link/button) elements otherwise. All three read identically
   so it looks the same regardless of which one actually fired. */
.video-slide:hover,
.video-slide:active,
.video-slide.touch-active {
  border-color: var(--accent);
  /* Two layered shadows — a dim tight one plus a dimmer wide one — fall off
     more gradually than a single shadow, which is what reads as "soft glow"
     instead of a hard bright ring right at the edge. */
  box-shadow: 0 0 14px rgba(255, 46, 159, 0.28), 0 0 38px rgba(255, 46, 159, 0.16);
  transform: scale(0.9);
}
.video-slide.is-active:hover,
.video-slide.is-active:active,
.video-slide.is-active.touch-active {
  box-shadow: 0 0 20px rgba(255, 46, 159, 0.32), 0 0 54px rgba(255, 46, 159, 0.2);
  transform: scale(1.06);
}
/* Running glowing white line around the edges on hover: a ::before sized
   a couple px larger than the card, masked down to just a thin ring
   (dual-layer mask + xor/exclude composite "cuts a hole" in the middle)
   so only a bright arc of the conic-gradient shows, tracing the card's
   outline. IMPORTANT: this animates the gradient's angle (a registered
   custom property below), NOT a transform:rotate on the element itself —
   rotating the whole ring as a rigid body made a tall rectangle visibly
   tilt/glitch at an angle instead of looking like a light traveling
   around a fixed outline. Animating the angle keeps the rectangular
   outline perfectly still while the bright segment sweeps around it.
   Lives on ::before, not .video-slide itself, so it doesn't need
   overflow:hidden on the card (which would re-clip the box-shadow glow
   fixed above). Off by default, fades in and only runs on hover/touch. */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.video-slide::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    transparent 230deg,
    rgba(255, 255, 255, 0.85) 270deg,
    #ffffff 285deg,
    #ffffff 305deg,
    rgba(255, 255, 255, 0.85) 320deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  /* drop-shadow (not box-shadow) follows the actual visible/masked shape,
     so the glow hugs the traveling arc itself rather than haloing the
     whole card at all times. */
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.5));
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.video-slide:hover::before,
.video-slide:active::before,
.video-slide.touch-active::before {
  opacity: 1;
  animation: video-border-run 1.3s linear infinite;
}
@keyframes video-border-run {
  to { --border-angle: 360deg; }
}
.video-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px; /* the rounded-corner clip moved here, off .video-slide, so its box-shadow glow isn't self-clipped */
  overflow: hidden;
  background: var(--bg-card); /* only shows before the frame paints; never a bare black void */
}
.gallery-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- Services ---------- */
.services-cta {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4rem);
  /* Bumped from 1.1 for the same headroom reason as h2 — this is even
     bigger text, so it needs even more room to avoid clipping ascenders. */
  line-height: 1.25;
  padding-top: 0.1em;
  color: var(--text);
  margin-bottom: 0.6rem;
}

/* ---------- Title shine sweep (section h2s + the "Book Now!" CTA) ----------
   Same idea as .btn-book's diagonal shine, but painted onto the text itself
   via background-clip:text instead of a button's background — the bright
   band sits parked off the right edge at rest (so the heading reads as a
   plain solid color), then sweeps left across the letters on hover. The
   click listener in main.js re-triggers the same swept end-state briefly on
   tap, since touch devices don't hold a lingering :hover the way a mouse
   does. */
h2,
.services-cta {
  /* The bright stop is the brand pink, not white — var(--text) is already
     near-white (#F5F5F5), so a white-on-white sweep barely showed up.
     Pink against near-white text reads clearly and matches every other
     glow/shine on the page. Narrower band + a quicker ease-out than the
     first pass — same idea as .btn-book's sweep, but reading as a fast
     flash running left-to-right instead of a slow, broad wash. */
  background-image: linear-gradient(120deg, var(--text) 42%, var(--accent) 50%, var(--text) 58%);
  background-size: 260% 100%;
  background-position: 160% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.5s ease-out;
}
h2:hover,
h2.is-shining,
.services-cta:hover,
.services-cta.is-shining {
  background-position: -60% 0;
}
.services-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 1.3rem;
}

.policy-nudge {
  display: flex; /* block-level flex, not inline-flex — margin:auto below only centers a block box */
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  margin: 0 auto 3rem;
  transition: color 0.2s ease;
}
.policy-nudge span {
  position: relative;
}
.policy-nudge span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.policy-nudge:hover { color: var(--accent); }
.policy-nudge svg {
  width: 14px;
  height: 14px;
  animation: policy-nudge-bounce 1.7s ease-in-out infinite;
}
@keyframes policy-nudge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.service-card {
  background: var(--bg);
  padding: 2.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  position: relative;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* Same pink tint + glow as the policy/checklist boxes and booking widget.
   z-index lifts the hovered card above its neighbors in this tight,
   table-like grid (1px gaps) so the glow isn't clipped under the next
   cell's opaque background. .is-clicked (JS) mirrors :hover for taps. */
.service-card:hover,
.service-card.is-clicked {
  background: var(--accent-soft);
  box-shadow: 0 0 16px rgba(255, 46, 159, 0.25);
  z-index: 2;
}
.service-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
}
.service-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: capitalize; /* title-cases every card's description automatically */
}

/* "Request A Style" is a normal grid item like the rest, just spanning the
   full row instead of one column — it picks up the same hairline dividers
   from the grid automatically, no separate border treatment needed. Spans
   all 3 columns on the desktop grid; the 960px breakpoint below drops that
   to 2 to match the mobile grid going down to 2 columns. */
.service-card--cta {
  grid-column: span 3;
}

.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  /* A diagonal highlight band, parked just off the button's right edge at
     rest. It's a background-image (not a clipped pseudo-element), so it
     naturally respects the pill's rounded corners via background-clip
     without needing overflow:hidden — which would otherwise clip the glow
     box-shadow below, same issue as the video cards had. */
  background-image: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.62) 50%, transparent 72%);
  background-size: 260% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  color: #ffffff;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65rem 2rem;
  border-radius: 999px;
  /* This governs the reverse direction (hover -> rest): no delay, so
     leaving hover reverts everything right away instead of lagging. */
  transition: background-color 0.25s ease, background-position 0.7s ease-out,
    color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
/* Hover and click both invert the fill (pink -> white, white text -> pink)
   and sweep the shine band across; :active alone adds a slight press-down
   so a tap/click still reads as a distinct action even while hovering.
   The color/border/glow changes carry a delay here so the shine finishes
   sweeping across the still-pink button first, and the white flip lands
   right as it passes — instead of both happening at once. */
.btn-book:hover,
.btn-book:active {
  background-color: #ffffff;
  background-position: -60% 0;
  color: var(--accent);
  border-color: var(--accent);
  /* Toned down from before — a soft lift instead of a bright ring. */
  box-shadow: 0 0 14px rgba(255, 46, 159, 0.28);
  transition: background-color 0.25s ease 0.45s, background-position 0.7s ease-out,
    color 0.25s ease 0.45s, border-color 0.25s ease 0.45s, transform 0.2s ease, box-shadow 0.25s ease 0.45s;
}
.btn-book:hover { transform: translateY(-1px); }
.btn-book:active { transform: translateY(0) scale(0.96); }

/* ---------- Availability Calendar ---------- */
/* The calendar card itself is centered, so its heading is centered too
   (rather than left-aligned like the other sections) to sit right above it
   instead of looking off to one side. */
#availability .kicker,
#availability h2,
#services .kicker,
#reviews .kicker,
#reviews h2,
#instagram .kicker,
#instagram h2 {
  display: block;
  text-align: center;
}
.calendar-month-label {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}
/* Positioning context for the tooltip below — kept as a separate wrapper
   (rather than putting position:relative on .calendar itself) so the
   tooltip is a sibling of the rounded, overflow:hidden card instead of a
   descendant of it. A descendant would get its own popped-up tooltip
   clipped flat by that same overflow:hidden the instant it tried to peek
   out above the card's rounded top edge. */
.calendar-wrap {
  position: relative;
}
.calendar {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
}
/* On desktop the 460px card left a lot of the container empty on either
   side — widen it in steps so it actually fills the space instead of
   floating as a small block in the middle of a mostly-empty section. */
@media (min-width: 720px) { .calendar { max-width: 640px; } }
@media (min-width: 1080px) { .calendar { max-width: 820px; } }
.calendar-weekdays {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.calendar-weekdays span {
  padding: 0.85rem 0.2rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.calendar-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
}
.cal-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-card);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
/* transparent, not var(--bg-card) — the trailing empty gap in the
   calendar's last row isn't actually --bg-card, it's .calendar-grid's own
   background (a faint translucent white overlay, var(--border)) showing
   through with nothing painted over it. An opaque --bg-card here was
   covering that overlay instead of letting it show through, so these
   cells read as flatter/darker than the trailing gap right next to them.
   Transparent guarantees an exact match regardless of the underlying color.
   BUT transparent cells sitting on the grid's own 1px gap means the gap no
   longer contrasts against anything (both are literally the same color),
   so the column dividers between adjacent empty cells disappeared too.
   Painting an explicit border back on restores those dividers without
   giving up the color match. */
.cal-cell--empty {
  background: transparent;
  cursor: default;
  border-right: 1px solid var(--border-strong);
}
.cal-cell--empty:last-child { border-right: none; }
.cal-cell--booked { color: var(--text-faint); }
/* .cal-cell--hover is toggled by JS (covers touch, where :hover isn't
   reliable) alongside the native :hover for mouse/trackpad. Open days get
   a bit lighter with a soft pink glow (inviting); booked days get a bit
   darker instead, with no glow (a quiet "not this one"). */
.cal-cell--day:hover,
.cal-cell--day.cal-cell--hover {
  background: var(--accent-soft);
  box-shadow: 0 0 10px rgba(255, 46, 159, 0.25), inset 0 0 0 1px var(--accent-dim);
  color: var(--text);
  z-index: 2;
}
.cal-cell--booked.cal-cell--day:hover,
.cal-cell--booked.cal-cell--day.cal-cell--hover {
  background: var(--bg);
  box-shadow: none;
  color: var(--text-muted);
}
.cal-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
  opacity: 0.8;
  pointer-events: none;
}

/* A single shared tooltip, moved and re-labeled by JS to sit above whatever
   day is currently hovered/tapped, rather than one tooltip per cell. */
.cal-tooltip {
  position: absolute;
  z-index: 5;
  max-width: 220px;
  padding: 0.6rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 46, 159, 0.15);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  white-space: normal;
}
.cal-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--accent-dim);
}
.cal-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, -12px);
}
.calendar-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 1.6rem;
}
@media (min-width: 720px) {
  .calendar-note { font-size: 1rem; }
}
.calendar-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 480px) {
  .calendar-weekdays span { font-size: 0.55rem; padding: 0.65rem 0.1rem; }
  .cal-cell { font-size: 0.68rem; padding: 0.25rem 0.35rem; }
  .cal-x { font-size: 1rem; }
}

/* ---------- Hair Prep Guide ---------- */
.prep-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 2.75rem;
}
.prep-intro > div { text-align: center; }
.prep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.prep-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  position: relative;
}
.prep-card .prep-style {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
  color: var(--text);
}
.prep-arrow {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.4rem;
}
.prep-rec {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
  text-transform: capitalize; /* title-cases automatically, same trick used on .service-sub and .compact-list li */
}
/* Placeholder for a short style-demo clip — swap the inner markup for a
   real <video> per card whenever the footage is ready. */
.prep-video-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 9 / 16;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text-faint);
  margin-bottom: 1.3rem;
}
.prep-video-slot svg { width: 28px; height: 28px; opacity: 0.6; }
.prep-video-slot span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Once a real clip is dropped in, swap the dashed "coming soon" placeholder
   look for a clean, filled video card (no border, no padding needed since
   there's no empty state to frame anymore). No overflow:hidden here on
   purpose (same reasoning as .video-slide) — it would clip the running
   white-line glow below. The rounded corners are enforced on the <video>
   itself instead. */
.prep-video-slot.has-video {
  border: none;
  background: var(--bg-card);
  padding: 0;
  overflow: hidden;
}
.prep-video-slot.has-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Same pink-fill, shine-sweep, pink<->white invert treatment as .btn-book
   in the Services section, so this button matches "BOOK" exactly. */
.prep-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  background-image: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.62) 50%, transparent 72%);
  background-size: 260% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  color: #ffffff;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, background-position 0.7s ease-out,
    color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.prep-buy-btn:hover,
.prep-buy-btn:active {
  background-color: #ffffff;
  background-position: -60% 0;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 46, 159, 0.28);
  transition: background-color 0.25s ease 0.45s, background-position 0.7s ease-out,
    color 0.25s ease 0.45s, border-color 0.25s ease 0.45s, transform 0.2s ease, box-shadow 0.25s ease 0.45s;
}
.prep-buy-btn:hover { transform: translateY(-1px); }
.prep-buy-btn:active { transform: translateY(0) scale(0.96); }

/* ---------- Where-To-Buy popup ---------- */
.buy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.buy-modal.is-open { opacity: 1; pointer-events: auto; }
.buy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}
.buy-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 0 40px rgba(255, 46, 159, 0.18);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.25s ease;
}
.buy-modal.is-open .buy-modal-panel { transform: translateY(0) scale(1); }
.buy-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}
.buy-modal-close:hover { color: var(--text); }
.buy-modal-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.buy-modal-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.buy-modal-item-name {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.buy-modal-item-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}
.buy-modal-item .btn-book { width: 100%; }
.buy-modal-item-placeholder {
  color: var(--text-faint);
  font-size: 0.82rem;
  font-style: italic;
}
.prep-disclaimer {
  margin-top: 2.5rem;
  border-left: 2px solid var(--accent);
  padding: 1rem 1.5rem;
  background: var(--accent-soft);
  color: var(--text-muted);
  font-size: 0.88rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prep-disclaimer strong { color: var(--text); }

/* ---------- Policies + Before Your Appointment (compact, combined) ---------- */
/* This section deliberately skips the usual kicker+h2+section-sub intro and
   goes straight to two tight columns — that's what makes it "compact"
   compared to the two separate full-height sections this replaced. */
#policies { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.policy-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.policy-col .kicker { margin-bottom: 0.5rem; }
.policy-col h3 {
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}
.compact-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.compact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.95rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-transform: capitalize; /* title-cases every item automatically, same trick used on .service-sub */
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Same lighter-pink-tint + soft-glow treatment as the calendar's open-day
   hover. :hover covers desktop; .is-clicked is toggled by JS on click/tap
   (same click-highlight approach used on the calendar cells) so mobile
   taps get the same feedback a mouse hover would. */
.compact-list li:hover,
.compact-list li.is-clicked {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
  box-shadow: 0 0 16px rgba(255, 46, 159, 0.35), 0 0 34px rgba(255, 46, 159, 0.2);
  position: relative;
  z-index: 2;
}
.compact-list li strong { color: var(--text); font-weight: 600; }
.compact-mark {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 720px) {
  .policy-checklist-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ---------- Reviews (infinite sliding marquee, now draggable) ---------- */
/* The track holds two back-to-back copies of the same cards (the second
   copy is aria-hidden, decorative-only for assistive tech). The scrolling
   itself is JS-driven (see main.js) rather than a CSS animation — that's
   what lets it be grabbed and dragged like the portfolio carousel while
   still auto-scrolling the rest of the time; a plain CSS @keyframes
   animation has no way to be paused mid-flight at an arbitrary dragged
   offset and then resumed from exactly there. */
.reviews-marquee {
  margin-top: 0.5rem;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  /* Vertical-only padding so the cards' own hover/click glow (box-shadow +
     the running white-line ::before) has room to bleed outward without
     this wrapper's overflow:hidden clipping it flat top/bottom — same fix
     as .video-carousel's padding, for the same reason. */
  padding: 2.5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-marquee.is-dragging { cursor: grabbing; }
.reviews-marquee.is-dragging .reviews-track { user-select: none; }
.reviews-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
}
.review-card {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Same pink-tint + glow click/hover treatment as the policy boxes and
   service cards, so a review card reacts the same way anything else
   pressable on the page does. */
.review-card:hover,
.review-card.is-clicked {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
  box-shadow: 0 0 16px rgba(255, 46, 159, 0.35), 0 0 34px rgba(255, 46, 159, 0.2);
  z-index: 2;
}
/* Running glowing white line, same technique as the portfolio video cards'
   ::before (see the @property --border-angle / video-border-run notes
   above) — reuses that exact registered property and keyframe, just
   re-sized to this card's own rounder corners. */
.review-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    transparent 230deg,
    rgba(255, 255, 255, 0.85) 270deg,
    #ffffff 285deg,
    #ffffff 305deg,
    rgba(255, 255, 255, 0.85) 320deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.5));
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.review-card:hover::before,
.review-card.is-clicked::before {
  opacity: 1;
  animation: video-border-run 1.3s linear infinite;
}
.review-stars {
  color: var(--accent);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
}
.review-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.review-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: auto;
}
@media (max-width: 480px) {
  .review-card { width: 230px; padding: 1.4rem 1.1rem; }
  .reviews-track { gap: 0.9rem; }
}
/* prefers-reduced-motion is respected in JS now (main.js skips starting the
   auto-scroll loop entirely) since the scroll is JS-driven, not a CSS
   @keyframes animation, for the reasons noted on .reviews-marquee above. */

/* ---------- Instagram (mock profile "popup" window) ---------- */
.ig-window {
  position: relative;
  max-width: 640px;
  margin: 3rem auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease;
  /* No overflow:hidden here on purpose (same reasoning as .video-slide) —
     it would clip the running white-line glow below. The rounded corners
     are enforced on .ig-window-bar/.ig-window-body instead. */
}
.ig-window-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
}
.ig-dot { width: 10px; height: 10px; border-radius: 50%; }
.ig-dot--red { background: #ff5f57; }
.ig-dot--yellow { background: #febc2e; }
.ig-dot--green { background: #28c840; }
.ig-window-url {
  flex: 1;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  /* Roughly re-center the url text against the 3 dots on its left. */
  margin-right: 40px;
}

.ig-window-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 0 0 18px 18px;
  overflow: hidden; /* keeps the ig-grid's own corner tiles clipped to the window's bottom curve */
}

/* Running glowing white line around the whole popup — a real element
   (.ig-window-glow), not a ::before like the video/review cards use.
   That's deliberate here: this one needs to land at a different, randomized
   stopping point every lap (see main.js), and JS can't set a custom
   property's value on a pseudo-element (there's no DOM node to target), so
   this one is a real absolutely-positioned child instead that JS drives
   directly. */
.ig-window-glow {
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    transparent 230deg,
    rgba(255, 255, 255, 0.85) 270deg,
    #ffffff 285deg,
    #ffffff 305deg,
    rgba(255, 255, 255, 0.85) 320deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.6));
  pointer-events: none;
}

.ig-profile-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
/* .ig-avatar is now the clickable circular frame itself (an <a>, not the
   <img> directly) — the logo is a wide wordmark, not a face photo, so it's
   contained + padded inside the circle rather than cropped with cover. */
.ig-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg-card), 0 0 18px rgba(255, 46, 159, 0.35);
  transition: box-shadow 0.2s ease;
}
.ig-avatar:hover {
  box-shadow: 0 0 0 4px var(--bg-card), 0 0 26px rgba(255, 46, 159, 0.55);
}
.ig-avatar img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.ig-profile-info { flex: 1; min-width: 0; }
.ig-handle-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.ig-handle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ig-handle:hover { color: var(--accent); }
.ig-verified { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.ig-stats {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 1rem;
}
.ig-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ig-stat strong { font-size: 1rem; color: var(--text); font-weight: 700; }
.ig-stat span { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ig-actions { display: flex; gap: 0.6rem; }
.ig-follow-btn,
.ig-message-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.ig-follow-btn {
  background: var(--accent);
  color: #fff;
}
.ig-follow-btn:hover { background: #ff5cad; box-shadow: 0 0 16px rgba(255, 46, 159, 0.45); }
.ig-message-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.ig-message-btn:hover { border-color: var(--accent); color: var(--accent); }

.ig-bio {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
}
.ig-bio strong { color: var(--text); font-weight: 700; }
.ig-bio span { color: var(--text-muted); }
.ig-bio a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ig-bio a:hover { text-decoration: underline; }

/* 3 columns (matching Instagram's own real grid proportions) so the 8 real
   clips plus the "Tap To See More" tile fill out an even 3x3 square —
   nothing left blank in the bottom-right corner. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 1.5rem;
}
.ig-grid a {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  /* outline (not box-shadow) — box-shadow would get clipped flat by this
     element's own overflow:hidden, same issue noted on the video cards. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s ease, filter 0.2s ease;
}
.ig-grid a:hover {
  outline-color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.5));
}
.ig-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.ig-grid-more {
  aspect-ratio: 1 / 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  color: var(--accent);
  text-align: center;
  padding: 0.5rem;
}
.ig-grid-more:hover {
  opacity: 1 !important;
  border-color: var(--accent);
  background: var(--accent-soft);
  /* Overrides .ig-grid a:hover's white glow (that rule is more specific,
     0-2-1 vs this one's 0-2-0, so it wins on these two properties unless
     explicitly reset) — this tile isn't a photo, so it shouldn't get the
     same "hover to glow" treatment as the real posts. */
  outline-color: transparent !important;
  filter: none !important;
}
.ig-grid-more svg { width: 22px; height: 22px; }
.ig-grid-more span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}

.ig-visit-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  transition: color 0.2s ease;
}
.ig-visit-link:hover { color: #ff5cad; }

@media (max-width: 560px) {
  .ig-profile-row { flex-direction: column; text-align: center; }
  .ig-handle-row, .ig-stats { justify-content: center; }
  .ig-actions { justify-content: center; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-window-url { display: none; } /* not enough room next to the dots on phones */
}

/* ---------- Booking ---------- */
.booking-section { text-align: center; }
.booking-widget {
  max-width: 760px;
  margin: 0 auto;
  border: 1px dashed var(--border-strong);
  border-radius: 16px; /* rounder than the site's default sharp --radius, just for this box */
  padding: clamp(2.5rem, 6vw, 4rem) 2rem;
  background: var(--bg-card);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Same click/tap highlight treatment as the policy boxes and calendar cells. */
.booking-widget:hover,
.booking-widget.is-clicked {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(255, 46, 159, 0.4), 0 0 50px rgba(255, 46, 159, 0.22);
}
.booking-widget .embed-tag {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 1.4rem;
}
.booking-widget h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.booking-widget p {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 460px;
  margin: 0 auto;
}
.booking-support {
  margin-top: 2.25rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.booking-support strong { color: var(--text); }

.booking-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.booking-contact .ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.92rem;
  border: 1px solid var(--border-strong);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.booking-contact .ig-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.booking-contact .ig-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* ---------- Footer ---------- */
/* Pulled way down from .section's usual clamp(4rem,9vw,7.5rem) bottom
   padding — the Instagram card is the last thing before the footer, and
   that much empty space was pushing the footer's back-to-top arrow far
   below it. */
#instagram { padding-bottom: 1.5rem; }
footer {
  position: relative;
  padding: 0.5rem 0 2rem;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--leopard-pattern);
  background-size: 160px;
  opacity: 0.035;
  pointer-events: none;
}
.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.footer-logo .logo-img {
  height: 58px;
  width: auto;
}
.footer-logo { display: inline-block; text-decoration: none; cursor: pointer; }
/* Uses .footer-inner's normal 2rem gap to the logo below it — same even
   rhythm as every other footer row, not squeezed in tight. */
.footer-back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.footer-back-to-top:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(255, 46, 159, 0.4);
}
.footer-back-to-top svg {
  width: 16px;
  height: 16px;
  animation: footer-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes footer-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.8rem;
  /* Smaller than column-gap on purpose — the zero-height .footer-nav-break
     row below still counts as a row of its own, so it contributes TWO
     row-gaps (above and below it) instead of one. Using half here keeps
     the visible space between the two real rows close to a single normal
     gap instead of doubling it. */
  row-gap: 0.9rem;
}
/* Forces Policies (and everything after it) onto its own row, regardless
   of how much horizontal room is actually available — a flex item with
   flex-basis:100% always starts a fresh line. */
.footer-nav-break {
  flex-basis: 100%;
  height: 0;
}
.footer-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--accent); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
}
.footer-social svg { width: 20px; height: 20px; stroke: var(--accent); }

.footer-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.footer-copy {
  font-size: 0.78rem;
  color: var(--text-faint);
}
.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--text);
  /* filter (not box-shadow/text-shadow individually) glows the logo SVG
     and the text together as one soft unit. */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  animation: footer-credit-fade 3.5s ease-in-out infinite;
}
@keyframes footer-credit-fade {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-credit { animation: none; opacity: 0.7; }
}
.footer-credit-logo {
  width: 30px;
  height: auto;
  flex-shrink: 0;
}
.footer-credit span {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.footer-credit a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.footer-credit a:hover { color: var(--accent); }
.footer-copy .dev-note {
  display: block;
  margin-top: 0.3rem;
  color: var(--text-faint);
  opacity: 0.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card--cta { grid-column: span 2; }
}

@media (max-width: 480px) {
  /* Two columns needs tighter cards on phone-width screens, or the padding
     and text size meant for a roomy 3-up desktop card crowd the pill button
     and force awkward wraps. */
  .service-card { padding: 1.6rem 0.9rem; gap: 0.6rem; }
  .service-card h3 { font-size: 1rem; }
  .service-sub { font-size: 0.72rem; }
  .btn-book { padding: 0.55rem 1.4rem; font-size: 0.66rem; }

  /* Same "tighten for 2-up phone-width" treatment as .service-card above,
     since .prep-grid now also stays side-by-side all the way down. */
  .prep-grid { gap: 0.8rem; }
  .prep-card { padding: 1.4rem 0.9rem; }
  .prep-card .prep-style { font-size: 0.92rem; margin-bottom: 0.6rem; }
  .prep-rec { font-size: 0.78rem; margin-bottom: 0.85rem; }
  .prep-video-slot { max-width: 100%; margin-bottom: 0.85rem; }
  .prep-buy-btn { padding: 0.5rem 1.1rem; font-size: 0.62rem; }
}

@media (max-width: 720px) {
  /* The wrap stops "disappearing" here and becomes the real slide-out
     drawer instead — its two <nav> children (left/right on desktop) just
     stack in order as one unified list of 5 links, exactly like the single
     list this replaced. */
  .nav-links-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: rgba(0,0,0,0.98);
    backdrop-filter: blur(10px);
    padding: 3rem 2.5rem;
    gap: 1.9rem;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    border-left: 1px solid var(--border);
  }
  .nav-links-wrap.open { transform: translateX(0); }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.9rem;
  }
  .nav-links--left,
  .nav-links--right {
    grid-column: auto;
    justify-self: auto;
  }
  /* Inside the mobile drawer there's no IG icon to clear — reset the
     desktop-only spacing so "Portfolio" doesn't sit oddly indented there. */
  .nav-links--left { margin-left: 0; }
  .nav-links a { font-size: 0.95rem; }
  .nav-toggle { display: block; }

  /* The base clamp() bottoms out too small on narrow phones (its vw-based
     growth can't keep up once the viewport is this tight) — give mobile its
     own floor so the logo still reads as a proper size, not a shrunk icon. */
  .logo-mark .logo-img { height: clamp(68px, 17vw, 84px); }
}

@media (max-width: 480px) {
  .booking-contact { flex-direction: column; }
}

/* ---------- Utility: fade-in-on-scroll (generic) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}