/* R16 homepage */
.home16 main{display:block}

/* ---- 1 · Hero ---- */
.h-hero{position:relative;min-height:max(100svh,720px);display:flex;align-items:center;color:#fff8ee;overflow:hidden;isolation:isolate;background:#2a2016}
.h-hero-media{position:absolute;inset:0;z-index:-1}.h-hero-media picture{display:contents}
.h-hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform:scale(calc(1.12 - var(--hp,0) * .06)) translate3d(0,calc(var(--py,0) * 1px),0);animation:hero-in 2.6s var(--ease-out) both;will-change:transform}
@keyframes hero-in{from{transform:scale(1.22)}}
/* The photo opens dimmed: an overlay fades out (a filter on the full-screen photo re-renders every frame). */
.h-hero-media::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;animation:hero-dim 2.6s var(--ease-out) both}
@keyframes hero-dim{from{opacity:.3}}
.h-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,6,.72) 0%,rgba(14,10,6,.35) 38%,rgba(14,10,6,0) 62%),linear-gradient(0deg,rgba(14,10,6,.62) 0%,rgba(14,10,6,0) 46%),linear-gradient(180deg,rgba(14,10,6,.45) 0%,rgba(14,10,6,0) 22%)}
.h-pollen{position:absolute;inset:0;overflow:hidden}
.h-pollen i{position:absolute;bottom:-12px;width:var(--sz,4px);height:var(--sz,4px);border-radius:50%;background:rgba(255,236,190,.85);left:var(--x);animation:pollen var(--t,14s) linear var(--dl,0s) infinite;opacity:0}
@keyframes pollen{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.9}100%{transform:translate3d(var(--dx,40px),-105vh,0);opacity:0}}
.h-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,5vw,80px);padding:clamp(120px,14vh,170px) 0 clamp(90px,11vh,130px)}
.h-hero-copy .v-display{font-size:clamp(3.4rem,8.4vw,8.2rem);text-shadow:0 2px 30px rgba(0,0,0,.25)}
.h-hero-copy .v-lede{color:rgba(255,248,238,.9);max-width:34ch}
.h-rise{opacity:0;transform:translateY(16px);animation:rise 1s var(--ease-out) forwards;animation-delay:calc(.5s + var(--d,0) * 120ms)}
@keyframes rise{to{opacity:1;transform:none}}
.h-hero .split-line>span{animation:line-up 1.1s var(--ease-out) forwards;animation-delay:calc(.35s + var(--d,0) * 130ms)}
@keyframes line-up{to{transform:none}}
.h-hero-art{display:flex;flex-direction:column;align-items:center;gap:16px;perspective:1200px}
.h-frames{position:relative;width:min(100%,380px);aspect-ratio:1000/1459;transform:rotateY(calc(var(--tx,0) * 7deg)) rotateX(calc(var(--ty,0) * -6deg));transition:transform .6s var(--ease);transform-style:preserve-3d;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.h-frame{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(10px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease-out);display:grid;place-items:center}
.h-frame.is-on{opacity:1;transform:none}
.h-frame-cut{width:100%;height:100%;object-fit:contain}
/* Catalogue frames are the store's framed tiles: the frame sits at x 230-849, y 73-978 of every 1080 tile, so the
   tile is scaled and shifted until the frame fills the box. */
.h-frame.is-tile{display:block;overflow:hidden}
.h-frame-tile{position:absolute;max-width:none;width:174.19%;height:119.21%;left:-37.1%;top:-8.06%}
/* The frames are solid rectangles: one box shadow on the stack, drawn once, instead of a drop-shadow filter on each
   crossfading image. */
.h-frames::before{content:"";position:absolute;inset:2px;box-shadow:0 30px 40px rgba(0,0,0,.45);pointer-events:none}   /* inside the picture's edges */
@media (hover:none){.h-frames{transform:none;transform-style:flat}}
.h-frame-cap{font:italic 500 1.05rem/1 var(--disp);color:rgba(255,248,238,.88);margin:0;letter-spacing:.01em;min-height:1em}
.h-scroll{position:absolute;left:50%;bottom:18px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,248,238,.8);font:600 .7rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;text-decoration:none}
.h-scroll{gap:12px}
.h-scroll-line{position:relative;width:1px;height:56px;overflow:hidden;background:rgba(255,248,238,.24)}
.h-scroll-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:#fff8ee;animation:scroll-cue 2.4s var(--ease) infinite}
@keyframes scroll-cue{0%{transform:translateY(-100%)}70%,100%{transform:translateY(260%)}}
@media (max-width:900px){
  .h-hero{align-items:stretch}
  .h-hero-grid{grid-template-columns:1fr;gap:14px;padding:96px 0 56px;align-content:end}
  .h-hero-art{order:-1;align-self:center;gap:8px}
  .h-frames{width:min(40vw,170px)}
  .h-hero-copy .v-display{font-size:clamp(3rem,13vw,4.2rem)}
  .h-hero .v-lede{font-size:1rem}
  .h-hero-media img{object-position:62% 50%}
  .h-vignette{background:linear-gradient(0deg,rgba(14,10,6,.8) 0%,rgba(14,10,6,.25) 55%,rgba(14,10,6,.45) 100%)}
  .h-scroll{display:none}
}

/* ---- 2 · Marquee ---- */

/* ---- 3 · Before / after ---- */
.h-ba{padding:clamp(80px,12vw,170px) 0;background:var(--cream);position:relative}
.h-ba-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,100px);align-items:center}
.h-ba-pets{display:grid;gap:10px;margin-top:34px;max-width:440px}
.h-ba-pets button{display:flex;align-items:center;gap:14px;padding:10px;border:1.5px solid transparent;border-radius:var(--r);background:transparent;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.h-ba-pets button:hover{background:rgba(22,17,13,.04);transform:translateX(4px)}
.h-ba-pets button[aria-selected=true]{background:var(--paper);border-color:var(--line-2);box-shadow:0 10px 26px -18px rgba(22,17,13,.5)}
.h-ba-pets img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.h-ba-pets b{display:block;font:550 1.3rem/1.1 var(--disp)}
.h-ba-pets small{color:var(--muted);font-size:.86rem}
.h-ba-caption{color:var(--muted);font-size:.92rem;margin:18px 0 0}
.h-ba-stage{display:flex;justify-content:center}
.h-ba-frame{--pos:50%;position:relative;aspect-ratio:5/7;width:min(100%,calc(80vh * 5 / 7));border-radius:var(--r-lg);overflow:hidden;background:#efe9e0;box-shadow:var(--shadow-lift);touch-action:pan-y;user-select:none}
.h-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease)}
.h-ba-frame .after{background:#f7f6f3}
/* The wipe slides a window over the photo while the photo slides back inside it: two transforms, nothing re-cut
   or repainted per frame (a moving clip-path repaints the photo every frame on phones). */
.h-ba-frame .before{position:absolute;inset:0;overflow:hidden;translate:calc(var(--pos) - 100%) 0;will-change:translate}
.h-ba-frame .before img{translate:calc(100% - var(--pos)) 0;will-change:translate}
.h-ba-pets button[aria-busy=true]{border-color:var(--line-2)}
.h-ba-handle{position:absolute;top:0;bottom:0;left:0;width:100%;translate:var(--pos) 0;pointer-events:none;will-change:translate}
.h-ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.25)}
.h-ba-handle .knob{position:absolute;top:50%;left:0;width:56px;height:56px;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.28);display:grid;place-items:center}
.h-ba-handle .knob::before{content:"";width:30px;height:30px;background:currentColor;color:var(--ink);-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}
.h-ba-frame{--paw:url("/assets/paw-mask.svg")}
.h-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.h-ba-frame:focus-within .knob{outline:2px solid var(--rust);outline-offset:3px}
.h-ba-frame .tag{position:absolute;top:18px;padding:7px 14px;border-radius:999px;background:rgba(22,17,13,.72);color:#fff;font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.h-ba-frame .t-before{left:18px}.h-ba-frame .t-after{right:18px;background:rgba(255,255,255,.85);color:var(--ink)}
@media (max-width:900px){.h-ba-grid{grid-template-columns:1fr}.h-ba-stage{order:-1}.h-ba-pets{grid-template-columns:repeat(3,1fr)}.h-ba-pets button{flex-direction:column;text-align:center;gap:8px}.h-ba-pets small{display:none}}

/* ---- 4 · How it works ---- */
.h-how{background:var(--night);color:#f3e8d6;padding:clamp(80px,12vw,160px) 0;position:relative;overflow:clip}
.h-how-head{max-width:820px;margin-bottom:clamp(40px,6vw,80px)}
.h-how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.h-how-visual{position:sticky;top:calc(50vh - min(36vh,320px));align-self:start;height:min(72vh,640px);border-radius:var(--r-lg);background:#211912;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hv{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.97);transition:opacity .8s var(--ease),transform 1s var(--ease-out);pointer-events:none}
.h-how-visual[data-step="0"] .hv-0,.h-how-visual[data-step="1"] .hv-1,.h-how-visual[data-step="2"] .hv-2,.h-how-visual[data-step="3"] .hv-3{opacity:1;transform:none}
.hv-card{position:absolute;width:38%;box-shadow:0 30px 50px -20px rgba(0,0,0,.8);transition:transform 1.2s var(--ease-out)}
.hv-card img{display:block;width:100%;height:auto}
.hv-0 .c1{transform:translateX(-62%) rotate(-10deg)}.hv-0 .c2{transform:translateY(-4%) rotate(0deg);z-index:1}.hv-0 .c3{transform:translateX(62%) rotate(10deg)}
.h-how-visual:not([data-step="0"]) .hv-card{transform:none}
.hv-phone{position:relative;width:42%;aspect-ratio:9/18;border-radius:34px;padding:10px;background:#0c0a08;box-shadow:0 0 0 2px #2e261f,0 40px 60px -20px rgba(0,0,0,.8);overflow:hidden}
.hv-phone img{width:100%;height:100%;object-fit:cover;border-radius:26px;transform:translateY(100%);transition:transform 1.2s var(--ease-out) .25s}
.h-how-visual[data-step="1"] .hv-phone img{transform:none}
.hv-up{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:inline-flex;gap:8px;align-items:center;white-space:nowrap;padding:12px 18px;border-radius:999px;background:#fff8ee;color:var(--ink);font:600 .86rem/1 var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:pulse 2.4s ease-in-out infinite}
.hv-up svg{width:16px;height:16px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,248,238,.5),0 10px 30px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 12px rgba(255,248,238,0),0 10px 30px rgba(0,0,0,.4)}}
.hv-reveal{position:relative;width:54%;aspect-ratio:2/3;overflow:hidden;border-radius:6px;background:#f7f6f3;box-shadow:0 40px 60px -24px rgba(0,0,0,.85)}
.hv-reveal img{width:100%;height:100%;object-fit:contain;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-out) .3s}
.h-how-visual[data-step="2"] .hv-reveal img{clip-path:inset(0 0 0 0)}
.h-how-visual[data-step="2"] .hv-chip{position:absolute;top:16%;right:14%;padding:9px 16px;border-radius:999px;background:var(--gold);color:var(--ink);font:700 .76rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transform:scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1) 1.6s}
.h-how-visual[data-step="2"] .hv-chip{transform:scale(1)}
.h-how-visual{container-type:size}
/* Each format at its real outer size on one shared scale (0.113% of the panel height per mm), so a 16 x 24 frame is
   twice the height of an 8 x 12 and the 12 mm frame face stays the same thickness on every size. */
.hv-fmt{position:absolute;inset:0;display:block}
/* The formats hang on a wall-coloured panel so every finish, Black included, reads as it would at home. */
.hv-3{background:#ebe4d8}
.hv-3 .hv-swatches i{box-shadow:0 0 0 2px rgba(22,17,13,.18)}
.hv-3 .hv-swatches i.on{box-shadow:0 0 0 3px #16110d}
.hv-3 .hv-fmt-chip{background:#16110d;color:#fff8ee}
.hv-fmt img{position:absolute;left:50%;top:51%;height:calc(var(--h) * .113cqh);width:auto;max-width:86cqw;translate:-50% -50%;opacity:0;box-shadow:0 3px 5px rgba(22,17,13,.25),0 34px 50px -24px rgba(22,17,13,.55);transition:opacity .6s var(--ease)}
.hv-fmt img[data-size="8x12"]{--h:322.8}.hv-fmt img[data-size="12x18"]{--h:475.2}.hv-fmt img[data-size="16x24"]{--h:627.6}.hv-fmt img[data-size=poster]{--h:457.2}
.hv-fmt[data-f=black] img[data-f=black],.hv-fmt[data-f=white] img[data-f=white],.hv-fmt[data-f=light-wood] img[data-f=light-wood],.hv-fmt[data-f=dark-wood] img[data-f=dark-wood],.hv-fmt[data-f=none] img[data-f=none]{opacity:1}
.hv-fmt-chip{position:absolute;top:9%;left:50%;translate:-50% 0;white-space:nowrap;padding:9px 16px;border-radius:999px;background:#fff8ee;color:var(--ink);font:700 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hv-swatches{position:absolute;bottom:6%;display:flex;gap:12px}
.hv-swatches .sw-black{--c:#141210}.hv-swatches .sw-white{--c:#f4f1ea}.hv-swatches .sw-light{--c:#c9a477}.hv-swatches .sw-dark{--c:#5b3a24}.hv-swatches .sw-none{--c:#f7f6f3;border-radius:4px}
.hv-swatches i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.25);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.hv-swatches i.on{transform:scale(1.25);box-shadow:0 0 0 3px #fff8ee}
.h-how-steps{list-style:none;margin:0;padding:0}
.h-how-steps li{min-height:min(72vh,640px);display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.28;transition:opacity .6s var(--ease)}
.h-how-steps li.on{opacity:1}
.h-how-steps .n{font:600 .8rem/1 var(--sans);letter-spacing:.3em;color:var(--gold-soft);margin-bottom:18px}
.h-how-steps h3{margin-bottom:16px}
.h-how-steps p{max-width:40ch;color:rgba(243,232,214,.78);font-size:1.12rem;margin:0}
.h-how-cta{margin-top:20px;display:flex;justify-content:center}
@media (max-width:900px){
  .h-how-grid{grid-template-columns:1fr}
  .h-how-visual{top:84px;height:44vh;z-index:1}
  .hv-fmt img{height:calc(var(--h) * .1cqh);top:52%}
  .hv-fmt-chip{top:4%;padding:7px 12px;font-size:.62rem}
  .hv-3 .hv-swatches{bottom:4%;gap:9px}
  .hv-3 .hv-swatches i{width:20px;height:20px}
  .h-how-steps li{min-height:62vh}
}

/* ---- 5 · Every portrait in its frame, on two slow rows (filled from the catalogue in store order) ---- */
.h-styles{padding:clamp(80px,11vw,150px) 0 clamp(70px,9vw,130px);background:var(--paper);overflow:hidden}
.h-hang-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.h-hang-head .v-h2,.h-hang-head .v-lede{margin-inline:auto;text-align:center}
.h-hang-rows{--w:clamp(190px,19vw,290px);margin:clamp(28px,4vw,56px) 0 clamp(28px,4vw,48px)}
.h-hang-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.h-hang-row + .h-hang-row{margin-top:-4px}
.h-hang-track{display:flex;width:max-content;align-items:flex-end;animation:marquee var(--dur,150s) linear infinite}
.h-hang-row.r2 .h-hang-track{--dur:170s;animation-direction:reverse}
.h-hang-row:hover .h-hang-track,.h-hang-row:focus-within .h-hang-track{animation-play-state:paused}
/* Tiles are square with the frame centred; negative margins close the empty sides so frames hang evenly spaced. */
.h-hung{flex:none;width:var(--w);margin-inline:calc(var(--w) * -.115);display:grid;justify-items:center;text-decoration:none;color:var(--ink);transition:transform .5s var(--ease)}
.h-hung.wide{margin-inline:calc(var(--w) * -.01)}
.h-hung img{display:block;width:100%;height:auto}
.h-hung span{margin-top:-6px;padding-bottom:6px;font:600 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.h-hung:hover{transform:translateY(-6px)}
.h-hung:hover span{color:var(--ink)}
.h-hung:focus-visible{outline:2px solid var(--ink);outline-offset:-12px;border-radius:10px}
.h-hang-foot{display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.h-hang-track{animation:none}.h-hang-row{overflow-x:auto}.h-hung[aria-hidden=true]{display:none}}

/* ---- 6 · Gifting: the finished portrait or a gift card ---- */
.h-gift{padding:clamp(80px,12vw,160px) 0;background:var(--cream)}
.h-gift-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.h-gift-head .v-h2,.h-gift-head .v-lede{margin-inline:auto;text-align:center}
.h-gift-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(36px,5vw,64px)}
.h-gcard{display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 44px -34px rgba(22,17,13,.5)}
.h-gcard.dark{background:var(--night);color:#fff8ee;border-color:transparent}
.h-gmedia{margin:0;aspect-ratio:16/10;overflow:hidden}
.h-gmedia > img{width:100%;height:100%;object-fit:cover}
.h-gbody{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.6vw,36px)}
.h-gkick{margin:0;font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.h-gcard.dark .h-gkick,.h-gcard.dark .h-gticks svg{color:var(--gold-soft)}
.h-gbody h3{margin:12px 0 0;font:400 clamp(2rem,3vw,2.6rem)/1 var(--disp)}
.h-gticks{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:10px}
.h-gticks li{display:flex;gap:10px;align-items:flex-start;font-weight:500;line-height:1.4}
.h-gticks svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--rust)}
.h-gbody .v-btn{align-self:flex-start;margin-top:auto}
.h-gcardwrap{display:grid;place-items:center;background:radial-gradient(90% 80% at 50% 30%,#2a211a 0%,var(--night) 70%)}
.h-giftcard{position:relative;width:min(76%,380px);aspect-ratio:1.586;border-radius:16px;overflow:hidden;box-shadow:0 26px 50px -20px rgba(0,0,0,.8);transform:rotate(-4deg);transition:transform .7s var(--ease)}
.h-giftcard::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(217,193,150,.35);pointer-events:none}
.h-gcard:hover .h-giftcard{transform:rotate(-1deg) translateY(-6px)}
.h-giftcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-gc-face{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:16px 18px;background:linear-gradient(0deg,rgba(14,10,6,.82) 0%,rgba(14,10,6,.15) 55%,rgba(14,10,6,.35) 100%);color:#fff8ee}
.h-giftcard .h-gc-logo{width:88px;height:auto}
.h-gc-amt{grid-row:3;font:400 2.4rem/1 var(--disp)}
.h-gc-kind{grid-row:3;justify-self:end;align-self:end;font:600 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.h-amts{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 22px}
.h-amts a{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,248,238,.28);color:#fff8ee;text-decoration:none;font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums;transition:background .25s,color .25s}
.h-amts a:hover{background:#fff8ee;color:var(--ink)}
.h-gquote{margin:clamp(36px,5vw,60px) auto 0;max-width:46rem;text-align:center;display:grid;justify-items:center;gap:12px}
.h-gquote .h-stars{margin:0}
.h-gquote blockquote{margin:0;font:400 clamp(1.35rem,2.2vw,1.8rem)/1.3 var(--disp)}
.h-gquote figcaption{font:600 .7rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:680px){.h-gift-two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.h-giftcard,.h-gcard:hover .h-giftcard{transform:none;transition:none}}

/* ---- 7 · Proof wall ---- */
.h-proof{padding:clamp(80px,12vw,150px) 0 clamp(70px,9vw,120px);background:var(--paper);overflow:hidden}
.h-proof-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(36px,5vw,64px)}
.h-proof-head .v-lede{text-align:center;margin-inline:auto}
.h-proof-head .v-link{margin-top:20px}
.h-stars{display:inline-flex;gap:2px;color:var(--gold);margin-right:6px}
.h-stars svg{width:16px;height:16px}
.h-wall .v-marquee-track{--dur:200s;gap:20px;padding-right:20px;align-items:flex-start}  /* 13 reviews at the old pace */
.h-q{flex:none;width:clamp(260px,26vw,340px);white-space:normal;margin:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 20px 44px -30px rgba(22,17,13,.5);transition:transform .5s var(--ease)}
.h-q:nth-child(even){margin-top:46px}
.h-q:hover{transform:translateY(-6px) rotate(-.4deg)}
.h-q img{width:100%;aspect-ratio:4/5;object-fit:cover}
.h-q figcaption{padding:18px 20px 22px}
.h-q .h-stars{margin:0 0 10px}
.h-q blockquote{margin:0 0 12px;font:450 1.06rem/1.45 var(--disp);font-variation-settings:'opsz' 36}
.h-q cite{font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-style:normal}

.h-rating{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;font-weight:500}
.h-rating .h-stars{margin:0}
.h-rating b{font-weight:700}
/* A bigger tap area for the Google reviews link without moving its underline. */
.h-proof-head .v-link{position:relative}
.h-proof-head .v-link::after{content:"";position:absolute;inset:-10px -8px}
.h-q .h-stars{display:flex}
.h-q cite{display:block}
.h-q.is-text{background:var(--cream)}
.h-q.is-text figcaption{padding:26px 24px 24px}
.h-q.is-text blockquote{font-size:1.18rem;line-height:1.42}
.h-q.is-photo figcaption{padding:14px 20px 16px}

/* ---- 8 · FAQ ---- */
.h-faq{padding:clamp(80px,11vw,150px) 0;background:var(--cream)}
.h-faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.h-faq-list details{border-bottom:1px solid var(--line-2)}
.h-faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;cursor:pointer;font:500 clamp(1.2rem,1.8vw,1.5rem)/1.25 var(--disp);font-variation-settings:'opsz' 72}
.h-faq-list summary::-webkit-details-marker{display:none}
.h-faq-list summary i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);transition:transform .5s var(--ease),background .3s}
.h-faq-list summary i::before,.h-faq-list summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:currentColor;translate:-50% -50%}
.h-faq-list summary i::after{rotate:90deg;transition:rotate .5s var(--ease)}
.h-faq-list details[open] summary i{background:var(--ink);color:#fff8ee}
.h-faq-list details[open] summary i::after{rotate:0deg}
.h-faq-list details>div{overflow:hidden}
.h-faq-list p{margin:0 0 26px;color:var(--ink-2);max-width:60ch;font-size:1.04rem}
@media (max-width:900px){.h-faq-grid{grid-template-columns:1fr}}

/* ---- 9 · Closing call ---- */
/* Shared with the gift guide and gift card page (their closing keeps the framed wall). */
.h-final{position:relative;padding:clamp(110px,16vw,220px) 0;color:#fff8ee;text-align:center;overflow:hidden;isolation:isolate;background:var(--night)}
.h-final-wall{position:absolute;left:-4%;right:-4%;top:50%;z-index:-2;display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,52px);translate:0 -50%;transform:translate3d(0,calc(var(--py,0) * 1px),0);opacity:.34}
.h-final-wall .fw{flex:none;display:block;width:clamp(120px,13vw,230px);height:auto;box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
.h-final-wall .fw:nth-child(odd){translate:0 -14%}.h-final-wall .fw:nth-child(3n){width:clamp(100px,10.5vw,190px)}.h-final-wall .fw:nth-child(4){width:clamp(140px,15vw,270px)}
.h-final::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,14,11,.35)}
.h-final-in{display:flex;flex-direction:column;align-items:center}
.h-final .v-lede{color:rgba(255,248,238,.86);text-align:center}
/* Homepage: the picture-light version. */
.h-final.h-lit{padding:clamp(56px,6vw,84px) 0 clamp(88px,9vw,124px);
  background:radial-gradient(120% 75% at 50% 0%,#241c16 0%,var(--night) 62%)}
/* Plaster grain; overlay blending lets it show most where the light falls. */
.h-final.h-lit::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/home-assets/wall-grain.webp") 0 0/160px 160px;mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.h-lit .u-h .wi{transition-delay:calc(.5s + var(--i,0) * 70ms)}
.t17 .h-lit .v-h2{font-size:clamp(2.4rem,4.2vw,3.8rem)}
/* The stage is one frame wide; the lamp sits on top and its stem meets the frame's top edge. */
.h-light{--fw:clamp(176px,14.5vw,214px);--lw:calc(var(--fw) * .74);position:relative;width:var(--fw);margin:0 auto clamp(40px,4vw,58px);padding-top:calc(var(--lw) * 64 / 240)}
.h-lamp{position:absolute;top:0;left:50%;z-index:3;width:var(--lw);height:auto;translate:-50% 0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.h-lamp-on{opacity:0;transition:opacity .25s}
.h-light-glow{position:absolute;left:50%;top:calc(var(--lw) * 30 / 240 - var(--fw) * .55);z-index:0;width:calc(var(--fw) * 3.2);height:calc(var(--fw) * 2.9);translate:-50% 0;pointer-events:none;opacity:0;
  background:radial-gradient(46% 60% at 50% 19%,rgba(255,226,175,.44) 0%,rgba(255,214,160,.22) 30%,rgba(255,205,150,.08) 56%,transparent 74%);transition:opacity 1.6s var(--ease-out)}
.h-light-motes{position:absolute;left:50%;top:calc(var(--lw) * 34 / 240);z-index:0;width:calc(var(--fw) * 2.1);height:calc(var(--fw) * 1.25);translate:-50% 0;pointer-events:none;opacity:0;transition:opacity 2s 1s}
.h-light-motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,238,205,.85);opacity:0;animation:h-mote 11s linear infinite;animation-play-state:paused}
.h-light-motes i:nth-child(1){left:8%;top:58%;animation-delay:-1s}.h-light-motes i:nth-child(2){left:16%;top:24%;animation-duration:13s;animation-delay:-4s}
.h-light-motes i:nth-child(3){left:21%;top:80%;animation-duration:9s;animation-delay:-6s}.h-light-motes i:nth-child(4){left:12%;top:40%;animation-delay:-8s;width:2px;height:2px}
.h-light-motes i:nth-child(5){left:84%;top:50%;animation-duration:12s;animation-delay:-2s}.h-light-motes i:nth-child(6){left:90%;top:28%;animation-duration:10s;animation-delay:-5s;width:2px;height:2px}
.h-light-motes i:nth-child(7){left:79%;top:84%;animation-duration:14s;animation-delay:-9s}.h-light-motes i:nth-child(8){left:87%;top:68%;animation-duration:11.5s;animation-delay:-3s;width:2px;height:2px}
@keyframes h-mote{0%{opacity:0;translate:0 0}15%{opacity:.7}50%{translate:10px -34px}85%{opacity:.5}100%{opacity:0;translate:-6px -70px}}
/* The real black frame: 5.1% moulding, a dark lip, then the print with the frame's shadow cast onto it. */
.h-light-frame{position:relative;z-index:1;aspect-ratio:2/3;border:calc(var(--fw) * .051) solid #24201b;background:#24201b;
  box-shadow:0 0 0 1px rgba(255,248,238,.05),0 34px 54px -22px rgba(0,0,0,.92);filter:brightness(.34);transition:filter 1.6s var(--ease-out)}
.h-light-frame::after{content:"";position:absolute;inset:calc(var(--fw) * -.051);pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease-out);
  background:linear-gradient(180deg,rgba(255,232,190,.2),transparent 34%)}
.h-light-print{position:relative;height:100%;display:grid;place-items:center;align-content:center;gap:12px;border:1px solid #0c0a06;overflow:hidden;
  background:linear-gradient(180deg,#fbf6ec 0%,#f2eadb 58%,#e6dccb 100%)}
.h-light-print::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,8,.3),transparent 8%),linear-gradient(90deg,rgba(20,14,8,.2),transparent 6%),linear-gradient(270deg,rgba(20,14,8,.16),transparent 6%),linear-gradient(0deg,rgba(20,14,8,.1),transparent 5%)}
.h-light-paw{position:relative;width:34%;height:auto;color:var(--rust);opacity:0;mix-blend-mode:multiply;transform:scale(1.35) rotate(-16deg);
  transition:opacity .35s 1.5s,transform .55s cubic-bezier(.2,1.6,.4,1) 1.5s}
.h-light-print span{position:relative;font:italic 400 clamp(.95rem,1.25vw,1.15rem)/1 var(--disp);color:#6b5a48;opacity:0;transition:opacity .9s 1.9s}
/* On: the lamp catches, flickers, settles; the wall and print warm up; the paw stamps on. */
.h-light.lit .h-lamp-on{opacity:1;transition-delay:.3s}
.h-light.lit .h-light-glow{opacity:1;animation:h-flicker 1.1s .3s both}
.h-light.lit .h-light-frame{filter:none;transition-delay:.4s}
.h-light.lit .h-light-frame::after{opacity:1;transition-delay:.4s}
.h-light.lit .h-light-motes{opacity:1}
.h-light.lit .h-light-motes i{animation-play-state:running}
.h-light.lit .h-light-paw{opacity:.88;transform:scale(1) rotate(-8deg)}
.h-light.lit .h-light-print span{opacity:1}
@keyframes h-flicker{0%{opacity:0}12%{opacity:.8}18%{opacity:.15}30%{opacity:1}37%{opacity:.5}52%,100%{opacity:1}}
@media (max-width:900px){.h-light{--fw:clamp(168px,46vw,224px)}}
@media (prefers-reduced-motion:reduce){
  .h-light-glow,.h-light-frame,.h-light-frame::after,.h-light-paw,.h-light-print span,.h-lamp-on{transition:none!important;animation:none!important}
  .h-light-motes{display:none}
}