:root {
  --ink: #f1e7d8;
  --muted: #c9b9a6;
  --gold: #c89b62;
  --paper: #1a1515;
  --panel: #241c1b;
  --line: rgba(200,155,98,.32);
  --max: 1180px;
}
@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url('gfx/fonts/great-vibes.woff2') format('woff2'),url('gfx/fonts/great-vibes.ttf') format('truetype')}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.skip-link{position:absolute;left:-9999px;top:1rem;background:#fff;color:#000;padding:.75rem 1rem;z-index:100}.skip-link:focus{left:1rem}
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,4rem);background:rgba(17,13,13,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-family:Georgia,serif;letter-spacing:.22em;font-size:.95rem}.site-nav{display:flex;gap:1.4rem;align-items:center;font-size:.9rem}.site-nav a:hover{color:var(--gold)}.nav-cta{border:1px solid var(--gold);padding:.6rem 1.1rem;border-radius:999px}.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:.5rem .95rem;border-radius:999px}
.hero{position:relative;min-height:52vh;display:grid;align-items:end;overflow:hidden}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,8,.86),rgba(10,8,8,.28) 62%,rgba(10,8,8,.08)),linear-gradient(0deg,rgba(10,8,8,.84),transparent 45%)}.hero-copy{position:relative;z-index:2;max-width:820px;padding:clamp(1rem,2.4vw,2rem) clamp(1.4rem,8vw,8rem)}.hero-copy .eyebrow{margin:0 0 .5rem}.hero-copy h1{font-size:clamp(2.2rem,4.3vw,4rem);line-height:1.04;margin:.1rem 0 .6rem}.hero-copy>p:not(.eyebrow){margin:.4rem 0 0;font-size:1rem}.hero-copy .hero-actions{margin-top:1rem}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.1;margin:.25rem 0 1rem}h1{font-size:clamp(3.2rem,8vw,7.4rem)}h2{font-size:clamp(2.25rem,5vw,4.7rem)}h3{font-size:clamp(1.45rem,2.4vw,2.2rem)}.eyebrow{text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-size:.77rem;font-weight:700}.hero-copy>p:not(.eyebrow){max-width:620px;font-size:1.13rem;color:var(--muted)}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}.button,.file-button{display:inline-block;padding:.9rem 1.2rem;border:1px solid var(--gold);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;border-radius:999px}.primary{background:var(--gold);color:#1b1411}.ghost{background:rgba(0,0,0,.18)}.hero-actions .primary{background:transparent;color:var(--ink);transition:background .25s ease,color .25s ease}.hero-actions .primary:hover,.hero-actions .primary:focus-visible{background:var(--gold);color:#1b1411}
.section{max-width:var(--max);margin:auto;padding:clamp(4.5rem,9vw,8rem) clamp(1.2rem,4vw,2.4rem)}.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem);border-bottom:1px solid var(--line)}.intro-copy{font-size:1.1rem;color:var(--muted)}.signature{font-family:Georgia,serif;color:var(--ink);font-size:1.25rem}.section-heading{margin-bottom:2.4rem}.section-heading.narrow{max-width:760px}.card-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.2rem}.collection-card{position:relative;min-height:520px;overflow:hidden;border:1px solid var(--line);background:#111}.collection-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}.collection-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,9,9,.94),transparent 65%)}.card-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:2rem}.card-copy p{max-width:560px;color:var(--muted)}
.upload{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}.upload-step{background:var(--panel);border:1px solid var(--line);padding:1.5rem}.step-number{color:var(--gold);letter-spacing:.14em}.upload-step input[type=file]{position:absolute;left:-9999px}.preview-frame{margin-top:1.2rem;border:1px solid var(--line);position:relative;overflow:hidden;background:#120e0e}.preview-frame.portrait{aspect-ratio:4/5}.preview-frame.landscape{aspect-ratio:4/5}.preview-frame img{width:100%;height:100%;object-fit:cover}.preview-frame span{position:absolute;right:.7rem;bottom:.5rem;background:rgba(0,0,0,.65);padding:.25rem .5rem;font-size:.75rem}.approval-panel{position:relative;margin-top:2rem;border:1px solid var(--line);overflow:hidden}.approval-panel>img{width:100%;max-height:720px;object-fit:cover;object-position:center 58%}.approval-mark{position:absolute;inset:38% auto auto 50%;transform:translate(-50%,-50%) rotate(-18deg);font-family:Georgia,serif;font-size:clamp(2.2rem,7vw,6rem);letter-spacing:.15em;color:rgba(255,255,255,.46);border:4px solid rgba(255,255,255,.35);padding:.2rem .7rem}.approval-copy{padding:1.6rem;background:var(--panel)}.approval-copy p{color:var(--muted)}
.charity{min-height:420px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(28,20,19,.96),rgba(28,20,19,.65)),url('gfx/service-loyalty-photo.png') center/cover no-repeat;max-width:none}.charity-copy{width:min(760px,calc(100% - 2.4rem));margin:auto}.begin{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,7vw,6rem)}.enquiry-form{display:grid;gap:1rem}.enquiry-form label{display:grid;gap:.35rem;color:var(--muted)}.enquiry-form input,.enquiry-form select,.enquiry-form textarea{width:100%;background:#171111;border:1px solid var(--line);color:var(--ink);padding:.85rem}.form-status{min-height:1.5rem;color:var(--gold)}.site-footer{padding:2.4rem clamp(1.2rem,4vw,4rem);border-top:1px solid var(--line);text-align:center;color:var(--muted)}.site-footer .brand{color:var(--ink)}.small{font-size:.8rem}
@media(max-width:820px){.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#171111;padding:1rem 1.3rem;border-bottom:1px solid var(--line)}.site-nav.open{display:flex}.hero{min-height:78vh}.hero-overlay{background:linear-gradient(0deg,rgba(9,7,7,.92),rgba(9,7,7,.22) 70%)}.hero-copy{padding:6rem 1.3rem 3rem}.intro,.card-grid,.upload-grid,.begin{grid-template-columns:1fr}.collection-card{min-height:430px}.approval-panel>img{height:520px}.charity{min-height:480px}}
@media(max-width:480px){h1{font-size:3rem}.hero-actions .button{width:100%;text-align:center}.section{padding:4rem 1rem}.upload-step{padding:1rem}}

/* ===== Demo-site enhancements (shared: landing + app) ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}
body{background:radial-gradient(1200px 600px at 12% -8%,rgba(200,155,98,.06),transparent 60%),radial-gradient(1000px 560px at 108% 26%,rgba(120,52,80,.12),transparent 55%),var(--paper)}
.gilt-rule{display:flex;align-items:center;gap:1.1rem;color:var(--gold);margin:0 auto 2.2rem;max-width:var(--max)}
.gilt-rule::before,.gilt-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.gilt-rule::after{background:linear-gradient(90deg,var(--line),transparent)}

/* Before / after slider */
.ba-section{text-align:center}
.ba-slider{position:relative;max-width:640px;margin:0 auto;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--gold);box-shadow:0 0 18px rgba(200,155,98,.8)}
.ba-handle::after{content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gold);color:#1b1411;border-radius:999px;padding:.45rem .6rem;font-size:.8rem;letter-spacing:.1em;white-space:nowrap}
.ba-label{position:absolute;bottom:.9rem;background:rgba(10,8,8,.72);padding:.35rem .7rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ba-label.left{left:.9rem}.ba-label.right{right:.9rem}

/* Landing CTA panel (replaces enquiry form) */
.begin-cta{border:1px solid var(--line);background:linear-gradient(180deg,rgba(36,28,27,.94),rgba(28,21,21,.96));padding:clamp(1.8rem,4vw,2.8rem);position:relative}
.begin-cta::before{content:"";position:absolute;inset:8px;border:1px solid rgba(200,155,98,.14);pointer-events:none}
.begin-cta ol{margin:0 0 1.6rem;padding-left:1.2rem;color:var(--muted);display:grid;gap:.5rem}
.begin-cta .hero-actions{margin-top:0}

/* Card hover lift */
.collection-card{transition:transform .3s ease,box-shadow .3s ease}
.collection-card:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(0,0,0,.5)}

/* Portrait gallery (landing) */
.gallery-section{border-top:1px solid var(--line)}
.portrait-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;max-width:var(--max);margin:0 auto}
.portrait-gallery figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);background:#111}
.portrait-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9);transition:transform .5s ease,filter .5s ease}
.portrait-gallery figure:hover img{transform:scale(1.05);filter:saturate(1.05)}
.portrait-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;font-family:Georgia,serif;font-size:1rem;color:var(--ink);background:linear-gradient(0deg,rgba(12,9,9,.92),transparent);transform:translateY(8px);opacity:0;transition:transform .35s ease,opacity .35s ease}
.portrait-gallery figure:hover figcaption{transform:none;opacity:1}
@media (hover:none){.portrait-gallery figcaption{transform:none;opacity:1}}

/* ===================================================================
   Brochure revamp (front page + Rangers page) — extends tokens above
   =================================================================== */

/* Logo lockup: recreated emblem (figures + star) beside the wordmark */
.brand-lockup{display:inline-flex;align-items:center;gap:.6rem;color:var(--gold)}
.brand-emblem{width:50px;height:auto;flex:none}
.brand-word{font-family:Georgia,serif;letter-spacing:.22em;font-size:.95rem;color:var(--ink);white-space:nowrap}
@media(max-width:400px){.brand-word{letter-spacing:.14em;font-size:.82rem}.brand-emblem{width:42px}}

/* Hero flourish (the script accent, top-right of the hero) */
.hero-flourish{position:absolute;z-index:2;right:clamp(1.4rem,5vw,4rem);bottom:clamp(2rem,6vw,4.5rem);max-width:46%;text-align:center;font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(2rem,3.9vw,3.3rem);line-height:1.02;color:var(--gold);text-shadow:0 2px 16px rgba(0,0,0,.75);transform:rotate(-7deg)}
.hero-flourish .flourish-swash{display:block;width:62%;height:auto;margin:.1em auto 0;overflow:visible;fill:var(--gold);filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.hero-script{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:var(--gold)}
@media(max-width:820px){.hero-flourish{display:none}}

/* Category grid — 8 cards, football live + 7 locked "coming soon" */
.section.wide{max-width:1560px}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:.9rem}
.category-card{position:relative;display:flex;flex-direction:column;min-height:300px;border:2px solid var(--gold);background:#141010;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.category-card>img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.9)}
.cat-body{display:flex;flex-direction:column;gap:.4rem;flex:1;padding:1rem .95rem 1.05rem}
.cat-title{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.06em;font-size:1.12rem;margin:0}
.cat-sub{color:var(--muted);font-size:.82rem;margin:0;flex:1}
.cat-link{margin-top:.4rem;padding-top:.65rem;border-top:1px solid var(--line);color:var(--gold);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
a.category-card:hover,a.category-card:focus-visible{transform:translateY(-5px);box-shadow:0 18px 46px rgba(0,0,0,.5);border-color:var(--gold);outline:none}
.category-card.is-locked{opacity:.62;filter:grayscale(.3);pointer-events:none;cursor:default}
.category-card.is-locked>img{filter:saturate(.45) brightness(.62)}
.category-card.is-locked .cat-link{color:var(--muted)}
.badge{position:absolute;top:.7rem;right:.7rem;z-index:3;background:rgba(10,8,8,.85);border:1px solid var(--gold);color:var(--gold);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .55rem}
/* Image-free placeholder for "coming soon" cards with no fitting photo */
.cat-ph{aspect-ratio:3/4;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 32%,rgba(200,155,98,.10),transparent 62%),linear-gradient(180deg,#1d1716,#141010)}
.cat-ph::after{content:"";width:56%;aspect-ratio:833/623;opacity:.16;background:center/contain no-repeat url("gfx/brand-emblem.svg")}
.category-card.is-locked .cat-ph{filter:none}

/* How it works — 3 steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:var(--max);margin:auto}
.step{background:var(--panel);border:1px solid var(--line);padding:1.6rem 1.5rem}
.step .step-number{display:block;color:var(--gold);letter-spacing:.14em;font-size:.8rem;margin-bottom:.4rem}
.step p{color:var(--muted);margin:.4rem 0 0}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* Rangers "life moments" — true masonry via CSS columns (mixed orientations) */
.feature-masonry{columns:3 300px;column-gap:1.1rem;max-width:var(--max);margin:auto}
.feature-masonry figure{break-inside:avoid;margin:0 0 1.1rem}
.feature-masonry img{width:100%;border:1px solid var(--line);background:#0e0b0b}

/* Enquiry panel wrapping the (already-styled) .enquiry-form */
.enquiry-panel{max-width:640px;margin:0 auto;border:1px solid var(--line);background:linear-gradient(180deg,rgba(36,28,27,.94),rgba(28,21,21,.96));padding:clamp(1.6rem,4vw,2.6rem);position:relative}
.enquiry-panel::before{content:"";position:absolute;inset:8px;border:1px solid rgba(200,155,98,.14);pointer-events:none}
.enquiry-form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.enquiry-form button{justify-self:start;margin-top:.4rem}
.form-status.is-error{color:#e6a37e}
.enquiry-done{display:none;text-align:center}
.enquiry-done.show{display:block}
.enquiry-form.hide{display:none}

/* Pitch note strip (soft disclosure that this is a concept pitch) */
.pitch-note{max-width:var(--max);margin:auto;text-align:center;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);padding-top:1.4rem}

/* ===================================================================
   Scroll-stage revamp (front page, 2026-09-30)
   Three banners fixed behind the page, cross-faded on scroll by script.js.
   Scoped to body.stage-page / new classes so rangers.html + app pages are untouched
   (except the pill-shaped buttons, which apply site-wide).
   =================================================================== */

/* Buttons: pill-shaped everywhere, lift + arrow nudge on hover */
.button,.file-button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;transition:background .3s ease,color .3s ease,box-shadow .3s ease,transform .2s ease}
.button:hover,.button:focus-visible{box-shadow:0 10px 30px rgba(200,155,98,.28);transform:translateY(-1px)}
.button:active{transform:none}
.button.block{display:flex}
.btn-arrow{display:inline-block;transition:transform .3s ease}
.button:hover .btn-arrow,a.category-card:hover .btn-arrow{transform:translateX(4px)}
.button.primary.solid{background:linear-gradient(135deg,#e2bd85,var(--gold) 55%,#a87c47);color:#1b1411;border-color:transparent}
.button.primary.solid:hover{background:linear-gradient(135deg,#f0cf9c,#d4a76c 55%,#b8894f)}
.nav-cta{transition:background .25s ease,color .25s ease}
.nav-cta:hover{background:var(--gold);color:#1b1411!important}

/* Fixed backdrop */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0d0a0a;pointer-events:none}
.backdrop-layer{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:var(--pos,center);opacity:0;will-change:opacity,transform;animation:kenburns 26s ease-in-out infinite alternate}
.backdrop-layer:first-child{opacity:1}
.backdrop-layer:nth-child(2){animation-delay:-9s}
.backdrop-layer:nth-child(3){animation-delay:-17s}
@keyframes kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.2%,-1%,0)}}
.backdrop-scrim{position:absolute;inset:0;background:rgba(10,8,8,.7);opacity:0;will-change:opacity}
.backdrop-vignette{position:absolute;inset:0;background:radial-gradient(130% 95% at 50% 45%,transparent 55%,rgba(8,6,6,.7))}
.stage-page{background:#0d0a0a}
.stage-page main,.stage-page .site-footer{position:relative;z-index:2}
.stage-page .site-header{z-index:30;background:rgba(14,11,11,.45);border-bottom-color:transparent;transition:background .35s ease,border-color .35s ease}
.stage-page .site-header.is-scrolled{background:rgba(14,11,11,.88);border-bottom-color:var(--line)}
.stage-page .site-footer{background:rgba(12,9,9,.94)}

/* Scene dots */
.banner-dots{position:fixed;z-index:20;right:clamp(.8rem,2vw,1.6rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.8rem}
.banner-dots button{width:11px;height:11px;padding:0;border-radius:999px;border:1px solid var(--gold);background:transparent;cursor:pointer;transition:height .35s ease,background .35s ease}
.banner-dots button.active{height:30px;background:var(--gold)}
@media(max-width:820px){.banner-dots{display:none}}

/* Hero */
.hero.hero-stage{min-height:calc(100vh - 78px);min-height:calc(100svh - 78px);align-items:end}
.hero-stage .hero-overlay{background:linear-gradient(90deg,rgba(10,8,8,.82),rgba(10,8,8,.3) 55%,transparent 80%),linear-gradient(0deg,rgba(10,8,8,.9),transparent 42%)}
.hero-stage .hero-copy{padding-bottom:clamp(3.5rem,8vh,6rem)}
.hero-stage h1{font-size:clamp(2.7rem,5.6vw,5.4rem);text-transform:uppercase;letter-spacing:.01em;line-height:1;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.hero-line,.hero-stage .hero-script{display:block}
.hero-stage .hero-script{text-transform:none;margin-top:.12em;text-shadow:none;background:linear-gradient(100deg,#b8894f 0%,#f3d9a8 30%,#c89b62 50%,#f3d9a8 70%,#b8894f 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.hero-stage .hero-lede{color:var(--ink)!important;opacity:.88;max-width:520px!important;font-size:1.1rem!important}
.hero-stage .hero-copy>*{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-stage .hero-copy>:nth-child(1){animation-delay:.15s}
.hero-stage .hero-copy>:nth-child(2){animation-delay:.3s}
.hero-stage .hero-copy>:nth-child(3){animation-delay:.5s}
.hero-stage .hero-copy>:nth-child(4){animation-delay:.65s}
.hero-stage .hero-flourish{opacity:0;animation:rise-tilt 1.2s .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes rise-tilt{from{opacity:0;transform:rotate(-7deg) translateY(18px)}to{opacity:1;transform:rotate(-7deg)}}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:1.2rem;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(241,231,216,.6);border-radius:999px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:999px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(max-height:620px){.scroll-cue{display:none}}

/* Section headings */
.section-heading.center{text-align:center;margin:0 auto 2.2rem}
.stage-page #collections{padding-top:clamp(3rem,6vw,5rem)}
.stage-page h2{text-shadow:0 3px 24px rgba(0,0,0,.5)}

/* Interludes: tall clear windows onto the banner behind */
.interlude{position:relative;min-height:88vh;display:grid;place-items:center;padding:4rem 1.4rem;text-align:center}
.interlude-copy{max-width:900px}
.interlude-copy .eyebrow{font-size:.8rem;letter-spacing:.34em;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.interlude-script{margin:.2rem 0 0;font-family:'Great Vibes',cursive;font-size:clamp(2.8rem,7vw,6rem);line-height:1.05;color:#f3e3c6;text-shadow:0 4px 28px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6)}

/* Collection cards — desktop: 4-up, rounded, image zoom + light sweep */
.stage-page .category-grid{grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media(max-width:1060px){.stage-page .category-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.stage-page .category-grid{grid-template-columns:repeat(2,1fr)}}
.stage-page .category-card{border:1px solid rgba(200,155,98,.55);border-radius:14px;background:rgba(18,14,14,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.stage-page .category-card>img,.stage-page .category-card>.cat-ph{aspect-ratio:4/3;object-position:var(--fp,50% 0%);transform-origin:var(--fp,50% 0%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.stage-page a.category-card:hover>img{transform:scale(1.06)}
.stage-page a.category-card::before{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,230,190,.2) 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s ease;pointer-events:none}
.stage-page a.category-card:hover::before{transform:translateX(110%)}
.stage-page a.category-card:hover{box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 0 1px var(--gold),0 0 30px rgba(200,155,98,.25)}
.stage-page .cat-body{text-align:center}
.stage-page .cat-link{display:flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--gold);border-radius:999px;padding:.6rem .8rem;transition:background .3s ease,color .3s ease}
.stage-page a.category-card:hover .cat-link{background:var(--gold);color:#1b1411}
.stage-page .category-card.is-locked .cat-link{border-color:var(--line)}
.stage-page .category-card.is-live{border-color:var(--gold)}
/* staggered entrance (the section gets .visible from the reveal observer) */
.stage-page #collections .category-card{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.stage-page #collections.visible .category-card{opacity:1;transform:none}
.stage-page #collections.visible .category-card.is-locked{opacity:.7}
.stage-page #collections.visible a.category-card:hover{transform:translateY(-6px)}
.stage-page .category-grid>:nth-child(2){transition-delay:.06s}.stage-page .category-grid>:nth-child(3){transition-delay:.12s}.stage-page .category-grid>:nth-child(4){transition-delay:.18s}.stage-page .category-grid>:nth-child(5){transition-delay:.24s}.stage-page .category-grid>:nth-child(6){transition-delay:.3s}.stage-page .category-grid>:nth-child(7){transition-delay:.36s}.stage-page .category-grid>:nth-child(8){transition-delay:.42s}
.stage-page #collections.visible .category-grid>a:hover{transition-delay:0s}

/* Steps + story as glass panels over the stage */
.stage-page .step{border-radius:14px;background:rgba(28,21,21,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.stage-page .step .step-number{font-family:'Great Vibes',cursive;font-size:2.4rem;letter-spacing:0;line-height:1;margin-bottom:.2rem}
.stage-page .intro{border:1px solid var(--line);border-radius:18px;background:rgba(20,15,15,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:clamp(3rem,6vw,5rem);padding:clamp(2rem,5vw,4rem)}
.stage-page .intro .hero-actions{margin-top:1.4rem}

/* ---------- Mobile: gallery links become horizontal rows (template.png) ---------- */
@media(max-width:640px){
  .backdrop-layer{object-position:var(--pos-m,var(--pos,center));animation-name:kenburns-m}
  @keyframes kenburns-m{from{transform:scale(1)}to{transform:scale(1.035)}}
  .hero-stage .hero-overlay{background:linear-gradient(0deg,rgba(9,7,7,.95) 8%,rgba(9,7,7,.35) 55%,rgba(9,7,7,.1))}
  .hero-stage .hero-copy{padding:6rem 1.3rem 4.2rem}
  .hero-stage h1{font-size:clamp(2.4rem,11vw,3.3rem)}
  .interlude{min-height:72vh}
  .stage-page .category-grid{grid-template-columns:1fr;gap:.75rem}
  .stage-page .category-card{flex-direction:row;min-height:0;height:108px;border-radius:12px}
  .stage-page .category-card>img,.stage-page .category-card>.cat-ph{flex:0 0 40%;width:40%;aspect-ratio:auto;height:100%;object-fit:cover;object-position:var(--fp,50% 0%)}
  .stage-page .cat-ph::after{width:62%}
  .stage-page .cat-body{justify-content:center;gap:.2rem;padding:.9rem 2.6rem .9rem 1rem;text-align:left}
  .stage-page .cat-title{font-size:1.02rem}
  .stage-page .cat-sub{flex:0 0 auto;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
  .stage-page .cat-link{display:none}
  .stage-page .category-card.is-locked .cat-link{display:inline-block;align-self:flex-start;margin-top:.35rem;padding:.2rem .6rem;font-size:.58rem}
  .stage-page .category-card::after{content:"";position:absolute;right:1.1rem;top:50%;width:10px;height:10px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:translateY(-50%) rotate(45deg);transition:transform .3s ease}
  .stage-page a.category-card:hover::after{transform:translate(3px,-50%) rotate(45deg)}
  .stage-page .category-card.is-locked::after{border-color:var(--muted)}
  .stage-page .intro{padding:1.8rem 1.3rem}
}

@media (prefers-reduced-motion: reduce){
  .backdrop-layer,.hero-stage .hero-script,.scroll-cue span{animation:none}
  .hero-stage .hero-copy>*{animation:none;opacity:1;transform:none}
  .hero-stage .hero-flourish{animation:none;opacity:1;transform:rotate(-7deg)}
  .stage-page #collections .category-card{opacity:1;transform:none;transition:none}
}

/* ===================================================================
   CMS page tree (2026-10-06): section / theme / template pages
   =================================================================== */
.hero.hero-stage.hero-sub{min-height:min(68vh,720px)}
.hero-sub h1{font-size:clamp(2.4rem,5vw,4.6rem)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .9rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.crumbs a:hover{color:var(--gold);border-color:var(--gold)}
.crumbs [aria-current]{color:var(--ink)}
.cat-price{margin:0;color:var(--gold);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.category-card .cat-fade{position:absolute;z-index:1;margin:0;object-fit:cover;object-position:var(--fp,50% 0%);opacity:0;transition:opacity 1.4s ease;pointer-events:none;filter:saturate(.9)}
.category-card .cat-fade.on{opacity:1}
.category-card.is-locked .cat-fade{filter:saturate(.45) brightness(.62)}
.empty-note{text-align:center;color:var(--muted);max-width:640px;margin:0 auto;padding:2rem 1.4rem;border:1px dashed var(--line);border-radius:14px;background:rgba(18,14,14,.7)}
.empty-note a{color:var(--gold);border-bottom:1px solid var(--line)}
.narrow-text{max-width:760px;position:relative;z-index:2}
.narrow-text p{color:var(--muted)}
.narrow-text a{color:var(--gold)}

/* Template (order) page */
.tpl-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:start;padding-top:clamp(2.4rem,5vw,4rem)}
.tpl-art{margin:0;position:sticky;top:96px}
.tpl-art img,.tpl-art .cat-ph{width:100%;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#0e0b0b}
.tpl-art figcaption{margin-top:.7rem;color:var(--muted);font-size:.8rem;text-align:center}
.tpl-panel{border:1px solid var(--line);border-radius:18px;background:rgba(20,15,15,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:clamp(1.4rem,3.4vw,2.6rem)}
.tpl-title{font-size:clamp(2rem,3.8vw,3.2rem);margin:.2rem 0 .6rem}
.tpl-sub{font-family:'Great Vibes',cursive;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--gold);margin:0 0 .8rem;line-height:1.1}
.tpl-desc{color:var(--muted);margin-bottom:1rem}
.tpl-price{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;margin:0 0 1.2rem}
.order-form{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.form-h{font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:.6rem 0 .2rem}
.slot-field{display:block}
.slot-drop{display:grid!important;grid-template-columns:96px 1fr;gap:1rem!important;align-items:center;padding:.8rem;border:1px dashed rgba(200,155,98,.55);border-radius:12px;background:#171111;cursor:pointer;transition:border-color .25s ease,background .25s ease;position:relative}
.slot-drop:hover,.slot-drop:focus-within{border-color:var(--gold);background:#1d1615}
.slot-drop.is-missing{border-color:#e6a37e}
.slot-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.slot-preview{width:96px;height:120px;border-radius:8px;background:radial-gradient(120% 90% at 50% 32%,rgba(200,155,98,.14),transparent 62%),#120e0e;background-position:center;background-size:cover;background-repeat:no-repeat;display:grid;place-items:center}
.slot-preview::after{content:"+";font-size:2rem;color:var(--gold);opacity:.7}
.slot-drop.has-file .slot-preview::after{content:none}
.slot-copy{display:grid;gap:.25rem}
.slot-copy strong{color:var(--ink);font-weight:400;font-size:1.05rem}
.slot-hint{font-size:.85rem}
.slot-action{color:var(--gold);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.slot-drop.has-file .slot-action::before{content:"✓ "}
.opt{font-size:.8rem;opacity:.8}
.consent{display:grid!important;grid-template-columns:auto 1fr;gap:.7rem!important;align-items:start;font-size:.85rem}
.consent input{width:auto!important;margin-top:.3rem;accent-color:var(--gold)}
.consent a{color:var(--gold)}
.form-note{margin:0;color:var(--muted);font-size:.82rem}
@media(max-width:900px){.tpl-wrap{grid-template-columns:1fr}.tpl-art{position:static;max-width:520px;margin:0 auto}}
@media(max-width:480px){.slot-drop{grid-template-columns:72px 1fr}.slot-preview{width:72px;height:90px}}