/* Page stylesheet ported from the design (build/pages/home). */

/* ---- shared bits ---- */
.dotc { color: var(--accent); }
.rp-name, .inside-name { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 2rem + 4vw, 5.6rem); line-height: 1; letter-spacing: -.02em; }
.inside-name { font-family: var(--font-wordmark); font-weight: 700; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.5rem); letter-spacing: -.01em; line-height: 1.05; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.inside-kicker { text-align: center; color: rgba(239,237,230,.7); }
.inside-lead { margin: 0 auto; max-width: none; text-align: center; color: rgba(239,237,230,.78); font-size: .9375rem; line-height: 1.5; }
.on-ink .btn--tan { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bone); }
.on-ink .btn--tan:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.rp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rp-sub { margin-top: 10px; font-size: 1.05rem; }
.rp-copy { margin-top: 18px; max-width: 46ch; color: var(--fg-2); }
.rp-spec { margin-top: 22px; max-width: 420px; }

/* ---- 01 hero: copy left, a tilted wall of pieces looping on the right ---- */
.hero { position: relative; background: #1b1917; color: var(--bone); }
.shero { position: relative; isolation: isolate; min-height: calc(100svh - 76px); overflow: hidden; display: flex; flex-direction: column; }
.shero .sh-grid { flex: 1; }
.shero::before { content: ""; position: absolute; left: -15%; top: -17%; width: 66%; height: 100%; border-radius: 50%; filter: blur(120px); background: radial-gradient(circle, rgba(139, 74, 31, .55), transparent 65%); z-index: -2; pointer-events: none; }
.sh-glow { position: absolute; right: -10%; top: -20%; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(197,139,74,.28), transparent 68%); filter: blur(40px); pointer-events: none; }
.sh-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; padding-top: calc(var(--nav-top) + 24px); }
.sh-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
.sh-eyebrow { display: flex; align-items: center; gap: 12px; font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(239,237,230,.75); }
.sh-eyebrow i { width: 28px; height: 1px; background: var(--accent); }
.sh-h1 { margin-top: 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 1.6rem + 5vw, 6rem); line-height: .98; letter-spacing: -.015em; }
.sh-h1 .line { display: block; overflow: hidden; }
.sh-sub { margin-top: 20px; max-width: 40ch; font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem); line-height: 1.6; color: rgba(239,237,230,.82); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn--tan { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bone); }
.btn--tan:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.hero .btn--ghost { color: var(--bone); border-color: rgba(239,237,230,.5); background: rgba(26,27,29,.25); backdrop-filter: blur(6px); }
.hero .btn--ghost:hover { background: var(--bone); color: var(--ink); }
.sh-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(239,237,230,.14); }
.sh-stats li { display: grid; gap: 1px; }
.sh-stats b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.sh-stats span { font-size: .75rem; color: rgba(239,237,230,.6); letter-spacing: .03em; }
/* the wall */
.sh-wall { position: relative; height: 92vw; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); opacity: 0; }
.sh-cols { position: absolute; inset: -14% -6%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transform: rotate(-8deg) scale(1.06); transform-origin: 50% 50%; }
.sh-col { position: relative; overflow: hidden; }
.sh-col[data-sh-col="down"] { margin-top: -30%; }
.sh-track { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.sh-card { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #2a2623; box-shadow: 0 20px 40px -22px rgba(0,0,0,.7); }
.sh-card--photo { aspect-ratio: 4 / 4.6; }
.sh-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-pill { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(26,27,29,.82); color: var(--bone); font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; backdrop-filter: blur(6px); }
.sh-card--piece { background: #F3F1EC; color: var(--ink); display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 4.6; }
.sh-cut { display: grid; place-items: center; padding: 10% 10% 4%; min-height: 0; }
.sh-cut img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(26,27,29,.22)); }
.sh-meta { display: grid; gap: 2px; padding: 0 14px 14px; }
.sh-meta b { font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.sh-meta em { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--accent-deep); }
@media (min-width: 1024px) {
  .sh-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding-top: 0; }
  .sh-copy { padding-top: calc(var(--nav-top) + 8px); padding-bottom: 40px; }
  .sh-wall { height: auto; min-height: calc(100svh - 76px - var(--nav-top)); margin-top: var(--nav-top); margin-right: calc(var(--gutter) * -1); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%); mask-composite: intersect; }
  .sh-cols { inset: -18% -8% -18% 0; gap: 18px; transform: rotate(-9deg) scale(1.08); }
  .sh-track { gap: 18px; }
  .sh-meta b { font-size: .9375rem; } .sh-meta em { font-size: .9375rem; }
}
@media (max-width: 767px) { .shero::before { left: -40%; top: -8%; width: 120%; height: 60%; filter: blur(70px); background: radial-gradient(circle, rgba(139, 74, 31, .45), transparent 65%); } .sh-h1 { font-size: 2.9rem; } .sh-wall { height: 110vw; margin-inline: calc(var(--gutter) * -1); } .sh-cols { gap: 10px; inset: -14% -4%; } .sh-track { gap: 10px; } .sh-stats { gap: 8px 20px; } .hero-ctas .btn { flex: 1 1 auto; justify-content: center; } }
/* bulk-order band */
.bulk-band { position: relative; background: var(--accent-deep); color: var(--bone); overflow: hidden; }
.bulk-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(60px, 7vw, 110px); background: var(--accent); clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%); opacity: .9; }
.bulk-inner { position: relative; display: flex; align-items: center; gap: 16px; min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
.bulk-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(239,237,230,.14); display: grid; place-items: center; flex: 0 0 auto; margin-left: clamp(60px, 7vw, 110px); }
.bulk-icon svg { width: 20px; height: 20px; }
.bulk-text { flex: 1; display: grid; gap: 2px; font-size: .8125rem; color: rgba(239,237,230,.85); }
.bulk-text b { font-weight: 500; font-size: 1rem; color: var(--bone); }
.bulk-btn { flex: 0 0 auto; background: var(--bone); color: var(--ink); border-color: var(--bone); }
.bulk-btn:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
@media (max-width: 767px) { .bulk-band::before { display: none; } .bulk-inner { flex-wrap: wrap; gap: 12px 14px; padding-top: 18px; padding-bottom: 18px; } .bulk-icon { margin-left: 0; } .bulk-text { flex: 1 1 calc(100% - 54px); min-width: 0; } .bulk-text b { font-size: .9375rem; } .bulk-btn { flex: 1 1 100%; justify-content: center; } }

/* ---- the three tiles under the hero: how it is made, bulk orders, a handwritten note ---- */
/* ---- explore by category ---- */
.explore { padding: clamp(40px, 6vw, 80px) 0 clamp(16px, 2vw, 24px); background: var(--bone); color: var(--ink); }
.explore-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.explore-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.012em; }
.explore-sub { margin-top: 12px; color: var(--fg-2); font-size: .9375rem; }
.explore-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.explore-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(26,27,29,.06); }
.explore-tabs button { min-height: 36px; padding: 0 18px; border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--fg-2); transition: background-color .3s ease, color .3s ease; }
.explore-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bone); }
.explore-all { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; color: var(--accent-deep); }
.explore-all svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.explore-all:hover svg { transform: translateX(3px); }
.explore-grid { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.explore-grid[hidden] { display: none; }
.ex-card { display: grid; justify-items: center; text-align: center; gap: 4px; color: var(--ink); }
.ex-media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--ink); margin-bottom: 10px; }
.ex-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .9s var(--ease-out); }
.ex-card:hover .ex-media img { transform: scale(1.08); }
.ex-card b { font-weight: 600; font-size: .9375rem; }
.ex-card span:last-child { font-size: .8125rem; color: var(--fg-2); }
@media (max-width: 1023px) { .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .explore-head { flex-direction: column; align-items: flex-start; } .explore-right { align-items: flex-start; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; } .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ex-card b { font-size: .875rem; } }
.more { padding: clamp(32px, 5vw, 64px) 0 clamp(16px, 2vw, 24px); background: var(--bone); color: var(--ink); }
.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
.ftile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #F4F2EE; color: var(--ink); box-shadow: 0 1px 2px rgba(26,27,29,.04), 0 12px 30px -20px rgba(26,27,29,.2); transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.ftile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(26,27,29,.04), 0 26px 44px -22px rgba(26,27,29,.28); }
.ftile-copy { padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px) clamp(14px, 1.8vw, 20px); }
.ftile h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.06; letter-spacing: -.012em; }
.ftile p { margin-top: 6px; max-width: 44ch; font-size: .9375rem; line-height: 1.45; color: var(--fg-2); }
.ftile-main h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
.ftile-pic { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ftile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; transform: scale(1.02); transition: transform 1.1s var(--ease-out); }
.ftile:hover img { transform: scale(1.06); }
.ftile { aspect-ratio: 16 / 11; }
.ftile-main { aspect-ratio: 4 / 3; }
.pair img { position: absolute; height: auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.pair .p-belt { left: -6%; top: 2%; width: 78%; transform: rotate(-8deg); }
.pair .p-wallet { right: -4%; bottom: 4%; width: 72%; }
@media (min-width: 640px) and (max-width: 1023px) { .bento { grid-template-columns: 1fr 1fr; } .ftile-main { grid-column: 1 / -1; aspect-ratio: 16 / 8; } }
@media (max-width: 639px) { .bento { gap: 10px; } .ftile, .ftile-main { aspect-ratio: 4 / 3.4; } }
@media (min-width: 1024px) { .bento { grid-template-columns: 56fr 44fr; grid-template-rows: 1fr 1fr; gap: 16px; height: clamp(560px, 64vw * .62, 720px); } .ftile { aspect-ratio: auto !important; } .ftile-main { grid-row: 1 / 3; } }

/* ---- 02 range (pinned on desktop) ---- */
.range { position: relative; background: var(--bone); color: var(--ink); overflow: hidden; }
.range-pin { position: relative; height: 100vh; display: flex; flex-direction: column; }
.range-bg { position: absolute; inset: 0; pointer-events: none; }
.range-head { position: relative; z-index: 2; padding: calc(var(--nav-h) + 20px) var(--gutter) 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.range-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.012em; margin-top: 14px; opacity: 0; }
.range-body { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 0 var(--gutter) 40px; align-items: center; }
.range-text { position: relative; max-width: 520px; }
.rpanel { position: absolute; inset: auto 0; top: 50%; transform: translateY(-50%); }
.range-stage { position: relative; height: 100%; min-height: 60vh; }
.rcut { position: absolute; inset: 0; width: 100%; opacity: 0; }
.rcut .pair { position: relative; width: min(70vh, 40vw); aspect-ratio: 1; }
.rcut .pair img { filter: drop-shadow(0 40px 50px rgba(26,27,29,.25)); }
.pair.belts .p-belt { left: 0; top: 6%; width: 74%; transform: rotate(-10deg); }
.pair.belts .p-wallet { right: 0; bottom: 2%; width: 66%; transform: rotate(6deg); }
.range-dots { position: absolute; right: var(--gutter); bottom: 32px; z-index: 3; display: flex; gap: 18px; font-size: 12px; letter-spacing: .2em; }
.range-dots button { color: inherit; transition: color .3s ease; }
.range-count { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); font-variant-numeric: tabular-nums; }
/* mobile carousel */
.range-mobile { position: relative; padding: var(--section-sm) 0 64px; }
.range-mobile .mhead { padding: 0 20px; }
.mtrack { display: flex; gap: 5vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 9vw 16px; scrollbar-width: none; }
.mtrack::-webkit-scrollbar { display: none; }
.mcard { flex: 0 0 82vw; scroll-snap-align: center; }
.mcut { height: 74vw; }
.mcut .bloom { --bloom-s: 60vw; }
.mcut .pair { position: relative; width: 78%; aspect-ratio: 1; }
.mcut .pair img { filter: drop-shadow(0 20px 30px rgba(26,27,29,.22)); }
.mcard .rp-name { font-size: 2.8rem; margin-top: 10px; opacity: 0; }
.mcard [data-card-item] { opacity: 0; }
.mdots { display: flex; justify-content: center; gap: 18px; font-size: 12px; letter-spacing: .2em; margin-top: 10px; }
.mdots button { color: inherit; }

/* ---- 03 inside (dark, pinned) ---- */
.inside { position: relative; background: var(--ink); color: var(--bone); overflow: hidden; }
.inside-pin { height: 100svh; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 8px) var(--gutter) 16px; overflow: hidden; }
.inside-head { text-align: center; display: grid; justify-items: center; gap: 8px; }
.inside-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 2vw, 3.2rem); line-height: 1.04; letter-spacing: -.012em; color: var(--bone); opacity: 0; white-space: nowrap; }
.inside-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.inside .pill { border-color: rgba(239,237,230,.35); color: var(--bone); opacity: .65; }
.inside .pill[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); opacity: 1; }
.inside-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 24px; align-items: center; }
.inside-left { min-width: 0; }
.inside-sci { margin-top: 14px; display: flex; align-items: center; gap: 14px; color: rgba(239,237,230,.6); }
.inside-sci svg { width: 44px; height: 44px; flex: none; }
.inside-stage { position: relative; display: grid; place-items: center; min-height: 0; align-self: stretch; }
.inside-halo { position: absolute; inset: 0; margin: auto; width: 46vh; height: 46vh; transform: scale(1.6); border-radius: 50%; background: #D9B07A; opacity: .5; filter: blur(60px); pointer-events: none; }
.inside-float { position: relative; z-index: 1; width: min(54vh, 100%); aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
.inside-pills { position: relative; z-index: 2; }
.inside-float img { position: absolute; width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
.inside-right { max-width: 420px; justify-self: end; width: 100%; }
.inside-right .spec > div { padding: 8px 0; }
@media (max-height: 820px) { .inside-measure, .inside-foot { display: none; } .inside-desc { margin-top: 10px; font-size: .9375rem; } .inside-point { margin-top: 12px; padding-top: 10px; } .inside-cta { margin-top: 12px; min-height: 44px; } .inside-float { width: min(46vh, 100%); } .inside-pills .pill { min-height: 34px; } }
.inside-desc { margin-top: 14px; color: rgba(239,237,230,.8); max-width: 40ch; }
.inside-bar { height: 1px; background: rgba(239,237,230,.15); margin-top: 10px; }
.inside-point { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(239,237,230,.15); font-size: .9375rem; color: var(--bone); display: flex; gap: 10px; align-items: baseline; }
.inside-point span { color: var(--accent); font-weight: 500; }
.inside-cta { margin-top: 18px; width: 100%; justify-content: center; }
.inside-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.inside-foot { text-align: center; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(239,237,230,.5); padding-top: 12px; }
/* mobile deck */
.inside-mobile { padding: var(--section-sm) 0 56px; }
.inside-mobile .mstage { position: relative; height: 58vw; display: grid; place-items: center; margin: 8px 0 20px; touch-action: pan-y; }
.inside-mobile .inside-pills { margin-top: 16px; }
.inside-mobile .inside-lead { margin-top: 12px; }
.inside-mobile .inside-halo { width: 60vw; height: 60vw; transform: scale(1.3); }
.inside-mobile .inside-float { width: 62vw; }
.deck { display: flex; gap: 5vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 9vw 16px; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.deck-card { flex: 0 0 82vw; scroll-snap-align: center; }
.deck-card .inside-name { opacity: 0; }
.deck-card [data-deck-item] { opacity: 0; margin-top: 12px; }
.inside-mobile .mdots button { color: rgba(239,237,230,.35); }

/* ---- 03b anatomy ---- */
.anatomy { background: var(--bone); color: var(--ink); padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.anatomy .inside-pills { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.an-panel[hidden] { display: none; }
.an-head { text-align: center; display: grid; gap: 6px; justify-items: center; margin-top: clamp(24px, 3vw, 36px); }
.an-kicker { display: flex; align-items: center; gap: 16px; font-size: .75rem; letter-spacing: .32em; text-transform: uppercase; color: var(--fg-2); }
.an-kicker::before, .an-kicker::after { content: ""; width: clamp(40px, 8vw, 120px); height: 1px; background: var(--accent-deep); opacity: .6; }
.an-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.an-tags { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); }
.an-tags i { font-style: normal; margin: 0 .9em; color: var(--accent-deep); }
.an-body { position: relative; display: grid; gap: 18px; margin-top: clamp(24px, 3vw, 40px); }
.an-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; display: none; }
.an-lines path { fill: none; stroke: var(--accent-deep); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.an-lines circle { fill: var(--accent); stroke: var(--bone); stroke-width: 1.5; }
.an-box { position: relative; width: 100%; }
.an-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(26,27,29,.22)); }
.an-stage { width: min(100%, 440px); margin: 0 auto; }
.an-low { width: min(100%, 520px); margin: 0 auto; }
.an-col { display: grid; gap: 14px; }
.an-call { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.an-circle { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--accent-deep), 0 0 0 5px rgba(139,74,31,.12), 0 14px 22px -10px rgba(26,27,29,.35); transform: scale(0); }
.an-circle img { width: 100%; height: 100%; display: block; }
.an-text { display: grid; gap: 3px; }
.an-text b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; }
.an-text b::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 5px; background: var(--accent-deep); opacity: .55; }
.an-text span { font-size: .8125rem; line-height: 1.45; color: var(--fg-2); }
.an-icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: clamp(28px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--line-strong); }
.an-icons li { display: flex; align-items: center; gap: 10px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.an-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-deep); display: grid; place-items: center; color: var(--accent-deep); }
.an-ic svg { width: 22px; height: 22px; }
.an-cta { display: flex; justify-content: center; margin-top: 26px; }
@media (min-width: 1024px) {
  .an-body { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); grid-template-areas: "l stage r" "low low low" "lc lc lc"; column-gap: clamp(24px, 3vw, 56px); row-gap: 28px; align-items: center; }
  .an-lines { display: block; }
  .an-col--l { grid-area: l; } .an-stage { grid-area: stage; width: 100%; max-width: 520px; } .an-col--r { grid-area: r; } .an-low { grid-area: low; width: min(100%, 640px); } .an-col--low { grid-area: lc; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; width: min(100%, 880px); margin: 0 auto; }
  .an-col--l, .an-col--r { gap: 26px; }
  .an-call { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .an-circle { width: 88px; height: 88px; }
  .an-col--low .an-call { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
  .an-col--low .an-circle { width: 76px; height: 76px; }
  .an-icons { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .an-icons li { flex-direction: row; }
  .an-icons li + li { border-left: 1px solid var(--line); padding-left: 14px; }
}
@media (min-width: 1280px) { .an-text b { font-size: 1.15rem; } .an-text span { font-size: .875rem; } }
@media (max-width: 1023px) { .an-head { margin-top: 24px; } .an-col--low .an-call, .an-call { align-items: center; } }
@media (max-width: 767px) { .an-kicker::before, .an-kicker::after { width: 28px; } .an-name { font-size: 1.6rem; } .an-tags { font-size: .6875rem; letter-spacing: .2em; } .an-icons { grid-template-columns: 1fr 1fr; } .an-icons li { font-size: .6875rem; } }
/* ---- 04 story (pinned timeline) ---- */
.story { position: relative; background: var(--bone); color: var(--ink); }
.story-pin { position: relative; height: 100vh; overflow: hidden; }
.story-intro { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); }
.story-intro .h1 { margin-top: 18px; max-width: 14ch; opacity: 0; }
.story-intro .lead { margin-top: 20px; max-width: 46ch; text-align: center; }
.story-stage { position: absolute; inset: 0; opacity: 0; }
.story-ghost { font-size: clamp(16rem, 60vh, 40rem); -webkit-text-stroke: 1px rgba(26,27,29,.12); left: 38%; }
.story-figure { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: clamp(48px, 9vw, 160px); pointer-events: none; }
.story-figure figure { width: min(34vw, 420px); }
.story-panel { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(40vw, 480px); }
.story-years { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 12px; font-size: 12px; letter-spacing: .2em; padding-left: 14px; border-left: 1px solid var(--line); }
.story-years button { color: inherit; text-align: left; transition: color .3s ease; }
.story-progress { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: var(--ink); transform-origin: top; transform: scaleY(0); }
/* mobile runway */
.story-mobile { position: relative; padding: var(--section-sm) 20px 0; }
.mstory { position: relative; height: 420svh; }
.mstory-sticky { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; }
.mstory-stage { position: relative; height: 46svh; }
.mstory-stage .ghost { font-size: 44vw; left: 50%; top: 42%; }
.mstory-figure { position: absolute; left: 50%; top: 4%; width: 70vw; height: 88%; transform: translateX(-50%); overflow: hidden; background: rgba(26,27,29,.045); clip-path: inset(0 0 92% 0); opacity: .4; }
.mstory-figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.mstory-text { flex: 1; padding-top: 18px; }
.mstory-years { display: flex; gap: 16px; font-size: 12px; letter-spacing: .2em; padding: 12px 0 20px; }
.mstory-years button { color: inherit; }

/* ---- 05 promise ---- */
.promise { background: var(--ink); color: var(--bone); padding: 0; overflow: hidden; }
.promise-title { font-family: var(--font-wordmark); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 3vw, 4.4rem); letter-spacing: -.02em; text-transform: uppercase; line-height: .95; margin-top: 14px; }
.pquotes { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 768px) { .pquotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.pquote blockquote { font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); line-height: 1.35; color: rgba(239,237,230,.92); }
.pquote figcaption { color: rgba(239,237,230,.5); }
.press-marquee { margin-top: 0; border-top: 1px solid rgba(239,237,230,.15); padding: 10px 0; will-change: transform; }
.press-marquee .track > span { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); color: var(--bone); }
.press-marquee .track .mq-dot { color: var(--accent); font-size: .75rem; }
.press-marquee .track .outline { color: transparent; -webkit-text-stroke: 1px rgba(239,237,230,.6); }
.press-marquee .row2 { margin-top: 12px; }

/* ---- 06 shop ---- */
.shop-sec { background: var(--bone); color: var(--ink); padding: clamp(32px, 5vw, 64px) 0 clamp(16px, 2vw, 24px); }
.coll-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(20px, 3vw, 28px); }
.coll-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ctab { min-height: 38px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: .875rem; font-weight: 600; color: var(--ink); transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; box-shadow: 0 1px 2px rgba(26,27,29,.05); }
.ctab:hover { border-color: var(--accent-deep); }
.ctab[aria-selected="true"] { background: var(--accent-deep); color: var(--bone); border-color: var(--accent-deep); }
.delivery { display: grid; gap: 28px; margin-top: var(--section-sm); padding-top: 40px; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .delivery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.delivery h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; }
.delivery p { color: var(--fg-2); font-size: .9375rem; margin-top: 8px; max-width: 26ch; }
.or-row { display: flex; align-items: center; gap: 20px; margin-top: var(--section-sm); }
.or-row .shop-rule { flex: 1; height: 1px; background: var(--line-strong); }
.or-row .label { white-space: nowrap; }