/* Page-specific sections */
.hero { position:relative; min-height:400px; display:flex; align-items:center; overflow:hidden; background:linear-gradient(100deg,var(--bg) 35%,var(--blush)); }
.hero .wrap { position:relative; z-index:1; width:100%; }
.hero h1 { font-size:clamp(42px,7vw,70px); line-height:1.05; margin-bottom:12px; }
.hero p { color:var(--mut); margin-bottom:22px; }
.hero-art { position:absolute; right:-30px; bottom:-20px; width:min(60%,430px); opacity:.55; }
.cats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0 36px; }
.cat { background:var(--card); border-radius:var(--r); padding:10px 6px 12px; text-align:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.cat .im { aspect-ratio:1/.9; margin-bottom:8px; background:var(--bg); } .cat:hover .im svg { transform:scale(1.08); }
.sec-h { display:flex; justify-content:space-between; align-items:baseline; } .sec-h a { font-size:13px; color:var(--mut); }

.ban { padding:32px 0; background:linear-gradient(100deg,var(--card),var(--blush)); }
.ban h1 { font-size:38px; letter-spacing:.06em; text-transform:uppercase; }
.crumb { font-size:12px; color:var(--mut); margin:16px 0 10px; } .crumb a:hover { text-decoration:underline; }
.bar { display:flex; gap:8px; margin:14px 0 18px; } .bar span { flex:1; padding:9px 14px; border-radius:8px; background:var(--card); font-size:14px; }

.pd { display:grid; gap:24px; padding-top:12px; } @media (min-width:760px) { .pd { grid-template-columns:1fr 1fr; gap:46px; } }
.pd .im { aspect-ratio:1/.9; } .pd .im svg { width:62%; }
.pd h1 { font-size:32px; } .lbl { margin:18px 0 8px; font-size:14px; }
.enq { margin-top:12px; padding:12px; display:flex; gap:10px; border-radius:10px; background:rgba(37,162,90,.12); color:var(--mut); font-size:13px; }
.enq .ic { fill:var(--wa); stroke:none; }

.about { margin-top:32px; padding:36px 0; background:linear-gradient(120deg,var(--card),var(--bg)); }
.about > .wrap > p { max-width:540px; margin-top:10px; color:var(--mut); }
.feat { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:22px; padding:16px 6px; border-radius:var(--r); background:var(--card); text-align:center; font-size:12px; color:var(--mut); }
.feat i { display:block; font-style:normal; font-size:22px; color:var(--ink); }
.visit { display:grid; gap:20px; margin-top:34px; } @media (min-width:720px) { .visit { grid-template-columns:1fr 1fr; } }
.info p { display:flex; gap:10px; margin:8px 0; font-size:14px; color:var(--mut); }
.row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.shop { min-height:180px; display:grid; place-items:center; border-radius:var(--r); background:linear-gradient(135deg,#6B5144,#C9A98E); color:#fff; font:500 30px var(--serif); letter-spacing:.3em; }
.rev { margin-top:38px; padding:28px 16px; text-align:center; background:var(--card); border-radius:14px; }
.rev .n { font:400 54px/1 var(--serif); } .rev .st { color:var(--star); letter-spacing:2px; }
.rev .row,.ig .row { justify-content:center; }
.ig { margin-top:38px; text-align:center; } .ig .grid { grid-template-columns:repeat(3,1fr); } .ig .im { aspect-ratio:1; }

/* Four category tiles: 2x2 on phones, one row on larger screens */
.cats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .cats { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* Hero slider */
.slider { position: relative; overflow: hidden; }
.slides { display: flex; transition: transform .8s var(--ease); will-change: transform; }
.slide { position: relative; flex: 0 0 100%; min-height: 420px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(100deg, var(--bg) 35%, var(--c2)); }
.slide .wrap { position: relative; z-index: 1; width: 100%; }
.slide .eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; }
.slide h1 { font-size: clamp(40px, 7vw, 68px); line-height: 1.05; margin-bottom: 12px; }
.slide .lead { color: var(--mut); max-width: 340px; margin-bottom: 22px; }
.slide-art { position: absolute; right: -30px; bottom: -10px; width: min(58%, 420px); opacity: .6; transition: transform 1.2s var(--ease); transform: translateX(40px) scale(.94); }
.slide.active .slide-art { transform: none; }
.slide .copy > * { opacity: 0; }
body.ready .slide.active .copy > * { animation: riseIn .9s var(--ease) both; }
body.ready .slide.active .copy > :nth-child(2) { animation-delay: .1s; } body.ready .slide.active .copy > :nth-child(3) { animation-delay: .2s; } body.ready .slide.active .copy > :nth-child(4) { animation-delay: .3s; }
.sl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.75); color: #3A2A24; font-size: 26px; line-height: 1; display: none; place-items: center; z-index: 2; }
.sl-nav.prev { left: 14px; } .sl-nav.next { right: 14px; } .sl-nav:hover { background: #fff; }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 4px; z-index: 2; }
.sl-dot { width: 28px; height: 28px; position: relative; } /* big tap target, small visible dot */
.sl-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 99px; background: var(--ink); opacity: .25; transition: width .4s var(--ease), opacity .3s; }
.sl-dot[aria-current="true"]::after { width: 24px; margin-left: -12px; opacity: .8; }
@media (min-width: 900px) { .slide { min-height: 480px; } .sl-nav { display: grid; } }
@media (prefers-reduced-motion: reduce) { .slide.active .copy > * { opacity: 1; animation: none; } .slides { transition: none; } }

/* Slider photos: full-bleed image with a soft overlay so the text stays readable */
.slide-bg { position: absolute; inset: 0; z-index: 0; } .slide-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.no-photo .slide-bg { display: none; } .slide:not(.no-photo) .slide-art { display: none; }
.slide:not(.no-photo)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(251,245,239,.92) 0%, rgba(251,245,239,.62) 38%, rgba(251,245,239,0) 68%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 38%, transparent 68%); }
.slide:not(.no-photo) .lead { color: var(--ink); opacity: .78; }
.slide.active:not(.no-photo) .slide-bg img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (max-width: 719px) {
  .slide:not(.no-photo) { min-height: 520px; align-items: flex-end; padding-bottom: 54px; }
  .slide:not(.no-photo)::after { background: linear-gradient(0deg, rgba(251,245,239,.95) 0%, rgba(251,245,239,.7) 40%, rgba(251,245,239,0) 72%);
    background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 95%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 40%, transparent 72%); }
}
@media (prefers-reduced-motion: reduce) { .slide.active:not(.no-photo) .slide-bg img { animation: none; } }

/* Category tiles with photos: portrait image, label on a soft dark fade */
.cat { position: relative; overflow: hidden; }
.cat:not(.no-photo) { display: block; padding: 0; aspect-ratio: 4 / 5; background: var(--card); }
.cat:not(.no-photo) .im { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; border-radius: 0; background: none; }
.cat:not(.no-photo) .im svg { display: none; }
.cat-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.cat:hover .cat-photo { transform: scale(1.06); }
.cat:not(.no-photo)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(30,18,12,.72) 0%, rgba(30,18,12,.18) 42%, rgba(30,18,12,0) 68%); }
.cat:not(.no-photo) .cat-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 12px; color: #fff; font-size: 13px; letter-spacing: .14em; text-align: left; }
.cat:not(.no-photo) .cat-label::after { content: " →"; opacity: .8; }

/* Instagram strip: square photos that link to the profile */
.ig-tile { position: relative; overflow: hidden; display: grid; place-items: center; }
.ig-tile:not(.no-photo) svg { display: none; }
.ig-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ig-tile:hover .ig-photo { transform: scale(1.07); }