/* ============================================================
   SIGNAL — universal car dealer theme
   ------------------------------------------------------------
   A Swiss poster: white ground, black rules, one red. There is
   no inline navigation at any width — the whole index lives
   behind a takeover. Sections are separated by ruled bars that
   carry their own number.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --paper-2:#F3F3F1;      /* wash band            */
  --ink:#0D0D0D;
  --ink-2:#55554F;
  --ink-3:#93938C;
  --rule:#E0E0DA;
  --rule-2:#0D0D0D;       /* the heavy rule       */
  --red:#E4002B;
  --red-2:#B00021;
  --red-soft:#FFEBEF;
  --call:#0F9D58;
  --ok:#0F7A3D;
  --warn:#C4270F;

  --ff-disp:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif;
  --ff-body:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1280px;
  --gut:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

h1,h2,h3,h4{margin:0;font-family:var(--ff-disp);font-weight:700;line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.display{font-size:clamp(3rem,10vw,8.5rem);line-height:.86}
.h2{font-size:clamp(2rem,5vw,4rem)}
.h3{font-size:clamp(1.4rem,2.6vw,2.1rem)}
p{margin:0 0 1em}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.mono{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:70px 0}
.section--tight{padding:44px 0}
.wash{background:var(--paper-2)}
.dark{background:var(--ink);color:var(--paper)}
.dark .muted{color:rgba(255,255,255,.62)}
.dark .faint{color:rgba(255,255,255,.4)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ============================================================
   SCROLL PROGRESS + MASTHEAD
   ============================================================ */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:0;z-index:200;transition:width .1s linear}

.mast{
  position:sticky;top:0;z-index:90;background:var(--paper);
  border-bottom:2px solid var(--rule-2);
}
.mast__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.mast__brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.mast__brand .n{
  font-family:var(--ff-disp);font-weight:700;font-size:clamp(1.35rem,3vw,1.9rem);
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mast__brand img{max-height:38px;width:auto}
.mast__brand .s{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:none;
}
@media(min-width:860px){.mast__brand .s{display:inline}}
.mast__r{display:flex;align-items:center;gap:12px;flex:none}
.mast__tel{
  font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.06em;display:none;
}
@media(min-width:620px){.mast__tel{display:inline}}
.menu-btn{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:0;
  background:var(--red);color:#fff;cursor:pointer;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.menu-btn .bars{display:flex;flex-direction:column;gap:3px}
.menu-btn .bars i{display:block;width:16px;height:2px;background:#fff}
.menu-btn:hover{background:var(--red-2)}

/* ============================================================
   TAKEOVER INDEX  (all widths — there is no inline nav)
   ============================================================ */
.drawer{position:fixed;inset:0;z-index:180;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(13,13,13,.6);opacity:0;transition:opacity .3s}
.drawer__panel{
  position:absolute;inset:0;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;padding:20px var(--gut) 28px;
  transform:translateY(-100%);transition:transform .42s cubic-bezier(.65,0,.35,1);
  overflow:auto;
}
.drawer.open{pointer-events:auto}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.2);
}
.drawer__head .n{font-family:var(--ff-disp);font-size:1.6rem;text-transform:uppercase}
.drawer__close{
  width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:transparent;
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
}
.drawer__links{list-style:none;margin:auto 0;padding:26px 0;display:grid;gap:0;max-width:var(--wrap);width:100%}
.drawer__links li{border-bottom:1px solid rgba(255,255,255,.14)}
.drawer__links a{
  display:flex;align-items:baseline;gap:18px;padding:12px 0;
  font-family:var(--ff-disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,6.4vw,4.2rem);line-height:1;color:#fff;transition:color .18s,padding-left .18s;
}
.drawer__links a:hover{color:var(--red);padding-left:12px}
.drawer__links a.active{color:var(--red)}
.drawer__links .i{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;color:rgba(255,255,255,.42);
  flex:none;width:34px;
}
.drawer__foot{
  display:flex;gap:14px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;color:rgba(255,255,255,.7);
}
.drawer__foot a{color:#fff}

/* ============================================================
   RULE BAR  (the separator that carries a section number)
   ============================================================ */
.rulebar{
  display:flex;align-items:center;gap:14px;border-top:2px solid var(--rule-2);
  padding-top:10px;margin-bottom:28px;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
}
.rulebar .n{color:var(--red)}
.rulebar .line{flex:1;height:1px;background:var(--rule)}
.dark .rulebar{border-top-color:rgba(255,255,255,.9)}
.dark .rulebar .line{background:rgba(255,255,255,.25)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;
}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn svg{width:17px;height:17px}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red:hover{background:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--green{background:var(--call);border-color:var(--call);color:#fff}
.btn--green:hover{background:#0B7C44;border-color:#0B7C44}
.btn--sm{padding:10px 16px;font-size:.66rem}
.btn--lg{padding:18px 32px;font-size:.78rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.dark .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.dark .btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.dark .btn--ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.4)}
.dark .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--red);padding-bottom:2px;
}
.link-arrow svg{width:15px;height:15px;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-2);
}
.chip svg{width:13px;height:13px;color:var(--ink-3)}
.chip b{color:var(--ink);font-weight:500}
.dark .chip{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.72)}
.dark .chip b{color:#fff}

.flag{
  display:inline-block;padding:5px 11px;background:var(--red);color:#fff;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
}
.flag--ink{background:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:44px 0 0;border-bottom:2px solid var(--rule-2)}
.hero .display{margin:14px 0 0}
.hero .display em{font-style:normal;color:var(--red)}
.hero__lead{margin-top:22px;font-size:1.1rem;max-width:52ch;color:var(--ink-2)}
.hero__acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero__facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:40px;
  border-top:1px solid var(--rule);
}
@media(min-width:760px){.hero__facts{grid-template-columns:repeat(4,1fr)}}
.hero__facts div{padding:18px 0 22px;border-right:1px solid var(--rule)}
.hero__facts div:last-child{border-right:0}
@media(max-width:759px){.hero__facts div:nth-child(2n){border-right:0}.hero__facts div{border-bottom:1px solid var(--rule)}}
.hero__facts b{display:block;font-family:var(--ff-disp);font-size:2.6rem;line-height:1}
.hero__facts span{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* the marquee band of photographs under the hero */
.band-strip{overflow:hidden;border-top:2px solid var(--rule-2)}
.band-strip__row{display:flex;width:max-content;animation:bandslide 46s linear infinite}
.band-strip:hover .band-strip__row{animation-play-state:paused}
.band-strip__row a,.band-strip__row span{display:block;flex:none;width:300px;border-right:1px solid var(--rule)}
.band-strip__row img{width:100%;aspect-ratio:3/2;object-fit:cover}
@keyframes bandslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-strip__row{animation:none}}

/* ============================================================
   POSTER CARDS  (stock)
   ============================================================ */
.posters{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:620px){.posters{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.posters{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative;display:flex;flex-direction:column;background:var(--paper);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px;transition:background .2s;
}
.card:hover{background:var(--paper-2)}
.card__media{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s}
.card:hover .card__media img{transform:scale(1.03)}
.card__status{position:absolute;top:0;left:0;padding:5px 10px;background:var(--ink);color:#fff;
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.card__status.is-featured{background:var(--red)}
.card__count{
  position:absolute;bottom:0;right:0;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;background:rgba(13,13,13,.86);color:#fff;
  font-family:var(--ff-mono);font-size:.62rem;
}
.card__count svg{width:12px;height:12px}
.card__body{padding-top:14px;flex:1}
.card__title{font-size:1.5rem;line-height:.98}
.card__specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;margin-top:14px;border-top:1px solid var(--rule)}
.price{font-family:var(--ff-disp);font-size:1.9rem;line-height:1}
.price small{display:block;font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.price.is-call{font-size:1.15rem}

/* ============================================================
   ORDINAL LIST  (why us)
   ============================================================ */
.ordinals{display:grid;gap:0;border-top:1px solid var(--rule)}
.ordinal{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--rule);
}
@media(min-width:820px){.ordinal{grid-template-columns:120px 1fr 1.2fr;gap:34px;align-items:center}}
.ordinal .num{
  font-family:var(--ff-disp);font-size:clamp(2.6rem,7vw,4.6rem);line-height:.8;
  color:transparent;-webkit-text-stroke:2px var(--ink);
}
.ordinal:hover .num{color:var(--red);-webkit-text-stroke-color:var(--red)}
.ordinal h4{font-size:1.7rem}
.ordinal p{margin:8px 0 0;color:var(--ink-2)}
@media(min-width:820px){.ordinal p{margin:0}}

/* ============================================================
   TIMELINE  (steps)
   ============================================================ */
.timeline{position:relative;padding-left:38px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--red)}
.tl{position:relative;padding-bottom:34px}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-33px;top:4px;width:16px;height:16px;
  background:var(--paper);border:3px solid var(--red);border-radius:50%;
}
.tl .k{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.tl h4{font-size:1.55rem;margin:6px 0 8px}
.tl p{margin:0;color:var(--ink-2);max-width:60ch}
.dark .tl::before{background:var(--ink)}

/* ============================================================
   OWNERS
   ============================================================ */
.owners{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.owners{grid-template-columns:repeat(4,1fr)}}
.owner{margin:0;background:var(--paper)}
.owner img{width:100%;aspect-ratio:1/1;object-fit:cover}
.owner figcaption{padding:9px 11px;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-3)}

/* ============================================================
   QUOTES
   ============================================================ */
.quotes{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:860px){.quotes{grid-template-columns:1fr 1fr}}
.quote{padding:30px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.quote:last-child{border-right:0}
.quote p{font-family:var(--ff-disp);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.06;text-transform:none;margin:0 0 18px}
.quote__who{display:flex;align-items:center;gap:12px}
.quote__who b{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.quote__who span{font-family:var(--ff-mono);font-size:.64rem;color:var(--ink-3)}
.stars{color:var(--red);letter-spacing:2px;margin-left:auto}
.dark .quote{border-color:rgba(255,255,255,.18)}

/* ============================================================
   FORMS
   ============================================================ */
input,select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.95rem;outline:none;border-radius:0;transition:border-color .18s,box-shadow .18s;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 -3px 0 var(--red)}
textarea{resize:vertical;min-height:108px}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230D0D0D' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.dark input,.dark select,.dark textarea{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.dark input::placeholder,.dark textarea::placeholder{color:rgba(255,255,255,.42)}
.field-err{border-color:var(--warn)!important;box-shadow:inset 0 -3px 0 var(--warn)}
.form-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.form-grid .col-2{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}.form-grid .col-2{grid-column:auto}}
.form-label{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.alert{padding:13px 15px;font-size:.92rem;margin-bottom:12px;border-left:4px solid}
.alert-error{background:var(--red-soft);border-color:var(--red);color:#8C0019}
.alert-success{background:#E8F6EC;border-color:var(--ok);color:#0B5C2E}
.dark .alert-success{background:rgba(15,122,61,.2);color:#B9F0CC}
.dark .alert-error{background:rgba(228,0,43,.16);color:#FFC3CE}
.phone-wrap{display:flex;align-items:center;position:relative}
.phone-pre{position:absolute;left:13px;font-family:var(--ff-mono);font-size:.86rem;color:var(--ink-3);pointer-events:none}
.phone-wrap input{padding-left:36px}
.dark .phone-pre{color:rgba(255,255,255,.5)}

/* ============================================================
   INVENTORY
   ============================================================ */
.tabs{
  display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:2px solid var(--rule-2);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:14px 16px;white-space:nowrap;border-bottom:4px solid transparent;margin-bottom:-2px;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--red)}
.tab .c{color:var(--ink-3);margin-left:6px}
.inv-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0}
.inv-bar form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inv-bar input[type=search]{width:220px}
.inv-bar select{width:auto;padding-right:34px}
.inv-count{margin-left:auto;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pager{display:flex;gap:0;justify-content:center;margin-top:44px;border:1px solid var(--rule-2);width:max-content;margin-left:auto;margin-right:auto}
.pager a,.pager span{
  min-width:46px;height:46px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;
  border-right:1px solid var(--rule-2);font-family:var(--ff-mono);font-size:.72rem;
}
.pager a:last-child,.pager span:last-child{border-right:0}
.pager a:hover{background:var(--ink);color:var(--paper)}
.pager .on{background:var(--red);color:#fff}
.empty{text-align:center;padding:70px 24px;border:2px dashed var(--rule)}
.empty svg{width:32px;height:32px;color:var(--ink-3)}

/* ============================================================
   LOT PAGE
   ============================================================ */
.lot-mast{border-bottom:2px solid var(--rule-2);padding:26px 0 24px}
.lot-crumbs{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lot-crumbs a:hover{color:var(--red)}
.lot-mast h1{font-size:clamp(2.1rem,6vw,4.6rem);margin:14px 0 0}
.lot-mast .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.lot-mast__row{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
/* the figure belongs with the title, not buried in the sidebar */
.lot-mast__price{flex:none;text-align:left}
@media(min-width:760px){.lot-mast__price{text-align:right}}
.lot-mast__price .flag{margin-bottom:10px}
.lot-mast__price b{
  display:block;font-family:var(--ff-disp);font-weight:700;
  font-size:clamp(2.4rem,5.4vw,4rem);line-height:.9;letter-spacing:-.01em;
}
.lot-mast__price span{
  display:block;margin-top:6px;font-family:var(--ff-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* the deal bar drops in once the title scrolls away */
.dealbar{
  position:fixed;top:0;left:0;right:0;z-index:95;background:var(--ink);color:var(--paper);
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.dealbar.on{transform:none}
.dealbar__in{display:flex;align-items:center;gap:18px;height:64px}
.dealbar__t{font-family:var(--ff-disp);font-size:1.3rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dealbar__p{font-family:var(--ff-disp);font-size:1.6rem;color:var(--red);margin-left:auto;flex:none}
.dealbar__acts{display:none;gap:8px;flex:none}
@media(min-width:900px){.dealbar__acts{display:flex}}
.dealbar .btn{padding:10px 16px;font-size:.64rem}

/* gallery: one frame at a time, with a numbered strip under it.
   Photographs used to print full width down the page; at any real photo count
   that turned the top of the lot into a mile of scrolling, so the stack is now
   a frame you step through. */
.gal{padding:22px 0 0}
.gal__main{position:relative;background:var(--paper-2);border:2px solid var(--rule-2);overflow:hidden}
.gal__main img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;cursor:zoom-in}
@media(max-width:640px){.gal__main img{aspect-ratio:4/3}}
.gal__idx{
  position:absolute;top:0;right:0;padding:7px 13px;background:var(--ink);color:#fff;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;
}
.gal__zoom{
  position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;background:var(--paper);border:0;border-top:2px solid var(--rule-2);
  border-right:2px solid var(--rule-2);cursor:pointer;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
}
.gal__zoom svg{width:15px;height:15px}
.gal__zoom:hover{background:var(--ink);color:#fff}
.gallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  background:var(--paper);border:2px solid var(--rule-2);color:var(--ink);
  cursor:pointer;font-size:1.5rem;line-height:1;display:grid;place-items:center;
  transition:background .18s,color .18s;
}
.gallery__nav:hover{background:var(--red);border-color:var(--red);color:#fff}
.gallery__nav.prev{left:14px}
.gallery__nav.next{right:14px}
@media(max-width:640px){.gallery__nav{width:40px;height:40px}}

.gal__strip{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px;
}
.gal__strip::-webkit-scrollbar{display:none}
.gal__strip button{
  position:relative;flex:none;width:104px;padding:0;background:none;cursor:pointer;
  border:2px solid var(--rule);opacity:.55;transition:opacity .2s,border-color .2s;
}
@media(max-width:640px){.gal__strip button{width:78px}}
.gal__strip button img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.gal__strip button.active{opacity:1;border-color:var(--red)}
.gal__strip button:hover{opacity:1}
.gal__strip .k{
  position:absolute;top:0;left:0;padding:1px 5px;background:var(--ink);color:#fff;
  font-family:var(--ff-mono);font-size:.55rem;
}

.lot-cols{display:grid;gap:34px;padding-bottom:30px}
@media(min-width:960px){.lot-cols{grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}}
.lot-desc{color:var(--ink-2);font-size:1.02rem;line-height:1.75}
.specs{display:grid;gap:0;border-top:1px solid var(--rule)}
.specs div{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.specs dt{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);width:130px;flex:none}
.specs dd{margin:0;font-weight:600;word-break:break-word}
/* not sticky: a sticky box here detaches from the flow and rides down over the
   cards that follow it in the same column. The black deal bar already carries
   the price and the actions down the page. */
.buybox{border:2px solid var(--rule-2);padding:24px}
/* stacked on a phone the heading sits over full-width buttons, so it centres */
@media(max-width:959px){.buybox h3{text-align:center}}
.buybox__p{font-family:var(--ff-disp);font-size:clamp(2.4rem,5vw,3.4rem);line-height:.9}
.buybox__p span{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.buybox__acts{display:grid;gap:8px;margin-top:22px}
.sidebox{border:1px solid var(--rule);padding:20px;margin-top:16px}
.sidebox h4{font-size:1.25rem;margin-bottom:10px}
.sidebox p{margin:0;color:var(--ink-2);font-size:.93rem}
.ship__form{display:flex;gap:8px;margin-top:12px}
.ship__form input{flex:1}
.ship__result{margin-top:12px;padding:12px 14px;border-left:4px solid var(--red);background:var(--paper-2);font-size:.92rem}
.ship__result.is-err{border-color:var(--warn);background:var(--red-soft)}
.ship__price{font-family:var(--ff-disp);font-size:1.9rem;line-height:1}
.ship__meta{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

.lot-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;gap:0;
  padding-bottom:env(safe-area-inset-bottom);border-top:2px solid var(--rule-2);
}
.lot-bar .btn{flex:1;padding:16px 8px;border-right:1px solid rgba(255,255,255,.25)}
.lot-bar .btn:last-child{border-right:0}
@media(max-width:899px){.lot-bar{display:flex}}

/* ============================================================
   MODALS + LIGHTBOX
   ============================================================ */
.buy-modal{position:fixed;inset:0;z-index:190;display:none;align-items:center;justify-content:center;padding:16px}
.buy-modal.open{display:flex}
.buy-modal__scrim{position:absolute;inset:0;background:rgba(13,13,13,.72)}
.buy-modal__card{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--paper);border:2px solid var(--rule-2)}
.buy-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 0}
.buy-modal__close{width:40px;height:40px;border:1px solid var(--rule-2);background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;flex:none}
.buy-modal__body{padding:16px 20px 22px}
.buy-file{display:block;border:1px dashed var(--rule-2);padding:14px;cursor:pointer}
.buy-file__label{display:flex;align-items:center;gap:9px;font-size:.9rem}
.buy-file__label svg{width:16px;height:16px;color:var(--red)}
.buy-file input{display:none}
.buy-file__name{display:block;margin-top:6px;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3)}
.form-ok{display:none}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(13,13,13,.97);display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain}
.lightbox__close{position:absolute;top:16px;right:16px;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:1.5rem;cursor:pointer}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:1.6rem;cursor:pointer}
.lightbox__nav.prev{left:14px}
.lightbox__nav.next{right:14px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:2px solid var(--rule-2)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 46px 20px 0;position:relative;
  font-family:var(--ff-disp);font-size:1.5rem;text-transform:uppercase;color:var(--ink);line-height:1;
}
.faq__q::after{
  content:"";position:absolute;right:8px;top:50%;width:16px;height:2px;background:var(--red);transform:translateY(-50%);
}
.faq__q::before{
  content:"";position:absolute;right:15px;top:50%;width:2px;height:16px;background:var(--red);
  transform:translateY(-50%);transition:opacity .2s;
}
.faq__item.open .faq__q::before{opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{margin:0 0 20px;color:var(--ink-2);max-width:76ch}
.dark .faq{border-top-color:rgba(255,255,255,.9)}
.dark .faq__item{border-bottom-color:rgba(255,255,255,.16)}
.dark .faq__q{color:#fff}

/* ============================================================
   PROSE / INFO
   ============================================================ */
.prose{color:var(--ink-2);font-size:1.02rem;line-height:1.8;max-width:72ch}
.prose h2,.prose h3{color:var(--ink);margin:30px 0 10px}
.prose a{color:var(--ink);border-bottom:2px solid var(--red)}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin-bottom:8px}

.info-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.info-list li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--rule)}
.info-list .ico{width:38px;height:38px;border:1px solid var(--rule-2);display:grid;place-items:center;flex:none}
.info-list .ico svg{width:18px;height:18px}
.info-list .k{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.info-list .v{font-size:1.02rem;font-weight:600}
.map-frame{border:2px solid var(--rule-2)}
.map-frame iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(1) contrast(1.05)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--paper);padding:56px 0 26px;margin-top:0}
.foot__top{display:grid;gap:30px;grid-template-columns:1fr;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.2)}
@media(min-width:820px){.foot__top{grid-template-columns:1.5fr repeat(3,1fr)}}
.foot h4{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:rgba(255,255,255,.8);font-size:.94rem}
.foot a:hover{color:var(--red)}
.foot__name{font-family:var(--ff-disp);font-size:2.1rem;text-transform:uppercase;line-height:1}
.foot__name img{max-height:44px;width:auto}
.foot__soc{display:flex;gap:8px;margin-top:16px}
.foot__soc a{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.foot__soc a:hover{border-color:var(--red);color:var(--red)}
.foot__soc svg{width:17px;height:17px}
.foot__bot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.1em;color:rgba(255,255,255,.45);
}

.float-call{
  position:fixed;right:20px;bottom:20px;z-index:80;width:54px;height:54px;
  background:var(--call);color:#fff;display:none;place-items:center;
}
.float-call svg{width:24px;height:24px}
@media(min-width:900px){.float-call{display:grid}}

.reviews-track{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track>*{scroll-snap-align:start}
@media(min-width:860px){.reviews-track{grid-auto-columns:46%}}
.reviews-ctrl{display:flex;gap:0}
.reviews-ctrl button{width:44px;height:44px;border:1px solid var(--rule-2);background:transparent;cursor:pointer;border-right:0}
.reviews-ctrl button:last-child{border-right:1px solid var(--rule-2)}
.reviews-ctrl button:hover{background:var(--ink);color:var(--paper)}

/* ============================================================
   PHONES — headings centre over the column
   ------------------------------------------------------------
   Stacked to one column the ruled bars and section headings read
   better centred; body copy stays ranged left.
   ============================================================ */
@media(max-width:759px){
  .rulebar{justify-content:center;text-align:center}
  .rulebar .line{display:none}
  .display,.h2,.h3,.lot-mast h1,.buybox h3,.sidebox h4{text-align:center}
  .sec-head{justify-content:center;text-align:center}
  .sec-head p{margin-left:auto;margin-right:auto}
  .lot-crumbs{text-align:center}
  .lot-mast__row{justify-content:center;text-align:center}
  .lot-mast .chips{justify-content:center}
  .lot-mast__price{text-align:center;width:100%}
  .hero__facts{text-align:center}
  .hero__acts{justify-content:center}
}