html{scroll-behavior:smooth}
body{margin:0;background:#F6F1E8;color:#26201A;font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#A06A2C}a:hover{color:#7E5320}
::selection{background:rgba(176,124,63,.28)}
@keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(246,241,232,.38)}100%{box-shadow:0 0 0 26px rgba(246,241,232,0)}}
@keyframes cueDot{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(38px);opacity:0}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

@keyframes fadeUp-m{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mq-m{to{transform:translateX(-50%)}}
@keyframes pulseRing-m{0%{box-shadow:0 0 0 0 rgba(246,241,232,.38)}100%{box-shadow:0 0 0 22px rgba(246,241,232,0)}}
@keyframes fadeIn-m{from{opacity:0}to{opacity:1}}
@keyframes slideUp-m{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes cueDot-m{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(30px);opacity:0}}

/* <picture> exists only to offer a WebP source; it must not affect layout. */
picture{display:contents}

/* One document carries both designs. This is the only thing that picks between
   them; app.js reads the same breakpoint so its wiring follows the visible tree. */
[data-layout="mobile"]{display:none}
@media (max-width:720px){
  [data-layout="desktop"]{display:none}
  [data-layout="mobile"]{display:block}
  ::-webkit-scrollbar{display:none}
}

/* Hover states lifted out of style-hover="" attributes on the design canvases.
   Gated on a real pointer — on touch these would latch on after a tap. */
@media (hover:hover){
.hv1:hover{color:#A06A2C!important}
.hv2:hover{background:#0F262C!important;color:#F6F1E8!important}
.hv3:hover{background:#FFFFFF!important;color:#26201A!important;gap:15px!important}
.hv4:hover{border-color:#F6F1E8!important;color:#FFFFFF!important;background:rgba(246,241,232,.08)!important}
.hv5:hover{transform:scale(1.04)!important}
.hv6:hover{transform:scale(1.05)!important}
.hv7:hover{background:rgba(255,255,255,.16)!important}
.hv8:hover{transform:translateY(-5px)!important;box-shadow:0 22px 44px rgba(38,32,26,.12)!important}
.hv9:hover{transform:translateY(-4px)!important;box-shadow:0 18px 38px rgba(38,32,26,.1)!important}
.hv10:hover{background:#26201A!important;color:#F6F1E8!important}
.hv11:hover{background:#FFFFFF!important;color:#16333A!important;gap:15px!important}
.hv12:hover{border-color:#EFE7D8!important;color:#FFFFFF!important;background:rgba(239,231,216,.08)!important}
.hv13:hover{color:#EFE7D8!important}
.hv14:hover{background:#FFFFFF!important}
.hv15:hover{color:#FFFFFF!important}
.hv16:hover{background:#F2EADC!important;color:#26201A!important}
.hv17:hover{background:#0F262C!important;color:#FFFFFF!important}
.hv18:hover{background:#EDE3D2!important;color:#26201A!important}
.hv19:hover{background:rgba(160,106,44,.1)!important}
.hv20:hover{background:rgba(239,231,216,.1)!important}
.hv21:hover{color:#C89B5F!important}
.hv22:hover{background:#FFFFFF!important;color:#16333A!important}
.hv23:hover{background:#FFFFFF!important;color:#26201A!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

:focus-visible{outline:2px solid #A06A2C;outline-offset:3px}