/* ============================================================
   K Studio Wigs — Stylesheet
   ============================================================ */

/* ===========================
   Custom Properties
   =========================== */
:root {
  --cream:       #F5F1EC;
  --warm-taupe:  #B7A79A;
  --deep-mocha:  #4E4038;
  --soft-sand:   #D8CFC7;
  --accent-black:#1E1E1E;
  --body-text:   #5a5550;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --max-width: 1200px;
  --section-y: 96px;
  --section-x: 40px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--accent-black);
  background-color: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  text-decoration: none;
  color: inherit;
}

/* ===========================
   Typography
   =========================== */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.8rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.9rem); }
h3 { font-size: 1.2rem; font-weight: 500; }

/* ===========================
   Utilities
   =========================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-x);
}

.section-title {
  text-align: center;
}

.divider {
  border: none;
  border-top: 1px solid var(--warm-taupe);
  width: 56px;
  margin: 14px 0 36px;
}

.divider--center {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 56px;
}

/* ===========================
   Buttons
   =========================== */
.btn {
  display: inline-block;
  padding: 13px 32px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: #fff;
  color: var(--deep-mocha);
  outline: none;
}

/* ===========================
   Section 1: Hero
   =========================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

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

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(25, 16, 10, 0.38);
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 100px 24px 56px;
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__header {
  margin-bottom: 48px;
  width: 100%;
}

.logo {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.hero__logo-img {
  width: 380px;
  max-width: 90%;
  display: block;
  margin: 0 auto;
}

.hero__content h1 {
  margin-bottom: 20px;
}

.hero__sub {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0.88;
  margin-bottom: 44px;
}

.hero__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===========================
   Section 2: Features / Quality
   =========================== */
.features {
  padding: var(--section-y) var(--section-x);
  background-color: var(--cream);
}

.features .container {
  padding: 0;
}

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

.features__text h2 {
  margin-bottom: 14px;
}

.features__text p {
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.9;
  margin-bottom: 16px;
}

.features__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.features__images img {
  width: 100%;
  aspect-ratio: 0.6669;
  object-fit: cover;
}

.features__images img:only-child {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}

/* ===========================
   Section 2B: Our Process
   =========================== */
.process {
  padding: var(--section-y) var(--section-x);
  background-color: var(--deep-mocha);
}

.process .container {
  padding: 0;
}

.process .section-title {
  color: var(--cream);
}

.process .divider {
  border-color: var(--warm-taupe);
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 56px;
  margin-top: 48px;
}

.process__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process__number {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--warm-taupe);
  line-height: 1;
  margin-bottom: 4px;
}

.process__step h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--cream);
}

.process__step p {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--cream);
}

/* ===========================
   Section 3: Gallery
   =========================== */
.gallery {
  padding: var(--section-y) var(--section-x);
  background-color: var(--soft-sand);
}

.gallery .container {
  padding: 0;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gallery__item {
  display: flex;
  flex-direction: column;
}

/* Placeholders shown while data/gallery.json loads. Matching the 840x1040 aspect ratio
   of the real images keeps the page from jumping when the products arrive. */
.gallery__skeleton {
  aspect-ratio: 840 / 1040;
  background: var(--soft-sand);
  opacity: 0.5;
  animation: gallery-skeleton 1.4s ease-in-out infinite;
}

@keyframes gallery-skeleton {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__skeleton { animation: none; }
}

.gallery__error,
.faq-error {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--body-text);
}

.gallery__item img {
  width: 100%;
  object-fit: cover;
  margin-bottom: 18px;
}

.gallery__category {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-taupe);
  margin-bottom: 6px;
}

.gallery__item h3 {
  color: var(--deep-mocha);
}

/* ── Gallery caption ── */
.gallery__item h3 {
  font-size: 1.2rem;
  font-family: var(--font-serif);
  font-weight: 500;
}

.gallery__item .gallery__category {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-taupe);
  margin-top: 4px;
}

.g-modal__shopify-btn .shopify-buy-frame,
.g-modal__shopify-btn .shopify-buy-frame iframe {
  width: fit-content !important;
  min-width: 0 !important;
}

.gallery__item--centered {
  grid-column: 2;
}

/* ── Carousel ── */
.carousel {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}

.carousel__img {
  display: none;
  width: 100%;
  object-fit: cover;
}

.gallery__item .carousel__img {
  margin-bottom: 0;
}

video.carousel__img {
  aspect-ratio: 21 / 26;
  height: auto;
  /* Mobile Safari handles taps on a <video> itself, so the card's click handler
     never sees them. Let taps fall through to .carousel instead. */
  pointer-events: none;
}

.carousel__img.is-active {
  display: block;
}

.carousel__btn {
  touch-action: manipulation;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 10px 8px;
  line-height: 1;
  transition: color 0.2s;
  z-index: 1;
}

.carousel__btn:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* Kept clear of the screen edge: taps within ~16px of the edge are swallowed by
   the browser's back/forward edge gesture on iOS and Android. */
.carousel__btn--prev { left: 4px; }
.carousel__btn--next { right: 4px; }

@media (max-width: 768px) {
  .carousel__btn {
    padding: 16px 14px;
  }

  .carousel__btn--prev { left: 18px; }
  .carousel__btn--next { right: 18px; }
}

.carousel__pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(30, 30, 30, 0.82);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s ease, transform 0.12s ease;
  z-index: 2;
}

.carousel__pill:hover {
  background: rgba(78, 64, 56, 0.95);
  transform: scale(1.04);
}

.carousel__pill:active {
  background: rgba(78, 64, 56, 1);
  transform: scale(0.97);
}

/* ===========================
   Product Detail Page
   =========================== */
.g-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

.g-modal.is-open {
  transform: translateX(0);
  visibility: visible;
}

.g-modal__topbar {
  flex: none;
  display: flex;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--soft-sand);
  background: var(--cream);
}

.g-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-mocha);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.g-modal__back:hover {
  opacity: 0.6;
}

.g-modal__inner {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.g-modal__carousel {
  position: relative;
  flex: 0 0 55%;
  background: var(--cream);
}

.g-modal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.g-modal__img.is-active {
  display: block;
}

.g-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  touch-action: manipulation;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 12px 10px;
  line-height: 1;
  transition: color 0.2s;
  z-index: 1;
}

.g-modal__arrow:hover {
  color: #fff;
}

@media (min-width: 641px) {
  .g-modal__arrow { color: rgba(0, 0, 0, 0.45); }
  .g-modal__arrow:hover { color: #000; }
}

.g-modal__arrow--prev { left: 8px; }
.g-modal__arrow--next { right: 8px; }

.g-modal__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
  gap: 16px;
  overflow-y: auto;
}

.g-modal__title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--accent-black);
  line-height: 1.2;
}

.g-modal__price {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-taupe);
}

.g-modal__desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--body-text);
  line-height: 1.75;
  margin-top: 8px;
}

.g-modal__details {
  margin-top: 24px;
}

.g-modal__details[hidden] {
  display: none;
}

.g-modal__detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 24px;
  border-bottom: 1px solid var(--soft-sand);
}

.g-modal__detail-row:last-child {
  border-bottom: none;
}

.g-modal__details dt {
  display: block;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-taupe);
  padding: 13px 0;
}

.g-modal__details dd {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-sans);
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--body-text);
  margin: 0;
  padding: 13px 0;
}

.g-modal__cta {
  align-self: flex-start;
  margin-top: 8px;
}

/* clickable hint on gallery thumbnails.
   The card itself carries the cursor: iOS Safari only dispatches a click that
   bubbles to a listener when the tapped element or an ancestor is clickable,
   so the tapped <img>/<video> needs a clickable chain up to .gallery__item. */
.gallery__item,
.gallery__item .carousel,
.gallery__item .carousel__img,
.gallery__item h3,
.gallery__item .gallery__category {
  cursor: pointer;
}

@media (max-width: 640px) {
  .g-modal__topbar {
    padding: 14px 20px;
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .g-modal__inner {
    flex-direction: column;
    overflow-y: auto;
  }

  .g-modal__carousel {
    flex: none;
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    min-height: 280px;
  }

  .g-modal__info {
    flex: none;
    justify-content: flex-start;
    overflow-y: visible;
    padding: 20px 20px 40px;
    gap: 10px;
  }

  .g-modal__title {
    font-size: 1.5rem;
  }

  .g-modal__price {
    font-size: 0.72rem;
  }

  .g-modal__desc {
    font-size: 0.82rem;
    line-height: 1.6;
    margin-top: 0;
  }

  .g-modal__details {
    margin-top: 0;
    padding-top: 12px;
  }

  .g-modal__details dt {
    font-size: 0.72rem;
  }

  .g-modal__details dd {
    font-size: 0.85rem;
  }

  .g-modal__detail-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0 16px;
  }
}

/* ===========================
   Section 4: Testimonials
   =========================== */
.testimonials {
  padding: var(--section-y) var(--section-x);
  background-color: var(--cream);
}

.testimonials .container {
  padding: 0;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.testimonial {
  display: flex;
  flex-direction: column;
}

.testimonial img {
  width: 100%;
  object-fit: cover;
  margin-bottom: 24px;
}

.testimonial blockquote {
  font-family: var(--font-sans);
  font-size: 0.87rem;
  line-height: 1.85;
  color: var(--body-text);
  font-style: normal;
  margin-bottom: 18px;
}

.testimonial cite {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--deep-mocha);
}

/* ===========================
   Section 5: About (reversed)
   =========================== */
.about {
  padding: var(--section-y) var(--section-x);
  background-color: var(--soft-sand);
}

.about .container {
  padding: 0;
}

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

.about__images {
  justify-self: end;
}

.about__images img {
  width: 100%;
  max-width: 380px;
  object-fit: cover;
}

.about__text {
  max-width: 480px;
}

.about__text h2 {
  margin-bottom: 14px;
}

.about__text p {
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.9;
  margin-bottom: 16px;
}

/* ===========================
   Section 6: Closing Banner
   =========================== */
.banner {
  position: relative;
  height: 480px;
  background: url('https://placehold.co/1600x480/4E4038/B7A79A?text=+') center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, 0.28);
}

.banner__overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 24px;
  color: rgba(255, 255, 255, 0.88);
}

.banner__overlay p {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ===========================
   Footer
   =========================== */
.footer {
  background-color: var(--deep-mocha);
  color: var(--cream);
  padding: 32px var(--section-x);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0;
}

.footer__nav {
  display: flex;
  gap: 32px;
}

.footer__nav-link {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s;
}

.footer__nav-link:hover {
  opacity: 1;
}

.footer__bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 241, 236, 0.12);
}

.footer__copy {
  font-size: 0.78rem;
  font-weight: 300;
  opacity: 0.55;
}

.footer__social {
  display: flex;
  gap: 22px;
}

.footer__social a {
  color: var(--cream);
  opacity: 0.9;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
}

.footer__social a:hover,
.footer__social a:focus-visible {
  opacity: 1;
  outline: none;
}

/* ===========================
   Site Nav
   =========================== */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 22px 40px;
}

.site-nav__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.site-nav__list {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.site-nav__list a:hover {
  opacity: 1;
}

/* ── Desktop submenus ──
   Hover-or-focus driven, no JS. The panel is anchored to the bottom edge of its
   parent item with no gap between them, so the pointer can travel into it without
   the menu closing. Below 768px these rules are undone and the links go flat. */
.site-nav__list > li {
  position: relative;
}

/* Top-level labels stay on one line so the caret can't wrap away from its label. */
.site-nav__list > li > a {
  white-space: nowrap;
}

.site-nav__item--has-sub > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
}

.site-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  list-style: none;
  margin: 0;
  /* No panel — the links float directly below the parent and pick up the same
     treatment as the top-level ones. The top padding is the gap to the parent and
     is part of the hover area, so the pointer can cross into the submenu. */
  padding: 16px 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  z-index: 4;
}

.site-nav__item--has-sub:hover > .site-nav__sub,
.site-nav__item--has-sub:focus-within > .site-nav__sub {
  opacity: 1;
  visibility: visible;
}

.site-nav__sub a {
  white-space: nowrap;
}

.site-nav__toggle {
  display: none;
}

/* ===========================
   Responsive — Tablet (≤ 1024px)
   =========================== */
@media (max-width: 1024px) {
  :root {
    --section-y: 72px;
    --section-x: 32px;
  }

  .features__grid,
  .about__grid {
    gap: 48px;
  }

  /* Five top-level labels on one unwrapped line need the tighter gap to fit
     between 769px and the desktop widths. */
  .site-nav {
    padding: 22px 24px;
  }

  .site-nav__list {
    gap: 22px;
  }

  .gallery__grid,
  .testimonials__grid {
    gap: 20px;
  }

  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* ===========================
   Responsive — Mobile (≤ 768px)
   =========================== */
@media (max-width: 768px) {
  :root {
    --section-y: 56px;
    --section-x: 20px;
  }

  /* Two-column sections stack vertically */
  .features__grid,
  .about__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .process__steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Gallery and testimonials: single column */
  .gallery__item--centered {
    grid-column: auto;
  }

  .gallery__grid,
  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Nav — hamburger */
  .site-nav {
    padding: 18px 20px;
  }

  .site-nav__inner {
    justify-content: flex-start;
  }

  .site-nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 101;
    position: relative;
  }

  .site-nav__toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: #fff;
    transition: transform 0.25s, opacity 0.25s;
  }

  .site-nav.is-open .site-nav__toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .site-nav.is-open .site-nav__toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-nav.is-open .site-nav__toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .site-nav__list {
    display: none;
    position: fixed;
    inset: 0;
    background: #4E4038;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Nine links rather than the original eight, and the panel is full-screen —
       a tighter gap plus scroll keeps it usable on short handsets. */
    gap: 26px;
    padding: 80px 20px 40px;
    overflow-y: auto;
    z-index: 99;
  }

  .site-nav.is-open .site-nav__list {
    display: flex;
  }

  .site-nav__list a {
    font-size: 1rem;
    opacity: 1;
    letter-spacing: 0.1em;
  }

  /* Submenus are a desktop-only space saver. On mobile the parent and its children
     sit in one flat list, evenly spaced, with nothing behind a hover. */
  .site-nav__list > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    position: static;
  }

  .site-nav__item--has-sub > a::after {
    display: none;
  }

  .site-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    align-items: center;
    gap: 26px;
    padding: 0;
  }

  /* Hero buttons stack */
  .hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero__header {
    margin-bottom: 48px;
  }

  .banner {
    height: 360px;
  }

  /* Footer stacks and centers */
  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ===========================
   Responsive — Small mobile (≤ 480px)
   =========================== */
@media (max-width: 480px) {
  :root {
    --section-y: 48px;
    --section-x: 16px;
  }

  .hero {
    min-height: 100svh;
  }
}

/* ============================================================
   Consultation Form Page
   ============================================================ */

/* ── Page Header ── */
.page-header {
  background-color: var(--cream);
  border-bottom: 1px solid var(--soft-sand);
  padding: 20px var(--section-x);
  position: sticky;
  top: 0;
  z-index: 100;
}

.page-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.page-header__logo {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--deep-mocha);
}

.page-header__back {
  font-size: 0.78rem;
  color: var(--warm-taupe);
  transition: color 0.2s;
}

.page-header__back:hover {
  color: var(--deep-mocha);
}

/* ── Page Hero ── */
.page-hero {
  background-color: var(--deep-mocha);
  color: var(--cream);
  padding: 64px var(--section-x);
  text-align: center;
}

.page-hero__content h1 {
  margin-bottom: 12px;
}

.page-hero__content p {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.page-hero--full {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--section-x);
}

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

.page-hero--full::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.page-hero--full .page-hero__content {
  position: relative;
  z-index: 2;
}

/* ── Form layout ── */
.form-main {
  padding: 64px 0 96px;
  background-color: var(--cream);
}

.form-container {
  max-width: 820px;
}

/* ── Fieldset / Section ── */
.form-section {
  border: none;
  border-top: 1px solid var(--soft-sand);
  padding: 40px 0 0;
  margin-bottom: 40px;
}

.form-section legend {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--deep-mocha);
  padding: 0 0 20px;
  width: 100%;
}

/* ── Form Grid ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.form-grid--narrow {
  grid-template-columns: 2fr 1fr;
}

/* ── Form Field ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field--indent {
  margin-top: 12px;
  padding-left: 24px;
}

.form-field--narrow {
  max-width: 260px;
}

label {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--accent-black);
}

.required {
  color: var(--warm-taupe);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--accent-black);
  background-color: #fff;
  border: 1px solid var(--soft-sand);
  padding: 11px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
  border-color: var(--warm-taupe);
}

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

/* ── Dollar prefix input ── */
.input-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--soft-sand);
  background: #fff;
  transition: border-color 0.2s;
}

.input-prefix:focus-within {
  border-color: var(--warm-taupe);
}

.input-prefix span {
  padding: 0 12px;
  font-size: 0.9rem;
  color: var(--warm-taupe);
  user-select: none;
}

.input-prefix input {
  border: none;
  padding-left: 0;
  flex: 1;
}

.input-prefix input:focus {
  border: none;
}

/* ── Form Group (for checkbox/radio clusters) ── */
.form-group {
  margin-bottom: 28px;
}

.form-group__label {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--accent-black);
  margin-bottom: 12px;
}

.form-group__hint {
  font-size: 0.78rem;
  color: var(--warm-taupe);
  margin-bottom: 12px;
}

/* ── Check / Radio Groups ── */
.check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-group--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 32px;
}

.check-group--wrap {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 32px;
}

/* ── Individual Check Label ── */
.check-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--accent-black);
  line-height: 1.4;
}

.check-label span {
  flex-shrink: 0;
}

/* Custom checkbox */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--warm-taupe);
  background-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  top: 2px;
  transition: background-color 0.15s, border-color 0.15s;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:checked {
  background-color: var(--deep-mocha);
  border-color: var(--deep-mocha);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

input[type="radio"]:checked {
  background-color: var(--deep-mocha);
  border-color: var(--deep-mocha);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Inline text input next to a radio/checkbox */
.check-label--has-text {
  align-items: center;
  flex-wrap: wrap;
}

.inline-text {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  border: none;
  border-bottom: 1px solid var(--soft-sand);
  background: transparent;
  padding: 2px 6px;
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}

.inline-text:focus {
  border-bottom-color: var(--warm-taupe);
}

input[type="date"].inline-text {
  width: 160px;
}

/* ── File Upload ── */
.file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--soft-sand);
  background: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-mocha);
  cursor: pointer;
  transition: border-color 0.2s;
}

.file-label:hover {
  border-color: var(--warm-taupe);
}

.file-label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.file-hint {
  font-size: 0.78rem;
  color: var(--warm-taupe);
  margin-top: 8px;
}

/* ── Agreement Section ── */
.form-section--agreement {
  margin-bottom: 40px;
}

.form-section--agreement legend {
  padding: 0 0 16px;
}

.agreement-box {
  background-color: #faf8f5;
  border: 1px solid var(--soft-sand);
  padding: 28px 32px 32px;
}

.agreement-terms {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agreement-terms li {
  font-size: 0.875rem;
  color: var(--body-text);
  line-height: 1.6;
}

.agreement-confirm {
  font-size: 0.875rem;
  font-weight: 400;
}

/* ── Submit Button ── */
.form-submit {
  text-align: center;
  padding-top: 8px;
}

.btn--submit {
  background-color: transparent;
  color: var(--deep-mocha);
  border: 1px solid var(--deep-mocha);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 48px;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.btn--submit:hover,
.btn--submit:focus-visible {
  background-color: var(--deep-mocha);
  color: var(--cream);
  outline: none;
}

/* ── Success Page ── */
.success-main {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cream);
  padding: 80px 24px;
}

.success-content {
  text-align: center;
  max-width: 480px;
}

.success-content h1 {
  margin-bottom: 12px;
  color: var(--deep-mocha);
}

.success-content p {
  color: var(--body-text);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.order-details {
  background: var(--soft-sand);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 32px;
  text-align: left;
}

.order-details__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--warm-taupe);
}

.order-details__row:last-child {
  border-bottom: none;
}

.order-details dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warm-taupe);
  font-weight: 500;
}

.order-details dd {
  font-size: 0.85rem;
  color: var(--deep-mocha);
  word-break: break-all;
  text-align: right;
}

/* ── Consultation Page Responsive ── */
@media (max-width: 768px) {
  .form-main {
    padding: 40px 0 64px;
  }

  .form-grid,
  .form-grid--narrow {
    grid-template-columns: 1fr;
  }

  .form-field--full {
    grid-column: auto;
  }

  .check-group--wrap {
    flex-direction: column;
    gap: 10px;
  }

  .check-group--row {
    flex-direction: column;
    gap: 10px;
  }

  .agreement-box {
    padding: 20px 16px 24px;
  }

  .inline-text {
    width: 140px;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 48px 16px;
  }

  .form-section {
    padding-top: 28px;
    margin-bottom: 28px;
  }

  .form-section legend {
    font-size: 1.3rem;
  }
}