:root {
  --ink: #233340; --paper: #faf9f6; --cream: #f0eee8;
  --sage: #e7e9e8; --gold: #826642; --muted: #526068; --line: #d9d6ce;
  --gutter: max(5vw, calc((100vw - 1190px) / 2));
}
.site-header {height:72px;padding-inline:var(--gutter)}
.utility, footer {padding-inline:var(--gutter)}
.hero {min-height:0;grid-template-columns:1fr .92fr;gap:5%;align-items:center;padding:28px var(--gutter);background:var(--cream)}
.hero-copy {padding:16px 0}
h1 {font-size:clamp(40px,4vw,62px);margin-bottom:18px}
h2 {font-size:clamp(30px,3vw,44px);margin-bottom:16px}
.hero-text {font-size:16px;line-height:1.55;margin:0}
.actions {margin-top:22px;flex-wrap:wrap;gap:16px}
.hero-image,.feature-image {min-height:0;height:clamp(255px,25vw,342px);overflow:hidden;background:#e9e6df}
.hero-image {height:auto;aspect-ratio:8 / 5;width:100%}
.hero-image img {object-fit:cover;object-position:50% 62%}
.stats {padding:14px var(--gutter)}
.stats a {display:block;padding:6px 16px;border-inline-start:1px solid #53616b}
.stats a:hover,.stats a:focus-visible {background:#344b58;text-decoration:underline}
.stats,.stat-detail,#about {scroll-margin-top:80px}
.stat-detail {display:none;padding:32px var(--gutter)}
.stat-detail:target {display:block}
.detail-back {display:inline-block;margin-bottom:16px;text-decoration:underline}
.guide-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:16px}
.stat-detail figure {margin:0;background:white}
.stat-detail figure img {display:block;width:100%;aspect-ratio:1;object-fit:contain}
.stat-detail figcaption {padding:8px;font-size:13px}
.lotus-example {max-width:220px}
.stats b {font-size:26px;color:#e1cbaa}
.stats span {color:#edf0ef}
.intro {max-width:none;padding:52px var(--gutter) 20px}
.intro h2 {max-width:740px}
.intro p:last-child {max-width:780px;font-size:15px;margin-bottom:0}
.eyebrow {margin-bottom:12px}
.three-up {margin:0 var(--gutter) 50px;border-block:1px solid var(--line)}
.three-up article {padding:22px}
.three-up h3,.process h3 {margin:10px 0;font-size:23px}
.three-up article p,.process-grid p {margin-bottom:0}
.collection-head {padding:0 var(--gutter) 20px;gap:16px}
.product-grid {padding:0 var(--gutter) 52px;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-card,.product-card.tall,.product-card.wide {grid-area:auto;min-height:0;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.product-card img {position:static;width:100%;height:clamp(165px,15vw,215px);object-fit:contain;background:#f4f3ef}
.product-card:hover img {transform:none}
.product-card div {position:static;color:var(--ink);background:none;padding:16px}
.product-card p {color:var(--gold)}
.product-card h3 {font-size:23px}
.product-card a {color:var(--muted)}
.feature-split {align-items:center;padding:32px var(--gutter);gap:5%}
.feature-copy {padding:0}
.feature-copy ul {margin:0 0 14px}
.process,.faq,.contact {max-width:none;padding:50px var(--gutter)}
.process {background:var(--cream)}
.process-grid {gap:32px;margin-top:24px}
.faq details {padding:17px 0}
.contact {gap:6%}
.contact .eyebrow {color:#dcc5a3}
.contact button {background:var(--cream);color:var(--ink)}
footer {background:#192831}
.whatsapp {
  background:#19cf62;color:#fff;border-radius:999px;width:max-content;height:auto;
  max-width:calc(100vw - 32px);padding:7px 18px 7px 10px;gap:8px;
  box-shadow:0 10px 25px rgba(13,66,37,.19);text-align:start;
}
.whatsapp .wa-icon {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.24)}
.wa-icon svg {width:22px;height:22px}
.whatsapp .wa-copy {display:grid;gap:2px;line-height:1.2}
.wa-copy b {font-size:14px;font-weight:750}
.wa-copy small {font-size:15px;font-weight:500}
.whatsapp:focus-visible {outline:3px solid #123e2c;outline-offset:3px}
footer {padding-bottom:90px}
@media(max-width:600px) {
  .whatsapp {padding:6px 14px 6px 8px;gap:7px;min-height:44px}
  .whatsapp .wa-icon {width:32px;height:32px}
  .wa-copy b {font-size:13px}
  .wa-copy small {font-size:11px}
}
@media(max-width:1000px) {
  .product-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-header nav {gap:14px}
}
@media(max-width:800px) {
  .site-header nav {top:72px}
  .hero,.feature-split {grid-template-columns:1fr;gap:16px}
  .feature-image {height:245px}
  .three-up {margin-bottom:36px}
  .intro,.process,.faq,.contact {padding-block:34px}
  .product-grid {gap:10px;padding-bottom:34px}
  .product-card img {height:clamp(122px,27vw,190px)}
  .product-card div {padding:12px}
  .product-card h3 {font-size:20px}
  .collection-head {align-items:start;flex-direction:column}
  .contact {gap:24px}
}

/* Full-width collection slideshow */
.hero {display:flex;position:relative;isolation:isolate;min-height:clamp(440px,39vw,625px);padding:48px var(--gutter) 68px}
.hero-slides,.hero-slides .slide {position:absolute;inset:0;width:100%;height:100%}
.hero-slides {z-index:-1;overflow:hidden;background:#344338}
.hero-slides .slide {overflow:hidden;opacity:0;transition:opacity 1s ease}
.slide-ambient {position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:blur(28px) brightness(.82)}
.slide-stage {container-type:size;display:grid;place-items:center;position:absolute;inset-inline-end:var(--gutter);top:16px;width:calc((100% - 2 * var(--gutter)) * .53);height:calc(100% - 70px)}
.slide-product {width:min(100cqw,100cqh);height:auto;display:block;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}
.hero-slides .studio-white {background:#fff}
.studio-white .slide-product {mask-image:none}
.hero-slides .active {opacity:1}
.hero-copy {width:min(44%,520px);padding:clamp(22px,3vw,48px);background:rgba(250,249,246,.94);border-inline-start:3px solid #ba9859}
.hero-copy h1 {font-size:clamp(34px,3.6vw,58px)}
.slide-controls {position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;direction:ltr;align-items:center;gap:8px;padding:0 7px;border-radius:24px;background:#172423d9;color:white}
.slide-controls button {width:38px;height:38px;background:transparent;color:inherit;border:0;font-size:23px;cursor:pointer}
.slide-count {font:15px monospace}
@media(max-width:800px){
  .hero {--photo-height:clamp(230px,75vw,380px);padding:calc(var(--photo-height) + 22px) 5vw 62px;min-height:0}
  .hero-copy {width:min(100%,540px);padding:18px}
  .slide-stage {top:10px;inset-inline-end:2%;width:96%;height:var(--photo-height)}
}
@media(prefers-reduced-motion:reduce){.hero-slides .slide {transition:none}}

.category-strip {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px var(--gutter);background:var(--cream);scroll-margin-top:80px}
.category-tile {display:flex;align-items:center;gap:12px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:5px}
.category-tile img {width:clamp(40px,4vw,60px);aspect-ratio:1;object-fit:contain;background:white;border-radius:3px}
.category-tile strong {font-size:15px;overflow-wrap:anywhere}
.category-tile i {margin-inline-start:auto;font-style:normal;color:var(--gold)}
.category-tile:hover,.category-tile:focus-visible {border-color:var(--gold);background:white}
.category-links {margin-top:18px;text-decoration:underline}
[dir=rtl] .category-tile i {transform:scaleX(-1)}
@media(max-width:850px){.category-strip {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scroll-snap-type:x proximity}.category-tile {scroll-snap-align:center}}
@media(max-width:500px){.category-tile {gap:6px;padding:7px}.category-tile strong {font-size:13px}}

.category-browser {scroll-margin-top:80px;background:var(--cream)}
.category-browser > h2 {margin:0;padding:22px var(--gutter) 0;font-size:clamp(23px,2.4vw,34px)}
.category-browser .stat-detail {padding-block:10px 24px;scroll-margin-top:190px}
.category-browser .detail-back {display:none}
.category-browser .stat-detail h2 {font-size:21px}
.category-browser .guide-grid {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(145px,16vw,205px);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.category-browser figure {scroll-snap-align:start}
.category-browser:target #cups-saucers,.category-browser:has(#buyer-guide:target) #cups-saucers {display:block}
.category-browser:has(#cups-saucers:target) [href="#cups-saucers"] {border-color:var(--gold);box-shadow:inset 0 -2px var(--gold)}
.category-browser:has(#mugs:target) [href="#mugs"] {border-color:var(--gold);box-shadow:inset 0 -2px var(--gold)}
.category-browser:has(#coffee-sets:target) [href="#coffee-sets"] {border-color:var(--gold);box-shadow:inset 0 -2px var(--gold)}
.category-browser:has(#infuser-cups:target) [href="#infuser-cups"] {border-color:var(--gold);box-shadow:inset 0 -2px var(--gold)}

.family-layout {display:grid;grid-template-columns:minmax(220px, .84fr) minmax(0,2.4fr);align-items:center;gap:4%;padding:clamp(32px,5vw,72px) var(--gutter);background:#eaf0f1;scroll-margin-top:80px}
.family-copy h2 {font:500 clamp(30px,3.4vw,52px)/1.06 Georgia,serif;color:#202c32}
.family-copy>p:not(.eyebrow) {color:var(--muted);line-height:1.65}
.family-all,.family-controls button {border:1px solid #97a4a9;background:transparent;color:var(--ink)}
.family-all {display:inline-block;padding:12px 18px;font-size:14px;font-weight:600}
.family-controls {display:flex;gap:8px;margin-top:18px}
.family-controls button {background:white;cursor:pointer;width:42px;height:40px;font-size:22px}
[dir=rtl] .family-controls button {transform:scaleX(-1)}
.family-rail {display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px)/2.75);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 3px 10px;scrollbar-width:thin}
.family-card {display:flex;flex-direction:column;background:white;scroll-snap-align:start;padding-bottom:16px}
.family-card img {display:block;width:100%;aspect-ratio:1.55;object-fit:contain}
.family-card strong,#product-lines figcaption strong {display:block;font:600 clamp(18px,1.5vw,24px)/1.22 Georgia,serif}
.family-card strong {margin:18px 15px 6px}
.family-card small {margin:0 15px;color:var(--muted)}
.family-card:hover strong {text-decoration:underline}
#product-lines figcaption small {display:block;margin-top:6px;color:var(--muted)}
@media(max-width:760px){.family-layout {grid-template-columns:minmax(0,1fr);gap:20px}.family-rail {grid-auto-columns:min(72%,290px)}.family-controls {display:inline-flex;margin-inline-start:12px}}