/* =====================================================================
   DARK LUXE / CINEMATIC — shared design system (Rendition 03)
   Near-black stage, a single champagne-gold metal, film grain + vignette,
   Cormorant Garamond display over airy Manrope. Slow, eased, expensive.
   ===================================================================== */ :root {
  --ink-0:#07070a;
  /* stage black */ --ink-1:#0c0b10;
  /* raised black */ --ink-2:#121117;
  /* card black */ --ink-3:#1a1820;
  /* hover black */ --paper:#ece6da;
  /* off-white text */ --mute:#a59d8f;
  /* secondary text (AA on black) */ --dim:#6f685d;
  /* tertiary / meta */ --gold-1:#c9a96e;
  /* champagne gold */ --gold-2:#f1d9a6;
  /* light champagne */ --gold-3:#8a6d3b;
  /* deep gold */ --gold:linear-gradient(100deg,#a9884f 0%,#c9a96e 22%,#f1d9a6 48%,#c9a96e 72%,#a9884f 100%);
  --hair:rgba(201,169,110,.28);
  --hair-soft:rgba(201,169,110,.14);
  --glow:rgba(201,169,110,.22);
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --sans:"Manrope","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.12,1);
  --slow:1.4s;
  --wrap:1240px;
  --gut:clamp(22px,5vw,64px);
}
*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%
}
body {
  background:var(--ink-0);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100vh;
}
img {
  display:block;
  max-width:100%
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit;
  color:inherit
}
::selection {
  background:rgba(201,169,110,.35);
  color:#fff
}
:focus-visible {
  outline:1px solid var(--gold-2);
  outline-offset:4px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}
/* ---------- atmosphere: grain + vignette + spotlight ---------- */ .grain {
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite
}
@keyframes grain {
  0% {
    background-position:0 0
  }
  20% {
    background-position:-60px 40px
  }
  40% {
    background-position:80px -30px
  }
  60% {
    background-position:-30px -90px
  }
  80% {
    background-position:110px 70px
  }
  100% {
    background-position:0 0
  }
}
.vignette {
  position:fixed;
  inset:0;
  z-index:89;
  pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)
}
.spot {
  position:fixed;
  left:0;
  top:0;
  width:640px;
  height:640px;
  margin:-320px 0 0 -320px;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(241,217,166,.075) 0%,rgba(201,169,110,.035) 35%,transparent 68%);
  opacity:0;
  transition:opacity .8s var(--ease);
  will-change:transform
}
.spot.on {
  opacity:1
}
@media (pointer:coarse) {
  .spot {
    display:none
  }
}
/* ---------- layout ---------- */ .wrap {
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gut);
  position:relative
}
.narrow {
  max-width:860px
}
section {
  position:relative
}
.sect {
  padding:clamp(84px,10vw,150px) 0
}
.center {
  text-align:center
}
main {
  position:relative;
  z-index:3
}
/* ---------- type ---------- */ .display,h1,h2,h3 {
  font-family:var(--serif);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--paper)
}
h1 {
  font-size:clamp(54px,9vw,148px)
}
h2 {
  font-size:clamp(40px,6vw,92px)
}
h3 {
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.12
}
h4 {
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.3
}
em,.it {
  font-style:italic;
  font-family:var(--serif)
}
.gold {
  background:var(--gold);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:var(--gold-1);
  -webkit-text-fill-color:transparent
}
.shimmer {
  animation:shimmer 9s var(--ease) infinite
}
@keyframes shimmer {
  0% {
    background-position:100% 0
  }
  55%,100% {
    background-position:-120% 0
  }
}
.label {
  font-family:var(--sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gold-1)
}
.label.mute {
  color:var(--mute)
}
.lead {
  font-size:clamp(17px,1.5vw,20px);
  color:var(--mute);
  line-height:1.75;
  font-weight:300
}
.lede {
  font-family:var(--serif);
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.45;
  font-weight:300;
  color:var(--paper)
}
.copy>p+p,.prose>p+p {
  margin-top:1.2em
}
.mute {
  color:var(--mute)
}
/* chapter marker: "II. ——— The Collection" */ .chapter {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:clamp(28px,4vw,48px)
}
.chapter .num {
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:var(--gold-2);
  letter-spacing:.04em;
  min-width:2ch
}
.chapter .rule {
  width:clamp(40px,8vw,96px);
  height:1px;
  background:linear-gradient(90deg,var(--gold-1),transparent)
}
.chapter .label {
  color:var(--mute)
}
.center .chapter {
  justify-content:center
}
.center .chapter .rule:first-child {
  background:linear-gradient(270deg,var(--gold-1),transparent)
}
.hairline {
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,var(--gold-1) 30%,var(--gold-2) 50%,var(--gold-1) 70%,transparent);
  opacity:.55
}
.diamond {
  display:inline-block;
  width:6px;
  height:6px;
  transform:rotate(45deg);
  border:1px solid var(--gold-1);
  flex:none
}
/* ---------- buttons ---------- */ .btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:17px 34px;
  font-family:var(--sans);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  border:1px solid var(--gold-1);
  color:var(--gold-2);
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  transition:color .6s var(--ease),border-color .6s var(--ease),box-shadow .8s var(--ease),transform .6s var(--ease);
  isolation:isolate;
  white-space:nowrap
}
.btn::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--gold);
  background-size:200% 100%;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .8s var(--ease)
}
.btn:hover {
  color:#120e07;
  box-shadow:0 0 40px rgba(201,169,110,.25)
}
.btn:hover::before {
  transform:scaleX(1);
  transform-origin:left
}
.btn.solid {
  color:#120e07;
  border-color:transparent
}
.btn.solid::before {
  transform:scaleX(1)
}
.btn.solid:hover {
  box-shadow:0 0 50px rgba(241,217,166,.35);
  transform:translateY(-2px)
}
.btn.ghost {
  border-color:rgba(236,230,218,.25);
  color:var(--paper)
}
.btn.ghost:hover {
  border-color:var(--gold-1);
  color:#120e07
}
.btn .arr {
  width:18px;
  height:1px;
  background:currentColor;
  position:relative;
  transition:width .6s var(--ease)
}
.btn .arr::after {
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg)
}
.btn:hover .arr {
  width:28px
}
.link {
  font-size:11.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-2);
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:500
}
.link .arr {
  width:22px;
  height:1px;
  background:currentColor;
  transition:width .6s var(--ease)
}
.link:hover .arr {
  width:40px
}
.btns {
  display:flex;
  flex-wrap:wrap;
  gap:16px
}
.center .btns {
  justify-content:center
}
/* ---------- header ---------- */ .hdr {
  background:#07070a;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  transition:background .8s var(--ease),border-color .8s var(--ease),padding .8s var(--ease);
  padding:26px 0;
  border-bottom:1px solid transparent
}
.hdr.scrolled {
  background:#07070a;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  border-color:var(--hair-soft);
  padding:14px 0
}
.hdr .row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gut)
}

/* Products navbar shares the hero grid's outer edges. */
#products-page .hdr .row {
  width:calc(100% - 2 * var(--gut));
  max-width:1440px;
  padding:0
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--sans);
  font-size:13.67px;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--paper);
  white-space:nowrap
}
.brand span {
  font-size:15.67px
}
.brand .mark {
  width:30px;
  height:30px;
  flex:none
}
.nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.2vw,36px)
}
.nav a {
  font-size:13.17px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
  position:relative;
  padding:6px 0;
  transition:color .5s var(--ease);
  white-space:nowrap
}
.nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--gold-1);
  transform:scaleX(0);
  transition:transform .6s var(--ease)
}
.nav a:hover {
  color:var(--paper)
}
.nav a:hover::after {
  transform:scaleX(1)
}
.nav .btn {
  padding:11px 20px;
  font-size:10px
}
.nav .btn::after {
  display:none
}
.burger {
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--hair);
  background:transparent;
  cursor:pointer;
  position:relative;
  flex:none
}
.burger span {
  position:absolute;
  left:12px;
  right:12px;
  height:1px;
  background:var(--gold-2);
  transition:transform .6s var(--ease),opacity .4s
}
.burger span:nth-child(1) {
  top:17px
}
.burger span:nth-child(2) {
  top:26px
}
.menu-open .burger span:nth-child(1) {
  transform:translateY(4.5px) rotate(45deg)
}
.menu-open .burger span:nth-child(2) {
  transform:translateY(-4.5px) rotate(-45deg)
}
@media (max-width:1080px) {
  .burger {
    display:block
  }
  .nav {
    position:fixed;
    inset:0;
    z-index:-1;
    flex-direction:column;
    justify-content:center;
    gap:26px;
    background:rgba(7,7,10,.97);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    opacity:0;
    visibility:hidden;
    transition:opacity .7s var(--ease),visibility .7s;
    padding:90px 24px 40px;
    overflow-y:auto
  }
  .nav a {
    font-family:var(--serif);
    font-size:30px;
    letter-spacing:.02em;
    text-transform:none;
    color:var(--paper);
    font-weight:300
  }
  .nav a.btn {
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:.3em;
    text-transform:uppercase;
    margin-top:10px;
    padding:15px 30px;
    color:var(--gold-2)
  }
  .menu-open .nav {
    opacity:1;
    visibility:visible
  }
  .menu-open .hdr {
    background:#07070a;
    border-color:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none
  }
}
/* ---------- reveal (progressive enhancement) ---------- */ html.js .reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);
  transition-delay:var(--d,0s)
}
html.js .reveal.in {
  opacity:1;
  transform:none
}
html.js .reveal-line {
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.8s var(--ease);
  transition-delay:var(--d,0s)
}
html.js .reveal-line.in {
  transform:scaleX(1)
}
/* ---------- film still (image treatment) ---------- */ .still {
  position:relative;
  overflow:hidden;
  background:#050507
}
.still img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.08) brightness(.86) sepia(.12);
  transform:scale(1.04);
  transition:transform 3s var(--ease),filter 1.5s var(--ease)
}
.still.kb img {
  animation:kenburns 28s ease-in-out infinite alternate
}
@keyframes kenburns {
  0% {
    transform:scale(1.04) translate(0,0)
  }
  100% {
    transform:scale(1.14) translate(-1.5%,-1.2%)
  }
}
.still::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 85% 80% at 50% 50%,transparent 45%,rgba(5,5,7,.75) 100%),linear-gradient(180deg,rgba(7,7,10,.15),rgba(7,7,10,.0) 40%,rgba(7,7,10,.55))
}
.still.mono img {
  filter:grayscale(1) sepia(.42) saturate(1.25) contrast(1.12) brightness(.78)
}
.frame {
  position:relative;
  padding:14px
}
.frame::before,.frame::after {
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  pointer-events:none;
  z-index:2
}
.frame::before {
  top:0;
  left:0;
  border-top:1px solid var(--gold-1);
  border-left:1px solid var(--gold-1)
}
.frame::after {
  bottom:0;
  right:0;
  border-bottom:1px solid var(--gold-1);
  border-right:1px solid var(--gold-1)
}
.caption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dim)
}
.letterbox {
  aspect-ratio:2.39/1
}
/* ---------- forms (demo) ---------- */ .field {
  position:relative;
  display:block
}
.field span {
  display:block;
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:6px;
  font-weight:500
}
.field input,.field select {
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(236,230,218,.2);
  padding:12px 0 14px;
  font-size:17px;
  font-weight:300;
  color:var(--paper);
  border-radius:0;
  outline:none;
  transition:border-color .6s var(--ease)
}
.field input:focus,.field select:focus {
  border-color:var(--gold-1)
}
.field input::placeholder {
  color:var(--dim)
}
.form-note {
  min-height:1.6em;
  margin-top:14px;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--gold-2)
}
/* chat pill (Eve) */ .chat {
  display:flex;
  align-items:center;
  gap:12px;
  max-width:520px;
  border:1px solid var(--hair);
  background:rgba(12,11,16,.55);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:8px 8px 8px 22px;
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease)
}
.chat:focus-within {
  border-color:var(--gold-1);
  box-shadow:0 0 40px rgba(201,169,110,.15)
}
.chat input {
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  font-size:15px;
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:var(--paper)
}
.chat input::placeholder {
  color:var(--mute)
}
.chat button {
  width:46px;
  height:46px;
  flex:none;
  border:0;
  background:var(--gold);
  background-size:200% 100%;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:#120e07;
  transition:background-position .8s var(--ease)
}
.chat button:hover {
  background-position:100% 0
}
.chat .live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 12px var(--gold-2);
  flex:none;
  animation:breathe 3.2s ease-in-out infinite
}
@keyframes breathe {
  0%,100% {
    opacity:.35
  }
  50% {
    opacity:1
  }
}
/* ---------- collection cards (pricing) ---------- */ .collection {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,30px);
  align-items:stretch
}
.coll {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(34px,3vw,48px) clamp(26px,2.6vw,40px);
  border:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(26,24,32,.55),rgba(12,11,16,.55));
  transition:transform 1s var(--ease),border-color 1s var(--ease),box-shadow 1s var(--ease)
}
.coll::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid var(--hair-soft);
  pointer-events:none
}
.coll:hover {
  transform:translateY(-6px);
  border-color:var(--gold-1)
}
.coll.featured {
  border-color:var(--gold-1);
  box-shadow:0 0 0 1px rgba(241,217,166,.15),0 30px 120px -20px rgba(201,169,110,.35),inset 0 0 80px rgba(201,169,110,.07);
  background:radial-gradient(ellipse 120% 60% at 50% 0%,rgba(201,169,110,.16),transparent 60%),linear-gradient(180deg,#16141b,#0c0b10)
}
.coll .tag {
  position:absolute;
  top:-1px;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--ink-0);
  padding:6px 16px;
  border:1px solid var(--gold-1);
  font-size:9.5px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gold-2);
  white-space:nowrap
}
.coll .name {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(30px,2.6vw,38px);
  line-height:1.1;
  font-weight:300
}
.coll .prefix {
  margin-top:28px
}
.coll .price {
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(70px,6.6vw,96px);
  line-height:1;
  margin:8px 0 6px;
  letter-spacing:-.02em
}
.coll .price sup {
  font-size:.36em;
  vertical-align:1.15em;
  margin-right:4px;
  line-height:0
}
.coll .server {
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--mute);
  padding-bottom:26px;
  border-bottom:1px solid var(--hair-soft);
  margin-bottom:22px
}
.coll ul {
  list-style:none;
  flex:1
}
.coll li {
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:10px 0;
  font-size:14.5px;
  color:var(--paper);
  border-bottom:1px solid rgba(236,230,218,.05)
}
.coll li .diamond {
  transform:rotate(45deg) translateY(-2px);
  width:5px;
  height:5px
}
.coll .btn {
  margin-top:34px;
  width:100%
}
@media (max-width:960px) {
  .collection {
    grid-template-columns:1fr;
    max-width:520px;
    margin:0 auto
  }
}
/* ---------- feature grid ---------- */ .fgrid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair-soft);
  border-left:1px solid var(--hair-soft)
}
.feat {
  position:relative;
  padding:clamp(34px,3.4vw,54px) clamp(26px,2.8vw,44px);
  border-right:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft);
  transition:background 1s var(--ease);
  overflow:hidden
}
.feat::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:1px;
  width:100%;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--ease)
}
.feat:hover {
  background:rgba(201,169,110,.035)
}
.feat:hover::before {
  transform:scaleX(1)
}
.feat .ico {
  width:44px;
  height:44px;
  color:var(--gold-1);
  margin-bottom:30px;
  stroke:currentColor;
  fill:none;
  stroke-width:1;
  transition:color .8s var(--ease)
}
.feat:hover .ico {
  color:var(--gold-2)
}
.feat .idx {
  position:absolute;
  top:clamp(30px,3vw,48px);
  right:clamp(24px,2.6vw,40px);
  font-family:var(--serif);
  font-style:italic;
  color:var(--dim);
  font-size:17px
}
.feat h3 {
  font-size:clamp(25px,2.2vw,31px);
  margin-bottom:14px
}
.feat p {
  color:var(--mute);
  font-size:15px;
  line-height:1.75
}
@media (max-width:960px) {
  .fgrid {
    grid-template-columns:1fr 1fr
  }
}
@media (max-width:640px) {
  .fgrid {
    grid-template-columns:1fr
  }
}
/* ---------- accordion ---------- */ .acc {
  border-top:1px solid var(--hair)
}
.acc-item {
  border-bottom:1px solid var(--hair)
}
.acc-q {
  width:100%;
  display:flex;
  align-items:center;
  gap:24px;
  padding:30px 0;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  color:var(--paper)
}
.acc-q .n {
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-1);
  font-size:18px;
  min-width:2.6ch
}
.acc-q .q {
  flex:1;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(22px,2.3vw,32px);
  line-height:1.25;
  transition:color .6s var(--ease)
}
.acc-q:hover .q {
  color:var(--gold-2)
}
.pm {
  position:relative;
  width:34px;
  height:34px;
  flex:none;
  border:1px solid var(--hair);
  border-radius:50%;
  transition:border-color .6s var(--ease),transform .8s var(--ease)
}
.pm::before,.pm::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1px;
  background:var(--gold-2);
  transform:translate(-50%,-50%);
  transition:transform .8s var(--ease)
}
.pm::after {
  transform:translate(-50%,-50%) rotate(90deg)
}
.acc-item.open .pm {
  border-color:var(--gold-1);
  transform:rotate(180deg)
}
.acc-item.open .pm::after {
  transform:translate(-50%,-50%) rotate(0deg)
}
.acc-a {
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .9s var(--ease)
}
html.js .acc-a {
  grid-template-rows:0fr
}
html.js .acc-item.open .acc-a {
  grid-template-rows:1fr
}
.acc-a>div {
  overflow:hidden;
  min-height:0
}
.acc-a p {
  padding:0 58px 34px calc(2.6ch + 24px);
  color:var(--mute);
  font-size:16px;
  line-height:1.85;
  max-width:900px
}
@media (max-width:640px) {
  .acc-a p {
    padding:0 0 28px
  }
  .acc-q {
    gap:16px;
    padding:24px 0
  }
}
/* ---------- footer ---------- */ .ftr {
  position:relative;
  z-index:3;
  border-top:1px solid var(--hair-soft);
  padding:70px 0 110px;
  text-align:center
}
.ftr .brand {
  justify-content:center;
  margin-bottom:24px
}
.ftr p {
  color:var(--dim);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase
}
.ftr .back {
  margin-top:30px
}
/* template badge */ .tbadge {
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:95;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mute);
  background:rgba(7,7,10,.82);
  border:1px solid var(--hair-soft);
  padding:7px 12px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  pointer-events:none;
  max-width:calc(100vw - 28px)
}
.tbadge b {
  color:var(--gold-1);
  font-weight:500
}
/* ---------- hero canvas ---------- */ .hero-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none
}
/* scroll cue */ .cue {
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  z-index:4
}
.cue i {
  width:1px;
  height:56px;
  background:linear-gradient(180deg,var(--gold-1),transparent);
  position:relative;
  overflow:hidden
}
.cue i::after {
  content:"";
  position:absolute;
  left:0;
  top:-30%;
  width:1px;
  height:30%;
  background:var(--gold-2);
  animation:cue 2.8s var(--ease) infinite
}
@keyframes cue {
  0% {
    top:-30%
  }
  100% {
    top:110%
  }
}
/* utility */ .toast {
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-2);
  font-size:17px;
  min-height:1.5em;
  margin-top:14px
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important;
    scroll-behavior:auto!important
  }
  html.js .reveal {
    opacity:1;
    transform:none
  }
  html.js .reveal-line {
    transform:none
  }
  .grain {
    animation:none
  }
  .spot {
    display:none
  }
}
@media (max-width:640px) {
  .tbadge {
    font-size:8.5px;
    letter-spacing:.16em;
    padding:5px 9px;
    left:8px;
    bottom:8px
  }
}
/* Secondary hero offset retained; primary Auto Ledger uses autoledger-hero.css. */ .hero:not(#autoledger-hero) .al-slide,.hero:not(#autoledger-hero) .hslide,.hero:not(#autoledger-hero) .hero-scrim,.hero:not(#autoledger-hero) .hero-in,.hero:not(#autoledger-hero) .hero-meta {
  transform:translateY(-30px)
}