.wrap{padding:0 var(--space-6)}
.sec{padding:var(--space-7) var(--space-6)}
.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:var(--space-5)}
.sec-head.center{justify-content:center;text-align:center}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.center{text-align:center}
/* hero */
.hero-b{position:relative;height:520px;overflow:hidden;background:var(--ink)}
.hero-b .ph{position:absolute;inset:0;opacity:.9}
.hero-b .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,23,23,.72) 0%,rgba(23,23,23,.35) 55%,rgba(23,23,23,0) 100%)}
.hero-b .copy{position:absolute;left:var(--space-8);top:50%;transform:translateY(-50%);color:var(--on-ink);max-width:520px}
.hero-b .eyebrow{color:var(--gold);margin-bottom:var(--space-3)}
.hero-b h1{font-family:var(--font-display);font-weight:300;font-size:64px;line-height:1;margin-bottom:var(--space-4)}
.hero-b h1 b{font-weight:600}
.hero-b p{opacity:.85;margin-bottom:var(--space-5)}
.hero-b .dots{position:absolute;left:50%;bottom:var(--space-5);transform:translateX(-50%);display:flex;gap:var(--space-2)}
.hero-b .dots i{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--on-ink);opacity:.4}.hero-b .dots i:first-child{opacity:1}
/* trust strip (Artexplore style, on paper) */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.trust div{padding:var(--space-5) var(--space-4);text-align:center;border-left:1px solid var(--hairline)}
.trust div:first-child{border-left:0}
.trust b{display:block;font-family:var(--font-display);font-weight:300;font-size:28px;line-height:1.1;margin-bottom:var(--space-1)}
.trust span{color:var(--muted)}
/* style chips row */
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}
/* subject tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--canvas)}
.tile .ph{transition:scale .6s cubic-bezier(.2,.7,.2,1)}.tile:hover .ph{scale:1.03}   /* `scale`, not `transform`: GSAP drives the parallax transform on the same element */
.tile span{position:absolute;left:0;right:0;bottom:0;padding:var(--space-3) var(--space-4);background:rgba(255,255,255,.92);color:var(--ink);text-align:center}
/* press band */
.press{background:var(--ink-2);color:var(--on-ink);text-align:center;padding:var(--space-8) var(--space-6)}
.press blockquote{font-family:var(--font-display);font-weight:300;font-size:28px;line-height:1.3;max-width:720px;margin:0 auto var(--space-5)}
.press .logos{display:flex;justify-content:center;gap:var(--space-8);opacity:.7}
.press .logos span{font-family:var(--font-heading);letter-spacing:.3em;font-size:13px;text-transform:uppercase}
/* shop by room */
.room{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.room .pic{aspect-ratio:1;overflow:hidden}
.room .list{padding:var(--space-8);display:flex;flex-direction:column;justify-content:center}
.room .list h2{margin-bottom:var(--space-5)}
.room .list a{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--rule);font-family:var(--font-display);font-weight:300;font-size:26px;line-height:1.1;color:var(--ink)}
.room .list a small{font-size:13px;color:var(--bronze);font-family:var(--font-sans)}
.room .list a:hover{color:var(--bronze)}
/* marquee */
.marq{background:var(--paper);color:var(--ink);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);overflow:hidden;white-space:nowrap;padding:var(--space-4) 0;font-family:var(--font-display);font-weight:300;font-size:36px;line-height:1}
.marq span{display:inline-block;padding:0 var(--space-6)}
.marq i{color:var(--gold);font-style:normal;margin-right:var(--space-6)}
/* video + quality */
.video{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.video .frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.video .frame .ph{opacity:.8}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:var(--radius-pill);background:var(--paper);display:grid;place-items:center}
.video .play::after{content:"";border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--ink);margin-left:4px}
.video .txt{padding:var(--space-8);text-align:center}
.video .txt h2{margin-bottom:var(--space-4);font-size:36px}
.video .txt p{color:var(--ink-soft);max-width:420px;margin:0 auto var(--space-5)}
/* reviews */
/* customer reviews: text-led. The quote is the content; the piece it was written about is a small thumbnail. */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7) var(--space-6)}
.rev{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.rev blockquote{margin:0;flex:1;font-family:var(--font-display);font-weight:300;font-size:21px;line-height:1.45;color:var(--ink)}
.rev .who{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--hairline)}
.rev .thumb{flex:none;display:block;width:52px;height:52px;overflow:hidden;background:var(--canvas)}
.rev .thumb .ph{display:block}
.rev .by{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:18px}
.rev .by b{font-weight:600;color:var(--ink)}
.rev .by small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* testimonial band */
.testi{background:var(--paper);border-top:1px solid var(--hairline);padding:var(--space-9) var(--space-6);text-align:center}
.testi blockquote{font-family:var(--font-display);font-weight:300;font-size:32px;line-height:1.25;max-width:760px;margin:0 auto var(--space-4)}
.testi .by{color:var(--bronze)}
/* orientation chips + curated + ugc */
.orient{display:flex;gap:var(--space-2);justify-content:center}
.curated{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.cur{display:flex;flex-direction:column;gap:var(--space-3)}
.cur .pic{aspect-ratio:3/4;overflow:hidden}
.cur h3{font-family:var(--font-display);font-weight:300;font-size:24px;line-height:1.1}
.cur p{color:var(--muted);font-size:13px;line-height:20px}
.cur a{color:var(--bronze)}
/* newsletter */
.news-band{background:var(--paper);color:var(--ink);border-top:1px solid var(--hairline);text-align:center;padding:var(--space-8) var(--space-6)}
.news-band p{color:var(--muted);margin:var(--space-2) 0 var(--space-5)}
.news-band form{display:flex;gap:var(--space-2);max-width:480px;margin:0 auto}
.news-band .input{border-color:var(--rule)}

/* the three business lines: equal thirds, image top, copy below, whole card is the link */
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.line-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hairline);transition:transform .3s,box-shadow .3s}
.line-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.line-card .pic{aspect-ratio:4/3;overflow:hidden;background:var(--canvas)}.line-card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.line-card .txt{padding:var(--space-5)}.line-card h3{font-family:var(--font-display);font-weight:300;font-size:28px;line-height:1.1;margin-bottom:var(--space-2)}
.line-card p{color:var(--ink-soft);margin-bottom:var(--space-4);font-size:14px}
.line-card[data-kind=portrait] .pic{background:var(--wabi)}.line-card[data-kind=pet] .pic{background:var(--cream)}
@media (max-width:900px){.lines{grid-template-columns:1fr}}
/* Bento: one hero tile sets the hierarchy, the rest fill around it */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:"a a b c" "a a d d";grid-auto-rows:236px;gap:var(--space-4)}
.bento .tile{aspect-ratio:auto;height:100%}
.bento .tile:nth-child(1){grid-area:a}.bento .tile:nth-child(2){grid-area:b}.bento .tile:nth-child(3){grid-area:c}.bento .tile:nth-child(4){grid-area:d}
.bento .tile:nth-child(1) span{text-align:left;font-size:13px;padding:var(--space-4) var(--space-5)}
.bento .tile:nth-child(1) span::after{content:" \2192";color:var(--bronze)}
/* UGC: real buyer photos are not all the same shape */
/* buyer photos: justified rows. Every photo in a row shares one height; widths follow each photo's proportions. */
.ugc{display:flex;flex-direction:column;gap:var(--space-5)}
.ugc-row{display:flex;gap:var(--space-4)}
.ugc figure{margin:0;flex:var(--ar,1) 1 0;min-width:0}
.ugc .ph{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1);background-color:var(--canvas)}
.ugc figcaption{margin-top:var(--space-2);font-size:13px;line-height:16px;color:var(--muted)}
@media (max-width:760px){
  .ugc{flex-direction:row;overflow-x:auto;gap:var(--space-3);scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--space-2)}
  .ugc::-webkit-scrollbar{display:none}
  .ugc-row{display:contents}
  .ugc figure{flex:0 0 auto;width:calc(240px * var(--ar,1));scroll-snap-align:start}
}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "a a" "b c" "d d";grid-auto-rows:150px}}

.hero-b .ph{position:absolute;inset:0;opacity:.9}
@media (max-width:900px){.tiles,.curated{grid-template-columns:repeat(2,1fr)}.room,.video{grid-template-columns:1fr}.reviews{grid-template-columns:1fr}.hero-b{height:420px}.hero-b .copy{left:var(--space-4)}.hero-b h1{font-size:44px}.trust{grid-template-columns:repeat(2,1fr)}.trust div{border-left:0}}