/* =========================================================
   日本空手道 基礼 — LP stylesheet
   Layout modelled on re-touch-lp.tokyo/wave-hair-wax:
     - PC : fixed full-screen media behind a ~560px content
            rail pinned to the right; floating CTA bottom-right;
            hamburger drawer top-right; numbered sections (01–07).
     - SP : single full-width column, hero over the fixed media,
            floating CTA + hamburger.
   Palette: 深緑 / 生成りの白 / 金 ・ 和モダン
   ========================================================= */

:root{
  --green:#1b4d3e;
  --green-dark:#123528;
  --gold:#c2a15a;
  --gold-bright:#d4b26a;
  --paper:#f6f3ec;
  --paper-2:#efeae0;
  --ink:#20221f;
  --ink-soft:#4a4d47;
  --line:rgba(27,77,62,.16);
  --white:#fff;

  --serif:"Noto Serif JP", serif;
  --sans:"Noto Sans JP", sans-serif;
  --latin:"Cormorant Garamond", serif;

  --rail:760px;               /* content rail width on desktop (widened, plan04-inspired) */
  --pad:clamp(24px, 4vw, 60px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--ink);
  background:var(--green-dark);      /* fallback behind the fixed media */
  line-height:1.9;letter-spacing:.02em;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
strong{font-weight:700;color:var(--green)}

/* ---------- reveal (gated behind html.js-reveal so no-JS stays visible) ---------- */
html.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js-reveal .reveal.is-in{opacity:1;transform:none}

/* ---------- decorative page frame (四角で囲む — echoes the charter's inset border) ---------- */
.page-frame{position:fixed;inset:16px;z-index:45;pointer-events:none;border:2px solid rgba(194,161,90,.6)}
.page-frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(194,161,90,.35)}
@media (max-width:600px){.page-frame{inset:10px;border-width:1px}.page-frame::after{inset:4px}}

/* =========================================================
   Fixed background media
   ========================================================= */
.bg-fixed{position:fixed;inset:0;z-index:-2;background-color:#123528;overflow:hidden}
/* hero video (bottom), photo layers (crossfade above), scrim (::after on top) */
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease}
.bg-layer.is-on{opacity:1}
.bg-fixed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,53,40,.42),rgba(18,53,40,.66))}

/* =========================================================
   Header + hamburger
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);pointer-events:none;
}
.brand{display:flex;flex-direction:row;align-items:center;gap:12px;line-height:1;color:#fff;pointer-events:auto;
  text-shadow:0 1px 12px rgba(0,0,0,.4);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-logo{display:block;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}
@media (min-width:1000px){ .brand-logo{width:96px;height:96px} }
/* fade the wordmark out once past the hero so it never sits white-on-light */
.site-header.past-hero .brand{opacity:0;visibility:hidden;transform:translateY(-8px)}
.brand-mark{font-family:var(--serif);font-weight:700;font-size:1.55rem;letter-spacing:.12em}
.brand-sub{font-family:var(--latin);font-size:.58rem;letter-spacing:.26em;margin-top:5px;opacity:.85}

.menu-toggle{
  pointer-events:auto;display:flex;flex-direction:column;gap:6px;
  background:rgba(18,53,40,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);border-radius:3px;
  width:52px;height:52px;align-items:center;justify-content:center;cursor:pointer;z-index:80;
  transition:background .3s var(--ease);
}
.menu-toggle:hover{background:rgba(18,53,40,.75)}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;transition:all .35s var(--ease)}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Drawer */
.drawer{
  position:fixed;top:0;right:0;z-index:70;height:100vh;height:100svh;
  width:min(84vw,380px);background:var(--green-dark);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 clamp(28px,5vw,52px);
  transform:translateX(100%);transition:transform .5s var(--ease);
}
.menu-open .drawer{transform:translateX(0)}
.drawer a{
  font-family:var(--serif);font-size:1.1rem;letter-spacing:.06em;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.9);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.drawer a:hover{color:var(--gold-bright);padding-left:8px}
.drawer .drawer-cta{
  margin-top:22px;border:0;background:var(--gold);color:#fff;text-align:center;
  padding:16px;border-radius:3px;font-size:1rem;letter-spacing:.08em;
}
.drawer .drawer-cta:hover{background:var(--gold-bright);padding-left:16px}
.drawer-scrim{position:fixed;inset:0;z-index:65;background:rgba(10,20,16,.5);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu-open .drawer-scrim{opacity:1;visibility:visible}

/* Floating CTA */
.float-cta{
  position:fixed;right:20px;bottom:20px;z-index:55;
  background:var(--gold);color:#fff;font-weight:500;letter-spacing:.1em;font-size:.9rem;
  padding:15px 26px;border-radius:3px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.float-cta:hover{background:var(--gold-bright);transform:translateY(-3px)}

/* =========================================================
   Content rail — pinned right on desktop, full-width on mobile
   ========================================================= */
.rail{position:relative;z-index:1;width:100%;margin:0}

/* ---- Hero (transparent, sits over the fixed media) ---- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--pad) 96px;color:#fff;
  background:linear-gradient(180deg,rgba(18,53,40,.34) 0%,rgba(18,53,40,.15) 40%,rgba(18,53,40,.5) 100%);
}
.hero-eyebrow{font-family:var(--latin);letter-spacing:.24em;font-size:.82rem;opacity:.92;margin-bottom:24px}
.hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(2.05rem,5.4vw,3.7rem);line-height:1.3;letter-spacing:.06em;text-shadow:0 2px 26px rgba(0,0,0,.32)}
.hero-lead{margin-top:26px;font-size:clamp(.95rem,1.6vw,1.1rem);font-weight:300;letter-spacing:.07em;line-height:2.1}
.hero-lead-sub{margin-top:14px;font-size:clamp(.86rem,1.4vw,.98rem);opacity:.85}
.hero-lockup{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:8px}
.lockup-label{display:inline-block;width:fit-content;background:var(--gold);color:#fff;font-size:.76rem;letter-spacing:.14em;padding:5px 14px;border-radius:2px}
.lockup-main{font-family:var(--serif);font-size:clamp(1rem,2.4vw,1.35rem);font-weight:500;letter-spacing:.06em;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--latin);font-size:.66rem;letter-spacing:.3em;opacity:.85}
.scroll-cue span{position:relative;display:block;padding-bottom:44px}
.scroll-cue span::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:36px;background:linear-gradient(#fff,transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- Panels (each content section) ---- */
.panel{padding:clamp(72px,9vw,120px) var(--pad)}
.panel-light{background:var(--paper)}
.panel-light:nth-of-type(even){background:var(--paper-2)}
.panel-green{background:var(--green);color:#fff}
/* clear panels let the fixed media show through; text gets a scrim for legibility */
.panel-clear{background:linear-gradient(180deg,rgba(18,53,40,.62),rgba(18,53,40,.72));color:#fff}

.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:30px}
.sec-label{font-family:var(--latin);font-size:.98rem;letter-spacing:.28em;color:var(--gold);font-weight:600}
.sec-no{font-family:var(--latin);font-size:.85rem;letter-spacing:.1em;opacity:.6}
.panel-light .sec-no{color:var(--ink-soft)}
.sec-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.5;letter-spacing:.04em;color:var(--green);margin-bottom:22px}
.panel-clear .sec-title,.panel-green .sec-title{color:#fff}
.sec-intro{font-size:1rem;color:var(--ink-soft);margin-bottom:0;line-height:2.05;max-width:44em}
.panel-clear .sec-intro,.on-photo{color:rgba(255,255,255,.92)}

/* Statement — 基礼が伝えたいこと */
.statement{text-align:center}
.statement-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:.1em;color:#fff;margin-bottom:34px}
.statement p{color:rgba(255,255,255,.9);margin-bottom:18px;line-height:2.1}
.statement-lead{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.8;letter-spacing:.06em;color:#fff !important;margin-bottom:28px !important}
.statement-hit{font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,3.4vw,1.9rem);line-height:1.8;letter-spacing:.08em;color:#fff !important;
  margin:30px 0 34px !important;padding:26px 18px;border-top:1px solid rgba(194,161,90,.5);border-bottom:1px solid rgba(194,161,90,.5)}
.statement-close{font-size:.96rem;color:rgba(255,255,255,.78) !important;line-height:2.2}

/* 「基」と「礼」の意味 */
.meaning{margin-top:clamp(36px,5vw,60px);background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:3px;padding:clamp(26px,3.5vw,40px)}
.meaning-title{font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:.08em;color:var(--green);margin-bottom:22px}
.meaning dl div{margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.meaning dt{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);letter-spacing:.1em;margin-bottom:8px}
.meaning dd{font-size:.98rem;color:var(--ink-soft)}
.meaning-close{margin-top:6px;font-size:.98rem;color:var(--ink-soft)}

/* 代表挨拶の世代別ブロック */
.gen-note{list-style:none;background:var(--paper-2);border-radius:3px;padding:22px 24px;margin:22px 0}
.gen-note li{font-size:.96rem;color:var(--ink-soft);margin-bottom:12px;line-height:1.95}
.gen-note li:last-child{margin-bottom:0}

/* 01 Concept */
.lead-copy{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.55;letter-spacing:.05em;color:var(--green);margin-bottom:30px}
.rich p{margin-bottom:20px;font-size:1.02rem;color:var(--ink-soft)}
.rich-note{padding-top:14px;border-top:1px solid var(--line)}
.charter{margin-top:clamp(44px,6vw,72px);background:var(--green);color:#fff;padding:clamp(36px,5vw,60px) clamp(28px,4vw,48px);border-radius:3px;text-align:center;position:relative}
.charter::before{content:"";position:absolute;inset:12px;border:1px solid rgba(194,161,90,.4);border-radius:2px;pointer-events:none}
.charter-label{font-family:var(--latin);letter-spacing:.32em;font-size:.78rem;color:var(--gold-bright);display:block;margin-bottom:22px}
.charter-lines{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,3vw,1.9rem);line-height:2.1;letter-spacing:.08em}
.charter-lines span{display:block}

/* 02 Scene — horizontal scroller (full-bleed) */
.scene-scroller{padding:0 0 clamp(56px,7vw,96px);background:linear-gradient(180deg,rgba(18,53,40,.72),rgba(18,53,40,.62))}
.scene-track{list-style:none;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 18px;-webkit-overflow-scrolling:touch}
.scene-track::-webkit-scrollbar{height:6px}
.scene-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}
.scene-item{position:relative;overflow:hidden;flex:0 0 auto;width:min(70vw,300px);aspect-ratio:3/4;scroll-snap-align:start;
  background-color:#123528;background-size:cover;background-position:center;
  border:1px solid rgba(194,161,90,.35);border-radius:3px;
  display:flex;align-items:flex-end;padding:20px}
.scene-item::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(10,25,18,.72))}
.scene-item span{position:relative;z-index:1;font-family:var(--serif);color:#fff;font-size:1.1rem;letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.scene-hint{text-align:center;color:rgba(255,255,255,.55);font-size:.78rem;letter-spacing:.06em;padding:0 var(--pad)}

/* 03 Feature blocks */
.feature{display:flex;flex-direction:column;gap:22px;margin-top:clamp(40px,6vw,72px)}
.feature-media{position:relative;overflow:hidden;aspect-ratio:16/10;background-color:#123528;background-size:cover;background-position:center;border-radius:3px;display:flex;align-items:center;justify-content:center}
.feature-media::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(18,53,40,.28),rgba(10,25,18,.42))}
.feature-media span{position:relative;z-index:1;font-family:var(--latin);font-size:3.4rem;font-weight:600;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.feature-idx{font-family:var(--latin);letter-spacing:.2em;font-size:.82rem;color:var(--gold);font-weight:600;display:block;margin-bottom:10px}
.feature-body h3{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.7rem);font-weight:600;color:var(--green);letter-spacing:.04em;margin-bottom:12px}
.feature-body p{font-size:1rem;color:var(--ink-soft)}

/* 04 Join — spec + buy row */
.spec{border-top:1px solid var(--line);margin-bottom:22px}
.spec-row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:18px 4px;border-bottom:1px solid var(--line)}
.spec-row dt{font-family:var(--serif);font-weight:600;color:var(--green);letter-spacing:.04em}
.spec-row dd{font-size:1.02rem;color:var(--ink)}
.spec-row dd small{color:var(--ink-soft);font-size:.86rem}
.spec-note{font-size:.9rem;color:var(--ink-soft);margin-bottom:30px}
.buy-row{display:flex;flex-direction:column;gap:12px}
.buy-btn{display:flex;flex-direction:column;gap:4px;padding:18px 22px;border:1px solid var(--green);border-radius:3px;background:#fff;transition:all .3s var(--ease);font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--green)}
.buy-btn span{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft);font-weight:400}
.buy-btn:hover{background:var(--paper-2);transform:translateY(-2px)}
.buy-btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.buy-btn-primary span{color:rgba(255,255,255,.7)}
.buy-btn-primary:hover{background:var(--green-dark)}

/* Access map */
.join-map{aspect-ratio:16/10;border-radius:3px;overflow:hidden;border:1px solid var(--line);margin:6px 0 12px;background:var(--paper-2)}
.join-map iframe{display:block;width:100%;height:100%}
.map-link{display:inline-block;font-size:.92rem;letter-spacing:.03em;color:var(--green);border-bottom:1px solid var(--gold);padding-bottom:2px;margin-bottom:30px;transition:color .3s var(--ease)}
.map-link:hover{color:var(--gold-deep)}

/* Instagram section */
.ig-embed{margin-bottom:28px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ig-cell{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.ig-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.ig-cell:hover img{transform:scale(1.06)}
@media (max-width:600px){.ig-grid{gap:6px}}
.ig-embed-placeholder{aspect-ratio:16/9;border:1px dashed var(--line);border-radius:4px;background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);padding:24px;gap:6px}
.ig-ph-mark{font-size:2rem;color:var(--gold)}
.ig-embed-placeholder small{font-size:.78rem;opacity:.8;max-width:32em}
.ig-cta{text-align:center}
.ig-btn{display:inline-flex;align-items:center;gap:14px;padding:16px 30px;border-radius:40px;color:#fff;letter-spacing:.04em;
  background:linear-gradient(105deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow:0 12px 30px -14px rgba(220,39,67,.6);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ig-btn:hover{transform:translateY(-3px);box-shadow:0 16px 36px -14px rgba(220,39,67,.7)}
.ig-icon{width:26px;height:26px;border-radius:8px;border:2.5px solid #fff;position:relative;flex-shrink:0}
.ig-icon::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border:2.5px solid #fff;border-radius:50%}
.ig-icon::after{content:"";position:absolute;top:4px;right:4px;width:3px;height:3px;border-radius:50%;background:#fff}
.ig-btn-text{display:flex;flex-direction:column;line-height:1.3;font-family:var(--serif);font-weight:600;font-size:1.05rem}
.ig-btn-text em{font-family:var(--latin);font-style:italic;font-size:.72rem;letter-spacing:.16em;opacity:.9;font-weight:400}

/* 05 Message card */
.message-card{background:var(--paper);border-radius:3px;overflow:hidden;color:var(--ink);display:grid;grid-template-columns:1fr}
.message-portrait{aspect-ratio:4/5;background-color:#123528;background-size:cover;background-position:center 18%}
.message-body{padding:clamp(28px,4vw,44px)}
/* tablet: portrait beside the text */
@media (min-width:720px) and (max-width:999.98px){
  .message-card{grid-template-columns:300px 1fr;align-items:stretch}
  .message-portrait{aspect-ratio:auto;height:100%;min-height:420px}
}
/* desktop: the 代表 photo becomes the scroll background — hide the inline one */
@media (min-width:1000px){
  .message-card{grid-template-columns:1fr}
  .message-portrait{display:none}
}
.message-title{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--green);margin-bottom:20px;letter-spacing:.04em}
.message-body p{margin-bottom:16px;font-size:1rem;color:var(--ink-soft)}
.message-sign{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--green);letter-spacing:.08em;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* 06 Steps */
.steps{list-style:none;display:flex;flex-direction:column;gap:16px}
.step-item{background:#fff;border:1px solid var(--line);border-radius:3px;padding:clamp(24px,3vw,34px)}
.step-no{font-family:var(--latin);font-size:.9rem;letter-spacing:.2em;color:var(--gold);font-weight:600;display:block;margin-bottom:12px}
.step-item h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--green);margin-bottom:10px;letter-spacing:.04em}
.step-item p{font-size:.96rem;color:var(--ink-soft)}

/* 07 FAQ */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;background:none;border:0;cursor:pointer;text-align:left;padding:24px 4px;font-family:var(--serif);font-size:clamp(1rem,2.2vw,1.15rem);font-weight:500;color:var(--green);letter-spacing:.03em;transition:color .3s var(--ease)}
.faq-q:hover{color:var(--gold)}
.faq-icon{position:relative;flex-shrink:0;width:18px;height:18px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--gold);transition:transform .35s var(--ease)}
.faq-icon::before{top:8px;left:0;width:18px;height:2px}
.faq-icon::after{top:0;left:8px;width:2px;height:18px}
.faq-item.open .faq-icon::after{transform:scaleY(0)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 4px 24px;font-size:.98rem;color:var(--ink-soft)}

/* Contact */
.contact-eyebrow{font-family:var(--latin);letter-spacing:.3em;font-size:.82rem;color:var(--gold-bright);margin-bottom:20px}
.contact-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.5;letter-spacing:.05em;margin-bottom:22px}
.contact-lead{font-weight:300;letter-spacing:.05em;opacity:.92;margin-bottom:42px;line-height:2.05}
.contact-methods{display:flex;flex-direction:column;gap:16px}
.contact-btn{display:flex;flex-direction:column;gap:6px;padding:22px 26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);border-radius:3px;transition:all .35s var(--ease)}
.contact-btn:hover{background:rgba(255,255,255,.12);border-color:var(--gold);transform:translateY(-3px)}
.cb-label{font-family:var(--latin);letter-spacing:.22em;font-size:.74rem;color:var(--gold-bright)}
.cb-value{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:.06em}

/* Footer */
.site-footer{background:var(--green-dark);color:rgba(255,255,255,.82);padding:clamp(44px,6vw,64px) var(--pad) 36px;text-align:center}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:24px}
.footer-logo{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:6px;box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.footer-mark{font-family:var(--serif);font-weight:700;font-size:1.7rem;letter-spacing:.14em;color:#fff}
.footer-sub{font-size:.76rem;letter-spacing:.12em;opacity:.7}
.footer-copy{font-family:var(--latin);font-size:.76rem;letter-spacing:.16em;opacity:.55;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}

/* =========================================================
   Desktop : content rail pinned right, fixed media on the left
   ========================================================= */
@media (min-width:1000px){
  .rail{width:var(--rail);margin-left:auto;margin-right:0;
    box-shadow:-30px 0 80px -40px rgba(0,0,0,.5)}
  .bg-layer{background-position:left center}
  .bg-video{object-position:left center}
  .hero{min-height:100vh}
  /* full-bleed scroller stays inside the rail on desktop */
  .scene-track{padding-left:var(--pad);padding-right:var(--pad)}
  .brand-sub{opacity:.9}
  /* two-up layouts where the rail has room */
  .buy-row{gap:12px}
}

/* wide desktops: nudge rail off the far edge a touch */
@media (min-width:1500px){
  .rail{margin-right:clamp(0px,6vw,120px)}
}

/* =========================================================
   Mobile refinements
   ========================================================= */
@media (max-width:600px){
  .spec-row{grid-template-columns:96px 1fr;gap:12px}
  .float-cta{padding:13px 20px;font-size:.84rem}
  .menu-toggle{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html.js-reveal .reveal{opacity:1;transform:none}
}