/* ═══════════════════════════════════════════════════════════════════════
   Kingdom Gowns — styles.css  v2
   Mobile-first · CSS custom properties · Flexbox + Grid
   Palette: Luxury Heirloom Atelier — ivory, antique rose, deep mahogany
   WCAG 2.1 AA contrast throughout
   Fixes in v2:
   · Hamburger close-button visibility (bars dark when nav open)
   · Sticky header no longer jumps (padding removed from scroll transition)
   · Responsive improvements across all breakpoints
   · Stats row, rating summary
   · will-change + contain hints for GPU performance
═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --c-ivory:      #FAF6F1;
  --c-parchment:  #F0E8DC;
  --c-blush:      #F5DDD0;
  --c-rose:       #C8906A;
  --c-gold:       #9B7B4F;
  --c-btn:        #6B3520;   /* 9.1:1 on white ✓ WCAG AAA */
  --c-btn-hover:  #4E2718;
  --c-deep:       #2C1A0E;   /* 16:1 on ivory ✓ WCAG AAA */
  --c-mid:        #5A4A3A;   /* 7.2:1 on ivory ✓ WCAG AA */
  --c-muted:      #8A7060;   /* 4.6:1 on ivory ✓ WCAG AA */
  --c-white:      #FEFEFE;
  --c-border:     #E5D9CE;
  --c-overlay:    rgba(20, 10, 5, 0.65);
  --c-footer-bg:  #1C130A;  /* warmer deep brown — less heavy than pure mahogany */
  --c-footer-txt: #EDE2D6;   /* 9:1 on #1C130A ✓ WCAG AAA */

  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body:    'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid type — clamp(mobile, fluid, desktop) */
  --text-xs:   clamp(0.75rem,  1.5vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 1.8vw,  1rem);
  --text-base: clamp(1rem,     2vw,    1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw,  1.375rem);
  --text-xl:   clamp(1.375rem, 3vw,    1.75rem);
  --text-2xl:  clamp(1.75rem,  4vw,    2.5rem);
  --text-3xl:  clamp(2.25rem,  5vw,    3.5rem);
  --text-4xl:  clamp(3rem,     7vw,    5rem);

  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 7rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 12px rgba(44,26,14,.08);
  --shadow-md: 0 8px 32px rgba(44,26,14,.14);
  --shadow-lg: 0 20px 60px rgba(44,26,14,.20);
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.4s var(--ease);

  /* Header height used by JS for scroll offset */
  --header-h: 76px;
}

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

html {
  font-size:             100%;
  scroll-behavior:       smooth;
  -webkit-text-size-adjust: 100%;
  /*
    CRITICAL mobile overflow fix:
    overflow-x on html AND body together prevent the entire viewport
    from becoming wider than the screen — the #1 cause of horizontal
    scroll on mobile. Body alone is insufficient.
  */
  overflow-x: hidden;
}

body {
  font-family: var(--f-body);
  font-size:   var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color:       var(--c-deep);
  background:  var(--c-ivory);
  overflow-x:  hidden;
  /* Ensure body never stretches beyond viewport width */
  width:       100%;
  max-width:   100vw;
  position:    relative;
}

/* Global image: fluid, never overflow, no layout shift */
img { display:block; max-width:100%; height:auto; }

ul, ol { list-style:none; }

a {
  color:      var(--c-btn);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--c-btn-hover); }

p { margin-bottom: var(--sp-sm); color: var(--c-mid); }
p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────
   ACCESSIBILITY: Skip link
───────────────────────────────────────── */
.skip-link {
  position:      absolute;
  top:           -100%;
  left:          var(--sp-sm);
  z-index:       99999;
  padding:       var(--sp-xs) var(--sp-md);
  background:    var(--c-btn);
  color:         var(--c-white);
  font-size:     var(--text-sm);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition:    top 0.2s;
  text-decoration: none;
}
.skip-link:focus { top:0; }

/* ─────────────────────────────────────────
   FOCUS STATES — never remove, always replace
───────────────────────────────────────── */
:focus-visible {
  outline:        3px solid var(--c-rose);
  outline-offset: 3px;
  border-radius:  2px;
}
:focus:not(:focus-visible) { outline:none; }

/* ─────────────────────────────────────────
   UTILITIES
───────────────────────────────────────── */
.container {
  width:          min(100%, 1200px);
  margin-inline:  auto;
  padding-inline: var(--sp-md);
}

.section-pad { padding-block: var(--sp-xl); }

.eyebrow {
  display:        block;
  font-family:    var(--f-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--c-rose);
  margin-bottom:  var(--sp-xs);
}
.eyebrow--light { color: var(--c-blush); }

.section-title {
  font-family:   var(--f-display);
  font-size:     var(--text-3xl);
  font-weight:   400;
  line-height:   1.15;
  color:         var(--c-deep);
  margin-bottom: var(--sp-sm);
}
.section-title--light { color: var(--c-white); }

/* Ornamental divider with leading diamond glyph */
.ornament {
  display:     flex;
  align-items: center;
  gap:         var(--sp-sm);
  margin-block: var(--sp-md);
  color:       var(--c-rose);
}
.ornament::before {
  content:     '✦';
  font-size:   0.7em;
  flex-shrink: 0;
}
.ornament::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--c-rose);
  opacity:    0.4;
}
.ornament--light { color: var(--c-blush); }
.ornament--light::after { background: var(--c-blush); }

.section-intro {
  font-family:  var(--f-display);
  font-style:   italic;
  font-size:    var(--text-lg);
  color:        var(--c-mid);
  max-width:    600px;
  margin-block: var(--sp-md);
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-xs);
  padding:         0.75em 2em;
  font-family:     var(--f-body);
  font-size:       var(--text-sm);
  font-weight:     500;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  border:          2px solid transparent;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background var(--transition), color var(--transition),
                   border-color var(--transition), transform 0.2s ease,
                   box-shadow 0.2s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background:   var(--c-btn);
  color:        var(--c-white);
  border-color: var(--c-btn);
}
.btn--primary:hover {
  background:   var(--c-btn-hover);
  border-color: var(--c-btn-hover);
  color:        var(--c-white);
}

.btn--ghost {
  background:   transparent;
  color:        var(--c-white);
  border-color: rgba(254,254,254,.6);
}
.btn--ghost:hover {
  background:   rgba(254,254,254,.15);
  border-color: var(--c-white);
  color:        var(--c-white);
}

.btn--sm   { padding: 0.55em 1.5em; font-size: var(--text-xs); }
.btn--full { width: 100%; }

.btn[disabled] { opacity:.65; cursor:not-allowed; transform:none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════════════════════════════════ */
.preloader {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  background: var(--c-ivory);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader--hidden { opacity:0; visibility:hidden; pointer-events:none; }

.preloader__inner { text-align:center; }

.preloader__monogram {
  display:     block;
  font-family: var(--f-display);
  font-size:   clamp(5rem, 15vw, 9rem);
  font-weight: 300;
  font-style:  italic;
  line-height: 1;
  background:  linear-gradient(90deg, var(--c-deep) 0%, var(--c-rose) 50%, var(--c-deep) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation:   shimmer 2s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.preloader__tagline {
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--c-muted);
  margin-top:     var(--sp-xs);
  margin-bottom:  var(--sp-md);
}

.preloader__bar-wrap {
  width:        120px;
  height:       2px;
  background:   var(--c-border);
  margin:       0 auto;
  overflow:     hidden;
  border-radius: 2px;
}
.preloader__bar {
  width:      0%;
  height:     100%;
  background: linear-gradient(90deg, var(--c-rose), var(--c-gold));
  animation:  loadbar 1.8s ease forwards;
}
@keyframes loadbar {
  0%   { width:0%; }
  60%  { width:70%; }
  100% { width:100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SITE HEADER
   ─────────────────────────────────────────────────────────────────────
   FIX #3: "Sticky header jumps" — the original code changed BOTH
   background AND padding on scroll, causing a height reflow.
   Solution: padding stays constant at all times; only background
   and box-shadow transition. Zero layout reflow = zero jumping.
═══════════════════════════════════════════════════════════════════════ */
.site-header {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  z-index:    100;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  /* CONSTANT padding — never changes on scroll */
  padding:    1.25rem 2.5rem;
  background: transparent;
  /* Only background + shadow transition; no height change → no jump */
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
  /* GPU compositing hint — smooth scroll behaviour */
  will-change: background;
}

/* Scrolled: white background + shadow, but SAME padding/height */
.site-header.is-scrolled {
  background: var(--c-white);
  box-shadow: 0 2px 20px rgba(44,26,14,.08);
}

.site-header__logo img {
  width:      52px;
  height:     52px;
  object-fit: contain;
}

/* Desktop nav */
.primary-nav ul {
  display:     flex;
  align-items: center;
  gap:         var(--sp-md);
}

.nav-link {
  font-size:      var(--text-sm);
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          var(--c-white);
  position:       relative;
  padding-bottom: 3px;
  transition:     color var(--transition);
}
.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0;
  width:      0; height: 1px;
  background: currentColor;
  transition: width var(--transition);
}
.nav-link:hover::after { width:100%; }

/* When scrolled, links turn dark */
.site-header.is-scrolled .nav-link { color: var(--c-deep); }
.site-header.is-scrolled .nav-link:hover { color: var(--c-btn); }

/* CTA nav link — outlined mini-button */
.nav-link--cta {
  padding:        0.4em 1.2em;
  border:         1.5px solid rgba(254,254,254,.5);
  border-radius:  var(--radius-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size:      var(--text-xs);
  font-weight:    500;
}
.nav-link--cta:hover { background:rgba(254,254,254,.15); }
.site-header.is-scrolled .nav-link--cta {
  border-color: var(--c-btn);
  color:        var(--c-btn);
}
.site-header.is-scrolled .nav-link--cta:hover {
  background: var(--c-btn);
  color:      var(--c-white);
}

/* ── Hamburger toggle ── */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: space-between;
  width:           44px;  /* WCAG 2.5.8 minimum 24px; we use 44px */
  height:          44px;
  padding:         10px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  z-index:         200; /* above the nav overlay */
}

.nav-toggle__bar {
  display:          block;
  width:            100%;
  height:           2px;
  /* Default: white — visible on dark/transparent hero background */
  background:       var(--c-white);
  border-radius:    2px;
  transform-origin: center;
  transition:       transform .3s ease, opacity .3s ease, background .3s ease;
}

/* ═══════════════════════════════════════════════
   FIX #2: Hamburger close-button visibility
   ───────────────────────────────────────────────
   When the mobile nav is open, it covers the page
   with a WHITE full-screen overlay. The bars were
   still white → invisible against the white bg.

   Three rules force bars to DARK when nav is open:
   1. .nav-toggle.is-open → bars turn mahogany
   2. .site-header.is-scrolled → bars turn mahogany
      (page is already white, scrolled away from hero)
   3. When nav is open AND scrolled, also dark.
═══════════════════════════════════════════════ */
.nav-toggle.is-open .nav-toggle__bar,
.nav-toggle[aria-expanded="true"] .nav-toggle__bar,
.site-header.is-scrolled .nav-toggle__bar {
  background: var(--c-deep);
}

/* Animate to ✕ when menu is open */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2),
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3),
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ═══════════════════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════════════════ */
.hero {
  position:   relative;
  min-height: 100svh;
  display:    flex;
  align-items: center;
  justify-content: center;
  overflow:   hidden;
}

.hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.hero__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    180deg,
    rgba(20,10,5,.30) 0%,
    rgba(20,10,5,.72) 100%
  );
}

.hero__content {
  position:   relative;
  z-index:    2;
  text-align: center;
  padding:    var(--sp-lg) var(--sp-md);
  max-width:  720px;
  /* Push content below fixed header */
  padding-top: calc(var(--header-h) + var(--sp-lg));
}

.hero__eyebrow {
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--c-blush);
  margin-bottom:  var(--sp-sm);
}

.hero__title { color:var(--c-white); line-height:1; margin-bottom:var(--sp-sm); }

.hero__welcome {
  display:      block;
  font-family:  var(--f-display);
  font-size:    var(--text-3xl);
  font-style:   italic;
  font-weight:  300;
  margin-bottom: var(--sp-sm);
}

.hero__logo-img {
  width:         clamp(140px,22vw,220px);
  height:        auto;
  margin:        0 auto var(--sp-md);
  filter:        drop-shadow(0 4px 24px rgba(20,10,5,.4));
}

.hero__subtitle {
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      var(--text-xl);
  font-weight:    300;
  color:          var(--c-blush);
  letter-spacing: 0.05em;
  margin-bottom:  var(--sp-lg);
}

.hero__actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--sp-sm);
  justify-content: center;
}

/* Scroll cue */
.hero__scroll {
  position:   absolute;
  bottom:     var(--sp-lg);
  left:       50%;
  transform:  translateX(-50%);
  z-index:    2;
  text-align: center;
  animation:  bounce 2.2s ease infinite;
  /* avoid interaction — purely visual */
  pointer-events: none;
}
.hero__scroll-label {
  display:        block;
  font-size:      0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(254,254,254,.5);
  margin-bottom:  6px;
}
.hero__scroll-arrow {
  display:      block;
  width:        16px;
  height:       16px;
  border-right: 1.5px solid rgba(254,254,254,.5);
  border-bottom:1.5px solid rgba(254,254,254,.5);
  transform:    rotate(45deg);
  margin:       0 auto;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  55%     { transform: translateX(-50%) translateY(10px); }
}

/* Staggered entry animations for hero text */
.reveal-hero {
  opacity:   0;
  transform: translateY(24px);
  animation: heroReveal .9s ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes heroReveal { to { opacity:1; transform:none; } }


/* ═══════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — IntersectionObserver driven
   JS (section 5 of main.js) adds .is-visible when element enters viewport.
   NOTE: must match the class name used in initReveal() in main.js.
═══════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity:   0;
  transition: opacity .75s ease, transform .75s ease;
  transition-delay: var(--delay, 0s);
}
.reveal[data-reveal="up"]   { transform: translateY(40px); }
.reveal[data-reveal="left"] { transform: translateX(40px); }
.reveal.is-visible          { opacity:1; transform:none; }  /* triggered by JS */


/* ═══════════════════════════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════════════════════════ */
.about { background:var(--c-ivory); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap:    var(--sp-xl);
  align-items: center;
}

.about__text p { max-width:55ch; }

/* Image frame with decorative offset border — clipped to parent on mobile */
.about__image-frame {
  position: relative;
  display:  inline-block;
  width:    100%;
  /* Clip overflow on mobile so the decorative border doesn't
     extend outside the viewport and cause horizontal scroll */
  overflow: hidden;
  padding:  12px 12px 0 0; /* offset room instead of negative inset */
}
.about__image-frame::before {
  content:  '';
  position: absolute;
  /* Positive offsets so border stays inside the padded container */
  top:      0;
  right:    0;
  bottom:   12px;
  left:     12px;
  border:   1.5px solid var(--c-border);
  z-index:  0;
  /* Only show decorative border at tablet+ where there's room */
  display: none;
}
@media (min-width: 768px) {
  .about__image-frame { overflow: visible; padding: 0; }
  .about__image-frame::before {
    display: block;
    inset:   -12px -12px 12px 12px;
  }
}
.about__image-frame img {
  position:   relative;
  z-index:    1;
  width:      100%;
  height:     auto;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

/* Dual-image column in About section */
.about__images {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-md);
}

/* Portrait frame — hides gracefully if no photo is provided */
.about__image-frame--portrait {
  position: relative;
  text-align: center;
}
.about__image-frame--portrait img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.about__portrait-caption {
  font-family:   var(--f-display);
  font-size:     var(--text-sm);
  color:         var(--c-muted);
  letter-spacing: 0.04em;
  margin-top:    var(--sp-xs);
  font-style:    italic;
}

/* Stats row */
.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:       var(--sp-md);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--c-border);
}

.stat {
  text-align: center;
  padding:    var(--sp-md);
  background: var(--c-parchment);
  border-radius: var(--radius-md);
}
.stat__number {
  display:     block;
  font-family: var(--f-display);
  font-size:   var(--text-2xl);
  font-weight: 600;
  color:       var(--c-btn);
  line-height: 1.1;
}
.stat__label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-mid);
  margin-top:     4px;
}


/* ═══════════════════════════════════════════════════════════════════════
   COUTURE DETAILS SECTION
═══════════════════════════════════════════════════════════════════════ */
.couture { position:relative; overflow:hidden; }
/* bg and overlay are absolute — clip them to parent bounds */
.couture__bg,
.testimonials__bg { overflow: hidden; }

.couture__bg { position:absolute; inset:0; z-index:0; }
.couture__bg img { width:100%; height:100%; object-fit:cover; }

.couture__overlay { position:absolute; inset:0; z-index:1; background:var(--c-overlay); }

.couture__inner { position:relative; z-index:2; text-align:center; }

.couture__cards {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   var(--sp-lg);
  margin-top:            var(--sp-xl);
}

.couture-card {
  background:    rgba(254,254,254,.97);
  border-radius: var(--radius-md);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  text-align:    left;
  transition:    transform var(--transition), box-shadow var(--transition);
  /* GPU layer for smooth hover animation */
  will-change:   transform;
}
.couture-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 24px 70px rgba(20,10,5,.30);
}

.couture-card__img-wrap { width:100%; height:220px; overflow:hidden; }
.couture-card__img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.couture-card:hover .couture-card__img-wrap img { transform:scale(1.05); }

.couture-card__body { padding: var(--sp-md) var(--sp-md) var(--sp-lg); }
.couture-card__body h3 {
  font-family:   var(--f-display);
  font-size:     var(--text-xl);
  font-weight:   600;
  color:         var(--c-deep);
  margin-bottom: var(--sp-xs);
}
.couture-card__body p { color:var(--c-mid); margin:0; }


/* ═══════════════════════════════════════════════════════════════════════
   PORTFOLIO SECTION
═══════════════════════════════════════════════════════════════════════ */
.portfolio { background:var(--c-ivory); }

/* CSS masonry via column-count — no JS grid libs needed */
.portfolio-grid {
  column-count: 3;
  column-gap:   var(--sp-sm);
  margin-top:   var(--sp-xl);
}

.portfolio-item {
  break-inside:  avoid;
  margin-bottom: var(--sp-sm);
  position:      relative;
}

.portfolio-trigger {
  display:       block;
  width:         100%;
  background:    none;
  border:        none;
  padding:       0;
  cursor:        pointer;
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius-sm);
}
.portfolio-trigger img {
  width:100%; height:auto; display:block;
  transition: transform .5s ease;
}

.portfolio-item__overlay {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content:center;
  background:     rgba(44,26,14,0);
  color:          var(--c-white);
  font-size:      1.5rem;
  opacity:        0;
  transition:     opacity var(--transition), background var(--transition);
}
.portfolio-trigger:hover .portfolio-item__overlay,
.portfolio-trigger:focus-visible .portfolio-item__overlay {
  opacity:1; background:rgba(44,26,14,.45);
}
.portfolio-trigger:hover img { transform:scale(1.04); }


/* ═══════════════════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset:    0;
  z-index:  500;
  display:  flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display:none; }
body.lightbox-open { overflow: hidden; }

.lightbox__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(10,5,2,.92);
  cursor:     pointer;
}

.lightbox__stage {
  position:        relative;
  z-index:         1;
  width:           min(88vw, 960px);
  max-height:      88svh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  border-radius:   var(--radius-md);
}

.lightbox__img {
  display:       block;
  margin:        0 auto;          /* explicit center in stage */
  max-width:     100%;
  max-height:    80svh;
  width:         auto;
  height:        auto;
  object-fit:    contain;
  border:        2px solid rgba(200,144,106,.25);
  box-shadow:    0 8px 40px rgba(0,0,0,.7);
  border-radius: var(--radius-md);
  transition:    opacity .35s ease;
}

.lightbox__caption {
  margin-top:     var(--sp-sm);
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      var(--text-base);
  color:          var(--c-footer-txt);
  text-align:     center;
  letter-spacing: 0.04em;
}

.lightbox__close {
  position:     absolute;
  top:          -3.5rem;
  right:        0;
  background:   transparent;
  border:       none;
  color:        rgba(254,254,254,.7);
  font-size:    1.4rem;
  cursor:       pointer;
  padding:      var(--sp-xs);
  line-height:  1;
  transition:   color var(--transition), transform .2s;
}
.lightbox__close:hover { color:var(--c-white); transform:rotate(90deg); }

.lightbox__nav {
  position:       fixed;          /* relative to viewport, always inside screen */
  top:            50%;
  transform:      translateY(-50%);
  background:     rgba(254,254,254,.1);
  border:         1px solid rgba(254,254,254,.2);
  color:          var(--c-white);
  width:          48px;
  height:         48px;
  border-radius:  50%;
  font-size:      1rem;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     background var(--transition);
}
.lightbox__nav:hover { background:rgba(254,254,254,.25); }
/* Fixed to viewport sides — always inside screen bounds */
.lightbox__nav--prev { left:  max(1.5rem, 3vw); }
.lightbox__nav--next { right: max(1.5rem, 3vw); }


/* ═══════════════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION
═══════════════════════════════════════════════════════════════════════ */
.testimonials { position:relative; overflow:hidden; text-align:center; }

.testimonials__bg { position:absolute; inset:0; z-index:0; }
.testimonials__bg img { width:100%; height:100%; object-fit:cover; }

.testimonials__overlay { position:absolute; inset:0; z-index:1; background:var(--c-overlay); }

.testimonials__inner { position:relative; z-index:2; }

/* Star rating summary block */
.rating-summary {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         var(--sp-sm);
  margin-top:  var(--sp-md);
  margin-bottom: var(--sp-sm);
}
.rating-stars {
  color:     var(--c-rose);
  font-size: var(--text-xl);
  letter-spacing: 2px;
}
.rating-text {
  font-size:      var(--text-sm);
  color:          var(--c-blush);
  letter-spacing: 0.05em;
}

/* Slider container */
.testimonial-slider {
  margin-top:    var(--sp-lg);
  max-width:     720px;
  margin-inline: auto;
  position:      relative;
  overflow:      hidden;
}

.testimonial-track {
  display:    flex;
  transition: transform .5s var(--ease);
  /* GPU compositing for smooth slide */
  will-change: transform;
}

.testimonial-slide { min-width:100%; padding:0 var(--sp-sm); }

blockquote {
  position:        relative;
  background:      rgba(254,254,254,.08);
  border:          1px solid rgba(254,254,254,.15);
  border-radius:   var(--radius-lg);
  padding:         var(--sp-xl) var(--sp-lg) var(--sp-lg);
  backdrop-filter: blur(4px);
}

.testimonial__icon {
  position:   absolute;
  top:        var(--sp-md);
  left:       var(--sp-md);
  font-size:  2rem;
  color:      var(--c-rose);
  opacity:    0.55;
}

blockquote p {
  font-family:   var(--f-display);
  font-style:    italic;
  font-size:     var(--text-lg);
  font-weight:   300;
  color:         var(--c-white);
  line-height:   1.75;
  margin-bottom: var(--sp-md);
}

blockquote footer {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
}

.testimonial__name {
  font-family:    var(--f-display);
  font-style:     normal;
  font-weight:    600;
  font-size:      var(--text-base);
  color:          var(--c-white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.testimonial__location { font-size:var(--text-sm); color:var(--c-blush); }
.testimonial__stars { color:var(--c-rose); letter-spacing:2px; font-size:var(--text-sm); margin-top:4px; }

/* Dot navigation */
.slider-dots {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--sp-sm);
  margin-top:      var(--sp-lg);
}

.slider-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    rgba(254,254,254,.3);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background var(--transition), transform var(--transition);
}
.slider-dot--active,
.slider-dot:hover { background:var(--c-rose); transform:scale(1.3); }


/* ═══════════════════════════════════════════════════════════════════════
   FAQ SECTION
═══════════════════════════════════════════════════════════════════════ */
.faq { background:var(--c-ivory); }
.faq__inner { max-width:760px; }

.faq-list { margin-top:var(--sp-xl); }

.faq-item { border-bottom:1px solid var(--c-border); }
.faq-item:first-child { border-top:1px solid var(--c-border); }

.faq-question {
  width:           100%;
  background:      none;
  border:          none;
  text-align:      left;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-md) 0;
  font-family:     var(--f-display);
  font-size:       var(--text-lg);
  font-weight:     400;
  color:           var(--c-deep);
  gap:             var(--sp-sm);
  transition:      color var(--transition);
}
.faq-question:hover { color:var(--c-btn); }

.faq-icon {
  font-size:   0.75em;
  color:       var(--c-rose);
  flex-shrink: 0;
  transition:  transform .3s ease;
}
.faq-question[aria-expanded="true"] { color:var(--c-btn); }
.faq-question[aria-expanded="true"] .faq-icon { transform:rotate(45deg); }

/* Smooth expand animation via max-height transition */
.faq-answer {
  font-size:      var(--text-base);
  color:          var(--c-mid);
  line-height:    1.8;
  overflow:       hidden;
  max-height:     0;
  padding-bottom: 0;
  transition:     max-height .4s ease, padding .4s ease;
}
.faq-answer:not([hidden]) {
  display:        block;
  max-height:     400px;
  padding-bottom: var(--sp-md);
  padding-right:  clamp(0px, 4vw, var(--sp-xl));
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════════════════════════════ */
.contact-section { background:var(--c-parchment); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap:     var(--sp-xl);
  align-items: start;
}

/* NAP block */
.contact-nap {
  font-style:     normal;
  margin-top:     var(--sp-lg);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-md);
}
.contact-nap__item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-sm);
  font-size:   var(--text-base);
  color:       var(--c-mid);
}
.contact-nap__item i { color:var(--c-rose); width:20px; flex-shrink:0; margin-top:3px; }
.contact-nap__item a { color:var(--c-btn); }
.contact-nap__item a:hover { color:var(--c-btn-hover); }

/* Form card */
.contact-form {
  background:    var(--c-white);
  padding:       var(--sp-lg);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
}

/* Honeypot — hidden from humans, filled by bots */
.form-honeypot { position:absolute; left:-9999px; opacity:0; width:0; height:0; }

.form-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-sm);
}

.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-sm); }

.form-label { font-size:var(--text-sm); font-weight:500; color:var(--c-deep); }
.form-req  { color:var(--c-rose); }
.form-optional { font-size:.85em; color:var(--c-muted); font-weight:300; }

.form-input {
  width:         100%;
  padding:       0.65em 1em;
  font-family:   var(--f-body);
  font-size:     var(--text-base);
  color:         var(--c-deep);
  background:    var(--c-ivory);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  appearance:    none;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder { color:var(--c-muted); }
.form-input:focus {
  outline:      none;
  border-color: var(--c-rose);
  box-shadow:   0 0 0 3px rgba(200,144,106,.2);
}
.form-input.has-error {
  border-color: #b91c1c;
  box-shadow:   0 0 0 3px rgba(185,28,28,.15);
}

/* Custom select arrow */
.form-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7060' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1em center;
  padding-right:       2.5em;
  cursor:              pointer;
}

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

/* Inline field error */
.form-error { font-size:var(--text-xs); color:#b91c1c; display:none; align-items:center; gap:4px; }
.form-error:not(:empty) { display:flex; }

/* Submit button spinner */
.btn-spinner {
  display:       none;
  width:         18px;
  height:        18px;
  border:        2px solid rgba(254,254,254,.3);
  border-top:    2px solid var(--c-white);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
}
.btn.is-loading .btn-text    { display:none; }
.btn.is-loading .btn-spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Response messages */
.form-success, .form-error-msg {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-sm);
  padding:       var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  margin-top:    var(--sp-md);
  font-size:     var(--text-sm);
}
.form-success[hidden], .form-error-msg[hidden] { display:none; }

.form-success  { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.form-success i { color:#16a34a; font-size:1.25rem; flex-shrink:0; }

.form-error-msg { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.form-error-msg i { color:#dc2626; font-size:1.25rem; flex-shrink:0; }
.form-error-msg a { color:#991b1b; text-decoration:underline; }


/* ═══════════════════════════════════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════════════════════════════════ */
.site-footer { background:var(--c-footer-bg); color:var(--c-footer-txt); }

.site-footer__grid {
  display:         grid;
  grid-template-columns: 1fr;
  gap:             var(--sp-xl);
  padding-block:   var(--sp-xl);
}

.site-footer__brand img { width:52px; height:auto; margin-bottom:var(--sp-sm); opacity:.85; }
.site-footer__brand p { font-size:var(--text-sm); color:var(--c-footer-txt); max-width:38ch; opacity:.8; }

.site-footer__heading {
  font-family:    var(--f-display);
  font-size:      var(--text-lg);
  font-weight:    400;
  color:          var(--c-white);
  margin-bottom:  var(--sp-md);
  letter-spacing: 0.03em;
}

.site-footer__nav ul { display:flex; flex-direction:column; gap:var(--sp-sm); }
.site-footer__nav a { font-size:var(--text-sm); color:var(--c-footer-txt); opacity:.8; transition:opacity var(--transition), color var(--transition); }
.site-footer__nav a:hover { opacity:1; color:var(--c-white); }

.site-footer__contact { font-style:normal; }
.site-footer__contact ul { display:flex; flex-direction:column; gap:var(--sp-sm); }
.site-footer__contact li { display:flex; align-items:flex-start; gap:var(--sp-sm); font-size:var(--text-sm); color:var(--c-footer-txt); opacity:.85; }
.site-footer__contact i  { color:var(--c-rose); width:18px; flex-shrink:0; margin-top:3px; }
.site-footer__contact a  { color:var(--c-footer-txt); }
.site-footer__contact a:hover { color:var(--c-white); }

.site-footer__bottom {
  border-top:     1px solid rgba(254,254,254,.08);
  padding-block:  var(--sp-md);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.site-footer__bottom p { font-size:var(--text-xs); color:var(--c-footer-txt); opacity:.55; margin:0; }
.site-footer__image-credit a { color:var(--c-footer-txt); opacity:.6; text-decoration:underline; }
.site-footer__image-credit a:hover { opacity:1; }


/* ═══════════════════════════════════════════════════════════════════════
   FLOATING PHONE BUTTON
═══════════════════════════════════════════════════════════════════════ */
.phone-float {
  position: fixed;
  right:    clamp(16px,3vw,28px);
  bottom:   clamp(16px,3vw,28px);
  z-index:  50;
}
.phone-float a { position:relative; display:flex; align-items:center; justify-content:center; text-decoration:none; }

.phone-float__ring {
  position:      absolute;
  border-radius: 50%;
  background:    var(--c-rose);
  opacity:       0;
  animation:     pulseRing 2.5s ease infinite;
}
.phone-float__ring--1 { width:60px; height:60px; animation-delay:0s; }
.phone-float__ring--2 { width:60px; height:60px; animation-delay:.8s; }
@keyframes pulseRing { 0%{transform:scale(.8);opacity:.4;} 100%{transform:scale(2);opacity:0;} }

.phone-float__icon {
  position:        relative;
  z-index:         1;
  width:           52px;
  height:          52px;
  background:      var(--c-rose);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--c-white);
  font-size:       1.1rem;
  box-shadow:      var(--shadow-md);
  transition:      background var(--transition), transform .2s;
}
.phone-float:hover .phone-float__icon { background:var(--c-btn); transform:scale(1.1); }


/* ═══════════════════════════════════════════════════════════════════════
   BACK-TO-TOP BUTTON
═══════════════════════════════════════════════════════════════════════ */
.back-to-top {
  position:        fixed;
  right:           clamp(16px,3vw,28px);
  bottom:          clamp(90px,12vw,110px);
  z-index:         50;
  width:           44px;
  height:          44px;
  background:      var(--c-btn);
  color:           var(--c-white);
  border:          none;
  border-radius:   50%;
  font-size:       .9rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-sm);
  opacity:         0;
  transform:       translateY(12px);
  pointer-events:  none;
  transition:      opacity var(--transition), transform var(--transition), background var(--transition);
}
.back-to-top.is-visible { opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover { background:var(--c-btn-hover); transform:translateY(-2px); }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — mobile-first min-width layering
═══════════════════════════════════════════════════════════════════════ */

/* ── ≥ 480px: small phones ── */
@media (min-width: 480px) {
  .about__stats { grid-template-columns: repeat(2,1fr); }
}

/* ── ≥ 640px: tablets ── */
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { column-count:2; }
  .about__stats { grid-template-columns: repeat(4,1fr); }
}

/* ── ≥ 768px: large tablets ── */
@media (min-width: 768px) {
  .about__grid    { grid-template-columns: 1fr 1fr; }
  .contact__grid  { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { column-count:3; }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1.5fr; }
}

/* ── ≥ 1024px: desktop ── */
@media (min-width: 1024px) {
  .primary-nav { display:flex !important; }
  .nav-toggle  { display:none; }
  .section-pad { padding-block: var(--sp-2xl); }
  .couture__cards { grid-template-columns: repeat(3,1fr); }
}

/* ── Mobile nav overlay (≤ 1023px) ── */
@media (max-width: 1023px) {
  .nav-toggle { display:flex; }

  /*
    Full-screen slide-in nav panel.
    Starts off-screen right (translateX(100%)).
    JS adds .is-open → slides in.
  */
  .primary-nav {
    position:        fixed;
    inset:           0;
    background:      var(--c-white);
    z-index:         150;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transform:       translateX(100%);
    transition:      transform .4s var(--ease);
    padding:         var(--header-h) var(--sp-lg) var(--sp-lg);
  }
  .primary-nav.is-open { transform:none; }

  .primary-nav ul { flex-direction:column; align-items:center; gap:var(--sp-lg); }

  /* Large italic type for mobile menu — premium feel */
  .nav-link {
    font-family:  var(--f-display);
    font-size:    var(--text-3xl);
    font-style:   italic;
    font-weight:  300;
    color:        var(--c-deep) !important;
  }
  .nav-link::after { display:none; } /* no underline on mobile large type */

  /* CTA in mobile menu: small, outlined */
  .nav-link--cta {
    font-family:    var(--f-body) !important;
    font-style:     normal !important;
    font-size:      var(--text-sm) !important;
    border:         1.5px solid var(--c-btn) !important;
    border-radius:  var(--radius-sm) !important;
    color:          var(--c-btn) !important;
    padding:        0.5em 1.5em !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav-link--cta:hover { background:var(--c-btn) !important; color:var(--c-white) !important; }

  /* Reduce padding on mobile so header doesn't eat too much space */
  .site-header { padding:1rem 1.25rem; }
}

/* ── Very small phones: ≤ 375px ── */
@media (max-width: 375px) {
  .hero__actions { flex-direction:column; align-items:center; }
  .btn { width:100%; max-width:280px; }
  .portfolio-grid { column-count:1; }
  .about__stats   { grid-template-columns:1fr 1fr; }
  /* Lightbox nav inside the viewport on tiny screens */
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .lightbox__nav { width:36px; height:36px; font-size:.8rem; }
}

/* ── Reduce motion: WCAG 2.1 2.3.3 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    transition-duration:       0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior:auto; }
}


/* ════════════════════════════════════════════════════════════════
   ADDITIONS — Phase 4 enhancements
   About portrait frame, testimonial arrows, lightbox counter,
   thank-you modal, phone reveal button, hCaptcha, decorative elements
════════════════════════════════════════════════════════════════ */

/* ── About: decorative portrait frame ───────────────────────── */
.about__portrait-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.about__portrait-frame {
  position: relative;
  display: inline-block;
  width: min(420px, 100%);
}

.about__portrait-inner {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(44,26,14,.22), 0 4px 16px rgba(44,26,14,.10);
}

.about__portrait-inner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
  transition: transform 0.7s ease;
}
.about__portrait-frame:hover .about__portrait-inner img {
  transform: scale(1.03);
}

/* Four gilded corner ornaments */
.about__portrait-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  z-index: 2;
  pointer-events: none;
}
.about__portrait-corner::before,
.about__portrait-corner::after {
  content: '';
  position: absolute;
  background: var(--c-accent);
  opacity: 0.85;
}
.about__portrait-corner::before { width: 100%; height: 2px; }
.about__portrait-corner::after  { width: 2px;  height: 100%; }

.about__portrait-corner--tl { top: -8px; left: -8px; }
.about__portrait-corner--tl::before { top: 0; left: 0; }
.about__portrait-corner--tl::after  { top: 0; left: 0; }

.about__portrait-corner--tr { top: -8px; right: -8px; }
.about__portrait-corner--tr::before { top: 0; right: 0; left: auto; }
.about__portrait-corner--tr::after  { top: 0; right: 0; left: auto; }

.about__portrait-corner--bl { bottom: -8px; left: -8px; }
.about__portrait-corner--bl::before { bottom: 0; top: auto; left: 0; }
.about__portrait-corner--bl::after  { bottom: 0; top: auto; left: 0; }

.about__portrait-corner--br { bottom: -8px; right: -8px; }
.about__portrait-corner--br::before { bottom: 0; top: auto; right: 0; left: auto; }
.about__portrait-corner--br::after  { bottom: 0; top: auto; right: 0; left: auto; }

/* Badge: Est. 2008 Michigan */
.about__portrait-badge {
  position: absolute;
  bottom: 1.5rem;
  right: -1rem;
  background: var(--c-deep);
  color: var(--c-ivory);
  padding: .6rem .9rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 72px;
}
.about__portrait-badge-line {
  font-family: var(--ff-body);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.about__portrait-badge-year {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-accent);
}

/* ── Testimonial: prev/next arrow buttons ────────────────────── */
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.testimonial-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: var(--c-ivory);
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  flex-shrink: 0;
}
.testimonial-arrow:hover {
  background: rgba(200,144,106,.25);
  border-color: var(--c-accent);
  transform: scale(1.08);
}
.testimonial-arrow:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Shrink dots row when wrapped in controls */
.testimonial-controls .slider-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0;
}

/* ── Lightbox: loading spinner + counter ─────────────────────── */
.lightbox__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  z-index: 1;
}
.lightbox.is-loading .lightbox__spinner { opacity: 1; }
.lightbox__spinner::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 50%;
  animation: lb-spin .7s linear infinite;
}
@keyframes lb-spin { to { transform:rotate(360deg); } }

.lightbox__img {
  transition: opacity .3s ease, transform .3s ease !important;
}
.lightbox.is-loading .lightbox__img { opacity: 0 !important; transform: scale(.97) !important; }

.lightbox__counter {
  position: absolute;
  bottom: -2rem;
  right: 0;
  font-family: var(--ff-body);
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
  pointer-events: none;
}

/* ── Phone reveal button ──────────────────────────────────────── */
/* ── Floating phone button — no background, no border, no square ─── */
.phone-float__btn {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  position:    relative;
  display:     flex;
  align-items: center;
  justify-content: center;
}
.phone-float__btn:focus-visible { outline: none; }
.phone-float__btn:focus-visible .phone-float__icon {
  box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-rose);
}

/* ── Contact + footer "Click to Call" link ──────────────────────── */
.call-link {
  display:      inline-flex;
  align-items:  center;
  gap:          .5rem;
  color:        inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor:       pointer;
  transition:   color var(--transition);
  background:   none;
  border:       none;
  padding:      0;
  font:         inherit;
}
.call-link:hover  { color: var(--c-rose); text-decoration: underline; }
.call-link .fa-phone { color: var(--c-rose); }

.call-link--footer {
  color: var(--c-footer-txt, #e8ddd5);
  font-size: .9rem;
}
.call-link--footer:hover {
  background: transparent;
  color: var(--c-accent);
}

/* ── hCaptcha wrapper ──────────────────────────────────────────── */
.h-captcha {
  margin: .5rem 0 1rem;
  display: flex;
  justify-content: flex-start;
}

/* ── Responsive adjustments for new elements ─────────────────── */
@media (max-width: 640px) {
  .about__portrait-badge { right: -.5rem; bottom: 1rem; }
  .testimonial-controls  { gap: .5rem; }
  .testimonial-arrow     { width: 38px; height: 38px; font-size: .8rem; }
  .lightbox__counter     { bottom: -1.75rem; font-size: .72rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONS v3.0 — testimonial arrows · thank-you · phone reveal
   section ornaments · portrait frame enhancements
═══════════════════════════════════════════════════════════════════════ */

/* ── Testimonial prev/next arrow buttons ─────────────────────────── */
.testimonial-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-md);
  margin-top:      var(--sp-lg);
}
.testimonial-arrow {
  width:            44px;
  height:           44px;
  border-radius:    50%;
  border:           1px solid rgba(200,144,106,.5);
  background:       rgba(200,144,106,.12);
  color:            var(--c-rose);
  font-size:        .9rem;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background var(--transition), border-color var(--transition), transform .2s;
  flex-shrink:      0;
}
.testimonial-arrow:hover {
  background:     rgba(200,144,106,.3);
  border-color:   var(--c-rose);
  transform:      scale(1.1);
}
.testimonial-dots-wrap {
  display:    flex;
  align-items: center;
  gap:         var(--sp-xs);
}

/* ── Beautiful Thank-You message ─────────────────────────────────── */
.form-thankyou {
  text-align:    center;
  padding:       var(--sp-2xl) var(--sp-xl);
  border:        1px solid rgba(200,144,106,.35);
  border-radius: var(--radius-lg);
  background:    linear-gradient(135deg, rgba(200,144,106,.07) 0%, rgba(250,246,241,.6) 100%);
  position:      relative;
  overflow:      hidden;
  outline:       none;
}
.form-thankyou::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8906A' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.form-thankyou__icon {
  font-size:   2.8rem;
  color:       var(--c-rose);
  margin-bottom: var(--sp-sm);
  display:     block;
  animation:   bounceIn .6s ease both;
}
@keyframes bounceIn {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.1); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); opacity: 1; }
}
.form-thankyou__title {
  font-family:    var(--f-display);
  font-size:      var(--text-2xl);
  color:          var(--c-mahogany);
  margin-bottom:  var(--sp-sm);
  letter-spacing: .04em;
}
.form-thankyou__body {
  font-size:    var(--text-base);
  color:        var(--c-text);
  max-width:    38ch;
  margin:       0 auto;
  line-height:  1.7;
}
.form-thankyou__signature {
  margin-top:   var(--sp-lg);
  font-family:  var(--f-display);
  font-style:   italic;
  font-size:    var(--text-lg);
  color:        var(--c-rose);
}



/* ── Section ornamental dividers ────────────────────────────────── */
.section-ornament {
  display:    flex;
  align-items: center;
  justify-content: center;
  gap:        var(--sp-sm);
  margin:     var(--sp-lg) auto 0;
  opacity:    .65;
}
.section-ornament::before,
.section-ornament::after {
  content:    '';
  flex:       1;
  max-width:  80px;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
}
.section-ornament__icon {
  color:      var(--c-rose);
  font-size:  .9rem;
}

/* ── About portrait frame — enhanced ───────────────────────────── */
.about__portrait-frame {
  box-shadow:     0 12px 48px rgba(44,26,14,.18), 0 2px 8px rgba(44,26,14,.08);
}
.about__portrait-inner {
  border-radius: var(--radius-md);
  overflow:      hidden;
}
.about__portrait-inner img {
  transition: transform .7s ease;
  border-radius: var(--radius-md);
}
.about__portrait-frame:hover .about__portrait-inner img {
  transform: scale(1.03);
}
.about__portrait-badge {
  background:  linear-gradient(135deg, var(--c-mahogany) 0%, var(--c-dark) 100%);
  box-shadow:  0 4px 16px rgba(44,26,14,.35);
}

/* ── Portfolio grid — subtle fade-in shimmer on hover ──────────── */
.portfolio-item {
  border-radius: var(--radius-md);
  overflow:      hidden;
}
.portfolio-trigger img {
  transition: transform .5s ease;
}
.portfolio-trigger:hover img  { transform: scale(1.05); }
.portfolio-item__overlay {
  border-radius: var(--radius-md);
}

/* ── Lightbox nav button improvements ──────────────────────────── */
.lightbox__nav {
  width:  52px;
  height: 52px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background:  rgba(200,144,106,.15);
  border:      1px solid rgba(200,144,106,.4);
  color:       var(--c-white);
}
.lightbox__nav:hover { background: rgba(200,144,106,.45); }
.lightbox__close {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox__backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Couture & about section — subtle decorative border top ─────── */
.couture::before,
.about::before {
  content:    '';
  display:    block;
  width:      100%;
  height:     1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-rose) 20%, rgba(200,144,106,.6) 50%, var(--c-rose) 80%, transparent 100%);
  opacity:    .4;
}

/* ── Responsive fixes ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .testimonial-arrow  { width: 38px; height: 38px; font-size: .8rem; }
  .form-thankyou      { padding: 2rem 1.25rem 1.75rem; }
  .form-thankyou__title { font-size: var(--text-xl); }
  .lightbox__nav--prev { left: max(0.75rem, 2vw); }
  .lightbox__nav--next { right: max(0.75rem, 2vw); }
  .lightbox__close     { top: .75rem; right: .75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THANK-YOU MODAL
   A full-screen overlay popup that opens on successful form submission.
   Uses solid opaque colors — no transparency on the card itself.
   Closes on backdrop click, close button, or Escape.
═══════════════════════════════════════════════════════════════════════ */
.thankyou-modal {
  position:        fixed;
  inset:           0;
  z-index:         600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-md);
  animation:       tyFadeIn .35s ease both;
}
.thankyou-modal[hidden] { display: none; }

@keyframes tyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.thankyou-modal__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(16, 8, 3, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor:     pointer;
}

/* The card — fully solid, never transparent */
.thankyou-modal__card {
  position:        relative;
  z-index:         1;
  background:      #FAF6F1;         /* explicit ivory — not a CSS variable */
  max-width:       480px;
  width:           100%;
  text-align:      center;
  border-radius:   14px;
  overflow:        hidden;          /* clip the accent bar */
  box-shadow:      0 32px 90px rgba(0,0,0,.45),
                   0 0 0 1px rgba(200,144,106,.25);
  animation:       tySlideUp .45s cubic-bezier(.16,1,.3,1) .05s both;
}

@keyframes tySlideUp {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Gradient accent stripe across the top */
.thankyou-modal__accent-bar {
  height:     4px;
  background: linear-gradient(90deg,
    #C8906A 0%,
    #E8B48A 35%,
    #C8906A 65%,
    #A0694A 100%);
}

/* Icon circle */
.thankyou-modal__icon-wrap {
  position:   relative;
  width:       72px;
  height:      72px;
  margin:      2.25rem auto 0;
}
.thankyou-modal__icon-ring {
  position:        absolute;
  inset:           0;
  border-radius:   50%;
  background:      rgba(200,144,106,.12);
  border:          1.5px solid rgba(200,144,106,.35);
}
.thankyou-modal__icon {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.75rem;
  color:           #C8906A;
}

/* Ornamental dots */
.thankyou-modal__ornament {
  font-size:      .65rem;
  letter-spacing: .3em;
  color:          #C8906A;
  opacity:        .7;
  margin:         1.25rem auto .25rem;
}

.thankyou-modal__heading {
  font-family:    'Cormorant Garamond', Georgia, serif;
  font-size:      clamp(1.45rem, 4vw, 1.85rem);
  font-weight:    500;
  color:          #2C1A0E;
  line-height:    1.2;
  margin:         0 auto .75rem;
  padding:        0 2rem;
}

/* Thin rose-gold rule */
.thankyou-modal__rule {
  width:      52px;
  height:     1.5px;
  background: linear-gradient(90deg, transparent, #C8906A, transparent);
  margin:     0 auto 1.25rem;
}

.thankyou-modal__body {
  font-family:    'Jost', Arial, sans-serif;
  font-size:      1rem;
  line-height:    1.75;
  color:          #3D2010;
  padding:        0 2.25rem;
  margin-bottom:  1rem;
}

.thankyou-modal__sign {
  font-family:    'Cormorant Garamond', Georgia, serif;
  font-style:     italic;
  font-size:      1.05rem;
  color:          #C8906A;
  margin-bottom:  2rem;
}

.thankyou-modal__close {
  display:         inline-block;
  margin:          0 auto 2.5rem;
  padding:         .7rem 2.75rem;
  background:      #6B3520;
  color:           #FAF6F1;
  border:          none;
  border-radius:   6px;
  font-family:     'Jost', Arial, sans-serif;
  font-size:       .875rem;
  font-weight:     600;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      background .2s, transform .15s;
}
.thankyou-modal__close:hover {
  background:  #C8906A;
  transform:   translateY(-1px);
}
.thankyou-modal__close:focus-visible {
  outline:        2px solid #C8906A;
  outline-offset: 3px;
}

/* ── Footer map ─────────────────────────────────────────────────── */
.site-footer__map { min-width: 0; }

.footer-map-wrap iframe {
  width:         100%;
  height:        180px;
  border:        none;
  border-radius: 8px;
  display:       block;
  filter:        sepia(.15) contrast(.95);  /* warm tint to match palette */
}

.footer-map__address {
  margin-top:  .6rem;
  font-size:   .85rem;
  color:       var(--c-footer-txt);
  opacity:     .75;
  display:     flex;
  align-items: center;
  gap:         .4rem;
}
.footer-map__address .fa-map-marker-alt { color: var(--c-rose); }

/* ── Footer grid: add 4th column for map ─────────────────────────── */
@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}