/* ============================================================================
   Zobbi Furniture Studio — wood-rooted warm theme
   Sapwood cream palette · Outfit (Fontshare) throughout · Earth brown accent.
   Two-tone headlines, alternating feature layout.
   Outfit is used for the entire page.
   ============================================================================ */

:root {
  color-scheme: light;
  --bg: #F5EDE0;
  --bg-2: #EDE1CE;
  --bg-3: #E3D4BA;
  --text: #1C0E06;
  --muted: rgba(28, 14, 6, 0.6);
  --rust: #8B5730;
  --rust-bright: #6B4020;
  --hairline: rgba(28, 14, 6, 0.12);
  --shadow: 0 50px 120px rgba(0, 0, 0, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Typography primitives
   --------------------------------------------------------------------------- */
.display {
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

.accent {
  /* Rust-coloured second word of the two-tone headlines, in the same Outfit
     as the rest of the page. */
  color: var(--rust);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  color: var(--rust);
  margin: 0 0 1.4rem;
}

.lede {
  color: var(--muted);
  line-height: 1.85;
  font-size: 1.05rem;
}

.lede.italic {
  font-style: normal;
}

.ordinal {
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Top bar
   --------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1.3rem clamp(1.25rem, 3vw, 2.8rem);
  transition: background 0.35s ease, border-color 0.35s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
  text-shadow: none;
}

.topbar.solid {
  background: rgba(245, 237, 224,0.9);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(120%);
}

.brand,
.footer-brand {
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
}

.brand .dot,
.footer-brand .dot {
  color: var(--rust);
}

/* Header lockup: wood icon + wordmark side by side */
.brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}

.brand-icon {
  height: 52px;
  width: auto;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.brand-name {
  font-size: 2.7rem;
}

.brand-tag {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 14, 6,0.65);
  text-align: justify;
  text-align-last: justify;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}

.nav-links a:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Products dropdown
   --------------------------------------------------------------------------- */
.nav-item {
  position: relative;
  display: inline-flex;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* Caret rendered in CSS so the i18n text swap can't drop it */
.nav-trigger::after {
  content: '\25BE';
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

.has-dropdown:hover .nav-trigger::after,
.has-dropdown:focus-within .nav-trigger::after {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  background: rgba(245, 237, 224,0.97);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
  /* Hidden until the Products item is hovered or focused */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 40;
}

/* A bridge over the gap so the menu doesn't close while the cursor travels down */
.dropdown::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 0;
  right: 0;
  height: 0.6rem;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  padding: 0.6rem 1.2rem;
  opacity: 0.82;
  white-space: nowrap;
}

.dropdown a:hover,
.dropdown a[aria-current='page'] {
  opacity: 1;
  color: var(--rust-bright);
}

/* Mobile menu button (hidden on desktop, shown under 720px) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Lines morph into an X while the menu is open */
.topbar.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topbar.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.topbar.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   Arrow link (editorial CTA)
   --------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.link-arrow .arrow {
  color: var(--rust);
  transition: transform 0.25s ease;
}

.link-arrow:hover {
  color: var(--rust-bright);
  border-color: var(--rust);
}

.link-arrow:hover .arrow {
  transform: translateX(5px);
}

/* ---------------------------------------------------------------------------
   Hero (full-bleed)
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Exactly the page background so feathered photo edges blend seamlessly */
  background: var(--bg);
}

.panel-media svg {
  width: auto;
  height: clamp(46%, 56vh, 64%);
  opacity: 0.9;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.18));
}

.hero-photo,
.product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s ease;
  /* Feather every edge fully to transparent so the studio photo melts into the
     page with no hard edge. closest-side guarantees alpha=0 at all four edges. */
}

.hero-photo.is-loaded,
.product-photo.is-loaded {
  opacity: 1;
}

.hero-photo {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.panel-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(245, 237, 224,0.6) 0%, rgba(245, 237, 224,0.1) 14%, transparent 32%),
    linear-gradient(0deg, rgba(245, 237, 224,0.92) 0%, rgba(245, 237, 224,0.45) 36%, transparent 66%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(7rem, 14vh, 11rem) clamp(1.5rem, 5vw, 6rem) clamp(4rem, 8vh, 6rem);
}

.hero-title {
  font-size: clamp(1.9rem, 4.2vw, 4rem);
  max-width: 18ch;
  margin-bottom: 1.4rem;
}

.hero-title span {
  display: inline;
}

.hero-inner .lede {
  max-width: 36rem;
  margin: 0 0 2.4rem;
}

/* ---------------------------------------------------------------------------
   Feature (product) sections — alternating editorial layout
   --------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
  min-height: 88vh;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 7rem) clamp(1.5rem, 5vw, 6rem);
}

.feature.reverse .feature-media,
.feature.reverse .feature-gallery {
  order: 2;
}

/* Media + thumbnail strip share one grid cell */
.feature-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Exactly the page background so feathered photo edges blend seamlessly */
  background: var(--bg);
  border: none;
}

.feature-media .product-svg {
  width: 78%;
  height: auto;
  position: relative;
  z-index: 0;
}

.feature-media .ordinal {
  position: absolute;
  top: 1.5rem;
  left: 1.6rem;
  z-index: 3;
  color: rgba(28, 14, 6,0.65);
}

.feature-title {
  font-size: clamp(3rem, 7vw, 7rem);
  margin-bottom: 1.6rem;
}

.feature-title span {
  display: block;
}

.feature-copy .lede {
  max-width: 30rem;
  margin: 0 0 2.4rem;
}

/* ---------------------------------------------------------------------------
   Product gallery — clickable photo + thumbnail strip + full-screen viewer
   --------------------------------------------------------------------------- */
/* Make the main product photo read as openable */
.feature-media[data-gallery] {
  cursor: zoom-in;
}

/* On the home page the product photo links to its product page */
.feature-media-link {
  cursor: pointer;
  text-decoration: none;
}

/* Small zoom glyph that fades in on hover/focus of the main photo */
.zoom-hint {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(245, 237, 224,0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 1rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.feature-media[data-gallery]:hover .zoom-hint,
.feature-media[data-gallery]:focus-visible .zoom-hint,
.feature-media-link:hover .zoom-hint,
.feature-media-link:focus-visible .zoom-hint {
  opacity: 1;
  transform: scale(1);
}

.feature-media[data-gallery]:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

/* Thumbnail strip — hidden until at least two photos exist for the product */
.gallery-thumbs {
  display: none;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.gallery-thumbs.is-ready {
  display: flex;
}

.gallery-thumbs .thumb {
  /* Hidden until its photo successfully loads, so a missing/loading file never
     shows a broken thumbnail. */
  display: none;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.gallery-thumbs .thumb.is-ok {
  display: block;
}

.gallery-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb:focus-visible,
.gallery-thumbs .thumb.is-active {
  opacity: 1;
  border-color: var(--rust);
  outline: none;
}

.gallery-thumbs .thumb.is-active {
  transform: translateY(-2px);
}

/* Full-screen viewer */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 6, 5, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox.open {
  display: flex;
  opacity: 1;
}

.lb-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: min(1100px, 92vw);
}

.lb-image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lb-image.is-loaded {
  opacity: 1;
}

.lb-caption {
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.lb-close,
.lb-nav {
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  background: rgba(28, 14, 6,0.06);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.lb-nav {
  width: clamp(2.6rem, 5vw, 3.4rem);
  height: clamp(2.6rem, 5vw, 3.4rem);
  font-size: 1.6rem;
  flex: none;
}

.lb-close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.8rem);
  right: clamp(1rem, 3vw, 1.8rem);
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.1rem;
}

.lb-close:hover,
.lb-nav:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
  transform: scale(1.05);
}

.lb-nav.is-hidden {
  visibility: hidden;
}

body.lb-locked {
  overflow: hidden;
}

@media (max-width: 720px) {
  /* Stack the nav arrows below the photo on small screens */
  .lightbox {
    flex-wrap: wrap;
  }
  .lb-stage {
    order: -1;
    flex-basis: 100%;
  }
  .lb-image {
    max-height: 70vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lb-image,
  .zoom-hint,
  .gallery-thumbs .thumb {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Marquee
   --------------------------------------------------------------------------- */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}

.marquee {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.4rem 0;
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  font-size: 1.3rem;
  color: var(--muted);
  animation: marquee 26s linear infinite;
  white-space: nowrap;
}

.marquee .sep {
  color: var(--rust);
  font-style: normal;
}

.marquee span {
  white-space: nowrap;
}

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

/* ---------------------------------------------------------------------------
   Why — editorial numbered rows
   --------------------------------------------------------------------------- */
.why {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 5vw, 6rem);
}

.section-header {
  max-width: 40ch;
  margin-bottom: 3.5rem;
}

.section-header .display,
.customise-copy .display,
.inquiry-copy .display {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  margin: 0.4rem 0 0;
}

.why-row {
  padding: 2.4rem 0;
  border-top: 1px solid var(--hairline);
}

.why-row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.why-body h3 {
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 0.8rem;
  line-height: 1.15;
}

.why-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   Customise
   --------------------------------------------------------------------------- */
.customise {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 5vw, 6rem);
}

.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.4rem;
}

.option-card {
  padding: 1.7rem;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--rust);
}

.option-card h4 {
  margin: 0 0 0.6rem;
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
}

.option-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.95rem;
}

.customise-art {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
  /* Exactly the page background so the feathered photo edges blend seamlessly */
  background: var(--bg);
}

.customise-photo {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Inquiry / form
   --------------------------------------------------------------------------- */
.inquiry {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 5vw, 6rem) clamp(5rem, 12vh, 9rem);
}

.inquiry-copy {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.inquiry-copy p:last-child {
  color: var(--muted);
  line-height: 1.85;
  margin: 1.2rem auto 0;
}

.inquiry-form {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: clamp(1.6rem, 4vw, 3rem);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}

label {
  display: grid;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
}

label span {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.72rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  background: rgba(28, 14, 6,0.03);
  color: var(--text);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  font: inherit;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

input::placeholder,
textarea::placeholder {
  color: rgba(28, 14, 6,0.35);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rust);
  background: rgba(28, 14, 6,0.05);
}

select option {
  background: var(--bg-2);
  color: var(--text);
}

.full-width {
  grid-column: 1 / -1;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.4rem;
  padding: 0 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  transition: transform 0.25s ease, background 0.25s ease;
}

.button.submit-button {
  width: 100%;
  margin-top: 0.4rem;
  background: var(--rust);
  color: #fff;
}

.button.submit-button:hover {
  transform: translateY(-2px);
  background: var(--rust-bright);
}

.thank-you {
  margin: 1.4rem 0 0;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
  color: var(--rust-bright);
  font-weight: 500;
  text-align: center;
}

.thank-you.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 2.4rem clamp(1.5rem, 5vw, 6rem);
  border-top: 1px solid var(--hairline);
  background: var(--bg-2);
}

.footer-copy {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  flex: 1 1 240px;
}

.footer-phone {
  display: block;
  margin-top: 0.3rem;
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}

.footer-phone:hover {
  opacity: 1;
}

.footer-nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.footer-nav a {
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}

.footer-nav a:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Reveal animation
   --------------------------------------------------------------------------- */
.section-anim {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.section-anim.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero.section-anim {
  transform: none;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: auto;
  }

  .feature.reverse .feature-media,
  .feature.reverse .feature-gallery {
    order: 0;
  }

  .feature-media {
    aspect-ratio: 3 / 2;
  }

  .customise {
    grid-template-columns: 1fr;
  }

  .customise-art {
    order: -1;
    min-height: 320px;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .topbar {
    padding: 1rem 1.25rem;
  }

  .brand-icon {
    height: 38px;
  }

  .brand-name {
    font-size: 2rem;
  }

  .nav-toggle {
    display: flex;
  }

  /* Nav becomes a slide-down panel opened by the menu button */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.2rem 1.5rem 1rem;
    background: rgba(245, 237, 224,0.97);
    border-bottom: 1px solid var(--hairline);
    backdrop-filter: blur(20px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .topbar.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links > a,
  .nav-links > .nav-item {
    width: 100%;
    border-top: 1px solid var(--hairline);
  }

  .nav-links > a {
    padding: 0.9rem 0;
  }

  .nav-item {
    display: block;
  }

  .nav-trigger {
    padding: 0.9rem 0;
  }

  /* Product choices shown inline — no hover needed on touch screens */
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .dropdown a {
    padding: 0.5rem 0 0.5rem 1.1rem;
  }

  /* On phones the contained image gets letterboxed, so the feather mask no
     longer lines up with the photo and leaves hard edges. Fill the frame and
     feather all four edges directly into the dark page instead. */
  .hero-photo {
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Mirror the strong bottom fade up top so the photo melts into the dark
     header instead of meeting it at a hard line. */
  .panel-scrim {
    background:
      linear-gradient(180deg, rgba(245, 237, 224,0.9) 0%, rgba(245, 237, 224,0.5) 15%, transparent 40%),
      linear-gradient(0deg, rgba(245, 237, 224,0.95) 0%, rgba(245, 237, 224,0.5) 38%, transparent 70%);
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .footer {
    justify-content: center;
    text-align: center;
  }
}

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

  .section-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Floating WhatsApp chat button
   --------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: url('images/zobbi-icon.png') center / cover no-repeat;
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.wa-icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

@media (prefers-reduced-motion: reduce) {
  .wa-float {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Product detail pages (chair.html / cube.html)
   --------------------------------------------------------------------------- */
/* Push content clear of the fixed (always-solid) header on inner pages */
body.subpage main {
  padding-top: clamp(5.5rem, 12vh, 7.5rem);
}

.subpage-head {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1.4rem clamp(1.5rem, 5vw, 6rem) 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.back-link:hover {
  color: var(--text);
}

.back-link .arrow {
  color: var(--rust);
  transition: transform 0.25s ease;
}

.back-link:hover .arrow {
  transform: translateX(-4px);
}

/* Detail layout reuses .feature grid but aligns to the top and runs shorter */
.product-detail {
  align-items: start;
  min-height: auto;
  padding-top: clamp(1.5rem, 4vh, 3rem);
}

.product-detail .feature-title {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  margin-bottom: 1.6rem;
}

.product-detail .eyebrow {
  margin-bottom: 1rem;
}

.product-detail .feature-copy .lede {
  margin-bottom: 1.3rem;
}

/* Stacked product detail — gallery on top, copy listed downward below it */
.product-detail.is-stacked {
  grid-template-columns: 1fr;
  max-width: 760px;
  gap: clamp(1.8rem, 4vw, 2.6rem);
}

.product-detail.is-stacked .feature-gallery {
  width: 100%;
  margin: 0 auto;
}

/* Price line */
.product-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.4rem 0 1.6rem;
}

.product-price .price-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-price .price-amount {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--rust-bright);
}

.button.request-button {
  margin-top: 0.8rem;
  background: var(--rust);
  color: #fff;
}

.button.request-button:hover {
  transform: translateY(-2px);
  background: var(--rust-bright);
}

.subtle-note {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.subtle-note a {
  color: var(--text);
  transition: color 0.25s ease;
}

.subtle-note a:hover {
  color: var(--rust-bright);
}