/* ====== Cinzel – local font ====== */

@font-face {

  font-family: "CinzelLocal";

  src: url("../fonts/Cinzel-Regular.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "CinzelLocal";

  src: url("../fonts/Cinzel-Medium.ttf") format("truetype");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "CinzelLocal";

  src: url("../fonts/Cinzel-SemiBold.ttf") format("truetype");

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "CinzelLocal";

  src: url("../fonts/Cinzel-Bold.ttf") format("truetype");

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "CinzelLocal";

  src: url("../fonts/Cinzel-ExtraBold.ttf") format("truetype");

  font-weight: 800;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "CinzelLocal";

  src: url("../fonts/Cinzel-Black.ttf") format("truetype");

  font-weight: 900;

  font-style: normal;

  font-display: swap;

}



:root{

  --bg: #111111;

  --bg2:#0B0B0B;

  --paper:#E8DCC6;

  --muted:#B9B0A3;

  --amber:#D6A756;

  --amber2:#B8893E;

  --line: rgba(232,220,198,.16);

  --line2: rgba(232,220,198,.10);

  --shadow: 0 18px 60px rgba(0,0,0,.55);

  --radius: 18px;

  --radius2: 26px;

  --fontTitle: "CinzelLocal", Georgia, "Times New Roman", serif;

  --fontBody: Arial, sans-serif;

}



*{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }

body{

  font-family: var(--fontBody);

  background: var(--bg);

  color: var(--paper);

  line-height: 1.55;

}



a{ color: inherit; text-decoration: none; }

code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }



.container{

  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

}



.no-scroll{ overflow: hidden; }



/* Topbar */

.topbar{

  background: linear-gradient(90deg, rgba(214,167,86,.12), rgba(214,167,86,0));

  border-bottom: 1px solid var(--line2);

}

.topbar__inner{

  display:flex;

  align-items:center;

  gap:10px;

  padding: 10px 0;

  color: rgba(232,220,198,.85);

  font-size: 13px;

}

.topbar__tag{ letter-spacing: .08em; text-transform: uppercase; }

.topbar__sep{ opacity:.45; }

.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.topbar__link{

  color: rgba(232,220,198,.9);

  border-bottom: 1px solid transparent;

}

.topbar__link:hover{ border-bottom-color: rgba(214,167,86,.6); color: var(--paper); }



/* Header */

.header{

  position: sticky;

  top: 0;

  z-index: 20;

  backdrop-filter: blur(10px);

  background: rgba(17,17,17,.82);

  border-bottom: 1px solid var(--line2);

}

.header__inner{

  display:flex;

  align-items:center;

  gap: 18px;

  padding: 14px 0;

}

.logo{ display:flex; flex-direction:column; gap:2px; }

.logo__name{

  font-family: var(--fontTitle);

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  font-size: 18px;

}

.logo__payoff{

  font-size: 12px;

  color: rgba(232,220,198,.78);

  letter-spacing: .12em;

  text-transform: uppercase;

}



.nav{

  margin-left: 18px;

  display:flex;

  gap: 14px;

  flex-wrap: wrap;

}

.nav__link{

  font-size: 13px;

  color: rgba(232,220,198,.85);

  padding: 8px 10px;

  border-radius: 999px;

  border: 1px solid transparent;

}

.nav__link:hover{

  color: var(--paper);

  border-color: rgba(214,167,86,.35);

  background: rgba(214,167,86,.06);

}



.header__cta{

  margin-left:auto;

  display:flex;

  gap: 10px;

  align-items:center;

}



/* Buttons */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap: 10px;

  padding: 10px 14px;

  border-radius: 999px;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .02em;

  border: 1px solid transparent;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;

  user-select:none;

}

.btn:active{ transform: translateY(1px); }

.btn--primary{

  background: linear-gradient(180deg, var(--amber), var(--amber2));

  color: #1a1408;

  box-shadow: 0 12px 26px rgba(214,167,86,.18);

}

.btn--primary:hover{ filter: brightness(1.03); }

.btn--ghost{

  background: rgba(232,220,198,.03);

  border-color: rgba(232,220,198,.22);

  color: var(--paper);

}

.btn--ghost:hover{

  border-color: rgba(214,167,86,.45);

  background: rgba(214,167,86,.06);

}

.btn--full{ width: 100%; }



/* Burger */

.burger{

  display:none;

  margin-left:auto;

  width: 42px;

  height: 38px;

  border-radius: 12px;

  border: 1px solid rgba(232,220,198,.18);

  background: rgba(232,220,198,.03);

  cursor:pointer;

}

.burger span{

  display:block;

  width: 18px;

  height: 2px;

  background: rgba(232,220,198,.85);

  margin: 4px auto;

  border-radius: 2px;

}



/* Drawer */

.drawer{

  position: fixed;

  inset: 0;

  z-index: 40;

  display:none;

}

.drawer.is-open{ display:block; }

.drawer__backdrop{

  position:absolute; inset:0;

  background: rgba(0,0,0,.55);

}

.drawer__panel{

  position:absolute;

  top: 0; right: 0;

  width: min(420px, 92vw);

  height: 100%;

  background: linear-gradient(180deg, rgba(17,17,17,.98), rgba(11,11,11,.98));

  border-left: 1px solid rgba(232,220,198,.15);

  box-shadow: var(--shadow);

  padding: 18px;

  display:flex;

  flex-direction:column;

  gap: 14px;

}

.drawer__head{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap: 12px;

}

.drawer__brand{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .08em;

  font-weight: 700;

}

.drawer__payoff{

  font-size: 12px;

  opacity:.78;

  letter-spacing: .12em;

  text-transform: uppercase;

}

.drawer__close{

  width: 40px; height: 40px;

  border-radius: 12px;

  border: 1px solid rgba(232,220,198,.18);

  background: rgba(232,220,198,.03);

  color: var(--paper);

  cursor:pointer;

}

.drawer__links{

  display:flex;

  flex-direction:column;

  border-top: 1px solid var(--line2);

  border-bottom: 1px solid var(--line2);

  padding: 10px 0;

}

.drawer__links a{

  padding: 12px 10px;

  border-radius: 12px;

  color: rgba(232,220,198,.92);

}

.drawer__links a:hover{ background: rgba(214,167,86,.06); }

.drawer__actions{ margin-top:auto; display:flex; flex-direction:column; gap: 10px; }



/* Hero */

.hero{

  position: relative;

  overflow: hidden;

  border-bottom: 1px solid var(--line2);

}

.hero__bg{

  position:absolute; inset:0;

  background:

    radial-gradient(1200px 700px at 15% 15%, rgba(214,167,86,.16), transparent 60%),

    radial-gradient(900px 540px at 80% 40%, rgba(232,220,198,.10), transparent 62%),

    linear-gradient(180deg, rgba(11,11,11,.78), rgba(17,17,17,1));

  pointer-events:none;

}

.hero__bg::after{

  content:"";

  position:absolute; inset:-30%;

  background-image:

    linear-gradient(0deg, rgba(232,220,198,.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(232,220,198,.02) 1px, transparent 1px);

  background-size: 40px 40px;

  transform: rotate(6deg);

  opacity:.35;

}

.hero__inner{

  position: relative;

  padding: 58px 0 44px;

  display:grid;

  grid-template-columns: 1.1fr .9fr;

  gap: 22px;

  align-items: start;

}

.kicker{

  display:inline-flex;

  align-items:center;

  gap:10px;

  font-size: 12px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(232,220,198,.82);

  border-left: 3px solid rgba(214,167,86,.65);

  padding-left: 12px;

}

.hero__title{

  margin: 14px 0 10px;

  font-family: var(--fontTitle);

}

.hero__titleMain{

  display:block;

  font-size: clamp(34px, 4vw, 58px);

  letter-spacing: .10em;

  text-transform: uppercase;

  font-weight: 700;

}

.hero__titleSub{

  display:block;

  margin-top: 6px;

  font-size: clamp(14px, 1.4vw, 18px);

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(214,167,86,.92);

  font-weight: 700;

}

.hero__lead{

  margin: 0 0 18px;

  color: rgba(232,220,198,.88);

  font-size: 15px;

  max-width: 54ch;

}

.hero__actions{

  display:flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 16px;

}

.hero__badges{

  display:flex;

  gap: 10px;

  flex-wrap: wrap;

}

.badge{

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(232,220,198,.03);

  border: 1px solid rgba(232,220,198,.16);

  color: rgba(232,220,198,.9);

  font-size: 13px;

}



/* Hero card */

.hero__card{

  border-radius: var(--radius2);

  background: linear-gradient(180deg, rgba(11,11,11,.86), rgba(11,11,11,.64));

  border: 1px solid rgba(232,220,198,.16);

  box-shadow: var(--shadow);

  padding: 18px;

}

.heroCard__title{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .14em;

  font-size: 12px;

  color: rgba(232,220,198,.82);

  margin-bottom: 12px;

}

.heroCard__item{

  display:flex;

  gap: 10px;

  align-items:flex-start;

  padding: 10px 8px;

  border-radius: 14px;

}

.heroCard__item:hover{ background: rgba(214,167,86,.05); }

.dot{

  width: 9px; height: 9px;

  border-radius: 99px;

  background: rgba(214,167,86,.9);

  margin-top: 6px;

  box-shadow: 0 0 0 4px rgba(214,167,86,.12);

}

.heroCard__label{

  font-size: 12px;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: rgba(232,220,198,.72);

}

.heroCard__value{

  font-size: 14px;

  color: rgba(232,220,198,.92);

}

.heroCard__cta{

  display:block;

  margin-top: 10px;

  padding: 12px 12px;

  border-radius: 14px;

  background: rgba(214,167,86,.10);

  border: 1px solid rgba(214,167,86,.25);

  color: var(--paper);

  font-weight: 700;

  letter-spacing: .02em;

}

.heroCard__cta:hover{ background: rgba(214,167,86,.14); }



/* Sections */

.section{

  padding: 56px 0;

}

.section--alt{

  background: linear-gradient(180deg, rgba(11,11,11,.55), rgba(17,17,17,0));

  border-top: 1px solid var(--line2);

  border-bottom: 1px solid var(--line2);

}

.section__head{

  margin-bottom: 18px;

  display:grid;

  gap: 8px;

}

.h2{

  margin:0;

  font-family: var(--fontTitle);

  letter-spacing: .08em;

  text-transform: uppercase;

  font-size: clamp(22px, 2.3vw, 30px);

}

.h3{

  margin: 0 0 8px;

  font-family: var(--fontTitle);

  letter-spacing: .06em;

  text-transform: uppercase;

  font-size: 20px;

}

.muted{ color: rgba(232,220,198,.78); }



.grid3{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

}

.card{

  border-radius: var(--radius);

  padding: 18px;

  background: rgba(11,11,11,.55);

  border: 1px solid rgba(232,220,198,.14);

}

.card__k{

  font-size: 12px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(214,167,86,.9);

  margin-bottom: 8px;

}

.card__t{

  font-weight: 800;

  letter-spacing: .02em;

  margin-bottom: 6px;

}

.card__p{ color: rgba(232,220,198,.78); font-size: 14px; }



.split{

  display:grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 18px;

  align-items: start;

}



/* List */

.list{

  margin-top: 14px;

  display:flex;

  flex-direction:column;

  gap: 12px;

}

.list__item{

  display:flex;

  gap: 12px;

  padding: 14px;

  border-radius: var(--radius);

  border: 1px solid rgba(232,220,198,.14);

  background: rgba(11,11,11,.45);

}

.list__icon{

  width: 42px; height: 42px;

  border-radius: 14px;

  display:flex;

  align-items:center;

  justify-content:center;

  background: rgba(214,167,86,.12);

  border: 1px solid rgba(214,167,86,.22);

  color: var(--paper);

}

.list__title{ font-weight: 800; margin-bottom: 2px; }

.list__text{ color: rgba(232,220,198,.78); font-size: 14px; }



.callout{

  margin-top: 14px;

  padding: 14px;

  border-radius: var(--radius);

  border: 1px solid rgba(214,167,86,.22);

  background: rgba(214,167,86,.08);

  color: rgba(232,220,198,.92);

}



/* Photo */

.photo__frame{

  border-radius: var(--radius2);

  border: 1px solid rgba(232,220,198,.16);

  background: rgba(11,11,11,.55);

  box-shadow: var(--shadow);

  overflow:hidden;

  min-height: 360px;

  position: relative;

}

.photo__frame img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display:block;

}

.photo__fallback{

  position:absolute; inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap: 8px;

  padding: 18px;

  text-align:center;

}

.photo__fallbackTitle{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .14em;

  opacity:.9;

}

.photo__fallbackText{

  color: rgba(232,220,198,.72);

}

.photo__frame img{

  filter: contrast(1.08) saturate(0.9) sepia(0.22);

}

.photo__frame::after{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(circle at top right,

      rgba(212,175,55,.18),

      rgba(0,0,0,.55) 65%);

  pointer-events:none;

}



/* Motomonth */

.motomonth{

  display:grid;

  grid-template-columns: .95fr 1.05fr;

  gap: 16px;

  align-items: stretch;

}

.mm__media{

  border-radius: var(--radius2);

  border: 1px solid rgba(232,220,198,.16);

  background: rgba(11,11,11,.55);

  box-shadow: var(--shadow);

  overflow:hidden;

  min-height: 360px;

  position: relative;

}

.mm__media img{

  width:100%;

  height:100%;

  object-fit: cover;

  display:block;

}

.mm__fallback{

  position:absolute; inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap: 8px;

  padding: 18px;

  text-align:center;

}

.mm__fallbackTitle{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .14em;

  opacity:.9;

}

.mm__fallbackText{ color: rgba(232,220,198,.72); }

.mm__content{

  border-radius: var(--radius2);

  border: 1px solid rgba(232,220,198,.16);

  background: rgba(11,11,11,.45);

  padding: 18px;

}

.mm__badge{

  display:inline-flex;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(214,167,86,.10);

  border: 1px solid rgba(214,167,86,.22);

  color: rgba(232,220,198,.92);

  font-size: 12px;

  letter-spacing: .14em;

  text-transform: uppercase;

  margin-bottom: 12px;

}

.mm__rules{

  display:grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin: 14px 0;

}

.rule{

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid rgba(232,220,198,.14);

  background: rgba(11,11,11,.55);

  color: rgba(232,220,198,.86);

  display:flex;

  gap: 10px;

  align-items:center;

}

.mm__actions{

  display:flex;

  gap: 10px;

  flex-wrap: wrap;

}



/* Prices */

.price{

  border-radius: var(--radius2);

  border: 1px solid rgba(232,220,198,.16);

  background: rgba(11,11,11,.55);

  padding: 18px;

  position: relative;

  overflow:hidden;

}

.price--featured{

  border-color: rgba(214,167,86,.35);

  box-shadow: 0 18px 50px rgba(214,167,86,.10);

}

.price__name{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .10em;

  font-weight: 700;

}

.price__desc{

  color: rgba(232,220,198,.76);

  margin-top: 6px;

  font-size: 14px;

}

.price__row{

  margin-top: 12px;

  display:flex;

  align-items:flex-end;

  gap: 6px;

}

.price__euro{ color: rgba(214,167,86,.9); font-weight: 800; }

.price__val{ font-size: 34px; font-weight: 900; letter-spacing: .02em; }

.price__hint{

  position:absolute;

  top: 14px; right: 14px;

  padding: 8px 10px;

  border-radius: 999px;

  background: rgba(214,167,86,.10);

  border: 1px solid rgba(214,167,86,.22);

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;

}



/* Contact */

.contact{

  display:grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 14px;

}

.contact__card{

  border-radius: var(--radius2);

  border: 1px solid rgba(232,220,198,.16);

  background: rgba(11,11,11,.55);

  padding: 18px;

}

.contact__k{

  font-size: 12px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(214,167,86,.9);

  margin-bottom: 6px;

}

.contact__v{ margin-bottom: 6px; }

.mt{ margin-top: 14px; }



.link{

  border-bottom: 1px solid rgba(214,167,86,.35);

}

.link:hover{ border-bottom-color: rgba(214,167,86,.75); }



.sep{ opacity:.45; margin: 0 8px; }



.quote{

  margin-top: 16px;

  padding-top: 14px;

  border-top: 1px solid var(--line2);

  color: rgba(232,220,198,.78);

  font-style: italic;

}



.contact__map{

  border-radius: var(--radius2);

  border: 1px solid rgba(232,220,198,.16);

  background: rgba(11,11,11,.45);

  overflow:hidden;

  min-height: 320px;

  position: relative;

}

.map__placeholder{

  position:absolute; inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap: 8px;

  padding: 18px;

  text-align:center;

}

.map__title{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .14em;

}

.map__text{ color: rgba(232,220,198,.72); }



/* Footer */

.footer{

  border-top: 1px solid var(--line2);

  padding: 22px 0;

  background: rgba(11,11,11,.55);

}

.footer__inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 14px;

  flex-wrap: wrap;

}

.footer__brand{

  font-family: var(--fontTitle);

  text-transform: uppercase;

  letter-spacing: .10em;

  font-weight: 700;

}

.footer__payoff{

  margin-top: 4px;

  color: rgba(232,220,198,.72);

  font-size: 13px;

}

.footer__right{

  display:flex;

  gap: 14px;

}

.footer__right a{

  color: rgba(232,220,198,.82);

  border-bottom: 1px solid transparent;

}

.footer__right a:hover{ border-bottom-color: rgba(214,167,86,.55); }



/* Responsive */

@media (max-width: 980px){

  .nav{ display:none; }

  .header__cta{ display:none; }

  .burger{ display:block; }

  .hero__inner{ grid-template-columns: 1fr; }

  .grid3{ grid-template-columns: 1fr; }

  .split{ grid-template-columns: 1fr; }

  .motomonth{ grid-template-columns: 1fr; }

  .mm__rules{ grid-template-columns: 1fr; }

  .contact{ grid-template-columns: 1fr; }

  .photo__frame, .mm__media{ min-height: 280px; }

}



.hero__inner{

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 28px;

  align-items: start;

}



.hero__media{

  display: flex;

  justify-content: flex-end;

}



.hero__card--inline{

  margin-top: 18px;

}



@media (max-width: 980px){

  .hero__inner{

    grid-template-columns: 1fr;

  }

  .hero__media{

    justify-content: center;

  }

}

.drawer__backdrop{ z-index: 0; }
.drawer__panel{ z-index: 1; }