/* ═══════════════════════════════════════════════════════════════════════════
   SANMI — Luxury Aari Work & Fashion Tailoring
   Complete Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Raleway:wght@300;400;500;600;700&family=Dancing+Script:wght@400;600;700&family=Pinyon+Script&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --ivory:       #faf8f3;
  --champagne:   #f5edd6;
  --cream:       #fef9f0;
  --blush:       #fdf0f0;
  --gold:        #c9a84c;
  --gold-light:  #e8c96e;
  --gold-dark:   #9a7830;
  --antique:     #b8983a;
  --wine:        #6b2937;
  --wine-dark:   #3d1420;
  --plum:        #3d1a35;
  --plum-dark:   #1a0d18;
  --rose:        #c4879a;
  --dusty-rose:  #d4a0b0;
  --charcoal:    #2a2520;
  --charcoal-lt: #3d3630;
  --dark:        #0c0805;
  --dark-warm:   #120d08;
  --grey:        #8a8178;
  --grey-lt:     #c2bdb5;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Raleway', system-ui, sans-serif;
  --font-script:  'Dancing Script', cursive;

  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  --container:   1200px;
  --section-pad: clamp(80px, 10vw, 140px);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--dark);
  overflow-x: hidden;
  cursor: none;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
/* Dropdown lists open on a white panel in most browsers — keep options readable even when the select itself uses light text */
select option, select optgroup { color: #2a2520; background: #fff; }
a  { text-decoration: none; color: inherit; }
button { cursor: none; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Custom Cursor ────────────────────────────────────────────────────────── */
.cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, background 0.2s, width 0.3s, height 0.3s;
  mix-blend-mode: difference;
}

.cursor-follower {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease-out), width 0.4s, height 0.4s, border-color 0.3s;
}

body:has(.btn:hover) .cursor,
body:has(a:hover) .cursor { width: 20px; height: 20px; }

/* ── Scroll Thread ────────────────────────────────────────────────────────── */
#scroll-thread {
  position: fixed;
  left: 28px;
  top: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
  transform-origin: top;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

#scroll-thread.visible { opacity: 1; }

#scroll-thread::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -3px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 24px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.4s var(--ease-out), background 0.4s, transform 0.4s var(--ease-out);
}

#nav.scrolled {
  background: rgba(12,8,5,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 60px;
  border-bottom: 1px solid rgba(201,168,76,0.12);
}

#nav.hidden { transform: translateY(-100%); }

.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}

/* Logo name row: custom S-mark SVG + "anmi Creation" text side by side */
.logo-name-wrap {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 0;
}

/* S + needle monogram — the PNG is a mask, so the colour comes from the gold gradient */
.logo-s-mark {
  display: block;
  flex-shrink: 0;
  height: 46px;
  aspect-ratio: 285 / 360;
  margin-right: 2px;
  background: linear-gradient(160deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  -webkit-mask: url('../images/logo-s.png') center / contain no-repeat;
          mask: url('../images/logo-s.png') center / contain no-repeat;
}

.logo-s-mark--lg {
  height: 66px;
}

/* "anmi Creation" text that follows the S mark */
.logo-rest {
  font-family: 'Dancing Script', cursive;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  letter-spacing: 0.01em;
  line-height: 1;
  margin-left: -2px;
}

.logo-rest--lg {
  font-size: 52px;
}

.nav-logo .logo-boutique {
  display: block;
  font-size: 7.5px;
  letter-spacing: 0.32em;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 1px;
}

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,248,243,0.75);
  transition: color 0.25s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold) !important;
  padding: 9px 22px !important;
  border-radius: 1px;
  transition: background 0.3s, color 0.3s !important;
}
.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--dark) !important;
}
.nav-cta::after { display: none !important; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ivory);
  transition: transform 0.3s;
}

/* Mobile Nav */
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--dark);
  z-index: 490;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.nav-mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.nav-mobile-overlay a {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--ivory);
  letter-spacing: 0.05em;
  transition: color 0.25s;
}

.nav-mobile-overlay a:hover { color: var(--gold); }

/* ── Container ────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* ── Section Base ─────────────────────────────────────────────────────────── */
section { position: relative; overflow: hidden; }

.section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 1px;
  transition: all 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-out);
}
.btn:hover::before { transform: translateX(0); }

.btn-gold {
  background: var(--gold);
  color: var(--dark);
  border: 1px solid var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-outline {
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(250,248,243,0.4);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-outline-gold:hover { background: var(--gold); color: var(--dark); }

.btn-arrow::after {
  content: '→';
  font-size: 14px;
  transition: transform 0.3s;
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ── WhatsApp Float ───────────────────────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.3s var(--spring);
}
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 28px; height: 28px; fill: white; }

/* ── Sticky Book Button (mobile) ──────────────────────────────────────────── */
.sticky-book {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 58px;
  background: var(--gold);
  color: var(--dark);
  text-align: center;
  padding: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
#hero {
  height: 100vh;
  min-height: 700px;
  background: var(--dark);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 860px;
  padding: 0 40px;
}

.hero-pre {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  opacity: 0;
  animation: heroPre 0.8s ease-out 2.2s forwards;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 300;
  color: var(--ivory);
  letter-spacing: 0.04em;
  line-height: 0.95;
  opacity: 0;
  animation: heroTitle 1.2s ease-out 2.6s forwards;
}

.hero-h1 em {
  font-style: italic;
  color: var(--gold);
  display: block;
}

.hero-h1 .hero-sub-word {
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 300;
  color: rgba(250,248,243,0.65);
  letter-spacing: 0.12em;
  display: block;
  margin-top: 16px;
}

.hero-desc {
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.8;
  color: rgba(250,248,243,0.6);
  max-width: 540px;
  margin: 28px auto 0;
  font-weight: 300;
  letter-spacing: 0.03em;
  opacity: 0;
  animation: heroDesc 1s ease-out 3.2s forwards;
}

.hero-ctas {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
  opacity: 0;
  animation: heroDesc 1s ease-out 3.7s forwards;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: heroDesc 1s ease-out 4.2s forwards;
}

.hero-scroll-hint span {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(250,248,243,0.4);
}

.scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 10px;
  position: relative;
}

.scroll-mouse::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: var(--gold);
  border-radius: 1px;
  animation: scrollMouse 1.5s infinite;
}

@keyframes heroPre   { to { opacity: 1; } }
@keyframes heroTitle { to { opacity: 1; } }
@keyframes heroDesc  { to { opacity: 1; } }
@keyframes scrollMouse {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(10px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1 — HER FIRST STITCH (Baby & Girls)
   ═══════════════════════════════════════════════════════════════════════════ */
#first-stitch {
  background: var(--cream);
  padding: var(--section-pad) 0;
}

.first-stitch-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.first-stitch-text .display-text {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 80px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.05;
  margin-bottom: 28px;
}

.first-stitch-text .display-text em {
  font-style: italic;
  color: var(--wine);
}

.first-stitch-text p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--grey);
  max-width: 440px;
  margin-bottom: 36px;
}

.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.service-pill {
  padding: 8px 18px;
  border: 1px solid rgba(107,41,55,0.25);
  border-radius: 30px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wine);
  background: rgba(107,41,55,0.04);
  transition: all 0.3s;
}
.service-pill:hover {
  background: var(--wine);
  color: var(--ivory);
  border-color: var(--wine);
}

.first-stitch-visual {
  position: relative;
  height: 580px;
}

.visual-card {
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
}

.visual-card-main {
  width: 65%;
  height: 420px;
  top: 0;
  right: 0;
  background: linear-gradient(145deg, #f5e6d0 0%, #e8c9a8 40%, #d4a88a 100%);
}

.visual-card-main::after {
  content: 'Baby & Girls Fashion';
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: rgba(42,37,32,0.8);
  letter-spacing: 0.05em;
}

.visual-card-accent {
  width: 48%;
  height: 260px;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, #d4c0e8 0%, #b899c8 60%, #9a76a8 100%);
}

.visual-card-accent::after {
  content: 'Pavadai & Ethnic Wear';
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
}

.visual-card-dot {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-60%);
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--dark);
  text-align: center;
  padding: 16px;
  line-height: 1.3;
}

/* Embroidery motif decorator */
.aari-motif {
  width: 80px;
  height: 80px;
  opacity: 0.15;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — GROWING UP TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */
#timeline {
  background: var(--dark-warm);
  padding: var(--section-pad) 0;
  overflow: hidden;
}

#timeline .section-label { color: var(--gold); }

.timeline-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.1;
  margin-bottom: 60px;
}
.timeline-headline em { font-style: italic; color: var(--gold); }

.timeline-scroll-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 40px;
  cursor: grab;
}
.timeline-scroll-wrap::-webkit-scrollbar { display: none; }
.timeline-scroll-wrap.dragging { cursor: grabbing; }

.timeline-track {
  display: flex;
  gap: 0;
  width: max-content;
  padding-inline: clamp(24px, 5vw, 80px);
}

.timeline-item {
  flex: 0 0 280px;
  padding: 40px 32px 32px;
  border-right: 1px solid rgba(201,168,76,0.15);
  position: relative;
  transition: background 0.4s;
}
.timeline-item:hover { background: rgba(201,168,76,0.04); }

.timeline-age {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  color: rgba(201,168,76,0.12);
  line-height: 1;
  margin-bottom: 12px;
}

.timeline-event {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 14px;
  line-height: 1.2;
}

.timeline-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--grey);
}

.timeline-fabric {
  width: 100%;
  height: 180px;
  margin-bottom: 24px;
  border-radius: 1px;
}

.fabric-baby    { background: linear-gradient(135deg, #fce4ec, #f8bbd0, #fce4ec); }
.fabric-girl    { background: linear-gradient(135deg, #ede7f6, #ce93d8, #ab47bc); }
.fabric-tween   { background: linear-gradient(135deg, #e8f5e9, #a5d6a7, #66bb6a); }
.fabric-teen    { background: linear-gradient(135deg, #e3f2fd, #90caf9, #42a5f5); }
.fabric-young   { background: linear-gradient(135deg, #fff8e1, #ffe082, #ffc107); }
.fabric-woman   { background: linear-gradient(135deg, #3d1420, #6b2937, #a84060); }

.timeline-connector {
  position: absolute;
  top: 24px;
  right: -1px;
  width: 1px;
  height: 40px;
  background: var(--gold);
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — THE WOMAN SHE BECOMES (Fashion)
   ═══════════════════════════════════════════════════════════════════════════ */
#fashion {
  background: var(--ivory);
  padding: var(--section-pad) 0;
}

.fashion-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  margin-bottom: 60px;
}
.fashion-headline em { font-style: italic; color: var(--wine); }

.fashion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 2px;
}

.fashion-panel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: none;
}

.fashion-panel:nth-child(1) { grid-row: span 2; aspect-ratio: unset; }
.fashion-panel:nth-child(4) { grid-column: span 2; aspect-ratio: 16/9; }

.fashion-panel-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-out);
}

.fashion-panel:hover .fashion-panel-bg { transform: scale(1.04); }

.fp-saree-blouse { background: linear-gradient(150deg, #f5e6ce, #e8c9a0, #c4a060); }
.fp-kurti        { background: linear-gradient(150deg, #fce4ec, #f48fb1, #e91e63); }
.fp-gown         { background: linear-gradient(150deg, #e8eaf6, #7986cb, #3949ab); }
.fp-anarkali     { background: linear-gradient(150deg, #e0f2f1, #4db6ac, #00796b); }
.fp-party        { background: linear-gradient(150deg, #fce4ec, #ce93d8, #7b1fa2); }
.fp-office       { background: linear-gradient(150deg, #37474f, #546e7a, #78909c); }

.fashion-panel-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,8,5,0.85) 0%, transparent 55%);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.4s;
}

.fashion-panel:hover .fashion-panel-info { opacity: 1; }

.fashion-panel-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 8px;
}

.fashion-process {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fashion-process span {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.fashion-process .dot {
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
}

.fashion-panel-label {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  opacity: 1;
  transition: opacity 0.4s;
}

.fashion-panel:hover .fashion-panel-label { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — AARI ATELIER (the centerpiece)
   ═══════════════════════════════════════════════════════════════════════════ */
#aari-atelier {
  background: #080504;
  padding: var(--section-pad) 0;
  position: relative;
}

.aari-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 20% 50%, var(--gold) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--wine) 0%, transparent 40%);
}

.aari-reveal-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.aari-text-col .aari-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.0;
  margin-bottom: 24px;
}
.aari-text-col .aari-headline em { color: var(--gold); font-style: italic; }

.aari-tagline {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(250,248,243,0.55);
  margin-bottom: 56px;
  max-width: 400px;
}

.aari-categories {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aari-cat {
  padding: 24px 0;
  border-bottom: 1px solid rgba(201,168,76,0.1);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 20px;
  align-items: start;
  transition: all 0.3s;
  cursor: none;
}

.aari-cat:hover { padding-left: 8px; }

.aari-cat-num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  font-style: italic;
  padding-top: 2px;
}

.aari-cat-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 6px;
}

.aari-cat-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
}

.aari-visual-col {
  position: sticky;
  top: 120px;
}

.aari-canvas-wrapper {
  width: 100%;
  aspect-ratio: 1;
  background: #0f0908;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

#aari-pattern-canvas {
  width: 100%;
  height: 100%;
}

.aari-canvas-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.aari-canvas-label p {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.6);
  margin-bottom: 8px;
}

.aari-canvas-label .gen-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gen-btn {
  padding: 7px 14px;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 30px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  transition: all 0.25s;
}
.gen-btn:hover,
.gen-btn.active { background: var(--gold); color: var(--dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5 — DESIGN YOUR OWN
   ═══════════════════════════════════════════════════════════════════════════ */
#design-own {
  background: var(--plum-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.design-own-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(61,26,53,0.8) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(107,41,55,0.4) 0%, transparent 50%);
}

.design-own-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.05;
  margin-bottom: 12px;
}
.design-own-headline em { font-style: italic; color: var(--gold); display: block; }

.design-own-sub {
  font-size: 15px;
  color: rgba(250,248,243,0.5);
  margin-bottom: 60px;
}

.configurator {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.config-step {
  display: none;
  animation: fadeStep 0.4s ease-out;
}
.config-step.active { display: block; }

@keyframes fadeStep {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.config-step-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.config-step-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 28px;
}

.config-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.config-option {
  padding: 11px 22px;
  border: 1px solid rgba(250,248,243,0.2);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(250,248,243,0.7);
  background: transparent;
  transition: all 0.25s;
  cursor: none;
}
.config-option:hover { border-color: var(--gold); color: var(--gold); }
.config-option.selected { background: var(--gold); color: var(--dark); border-color: var(--gold); }

.config-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.config-progress {
  flex: 1;
  height: 1px;
  background: rgba(250,248,243,0.1);
  position: relative;
  overflow: hidden;
}
.config-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--gold);
  transition: width 0.4s var(--ease-out);
}

.config-upload {
  margin-bottom: 28px;
}

.config-upload label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border: 1px dashed rgba(201,168,76,0.4);
  border-radius: 2px;
  cursor: none;
  transition: border-color 0.3s;
}
.config-upload label:hover { border-color: var(--gold); }

.config-upload-icon {
  width: 40px;
  height: 40px;
  background: rgba(201,168,76,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.config-upload label span {
  font-size: 13px;
  color: rgba(250,248,243,0.6);
}

.config-upload input { display: none; }

.config-textarea {
  width: 100%;
  background: rgba(250,248,243,0.05);
  border: 1px solid rgba(250,248,243,0.15);
  border-radius: 2px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ivory);
  resize: vertical;
  min-height: 100px;
  margin-bottom: 28px;
  transition: border-color 0.3s;
}
.config-textarea:focus { outline: none; border-color: var(--gold); }
.config-textarea::placeholder { color: rgba(250,248,243,0.3); }

.config-summary {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 2px;
  padding: 24px 28px;
  margin-bottom: 32px;
}

.config-summary p {
  font-size: 13px;
  color: rgba(250,248,243,0.6);
  margin-bottom: 8px;
  line-height: 1.6;
}

.config-summary p strong {
  color: var(--gold);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6 — LOOKBOOK
   ═══════════════════════════════════════════════════════════════════════════ */
#lookbook {
  background: #fefefe;
  padding: var(--section-pad) 0;
}

.lookbook-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.lb-filter {
  padding: 8px 20px;
  border: 1px solid rgba(42,37,32,0.15);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  cursor: none;
  transition: all 0.25s;
}
.lb-filter:hover,
.lb-filter.active {
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
}

.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 4px;
}

.lb-item {
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  cursor: none;
}

.lb-item:nth-child(1)  { grid-column: span 5; grid-row: span 6; }
.lb-item:nth-child(2)  { grid-column: span 4; grid-row: span 3; }
.lb-item:nth-child(3)  { grid-column: span 3; grid-row: span 3; }
.lb-item:nth-child(4)  { grid-column: span 4; grid-row: span 3; }
.lb-item:nth-child(5)  { grid-column: span 3; grid-row: span 3; }
.lb-item:nth-child(6)  { grid-column: span 3; grid-row: span 4; }
.lb-item:nth-child(7)  { grid-column: span 4; grid-row: span 4; }

.lb-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-out);
}

.lb-item:hover .lb-bg { transform: scale(1.06); }

.lb-bridal   { background: linear-gradient(145deg, #3d1420, #6b2937, #c4879a); }
.lb-aari     { background: linear-gradient(145deg, #1a0d18, #3d1a35, #9a76a8); }
.lb-blouse   { background: linear-gradient(145deg, #0d1a1a, #1a4040, #2e7d7d); }
.lb-girls    { background: linear-gradient(145deg, #1a1040, #2d2080, #5c6bc0); }
.lb-festive  { background: linear-gradient(145deg, #301000, #8b3a00, #c87a1e); }
.lb-party    { background: linear-gradient(145deg, #0d1a30, #1a3a6b, #4a7fbf); }
.lb-custom   { background: linear-gradient(145deg, #1a1010, #4a2020, #8b4040); }

.lb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,8,5,0.9) 0%, transparent 50%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: opacity 0.4s;
}

.lb-item:hover .lb-overlay { opacity: 1; }

.lb-cat {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.lb-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 4px;
}

.lb-detail {
  font-size: 11px;
  color: rgba(250,248,243,0.6);
}

.lb-aari-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: var(--dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 30px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7 — BEFORE / AFTER
   ═══════════════════════════════════════════════════════════════════════════ */
#before-after {
  background: var(--champagne);
  padding: var(--section-pad) 0;
}

.ba-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  text-align: center;
  margin-bottom: 12px;
}
.ba-headline em { font-style: italic; color: var(--wine); }

.ba-sub {
  text-align: center;
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 60px;
}

.ba-slider-wrap {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  border-radius: 2px;
  overflow: hidden;
  user-select: none;
  aspect-ratio: 4/3;
}

.ba-side {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}

.ba-before {
  background: linear-gradient(135deg, #e8d8c0, #d4c0a0, #c0a880);
}

.ba-after {
  background: linear-gradient(135deg, #3d1420, #6b2937, #a84060);
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s;
}

.ba-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ba-before .ba-label { color: rgba(42,37,32,0.5); }
.ba-after  .ba-label { color: var(--gold); }

.ba-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
}
.ba-before .ba-text { color: var(--charcoal); }
.ba-after  .ba-text { color: var(--ivory); }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--ivory);
  z-index: 10;
  cursor: ew-resize;
}

.ba-handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--ivory);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  gap: 4px;
}

.ba-arrow {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8 — BRIDAL CHAPTER
   ═══════════════════════════════════════════════════════════════════════════ */
#bridal {
  background: var(--wine-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.bridal-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(107,41,55,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(61,26,32,0.5) 0%, transparent 45%);
}

.bridal-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 86px);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.0;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.bridal-headline em { font-style: italic; color: var(--gold); display: block; }

.bridal-intro {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(250,248,243,0.6);
  max-width: 520px;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.bridal-journey {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
  margin-bottom: 64px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.bridal-journey::-webkit-scrollbar { display: none; }

.bridal-step {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 20px;
  position: relative;
}

.bridal-step::after {
  content: '';
  position: absolute;
  top: 16px;
  right: -1px;
  width: 100%;
  height: 1px;
  background: rgba(201,168,76,0.25);
}

.bridal-step:last-child::after { display: none; }

.bridal-step-num {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--gold);
  margin: 0 auto 12px;
  background: rgba(201,168,76,0.06);
}

.bridal-step-name {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(250,248,243,0.6);
  white-space: nowrap;
}

.bridal-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}

.bridal-service-item {
  padding: 32px 28px;
  background: rgba(250,248,243,0.04);
  border: 1px solid rgba(201,168,76,0.1);
  transition: all 0.3s;
}

.bridal-service-item:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.3);
}

.bridal-service-item h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 10px;
}

.bridal-service-item p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(250,248,243,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9 — FAMILY FASHION
   ═══════════════════════════════════════════════════════════════════════════ */
#family {
  background: var(--cream);
  padding: var(--section-pad) 0;
}

.family-headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  margin-bottom: 12px;
}
.family-headline em { font-style: italic; color: var(--wine); }

.family-sub {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 60px;
}

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

.family-card {
  aspect-ratio: 2/3;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.family-card:first-child { grid-column: span 2; aspect-ratio: 1; }

.family-card-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-out);
}

.family-card:hover .family-card-bg { transform: scale(1.05); }

.fc-mom-daughter { background: linear-gradient(150deg, #f5e6ce, #d4a88a, #a86850); }
.fc-sisters      { background: linear-gradient(150deg, #e8d4e8, #c4a0c4, #9a70a0); }
.fc-bridal-party { background: linear-gradient(150deg, #3d1420, #6b2937, #c4879a); }
.fc-family       { background: linear-gradient(150deg, #1a2840, #2d4a70, #5a88b8); }

.family-card-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,8,5,0.85) 0%, transparent 50%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.family-card-info h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 6px;
}

.family-card-info p {
  font-size: 12px;
  color: rgba(250,248,243,0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10 — CRAFTSMANSHIP
   ═══════════════════════════════════════════════════════════════════════════ */
#craftsmanship {
  background: var(--charcoal);
  padding: var(--section-pad) 0;
}

.craft-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.1;
  margin-bottom: 16px;
}
.craft-headline em { font-style: italic; color: var(--gold); }

.craft-tagline {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(250,248,243,0.5);
  line-height: 1.9;
  margin-bottom: 60px;
}
.craft-tagline span { display: block; }

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

.craft-item {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
}

.craft-item:nth-child(1) { grid-column: span 2; aspect-ratio: 16/10; }

.craft-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-out);
}

.craft-item:hover .craft-bg { transform: scale(1.04); }

.ci-measuring  { background: linear-gradient(135deg, #1a1208, #3d2d10, #6b4e20); }
.ci-cutting    { background: linear-gradient(135deg, #0d1820, #1a3040, #2e5070); }
.ci-stitching  { background: linear-gradient(135deg, #120808, #3d1420, #6b2937); }
.ci-embroidery { background: linear-gradient(135deg, #0d0818, #1a1035, #3d2060); }
.ci-finishing  { background: linear-gradient(135deg, #1a1208, #4d3a18, #8b6a30); }
.ci-quality    { background: linear-gradient(135deg, #080d08, #1a2d1a, #2e4d2e); }

.craft-item-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,8,5,0.8) 0%, transparent 60%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.craft-item-info h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 4px;
}

.craft-item-info p {
  font-size: 11px;
  color: rgba(250,248,243,0.55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11 — WHY CUSTOM TAILORING
   ═══════════════════════════════════════════════════════════════════════════ */
#why-custom {
  background: var(--ivory);
  padding: var(--section-pad) 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.why-left h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  margin-bottom: 24px;
}
.why-left h2 em { font-style: italic; color: var(--wine); }

.why-left p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--grey);
  margin-bottom: 36px;
}

.why-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.why-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(42,37,32,0.08);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
}

.why-item-word {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine);
  padding-top: 3px;
}

.why-item-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.why-item-text p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12 — FABRIC LIBRARY
   ═══════════════════════════════════════════════════════════════════════════ */
#fabrics {
  background: var(--champagne);
  padding: var(--section-pad) 0;
}

.fabric-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  margin-bottom: 60px;
}
.fabric-headline em { font-style: italic; color: var(--wine); }

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

.fabric-item {
  border-radius: 2px;
  overflow: hidden;
  cursor: none;
  position: relative;
}

.fabric-swatch {
  height: 200px;
  transition: transform 0.5s var(--ease-out);
}
.fabric-item:hover .fabric-swatch { transform: scale(1.05); }

.swatch-silk        { background: repeating-linear-gradient(45deg, #f5e6ce 0px, #f5e6ce 2px, #e8d0a0 2px, #e8d0a0 4px); }
.swatch-raw-silk    { background: repeating-linear-gradient(-45deg, #d4b880 0px, #d4b880 1px, #c4a060 1px, #c4a060 3px); }
.swatch-velvet      { background: radial-gradient(ellipse at 30% 30%, #6b2937, #3d1420); }
.swatch-georgette   { background: repeating-linear-gradient(90deg, #f0e8f0 0px, #f0e8f0 1px, #e0d0e8 1px, #e0d0e8 2px); }
.swatch-satin       { background: linear-gradient(135deg, #fce4ec, #f48fb1, #e91e63, #f48fb1, #fce4ec); }
.swatch-net         { background: repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(200,168,100,0.3) 8px, rgba(200,168,100,0.3) 9px), repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(200,168,100,0.3) 8px, rgba(200,168,100,0.3) 9px), #fef9f0; }
.swatch-cotton      { background: repeating-linear-gradient(45deg, #f5f5dc 0px, #f5f5dc 4px, #e8e0c8 4px, #e8e0c8 8px); }
.swatch-brocade     { background: repeating-radial-gradient(circle at 10px 10px, rgba(201,168,76,0.4) 4px, transparent 4px), linear-gradient(135deg, #3d1420, #6b2937); background-size: 20px 20px, 100% 100%; }

.fabric-info {
  padding: 16px 16px 20px;
  background: white;
}

.fabric-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.fabric-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fabric-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: rgba(42,37,32,0.06);
  color: var(--grey);
  border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 13 — CUSTOMER JOURNEY
   ═══════════════════════════════════════════════════════════════════════════ */
#journey {
  background: var(--plum-dark);
  padding: var(--section-pad) 0;
}

.journey-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  color: var(--ivory);
  text-align: center;
  margin-bottom: 80px;
}
.journey-headline em { font-style: italic; color: var(--gold); }

.journey-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

.journey-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}

.journey-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
}

.journey-step-num {
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  color: var(--gold);
  margin: 0 auto 24px;
  background: var(--plum-dark);
  position: relative;
  z-index: 1;
}

.journey-step-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 12px;
}

.journey-step-desc {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(250,248,243,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 14 — TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */
#testimonials {
  background: var(--ivory);
  padding: var(--section-pad) 0;
}

.testimonial-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 60px;
}
.testimonial-headline em { font-style: italic; color: var(--wine); }

.testimonial-track-wrap {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s var(--ease-inout);
}

.testimonial-item {
  flex: 0 0 100%;
  padding: 0 40px;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.45;
  margin-bottom: 32px;
  max-width: 860px;
}

.testimonial-quote::before {
  content: '"';
  font-size: 80px;
  color: var(--gold);
  opacity: 0.3;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 8px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}
.testimonial-detail {
  font-size: 12px;
  color: var(--grey);
  margin-top: 2px;
}

.testimonial-dots {
  display: flex;
  gap: 10px;
  margin-top: 40px;
}

.t-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(42,37,32,0.15);
  border: none;
  transition: background 0.3s, transform 0.3s;
}
.t-dot.active { background: var(--wine); transform: scale(1.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 15 — INSTAGRAM STRIP
   ═══════════════════════════════════════════════════════════════════════════ */
#instagram {
  background: var(--charcoal-lt);
  padding: var(--section-pad) 0;
}

.insta-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 8px;
}
.insta-headline em { font-style: italic; color: var(--gold); }

.insta-handle {
  font-size: 13px;
  color: var(--grey-lt);
  margin-bottom: 48px;
}

.insta-strip {
  display: flex;
  gap: 4px;
  overflow-x: hidden;
}

.insta-strip-inner {
  display: flex;
  gap: 4px;
  animation: stripScroll 30s linear infinite;
}

@keyframes stripScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.insta-strip:hover .insta-strip-inner { animation-play-state: paused; }

.insta-tile {
  flex: 0 0 240px;
  height: 240px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.insta-tile-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
}
.insta-tile:hover .insta-tile-bg { transform: scale(1.05); }

.it-1  { background: linear-gradient(135deg, #3d1420, #c4879a); }
.it-2  { background: linear-gradient(135deg, #1a0d18, #9a76a8); }
.it-3  { background: linear-gradient(135deg, #0d1a1a, #4db6ac); }
.it-4  { background: linear-gradient(135deg, #301000, #c87a1e); }
.it-5  { background: linear-gradient(135deg, #1a1040, #5c6bc0); }
.it-6  { background: linear-gradient(135deg, #080504, #c9a84c); }
.it-7  { background: linear-gradient(135deg, #1a2840, #4a7fbf); }
.it-8  { background: linear-gradient(135deg, #200d0d, #8b4040); }

.insta-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12,8,5,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.insta-tile:hover .insta-tile-overlay { opacity: 1; }

.insta-tile-overlay svg {
  width: 32px;
  height: 32px;
  fill: white;
}

.insta-cta-row {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 16 — LOCATION / CONTACT
   ═══════════════════════════════════════════════════════════════════════════ */
#contact {
  background: var(--cream);
  padding: var(--section-pad) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-left h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  margin-bottom: 12px;
}
.contact-left h2 em { font-style: italic; color: var(--wine); }

.contact-left p {
  font-size: 15px;
  color: var(--grey);
  line-height: 1.8;
  margin-bottom: 40px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ci-icon {
  width: 40px;
  height: 40px;
  background: rgba(107,41,55,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--wine);
  font-size: 16px;
}

.ci-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.ci-text span {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
}

.contact-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Enquiry Form */
.enquiry-form {
  background: white;
  border-radius: 4px;
  padding: 48px;
  box-shadow: 0 2px 40px rgba(42,37,32,0.06);
}

.form-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.form-sub {
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(42,37,32,0.15);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  background: white;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--wine);
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8178' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.form-field textarea { min-height: 90px; resize: vertical; }

.form-upload {
  border: 1px dashed rgba(42,37,32,0.2);
  border-radius: 2px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
}
.form-upload:hover { border-color: var(--wine); }
.form-upload input { display: none; }
.form-upload p { font-size: 13px; color: var(--grey); }
.form-upload p span { color: var(--wine); }

.form-submit-wrap {
  margin-top: 24px;
}

.form-submit-wrap .btn {
  width: 100%;
  justify-content: center;
}

.form-success {
  display: none;
  text-align: center;
  padding: 40px 0;
}

.form-success h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.form-success p {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
#faq {
  background: var(--champagne);
  padding: var(--section-pad) 0;
}

.faq-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 48px;
}
.faq-headline em { font-style: italic; color: var(--wine); }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
}

.faq-item {
  border-bottom: 1px solid rgba(42,37,32,0.1);
  padding: 22px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: none;
}

.faq-question h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.3;
}

.faq-toggle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid rgba(42,37,32,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--wine);
  transition: all 0.3s;
  line-height: 1;
}

.faq-item.open .faq-toggle {
  background: var(--wine);
  color: white;
  border-color: var(--wine);
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-inout), padding 0.3s;
}

.faq-item.open .faq-answer { max-height: 300px; padding-top: 12px; }

.faq-answer p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--grey);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE QUIZ WIDGET (Floating)
   ═══════════════════════════════════════════════════════════════════════════ */
.quiz-trigger {
  position: fixed;
  left: 60px;
  bottom: 30px;
  background: var(--plum);
  color: var(--ivory);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 350;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}
.quiz-trigger:hover { background: var(--wine); border-color: var(--wine); }

.quiz-modal {
  position: fixed;
  bottom: 90px;
  left: 60px;
  width: 340px;
  background: var(--plum-dark);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  padding: 32px;
  z-index: 350;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease-out);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.quiz-modal.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.quiz-modal h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 6px;
}

.quiz-modal p {
  font-size: 12px;
  color: var(--grey-lt);
  margin-bottom: 24px;
  line-height: 1.6;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.quiz-opt {
  padding: 12px 16px;
  border: 1px solid rgba(250,248,243,0.15);
  border-radius: 2px;
  font-size: 13px;
  color: rgba(250,248,243,0.7);
  background: transparent;
  text-align: left;
  cursor: none;
  transition: all 0.25s;
}
.quiz-opt:hover { border-color: var(--gold); color: var(--gold); }
.quiz-opt.selected { background: rgba(201,168,76,0.15); border-color: var(--gold); color: var(--gold); }

.quiz-result {
  display: none;
  padding: 16px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 4px;
}

.quiz-result h4 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
}

.quiz-result p {
  font-size: 12px;
  color: var(--grey-lt);
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
#footer {
  background: var(--dark);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(201,168,76,0.1);
}

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

.footer-brand .logo {
  margin-bottom: 6px;
}

/* footer logo size handled by .logo-rest--lg */

.footer-brand .logo .logo-divider {
  display: block;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin: 4px 0 2px;
  line-height: 1;
}

.footer-brand .logo .logo-service {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-brand .logo-sub {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer-brand p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--grey);
  max-width: 280px;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(250,248,243,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  transition: all 0.3s;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 12px; }

.footer-col a {
  font-size: 13px;
  color: var(--grey);
  transition: color 0.25s;
}
.footer-col a:hover { color: var(--ivory); }

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(250,248,243,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: 12px;
  color: rgba(138,129,120,0.6);
}

.footer-bottom a {
  font-size: 12px;
  color: rgba(138,129,120,0.6);
  transition: color 0.25s;
}
.footer-bottom a:hover { color: var(--ivory); }

.footer-credit {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(138,129,120,0.6);
}
.footer-credit a { color: var(--gold); font-weight: 600; transition: color 0.25s; }
.footer-credit a:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit sup { font-size: 0.65em; margin-left: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGE — HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.inner-hero {
  height: 55vh;
  min-height: 500px;
  background: var(--dark);
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
  position: relative;
}

.inner-hero-bg {
  position: absolute;
  inset: 0;
}

.inner-hero-content {
  position: relative;
  z-index: 1;
}

.inner-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.inner-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.05;
  margin-bottom: 16px;
}
.inner-hero h1 em { font-style: italic; color: var(--gold); }

.inner-hero p {
  font-size: 16px;
  color: rgba(250,248,243,0.6);
  max-width: 540px;
  line-height: 1.8;
}

/* ── Inner Page Content ───────────────────────────────────────────────────── */
.inner-content {
  background: var(--ivory);
  padding: var(--section-pad) 0;
}

.inner-intro {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.85;
  color: var(--charcoal);
  margin-bottom: 60px;
  font-family: var(--font-display);
  font-weight: 300;
}

.inner-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 80px;
}

.inner-service-card {
  padding: 36px 28px;
  background: white;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
}
.inner-service-card:hover { border-bottom-color: var(--wine); }

.isc-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 12px;
}

.isc-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.isc-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.gallery-masonry {
  columns: 3;
  column-gap: 4px;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  cursor: none;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.gallery-item:hover img { transform: scale(1.04); }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(12,8,5,0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-inner {
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}

.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(250,248,243,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  font-size: 20px;
  cursor: none;
  transition: all 0.3s;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */
.text-gold   { color: var(--gold); }
.text-wine   { color: var(--wine); }
.text-ivory  { color: var(--ivory); }
.text-grey   { color: var(--grey); }

.bg-dark     { background: var(--dark); }
.bg-ivory    { background: var(--ivory); }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }

.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .first-stitch-inner  { grid-template-columns: 1fr; gap: 48px; }
  .first-stitch-visual { height: 360px; }
  .visual-card-dot     { display: none; }
  .aari-reveal-wrapper { grid-template-columns: 1fr; }
  .aari-visual-col     { position: static; }
  .fashion-grid        { grid-template-columns: repeat(2, 1fr); }
  .fashion-panel:nth-child(1) { grid-row: auto; }
  .fashion-panel:nth-child(4) { grid-column: auto; aspect-ratio: 3/4; }
  .bridal-services     { grid-template-columns: 1fr 1fr; }
  .footer-grid         { grid-template-columns: 1fr 1fr; }
  .family-grid         { grid-template-columns: repeat(2, 1fr); }
  .family-card:first-child { grid-column: span 2; }
  .craft-grid          { grid-template-columns: repeat(2, 1fr); }
  .craft-item:nth-child(1) { grid-column: auto; aspect-ratio: 3/4; }
  .inner-services      { grid-template-columns: 1fr 1fr; }
  .faq-grid            { grid-template-columns: 1fr; }
  .why-grid            { grid-template-columns: 1fr; }
  .contact-grid        { grid-template-columns: 1fr; }
  .journey-steps       { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .journey-steps::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #nav               { padding: 18px 24px; }
  #nav.scrolled      { padding: 14px 24px; }
  .nav-links         { display: none; }
  .nav-hamburger     { display: flex; }
  #scroll-thread     { display: none; }
  .cursor, .cursor-follower { display: none; }
  body               { cursor: auto; }
  button             { cursor: pointer; }
  a                  { cursor: pointer; }

  .hero-content      { padding: 0 24px; }

  .timeline-track    { padding-inline: 24px; }
  .timeline-item     { flex: 0 0 240px; }

  .fashion-grid      { grid-template-columns: 1fr; gap: 2px; }
  .fashion-panel:nth-child(1), .fashion-panel:nth-child(4) {
    grid-row: auto; grid-column: auto; aspect-ratio: 3/4;
  }

  .lookbook-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
  }
  .lb-item:nth-child(1) { grid-column: span 2; grid-row: span 3; }
  .lb-item:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .lb-item:nth-child(2), .lb-item:nth-child(3),
  .lb-item:nth-child(5), .lb-item:nth-child(6), .lb-item:nth-child(7) {
    grid-column: span 1; grid-row: span 2;
  }

  .bridal-services { grid-template-columns: 1fr; }

  .journey-steps { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .fabric-grid { grid-template-columns: repeat(2, 1fr); }
  .family-grid { grid-template-columns: 1fr; }
  .family-card:first-child { grid-column: auto; }
  .craft-grid  { grid-template-columns: 1fr 1fr; }
  .craft-item:nth-child(1) { grid-column: span 2; }
  .inner-services { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .enquiry-form { padding: 28px 20px; }

  .quiz-trigger { left: 24px; }
  .quiz-modal   { left: 24px; right: 24px; width: auto; bottom: 80px; }

  .sticky-book { display: block; }
  .wa-float    { bottom: 90px; }

  .aari-canvas-wrapper { aspect-ratio: 4/3; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: center; }
  .testimonial-item { padding: 0 16px; }
  .bridal-services { grid-template-columns: 1fr; }
  .journey-steps   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REAL WORK PHOTOGRAPHY — studio photos replace the placeholder gradients
   ═══════════════════════════════════════════════════════════════════════════ */

/* Her First Stitch */
.visual-card-main,
.visual-card-accent { background-size: cover; background-position: center; box-shadow: 0 30px 60px -20px rgba(12,8,5,0.45); }
.visual-card-main   { background-image: linear-gradient(to top, rgba(12,8,5,0.55), transparent 45%), url('../images/work/pink-ruffle-birthday-gown.jpg'); background-position: center 25%; }
.visual-card-accent { background-image: linear-gradient(to top, rgba(12,8,5,0.6), transparent 55%), url('../images/work/yellow-pattu-pavadai.jpg'); background-position: center 30%; }
.visual-card-main::after   { color: var(--ivory); }
.visual-card-accent::after { content: 'Pavadai & Ethnic Wear'; }

/* The Woman She Becomes */
.fashion-panel-bg { background-size: cover !important; background-position: center !important; }
.fp-saree-blouse { background-image: url('../images/work/rose-gold-bridal-aari-blouse.jpg'); }
.fp-kurti        { background-image: url('../images/work/navy-cutwork-back-blouse.jpg'); }
.fp-gown         { background-image: url('../images/work/navy-aari-sleeves.jpg'); }
.fp-anarkali     { background-image: url('../images/work/purple-silk-aari-blouse.jpg'); }
.fp-party        { background-image: url('../images/work/rose-tissue-blouse.jpg'); }
.fp-office       { background-image: url('../images/work/grey-aari-blouse.jpg'); }
.fashion-panel-label { z-index: 2; }

/* Lookbook */
.lb-bg { background-size: cover !important; background-position: center !important; }
.lb-bridal  { background-image: url('../images/work/red-bridal-aari-blouse.jpg'); }
.lb-aari    { background-image: url('../images/work/pink-bridal-aari-blouse.jpg'); }
.lb-blouse  { background-image: url('../images/work/ivory-gold-blouse.jpg'); }
.lb-girls   { background-image: url('../images/work/peacock-feather-gown.jpg'); background-position: center 25% !important; }
.lb-festive { background-image: url('../images/work/green-silk-aari-blouse.jpg'); }
.lb-party   { background-image: url('../images/work/royal-blue-aari-blouse.jpg'); }
.lb-custom  { background-image: url('../images/work/navy-red-blouse-collection.jpg'); }
.lb-overlay { opacity: 1; background: linear-gradient(to top, rgba(12,8,5,0.82) 0%, transparent 42%); }
.lb-overlay .lb-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.lb-item:hover .lb-overlay .lb-detail { max-height: 40px; }

/* Before / After */
.ba-before { background: linear-gradient(to top, rgba(12,8,5,0.7), transparent 50%), url('../images/work/blouse-pattern-cutting.jpg') left center/cover; }
.ba-after  { background: linear-gradient(to top, rgba(12,8,5,0.7), transparent 50%), url('../images/work/red-bridal-aari-blouse.jpg') center/cover; }
.ba-before .ba-label { color: var(--gold-light); }
.ba-before .ba-text  { color: var(--ivory); }

/* Bridal */
.bridal-bg {
  background:
    linear-gradient(100deg, rgba(12,8,5,0.96) 0%, rgba(26,8,14,0.88) 45%, rgba(61,20,32,0.55) 100%),
    url('../images/work/rose-gold-bridal-aari-blouse.jpg') right center/cover;
}

/* Family */
.family-card-bg { background-size: cover !important; background-position: center !important; }
.fc-mom-daughter { background-image: linear-gradient(to top, rgba(12,8,5,0.55), transparent 50%), url('../images/work/mom-daughter-pattu-gown-pair.jpg'); background-position: center 30% !important; }
.fc-sisters      { background-image: linear-gradient(to top, rgba(12,8,5,0.55), transparent 50%), url('../images/work/sisters-pattu-pavadai.jpg'); background-position: center 30% !important; }
.fc-bridal-party { background-image: linear-gradient(to top, rgba(12,8,5,0.55), transparent 50%), url('../images/work/navy-red-blouse-collection.jpg'); }
.fc-family       { background-image: linear-gradient(to top, rgba(12,8,5,0.55), transparent 50%), url('../images/work/red-family-combo.jpg'); background-position: center 35% !important; }

/* Craftsmanship */
.craft-bg { background-size: cover !important; background-position: center !important; }
.ci-measuring  { background-image: url('../images/work/pink-motif-aari-work.jpg'); }
.ci-cutting    { background-image: url('../images/work/blouse-pattern-cutting.jpg'); background-position: left center !important; }
.ci-stitching  { background-image: url('../images/work/ivory-blouse-pair.jpg'); }
.ci-embroidery { background-image: url('../images/work/magenta-aari-blouse.jpg'); }
.ci-finishing  { background-image: url('../images/work/lavender-stone-neckline.jpg'); }
.ci-quality    { background-image: url('../images/work/peach-tissue-aari-blouse.jpg'); }

/* Instagram strip */
img.insta-tile-bg { object-fit: cover; }

/* Age timeline tiles — a real piece for each stage of life */
.timeline-fabric { background-size: cover !important; background-position: center !important; }
.fabric-baby  { background-image: url('../images/work/sm/baby-pattu-pavadai-lavender.jpg'); background-position: center 30% !important; }
.timeline-item:nth-child(2) .fabric-baby { background-image: url('../images/work/sm/rainbow-tutu-baby-frock.jpg'); }
.fabric-girl  { background-image: url('../images/work/sm/teal-pattu-pavadai.jpg'); background-position: center 30% !important; }
.fabric-tween { background-image: url('../images/work/sm/maroon-half-saree-set.jpg'); }
.fabric-teen  { background-image: url('../images/work/sm/rose-aari-blouse.jpg'); background-position: center 35% !important; }
.fabric-young { background-image: url('../images/work/sm/rose-tissue-blouse.jpg'); }
.fabric-woman { background-image: url('../images/work/sm/rose-gold-bridal-aari-blouse.jpg'); }

/* Fabric library: real photos where we have that fabric, woven textures for the rest */
.swatch-silk    { background: url('../images/work/sm/pink-silk-saree.jpg') center/cover; }
.swatch-net     { background: url('../images/work/sm/net-zari-embroidery.jpg') center/cover; }
.swatch-brocade { background: url('../images/work/sm/navy-orange-silk-blouse-2.jpg') center/cover; }
/* the rest come from our own work in that fabric */
.swatch-raw-silk  { background: url('../images/work/sm/orange-aari-blouse.jpg') center/cover; }
.swatch-velvet    { background: url('../images/work/sm/orange-pavadai-velvet-blouse.jpg') 50% 24%/190% auto no-repeat; }  /* zoomed onto the royal blue velvet blouse */
.swatch-georgette { background: url('../images/work/sm/pink-top-mint-floral-lehenga.jpg') center 72%/cover; }
.swatch-satin     { background: url('../images/work/sm/black-satin-family-gowns.jpg') center 40%/cover; }
.swatch-cotton    { background: url('../images/work/sm/floral-print-frock.jpg') center 45%/cover; }

/* Service cards with a photo on top */
.inner-service-card { overflow: hidden; }
.isc-img {
  display: block;
  width: calc(100% + 56px);
  max-width: none;
  height: 150px;
  margin: -36px -28px 22px;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.inner-service-card:hover .isc-img { transform: scale(1.04); }

/* Inner page heroes — photo with a dark wash so the copy stays readable */
.inner-hero-bg.ph { background-size: cover !important; background-position: center !important; }
.inner-hero-bg.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12,8,5,0.95) 0%, rgba(12,8,5,0.78) 50%, rgba(12,8,5,0.4) 100%);
}

/* ── Hero floating photo cards ───────────────────────────────────────────── */
.hero-float {
  position: absolute;
  z-index: 5;
  width: clamp(170px, 15vw, 240px);
  aspect-ratio: 3/4;
  padding: 8px 8px 34px;
  background: var(--ivory);
  border-radius: 4px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
  opacity: 0;
  animation: heroFloatIn 1.2s var(--ease-out) 3.2s forwards, heroFloat 7s ease-in-out 4.4s infinite;
}
.hero-float img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.hero-float span {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-family: var(--font-script);
  font-size: 17px;
  color: var(--wine);
}
.hero-float-left  { left: 5vw;  top: 20%;    --r: -7deg; }
.hero-float-right { right: 5vw; bottom: 26%; --r: 6deg; animation-delay: 3.5s, 5s; }

@keyframes heroFloatIn {
  from { opacity: 0;    transform: translateY(40px) rotate(var(--r)); }
  to   { opacity: 0.92; transform: translateY(0)    rotate(var(--r)); }
}
@keyframes heroFloat {
  0%, 100% { opacity: 0.92; transform: translateY(0)     rotate(var(--r)); }
  50%      { opacity: 0.92; transform: translateY(-14px) rotate(calc(var(--r) * 0.6)); }
}

/* ── Fresh Off The Hoop ──────────────────────────────────────────────────── */
#fresh {
  background: var(--cream);
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.fresh-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.fresh-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1;
  color: var(--charcoal);
}
.fresh-headline em { font-style: italic; color: var(--wine); }
.fresh-sub { max-width: 340px; font-size: 14px; line-height: 1.8; color: var(--grey); }

.fresh-reel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 max(20px, calc((100vw - var(--container)) / 2 + 20px)) 24px;
  scroll-padding-left: max(20px, calc((100vw - var(--container)) / 2 + 20px));
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.fresh-reel::-webkit-scrollbar { height: 3px; }
.fresh-reel::-webkit-scrollbar-thumb { background: var(--gold); }

.fresh-card {
  flex: 0 0 clamp(240px, 26vw, 320px);
  scroll-snap-align: start;
}
.fresh-img {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--champagne);
}
.fresh-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.fresh-card:hover .fresh-img img { transform: scale(1.07); }
.fresh-tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(250,248,243,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.fresh-num {
  position: absolute;
  bottom: 10px; right: 16px;
  font-family: var(--font-display);
  font-size: 54px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: rgba(250,248,243,0.9);
  text-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.fresh-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.fresh-card p { font-size: 13px; color: var(--grey); }
.fresh-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }

/* ── Gallery page (real photos, masonry) ─────────────────────────────────── */
.work-grid {
  columns: 3 280px;
  column-gap: 14px;
}
.work-item {
  break-inside: avoid;
  margin-bottom: 14px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--champagne);
  cursor: none;
}
.work-item img { width: 100%; height: auto; transition: transform 0.7s var(--ease-out); }
.work-item:hover img { transform: scale(1.05); }
.work-item.is-hidden { display: none; }

/* Lightbox photo */
.lightbox-photo { position: relative; margin: 0; text-align: center; }
.lightbox-photo img { max-width: 90vw; max-height: 78vh; width: auto; margin-inline: auto; border-radius: 6px; }
.lightbox-photo figcaption { padding-top: 14px; }

/* ── Our Story page ──────────────────────────────────────────────────────── */
.story-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story-collage { position: relative; height: 540px; }
.story-collage img { position: absolute; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(12,8,5,0.45); }
.story-main { top: 0; right: 0; width: 72%; height: 100%; object-position: center 25%; }
.story-sub  { left: 0; bottom: 40px; width: 46%; height: 220px; object-position: left center; border: 6px solid var(--cream); }
.story-badge {
  position: absolute;
  top: 40px; left: 6%;
  width: 116px; height: 116px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.25;
}
.story-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 80px;
}
.story-strip figure { margin: 0; }
.story-strip img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; }
.story-strip figcaption { padding-top: 10px; font-size: 13px; color: var(--grey); }

@media (max-width: 900px) {
  .story-intro { grid-template-columns: 1fr; gap: 40px; }
  .story-collage { height: 440px; }
  .story-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── SEO landing pages ───────────────────────────────────────────────────── */
.seo-crumbs { font-size: 11px; letter-spacing: 0.12em; color: rgba(250,248,243,0.55); margin-bottom: 18px; }
.seo-crumbs a { color: var(--gold); }
.seo-crumbs span { margin: 0 6px; opacity: 0.5; }
.seo-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.seo-section { padding: var(--section-pad) 0; }
.seo-section--light { background: var(--ivory); }
.seo-section--cream { background: var(--cream); }
.seo-section--dark  { background: var(--dark-warm); color: var(--ivory); }

.seo-h2, .seo-h2-light, .seo-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 36px;
  color: var(--charcoal);
}
.seo-h2-light { color: var(--ivory); }
.seo-h2 em { font-style: italic; color: var(--wine); }

.seo-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.seo-prose h2 { margin-bottom: 24px; }
.seo-prose p:not(.section-label) { font-size: 16px; line-height: 1.85; color: var(--grey); margin-bottom: 18px; }

.seo-photo-stack { position: relative; height: 520px; }
.seo-photo { position: absolute; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(12,8,5,0.45); }
.seo-photo--0 { top: 0; right: 0; width: 82%; height: 78%; }
.seo-photo--1 { left: 0; bottom: 0; width: 52%; height: 44%; border: 6px solid var(--ivory); }

.seo-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.seo-gallery figure { margin: 0; }
.seo-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; }
.seo-gallery figcaption { padding-top: 10px; font-size: 13px; line-height: 1.5; color: var(--grey); }

.seo-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(42,37,32,0.1); }
.seo-why h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--charcoal); margin-bottom: 8px; }
.seo-why p { font-size: 14px; line-height: 1.7; color: var(--grey); }

.seo-faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.seo-areas-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dark); margin: 8px 0 14px; }
.seo-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-areas li { padding: 7px 14px; border: 1px solid rgba(154,120,48,0.35); border-radius: 999px; font-size: 13px; color: var(--charcoal); }
.seo-faq details { border-bottom: 1px solid rgba(42,37,32,0.12); padding: 20px 0; }
.seo-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--charcoal);
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: '+'; color: var(--gold-dark); font-size: 24px; line-height: 1; transition: transform 0.3s; }
.seo-faq details[open] summary::after { transform: rotate(45deg); }
.seo-faq details p { padding-top: 12px; font-size: 15px; line-height: 1.8; color: var(--grey); }

.seo-cta { text-align: center; }
.seo-cta > .container > p { color: rgba(250,248,243,0.6); font-size: 14px; }
.seo-related { margin-top: 64px; padding-top: 36px; border-top: 1px solid rgba(250,248,243,0.08); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.seo-related p { width: 100%; font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.seo-related a { font-size: 14px; color: rgba(250,248,243,0.7); transition: color 0.25s; }
.seo-related a:hover { color: var(--gold-light); }

/* "Order from home" — sample blouse / phone measurements + free courier */
.courier { padding: var(--section-pad) 0; background: var(--champagne); }
.courier-head { max-width: 760px; }
.courier-h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 54px); font-weight: 300; line-height: 1.1; color: var(--charcoal); margin-bottom: 22px; }
.courier-h2 em { font-style: italic; color: var(--wine); }
.courier-lead { font-size: 16px; line-height: 1.85; color: var(--charcoal-lt); }
.courier-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 56px 0 0; padding: 0; }
.courier-step { padding: 30px 26px; background: var(--ivory); border: 1px solid rgba(154,120,48,0.18); border-radius: 18px; }
.courier-num { display: block; font-family: var(--font-display); font-size: 38px; line-height: 1; color: var(--gold-dark); margin-bottom: 18px; }
.courier-step h3 { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--charcoal); margin-bottom: 10px; }
.courier-step p { font-size: 14px; line-height: 1.75; color: var(--grey); }
.courier-foot { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; margin-top: 48px; padding-top: 44px; border-top: 1px solid rgba(42,37,32,0.12); }
.courier-tips h3 { font-family: var(--font-display); font-size: 25px; font-weight: 400; color: var(--charcoal); margin-bottom: 16px; }
.courier-tips li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 15px; line-height: 1.7; color: var(--charcoal-lt); }
.courier-tips li::before { content: '✦'; position: absolute; left: 0; top: 1px; font-size: 11px; color: var(--gold-dark); }
.courier-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.courier-perks li { padding: 8px 15px; border-radius: 999px; background: var(--wine); color: var(--ivory); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.courier-perks li:first-child { background: var(--gold); color: var(--dark); }
.courier-note { font-size: 13px; line-height: 1.7; color: var(--grey); margin-bottom: 22px; }
.courier-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
html[lang="ta"] .courier-step h3 { font-size: 19px; line-height: 1.45; }

@media (max-width: 1000px) { .courier-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .courier-steps, .courier-foot { grid-template-columns: 1fr; }
  .courier-foot { gap: 32px; }
  .courier-step { padding: 24px 20px; }
}

/* Footer "areas we serve" links */
.footer-areas { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(250,248,243,0.06); }
.footer-areas h4 { margin-bottom: 14px; }
.footer-areas nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-areas a { font-size: 13px; color: rgba(194,189,181,0.75); transition: color 0.25s; }
.footer-areas a:hover { color: var(--gold-light); }

@media (max-width: 900px) {
  .seo-intro, .seo-faq-wrap { grid-template-columns: 1fr; gap: 40px; }
  .seo-photo-stack { height: 400px; }
  .seo-gallery, .seo-why { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SANMI STUDIO — floating button + tools panel
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-fab {
  position: fixed;
  right: 26px;
  bottom: 104px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: var(--dark);
  box-shadow: 0 14px 36px -10px rgba(201,168,76,0.7);
  cursor: pointer;
  animation: fabIn 0.8s var(--spring) 1s both;
}
.studio-fab::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--gold-light);
  opacity: 0;
  animation: fabPulse 2.6s ease-out 1.8s infinite;
}
.studio-fab:hover { transform: translateY(-2px); }
.studio-fab-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold-light);
  display: grid; place-items: center;
}
.studio-fab-icon svg { width: 22px; height: 22px; }
.studio-fab-text { display: flex; flex-direction: column; text-align: left; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.05; }
.studio-fab-text small { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; }
@keyframes fabIn    { from { opacity: 0; transform: translateY(30px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes fabPulse { 0% { opacity: 0.8; transform: scale(0.96); } 70%, 100% { opacity: 0; transform: scale(1.18); } }

.studio {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8,5,3,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.35s;
}
.studio[hidden] { display: none; }
.studio.open { opacity: 1; }
.studio, .studio * { cursor: auto; }
.studio button, .studio label, .studio a, .studio select { cursor: pointer; }
.studio input[type=number], .studio input[type=text] { cursor: text; }

.studio-shell {
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: radial-gradient(circle at 85% 0%, rgba(201,168,76,0.12), transparent 40%), var(--dark-warm);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 22px;
  padding: 28px 32px 32px;
  color: var(--ivory);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s var(--ease-out);
}
.studio.open .studio-shell { transform: none; }
.studio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.studio-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.studio-head h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 300; line-height: 1.1; }
.studio-close { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(250,248,243,0.2); color: var(--ivory); font-size: 24px; line-height: 1; }
.studio-close:hover { background: rgba(250,248,243,0.08); }

.studio-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; scrollbar-width: none; }
.studio-tabs button {
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(250,248,243,0.14);
  color: rgba(250,248,243,0.7);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.25s;
}
.studio-tabs button b { color: var(--gold); font-weight: 700; margin-right: 6px; font-size: 11px; }
.studio-tabs button.active { background: var(--ivory); color: var(--dark); border-color: var(--ivory); }
.studio-panel { display: none; }
.studio-panel.active { display: grid; animation: panelIn 0.35s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.studio .btn { font-size: 11px; padding: 14px 22px; }
.sd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* 01 designer */
.studio-panel[data-panel=design] { grid-template-columns: minmax(280px, 1fr) 1.15fr; gap: 32px; }
.sd-stage {
  position: relative;
  background: radial-gradient(circle at 50% 35%, rgba(250,248,243,0.09), rgba(250,248,243,0.02) 70%);
  border: 1px solid rgba(250,248,243,0.08);
  border-radius: 18px;
  padding: 52px 24px 20px;
  display: flex; flex-direction: column; align-items: center;
}
#sd-svg { width: 100%; max-width: 380px; height: auto; }
.sd-summary { margin-top: 12px; text-align: center; font-size: 13px; line-height: 1.6; color: rgba(250,248,243,0.65); }
.sd-view-toggle, .ms-units { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(250,248,243,0.07); }
.sd-view-toggle { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
.sd-view-toggle button, .ms-units button { padding: 7px 16px; border-radius: 999px; font-size: 12px; color: rgba(250,248,243,0.7); }
.sd-view-toggle button.active, .ms-units button.active { background: var(--gold); color: var(--dark); font-weight: 600; }
.sd-group { margin-bottom: 18px; }
.sd-group h4, .studio h4 { font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sd-chips button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(250,248,243,0.16);
  font-size: 12.5px;
  color: rgba(250,248,243,0.8);
  transition: all 0.2s;
}
.sd-chips button:hover { border-color: var(--gold); }
.sd-chips button.active { background: rgba(201,168,76,0.18); border-color: var(--gold); color: var(--gold-light); }
.sd-swatches { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.sd-swatches button, .sd-custom {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid rgba(250,248,243,0.18);
  transition: transform 0.2s;
}
.sd-swatches button:hover { transform: scale(1.12); }
.sd-swatches button.active { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.sd-custom { position: relative; display: grid; place-items: center; background: conic-gradient(#e33, #ec3, #3c6, #3ae, #93e, #e33); overflow: hidden; }
.sd-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.sd-custom span { color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); pointer-events: none; }

/* 02 colour match */
.cm-grid { grid-template-columns: 0.9fr 1.1fr; gap: 32px; display: grid; }
.studio-panel[data-panel=colour] { display: none; }
.studio-panel[data-panel=colour].active { display: block; }
.cm-drop {
  min-height: 360px;
  border: 2px dashed rgba(201,168,76,0.4);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.cm-drop.drag, .cm-drop:hover { border-color: var(--gold-light); background: rgba(201,168,76,0.06); }
.cm-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-drop-text { position: relative; padding: 24px; font-size: 13px; line-height: 1.7; color: rgba(250,248,243,0.6); }
.cm-drop-text b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--ivory); margin-bottom: 6px; }
.cm-drop.has-img .cm-drop-text { position: absolute; bottom: 12px; left: 12px; right: 12px; padding: 10px; background: rgba(12,8,5,0.7); border-radius: 10px; font-size: 0; }
.cm-drop.has-img .cm-drop-text b { font-size: 14px; margin: 0; }
.cm-drop.has-img .cm-drop-text b::after { content: ' — tap to change'; color: var(--gold-light); }
.cm-result h3 { font-family: var(--font-display); font-size: 28px; font-weight: 300; margin-bottom: 12px; }
.cm-hint { font-size: 14px; line-height: 1.8; color: rgba(250,248,243,0.6); }
.cm-palette { display: flex; height: 92px; border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.cm-palette div { background: var(--c); display: flex; align-items: flex-end; padding: 8px; min-width: 0; }
.cm-palette span { font-size: 10.5px; line-height: 1.3; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); overflow: hidden; }
.cm-palette small { display: block; opacity: 0.8; }
.cm-ideas { display: grid; gap: 10px; margin-bottom: 22px; }
.cm-idea { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(250,248,243,0.05); }
.cm-idea i, .cm-extra i { display: inline-block; background: var(--c); border-radius: 50%; border: 2px solid rgba(250,248,243,0.2); }
.cm-idea i { width: 44px; height: 44px; }
.cm-idea b { font-size: 14px; font-weight: 600; }
.cm-idea p { font-size: 12.5px; line-height: 1.5; color: rgba(250,248,243,0.6); margin-top: 2px; }
.cm-idea button { font-size: 12px; color: var(--gold-light); white-space: nowrap; }
.cm-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cm-extra p { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cm-extra i { width: 28px; height: 28px; }

/* 03 measurements */
.studio-panel[data-panel=measure] { display: none; }
.studio-panel[data-panel=measure].active { display: block; }
.ms-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: start; }
.ms-units { margin-bottom: 18px; }
.ms-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ms-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(250,248,243,0.7); }
.ms-form .ms-full { grid-column: 1 / -1; }
.ms-input { position: relative; display: block; }
.ms-form input, .ms-form select, .pl-form input, .pl-form select {
  width: 100%;
  padding: 11px 14px;
  background: rgba(250,248,243,0.06);
  border: 1px solid rgba(250,248,243,0.16);
  border-radius: 10px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 15px;
}
.ms-form select option, .pl-form select option { color: #222; }
.ms-form input:focus, .ms-form select:focus, .pl-form input:focus, .pl-form select:focus { outline: none; border-color: var(--gold); background: rgba(201,168,76,0.08); }
.ms-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: rgba(250,248,243,0.4); pointer-events: none; }
.ms-form label.warn input { border-color: #e0a04a; }
.ms-form label.warn::after { content: 'Please double-check this one'; font-size: 11px; color: #e0a04a; }
.ms-note { margin-top: 12px; font-size: 13px; color: var(--gold-light); min-height: 1em; }
.ms-guide { position: sticky; top: 0; padding: 22px; border-radius: 18px; background: rgba(250,248,243,0.04); border: 1px solid rgba(250,248,243,0.08); }
.ms-guide svg { width: 100%; max-width: 220px; display: block; margin: 0 auto 14px; }
.ms-guide h4 { font-size: 11px; }
.ms-guide p { font-size: 14px; line-height: 1.7; color: rgba(250,248,243,0.7); }
.ms-guide .ms-range { margin-top: 8px; font-size: 12px; color: rgba(250,248,243,0.45); }

/* 04 planner */
.studio-panel[data-panel=plan] { display: none; }
.studio-panel[data-panel=plan].active { display: block; }
.pl-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 32px; align-items: start; }
.pl-form { display: grid; gap: 16px; }
.pl-form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: rgba(250,248,243,0.7); }
.pl-form input[type=date] { color-scheme: dark; }
.pl-hint { font-size: 13px; line-height: 1.7; color: rgba(250,248,243,0.5); }
.pl-empty { padding: 48px 24px; text-align: center; border: 1px dashed rgba(250,248,243,0.15); border-radius: 18px; color: rgba(250,248,243,0.5); }
.pl-count { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pl-count b { font-family: var(--font-display); font-size: 72px; font-weight: 300; line-height: 1; color: var(--gold-light); }
.pl-count span { font-size: 14px; line-height: 1.5; color: rgba(250,248,243,0.7); }
.pl-list { display: grid; gap: 8px; margin-bottom: 22px; }
.pl-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: rgba(250,248,243,0.05); border-left: 3px solid #4fb07e; }
.pl-list li.pl-soon { border-left-color: #e0a04a; }
.pl-list li.pl-late { border-left-color: #d9534f; }
.pl-list b { display: block; font-size: 14px; font-weight: 600; }
.pl-list span { font-size: 12px; color: rgba(250,248,243,0.55); }
.pl-list em { font-style: normal; font-size: 12px; color: rgba(250,248,243,0.75); text-align: right; }
.pl-list a { font-size: 11px; color: var(--gold-light); white-space: nowrap; }

@media (max-width: 900px) {
  .studio { padding: 0; align-items: stretch; }
  .studio-shell { max-height: 100vh; height: 100%; border-radius: 0; padding: 20px 16px 28px; }
  .studio-panel[data-panel=design], .cm-grid, .ms-grid, .pl-grid { grid-template-columns: 1fr; gap: 20px; }
  .sd-stage { padding-top: 50px; }
  #sd-svg { max-width: 260px; }
  .cm-drop { min-height: 220px; }
  .ms-form { grid-template-columns: repeat(2, 1fr); }
  .ms-guide { position: static; order: -1; }
  .pl-list li { grid-template-columns: 1fr; gap: 4px; }
  .pl-list em { text-align: left; }
  .studio-fab { right: 16px; bottom: 150px; padding-right: 16px; }
  .studio-fab-text { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING POPUP
   ═══════════════════════════════════════════════════════════════════════════ */
.book {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8,5,3,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s;
}
.book[hidden] { display: none; }
.book.open { opacity: 1; }
.book, .book * { cursor: auto; }
.book button, .book a, .book label { cursor: pointer; }
.book input[type=text] { cursor: text; }

.book-card {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--ivory);
  border-radius: 24px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8);
  transform: translateY(30px) scale(0.97);
  transition: transform 0.45s var(--spring);
}
.book.open .book-card { transform: none; }
.book-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(42,37,32,0.08);
  color: var(--charcoal);
  font-size: 24px;
  line-height: 1;
}
.book-close:hover { background: rgba(42,37,32,0.15); }

/* left: model photo */
.book-visual { position: relative; min-height: 560px; background: var(--dark); overflow: hidden; }
.book-visual > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.book-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,8,5,0.85) 0%, transparent 45%, rgba(12,8,5,0.25) 100%); }
.book-visual-sub {
  position: absolute;
  z-index: 2;
  right: 18px; bottom: 120px;
  width: 42%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  border: 4px solid var(--ivory);
  transform: rotate(5deg);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
  animation: heroFloat 7s ease-in-out infinite;
  --r: 5deg;
}
.book-status {
  position: absolute;
  z-index: 2;
  top: 18px; left: 18px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(12,8,5,0.6);
  backdrop-filter: blur(8px);
  color: var(--ivory);
  font-size: 12px;
  font-weight: 500;
}
.book-status i { width: 8px; height: 8px; border-radius: 50%; background: #e0a04a; }
.book-status.is-open i { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,0.6); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.book-visual-quote {
  position: absolute;
  z-index: 2;
  left: 24px; bottom: 26px;
  font-family: var(--font-script);
  font-size: 26px;
  line-height: 1.2;
  color: var(--ivory);
}

/* right: content */
.book-body { padding: 30px 36px 24px; }
.book-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 8px; }
.book-body h2 { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 400; line-height: 1.08; color: var(--charcoal); margin-bottom: 12px; }
.book-body h2 em { font-style: italic; color: var(--wine); font-weight: 300; }
.book-lead { font-size: 14px; line-height: 1.7; color: var(--grey); margin-bottom: 18px; }
.book-lead b { color: var(--charcoal); }

.book-call {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--wine-dark), var(--wine));
  color: var(--ivory);
  box-shadow: 0 16px 34px -14px rgba(107,41,55,0.8);
  transition: transform 0.25s;
}
.book-call:hover { transform: translateY(-2px); }
.book-call-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
  display: grid; place-items: center;
  animation: ring 2.4s ease-in-out infinite;
}
.book-call-icon svg { width: 24px; height: 24px; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(8deg); } 90% { transform: rotate(0); } }
.book-call > span:nth-child(2) { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.05; }
.book-call small { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 4px; }
.book-call em { margin-left: auto; font-style: normal; font-size: 11.5px; text-align: right; color: rgba(250,248,243,0.7); max-width: 110px; }

.book-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey); }
.book-or::before, .book-or::after { content: ''; flex: 1; height: 1px; background: rgba(42,37,32,0.12); }

.book-label { font-size: 12px; font-weight: 600; color: var(--charcoal); margin-bottom: 10px; }
.book-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.book-chips button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(42,37,32,0.15);
  font-size: 12.5px;
  color: var(--charcoal);
  transition: all 0.2s;
}
.book-chips button:hover { border-color: var(--gold-dark); }
.book-chips button.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }

.book-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.book-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--charcoal); }
.book-card > * { min-width: 0; }
.book-fields input {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(42,37,32,0.15);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
}
.book-fields input:focus { outline: none; border-color: var(--gold-dark); }

.book-photo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px dashed rgba(154,120,48,0.5);
  border-radius: 14px;
  margin-bottom: 18px;
  transition: background 0.2s;
}
.book-photo:hover { background: rgba(201,168,76,0.08); }
.book-photo::before { content: '📷'; font-size: 22px; }
.book-photo.has-img::before { display: none; }
.book-photo img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.book-photo span { display: flex; flex-direction: column; }
.book-photo b { font-size: 13.5px; color: var(--charcoal); }
.book-photo small { font-size: 12px; color: var(--grey); }

.book-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.book-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 14px 30px -12px rgba(37,211,102,0.8);
  transition: transform 0.2s;
}
.book-wa:hover { transform: translateY(-2px); }
.book-wa svg { width: 22px; height: 22px; }
.book-alt { font-size: 13px; font-weight: 600; color: var(--wine); }
.book-note { margin-top: 12px; font-size: 12.5px; color: var(--gold-dark); min-height: 1em; }

@media (max-width: 820px) {
  .book { padding: 0; align-items: flex-end; }
  .book-card { grid-template-columns: 1fr; max-height: 94vh; border-radius: 24px 24px 0 0; }
  .book-visual { min-height: 210px; }
  .book-visual-sub { width: 30%; bottom: 20px; right: 16px; }
  .book-visual-quote { font-size: 20px; bottom: 16px; }
  .book-close { background: rgba(250,248,243,0.85); }
  .book-body { padding: 24px 20px 28px; }
  .book-call > span:nth-child(2) { font-size: 22px; }
  .book-call em { display: none; }
}

/* Bento layouts — every cell filled now that the tiles are real photos */
@media (min-width: 1025px) {
  #lookbook .lb-item:nth-child(6) { grid-column: span 5; }
  #lookbook .lb-item:nth-child(7) { grid-column: span 7; }

  .family-grid { grid-auto-rows: 270px; gap: 12px; }
  .family-card { aspect-ratio: auto; border-radius: 16px; }
  .family-card:first-child { grid-row: span 2; aspect-ratio: auto; }
  .family-card:nth-child(2) { grid-column: span 2; }

  .craft-grid { grid-auto-rows: 280px; gap: 12px; }
  .craft-item, .craft-item:nth-child(1) { aspect-ratio: auto; border-radius: 16px; }
  .craft-item:nth-child(6) { grid-column: span 2; }
}

@media (max-width: 1100px) {
  .hero-float { display: none; }
}
@media (max-width: 768px) {
  .lb-overlay .lb-detail { max-height: none; }
  .fresh-img  { border-radius: 14px; }
  .work-grid  { columns: 2 150px; column-gap: 8px; }
  .work-item  { margin-bottom: 8px; border-radius: 10px; }
  .work-item .lb-overlay { padding: 10px; }
  .work-item .lb-name { font-size: 14px; line-height: 1.2; }
  .work-item .lb-cat, .work-item .lb-detail, .work-item .lb-aari-tag { display: none; }
}

/* ── Extra page content + homepage link hub ──────────────────────────────── */
.pseo .seo-prose a, .hub-intro a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.pseo-links, .hub-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pseo-links a, .hub-links a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(154,120,48,0.35);
  font-size: 13px;
  color: var(--charcoal);
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s;
}
.pseo-links a:hover, .hub-links a:hover { background: var(--champagne); border-color: var(--gold-dark); }
#explore { background: var(--cream); padding: var(--section-pad) 0; }
.hub-intro { max-width: 820px; font-size: 16px; line-height: 1.85; color: var(--grey); margin-bottom: 28px; }
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hub-grid h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--charcoal); margin-bottom: 4px; }
.hub-grid .hub-links { margin-top: 10px; }
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hub-grid { grid-template-columns: 1fr; } }

/* ── Real Google reviews ─────────────────────────────────────────────────── */
.testi-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.testi-head .testimonial-headline { margin-bottom: 0; }
.testi-rating {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px -14px rgba(42,37,32,0.35);
  transition: transform 0.25s;
}
.testi-rating:hover { transform: translateY(-2px); }
.testi-g {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 20px; color: #fff;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
}
.testi-rating b { font-size: 22px; color: var(--charcoal); margin-right: 4px; }
.testi-rating small { display: block; font-size: 11px; color: var(--grey); margin-top: 2px; }
.testi-stars { color: #f5b301; letter-spacing: 2px; font-style: normal; font-size: 16px; }
.testimonial-item > .testi-stars { font-size: 20px; margin-bottom: 14px; }
.testimonial-avatar { display: grid; place-items: center; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--dark); }
.testi-src { color: var(--gold-dark); font-weight: 600; }
.testi-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.testi-foot .testimonial-dots { margin-top: 0; flex-wrap: wrap; }
.testi-all { font-size: 13px; font-weight: 600; color: var(--wine); }
.testi-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Enquiry form extras ─────────────────────────────────────────────────── */
.form-photos {
  position: relative;
  display: flex; align-items: center; min-height: 46px;
  padding: 10px 14px;
  border: 1.5px dashed rgba(154,120,48,0.5);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.form-photos:hover { background: rgba(201,168,76,0.08); }
.form-photos input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-photos-text { font-size: 13px; color: var(--grey); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 4px 0 12px; font-size: 13px; color: #b23a3a; }

/* ── Studio map ──────────────────────────────────────────────────────────── */
.studio-map { position: relative; margin-top: 28px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(201,168,76,0.25); }
.studio-map iframe { display: block; width: 100%; height: 280px; border: 0; filter: saturate(0.85); }
.studio-map-cta {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(12,8,5,0.85); backdrop-filter: blur(6px);
  color: var(--ivory); font-size: 13px;
}
.studio-map-cta b { color: var(--gold-light); font-weight: 600; white-space: nowrap; }

/* ── Responsive grids that used to be inline styles ──────────────────────── */
.rgrid   { display: grid; }
.rgrid-5 { grid-template-columns: repeat(5, 1fr); }
.rgrid-3 { grid-template-columns: repeat(3, 1fr); }
.rgrid-2 { grid-template-columns: 1fr 1fr; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIRST PASS — most visitors are on phones
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .rgrid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root { --section-pad: 64px; }
  .container { padding-inline: 20px; }
  html { -webkit-text-size-adjust: 100%; }

  /* Header: compact logo, proper burger → X */
  #nav, #nav.scrolled { padding: 12px 18px; background: rgba(12,8,5,0.94); backdrop-filter: blur(10px); }
  .logo-s-mark   { height: 34px; }
  .logo-rest     { font-size: 25px; }
  .nav-logo .logo-boutique { font-size: 6.5px; letter-spacing: 0.24em; }
  .nav-hamburger { width: 44px; height: 44px; align-items: center; justify-content: center; gap: 6px; border-radius: 50%; border: 1px solid rgba(250,248,243,0.15); }
  .nav-hamburger span { width: 20px; height: 1.5px; transition: transform 0.3s, opacity 0.3s; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Mobile menu: readable list, quick actions, above floating buttons */
  .nav-mobile-overlay {
    z-index: 495;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 84px 24px 28px;
    overflow-y: auto;
    background: radial-gradient(circle at 100% 0%, rgba(201,168,76,0.14), transparent 45%), var(--dark);
  }
  .mnav-links { display: flex; flex-direction: column; }
  .nav-mobile-overlay .mnav-links a {
    display: flex; align-items: baseline; gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(250,248,243,0.08);
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--ivory);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.35s, transform 0.35s, color 0.2s;
  }
  .mnav-links a span { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
  .nav-mobile-overlay.open .mnav-links a { opacity: 1; transform: none; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(2) { transition-delay: 0.03s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(3) { transition-delay: 0.06s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(4) { transition-delay: 0.09s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(5) { transition-delay: 0.12s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(6) { transition-delay: 0.15s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(7) { transition-delay: 0.18s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(8) { transition-delay: 0.21s; }
  .nav-mobile-overlay.open .mnav-links a:nth-child(9) { transition-delay: 0.24s; }
  .mnav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .nav-mobile-overlay .mnav-actions a {
    display: flex; align-items: center; justify-content: center;
    padding: 14px; border-radius: 999px;
    font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0;
  }
  .nav-mobile-overlay .mnav-call { background: var(--gold); color: var(--dark); }
  .nav-mobile-overlay .mnav-wa   { background: #25d366; color: #fff; }
  .mnav-foot { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--grey); text-align: center; }
  .nav-mobile-overlay .mnav-foot a { font: inherit; color: var(--gold-light); }
  body:has(.nav-mobile-overlay.open) :is(.wa-float, .studio-fab, .quiz-trigger, .sticky-book) { visibility: hidden; pointer-events: none; }

  /* Floating buttons: smaller, tidy stack above the sticky bar */
  .wa-float      { width: 50px; height: 50px; right: 14px; bottom: 66px; }
  .wa-float svg  { width: 24px; height: 24px; }
  .studio-fab    { right: 14px; bottom: 126px; padding: 5px 14px 5px 5px; gap: 8px; }
  .studio-fab-icon { width: 34px; height: 34px; }
  .studio-fab-icon svg { width: 18px; height: 18px; }
  .studio-fab-text { font-size: 15px; }
  .studio-fab-text small { font-size: 7.5px; }
  .quiz-trigger  { left: 14px; bottom: 66px; padding: 9px 14px; font-size: 9px; }
  .quiz-modal    { left: 14px; right: 14px; width: auto; bottom: 114px; padding: 24px; }
  .sticky-book   { right: 0; font-size: 12px; padding: 15px; letter-spacing: 0.14em; }

  /* Type scale for phones */
  .hero-h1 { font-size: 42px; line-height: 1; }
  .hero-h1 .hero-sub-word { font-size: 17px; margin-top: 12px; }
  .hero-desc { font-size: 14px; }
  .first-stitch-text .display-text, .aari-text-col .aari-headline, .bridal-headline, .fresh-headline { font-size: 34px; }
  .timeline-headline, .fashion-headline, .design-own-headline, .ba-headline, .family-headline, .craft-headline,
  .why-left h2, .fabric-headline, .journey-headline, .testimonial-headline, .insta-headline, .contact-left h2,
  .faq-headline, .seo-h2, .seo-h2-light, .seo-prose h2 { font-size: 30px; line-height: 1.12; }
  .inner-hero h1 { font-size: 36px; line-height: 1.05; }
  .inner-hero p  { font-size: 14px; }
  .testimonial-quote { font-size: 20px; }
  /* headings sized inline on inner pages */
  section h2[style*="clamp"] { font-size: 30px !important; line-height: 1.15 !important; }
  .section-label { font-size: 9px; letter-spacing: 0.28em; }

  /* Inner page hero: shorter, clear of the fixed header */
  .inner-hero { height: auto !important; min-height: 0 !important; padding: 120px 0 48px !important; }

  /* Buttons: easy to tap, full width when stacked */
  .btn { padding: 15px 22px; font-size: 11px; }
  .hero-ctas .btn, .seo-hero-ctas .btn, .fresh-foot .btn { flex: 1 1 100%; justify-content: center; }

  /* Bridal process: 4 + 3 grid instead of a cut-off row */
  .bridal-journey { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 20px; overflow: visible; }
  .bridal-step { padding: 0 4px; }
  .bridal-step::after { display: none; }
  .bridal-step-name { font-size: 8px; letter-spacing: 0.12em; white-space: normal; }

  /* Inline grids from inner pages */
  .rgrid-5, .rgrid-3 { grid-template-columns: repeat(2, 1fr); }
  .rgrid-2 { grid-template-columns: 1fr; gap: 40px !important; }
  .enquiry-form { padding: 28px 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Footer */
  .logo-s-mark--lg { height: 48px; }
  .logo-rest--lg   { font-size: 36px; }
  .footer-grid     { gap: 32px; }
  .footer-bottom   { flex-direction: column; gap: 10px; text-align: center; }
  .footer-areas nav { gap: 8px 16px; }
  #footer { padding-bottom: 90px; }

  /* Landing pages */
  .seo-photo-stack { height: 320px; }
  .seo-why { gap: 20px; margin-top: 40px; padding-top: 32px; }
  .seo-faq summary { font-size: 18px; }
  .studio-map iframe { height: 240px; }
}

@media (max-width: 400px) {
  .hero-h1 { font-size: 36px; }
  .logo-rest { font-size: 22px; }
  .logo-s-mark { height: 30px; }
  .first-stitch-text .display-text, .aari-text-col .aari-headline, .bridal-headline, .fresh-headline { font-size: 30px; }
  .inner-hero h1 { font-size: 32px; }
  .rgrid-5, .rgrid-3 { grid-template-columns: 1fr; }
  .seo-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .book-chips button, .sd-chips button { padding: 7px 11px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE SWITCH + TAMIL TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-switch {
  margin-left: 18px;
  padding: 7px 14px;
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.lang-switch:hover { background: var(--gold); color: var(--dark); }
.lang-switch[lang="ta"] { font-family: 'Noto Sans Tamil', 'Latha', var(--font-body); }

html[lang="ta"] { --font-display: 'Noto Serif Tamil', 'Latha', Georgia, serif; --font-body: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif; }
html[lang="ta"] body { line-height: 1.75; }
html[lang="ta"] .inner-hero h1, html[lang="ta"] .seo-h2, html[lang="ta"] .seo-h2-light, html[lang="ta"] .seo-prose h2 { line-height: 1.35; letter-spacing: 0; }
html[lang="ta"] .inner-hero h1 { font-size: clamp(30px, 4.2vw, 56px); }
html[lang="ta"] .section-label, html[lang="ta"] .inner-hero-label, html[lang="ta"] .seo-areas-label, html[lang="ta"] .btn { letter-spacing: 0.04em; text-transform: none; }
html[lang="ta"] .btn { font-size: 13px; }
html[lang="ta"] .isc-name, html[lang="ta"] .seo-why h3 { font-size: 19px; line-height: 1.45; }
html[lang="ta"] .seo-faq summary { font-size: 18px; line-height: 1.5; }
/* nav, footer and popups stay in the Latin brand fonts */
html[lang="ta"] #nav, html[lang="ta"] #footer, html[lang="ta"] .studio, html[lang="ta"] .book { --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Raleway', system-ui, sans-serif; }

.footer-areas-sub { margin-top: 18px; }
.footer-areas nav[lang="ta"] a { font-family: 'Noto Sans Tamil', 'Latha', var(--font-body); }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN CATALOGUE
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-intro { max-width: 760px; margin-bottom: 32px; }
.cat-intro p { font-size: 16px; line-height: 1.85; color: var(--grey); margin-bottom: 14px; }
.cat-switch { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 36px; scrollbar-width: none; }
.cat-switch a { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(42,37,32,0.15); font-size: 13px; color: var(--charcoal); }
.cat-switch a.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.cat-card h2 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--charcoal); margin: 14px 0 6px; line-height: 1.2; }
.cat-card p { font-size: 14px; line-height: 1.7; color: var(--grey); margin-bottom: 10px; }
.cat-img { position: relative; display: block; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: var(--champagne); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.cat-card:hover .cat-img img { transform: scale(1.06); }
.cat-num { position: absolute; right: 14px; bottom: 8px; font-family: var(--font-display); font-style: italic; font-size: 46px; font-weight: 300; color: rgba(250,248,243,0.92); text-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.cat-ask { font-size: 13px; font-weight: 600; color: var(--wine); }
.cat-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-style { display: block; padding: 18px; border-radius: 18px; background: rgba(250,248,243,0.05); border: 1px solid rgba(250,248,243,0.08); transition: border-color 0.25s, transform 0.25s; }
.cat-style:hover { border-color: var(--gold); transform: translateY(-3px); }
.cat-style svg { width: 100%; max-width: 160px; display: block; margin: 0 auto 10px; }
.cat-style h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ivory); }
.cat-style p { font-size: 13px; line-height: 1.6; color: rgba(250,248,243,0.6); margin: 4px 0 10px; }
.cat-style span { font-size: 12px; font-weight: 600; color: var(--gold-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE JOURNAL
   ═══════════════════════════════════════════════════════════════════════════ */
.jr-meta { font-size: 13px; color: rgba(250,248,243,0.65); }
.jr-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; padding-block: 56px 72px; }
.jr-prose { max-width: 720px; }
.jr-prose p, .jr-prose li { font-size: 17px; line-height: 1.85; color: var(--charcoal-lt); margin-bottom: 16px; }
.jr-prose h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--charcoal); margin: 34px 0 10px; line-height: 1.2; }
.jr-prose ul, .jr-prose ol { padding-left: 22px; margin-bottom: 18px; list-style: revert; }
.jr-prose a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.jr-article { background: var(--ivory); }
.jr-cta { position: sticky; top: 100px; padding: 26px; border-radius: 18px; background: var(--champagne); display: flex; flex-direction: column; gap: 12px; }
.jr-cta h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--charcoal); }
.jr-cta p:not(.section-label) { font-size: 14px; color: var(--grey); }
.jr-cta .btn { justify-content: center; }
.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.jr-card { display: block; }
.jr-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 16px; margin-bottom: 12px; transition: transform 0.6s var(--ease-out); }
.jr-card:hover img { transform: scale(1.03); }
.jr-card span { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); }
.jr-card h2, .jr-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--charcoal); line-height: 1.25; margin: 6px 0; }
.jr-card p { font-size: 14px; line-height: 1.7; color: var(--grey); }
.jr-grid--index .jr-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 32px; align-items: center; }
.jr-grid--index .jr-card--lead img { margin: 0; grid-row: span 3; }
.jr-grid--index .jr-card--lead h2 { font-size: 32px; }

/* Install button in the mobile menu */
.mnav-install { margin-top: 12px; padding: 13px; border-radius: 999px; border: 1px dashed rgba(201,168,76,0.6); color: var(--gold-light); font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .cat-grid, .jr-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .cat-styles { grid-template-columns: repeat(2, 1fr); }
  .jr-body { grid-template-columns: 1fr; gap: 32px; padding-block: 36px 48px; }
  .jr-cta { position: static; }
  .jr-grid--index .jr-card--lead { grid-template-columns: 1fr; }
  .jr-grid--index .jr-card--lead img { margin-bottom: 12px; grid-row: auto; }
}
@media (max-width: 768px) {
  .lang-switch { margin-left: auto; margin-right: 10px; padding: 6px 11px; font-size: 11px; }
  .cat-card h2, .jr-card h2, .jr-card h3 { font-size: 18px; }
  .cat-card p { font-size: 13px; }
  .cat-num { font-size: 34px; }
  .jr-prose p, .jr-prose li { font-size: 16px; }
  .jr-prose h2 { font-size: 23px; }
  .jr-grid--index .jr-card--lead h2 { font-size: 24px; }
  html[lang="ta"] .inner-hero h1 { font-size: 28px; }
  html[lang="ta"] .seo-h2, html[lang="ta"] .seo-h2-light, html[lang="ta"] .seo-prose h2 { font-size: 24px !important; }
}
@media (max-width: 400px) {
  .cat-grid, .jr-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOKBOOK SLIDER + PHOTO MANAGER
   ═══════════════════════════════════════════════════════════════════════════ */
.pslider { margin-bottom: 56px; }
.pslider-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.pslider-title { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 48px); font-weight: 300; color: var(--charcoal); line-height: 1.05; }
.pslider-title em { font-style: italic; color: var(--wine); }
.pslider-nav { display: flex; gap: 8px; flex-shrink: 0; }
.pslider-arrow, .pslider-more {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(42,37,32,0.18);
  color: var(--charcoal);
  font-size: 22px;
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.pslider-arrow:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.pslider-more { font-size: 20px; letter-spacing: 1px; background: var(--champagne); border-color: rgba(154,120,48,0.35); }
.pslider-more:hover { background: var(--gold); color: var(--dark); }
.pslider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 20px;
}
.pslider-track::-webkit-scrollbar { display: none; }
.pslide {
  flex: 0 0 calc((100% - 32px) / 3);
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--champagne);
}
.pslide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.pslide:hover img { transform: scale(1.05); }
.pslider-empty { padding: 48px; color: var(--grey); }
.pslider-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.pslider-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(42,37,32,0.2); transition: width 0.3s, background 0.3s; }
.pslider-dots i.on { width: 22px; background: var(--gold-dark); }

.padmin {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8,5,3,0.75);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s;
}
.padmin.open { opacity: 1; }
.padmin, .padmin * { cursor: auto; }
.padmin button, .padmin label { cursor: pointer; }
.padmin input[type=password] { cursor: text; }
.padmin-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px;
  border-radius: 22px;
  background: var(--ivory);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
}
.padmin-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(42,37,32,0.08); font-size: 22px; color: var(--charcoal); }
.padmin-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px; }
.padmin-card h2 { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--charcoal); margin-bottom: 16px; }
.padmin-help { font-size: 14px; color: var(--grey); margin-bottom: 16px; }
.padmin-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 12px; font-weight: 600; color: var(--charcoal); }
.padmin-field input { padding: 13px 16px; border: 1px solid rgba(42,37,32,0.2); border-radius: 12px; font-size: 16px; background: #fff; color: var(--charcoal); }
.padmin-field input:focus { outline: none; border-color: var(--gold-dark); }
.padmin-msg { margin-top: 12px; font-size: 13px; color: #2e7d4f; min-height: 1.2em; }
.padmin-msg.bad, #padmin-login-msg { color: #b23a3a; }
.padmin-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border: 1.5px dashed rgba(154,120,48,0.55);
  border-radius: 16px;
  transition: background 0.2s;
}
.padmin-drop:hover { background: rgba(201,168,76,0.08); }
.padmin-drop::before { content: '🖼️'; font-size: 26px; }
.padmin-drop.has-img::before { display: none; }
.padmin-drop img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.padmin-drop span { display: flex; flex-direction: column; gap: 2px; }
.padmin-drop b { font-size: 14px; color: var(--charcoal); }
.padmin-drop small { font-size: 12px; color: var(--grey); }
.padmin-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.padmin-actions .btn[disabled] { opacity: 0.45; pointer-events: none; }
.padmin-logout { font-size: 13px; font-weight: 600; color: var(--wine); }
.padmin-sub { margin: 22px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); }
.padmin-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.padmin-list li { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--champagne); }
.padmin-list img { width: 100%; height: 100%; object-fit: cover; }
.padmin-del {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  padding: 7px; border-radius: 999px;
  background: rgba(178,58,58,0.92); color: #fff;
  font-size: 12px; font-weight: 600;
}
.padmin-del:hover { background: #8f2424; }
.padmin-list .padmin-none { grid-column: 1 / -1; aspect-ratio: auto; padding: 18px; font-size: 13px; color: var(--grey); background: none; }

/* Delete confirmation */
.pconfirm {
  position: fixed; inset: 0; z-index: 2300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8,5,3,0.6);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.25s;
}
.pconfirm.open { opacity: 1; }
.pconfirm, .pconfirm * { cursor: auto; }
.pconfirm button { cursor: pointer; }
.pconfirm-card {
  width: min(360px, 100%);
  padding: 28px 26px 22px;
  border-radius: 22px;
  background: var(--ivory);
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.35s var(--spring);
}
.pconfirm.open .pconfirm-card { transform: none; }
.pconfirm-photo { position: relative; width: 96px; height: 96px; margin: 0 auto 16px; }
.pconfirm-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4); }
.pconfirm-photo span {
  position: absolute; right: -10px; bottom: -10px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #c0392b; color: #fff; font-size: 17px;
  border: 3px solid var(--ivory);
  animation: ring 2.4s ease-in-out infinite;
}
.pconfirm-card h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--charcoal); margin-bottom: 8px; }
.pconfirm-card p { font-size: 14px; line-height: 1.6; color: var(--grey); margin-bottom: 22px; }
.pconfirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pconfirm-actions button { padding: 13px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background 0.2s, transform 0.2s; }
.pconfirm-cancel { background: rgba(42,37,32,0.08); color: var(--charcoal); }
.pconfirm-cancel:hover { background: rgba(42,37,32,0.14); }
.pconfirm-ok { background: #c0392b; color: #fff; box-shadow: 0 10px 22px -10px rgba(192,57,43,0.9); }
.pconfirm-ok:hover { background: #a93226; transform: translateY(-1px); }

@media (max-width: 900px) {
  .pslide { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) {
  .pslider { margin-bottom: 40px; }
  .pslide { flex-basis: 86%; aspect-ratio: 4/3; border-radius: 16px; }
  .pslider-arrow { display: none; }
  .padmin { padding: 0; align-items: flex-end; }
  .padmin-card { border-radius: 22px 22px 0 0; padding: 26px 20px; max-height: 92vh; }
  .padmin-list { grid-template-columns: repeat(2, 1fr); }
}