/* Duque: white surfaces, charcoal structure, red actions and yellow details. */
:root { --yellow: #f2cc3d; }
.topbar { border-bottom: 2px solid var(--yellow); }
.header .logo { color: var(--red); }
.header .logo-caption { color: var(--ink); }
.logo-dot { color: var(--ink); }
.footer .logo-dot { color: var(--yellow); }
.button { background: var(--red); }
.button:hover { background: #a71925; }
.button-white { background: #fff; color: var(--ink); }
.button-white:hover { background: #fff6d6; }
.brand-accent { color: var(--red); }
.category-grid > a:hover { border-color: #e5c767; background: #fffdf5; }
.category-icon { background: #f4f3f1; }
.category-grid > a:nth-child(2) .category-icon,
.category-grid > a:nth-child(4) .category-icon { background: #fff6d6; }
.category-grid > a:nth-child(3) .category-icon { background: #f4f3f1; }
.product-tag { color: #a71925; }
.calculator-copy .eyebrow, .calculator-steps b, .auto-copy > .eyebrow { color: var(--yellow); }
.auto-copy p, .calculator-copy > p, .calculator-steps span { color: #d5d5d5; }
.footer-grid a:hover, .footer-grid button:hover { color: var(--yellow); }
.store-actions a:first-child, .finish-options > button[aria-pressed=true] { color: var(--red); }
.light-control input { accent-color: var(--red); }
.brands-section > div { color: #535353; }
.hero { --hero-tone: #b45e3e; --hero-text: #fff; --hero-muted: #fff4eb; width: 100%; margin: 0; height: 510px; aspect-ratio: auto; background: var(--hero-tone); color: var(--hero-text); border-radius: 0; }
.hero-room-frame { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.hero-image, .hero-wall { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 56%; animation: none; transform: none; filter: none; }
/* Color layers use a wall-only mask computed from the original photo. */
.hero-wall { opacity: 0; pointer-events: none; transition: opacity 1.5s cubic-bezier(.25,.7,.25,1); }
.hero::after { content: none; }
.hero-content { position: relative; z-index: 1; width: min(1200px,calc(100% - 80px)); margin-inline: auto; padding: 56px 0 0; }
.hero .eyebrow { color: var(--hero-muted); font-size: .75rem; letter-spacing: .14em; }
.hero h1 { margin: 20px 0 18px; color: var(--hero-text); font-size: clamp(42px,4.2vw,64px); font-weight: 650; line-height: 1.07; letter-spacing: -.055em; max-width: 610px; }
.hero h1 em { font-style: normal; font-weight: 400; }
.hero h1 br { display: block; }
.hero p { margin: 0; color: var(--hero-muted); font-size: 1rem; line-height: 1.65; max-width: 450px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.hero-actions .button { margin: 0; width: auto; min-height: 46px; padding: 12px 22px; font-size: .875rem; }
.hero-secondary { font-size: .875rem; color: var(--hero-text); border-bottom: 1px solid currentColor; padding-block: 8px; }
.hero-secondary:hover { border-color: var(--red); color: var(--red); }
.hero-palette { position: absolute; z-index: 1; top: auto; bottom: 24px; right: max(40px,calc((100% - 1200px)/2)); width: 316px; padding: 16px 20px 10px; background: #ffffffed; border-radius: 4px; }
.hero-palette-label { font-size: .9rem; font-weight: 500; color: #38342e; }
.hero-controls { display: flex; gap: 2px; align-items: center; margin-top: 14px; }
.hero-scene { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid transparent; border-radius: 50%; background: transparent; padding: 5px; display: grid; place-items: center; transition: border-color .2s; }
.hero-scene > span { width: 32px; height: 32px; background: var(--scene-color); border: 1px solid #00000012; border-radius: 50%; }
.hero-scene[aria-pressed=true] { border-color: #524b42; }
.hero-scene:hover { border-color: #524b4270; }
.hero-palette-meta { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 6px 0; color: #38342e; font-size: .75rem; }
#hero-scene-count { font-size: .65rem; letter-spacing: .13em; }
.hero-playback, .hero-motion-optin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px; border: 0; background: transparent; color: #38342e; font-size: .75rem; margin-top: 7px; }
.hero-motion-optin { text-decoration: underline; text-underline-offset: 4px; margin-left: 8px; }
.hero-motion-optin[hidden] { display: none; }
.hero-playback .icon { width: 15px; height: 15px; }
.hero-playback:hover, .hero-motion-optin:hover { color: var(--red); }
.hero-content .heading-char:hover .char-ink { color: var(--hero-text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.heading-word { display: inline-block; white-space: nowrap; }
.motion-ready .animated-heading .heading-word { opacity: 1; transform: none; animation: none; }
.heading-char, .char-ink { display: inline-block; font: inherit; }
.char-ink { transition: transform .3s cubic-bezier(.2,.65,.3,1),color .25s; }
.heading-char:hover .char-ink { color: var(--red); }
.auto-feature .heading-char:hover .char-ink, .calculator-section .heading-char:hover .char-ink { color: var(--yellow); }
.motion-ready .animated-heading .heading-char { opacity: 0; transform: translateY(8px); }
.motion-ready .animated-heading.is-visible .heading-char { animation: letter-enter .65s cubic-bezier(.2,.7,.25,1) calc(var(--char)*18ms) both; }
@keyframes letter-enter { to { opacity: 1; transform: none; } }
.history-section { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: clamp(30px,5vw,70px); padding-top: 10px; padding-bottom: 64px; }
.history-photo { margin: 0; overflow: hidden; border-radius: 6px; background: #d7c5b0; }
.history-photo img { display: block; width: 100%; height: auto; }
.history-copy { min-width: 0; }
.history-copy h2 { font-size: clamp(26px,2.65vw,34px); font-weight: 500; line-height: 1.25; letter-spacing: -.045em; margin-top: 16px; }
.history-copy h2 em { font-style: normal; color: var(--red); }
.history-text { margin-top: 22px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.history-text p + p { margin-top: 14px; }
@media (max-width: 760px) {
  .history-section { grid-template-columns: 1fr; gap: 26px; padding-top: 8px; padding-bottom: 44px; }
  .history-copy h2 { font-size: clamp(26px,6.8vw,32px); }
  .history-text { margin-top: 18px; }
}
@media(min-width:761px) and (max-width:1000px) {
  .hero-content { padding-top: 42px; }
  .hero h1 { font-size: 44px; margin-top: 15px; margin-bottom: 12px; max-width: 480px; }
  .hero p { font-size: .875rem; }
  .hero-actions { margin-top: 18px; gap: 16px; }
  .hero-palette { top: auto; right: 25px; bottom: 20px; }
}
@media(max-width:760px) {
  .hero { display: flex; flex-direction: column; width: calc(100% - 24px); margin-top: 12px; height: auto; aspect-ratio: auto; transition: background-color 1.5s cubic-bezier(.25,.7,.25,1); }
  .hero-content { width: 100%; padding: 32px 25px 24px; }
  .hero h1 { font-size: clamp(34px,8.8vw,48px); margin: 18px 0 16px; }
  .hero p { font-size: .9rem; max-width: 350px; }
  .hero-actions { gap: 18px; margin-top: 23px; flex-wrap: wrap; }
  .hero-actions .button { min-height: 44px; padding: 11px 18px; }
  .hero-secondary { font-size: .8rem; }
  .hero-palette { position: relative; top: auto; right: auto; bottom: auto; width: calc(100% - 32px); margin: 0 16px 16px; padding: 15px 16px 5px; }
  .hero-controls { gap: 2px; margin-top: 10px; }
  .hero-controls { max-width: 276px; }
  .hero-scene { flex: 1 1 0; width: auto; min-width: 0; }
  .hero-palette-meta { width: 276px; max-width: 100%; padding-top: 9px; }
  .hero-room-frame { order: 3; position: relative; inset: auto; width: 100%; aspect-ratio: 3/2; }
  .hero-playback, .hero-motion-optin { margin-top: 2px; }
}