/* Nicoline Asia — landing page styles */

:root {
    --brand-primary: #000000;
    --brand-secondary: #4a4a4a;
    --brand-accent: #8c6f74;
    --brand-accent-light: #c9a9ae;
    --brand-text: #000000;
    --brand-bg: #ffffff;
    --brand-paper: #F8F5F0;
    --brand-ivory: #F2EEE7;
    --brand-dark: #1A1614;
    --line: rgba(0,0,0,0.14);
    --line-strong: rgba(0,0,0,0.32);
    --display: 'Libre Baskerville', Georgia, serif;
    --sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --topbar-h: 68px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--sans); color: var(--brand-text); background: var(--brand-bg); font-size: 16px; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; padding-top: var(--topbar-h); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  figure { margin: 0; }

  /* ─── TYPOGRAPHY ─── */
  .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
  h1.display { font-size: clamp(30px, 3vw, 44px); }
  h2.display { font-size: clamp(26px, 3.1vw, 42px); }
  h3.display { font-size: clamp(21px, 2vw, 26px); }
  .display em { font-style: italic; color: var(--brand-accent); font-weight: 400; }
  .on-dark .display em { color: var(--brand-accent-light); }
  .eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 16px; }
  .on-dark .eyebrow { color: var(--brand-accent-light); }
  .section-head { margin-bottom: 44px; }
  .m-only { display: none; }
  @media (max-width: 720px) { .d-only { display: none; } .m-only { display: inline; } }

  /* ─── CONTAINER + SECTION STANDARDS ─── */
  .container { max-width: 1400px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }
  section { padding-top: 80px; padding-bottom: 80px; position: relative; }
  @media (min-width: 1441px) { .container { padding-left: 100px; padding-right: 100px; } }
  @media (max-width: 1024px) { section { padding-top: 50px; padding-bottom: 50px; } .container { padding-left: 32px; padding-right: 32px; } .section-head { margin-bottom: 32px; } }
  @media (max-width: 720px)  { section { padding-top: 30px; padding-bottom: 30px; } .container { padding-left: 16px; padding-right: 16px; } .section-head { margin-bottom: 24px; } h1.display { font-size: 28px; } h2.display { font-size: 24px; } h3.display { font-size: 20px; } }

  /* ─── BUTTONS ─── */
  .btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; min-height: 46px;
    font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    border: 1px solid var(--brand-primary); white-space: nowrap;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
  }
  .btn-primary { background: var(--brand-primary); color: #fff; }
  .btn-primary:hover { background: transparent; color: var(--brand-primary); }
  .btn-secondary { background: transparent; color: var(--brand-text); }
  .btn-secondary:hover { background: var(--brand-primary); color: #fff; }
  .on-dark .btn-primary { background: var(--brand-paper); color: var(--brand-dark); border-color: var(--brand-paper); }
  .on-dark .btn-primary:hover { background: transparent; color: var(--brand-paper); }
  .on-dark .btn-secondary { color: var(--brand-paper); border-color: var(--brand-paper); }
  .on-dark .btn-secondary:hover { background: var(--brand-paper); color: var(--brand-dark); }
  .nav-btn { width: 48px; height: 48px; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: background 0.2s ease, color 0.2s ease; }
  .nav-btn svg { width: 18px; height: 18px; }
  .nav-btn:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
  .on-dark .nav-btn:hover { background: var(--brand-paper); color: var(--brand-dark); border-color: var(--brand-paper); }

  /* ─── FIXED TOP BAR (promo) ─── */
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--line); height: var(--topbar-h); display: flex; align-items: center; }
  .topbar-inner { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 32px; }
  .topbar-logo { flex: 0 0 auto; display: flex; align-items: center; }
  .topbar-logo img { height: 37px; width: 138px; }
  .topbar-offer { flex: 1 1 auto; text-align: center; font-family: var(--display); font-style: italic; font-size: 16px; color: var(--brand-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-offer .offer-short { display: none; }
  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
  .topbar-contact { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--brand-text); border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
  .topbar-cta { background: var(--brand-primary); color: #fff; padding: 11px 20px; min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--brand-primary); white-space: nowrap; transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out); }
  .topbar-cta:hover { background: transparent; color: var(--brand-primary); }
  @media (max-width: 1100px) { .topbar-contact { display: none; } }
  @media (max-width: 720px) {
    :root { --topbar-h: 56px; }
    .topbar-inner { padding: 0 16px; gap: 12px; }
    .topbar-logo img { height: 30px; width: 112px; }
    .topbar-cta { display: none; }
    .topbar-right { margin-left: 0; }
    .topbar-contact { display: inline-flex; border-bottom: 0; }
    .topbar-contact .label { display: none; }
    .topbar-contact svg { width: 22px; height: 22px; }
    .topbar-offer { font-size: 14px; text-align: right; }
    .topbar-offer .offer-long { display: none; }
    .topbar-offer .offer-short { display: inline; }
  }

  /* ─── HERO (full-bleed background) ─── */
  .hero { padding-top: 80px; padding-bottom: 80px; background: var(--brand-dark); color: var(--brand-paper); overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
  .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,14,0.92) 0%, rgba(20,16,14,0.78) 45%, rgba(20,16,14,0.5) 100%); }
  .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
  .hero h1 { margin-bottom: 20px; color: var(--brand-paper); }
  .hero-sub { font-size: 17px; line-height: 1.65; color: rgba(248,245,240,0.85); margin-bottom: 28px; text-align: justify; hyphens: auto; }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary { flex: 1 1 240px; }
  .lead-form { background: var(--brand-paper); color: var(--brand-text); padding: 28px; border: 1px solid var(--line-strong); }
  .lead-form h3 { font-family: var(--display); font-weight: 400; font-size: 23px; margin-bottom: 8px; }
  .lead-form .form-note { font-size: 14px; line-height: 1.6; color: var(--brand-secondary); margin-bottom: 18px; }
  .form-row { margin-bottom: 12px; }
  .form-row label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 6px; }
  .form-row input, .form-row textarea { width: 100%; padding: 11px 14px; font-family: var(--sans); font-size: 14px; border: 1px solid var(--line-strong); background: #fff; color: var(--brand-text); }
  .form-row textarea { min-height: 80px; resize: vertical; }
  .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(140,111,116,0.2); }
  .lead-form button[type="submit"] { width: 100%; background: var(--brand-primary); color: #fff; padding: 13px; min-height: 46px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; white-space: nowrap; transition: background 0.25s ease; }
  .lead-form button[type="submit"]:hover { background: var(--brand-accent); }
  .form-success { display: none; padding: 18px; background: rgba(140,111,116,0.12); border: 1px solid var(--brand-accent); font-family: var(--display); font-size: 15px; color: var(--brand-text); text-align: center; }
  .form-success.active { display: block; }
  @media (max-width: 1024px) { .hero { padding-top: 50px; padding-bottom: 50px; } .hero-inner { grid-template-columns: 1fr; gap: 32px; } }
  @media (max-width: 720px) { .hero { padding-top: 30px; padding-bottom: 30px; } .hero-ctas .btn-primary, .hero-ctas .btn-secondary { flex: 1 1 100%; } .lead-form { padding: 22px 18px; } .lead-form h3 { font-size: 21px; } }

  /* ─── STATS STRIP (under hero) ─── */
  .stats-strip { background: var(--brand-bg); border-bottom: 1px solid var(--line); }
  .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); }
  .stat-btn { display: flex; align-items: center; gap: 18px; padding: 24px 28px; border-left: 1px solid var(--line); transition: background 0.25s ease; }
  .stat-btn:last-child { border-right: 1px solid var(--line); }
  .stat-btn:hover { background: var(--brand-paper); }
  .stat-num { font-family: var(--display); font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: var(--brand-text); flex: 0 0 auto; }
  .stat-label { font-size: 13.5px; line-height: 1.45; color: var(--brand-secondary); }
  .stats-drop { display: none; }
  @media (max-width: 720px) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .stat-btn { flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-left: 1px solid var(--line); position: relative; }
    .stat-btn:first-child { border-left: 0; } .stat-btn:last-child { border-right: 0; }
    .stat-btn .stat-label { display: none; }
    .stat-btn::after { content: ''; width: 7px; height: 7px; border-right: 1px solid var(--brand-text); border-bottom: 1px solid var(--brand-text); transform: rotate(45deg); transition: transform 0.25s ease; }
    .stat-btn.is-open::after { transform: rotate(225deg); }
    .stat-btn.is-open { background: var(--brand-paper); }
    .stats-drop { display: block; max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); border-top: 0 solid var(--line); }
    .stats-drop.is-open { max-height: 120px; border-top-width: 1px; }
    .stats-drop p { padding: 12px 16px 14px; font-size: 14px; line-height: 1.5; color: var(--brand-secondary); text-align: center; }
  }

  /* ─── TRUST STRIP ─── */
  .marquee { background: var(--brand-dark); color: var(--brand-accent-light); overflow: hidden; padding: 16px 0; }
  .marquee-track { display: flex; gap: 56px; animation: scroll-x 44s linear infinite; width: max-content; }
  .marquee-item { font-family: var(--display); font-style: italic; font-size: 14px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 56px; white-space: nowrap; }
  .marquee-item::after { content: ''; width: 5px; height: 5px; background: var(--brand-accent-light); opacity: 0.6; }
  @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

  /* ─── PROBLEM: expanding image panels ─── */
  .problem { background: var(--brand-bg); }
  .panels { display: flex; gap: 10px; height: 460px; }
  .panel { position: relative; flex: 1 1 0; overflow: hidden; text-align: left; color: var(--brand-paper); transition: flex 0.6s var(--ease-out); min-width: 0; }
  .panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
  .panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,14,0.1) 30%, rgba(20,16,14,0.88) 100%); }
  .panel-body { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; }
  .panel-title { display: block; font-family: var(--display); font-size: 22px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel p { font-size: 15px; line-height: 1.6; color: rgba(248,245,240,0.85); margin-top: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s ease; }
  .panel.is-open { flex: 2.6 1 0; }
  .panel.is-open img { transform: scale(1.03); }
  .panel.is-open .panel-title { white-space: normal; overflow: visible; }
  .panel.is-open p { max-height: 120px; opacity: 1; }
  .panel:not(.is-open) .panel-title { font-size: 18px; }
  @media (max-width: 1024px) { .panels { height: 400px; } .panel:not(.is-open) .panel-body { left: 18px; right: 18px; bottom: 18px; } }
  @media (max-width: 720px) {
    .panels { flex-direction: column; height: auto; gap: 8px; }
    .panel { flex: 0 0 auto; height: 88px; transition: height 0.5s var(--ease-out); }
    .panel.is-open { flex: 0 0 auto; height: 290px; }
    .panel-body { left: 18px; right: 18px; bottom: 18px; }
  }

  /* ─── CTA BAR ─── */
  .cta-bar { padding: 26px 0; background: var(--brand-paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cta-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .cta-bar-copy { font-family: var(--display); font-size: clamp(17px, 1.8vw, 22px); font-style: italic; color: var(--brand-text); line-height: 1.35; }
  .cta-bar .btn-primary { flex: 0 0 auto; }
  .cta-bar.dark { background: var(--brand-dark); color: var(--brand-paper); border-color: transparent; }
  .cta-bar.dark .cta-bar-copy { color: var(--brand-paper); }
  .cta-bar.dark .btn-primary { background: var(--brand-paper); color: var(--brand-dark); border-color: var(--brand-paper); }
  .cta-bar.dark .btn-primary:hover { background: transparent; color: var(--brand-paper); }
  .cta-bar.ivory { background: var(--brand-ivory); }
  .cta-bar.white { background: var(--brand-bg); }
  @media (max-width: 720px) { .cta-bar { padding: 22px 0; } .cta-bar-inner { flex-direction: column; align-items: stretch; gap: 16px; } .cta-bar .btn-primary { width: 100%; } }

  /* ─── CRAFT CAROUSEL ─── */
  .craft { background: var(--brand-paper); }
  .craft-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
  .car-nav { display: flex; flex: 0 0 auto; }
  .car-nav .nav-btn + .nav-btn { border-left: 0; }
  .carousel { overflow: hidden; margin-right: -64px; }
  .car-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 64px; }
  .car-track::-webkit-scrollbar { display: none; }
  .craft-card { flex: 0 0 calc((100% - 64px - 40px) / 3); scroll-snap-align: start; background: var(--brand-bg); border: 1px solid var(--line); display: flex; flex-direction: column; }
  .craft-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .craft-card .card-body { padding: 24px 24px 28px; }
  .craft-card .eyebrow { margin-bottom: 12px; }
  .craft-card h3 { margin-bottom: 12px; font-size: 22px; }
  .craft-card p { font-size: 15px; line-height: 1.7; color: var(--brand-secondary); }
  @media (max-width: 1024px) { .carousel { margin-right: -32px; } .car-track { padding-right: 32px; } .craft-card { flex-basis: calc((100% - 32px - 20px) / 2); } }
  @media (max-width: 720px) { .carousel { margin-right: -16px; } .car-track { padding-right: 16px; gap: 12px; } .craft-card { flex-basis: 84%; } .craft-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .craft-card .card-body { padding: 18px 18px 22px; } }

  /* ─── VIDEO (full bleed, half height) ─── */
  .film { padding: 0; background: #000; }
  .film video { display: block; width: 100%; aspect-ratio: 32 / 9; max-height: 50vh; object-fit: cover; background: #000; }
  @media (max-width: 720px) { .film video { aspect-ratio: 16 / 9; } }

  /* ─── WHAT IS ON SALE ─── */
  .promo { background: var(--brand-ivory); padding-top: 0; }
  .promo-band { background: var(--brand-dark); color: var(--brand-paper); padding: 80px 0; margin-bottom: 48px; }
  .promo-band h2 { color: var(--brand-paper); }
  .promo-filter { display: flex; flex-wrap: wrap; border: 1px solid var(--brand-primary); margin-bottom: 28px; }
  .promo-filter button { flex: 1 1 auto; padding: 12px 18px; min-height: 44px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-text); background: transparent; border-right: 1px solid var(--brand-primary); white-space: nowrap; }
  .promo-filter button:last-child { border-right: 0; }
  .promo-filter button.is-active { background: var(--brand-primary); color: #fff; }
  .promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .promo-card { background: var(--brand-bg); border: 1px solid var(--line); display: flex; flex-direction: column; }
  .promo-card.is-hidden { display: none; }
  .promo-img { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #fff; display: block; width: 100%; padding: 0; cursor: zoom-in; position: relative; }
  .promo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
  .promo-img:hover img { transform: scale(1.04); }
  .promo-img .zoom { position: absolute; right: 10px; bottom: 10px; background: var(--brand-dark); color: var(--brand-paper); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; opacity: 0; transition: opacity 0.25s ease; }
  .promo-img:hover .zoom, .promo-img:focus-visible .zoom { opacity: 1; }
  .promo-card figcaption { padding: 16px 18px 18px; display: grid; gap: 4px; }
  .promo-type { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-accent); }
  .promo-card strong { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; }
  .promo-mat { font-size: 13.5px; color: var(--brand-secondary); line-height: 1.5; }
  @media (max-width: 1024px) { .promo-band { padding: 50px 0; margin-bottom: 36px; } .promo-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .promo-filter button { flex: 1 1 33%; border-bottom: 1px solid var(--brand-primary); } }
  @media (max-width: 720px) { .promo-band { padding: 30px 0; margin-bottom: 24px; } .promo-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .promo-filter button { flex: 1 1 50%; padding: 10px 8px; font-size: 11px; letter-spacing: 0.06em; } .promo-card figcaption { padding: 12px 12px 14px; } .promo-card strong { font-size: 17px; } }

  /* ─── LIGHTBOX ─── */
  .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(15,13,12,0.94); display: none; flex-direction: column; color: var(--brand-paper); }
  .lightbox.is-open { display: flex; }
  .lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(248,245,240,0.7); }
  .lb-close { width: 44px; height: 44px; border: 1px solid rgba(248,245,240,0.4); display: inline-flex; align-items: center; justify-content: center; }
  .lb-close svg { width: 18px; height: 18px; }
  .lb-stage { flex: 1; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; min-height: 0; padding: 0 16px; }
  .lb-stage img { width: auto; height: auto; max-width: min(100%, 1400px); max-height: calc(100vh - 180px); min-height: min(60vh, 520px); margin: 0 auto; object-fit: contain; background: #fff; }
  .lb-stage .nav-btn { color: var(--brand-paper); border-color: rgba(248,245,240,0.4); justify-self: center; }
  .lb-caption { padding: 12px 24px 16px; text-align: center; border-top: 1px solid rgba(248,245,240,0.15); }
  .lb-caption .promo-type { color: var(--brand-accent-light); display: block; margin-bottom: 4px; }
  .lb-caption strong { font-family: var(--display); font-weight: 400; font-size: 24px; display: block; }
  .lb-caption span.mat { font-size: 14px; color: rgba(248,245,240,0.75); }
  @media (max-width: 720px) { .lb-stage { grid-template-columns: 44px 1fr 44px; padding: 0 6px; } .lb-stage .nav-btn { width: 40px; height: 40px; } .lb-stage img { max-height: calc(100vh - 240px); } .lb-caption strong { font-size: 20px; } }

  /* ─── PROCESS: the sofa ─── */
  .process { background: var(--brand-bg); }
  .sofa-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
  .sofa-stage svg { width: 100%; height: auto; display: block; overflow: visible; }
  .cushion { cursor: pointer; transition: transform 0.45s var(--ease-out); }
  .cushion .cushion-face { fill: #e9e2da; stroke: #1A1614; stroke-width: 1.2; transition: fill 0.3s ease; }
  .cushion .cushion-shade { fill: #d8cfc5; transition: fill 0.3s ease; }
  .cushion text { font-family: var(--display); font-style: italic; font-size: 26px; fill: #1A1614; pointer-events: none; }
  .cushion:hover .cushion-face { fill: #efe9e2; }
  .cushion.is-open { transform: translateY(-38px) rotate(-7deg); }
  .cushion.is-open .cushion-face { fill: #8c6f74; }
  .cushion.is-open .cushion-shade { fill: #6e565b; }
  .cushion.is-open text { fill: #F8F5F0; }
  .cushion:focus-visible { outline: none; }
  .cushion:focus-visible .cushion-face { stroke-width: 3; }
  .sofa-hint { margin-top: 14px; font-size: 13px; color: var(--brand-secondary); text-align: center; }
  .step-panel { min-height: 230px; }
  .step-panel .step-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-accent); display: block; margin-bottom: 12px; }
  .step-panel h3 { margin-bottom: 12px; }
  .step-panel p { font-size: 15.5px; line-height: 1.7; color: var(--brand-secondary); }
  .step-dots { display: flex; margin-top: 24px; border: 1px solid var(--brand-primary); }
  .step-dots button { flex: 1; padding: 10px 0; min-height: 44px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; border-right: 1px solid var(--brand-primary); }
  .step-dots button:last-child { border-right: 0; }
  .step-dots button.is-active { background: var(--brand-primary); color: #fff; }
  @media (max-width: 1024px) { .sofa-grid { grid-template-columns: 1fr; gap: 28px; } .step-panel { min-height: 0; } }

  /* ─── MAKER ─── */
  .maker { background: var(--brand-paper); }
  .maker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
  .maker-body { display: flex; flex-direction: column; justify-content: center; }
  .maker-body p { font-size: 18px; line-height: 1.8; color: var(--brand-secondary); text-align: justify; hyphens: auto; }
  .maker-body p + p { margin-top: 18px; }
  .maker-quote { font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.4; color: var(--brand-text); margin: 32px 0 10px; text-align: left; }
  .maker-quote-src { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-secondary); }
  .maker-photo { display: flex; flex-direction: column; align-items: center; }
  .maker-photo img { height: auto; width: auto; max-width: 100%; max-height: 640px; aspect-ratio: 512 / 767; object-fit: contain; flex: 1 1 auto; min-height: 0; }
  .maker-photo figcaption { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--brand-secondary); padding-top: 10px; }
  @media (max-width: 1024px) { .maker-grid { grid-template-columns: 1fr; gap: 32px; } .maker-photo { order: -1; } .maker-photo img { max-height: 520px; } .maker-body p { font-size: 16.5px; } }

  /* ─── REVIEWS ─── */
  .reviews { background: var(--brand-dark); color: var(--brand-paper); }
  .reviews-grid { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
  .reviews-score { padding-bottom: 24px; border-bottom: 1px solid rgba(248,245,240,0.2); margin-bottom: 24px; }
  .reviews-score .score { font-family: var(--display); font-size: 64px; line-height: 1; }
  .reviews-score .stars { color: var(--brand-accent-light); font-size: 18px; letter-spacing: 0.14em; display: block; margin: 8px 0 6px; }
  .reviews-score .score-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(248,245,240,0.7); }
  .reviewer-list { display: grid; }
  .reviewer-list button { text-align: left; padding: 11px 0; border-bottom: 1px solid rgba(248,245,240,0.12); font-size: 14px; color: rgba(248,245,240,0.6); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color 0.2s ease; }
  .reviewer-list button span.piece { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(248,245,240,0.45); white-space: nowrap; }
  .reviewer-list button:hover, .reviewer-list button.is-active { color: var(--brand-paper); }
  .reviewer-list button.is-active span.piece { color: var(--brand-accent-light); }
  .quote-stage { position: relative; min-height: 360px; }
  .quote-text { font-family: var(--display); font-style: normal; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.45; color: var(--brand-paper); transition: opacity 0.35s ease, transform 0.35s var(--ease-out); }
  .quote-text.is-fading { opacity: 0; transform: translateY(8px); }
  .quote-who { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(248,245,240,0.2); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .quote-who .name { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .quote-who .name small { display: block; font-weight: 400; letter-spacing: 0.1em; font-size: 11px; color: rgba(248,245,240,0.55); margin-top: 4px; }
  .quote-nav { display: flex; }
  .quote-nav .nav-btn { color: var(--brand-paper); border-color: rgba(248,245,240,0.4); }
  .quote-nav .nav-btn + .nav-btn { border-left: 0; }
  @media (max-width: 1024px) { .reviews-grid { grid-template-columns: 1fr; gap: 32px; } .reviewer-list { grid-template-columns: 1fr 1fr; column-gap: 24px; } .quote-stage { min-height: 0; } }
  @media (max-width: 720px) { .reviewer-list { display: none; } .reviews-score { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .reviews-score .score { font-size: 48px; } .quote-who { flex-direction: column; align-items: flex-start; } }

  /* ─── FAQ: round table ─── */
  .faq { background: var(--brand-ivory); }
  .table-scene { position: relative; max-width: 1180px; margin: 0 auto; }
  .table-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
  .table-scene .shadow { fill: rgba(26,22,20,0.22); filter: blur(14px); }
  .table-scene .table-top { fill: url(#woodGrad); stroke: #0f0d0c; stroke-width: 1.5; }
  .table-scene .table-ring { fill: none; stroke: rgba(248,245,240,0.22); stroke-width: 1; }
  .chair { cursor: pointer; }
  .chair .c-shadow { fill: rgba(26,22,20,0.18); filter: blur(5px); }
  .chair .c-seat { fill: url(#seatGrad); stroke: #3a312d; stroke-width: 1.2; transition: fill 0.25s ease; }
  .chair .c-cushion { fill: rgba(255,255,255,0.35); }
  .chair .c-back { fill: none; stroke: #2a2420; stroke-width: 11; stroke-linecap: round; transition: stroke 0.25s ease; }
  .chair .c-back-hi { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 3; stroke-linecap: round; }
  .chair .c-arm { fill: none; stroke: #2a2420; stroke-width: 5; stroke-linecap: round; }
  .chair .c-label { font-family: var(--display); font-size: 19px; fill: var(--brand-text); transition: fill 0.25s ease; }
  .chair:hover .c-seat, .chair.is-active .c-seat { fill: url(#seatGradActive); }
  .chair.is-active .c-back, .chair.is-active .c-arm { stroke: var(--brand-accent); }
  .chair.is-active .c-label { fill: var(--brand-accent); font-weight: 700; }
  .chair:focus, .chair:focus-visible { outline: none; }
  .chair:focus-visible .c-label { text-decoration: underline; }
  .table-text { position: absolute; left: 50%; top: 50%; width: 33%; transform: translate(-50%, -50%); text-align: center; color: var(--brand-paper); pointer-events: none; }
  .table-text .table-label { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-accent-light); margin-bottom: 12px; }
  .table-text .faq-qtext { font-family: var(--display); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; margin-bottom: 14px; }
  .table-text .faq-atext { font-size: clamp(14px, 1.25vw, 16.5px); line-height: 1.6; color: rgba(248,245,240,0.86); }
  .faq-hint { text-align: center; font-size: 13px; color: var(--brand-secondary); margin-top: 8px; }
  .faq-mobile { display: none; }
  @media (max-width: 1024px) {
    .table-scene, .faq-hint { display: none; }
    .faq-mobile { display: block; }
    .faq-chairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .faq-chairs button { padding: 12px 10px; border: 1px solid var(--brand-primary); font-family: var(--display); font-size: 14px; line-height: 1.3; min-height: 44px; white-space: nowrap; }
    .faq-chairs button.is-active { background: var(--brand-primary); color: #fff; }
    .faq-table-m { background: var(--brand-dark); color: var(--brand-paper); padding: 24px 22px; }
    .faq-table-m .table-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-accent-light); margin-bottom: 12px; }
    .faq-table-m .faq-qtext { font-family: var(--display); font-size: 18px; line-height: 1.3; margin-bottom: 12px; }
    .faq-table-m .faq-atext { font-size: 14.5px; line-height: 1.65; color: rgba(248,245,240,0.85); }
  }

  /* ─── FINAL: map + form ─── */
  .final { background: var(--brand-dark); color: var(--brand-paper); overflow: hidden; }
  .final-bg { position: absolute; inset: 0; }
  .final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .final-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,14,0.86) 0%, rgba(20,16,14,0.8) 55%, rgba(20,16,14,0.9) 100%); }
  .final > .container { position: relative; z-index: 2; }
  .final-intro { font-size: 17px; line-height: 1.7; color: rgba(248,245,240,0.88); margin-top: -20px; margin-bottom: 40px; }
  .final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
  .map-wrap { position: relative; min-height: 420px; border: 1px solid rgba(248,245,240,0.2); background: #2a2420; }
  .map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.85); }
  .map-caption { position: absolute; left: 16px; bottom: 16px; background: var(--brand-dark); color: var(--brand-paper); padding: 8px 14px; font-family: var(--display); font-style: italic; font-size: 13px; }
  @media (max-width: 1024px) { .final-grid { grid-template-columns: 1fr; } .map-wrap { min-height: 320px; } .final-intro { margin-top: -8px; margin-bottom: 28px; } }

  /* ─── FOOTER ─── */
  .footer { background: #0f0d0c; color: var(--brand-paper); padding: 56px 0 28px; }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 48px; margin-bottom: 40px; }
  .footer-brand img { height: 52px; width: auto; margin-bottom: 20px; }
  .footer-tagline { font-size: 14px; line-height: 1.7; color: rgba(248,245,240,0.72); max-width: 40ch; }
  .footer-col h5 { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-accent-light); margin-bottom: 16px; }
  .footer-col p, .footer-col a { font-size: 14px; line-height: 1.7; color: rgba(248,245,240,0.78); margin-bottom: 8px; }
  .footer-col p { display: block; }
  .footer-col a { display: flex; align-items: center; gap: 7px; width: fit-content; border-bottom: 1px solid transparent; padding-bottom: 1px; }
  .footer-col a:hover { border-bottom-color: var(--brand-accent-light); color: var(--brand-paper); }
  .footer-bottom { padding-top: 22px; border-top: 1px solid rgba(248,245,240,0.12); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(248,245,240,0.55); }
  @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
  @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-brand img { height: 44px; } }

  /* ─── MOBILE STICKY WHATSAPP BAR ─── */
  .floating-contact { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--brand-dark); color: var(--brand-paper); height: 48px; display: none; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--brand-accent-light); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .floating-contact svg { width: 18px; height: 18px; }
  @media (max-width: 720px) { .floating-contact { display: flex; } body { padding-bottom: 48px; } }

  /* ─── ANIMATION ─── */
  [data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  [data-animate="left"] { transform: translateX(-24px); }
  [data-animate="right"] { transform: translateX(24px); }
  [data-animate].is-visible { opacity: 1; transform: none; }
  [data-animate][data-delay="1"] { transition-delay: 0.08s; }
  [data-animate][data-delay="2"] { transition-delay: 0.16s; }
  [data-animate][data-delay="3"] { transition-delay: 0.24s; }
  @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; transition: none; } .cushion, .panel, .quote-text { transition: none; } }
  /* ─── DASHBOARD UPLOAD SLOTS (data-placeholder-id wrappers carry the box size; uploaded images fill them) ─── */
  .ph-slot { display: block; }
  .ph-topbar-logo { width: 138px; height: 37px; }
  .ph-topbar-logo img, .ph-footer-logo img { object-fit: contain !important; object-position: left center; }
  .ph-panel { position: absolute; inset: 0; overflow: hidden; }
  .ph-craft { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
  .ph-promo { width: 100%; height: 100%; overflow: hidden; }
  .ph-promo img { object-position: var(--op, 50% 50%); }
  .ph-maker { width: min(100%, calc(640px * 512 / 767)); aspect-ratio: 512 / 767; flex: 0 0 auto; }
  .maker-photo .ph-maker img { max-height: none; }
  .ph-footer-logo { height: 52px; width: calc(52px * 382 / 96); max-width: 100%; margin-bottom: 20px; }
  .footer-brand .ph-footer-logo img { margin-bottom: 0; }
  @media (max-width: 1024px) { .ph-maker { width: min(100%, calc(520px * 512 / 767)); } }
  @media (max-width: 720px) { .ph-topbar-logo { width: 112px; height: 30px; } }
  @media (max-width: 600px) { .ph-footer-logo { height: 44px; width: calc(44px * 382 / 96); } }

/* ──────────────── */

.problem { position: relative; isolation: isolate; }
.problem::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/problem-1792059578050.webp') center/cover no-repeat; opacity: 0.7; }
.craft { position: relative; isolation: isolate; }
.craft::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/craft-1792059661345.webp') center/cover no-repeat; opacity: 0.7; }
.promo { position: relative; isolation: isolate; }
.promo::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/promo-1792059698786.webp') center/cover no-repeat; opacity: 0.7; }
.process { position: relative; isolation: isolate; }
.process::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/process-1792060528398.webp') center/cover no-repeat; opacity: 0.7; }
.maker { position: relative; isolation: isolate; }
.maker::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/maker-1792060247194.webp') center/cover no-repeat; opacity: 0.7; }
.reviews { position: relative; isolation: isolate; }
.reviews::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/reviews-1792059845882.webp') center/cover no-repeat; opacity: 0.7; }
.faq { position: relative; isolation: isolate; }
.faq::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/faq-1792059859988.webp') center/cover no-repeat; opacity: 0.7; }
.hero { position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/hero-1792059961357.webp') center/cover no-repeat; opacity: 0.7; }
.final { position: relative; isolation: isolate; }
.final::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/10/final-1792059969716.webp') center/cover no-repeat; opacity: 0.75; }


.grecaptcha-badge {
    left: 0px !important;
    right: auto !important;
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}
.grecaptcha-badge:hover {
    width: 256px !important;
}