/* sunday-home.css: experience.pixfizz.com homepage, v6.1 (15 Oct 2026). Every rule is scoped to .sh-home. */
.sh-home { display: block; overflow-x: hidden; }
.sh-home label { margin-bottom: 0; }
.sh-home p { margin-top: 0; }
.sh-home a:hover { text-decoration: none; }
.sh-home .btn:focus { box-shadow: none; }
/* Sunday demo store, experience.pixfizz.com overhaul prototype v1 (6 Oct 2026)
   Layout: warm paper storefront, one loud hero (your photo on everything), ink bands for the
   two "studio" moments (Live Finish, Business), a honey band for the demo close.
   Single look by design (brand storefront): every color set explicitly. */
.sh-home {
	--paper: #FBF8F3;
	--cream: #F3EBDD;
	--sand: #E8DDCB;
	--line: #E2D6C3;
	--ink: #26231F;
	--ink-2: #5F584E;
	--ink-3: #8C8478;
	--night: #1B1916;
	--night-2: #272320;
	--night-line: #3A352F;
	--on-night: #F4EEE4;
	--on-night-2: #B9AFA1;
	--honey: #E7A25C;
	--honey-deep: #B5692A;
	--honey-soft: #F6E2C8;
	--sage: #A9B79A;
	--sage-deep: #5F7154;
	--ok: #4F8A5B;
	--f-display: 'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;
	--f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--r-ctl: 10px;
	--r-card: 18px;
	--r-pill: 999px;
	--wrap: 1280px;
	--gut: clamp(16px, 4vw, 40px);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	color-scheme: light;
}
.sh-home, .sh-home * { box-sizing: border-box; }
.sh-home { scroll-behavior: smooth; }
.sh-home { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.sh-home img { max-width: 100%; display: block; }
.sh-home a { color: inherit; }
.sh-home button { font: inherit; color: inherit; }
.sh-home :focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 3px; border-radius: 4px; }
.sh-home .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.sh-home .mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sh-home .eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--honey-deep); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.sh-home .eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sh-home .on-night .eyebrow { color: var(--honey); }
.sh-home h1, .sh-home h2, .sh-home h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-wrap: balance; font-optical-sizing: auto; }
.sh-home h2 { font-size: clamp(34px, 5.2vw, 68px); }
.sh-home h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.sh-home h2 em, .sh-home h1 em { font-style: italic; font-weight: 400; color: var(--honey-deep); }
.sh-home .on-night h2 em, .sh-home .on-night h1 em { color: var(--honey); }
.sh-home .lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); max-width: 54ch; margin: 18px 0 0; }
.sh-home .on-night .lede { color: var(--on-night-2); }
.sh-home .on-night h2, .sh-home .on-night h3 { color: var(--on-night); }
.sh-home .sec { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.sh-home .sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.sh-home .sec-head > * { min-width: 0; }
.sh-home .on-night { background: var(--night); color: var(--on-night); }

/* Buttons */
.sh-home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-pill); border: 1.5px solid transparent; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s; white-space: nowrap; }
.sh-home .btn:active { transform: scale(.98); }
.sh-home .btn-ink { background: var(--ink); color: var(--paper); }
.sh-home .btn-ink:hover { background: #000; }
.sh-home .btn-honey { background: var(--honey); color: var(--night); }
.sh-home .btn-honey:hover { background: #F0B371; }
.sh-home .btn-line { background: transparent; border-color: currentColor; }
.sh-home .btn-line:hover { background: rgba(38, 35, 31, .06); }
.sh-home .on-night .btn-line:hover { background: rgba(255, 255, 255, .08); }
.sh-home .btn svg { width: 18px; height: 18px; flex: none; }
.sh-home .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--paper); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.sh-home .chip:hover { border-color: var(--ink-3); }
.sh-home .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sh-home .on-night .chip { background: transparent; border-color: var(--night-line); color: var(--on-night); }
.sh-home .on-night .chip:hover { border-color: var(--on-night-2); }
.sh-home .on-night .chip[aria-pressed="true"] { background: var(--honey); border-color: var(--honey); color: var(--night); }
.sh-home .chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Demo ribbon */
.sh-home .ribbon { background: var(--night); color: var(--on-night-2); font-size: 13px; }
.sh-home .ribbon .wrap { display: flex; align-items: center; gap: 16px; min-height: 44px; padding-block: 6px; flex-wrap: wrap; }
.sh-home .ribbon b { color: var(--on-night); font-weight: 700; }
.sh-home .ribbon .tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--night); background: var(--honey); border-radius: 4px; padding: 3px 7px; }
.sh-home .ribbon p { margin: 0; flex: 1 1 320px; min-width: 0; }
.sh-home .ribbon a { color: var(--honey); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sh-home .ribbon a:hover { text-decoration: underline; }

/* Header */
.sh-home .hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(251, 248, 243, .92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.sh-home .hdr .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.sh-home .logo { display: block; width: 116px; flex: none; }
.sh-home .logo img { width: 100%; height: auto; }
.sh-home .nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.sh-home .nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); }
.sh-home .nav a:hover, .sh-home .nav a[aria-current="page"] { color: var(--ink); background: var(--cream); }
.sh-home .hdr-icons { display: flex; gap: 6px; margin-left: auto; }
.sh-home .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--ink); position: relative; }
.sh-home .icon-btn:hover { background: var(--cream); }
.sh-home .icon-btn svg { width: 22px; height: 22px; }
.sh-home .cart-dot { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--honey); color: var(--night); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.sh-home .menu-btn { display: none; }
@media (max-width: 980px) {
	.sh-home .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; padding: 8px var(--gut) 16px; }
	.sh-home .nav.open { display: flex; }
	.sh-home .nav a { font-size: 18px; padding: 14px 8px; }
	.sh-home .menu-btn { display: grid; }
}

/* Tech chips ("Show the tech") */
.sh-home .tech { display: none; }
body.xray .sh-home .tech { display: flex; }
.sh-home .tech { position: absolute; z-index: 5; top: 16px; right: var(--gut); max-width: min(360px, calc(100% - 2 * var(--gut))); gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #11100E; color: #EDE6DA; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); font-size: 13px; line-height: 1.45; animation: techIn .45s var(--spring) both; }
.sh-home .tech b { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--honey); margin-bottom: 3px; font-weight: 500; }
.sh-home .tech::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 4px rgba(231, 162, 92, .25); }
.sh-home .tech.inline { position: static; margin-top: 16px; }
@keyframes techIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.sh-home .xray-pill { font-size: 13px !important; position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: var(--r-pill); background: var(--night); color: var(--on-night); border: 1px solid var(--night-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-weight: 700; font-size: 14px; cursor: pointer; }
.sh-home .switch { width: 40px; height: 24px; border-radius: 12px; background: var(--night-line); position: relative; transition: background .25s; flex: none; }
.sh-home .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--on-night); transition: transform .3s var(--spring); }
body.xray .sh-home .switch { background: var(--honey); }
body.xray .sh-home .switch::after { transform: translateX(16px); }
.sh-home .ribbon .xray-inline { background: transparent; border: 1px solid var(--night-line); color: var(--on-night); border-radius: var(--r-pill); padding: 4px 6px 4px 12px; display: inline-flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; cursor: pointer; }
.sh-home .ribbon .xray-inline .switch { width: 32px; height: 20px; }
.sh-home .ribbon .xray-inline .switch::after { width: 14px; height: 14px; }
body.xray .sh-home .ribbon .xray-inline .switch::after { transform: translateX(12px); }

/* ============ HERO ============ */
.sh-home .hero { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 80px) clamp(48px, 7vw, 96px); background:
	radial-gradient(1200px 520px at 85% 10%, rgba(231, 162, 92, .22), transparent 60%),
	radial-gradient(700px 420px at 10% 100%, rgba(169, 183, 154, .25), transparent 60%), var(--paper); }
.sh-home .hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .hero-grid > * { min-width: 0; }
.sh-home .hero h1 { font-size: clamp(50px, 6.2vw, 96px); line-height: .92; letter-spacing: -0.035em; font-weight: 700; }
.sh-home .hero h1 .l2 { display: block; white-space: nowrap; font-style: italic; font-weight: 400; color: var(--honey-deep); letter-spacing: -0.03em; }
.sh-home .hero h1 .l2 .swap { display: inline-block; min-width: 4ch; }
.sh-home .hero h1 .swap span { display: inline-block; animation: wordIn .55s var(--ease) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(.25em) rotate(-2deg); } }
.sh-home .hero .lede { margin-top: 22px; }
.sh-home .drop { margin-top: 28px; border: 1.5px dashed var(--ink-3); border-radius: var(--r-card); padding: 18px; background: rgba(255, 255, 255, .55); display: grid; gap: 14px; transition: border-color .2s, background .2s; }
.sh-home .drop.over { border-color: var(--honey-deep); background: var(--honey-soft); }
.sh-home .drop-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sh-home .drop-row .btn { flex: 0 0 auto; }
.sh-home .drop small { color: var(--ink-3); font-size: 13px; }
.sh-home .samples { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-home .samples span { font-size: 13px; color: var(--ink-2); margin-right: 4px; }
.sh-home .sample { width: 48px; height: 48px; border-radius: 10px; border: 2px solid transparent; padding: 0; overflow: hidden; cursor: pointer; background: var(--sand); transition: transform .2s var(--spring), border-color .2s; }
.sh-home .sample img { width: 100%; height: 100%; object-fit: cover; }
.sh-home .sample:hover { transform: translateY(-2px); }
.sh-home .sample[aria-pressed="true"] { border-color: var(--ink); }
.sh-home .proof { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.sh-home .proof span { display: inline-flex; align-items: center; gap: 8px; }
.sh-home .proof svg { width: 16px; height: 16px; color: var(--sage-deep); }
.sh-home .hero-note { margin-top: 10px; font-size: 13px; color: var(--sage-deep); font-weight: 600; min-height: 20px; }

/* Stage */
.sh-home .stage { position: relative; aspect-ratio: 1.12 / 1; max-width: 100%; perspective: 1400px; }
.sh-home .stage .shadowfloor { position: absolute; inset: auto 6% 3% 6%; height: 22%; background: radial-gradient(closest-side, rgba(38, 35, 31, .16), transparent); filter: blur(8px); }
.sh-home .st-item { position: absolute; transition: transform .6s var(--ease); }
.sh-home .st-item .cap { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; background: rgba(251, 248, 243, .9); padding: 3px 8px; border-radius: 4px; }
/* metal */
.sh-home .st-metal { left: 4%; top: 2%; width: 62%; aspect-ratio: 3 / 2; transform-style: preserve-3d; }
.sh-home .metal { position: absolute; inset: 0; border-radius: 3px; transform-style: preserve-3d; transition: transform .25s var(--ease); box-shadow: 18px 26px 40px -10px rgba(38, 35, 31, .35), 0 2px 4px rgba(38, 35, 31, .2); }
.sh-home .ph { border-radius: 0; }
.sh-home .metal .ph { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 3px; }
.sh-home .metal .sheen { position: absolute; inset: 0; border-radius: 3px; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .08) 54%, transparent 64%); background-size: 260% 260%; background-position: var(--sx, 50%) var(--sy, 50%); }
.sh-home .metal .edge { position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 0 0 2px rgba(0, 0, 0, .12); pointer-events: none; }
/* book */
.sh-home .st-book { right: 3%; top: 4%; width: 27%; aspect-ratio: 1 / 1.02; transform: rotate(4deg); }
.sh-home .mini-book { position: absolute; inset: 0; border-radius: 3px 6px 6px 3px; overflow: hidden; box-shadow: 10px 16px 28px -8px rgba(38, 35, 31, .45); background: #2F3B52; }
.sh-home .mini-book .ph { position: absolute; inset: 8% 8% 26% 14%; background-size: cover; background-position: center; border-radius: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.sh-home .mini-book .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .12) 60%, rgba(0, 0, 0, .15)); }
.sh-home .mini-book .ttl { position: absolute; left: 14%; right: 8%; bottom: 8%; color: #F4EEE4; font-family: var(--f-display); font-style: italic; font-size: clamp(11px, 1.3vw, 18px); line-height: 1.1; }
/* mug */
.sh-home .st-mug { left: 2%; bottom: 3%; width: 30%; aspect-ratio: 1 / 1; }
.sh-home .st-mug .cap { left: 4%; transform: none; }
/* ornament */
.sh-home .st-orn { left: 40%; bottom: 8%; width: 20%; aspect-ratio: .78; transform-origin: 50% 0; animation: swing 4.5s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sh-home .orn { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 14px 26px -8px rgba(38, 35, 31, .45), inset 0 0 0 3px rgba(255, 255, 255, .6), inset 0 0 0 6px rgba(255, 255, 255, .18); }
.sh-home .orn .ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sh-home .orn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .05) 28%, transparent 40%), radial-gradient(circle at 70% 80%, transparent 50%, rgba(0, 0, 0, .25)); }
.sh-home .orn-ribbon { position: absolute; left: 50%; top: 0; width: 4px; height: 26%; transform: translateX(-50%); background: linear-gradient(#B83A2E, #8E2A21); border-radius: 2px; }
.sh-home .orn-cap { position: absolute; left: 50%; top: 22%; width: 16%; height: 7%; transform: translateX(-50%); background: linear-gradient(90deg, #A88A57, #F1DFAE, #A88A57); border-radius: 3px 3px 1px 1px; }
/* tile */
.sh-home .st-tile { right: 6%; bottom: 7%; width: 26%; aspect-ratio: 1; transform: rotate(-3deg); }
.sh-home .tile { position: absolute; inset: 0; background: #151412; padding: 7%; border-radius: 2px; box-shadow: 8px 14px 24px -6px rgba(38, 35, 31, .5); }
.sh-home .tile .ph { width: 100%; height: 100%; background-size: cover; background-position: center; }
.sh-home .tile.white { background: #F7F5F0; }
.sh-home .tile.gray { background: #8E8A84; }

/* Mug (CSS cylinder) */
.sh-home .mug { position: absolute; inset: 0; perspective: 900px; }
.sh-home .mug-scene { position: absolute; inset: 8% 14% 6% 6%; transform-style: preserve-3d; transform: rotateX(-12deg); }
.sh-home .mug-body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transform-style: preserve-3d; animation: mugspin 14s linear infinite; }
.sh-home .mug.paused .mug-body { animation-play-state: paused; }
@keyframes mugspin { to { transform: rotateY(-360deg); } }
.sh-home .mug-slice { position: absolute; top: 0; bottom: 0; backface-visibility: hidden; background-repeat: no-repeat; }
.sh-home .mug-handle { position: absolute; top: 18%; height: 58%; border: 0 solid #F2EFE9; border-radius: 0 50% 50% 0 / 0 45% 45% 0; backface-visibility: visible; }
.sh-home .mug-shade { position: absolute; inset: 8% 14% 6% 6%; pointer-events: none; border-radius: 0 0 8% 8% / 0 0 6% 6%; }
.sh-home .mug-rim { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #CFC9BF 0 55%, #F7F4EE 62%, #E5E0D7 75%, transparent 76%); }

/* ============ TICKER ============ */
.sh-home .ticker { background: var(--ink); color: var(--paper); overflow: hidden; border-block: 1px solid #000; }
.sh-home .ticker-track { display: flex; gap: 0; width: max-content; animation: tick 48s linear infinite; }
.sh-home .ticker:hover .ticker-track { animation-play-state: paused; }
.sh-home .ticker-item { display: inline-flex; align-items: center; gap: 22px; padding: 18px 22px; font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 30px); font-style: italic; white-space: nowrap; }
.sh-home .ticker-item::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--honey); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============ BENTO ============ */
.sh-home .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); gap: 14px; }
.sh-home .bt { position: relative; border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: var(--paper); background: var(--night); isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; min-height: 240px; }
.sh-home .bt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.sh-home .bt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 18, 15, 0) 35%, rgba(20, 18, 15, .78)); }
.sh-home .bt:hover img { transform: scale(1.05); }
.sh-home .bt .k, .sh-home .bt h3, .sh-home .bt p { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.sh-home .bt .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--honey); }
.sh-home .bt h3 { font-size: clamp(24px, 2.6vw, 36px); margin-top: 6px; color: #FBF8F3; }
.sh-home .bt p { margin: 8px 0 0; font-size: 14px; color: #E2D8C9; max-width: 38ch; }
.sh-home .bt .go { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 248, 243, .14); backdrop-filter: blur(6px); transition: background .3s, transform .3s var(--spring); }
.sh-home .bt:hover .go { background: var(--honey); color: var(--night); transform: rotate(-45deg); }
.sh-home .bt .go svg { width: 18px; height: 18px; }
.sh-home .b1 { grid-column: span 7; grid-row: span 2; }
.sh-home .b2 { grid-column: span 5; }
.sh-home .b3 { grid-column: span 5; }
.sh-home .b4 { grid-column: span 4; }
.sh-home .b5 { grid-column: span 4; }
.sh-home .b6 { grid-column: span 4; }
@media (max-width: 900px) { .sh-home .b1, .sh-home .b2, .sh-home .b3, .sh-home .b4, .sh-home .b5, .sh-home .b6 { grid-column: span 12; grid-row: auto; } .sh-home .b1 { min-height: 380px; } }

/* ============ LIVE FINISH STUDIO ============ */
.sh-home .lf-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .lf-grid > * { min-width: 0; }
.sh-home .lf-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; background: radial-gradient(120% 90% at 30% 20%, #3A342D, #1E1B18 70%); overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; perspective: 1100px; }
.sh-home .lf-stage.wall { background: radial-gradient(120% 90% at 30% 20%, #F2ECE2, #DCD2C2 80%); }
.sh-home .lf-obj { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 3 / 2; transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .18s var(--ease), width .5s var(--ease), aspect-ratio .5s var(--ease), border-radius .5s var(--ease); }
.sh-home .lf-face { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.sh-home .lf-ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: filter .4s; }
.sh-home .lf-tex { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.sh-home .lf-sheen { position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: screen; transition: opacity .4s; background: radial-gradient(var(--sw, 34%) var(--sh, 26%) at var(--lx, 40%) var(--ly, 30%), rgba(255, 255, 255, var(--sa, .7)), rgba(255, 255, 255, 0) 70%); }
.sh-home .lf-streak { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: soft-light; opacity: var(--so, .5); background: linear-gradient(115deg, transparent calc(var(--lxp, 40%) - 12%), rgba(255, 255, 255, .9) var(--lxp, 40%), transparent calc(var(--lxp, 40%) + 10%)); }
.sh-home .lf-shadow { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 3 / 2; transform: translate(calc(-50% + var(--dx, 18px)), calc(-50% + var(--dy, 26px))); border-radius: inherit; background: rgba(0, 0, 0, .45); filter: blur(22px); transition: transform .18s var(--ease), width .5s var(--ease); pointer-events: none; }
.sh-home .lf-side { position: absolute; background: linear-gradient(90deg, #8D8A85, #E9E7E2 40%, #A6A39D); pointer-events: none; }
.sh-home .lf-split { position: absolute; top: 0; bottom: 0; width: 2px; left: var(--cut, 50%); background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); z-index: 4; display: none; }
.sh-home .lf-split::after { content: '\2194'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #222; display: grid; place-items: center; font-size: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.sh-home .lf-stage.compare .lf-split { display: block; }
.sh-home .lf-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 50%)); display: none; }
.sh-home .lf-stage.compare .lf-b { display: block; }
.sh-home .lf-tags { position: absolute; left: 16px; top: 16px; right: 16px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; z-index: 5; }
.sh-home .lf-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(17, 16, 14, .72); color: #F4EEE4; padding: 5px 9px; border-radius: 6px; }
.sh-home .lf-tag.b { display: none; }
.sh-home .lf-stage.compare .lf-tag.b { display: block; }
.sh-home .lf-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 13px; color: rgba(244, 238, 228, .82); background: rgba(17, 16, 14, .55); padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 5; }
.sh-home .lf-stage.wall .lf-hint { color: #fff; }
.sh-home .lf-ctrl { display: grid; gap: 22px; }
.sh-home .lf-ctrl .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); margin: 0 0 10px; }
.sh-home .lf-spec { border-top: 1px solid var(--night-line); padding-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; color: var(--on-night-2); }
.sh-home .lf-spec dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--honey); padding-top: 2px; }
.sh-home .lf-spec dd { margin: 0; color: var(--on-night); }
.sh-home .light-row { display: flex; align-items: center; gap: 12px; }
.sh-home .light-row input[type=range] { flex: 1; accent-color: var(--honey); }

/* materials */
.sh-home .lf-obj.m-metal { border-radius: 2px; }
.sh-home .lf-obj.m-acrylic { border-radius: 6px; }
.sh-home .lf-obj.m-canvas { border-radius: 1px; }
.sh-home .lf-obj.m-paper { border-radius: 0; }
.sh-home .lf-obj.m-paper .lf-face { background: #F7F3EC; }
.sh-home .lf-obj.m-paper .lf-ph { inset: 9%; }
.sh-home .lf-obj.m-orn { width: 40% !important; aspect-ratio: 1 !important; border-radius: 50%; }
.sh-home .lf-obj.m-orn + .lf-shadow, .sh-home .lf-shadow.m-orn { width: 40%; aspect-ratio: 1; border-radius: 50%; }

/* ============ WALL SIZER ============ */
.sh-home .sizer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.sh-home .sizer > * { min-width: 0; }
.sh-home .wallbox { position: relative; width: 100%; aspect-ratio: 2200 / 1700; border-radius: var(--r-card); overflow: hidden; background: linear-gradient(90deg, rgb(220,209,195), rgb(203,186,166) 50%, rgb(174,157,137)); }
.sh-home .wallbox img.room { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.sh-home .wallbox .art { position: absolute; left: 50%; transform: translateX(-50%); background-size: cover; background-position: center; transition: width .7s var(--ease), height .7s var(--ease), bottom .7s var(--ease); box-shadow: 0 18px 30px -12px rgba(38, 35, 31, .5), 0 2px 3px rgba(38, 35, 31, .25); }
.sh-home .wallbox .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 48%, transparent 60%); mix-blend-mode: screen; }
.sh-home .wallbox .art.f-edge { outline: 6px solid #161512; outline-offset: 0; }
.sh-home .wallbox .art.f-recess { box-shadow: 0 0 0 5px #F1EEE8, 0 0 0 11px #1A1917, 0 18px 30px -12px rgba(38, 35, 31, .5); }
.sh-home .dim { position: absolute; font-family: var(--f-mono); font-size: 12px; color: var(--ink); background: rgba(251, 248, 243, .92); padding: 3px 8px; border-radius: 5px; white-space: nowrap; transition: all .7s var(--ease); }
.sh-home .size-list { display: grid; gap: 8px; }
.sh-home .size-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 700; text-align: left; transition: border-color .2s, background .2s; }
.sh-home .size-btn small { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.sh-home .size-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--cream); }
@media (max-width: 900px) { .sh-home .sizer { grid-template-columns: 1fr; } .sh-home .size-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ TILEPIX ============ */
.sh-home .tp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .tp > * { min-width: 0; }
.sh-home .tp-wall { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: linear-gradient(160deg, #5E6B57, #44503F); }
.sh-home .tp-wall::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 20% 10%, rgba(255, 255, 255, .14), transparent 60%); }
.sh-home .tp-t { position: absolute; background: #141311; padding: 0; box-shadow: 4px 8px 14px -4px rgba(0, 0, 0, .55); transition: left .7s var(--spring), top .7s var(--spring), width .5s var(--ease), height .5s var(--ease), background .3s, opacity .4s; }
.sh-home .tp-t .ph { position: absolute; inset: 7%; background-repeat: no-repeat; transition: background-position .6s var(--ease), background-size .6s var(--ease); }
.sh-home .tp-wall.white .tp-t { background: #F5F3EE; }
.sh-home .tp-wall.gray .tp-t { background: #8C8781; }
.sh-home .steps3 { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.sh-home .steps3 span { font-family: var(--f-display); font-style: italic; font-size: 22px; padding: 6px 16px; border-radius: 999px; background: var(--cream); }
.sh-home .steps3 span:nth-child(2) { background: var(--honey-soft); }
.sh-home .steps3 span:nth-child(3) { background: #DDE3D5; }

/* ============ BOOK STUDIO ============ */
.sh-home .bs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .bs > * { min-width: 0; }
.sh-home .bs-stage { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-card); background: radial-gradient(90% 70% at 50% 40%, #FFFDF9, #EADFCD 90%); overflow: hidden; perspective: 1800px; display: grid; place-items: center; }
.sh-home .bk { position: relative; width: 40%; aspect-ratio: var(--ar, 1); transform-style: preserve-3d; transform: rotateX(18deg) rotateY(-24deg) rotateZ(2deg); transition: transform .9s var(--ease), width .6s var(--ease), aspect-ratio .6s var(--ease); }
.sh-home .bk.open { transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg) translateX(50%); }
.sh-home .bk-pages { position: absolute; inset: 1.5% 0 1.5% 2%; background: repeating-linear-gradient(0deg, #FBF8F1 0 2px, #EDE7DC 2px 3px); transform: translateZ(-10px); border-radius: 0 3px 3px 0; box-shadow: 14px 22px 40px -10px rgba(38, 35, 31, .35); }
.sh-home .bk-inside { position: absolute; inset: 1.5% 0 1.5% 0; background: #FFFEFB; transform: translateZ(-1px); display: grid; grid-template-columns: 1fr 1fr; gap: 5%; padding: 8%; border-radius: 0 3px 3px 0; }
.sh-home .bk-inside div { background-size: cover; background-position: center; border-radius: 1px; }
.sh-home .bk-inside div:first-child { grid-row: span 2; }
.sh-home .bk-left { position: absolute; inset: 1.5% 100% 1.5% -100%; background: #FFFEFB; transform: translateZ(-1px); padding: 10%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s .5s; border-radius: 3px 0 0 3px; box-shadow: -14px 22px 40px -10px rgba(38, 35, 31, .3); }
.sh-home .bk.open .bk-left { opacity: 1; }
.sh-home .bk-left div { width: 100%; aspect-ratio: 4 / 5; background-size: cover; background-position: center; }
.sh-home .bk-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.sh-home .bk.open .bk-cover { transform: rotateY(-178deg); }
.sh-home .bk-front, .sh-home .bk-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 2px 5px 5px 2px; overflow: hidden; }
.sh-home .bk-front { background-color: #2F3B52; background-size: cover; background-position: center; box-shadow: inset 6px 0 10px -4px rgba(0, 0, 0, .35); }
.sh-home .bk-front .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .14) 55%, rgba(0, 0, 0, .18)); }
.sh-home .bk-front .cv-photo { position: absolute; inset: 10% 10% 30% 16%; background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: opacity .3s; }
.sh-home .bk-front .cv-title { position: absolute; left: 16%; right: 10%; bottom: 10%; font-family: var(--f-display); font-style: italic; font-size: clamp(14px, 2vw, 26px); line-height: 1.05; color: #F6F0E4; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.sh-home .bk-front.cloth .cv-photo { opacity: 0; }
.sh-home .bk-front.cloth .cv-title { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; left: 12%; color: #E9D6A8; text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .15); font-style: normal; font-family: var(--f-display); letter-spacing: .04em; }
.sh-home .bk-back { transform: rotateY(180deg); background: #FFFDF8; }
.sh-home .bs-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.sh-home .bs-steps li { list-style: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: var(--cream); color: var(--ink-2); }
.sh-home .bs-steps li.on { background: var(--ink); color: var(--paper); }
.sh-home .bs-steps { padding: 0; margin-top: 0; }
.sh-home .field { display: grid; gap: 8px; margin-bottom: 18px; }
.sh-home .field label, .sh-home .field .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sh-home .field input[type=text] { min-height: 50px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: #fff; padding: 0 14px; font: inherit; font-size: 16px; }
.sh-home .field input[type=text]:focus { outline: none; border-color: var(--ink); }
.sh-home .sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; padding: 0; background-size: cover; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .2s var(--spring); }
.sh-home .sw[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.08); box-shadow: inset 0 0 0 2px var(--paper); }
.sh-home .sw.photo { background-color: var(--sand); }

/* ============ GIFTS ============ */
.sh-home .gifts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sh-home .gifts > * { min-width: 0; }
.sh-home .gcard { border-radius: var(--r-card); background: var(--cream); padding: clamp(20px, 3vw, 32px); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.sh-home .gcard.tall { grid-row: span 2; }
.sh-home .gcard .mugbox { flex: none; position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.sh-home .gcard .photo { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.sh-home .gcard .photo img { width: 100%; height: 100%; object-fit: cover; }
.sh-home .gcard p { margin: 0; color: var(--ink-2); }
.sh-home .link { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; border-bottom: 2px solid var(--honey); padding-bottom: 2px; width: fit-content; }
.sh-home .link:hover { color: var(--honey-deep); }
.sh-home .link svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) { .sh-home .gifts { grid-template-columns: 1fr; } .sh-home .gcard.tall { grid-row: auto; } }

/* ============ BUSINESS ============ */
.sh-home .biz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .biz > * { min-width: 0; }
.sh-home .pf { border-radius: 22px; background: var(--night-2); border: 1px solid var(--night-line); padding: clamp(18px, 3vw, 30px); display: grid; gap: 22px; }
.sh-home .pf-card-wrap { perspective: 1000px; display: grid; place-items: center; padding-block: 10px; }
.sh-home .pf-card { position: relative; width: min(100%, 380px); aspect-ratio: 3.5 / 2; transform-style: preserve-3d; transition: transform .9s var(--ease); cursor: pointer; }
.sh-home .pf-card.flip { transform: rotateY(180deg); }
.sh-home .pf-side { position: absolute; inset: 0; border-radius: 6px; backface-visibility: hidden; box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .6); overflow: hidden; }
.sh-home .pf-side.back { transform: rotateY(180deg); }
.sh-home .pf-bleed { position: absolute; inset: -3.6%; border: 1px dashed rgba(231, 162, 92, .9); border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .4s; }
.sh-home .pf-safe { position: absolute; inset: 3.6%; border: 1px dashed rgba(120, 200, 140, .9); border-radius: 3px; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 3; }
.sh-home .pf.guides .pf-bleed, .sh-home .pf.guides .pf-safe { opacity: 1; }
.sh-home .pf-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-home .pf-checks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; font-size: 14px; color: var(--on-night-2); opacity: .35; transition: opacity .3s, color .3s; }
.sh-home .pf-checks li.done { opacity: 1; color: var(--on-night); }
.sh-home .pf-checks li .ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--night-line); display: grid; place-items: center; }
.sh-home .pf-checks li.done .ic { background: var(--ok); border-color: var(--ok); }
.sh-home .pf-checks li .ic svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.sh-home .pf-checks li.done .ic svg { opacity: 1; }
.sh-home .pf-checks li code { font-family: var(--f-mono); font-size: 12px; color: var(--honey); }
.sh-home .pf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sh-home .ready { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 8px; background: rgba(79, 138, 91, .18); color: #9FD3A9; opacity: 0; transition: opacity .4s; }
.sh-home .pf.ok .ready { opacity: 1; }
/* card designs */
.sh-home .bcd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.sh-home .bcd-c { aspect-ratio: 3.5 / 2; border-radius: 6px; position: relative; overflow: hidden; padding: 7%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); transition: transform .35s var(--spring), opacity .3s; font-size: clamp(9px, .9vw, 12px); }
.sh-home .bcd-c:hover { transform: translateY(-4px) rotate(-1deg); }
.sh-home .bcd-c.hide { display: none; }
.sh-home .bcd-c .nm { font-weight: 800; font-size: 1.5em; line-height: 1.05; letter-spacing: -0.01em; }
.sh-home .bcd-c .rl { opacity: .75; }
.sh-home .bcd-c .ind { position: absolute; right: 7%; bottom: 7%; font-family: var(--f-mono); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
@media (max-width: 900px) { .sh-home .bcd { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-home .biz { grid-template-columns: 1fr; } }
.sh-home .prod-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 52px); }
.sh-home .prod { text-decoration: none; display: grid; gap: 10px; color: inherit; }
.sh-home .prod .im { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--night-2); }
.sh-home .prod .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sh-home .prod:hover .im img { transform: scale(1.06); }
.sh-home .prod b { font-size: 15px; }
.sh-home .prod span { font-size: 13px; color: var(--on-night-2); margin-top: -6px; }
.sh-home .light .prod .im { background: var(--sand); }
.sh-home .light .prod span { color: var(--ink-3); }
@media (max-width: 900px) { .sh-home .prod-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ FILM ============ */
.sh-home .film { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .film > * { min-width: 0; }
.sh-home .lighttable { position: relative; border-radius: var(--r-card); padding: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 24px); background: radial-gradient(120% 120% at 50% 0%, #FFFFFF, #F1EFEA 60%, #E3DED4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -30px rgba(38, 35, 31, .45); }
.sh-home .strip { position: relative; background: #2A1C12; padding: 9% 1.5%; border-radius: 3px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6%; transform: rotate(-1.2deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.sh-home .strip::before, .sh-home .strip::after { content: ''; position: absolute; left: 1%; right: 1%; height: 5%; background: repeating-linear-gradient(90deg, transparent 0 1.1%, #F7F4EE 1.1% 2.5%); border-radius: 1px; opacity: .9; }
.sh-home .strip::before { top: 2.2%; }
.sh-home .strip::after { bottom: 2.2%; }
.sh-home .strip .code { position: absolute; left: 3%; bottom: -1%; font-family: var(--f-mono); font-size: clamp(8px, .9vw, 11px); color: #E89A4A; letter-spacing: .14em; transform: translateY(-120%); }
.sh-home .fr { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; cursor: pointer; background: #000; }
.sh-home .fr .ph { position: absolute; inset: 0; border-radius: 2px; background-size: cover; background-position: center; transition: filter 1.6s var(--ease); }
.sh-home .fr.c41 .ph { filter: invert(1) sepia(.65) saturate(2.6) hue-rotate(-12deg) brightness(.92) contrast(.9); }
.sh-home .fr.bw .ph { filter: invert(1) grayscale(1) contrast(.95); }
.sh-home .fr.dev .ph { filter: none; }
.sh-home .fr .no { position: absolute; left: 6%; top: 5%; font-family: var(--f-mono); font-size: clamp(8px, .9vw, 11px); color: #FFB062; mix-blend-mode: screen; }
.sh-home .strip.b { margin-top: 26px; transform: rotate(1deg); }
.sh-home .lt-hint { margin-top: 18px; font-size: 14px; color: var(--ink-2); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sh-home .roll { border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; padding: 22px; display: grid; gap: 14px; box-shadow: 0 20px 40px -26px rgba(38, 35, 31, .35); }
.sh-home .roll-h { display: flex; align-items: center; gap: 14px; }
.sh-home .can { width: 44px; height: 54px; border-radius: 8px 8px 6px 6px; background: linear-gradient(90deg, #6F7378, #D9DCE0 40%, #8A8F95); position: relative; flex: none; }
.sh-home .can::before { content: ''; position: absolute; left: 6px; right: 6px; top: -6px; height: 10px; border-radius: 3px; background: #1D1D1F; }
.sh-home .roll-h b { font-size: 17px; display: block; }
.sh-home .roll-h small { color: var(--ink-3); font-size: 13px; }
.sh-home .roll-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sh-home .roll-opts div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sh-home .roll-opts span { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sh-home .roll-opts b { font-size: 14px; }
.sh-home .roll-add { display: flex; gap: 10px; flex-wrap: wrap; }
.sh-home .roll-add button { flex: 1 1 160px; min-height: 46px; border-radius: 10px; border: 1.5px dashed var(--ink-3); background: transparent; font-weight: 700; cursor: pointer; }
.sh-home .roll-add button:hover { border-color: var(--ink); background: var(--cream); }
.sh-home .rolls-count { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .sh-home .film { grid-template-columns: 1fr; } }

/* ============ PARTNERS ============ */
.sh-home .partners { border-top: 1px solid var(--line); }
.sh-home .pt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.sh-home .pt { min-height: 140px; display: grid; place-items: center; text-align: center; padding: 18px 12px; border-right: 1px solid var(--line); position: relative; transition: background .3s; }
.sh-home .pt:last-child { border-right: 0; }
.sh-home .pt:hover { background: var(--cream); }
.sh-home .pt .wm { font-family: var(--f-body); font-weight: 800; font-size: clamp(16px, 1.6vw, 21px); letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.sh-home .pt .wm i { display: block; font-style: normal; font-weight: 600; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; margin-top: 4px; }
.sh-home .pt .mk { position: absolute; top: 10px; left: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sh-home .pt .what { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 980px) { .sh-home .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-home .pt:nth-child(2n) { border-right: 0; } .sh-home .pt { border-bottom: 1px solid var(--line); } }

/* ============ DEMO CLOSE ============ */
.sh-home .sh-close { background: var(--honey); color: var(--night); overflow: hidden; }
.sh-home .sh-close h2 { font-size: clamp(40px, 6.6vw, 96px); line-height: .95; }
.sh-home .sh-close h2 em { color: var(--night); }
.sh-home .sh-close .lede { color: #4A3520; }
.sh-home .close-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.sh-home .close-grid > * { min-width: 0; }
.sh-home .stack3 { display: grid; gap: 12px; }
.sh-home .stack3 div { background: rgba(255, 255, 255, .28); border-radius: 14px; padding: 16px 18px; }
.sh-home .stack3 b { display: block; font-size: 17px; }
.sh-home .stack3 span { font-size: 14px; color: #4A3520; }
.sh-home .sh-close .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.sh-home .sh-close .btn-line { color: var(--night); }
@media (max-width: 900px) { .sh-home .close-grid, .sh-home .hero-grid, .sh-home .lf-grid, .sh-home .tp, .sh-home .bs, .sh-home .sec-head { grid-template-columns: 1fr; } }

/* Footer */
.sh-home .ftr { background: var(--night); color: var(--on-night-2); padding-block: 56px 90px; font-size: 14px; }
.sh-home .ftr-grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.sh-home .ftr-grid > * { min-width: 0; }
.sh-home .ftr h4 { color: var(--on-night); font-size: 14px; margin: 0 0 12px; }
.sh-home .ftr a { display: block; text-decoration: none; padding: 4px 0; }
.sh-home .ftr a:hover { color: var(--honey); }
.sh-home .ftr .logo { width: 120px; margin-bottom: 14px; }
.sh-home .ftr .pw { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--night-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .sh-home .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Landing pages */
.sh-home .lp-hero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.sh-home .lp-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: clamp(44px, 7vw, 96px); }
.sh-home .lp-hero .wrap > * { min-width: 0; }
.sh-home .lp-hero h1 { font-size: clamp(46px, 7vw, 104px); line-height: .93; letter-spacing: -0.035em; }
.sh-home .lp-hero h1 em { font-style: italic; font-weight: 400; color: var(--honey); }
.sh-home .lp-hero .lede { color: var(--on-night-2); }
.sh-home .lp-hero .pic { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; justify-self: end; width: 100%; }
.sh-home .lp-hero .pic img { width: 100%; height: 100%; object-fit: cover; }
.sh-home .crumbs { font-size: 13px; color: var(--on-night-2); margin-bottom: 18px; display: flex; gap: 8px; }
.sh-home .crumbs a { text-decoration: none; color: var(--honey); }
.sh-home .lp-hero .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 900px) { .sh-home .lp-hero .wrap { grid-template-columns: 1fr; } .sh-home .lp-hero .pic { aspect-ratio: 4 / 3; } }
.sh-home .light .prod b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.sh-home, .sh-home *, .sh-home *::before, .sh-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============ GALLERY HERO (v2) ============ */
.sh-home .gh { position: relative; overflow: hidden; background: #161310; color: var(--on-night); min-height: clamp(580px, calc(100vh - 124px), 860px); display: flex; align-items: center; isolation: isolate; }
.sh-home .gh-copy { position: relative; z-index: 3; width: 100%; padding-block: clamp(48px, 7vw, 96px); pointer-events: none; }
.sh-home .gh-copy > * { pointer-events: auto; max-width: min(540px, 40%); }
.sh-home .gh-copy .eyebrow { color: var(--honey); }
.sh-home .gh h1 { font-size: clamp(44px, 4.9vw, 78px); line-height: .95; letter-spacing: -0.035em; font-weight: 700; color: #FBF6EE; }
.sh-home .gh h1 em { display: block; font-style: italic; font-weight: 400; color: var(--honey); }
.sh-home .gh .lede { color: #CDBFAE; }
.sh-home .gh .drop { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.sh-home .gh .drop.over { background: rgba(231, 162, 92, .16); border-color: var(--honey); }
.sh-home .gh .drop small, .sh-home .gh .samples span { color: #B5A898; }
.sh-home .gh .sample[aria-pressed="true"] { border-color: var(--honey); }
.sh-home .gh .hero-note { color: #A9C79A; }
.sh-home .gh-stage { position: absolute; top: 0; bottom: 0; left: 34%; right: 0; z-index: 1; perspective: 1600px; touch-action: pan-y; }
.sh-home .gh-bg { position: absolute; inset: 0; background: url(img/wall-tex.webp) center / cover no-repeat; filter: brightness(var(--amb, .2)); transition: filter .6s; }
.sh-home .gh-lit { position: absolute; inset: 0; pointer-events: none; background: url(img/wall-tex.webp) center / cover no-repeat; filter: brightness(1.35) sepia(var(--sep, .45)) saturate(1.15); opacity: var(--pow, 0);
	-webkit-mask-image: radial-gradient(ellipse var(--pw, 30%) var(--phh, 52%) at var(--px, 50%) var(--py, 40%), #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.18) 62%, transparent 82%);
	mask-image: radial-gradient(ellipse var(--pw, 30%) var(--phh, 52%) at var(--px, 50%) var(--py, 40%), #000 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.18) 62%, transparent 82%); }
.sh-home .gh-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: var(--pow, 0); background: radial-gradient(ellipse 34% 56% at var(--px, 50%) var(--py, 40%), var(--lc, rgba(255,180,100,.9)), transparent 75%); }
.sh-home .gh-beam { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--pow, 0) * .38); filter: blur(10px); background: linear-gradient(180deg, var(--lc, rgba(255,180,100,.9)) 0%, rgba(255,200,140,.08) 70%, transparent 100%); clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
.sh-home .gh-track { position: absolute; top: 0; left: 4%; right: 4%; height: 9px; z-index: 3; border-radius: 0 0 3px 3px; background: linear-gradient(#34302b, #141210); box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.06); }
.sh-home .gh-lamp { position: absolute; top: 2px; left: var(--lampx, 50%); width: clamp(54px, 5.2vw, 86px); padding: 0; border: 0; background: none; cursor: pointer; z-index: 4; transform: translateX(-50%) scaleX(var(--face, 1)); transform-origin: 50% 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.sh-home .gh-lamp img { width: 100%; height: auto; display: block; }
.sh-home .gh-mouth { position: absolute; left: 95%; top: 89%; width: 46%; aspect-ratio: 1.7; transform: translate(-50%, -50%) rotate(-34deg); border-radius: 50%; background: radial-gradient(closest-side, var(--lcs, #ffe2b8), transparent); opacity: var(--pow, 0); filter: blur(3px); mix-blend-mode: screen; }
.sh-home .gh-lamp:hover { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) brightness(1.15); }
.sh-home .gh-lamp:focus-visible { outline-offset: 6px; }
.sh-home .gh-lightui { position: absolute; top: 22px; right: 2.5%; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(20,17,14,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sh-home .gh-lu-l { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #BFB2A2; padding: 0 8px 0 10px; }
.sh-home .gh-lightui button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #E8DCCB; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sh-home .gh-lightui button[aria-pressed="true"] { background: rgba(251,246,238,.92); color: #1B1916; }
.sh-home .gh-lightui .sw-dot { width: 9px; height: 9px; border-radius: 50%; }
.sh-home .gh-dim { position: absolute; inset: 0; background: #000; opacity: calc((1 - var(--pow, 0)) * .62); pointer-events: none; transition: opacity .12s; }
.sh-home .gh-stage::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #161310 0, rgba(22, 19, 16, .85) 12%, rgba(22, 19, 16, 0) 34%), linear-gradient(0deg, rgba(22, 19, 16, .7), transparent 22%); }
@keyframes flick { 0% { filter: brightness(.12); } 12% { filter: brightness(.7); } 20% { filter: brightness(.2); } 30% { filter: brightness(.95); } 38% { filter: brightness(.55); } 50%, 100% { filter: brightness(1); } }
.sh-home .gh-scene { position: absolute; left: 56%; top: 43%; width: min(42vw, 640px); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); transform-style: preserve-3d; z-index: 1; opacity: 0; transition: opacity 1s var(--ease) .9s, width .8s var(--ease), aspect-ratio .8s var(--ease); }
.sh-home .gh.lit .gh-scene { opacity: 1; }
.sh-home .gh-obj { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease); --d: 4px; }
.sh-home .gh-front { position: absolute; inset: 0; transform: translateZ(calc(var(--d) / 2)); overflow: hidden; border-radius: var(--rad, 1px); background: #111; }
.sh-home .gh-ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: filter .6s, opacity .5s; }
.sh-home .gh-tex { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.sh-home .gh.m-canvas .gh-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 14px rgba(0,0,0,.28); border-radius: inherit; }
.sh-home .gh-glow { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: soft-light; opacity: var(--pow, 0); background: radial-gradient(70% 60% at var(--gx, 50%) -5%, var(--lc, rgba(255, 214, 160, .9)), transparent 70%); }
.sh-home .gh-sheen { position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: screen; opacity: var(--sa, .8); background: radial-gradient(var(--sw, 26%) calc(var(--sw, 26%) * .55) at var(--lx, 40%) var(--ly, 30%), rgba(255, 248, 238, .5), rgba(255, 248, 238, 0) 70%); transition: opacity .6s; }
.sh-home .gh-streak { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: soft-light; opacity: var(--so, .6); background: linear-gradient(112deg, transparent calc(var(--lxp, 40%) - 9%), rgba(255, 255, 255, .95) var(--lxp, 40%), transparent calc(var(--lxp, 40%) + 7%)); transition: opacity .6s; }
.sh-home .gh.sweep .gh-streak { animation: sweep 1.6s var(--ease) 1; }
@keyframes sweep { from { --lxp: -20%; transform: translateX(-60%); } to { transform: translateX(60%); } }
.sh-home .gh-side { position: absolute; pointer-events: none; transition: background .6s; }
.sh-home .gh-r { top: var(--rad, 0); height: calc(100% - 2 * var(--rad, 0px)); width: var(--d); left: calc(100% - var(--d) / 2); transform: rotateY(90deg); }
.sh-home .gh-l { top: var(--rad, 0); height: calc(100% - 2 * var(--rad, 0px)); width: var(--d); left: calc(var(--d) / -2); transform: rotateY(-90deg); }
.sh-home .gh-t { left: var(--rad, 0); width: calc(100% - 2 * var(--rad, 0px)); height: var(--d); top: calc(var(--d) / -2); transform: rotateX(90deg); }
.sh-home .gh-b { left: var(--rad, 0); width: calc(100% - 2 * var(--rad, 0px)); height: var(--d); top: calc(100% - var(--d) / 2); transform: rotateX(-90deg); }
.sh-home .gh-shadow { position: absolute; inset: 0; background: rgba(5, 3, 1, .78); filter: blur(var(--blur, 18px)); transform: translate3d(var(--dx, 0px), var(--dy, 22px), var(--sz, -40px)) scale(var(--ss, .985)); transition: filter .6s, opacity .5s; border-radius: var(--rad, 1px); }
.sh-home .gh-bolts { position: absolute; inset: 0; display: none; pointer-events: none; transform: translateZ(calc(var(--d) / 2)); transform-style: preserve-3d; }
.sh-home .so { position: absolute; width: 3.7%; aspect-ratio: 1; transform: translate(-50%, -50%); transform-style: preserve-3d; }
.sh-home .so .sh { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(3px); transform: translate(var(--sx, 18%), 34%) translateZ(.5px) scale(1.05); }
.sh-home .so i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, #f2f1ee 0%, #c2c1bd 45%, #9a9995 70%, #dddcd8 100%); transform: translateZ(var(--z)); }
.sh-home .so b { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(13px);
	background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 32%), conic-gradient(from 18deg, #fafaf9, #c4c3bf 11%, #ffffff 22%, #b9b8b4 34%, #f6f6f4 46%, #c9c8c4 58%, #ffffff 70%, #bdbcb8 83%, #fafaf9);
	box-shadow: none; }
.sh-home .gh-tiles { position: absolute; inset: 0; pointer-events: none; }
.sh-home .gh-tile { position: absolute; background: #121110; padding: 0; box-shadow: 0 18px 26px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: left .9s var(--spring), top .9s var(--spring), width .9s var(--ease), height .9s var(--ease), opacity .4s; opacity: 0; }
.sh-home .gh-tile .ph { position: absolute; inset: 6.5%; background-repeat: no-repeat; transition: background-position .9s var(--ease), background-size .9s var(--ease); }
.sh-home .gh.m-tiles .gh-obj, .sh-home .gh.m-tiles .gh-shadow { opacity: 0; }
.sh-home .gh.m-tiles .gh-tile { opacity: 1; }
.sh-home .gh-obj { transition: transform .25s var(--ease), opacity .5s; }
.sh-home .gh-mats { position: absolute; left: 56%; bottom: clamp(18px, 4vw, 44px); transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(20, 17, 14, .6); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sh-home .gh-mats button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: #E8DCCB; font-weight: 700; font-size: 14px; cursor: pointer; position: relative; overflow: hidden; }
.sh-home .gh-mats button[aria-selected="true"] { background: #FBF6EE; color: #1B1916; }
.sh-home .gh-mats button .bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: rgba(27, 25, 22, .25); transform-origin: left; transform: scaleX(0); }
.sh-home .gh-mats button[aria-selected="true"] .bar { animation: prog var(--cycle, 5s) linear forwards; }
.sh-home .gh.user .gh-mats .bar { display: none; }
@keyframes prog { to { transform: scaleX(1); } }
.sh-home .gh-cap { position: absolute; left: 56%; bottom: calc(clamp(18px, 4vw, 44px) + 64px); transform: translateX(-50%); z-index: 3; margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #E9D8BF; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.sh-home .gh .tech { z-index: 6; }
@media (max-width: 900px) {
	.sh-home .gh { flex-direction: column; align-items: stretch; min-height: 0; }
	.sh-home .gh-copy { order: 2; padding-block: 18px 36px; }
	.sh-home .gh-copy > * { max-width: none; }
	.sh-home .gh-stage { position: relative; order: 1; left: auto; right: auto; top: auto; bottom: auto; width: 100%; aspect-ratio: 1 / 1; }
	.sh-home .gh-stage::before { background: linear-gradient(0deg, #161310 0, rgba(22, 19, 16, 0) 22%); }
	.sh-home .gh-scene { width: 78%; left: 50%; top: 47%; }
	.sh-home .gh-mats { left: 50%; max-width: calc(100% - 24px); overflow-x: auto; }
	.sh-home .gh-mats button { padding: 0 12px; font-size: 13px; }
	.sh-home .gh-cap { left: 50%; bottom: 78px; font-size: 10px; }
	.sh-home .gh .drop { order: 3; }
}
.sh-home .pt-in { display: grid; justify-items: center; gap: 10px; }
.sh-home .pt-logo { width: auto; max-width: 100%; object-fit: contain; }
.sh-home .pt-by { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: -4px; }
.sh-home .pt-by img { width: 18px; height: 18px; }
.sh-home .pt .what { margin-top: 0; }

@media (max-width: 700px) {
	.sh-home .ribbon .wrap { gap: 8px 12px; min-height: 0; padding-block: 8px; }
	.sh-home .ribbon p .long { display: none; }
	.sh-home .ribbon p { flex-basis: 100%; font-size: 12.5px; }
}

/* floating toggle: only once the demo bar has scrolled away, and only on wide screens where it cannot cover page controls */
.sh-home .xray-pill { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; }
.sh-home .xray-pill.show { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--ease); }
@media (max-width: 1099px) { .sh-home .xray-pill { display: none; } }

.sh-home .gh .sample { width: 40px; height: 40px; border-radius: 8px; }
.sh-home .gh .samples { gap: 6px; }
.sh-home .gh-beam { display: none; }

/* Book teaser v2 */
.sh-home .bs-photo { position: relative; aspect-ratio: 1800 / 1208; border-radius: var(--r-card); overflow: hidden; background: #e9e1d4; }
.sh-home .bp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.sh-home .bp-img.on { opacity: 1; }
.sh-home .bp-layer { position: absolute; inset: 0; transition: opacity .5s var(--ease); }
.sh-home .bp-layer.off { opacity: 0; }
.sh-home .bp-cover { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.sh-home .bp-cv-img { position: absolute; inset: -1%; background-size: cover; background-position: center; }
.sh-home .bp-cv-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,14,28,.55) 100%), linear-gradient(118deg, rgba(255,250,240,.22), rgba(255,255,255,0) 38%, rgba(0,0,0,.16)); }
.sh-home .bp-cv-title { position: absolute; left: 8%; right: 8%; bottom: 13%; text-align: center; color: #fbf8f3; font-family: var(--f-display); font-weight: 500; font-size: 64px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.05; text-shadow: 0 2px 6px rgba(0,0,0,.35); overflow-wrap: anywhere; }
.sh-home .bp-tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(17,16,14,.72); color: #F4EEE4; padding: 6px 10px; border-radius: 6px; }
.sh-home .bp-covers { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-home .bp-c { display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.sh-home .bp-c span { width: 64px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .2s var(--spring); }
.sh-home .bp-c small { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.sh-home .bp-c[aria-pressed="true"] span { border-color: var(--ink); transform: translateY(-2px); }

.sh-home .tp-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sh-home .tp-brand img { height: 26px; width: auto; }
.sh-home .tp-brand img.tr { height: 30px; }
.sh-home .tp-brand span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sh-home .pf-card-wrap { position: relative; padding-top: 48px; }
.sh-home .flip-hint { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(231,162,92,.16); color: var(--honey); font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.sh-home .pf-card { cursor: pointer; }
.sh-home .pf-card.peek { animation: peek 4s var(--ease) 1.2s infinite; }
@keyframes peek { 0%, 62%, 100% { transform: rotateY(0); } 74% { transform: rotateY(-32deg); } 86% { transform: rotateY(6deg); } }
.sh-home .pf-card:hover:not(.flip) { transform: rotateY(-12deg) rotateX(4deg); }
.sh-home .gh .samples > span { display: none; }
@media (max-width: 900px) {
	.sh-home .gh-lightui { left: auto; right: 3%; top: 18px; }
	.sh-home .gh-lamp { width: 46px; }
	.sh-home .gh-lu-l { display: none; }
	.sh-home .gh-lightui button { padding: 0 8px; font-size: 10px; }
}

/* ===== v5 (15 Oct): post-6-Oct refresh ===== */
.sh-home .ful { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sh-home .ful img { width: auto; max-width: 140px; object-fit: contain; }
.sh-home .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.sh-home .gcard .cta-row { margin-top: 2px; }

/* Go big: single print or a whole wall */
.sh-home .sz-side .ful { margin-bottom: 4px; }
.sh-home .sz-l { margin: 20px 0 10px; color: var(--ink-3); }
.sh-home .sz-note { font-size: 14px; color: var(--ink-2); margin: 18px 0 0; }
.sh-home .wallbox img.room { transition: width .7s var(--ease), left .7s var(--ease); }
.sh-home .wallbox.zoom img.room { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.sh-home .wallbox .pn { position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; transition: left .7s var(--ease), bottom .7s var(--ease), width .7s var(--ease), height .7s var(--ease), opacity .3s, background-size .7s var(--ease), background-position .7s var(--ease); box-shadow: 0 18px 30px -12px rgba(38, 35, 31, .5), 0 2px 3px rgba(38, 35, 31, .25); }
.sh-home .wallbox .pn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); mix-blend-mode: screen; }
.sh-home .wallbox .pn.f-edge { outline: var(--fw) solid #161512; }
.sh-home .wallbox .pn.f-recess { box-shadow: 0 0 0 5px #F1EEE8, 0 0 0 11px #1A1917, 0 18px 30px -12px rgba(38, 35, 31, .5); }
.sh-home .wallbox .pn.f-box { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 var(--fw) #161512, 0 18px 30px -12px rgba(38, 35, 31, .5); }
.sh-home .wallbox .dim { z-index: 2; }

/* Photo Book Studio: design service */
.sh-home .ds-card { display: grid; gap: 6px; margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--cream); text-decoration: none; border: 1.5px solid transparent; transition: border-color .2s; }
.sh-home .ds-card:hover { border-color: var(--ink-3); }
.sh-home .ds-card .ds-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--honey-deep); }
.sh-home .ds-card b { font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.15; }
.sh-home .ds-card > span:not(.ds-k):not(.link) { color: var(--ink-2); font-size: 15px; }
.sh-home .ds-card .link { margin-top: 6px; }

/* Acrylic keepsake */
.sh-home .ks { position: relative; aspect-ratio: 1 / .8; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 15%, #fffdf8, #ece2d2 65%, #dccfba); perspective: 1100px; perspective-origin: 50% 35%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.sh-home .ks:active { cursor: grabbing; }
.sh-home .ks-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(#d3c3aa, #c6b498); box-shadow: 0 -1px 0 rgba(255, 255, 255, .6); }
.sh-home .ks-shadow { position: absolute; left: 50%; bottom: 15%; width: calc(var(--pw) * 1.15); height: 26px; margin-left: calc(var(--pw) * -.575); background: radial-gradient(closest-side, rgba(50, 36, 22, .38), transparent); filter: blur(5px); }
.sh-home .ks-obj { position: absolute; left: 50%; bottom: 18%; width: var(--pw); height: var(--ph); margin-left: calc(var(--pw) / -2); transform-style: preserve-3d; transition: bottom .4s var(--ease); }
.sh-home .ks.wood .ks-obj { bottom: 24%; }
.sh-home .ks-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(10deg); }
.sh-home .ks-plate { position: absolute; inset: 0; transform-style: preserve-3d; }
.sh-home .ks-face, .sh-home .ks-back { position: absolute; inset: 0; border-radius: 5px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sh-home .ks-face { transform: translateZ(calc(var(--t) / 2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.sh-home .ks-back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.sh-home .ks-ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sh-home .ks-back .ks-ph { transform: scaleX(-1); filter: saturate(.75) brightness(.92); }
.sh-home .ks-name { position: absolute; left: 6%; right: 6%; bottom: 7%; text-align: center; color: #fff; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: calc(var(--ph) * .12); line-height: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-home .ks.land .ks-name { font-size: calc(var(--ph) * .13); }
.sh-home .ks-gloss { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .6) 44%, rgba(255, 255, 255, .1) 50%, transparent 58%); background-size: 320% 100%; mix-blend-mode: screen; pointer-events: none; }
.sh-home .ks-e { position: absolute; background: linear-gradient(90deg, rgba(160, 210, 198, .8), rgba(236, 255, 250, .95) 50%, rgba(150, 200, 188, .8)); }
.sh-home .ks-er, .sh-home .ks-el { top: 3px; bottom: 3px; width: var(--t); transform: rotateY(90deg); }
.sh-home .ks-er { left: calc(100% - var(--t) / 2); }
.sh-home .ks-el { left: calc(var(--t) / -2); }
.sh-home .ks-et { left: 3px; right: 3px; top: calc(var(--t) / -2); height: var(--t); transform: rotateX(90deg); background: linear-gradient(rgba(160, 210, 198, .8), rgba(236, 255, 250, .95) 50%, rgba(150, 200, 188, .8)); }
.sh-home .ks-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transform-style: preserve-3d; }
.sh-home .ks-ft-top { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ph) * .3); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.sh-home .ks-foot.bent .ks-ft-top { background: linear-gradient(rgba(230, 250, 246, .25), rgba(200, 235, 228, .55)); border: 1px solid rgba(255, 255, 255, .7); border-top: 0; border-radius: 0 0 6px 6px; }
.sh-home .ks-foot.bent .ks-ft-front { display: none; }
.sh-home .ks-foot.wood .ks-ft-top { left: -6%; right: -6%; height: calc(var(--ph) * .34); transform: translateZ(calc(var(--ph) * -.17)) rotateX(-90deg); background: repeating-linear-gradient(90deg, rgba(120, 78, 36, .07) 0 3px, transparent 3px 11px), linear-gradient(#ead1aa, #dcbb8b); }
.sh-home .ks-foot.wood .ks-ft-front { position: absolute; left: -6%; right: -6%; top: 0; height: calc(var(--ph) * .1); transform: translateZ(calc(var(--ph) * .17)); background: repeating-linear-gradient(90deg, rgba(110, 70, 30, .1) 0 2px, transparent 2px 9px), linear-gradient(#d4ae7c, #bf935f); box-shadow: 0 10px 14px -8px rgba(40, 28, 14, .5); }
.sh-home .ks-hint { position: absolute; left: 12px; top: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .78); padding: 6px 10px; border-radius: 999px; color: var(--ink-2); transition: opacity .4s; pointer-events: none; }
.sh-home .ks-ctl { display: grid; gap: 12px; margin-top: 4px; }
.sh-home .ks-l { display: block; color: var(--ink-3); margin: 0 0 8px; }

/* Puzzle */
.sh-home .pz { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #3a3029; cursor: pointer; touch-action: manipulation; }
.sh-home .pz svg { display: block; width: 100%; height: 100%; }
.sh-home .pz-cut { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2.4; transition: opacity .4s; }
.sh-home .pz-cut-d { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 2.4; transition: opacity .4s; }
.sh-home .pz.nocuts .pz-cut, .sh-home .pz.nocuts .pz-cut-d { opacity: 0; }
.sh-home .pz-hole { fill: #3a3029; }
.sh-home .pz-edge { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2; }

/* Close band */
.sh-home .close-note { margin: 18px 0 0; font-size: 14px; color: #4A3520; }
.sh-home .close-note a { font-weight: 700; color: var(--night); }
@media (prefers-reduced-motion: reduce) { .sh-home .pz-lift, .sh-home .wallbox .pn, .sh-home .wallbox img.room { transition: none; } }
.sh-home .gstack { display: grid; gap: 16px; }
.sh-home .gcard.gmini { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 6px 22px; align-content: start; }
.sh-home .gcard.gmini .photo { grid-row: 1 / span 5; aspect-ratio: auto; height: 100%; min-height: 220px; }
.sh-home .gcard.gmini > :not(.photo) { margin: 0; }
.sh-home .gcard.gmini h3 { margin: 4px 0 6px; }
.sh-home .gcard.gmini .cta-row, .sh-home .gcard.gmini .link { margin-top: 10px; }
@media (max-width: 600px) { .sh-home .gcard.gmini { grid-template-columns: 1fr; } .sh-home .gcard.gmini .photo { grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; } }

/* ===== v6 (15 Oct): hero "Every form" replaces the gallery-wall hero ===== */
.sh-home .ef { position: relative; background: radial-gradient(90% 80% at 72% 40%, #3b332b 0%, var(--night) 70%); color: var(--on-night); padding-block: clamp(40px, 6vw, 88px); overflow: hidden; }
.sh-home .ef-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh-home .ef-copy { min-width: 0; }
.sh-home .ef .eyebrow { color: var(--honey); }
.sh-home .ef h1 { font-size: clamp(44px, 4.9vw, 78px); line-height: .98; letter-spacing: -0.035em; font-weight: 700; color: #FBF6EE; margin: 0; text-wrap: balance; }
.sh-home .ef h1 em { display: block; font-style: italic; font-weight: 400; color: var(--honey); }
.sh-home .ef .lede { color: #CDBFAE; }
.sh-home .ef .drop { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); }
.sh-home .ef .drop.over { background: rgba(231, 162, 92, .16); border-color: var(--honey); }
.sh-home .ef .drop small, .sh-home .ef .samples span { color: #B5A898; }
.sh-home .ef .sample[aria-pressed="true"] { border-color: var(--honey); }
.sh-home .ef .hero-note { color: #A9C79A; }
.sh-home .mA { display: grid; gap: 18px; min-width: 0; }
.sh-home .mA-stage { position: relative; width: 100%; aspect-ratio: 7 / 5; max-width: 100%; }
.sh-home .mA-plates, .sh-home .mA-pieces, .sh-home .mA-over { position: absolute; inset: 0; }
.sh-home .mA-pieces { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sh-home .mA-pc { position: absolute; background-repeat: no-repeat; will-change: transform; transition: transform 1.05s cubic-bezier(.65, 0, .25, 1), clip-path 1.05s cubic-bezier(.65, 0, .25, 1); }
.sh-home .mA-pl { position: absolute; transition: left 1.05s cubic-bezier(.65, 0, .25, 1), top 1.05s cubic-bezier(.65, 0, .25, 1), width 1.05s cubic-bezier(.65, 0, .25, 1), height 1.05s cubic-bezier(.65, 0, .25, 1), opacity .5s, background-color .5s, box-shadow .6s; }
.sh-home .mA-plates .mA-pl.metal { background: #2a2826; border-radius: 3px; box-shadow: 0 26px 34px -14px rgba(0, 0, 0, .7); }
.sh-home .mA-plates .mA-pl.tile { background: #121110; border-radius: 3px; box-shadow: 0 16px 22px -10px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sh-home .mA-plates .mA-pl.cover { background: #1f2c3d; border-radius: 4px; box-shadow: 0 30px 40px -16px rgba(0, 0, 0, .7); }
.sh-home .mA-plates .mA-pl.board, .sh-home .mA-over .mA-pl.board { background: transparent; }
.sh-home .mA-over .mA-pl.metal { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .2) 46%, transparent 58%); mix-blend-mode: screen; }
.sh-home .mA-over .mA-pl.tile { background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .12) 48%, transparent 60%); mix-blend-mode: screen; }
.sh-home .mA-over .mA-pl.cover { background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, .28) 49.6%, rgba(255, 255, 255, .12) 50.4%, transparent 55%); }
.sh-home .mA-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.sh-home .mA-cap { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-2); min-height: 1.5em; }
.sh-home .mA-cap a { color: var(--on-night); text-decoration: none; border-bottom: 1.5px solid var(--honey); margin-left: 8px; }
.sh-home .mA-prog { height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.sh-home .mA-prog i { display: block; height: 100%; width: 0; background: var(--honey); }
.sh-home .mA-prog.run i { animation: mAprog 3.6s linear forwards; }
@keyframes mAprog { to { width: 100%; } }
@media (max-width: 900px) { .sh-home .ef-grid { grid-template-columns: 1fr; } .sh-home .mA { order: -1; } }
@media (prefers-reduced-motion: reduce) { .sh-home .mA-pc, .sh-home .mA-pl { transition: none; } .sh-home .mA-prog.run i { animation: none; } }
.sh-home .mA-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }