/* Black and gold, plain and simple. */
:root{
  --ink:#0A0B0D; --panel:#131519; --panel-2:#1B1E24; --line:#282C33;
  --fg:#F3F1E8; --fg-dim:#A5A69E; --fg-faint:#8B8D93;
  --olive:#E7C158; --olive-deep:#A9781F; --warm:#E9A94B; --wood:#B4834A;
  --glass:rgba(255,255,255,.05); --shade:rgba(0,0,0,.55);
  --stage-1:#15171C; --stage-2:#050607;
  --logo:var(--logo-cream);
  --logo-cream:url("img/logo-cream.webp");
  --logo-orig:url("img/logo-orig.webp");
  --truck-poster:url("img/truck_poster.webp");
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--f-display); font-weight:500; text-wrap:balance; margin:0; line-height:1.05; letter-spacing:-.005em}
p{margin:0}
img{max-width:100%; display:block}
.wrap{width:min(1160px,92vw); margin-inline:auto}
.eyebrow{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); margin:0}
.tag{
  display:inline-flex; align-items:center; gap:.6rem; padding:.42rem .9rem .44rem;
  border:1px solid var(--line); border-radius:999px; background:var(--glass);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--fg-dim);
}
.lede{color:var(--fg-dim); max-width:62ch; font-size:1.05rem}
:focus-visible{outline:2px solid var(--olive); outline-offset:3px; border-radius:4px}

/* ---------- bar ---------- */
header.bar{
  position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; gap:1.4rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:var(--ink);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
header.bar.scrolled{border-bottom-color:var(--line)}
.brand{display:block; width:132px; height:44px; background:var(--logo) left center/contain no-repeat; text-indent:-9999px; overflow:hidden; flex:none}
nav.links{margin-left:auto; display:flex; gap:1.5rem}
nav.links a{font-size:.9rem; color:var(--fg-dim); text-decoration:none; transition:color .2s; position:relative}
nav.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--olive);
  transition:right .3s cubic-bezier(.2,.8,.3,1);
}
nav.links a:hover{color:var(--fg)}
nav.links a:hover::after, nav.links a[aria-current]::after{right:0}
nav.links a[aria-current]{color:var(--fg)}
.call{
  font-family:var(--f-mono); font-size:.8rem; text-decoration:none; flex:none;
  padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line); background:var(--glass); color:var(--fg); font-weight:500; white-space:nowrap;
  transition:border-color .2s, color .2s;
}
.call:hover{border-color:var(--olive); color:var(--olive)}

/* ---------- hero ---------- */
.stage{
  position:relative; min-height:100svh; display:grid; align-items:center; padding:6.5rem 0 2.5rem; overflow:hidden;
  background:radial-gradient(130% 95% at 62% 42%, color-mix(in srgb,var(--stage-1) 80%,transparent) 0%, color-mix(in srgb,var(--stage-2) 55%,transparent) 74%, transparent 100%);
}
.stage::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14rem; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink));
}
#embers{position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; opacity:.55; mix-blend-mode:screen}
.orb-a{width:46vw; height:46vw; max-width:640px; max-height:640px; left:-10vw; top:-12vw; background:radial-gradient(circle at 40% 40%, var(--olive), transparent 68%); animation:driftA 22s ease-in-out infinite}
.orb-b{width:34vw; height:34vw; max-width:480px; max-height:480px; right:-8vw; top:14vw; background:radial-gradient(circle at 55% 45%, var(--olive-deep), transparent 70%); animation:driftB 26s ease-in-out infinite}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(3vw,4vw) scale(1.08)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,2vw) scale(.94)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
.stage-grid{
  position:relative; display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"truck" "copy" "strip";
  row-gap:clamp(1rem,3vh,2rem);
}
.hero-copy{grid-area:copy; max-width:640px; position:relative}
.truck-col{grid-area:truck; width:100%; position:relative}
.hero-truck{display:block; width:min(100%,1100px); height:auto; margin-inline:auto; aspect-ratio:1672/941; object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%); mask-composite:intersect}
.truck3d-sec{padding-bottom:0}
.truck3d-sec .sec-head{margin-inline:auto; text-align:center; justify-items:center; margin-bottom:1.2rem}
.truck-col-3d .truck-hold{width:min(100%,820px)}
.logo-coin{
  position:absolute; z-index:2; top:2rem; left:calc(100% + clamp(2rem,6vw,5rem));
  width:clamp(260px,28vw,440px); height:clamp(260px,28vw,440px);
  pointer-events:none; perspective:1400px;
}
.logo-coin .spin{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.logo-coin .face{
  position:absolute; inset:0; backface-visibility:hidden;
  background:var(--logo-orig) center/contain no-repeat;
}
.logo-coin .face.back{display:none}
h1{font-size:clamp(3rem,7.2vw,5.6rem); margin-top:1.15rem; font-weight:400; line-height:1}
h1 em{
  font-style:italic; line-height:1.22; padding-bottom:.08em; display:inline-block;
  background:linear-gradient(100deg,var(--olive-deep) 0%,var(--olive) 50%,color-mix(in srgb,var(--olive) 55%,var(--fg)) 75%,var(--olive) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--olive) 18%,transparent));
}
.hero-copy .lede{margin-top:1.5rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.btn{
  font-family:var(--f-body); font-weight:600; font-size:.95rem; text-decoration:none; display:inline-block;
  padding:.8rem 1.5rem; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .2s cubic-bezier(.23,1,.32,1), background .2s, border-color .2s, color .2s, box-shadow .3s;
}
.btn:hover{transform:translateY(-3px) scale(1.045)}
.btn:active{transform:translateY(-1px) scale(.97); transition-duration:.1s}
.btn-solid{
  background:linear-gradient(135deg,var(--olive-deep),var(--olive) 55%,var(--fg) 130%);
  color:#0A0B0D; position:relative; overflow:hidden; box-shadow:0 10px 28px -12px color-mix(in srgb,var(--olive) 60%,transparent);
}
.btn-solid::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.btn-solid:hover::after{transform:translateX(120%)}
.btn-solid:hover{box-shadow:0 14px 34px -12px color-mix(in srgb,var(--olive) 75%,transparent)}
.btn-ghost{border-color:var(--line); color:var(--fg); background:var(--glass)}
.btn-ghost:hover{border-color:var(--olive); color:var(--olive)}
.strip{grid-area:strip; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid color-mix(in srgb,var(--olive) 45%,transparent)}
.strip a{
  display:flex; align-items:center; gap:1.05rem; text-decoration:none; color:inherit;
  padding:1.35rem 1.5rem 1.35rem 1.5rem; border-left:1px solid color-mix(in srgb,var(--olive) 45%,transparent);
  transition:background .35s;
}
.strip a:first-child{border-left:0; padding-left:0}
.strip a:hover{background:var(--glass)}
.strip img{width:66px; height:66px; border-radius:17px; object-fit:cover; flex:none; transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.strip a:hover img{transform:scale(1.07)}
.strip .k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive)}
.strip h3{font-size:1.3rem; margin:.2rem 0 .12rem}
.strip p{font-size:.8rem; color:var(--fg-dim); line-height:1.4; text-wrap:balance}
.strip .go{margin-left:auto; color:var(--fg-faint); font-size:1.1rem; transition:transform .35s, color .35s}
.strip a:hover .go{transform:translateX(5px); color:var(--olive)}
.fact b{display:block; font-family:var(--f-display); font-size:1.6rem; color:var(--fg); font-weight:500; margin-bottom:.1rem; letter-spacing:0}

/* ---------- the real trailer, turnable photo view ---------- */
.truck-hold{
  position:relative; display:block; width:min(100%,920px); margin-inline:auto; aspect-ratio:1000/560; cursor:grab; touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
  background:var(--truck-poster) center/contain no-repeat;
}
.truck-hold.ready{background-image:none}
.truck-hold:active{cursor:grabbing}
#t3d{position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; transition:opacity .5s}
.truck-hold.ready #t3d{opacity:1}
.drag-hint{
  text-align:center; margin-top:.4rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:var(--fg-faint); text-transform:uppercase;
}

/* ---------- sections ---------- */
section{padding:clamp(3.2rem,7vw,5.6rem) 0; position:relative}
.sec-head{display:grid; gap:1rem; max-width:70ch; margin-bottom:3.2rem}
h2{
  font-family:var(--f-display); font-weight:600; font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.08; letter-spacing:.005em; padding-bottom:.08em;
  background:linear-gradient(100deg,var(--olive-deep) 0%,var(--olive) 50%,color-mix(in srgb,var(--olive) 55%,var(--fg)) 75%,var(--olive) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--olive) 18%,transparent));
}

/* menu cards with the real photos */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1.2rem; perspective:1200px}
.card{
  position:relative; border-radius:16px; transform-style:preserve-3d; overflow:hidden;
  background:linear-gradient(168deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); transition:box-shadow .3s, border-color .3s; will-change:transform;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 20%,color-mix(in srgb,var(--olive) 22%,transparent) 42%,transparent 64%);
  transform:translateX(-140%); transition:transform .9s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.card:hover::before{opacity:1; transform:translateX(140%)}
.card:hover{
  border-color:color-mix(in srgb,var(--olive) 50%,var(--line));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7), 0 0 44px -16px color-mix(in srgb,var(--olive) 40%,transparent);
}
.card figure{margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--panel-2)}
.card figure img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover figure img{transform:scale(1.05)}
.card .body{padding:1.5rem 1.6rem 1.7rem}
.card .num{font-family:var(--f-mono); font-size:.72rem; color:var(--olive); letter-spacing:.18em}
.card h3{margin:.7rem 0 .5rem; font-size:1.5rem}
.cards .num{min-height:2lh; display:flex; align-items:flex-end}
.card p{font-size:.93rem; color:var(--fg-dim)}
.card ul{margin:1rem 0 0; padding-left:1.05rem; color:var(--fg-dim); font-size:.9rem; display:grid; gap:.3rem}
.card ul li::marker{color:var(--olive)}
.step{padding:1.7rem}
.step h3{margin:.8rem 0 .5rem; font-size:1.4rem}

/* card photos open a photo set */
figure[data-gal]{position:relative; cursor:zoom-in}
figure[data-gal]::after{
  content:"Fotos ansehen \2197"; position:absolute; right:.8rem; bottom:.8rem; z-index:1;
  padding:.4rem .75rem; border-radius:999px; background:rgba(8,9,11,.72); backdrop-filter:blur(4px);
  border:1px solid color-mix(in srgb,var(--olive) 45%,transparent); color:var(--olive);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}
figure[data-gal]:focus-visible{outline:2px solid var(--olive); outline-offset:-2px}

/* three buffets, wide cards */
#buffets{background:linear-gradient(180deg,var(--ink),var(--panel) 45%,var(--ink))}
.wide-cards{display:grid; gap:1.2rem}
.card-wide{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center}
.card-wide figure{aspect-ratio:16/10}
.card-wide .body{padding:2rem clamp(1.6rem,3vw,2.6rem)}
.card-wide:nth-child(even) figure{order:2}
.card-wide h3{font-size:1.8rem}
.card .price{margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem .6rem; color:var(--fg-dim); font-size:.95rem}
.card .price b{font-family:var(--f-display); font-size:1.5rem; font-weight:500; color:var(--olive)}
.card .price span{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olive); border:1px solid color-mix(in srgb,var(--olive) 45%,transparent); border-radius:999px; padding:.3rem .65rem}
.buffet-note{
  margin:2rem auto 0; padding:1.3rem 1.6rem; border-radius:14px; max-width:68ch; text-align:center;
  border:1px solid color-mix(in srgb,var(--olive) 35%,var(--line));
  background:color-mix(in srgb,var(--olive) 6%,var(--panel)); color:var(--fg-dim); font-size:.95rem; line-height:1.65;
}
.buffet-note b{display:block; font-family:var(--f-mono); font-weight:400; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); margin-bottom:.3rem}

/* photo viewer */
.lb{border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; background:rgba(5,6,8,.94); color:#F3F1E8; overflow:hidden}
.lb::backdrop{background:rgba(5,6,8,.6)}
.lb[open]{display:grid; grid-template-rows:1fr auto; place-items:center}
.lb figure{margin:0; display:grid; place-items:center; width:100%; height:100%; padding:4.2rem 4.5rem 0; box-sizing:border-box; min-height:0}
.lb img{max-width:100%; max-height:calc(100dvh - 9rem); object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{padding:1rem 1rem 1.4rem; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.04em; text-align:center; color:#d8d4c6}
.lb-cap span{color:var(--olive); margin-left:.8rem}
.lb button{
  position:absolute; width:48px; height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#F3F1E8; font-size:1.2rem; line-height:1;
  transition:border-color .2s, color .2s;
}
.lb button:hover{border-color:var(--olive); color:var(--olive)}
.lb-close{top:1rem; right:1rem}
.lb-prev{left:1rem; top:50%; margin-top:-24px}
.lb-next{right:1rem; top:50%; margin-top:-24px}
html:has(.lb[open]){overflow:hidden}

/* 3D photo coverflow of the real gallery */
#galerie{overflow:hidden}
.flow{perspective:1400px; height:430px; position:relative; margin-top:1rem}
.flow-inner{position:absolute; inset:0; transform-style:preserve-3d}
.shot{
  position:absolute; left:50%; top:50%; width:330px; height:340px; margin:-170px 0 0 -165px;
  border-radius:14px; overflow:hidden; background:var(--panel);
  border:2px solid color-mix(in srgb,var(--olive) 45%,var(--line));
  transition:transform .75s cubic-bezier(.22,.8,.24,1), opacity .75s, filter .75s, box-shadow .5s, border-color .5s;
  box-shadow:0 28px 60px rgba(0,0,0,.45), inset 0 0 0 1px color-mix(in srgb,var(--olive) 20%,transparent);
  cursor:pointer;
}
.shot.active{
  border-color:var(--olive);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 55px -10px color-mix(in srgb,var(--olive) 60%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--olive) 45%,transparent);
}
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(115deg,transparent 25%,color-mix(in srgb,var(--olive) 38%,transparent) 45%,transparent 65%);
  transform:translateX(-140%); transition:opacity .4s;
}
.shot.active::after{opacity:1; animation:shotSheen 4.5s ease-in-out infinite}
@keyframes shotSheen{0%,20%{transform:translateX(-140%)} 55%,100%{transform:translateX(140%)}}
@media (prefers-reduced-motion:reduce){.shot.active::after{animation:none; opacity:0}}
.shot img{width:100%; height:100%; object-fit:cover}
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem 1.1rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.9)); color:#F3F1E8;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.03em;
}
.car-ctrl{display:flex; gap:.6rem; justify-content:center; align-items:center; margin-top:2rem}
.car-ctrl button{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--glass); color:var(--fg); cursor:pointer; font-size:1.1rem; transition:.2s}
.car-ctrl button:hover{border-color:var(--olive); color:var(--olive)}
.car-ctrl button:active{transform:scale(.9)}
.dots{display:flex; gap:.4rem; margin-inline:.6rem; align-items:center}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:.25s}
.dots i.on{background:var(--olive); width:22px; border-radius:99px}

/* configurator */
#anfrage{background:linear-gradient(180deg,var(--ink),var(--panel-2) 50%,var(--ink))}
.conf{display:grid; grid-template-columns:1.1fr .9fr; gap:2.4rem; align-items:start}
.field{margin-bottom:1.7rem}
.field > label{display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:.75rem}
.field-lead{font-family:var(--f-display); font-size:1.15rem; color:var(--fg); margin:0 0 1rem}
.req-legend{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint)}
.req{color:var(--olive)}
.conf-reset{
  float:right; margin:0; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-faint); text-decoration:underline; text-underline-offset:3px; transition:color .18s;
}
.conf-reset:hover{color:var(--olive)}
.summary .btn-solid.is-incomplete{opacity:.55; filter:grayscale(.4); box-shadow:none}
.summary .btn-solid.is-incomplete:hover{transform:none}
.chips-more{margin-top:.5rem}
.chips-more[hidden]{display:none}
.chips-toggle{
  margin-top:.8rem; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--olive); text-decoration:underline; text-underline-offset:3px; transition:color .18s;
}
.chips-toggle:hover{color:var(--fg)}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.field-grid .text-field:last-child{grid-column:1 / -1}
.text-field{display:flex; flex-direction:column; gap:.6rem}
.text-field label{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint)}
.text-field .opt{text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:.72rem; color:var(--fg-faint); opacity:.75}
.text-field input, .text-field textarea{
  width:100%; padding:.85rem 1rem; border-radius:10px; border:1px solid var(--line);
  background:var(--glass); color:var(--fg); font:inherit; font-size:.95rem; transition:.18s; resize:vertical;
}
.text-field textarea{min-height:5.5rem}
.text-field input::placeholder, .text-field textarea::placeholder{color:var(--fg-faint)}
.text-field input:hover, .text-field textarea:hover{border-color:color-mix(in srgb,var(--olive) 50%,var(--line))}
.text-field input:focus, .text-field textarea:focus{outline:none; border-color:var(--olive); box-shadow:0 0 0 3px color-mix(in srgb,var(--olive) 22%,transparent)}
.text-field input.invalid{border-color:#c0554a; box-shadow:0 0 0 3px color-mix(in srgb,#c0554a 22%,transparent)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{display:inline-block; padding:.5rem 1rem; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:var(--glass); font-size:.9rem; transition:.18s}
.chip input:checked + span{background:var(--olive); border-color:var(--olive); color:#0A0B0D; font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--olive); outline-offset:3px}
.chip span:hover{border-color:var(--olive)}
.chip input:active + span{transform:scale(.96)}
input[type=range]{width:100%; accent-color:var(--olive)}
.guests{font-family:var(--f-display); font-size:1.7rem; color:var(--fg); font-variant-numeric:tabular-nums}
.summary{position:sticky; top:96px; border-radius:18px; padding:1.7rem; background:var(--panel); border:1px solid var(--line)}
.summary h3{font-size:1.35rem; margin-bottom:1rem}
.summary-toggle{display:none}
.summary pre{
  font-family:var(--f-mono); font-size:.78rem; line-height:1.75; color:var(--fg-dim);
  white-space:pre-wrap; margin:0 0 1.2rem; padding:1rem; border-radius:10px;
  background:var(--ink); border:1px solid var(--line); max-height:250px; overflow:auto;
}
.summary .btn{width:100%; text-align:center; display:block; margin-bottom:.6rem}
.hint{font-size:.78rem; color:var(--fg-faint); text-align:center; margin-top:.5rem}

/* contact */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:0}
.contact div{background:var(--panel); padding:1.7rem}
.contact dt{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:.5rem}
.contact dd{margin:0; font-family:var(--f-display); font-size:1.4rem}
.contact dd a{text-decoration:none; color:var(--olive)}
.contact dd small{display:block; font-family:var(--f-body); font-size:.9rem; color:var(--fg-dim)}
footer{
  position:relative; padding:3rem 0 4rem; color:var(--fg-faint); font-size:.85rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
}
footer::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--panel) 55%,transparent) 35%, var(--panel-2));
}
.legal-links{display:flex; gap:1.2rem; margin:0}
.legal-links a{color:var(--fg-faint); text-decoration:underline; text-underline-offset:3px}
.legal-links a:hover{color:var(--olive)}

/* ---------- legal pages ---------- */
.legal{padding-top:clamp(8rem,14vw,10rem); max-width:760px}
.legal-card h1{font-family:var(--f-display); font-weight:600; font-size:clamp(2rem,4.5vw,2.8rem); color:var(--olive); margin:.4rem 0 1.4rem}
.legal-card h3{font-family:var(--f-display); font-size:1.15rem; font-weight:600; margin:1.8rem 0 .5rem; color:var(--olive)}
.legal-card p{color:var(--fg-dim); font-size:.95rem; line-height:1.7; margin:0}
.legal-card a{color:var(--olive)}

/* ---------- sub-page head: own photo, title on top ---------- */
.page-head{
  min-height:min(64svh,620px); display:grid; align-items:end; padding:9rem 0 clamp(2.4rem,5vw,3.6rem);
  background:linear-gradient(90deg,rgba(10,11,13,.66) 0%,rgba(10,11,13,.22) 55%,transparent 100%), linear-gradient(180deg,rgba(10,11,13,.35) 0%,transparent 30%,transparent 62%,var(--ink) 100%), var(--bg) center/cover no-repeat;
}
/* phones: text covers the whole width, so darken evenly instead of only on the left */
@media (max-width:760px){
  .page-head{background:linear-gradient(180deg,rgba(10,11,13,.5) 0%,rgba(10,11,13,.6) 55%,var(--ink) 100%), var(--bg) center/cover no-repeat}
}
/* wide screens: 70 % screen height, so a 4:3 photo is not cut to a thin strip */
@media (min-width:1100px){
  .page-head{min-height:70svh}
}
.page-head h1{max-width:16ch}
.page-head h1, .page-head .lede{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.page-head .lede{margin-top:1.2rem; color:#d6d3c8}
.page-next{text-align:center; display:grid; justify-items:center; gap:1rem}
.page-next .cta-row{justify-content:center; margin-top:.6rem}

.link-inline{
  font:inherit; background:none; border:0; padding:0; margin:0; color:var(--olive);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}

.reveal{opacity:0; transform:translateY(30px) scale(.95); transition:opacity .6s ease, transform .7s cubic-bezier(.34,1.56,.64,1)}
.reveal.in{opacity:1; transform:none}

.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); padding:.85rem 0; position:relative; z-index:1}
.marquee-track{display:flex; width:max-content; animation:marqueeScroll 24s linear infinite}
.marquee-item{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--olive); white-space:nowrap; padding-right:3rem;
}
.marquee-item i{font-style:normal; color:var(--fg-faint); margin:0 .9rem; font-size:.7rem}
@keyframes marqueeScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

@media (max-width:1080px){
  .stage{min-height:auto; padding:9rem 0 3.5rem}
  .stage-grid{grid-template-columns:1fr; grid-template-areas:"truck" "copy" "strip"; gap:1.2rem}
  .hero-copy{grid-area:copy; max-width:none}
  .truck-col{grid-area:truck}
  .strip{grid-template-columns:1fr}
  .strip a{border-left:0; border-top:1px solid color-mix(in srgb,var(--olive) 45%,transparent); padding:1.1rem 0}
  .strip a:first-child{border-top:0}
  .conf{grid-template-columns:1fr; padding-bottom:4rem}
  .field-grid{grid-template-columns:1fr}
  .field-grid .text-field:last-child{grid-column:auto}
  .summary{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:70;
    border-radius:18px 18px 0 0; max-height:75vh; overflow:auto;
    box-shadow:0 -18px 40px -20px rgba(0,0,0,.6);
    transform:translateY(calc(100% - 54px));
    transition:transform .35s cubic-bezier(.3,.9,.3,1);
    opacity:0; pointer-events:none;
  }
  .summary.is-visible{opacity:1; pointer-events:auto}
  .summary.is-open{transform:translateY(0)}
  .summary-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:.8rem;
    position:sticky; top:0; z-index:2; width:calc(100% + 3.4rem); margin:-1.7rem -1.7rem 1rem;
    padding:1rem 1.7rem; height:54px; box-sizing:border-box;
    background:var(--panel); border:0; border-bottom:1px solid var(--line); cursor:pointer;
    font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg);
  }
  .summary-toggle .chev{color:var(--olive); font-size:.7rem; transition:transform .3s}
  .summary.is-open .summary-toggle .chev{transform:rotate(180deg)}
  header.bar{flex-wrap:wrap; row-gap:.35rem}
  .call{margin-left:auto}
  nav.links{order:3; width:100%; margin-left:0; gap:1.3rem; overflow-x:auto; scrollbar-width:none; padding:.2rem 0 .45rem}
  nav.links a{white-space:nowrap}
  .flow{height:360px}
  .shot{width:260px; height:280px; margin:-140px 0 0 -130px}
}
@media (max-width:480px){
  .logo-coin{display:none}
}
@media (max-width:640px){
  .marquee{display:none}
  .card-wide{grid-template-columns:1fr}
  .card-wide figure, .card-wide:nth-child(even) figure{order:0; aspect-ratio:4/3}
  .card-wide .body{padding:1.5rem 1.6rem 1.7rem}
  .card-wide h3{font-size:1.5rem}
  .cards .num{min-height:0}
  .lb figure{padding:4.2rem .6rem 0}
  .lb-prev, .lb-next{top:auto; bottom:.9rem; margin-top:0}
  .lb-cap{padding:1rem 4rem 1.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}