/* ============================================================
  New Elegant Nayab Salon — Design Tokens
   One-tone palette: warm rosewood accent + near-black ink + blush neutrals
   ============================================================ */
:root {
  --ink: #211512;
  --ink-soft: #6E5C56;
  --ink-faint: #9C8C86;

  --wine: #8C2B3A;
  --wine-dark: #6C1F2B;
  --wine-light: #B25566;

  --gold: #C9A227;
  --gold-light: #E3C567;

  --white: #FFFFFF;
  --blush: #FAF7F4;
  --border: #EBE1DB;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --section-pad: clamp(2.75rem, 4.5vw, 4rem);
  --container-w: 1120px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Every rem-based size (type, spacing) scales down from here, so the
     whole page reads a notch smaller as one consistent system instead
     of individual sizes being shrunk by hand and drifting apart. */
  font-size: 90%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Show a plain, fully-visible, static hero instead of the entrance
     relay for users who've asked for reduced motion. */
  .hero-visual-video,
  .hero-eyebrow,
  .hero-title,
  .hero-subtitle,
  .hero-actions {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Decorative auto-scroll, not the kind of motion reduced-motion users
     are typically trying to avoid — keep it running at its normal speed
     rather than letting the near-zero global duration above freeze it. */
  .insta-track {
    animation-duration: 34s !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: .75rem 1.25rem;
  border-radius: 8px;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section-head { max-width: 620px; margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.section-head-center { max-width: 620px; margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wine);
  margin: 0 0 .6rem;
}

/* Plain colour, not the .shimmer-text gradient treatment used
   elsewhere — this heading also gets split into per-word spans by
   .magic-heading (each word wrapped in an overflow:hidden span for
   the rise animation), and background-clip:text painting through
   nested overflow:hidden inline-blocks is a known-flaky combination:
   it can render the text blank or misaligned instead of showing the
   gradient. Simple elements without word-splitting (hero title,
   Hair Care/Cosmetics bold line) keep the shimmer safely. */
.section-head h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.15;
  color: var(--ink);
}
.section-lead {
  margin-top: .6rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 46ch;
}
.section-head-center .section-lead { margin-inline: auto; }

/* Sections flow continuously — no seam lines between them, only spacing */
.gallery { padding-top: var(--section-pad); }

/* Shared background for every light section: a soft repeating gold
   lattice texture plus two faint corner glows, so the blush base
   reads as a rich, faintly patterned surface instead of a flat,
   lifeless fill. Kept subtle enough not to compete with card content. */
.gallery,
.services,
.testimonials,
.instagram,
.hair-care,
.cosmetics,
.social {
  background-color: var(--blush);
  background-image:
    radial-gradient(ellipse 620px 420px at 8% -5%, rgba(201, 162, 39, .12), transparent 60%),
    radial-gradient(ellipse 520px 380px at 100% 105%, rgba(201, 162, 39, .1), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 3L43 23L23 43L3 23Z' fill='none' stroke='%23C9A227' stroke-width='0.75' opacity='0.16'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 46px 46px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .93rem;
  letter-spacing: .01em;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn-icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn-primary .btn-icon { fill: currentColor; stroke: none; }

.btn-primary {
  background: var(--wine);
  color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(140, 43, 58, .5);
}
.btn-primary:hover { background: var(--wine-dark); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--wine); color: var(--wine); }
.btn-outline .btn-icon { transition: transform .3s var(--ease); }
.btn-outline:hover .btn-icon { transform: translateX(3px); }

.btn-sm { padding: .65rem 1.3rem; font-size: .85rem; }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Magic heading reveal — each word is masked (overflow:hidden) and
   rises into place with a stagger; toggling continues on every scroll
   in/out (not one-shot like .reveal above), so leaving the section
   plays the same stagger in reverse and re-entering replays it. */
.magic-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.magic-word-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .55s var(--ease);
  transition-delay: var(--word-delay, 0s);
}
.magic-heading.in-view .magic-word-inner { transform: translateY(0); opacity: 1; }

/* Hero video entrance — plays once on load, own scale + slide rather
   than a plain fade since it keeps moving (playing) once visible.
   The hero's text uses .stagger-reveal below like every other
   section now, so this is just the video's own motion. */
.hero-visual-video {
  opacity: 0;
  transform: scale(1.12) translateX(44px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.hero-visual-video.is-visible { opacity: 1; transform: scale(1) translateX(0); }

/* Text cascade — a whole stack of elements (eyebrow, heading, lead,
   CTA, etc.) fades and slides up one after another rather than all at
   once, toggling on every scroll crossing (not one-shot like .reveal
   above) so leaving and re-entering a section always replays it.
   Originally built for the Hair Care section alone; now shared by
   every section's intro copy. */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
}
.stagger-reveal.in-view > * { opacity: 1; transform: translateY(0); }
.stagger-reveal > *:nth-child(1) { transition-delay: 0s; }
.stagger-reveal > *:nth-child(2) { transition-delay: .1s; }
.stagger-reveal > *:nth-child(3) { transition-delay: .2s; }
.stagger-reveal > *:nth-child(4) { transition-delay: .32s; }
.stagger-reveal > *:nth-child(5) { transition-delay: .44s; }
.stagger-reveal > *:nth-child(6) { transition-delay: .56s; }

/* Small sparkle icon that sits above a section's eyebrow — pulses
   continuously once revealed. Only starts once the fade-in above has
   actually shown it; otherwise the glow's own opacity keyframe fights
   the entrance transition and it sits half-visible before it's
   scrolled to. */
.stagger-flourish {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--gold);
  margin-bottom: .75rem;
}
.section-head-center .stagger-flourish,
.spatial-header .stagger-flourish {
  margin-inline: auto;
}
.stagger-reveal.in-view .stagger-flourish {
  animation: flourish-glow 2.6s ease-in-out infinite;
}
@keyframes flourish-glow {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(201, 162, 39, 0)); opacity: .85; }
  50% { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 6px rgba(201, 162, 39, .65)); opacity: 1; }
}

/* Brushed-metallic text: a soft gold highlight band sweeps through a
   wine-to-gold gradient on a slow loop, so the "premium" cue is an
   ongoing glimmer rather than a one-shot fade-in like the rest of the
   page. Works through nested inline children too (e.g. the per-word
   spans .magic-heading splits text into) since none of them set their
   own color/background, so they just inherit the transparent fill. */
.shimmer-text {
  background-image: linear-gradient(
    100deg,
    var(--wine) 0%,
    var(--wine) 38%,
    var(--gold-light) 50%,
    var(--wine) 62%,
    var(--wine) 100%
  );
  background-size: 260% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 5s ease-in-out infinite;
}
@keyframes text-shimmer {
  0%, 15% { background-position: 180% 0; }
  55%, 100% { background-position: -80% 0; }
}

/* Same sweep, but white-to-gold instead of wine-to-gold — the wine
   base is too close to the ink backdrop's own darkness on dark
   sections, so it would fade in and out of legibility as it swept
   rather than reading as a highlight moving across bright text. */
.shimmer-text-light {
  background-image: linear-gradient(
    100deg,
    var(--white) 0%,
    var(--white) 38%,
    var(--gold-light) 50%,
    var(--white) 62%,
    var(--white) 100%
  );
  background-size: 260% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 5s ease-in-out infinite;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
  box-shadow: 0 12px 30px -24px rgba(33, 21, 18, .4);
}

/* Over the hero: transparent header, everything still visible in light tones */
.site-header:not(.scrolled) .brand-name { color: var(--white); }
.site-header:not(.scrolled) .nav-desktop a { color: var(--white); }
.site-header:not(.scrolled) .nav-toggle span { background: var(--white); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}
.brand-logo { height: 60px; width: auto; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand-name em { font-style: italic; }

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2.25rem;
  margin-inline: auto;
}
.nav-desktop a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-block: .3rem;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-desktop a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: none; flex-shrink: 0; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  top: 80px;
  background: var(--white);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  z-index: 99;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 3rem clamp(1.25rem, 5vw, 3rem);
}
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--ink);
}
.mobile-menu nav .btn { align-self: flex-start; margin-top: .5rem; }

/* ============================================================
   Hero — mobile/tablet: a plain video band above the text (no
   overlap, so no legibility problem — the wide-format video crops
   tight enough at narrow widths that the face fills nearly the whole
   frame, leaving nowhere for text to sit on top of it and stay
   readable). Desktop (below): one continuous sharp video fills the
   entire section edge to edge, text sits directly on top of it,
   readable via a plain scrim gradient rather than any second "zone"
   trying to visually dissolve into a separately-treated area. Every
   earlier version of the desktop layout tried to blend a sharp region
   into a differently-treated region (dark tint, then a second blurred
   layer) and each one still left a seam at the boundary between the
   two treatments, however well matched — because there were always
   two regions. Removing the second region removes the boundary:
   there is nothing left for the video to seam against.
   ============================================================ */
.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding-top: 80px;
}

.hero-visual {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 270px;
  overflow: hidden;
}
.hero-visual-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.hero-visual-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(33, 21, 18, .85) 0%, transparent 35%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(3rem, 6vw, 4rem);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .82);
}

.hero-title {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
  margin-top: .4rem;
}
.hero-title em { font-style: italic; }

.hero-subtitle {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 42ch;
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   Services — price-list cards, photo optional per category
   ============================================================ */
.services { padding-block: var(--section-pad); }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease);
}
.service-card:hover { transform: translateY(-3px); }

.service-photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; }
.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform .5s var(--ease);
}
.service-card:hover .service-photo img { transform: scale(1.06); }

.service-body {
  padding: 1.1rem .85rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.service-card h3 {
  font-size: 1.1rem;
  color: var(--ink);
}

.service-list { margin-top: .6rem; width: 100%; text-align: left; }
.service-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .3rem;
  font-size: .9rem;
}
.service-list li span:first-child { color: var(--ink-soft); }
.service-list li span:last-child {
  font-weight: 600;
  color: var(--wine);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.service-note {
  margin-top: .5rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: left;
}

.service-body .btn { margin-top: auto; width: 100%; }
.service-list, .service-note { margin-bottom: 1.15rem; }

/* Flip card — adapted from a Uiverse.io component (by
   joe-watson-sbf). Front shows the photo + title (same as the old
   static cards); back reveals the pricing on hover. All service cards
   use this now. Needs a fixed, shared height (unlike the old
   auto-height cards) since front/back are stacked via
   position:absolute — sized to fit the longest card's content
   (6 price rows + a note) without scrolling. */
.service-flip-card {
  background: transparent;
  perspective: 1400px;
  height: 430px;
}
.service-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .8s var(--ease);
  transform-style: preserve-3d;
}
.service-flip-card:hover .service-flip-inner { transform: rotateY(180deg); }

.service-flip-front,
.service-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 8px 24px -10px rgba(33, 21, 18, .2);
}

/* Photo fills the whole front face; the title sits on top at the
   bottom, over a gradient scrim, instead of leaving empty white space
   below a smaller cropped photo. */
.service-flip-front {
  align-items: center;
  text-align: center;
  justify-content: flex-end;
  padding: 0;
}
.service-flip-front .service-photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
}
.service-flip-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(33, 21, 18, .85) 100%);
  z-index: 1;
  pointer-events: none;
}
.service-flip-front h3 {
  position: relative;
  z-index: 2;
  color: var(--white);
  margin: 0 0 1.25rem;
  padding-inline: 1rem;
}

.service-flip-back {
  transform: rotateY(180deg);
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.1rem 1.1rem;
  overflow-y: auto;
}
.service-flip-back h3 { margin-bottom: .3rem; }
.service-flip-back .service-list { margin-bottom: .5rem; }
.service-flip-back .btn { margin-top: auto; width: 100%; }

/* ============================================================
   Hair Care — copy + CTA + two-column facts on one side, the real
   Hair Food product video on the other.
   ============================================================ */
.hair-care { padding-block: var(--section-pad); }

.hair-care-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
}

/* Flourish icon and heading shimmer are the shared .stagger-flourish /
   .shimmer-text utilities (see near .stagger-reveal above). */
.hair-care-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: .3rem;
}
.hair-care-heading-light,
.hair-care-heading-bold { display: block; }
.hair-care-heading-light { font-weight: 400; color: var(--ink-faint); }
.hair-care-heading-bold { font-weight: 700; }

.hair-care-copy .btn { margin-top: 1.5rem; }

.hair-care-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 46ch;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(33, 21, 18, .12);
}
.hair-care-detail-label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .4rem;
}
.hair-care-detail-text {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* Shared by every "product showcase" section (Hair Care, Cosmetics,
   any future one) — a media box whose outer edge softens to
   transparent on all four sides instead of cutting off as a hard
   rectangle, rather than a section-specific class each time. */
.product-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(260px, 33vw, 420px);
  overflow: hidden;
}
.product-visual video,
.product-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  outline: none;
  --product-edge-fade: 14px;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--product-edge-fade), #000 calc(100% - var(--product-edge-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--product-edge-fade), #000 calc(100% - var(--product-edge-fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--product-edge-fade), #000 calc(100% - var(--product-edge-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--product-edge-fade), #000 calc(100% - var(--product-edge-fade)), transparent);
  mask-composite: intersect;
}

@media (min-width: 860px) {
  .hair-care-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); }
}

/* ============================================================
   Cosmetics — same pattern as Hair Care (copy + CTA + two-column
   facts, a real product photo, .product-visual's edge-fade), mirrored:
   the picture sits first/left here instead of second/right.
   ============================================================ */
.cosmetics { padding-block: var(--section-pad); }

.cosmetics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
}

/* Flourish icon and heading shimmer are the shared .stagger-flourish /
   .shimmer-text utilities (see near .stagger-reveal above). */
.cosmetics-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: .3rem;
}
.cosmetics-heading-light,
.cosmetics-heading-bold { display: block; }
.cosmetics-heading-light { font-weight: 400; color: var(--ink-faint); }
.cosmetics-heading-bold { font-weight: 700; }

.cosmetics-copy .btn { margin-top: 1.5rem; }

.cosmetics-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 46ch;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(33, 21, 18, .12);
}
.cosmetics-detail-label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .4rem;
}
.cosmetics-detail-text {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 860px) {
  /* Picture first/left, copy second/right — the mirror image of Hair
     Care's column order. Copy still gets the slightly larger share
     regardless of which side it's on. */
  .cosmetics-grid { grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); }
}

/* ============================================================
   Immersive Gallery (Spatial Grid) — dark showcase section, a
   deliberate contrast beat before Hair Care and Services. Adapted
   from a supplied React component: same glass-card grid, floating
   blurred orbs, and hover lift/glow, but recolored from the
   original's purple/blue/pink to this site's wine/gold palette, and
   rebuilt in plain HTML/CSS since the project has no React. Only one
   real on-brand video exists, so there's a single video cell (first
   position) and five photo cells, instead of the original's 3/3 mix.
   ============================================================ */
.spatial {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(140, 43, 58, .22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(201, 162, 39, .14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 60%, rgba(227, 197, 103, .1) 0%, transparent 60%),
    var(--ink);
}
.spatial-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: spatial-orb-drift 12s ease-in-out infinite alternate; }
.spatial-orb-1 { width: 520px; height: 520px; background: rgba(140, 43, 58, .28); top: -180px; left: -120px; }
.spatial-orb-2 { width: 400px; height: 400px; background: rgba(201, 162, 39, .2); bottom: -100px; right: -80px; animation-delay: -4s; }
.spatial-orb-3 { width: 300px; height: 300px; background: rgba(227, 197, 103, .16); top: 40%; left: 55%; animation-delay: -8s; }
@keyframes spatial-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

.spatial-shell { position: relative; z-index: 1; max-width: var(--container-w); margin-inline: auto; padding-inline: 1.25rem; }

.spatial-header { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.spatial-eyebrow {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: .5rem;
}
.spatial-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 .6rem;
  background-image: linear-gradient(100deg, var(--white) 0%, var(--white) 38%, var(--gold-light) 50%, var(--white) 62%, var(--white) 100%);
  background-size: 260% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 5s ease-in-out infinite;
}
.spatial-sub { font-size: .95rem; color: rgba(255, 255, 255, .55); max-width: 46ch; margin-inline: auto; }

.spatial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 1rem;
}
.spatial-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 20px 60px rgba(0, 0, 0, .55);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease, border-color .3s ease;
}
.spatial-cell:hover {
  transform: scale(1.035) translateY(-4px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 32px 80px rgba(0, 0, 0, .65), 0 0 40px rgba(201, 162, 39, .25);
}
.spatial-cell-inner { position: absolute; inset: 0; }
.spatial-cell-inner img,
.spatial-cell-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cells with more than one image: a strip of items, stepped through
   automatically (see main.js) and clipped by .spatial-cell's own
   overflow:hidden — only the current item's slice is visible. Each
   item carries its own overlay/caption so both travel together as
   the strip advances. Direction sets both the axis (vertical for
   bottom/top, horizontal for left/right) and which end of the strip
   the new item enters from — "top"/"left" use a reversed flex order
   so their new item enters from that edge instead of the opposite
   one (see the posFor() comment in main.js for the full reasoning). */
.spatial-scroll-track { display: flex; will-change: transform; }
.spatial-scroll-track[data-direction="bottom"] { flex-direction: column; width: 100%; }
.spatial-scroll-track[data-direction="top"] { flex-direction: column-reverse; width: 100%; }
.spatial-scroll-track[data-direction="right"] { flex-direction: row; height: 100%; }
.spatial-scroll-track[data-direction="left"] { flex-direction: row-reverse; height: 100%; }
.spatial-scroll-item { position: relative; flex: 0 0 auto; }
.spatial-scroll-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.spatial-cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, transparent 50%), linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, transparent 30%);
  pointer-events: none;
}
.spatial-cell-label { position: absolute; bottom: 14px; left: 16px; display: flex; flex-direction: column; gap: 2px; }
.spatial-cell-title { font-size: .875rem; font-weight: 500; color: var(--white); letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.spatial-cell-sub { font-size: .69rem; color: rgba(255, 255, 255, .55); letter-spacing: .04em; text-transform: uppercase; }
.spatial-cell-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .9);
}
.spatial-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); animation: spatial-pulse-dot 1.6s ease-in-out infinite; }
@keyframes spatial-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.75); }
}

.spatial-footer { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: .75rem; color: rgba(255, 255, 255, .3); letter-spacing: .06em; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.spatial-footer-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .25); }

@media (max-width: 860px) {
  .spatial-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); }
}
@media (max-width: 520px) {
  .spatial-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 200px); }
}

/* ============================================================
   Testimonials — live rotating cards. JS swaps content every 3s;
   the CSS handles a slow, natural fade+rise per card, staggered so
   they visibly arrive one after another rather than all at once.
   ============================================================ */
.testimonials { padding-block: var(--section-pad); }

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 810px;
  margin-inline: auto;
}

.testimonial-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--white);
  border-radius: 22px;
  padding: 2rem;
  box-shadow: 0 2px 28px -10px rgba(33, 21, 18, .1);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.testimonial-card.is-changing {
  opacity: 0;
  transform: translateY(26px) scale(.98);
}

.testimonial-featured { display: flex; flex-direction: column; gap: 1.5rem; }

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  flex-shrink: 0;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
}

.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.testimonial-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.testimonial-role { margin-top: .15rem; font-size: .85rem; color: var(--ink-soft); }
.testimonial-stars { color: var(--gold); letter-spacing: .1em; font-size: 1rem; }

.testimonial-small { padding: 1.5rem; }
.testimonial-small-head { display: flex; align-items: center; gap: .85rem; }
.testimonial-avatar-sm { width: 42px; height: 42px; font-size: .85rem; }
.testimonial-quote-sm { margin-top: 1rem; font-size: .95rem; line-height: 1.6; }
.testimonial-stars-sm { margin-top: 1rem; font-size: .85rem; }

/* ============================================================
   Social Media — two clickable cards, each a custom-styled mockup
   (phone frame for Instagram, video thumbnail for YouTube) rather
   than the platforms' own embed widgets, so it matches the site's
   look instead of reading as a generic dropped-in embed.
   ============================================================ */
.social-heading {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  color: var(--ink);
  line-height: 1.15;
}
.social-heading-light,
.social-heading-bold { display: block; }
.social-heading-light { font-weight: 400; color: var(--ink); }
.social-heading-bold { font-weight: 700; }

.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  max-width: 720px;
  margin-inline: auto;
  justify-items: center;
}

.platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform .3s var(--ease);
}
.platform-card:hover { transform: translateY(-4px); }

/* Groups the YouTube + Cosmetics cards into one grid cell, stacked
   vertically, so they sit as a single column beside Instagram
   instead of spreading into a third column. */
.platform-card-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
}

/* Phone frame — pure CSS body/notch, sized to the real Instagram
   screenshot's aspect ratio so it fills the screen with no cropping. */
.phone-mockup {
  position: relative;
  width: clamp(180px, 40vw, 230px);
  aspect-ratio: 1284 / 2778;
  background: var(--ink);
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 24px 40px rgba(33, 21, 18, .28);
}
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 22px;
  background: var(--ink);
  border-radius: 12px;
  z-index: 2;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tablet frame — same max-width as the laptop above it so the column
   edges line up, and squarer/chunkier than the phone frame (wider
   aspect ratio, thicker uniform bezel) so it reads as a different
   device. The source screenshot is still phone-shaped, so it's
   cropped from the top: header/stats/bio stay intact and only the
   lower rows of the photo grid are trimmed. */
.tablet-mockup {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  border-radius: 26px;
  padding: 20px 16px;
  box-shadow: 0 24px 40px rgba(33, 21, 18, .22);
}
.tablet-camera {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  z-index: 2;
}
.tablet-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.tablet-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* YouTube-style laptop mockup — screen + a wider keyboard-deck base
   below it, echoing the phone mockup's device-frame idea but for a
   platform more commonly watched on a bigger screen. Screen ratio
   matches the real channel screenshot so it fills with no cropping. */
.laptop-mockup {
  width: 100%;
  max-width: 340px;
}
.laptop-screen {
  position: relative;
  background: var(--ink);
  border-radius: 14px 14px 3px 3px;
  padding: 10px 10px 12px;
  box-shadow: 0 20px 34px rgba(33, 21, 18, .22);
}
.laptop-screen-inner {
  position: relative;
  aspect-ratio: 1800 / 752;
  border-radius: 4px;
  overflow: hidden;
}
.laptop-screen-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.laptop-base {
  width: 114%;
  margin-inline: -7%;
  height: 16px;
  background: linear-gradient(180deg, #2a1c18 0%, var(--ink) 100%);
  border-radius: 0 0 10px 10px;
  position: relative;
}
.laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 4px;
  background: rgba(0, 0, 0, .35);
  border-radius: 0 0 5px 5px;
}

.platform-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.25rem;
  text-align: center;
}
.social-count {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
}
.social-label {
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .social-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ============================================================
   Instagram Marquee
   ============================================================ */
.instagram { padding-block: var(--section-pad); }

.insta-marquee {
  margin-top: 1.75rem;
  overflow: hidden;
  padding-block: 1.5rem;
}

.insta-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  animation: insta-scroll 34s linear infinite;
  /* Hints the browser to keep this on its own composited layer.
     Safari on iOS has been known to visually drop long-running,
     continuously-animating layers with many images (the content stays
     in the DOM, it just stops being painted) — this is the standard
     mitigation. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Pause-on-hover only for actual mouse pointers — touch devices can get
   "stuck" in a sticky :hover/:focus state after a tap (e.g. after tapping
   an item to open Instagram and returning), which would otherwise freeze
   the marquee permanently. */
@media (hover: hover) and (pointer: fine) {
  .insta-marquee:hover .insta-track {
    animation-play-state: paused;
  }
}
@keyframes insta-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.insta-item {
  position: relative;
  flex: 0 0 auto;
  width: 151px;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  isolation: isolate;
}
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.insta-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 21, 18, .38);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.insta-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 1;
}
.insta-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--white); stroke-width: 1.6; }
.insta-item:hover img { transform: scale(1.08); }
.insta-item:hover::after,
.insta-item:hover .insta-icon { opacity: 1; }

.insta-cta { margin-top: 2rem; text-align: center; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.78);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  padding-bottom: 3rem;
}

.footer-logo { height: 38px; width: auto; margin-bottom: 1rem; }
.footer-tagline { max-width: 30ch; line-height: 1.6; font-size: .95rem; }
.footer-brand .btn { margin-top: 1.5rem; }

.footer-heading {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wine-light);
  margin-bottom: 1.1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { font-size: .95rem; transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--white); }

.footer-icon-list a { display: inline-flex; align-items: center; gap: .6rem; }
.footer-icon-list svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; }
.footer-icon-list li:first-child svg { fill: currentColor; }

address { font-style: normal; font-size: .95rem; line-height: 1.8; }
.footer-muted { color: rgba(255,255,255,.5); font-size: .87rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.admin-link {
  display: inline-flex;
  color: rgba(255,255,255,.28);
  transition: color .2s ease;
}
.admin-link:hover,
.admin-link:focus-visible {
  color: rgba(255,255,255,.65);
}
.admin-link svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   Floating Social Buttons
   ============================================================ */
.social-float-stack {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 90;
}

/* Glassmorphism dock — adapted from a Uiverse.io component (by
   MijailVillegas). Class names are prefixed (social-*) since the
   original used bare names like .card/.svg/.text that would collide
   with the rest of the site. Hover motion points up-left instead of
   the original's up-right, since this dock sits in the bottom-right
   corner — up-right would push icons and tooltips off-screen. */
.social-card {
  margin: 0;
  padding: .85rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  border-radius: 18px;
  backdrop-filter: blur(15px);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, .19),
    inset 0 0 5px rgba(255, 255, 255, .27),
    0 5px 15px rgba(0, 0, 0, .18);
}

.social-item {
  position: relative;
  cursor: pointer;
}

/* Rings stay colorless on purpose — a faint glass halo (light tint +
   inset glow), never the brand color. Putting the brand color on
   these at rising opacity is what made the outer ring read as a
   "dark" layer instead of a soft, light, transparent one. */
.social-item span {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .3), inset 0 0 5px rgba(255, 255, 255, .5);
  transition: all .3s var(--ease);
  pointer-events: none;
}
.social-item:hover span:nth-child(1) { opacity: .35; }
.social-item:hover span:nth-child(2) { opacity: .55; transform: translate(-6px, -6px); }
.social-item:hover span:nth-child(3) { opacity: .75; transform: translate(-12px, -12px); }

.social-svg {
  display: block;
  width: 56px;
  height: 56px;
  padding: .8rem;
  border-radius: 50%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, .3),
    inset 0 0 5px rgba(255, 255, 255, .5),
    0 5px 5px rgba(0, 0, 0, .164);
}
.social-item:hover .social-svg { transform: translate(-6px, -6px); }

/* Icon backgrounds are tinted, semi-transparent versions of the brand
   colors — toned down rather than the full-saturation solid fills. */
.social-item--whatsapp .social-svg {
  background: rgba(37, 211, 102, .55);
  fill: var(--white);
  box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .4), inset 0 0 20px rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.5);
}

.social-item--instagram .social-svg {
  background: radial-gradient(circle at 30% 110%, rgba(255,219,115,.6) 0%, rgba(253,89,73,.6) 40%, rgba(214,36,159,.6) 65%, rgba(40,90,235,.6) 100%);
  fill: var(--white);
  box-shadow: 0 10px 22px -10px rgba(214, 36, 159, .35), inset 0 0 20px rgba(255,255,255,.3), inset 0 0 5px rgba(255,255,255,.5);
}

.social-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: .4rem .7rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.social-item:hover .social-tooltip { opacity: 1; transform: translateY(-50%) translateX(-4px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 640px) {
  .footer-inner { grid-template-columns: 1.3fr 1fr 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 800px) {
  .testimonial-grid { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .testimonial-featured { padding: 2.5rem; }
}

@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }

  .hero {
    min-height: 640px;
    display: flex;
    align-items: center;
    padding-top: 0;
  }
  .hero-visual {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }
  .hero-visual-video { object-position: 65% 25%; }
  /* Dark on the text side, clear over the face on the right — a plain
     readability scrim over the one continuous video, not a blend zone
     between two different treatments. */
  .hero-visual-scrim {
    background: linear-gradient(
      100deg,
      rgba(33, 21, 18, .85) 0%,
      rgba(33, 21, 18, .78) 28%,
      rgba(33, 21, 18, .4) 50%,
      rgba(33, 21, 18, .1) 68%,
      transparent 82%
    );
  }
  .hero-inner { padding-block: 0; }
  .hero-text { max-width: 460px; }

  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}