/* Monte Carlo site system.
   Colour, type and voice: Monte Carlo brand book (showroom theme, Italiana + Hanken Grotesk).
   Spacing 8pt scale, radii, form, badge and card patterns: awesome-design, adapted to the brand.
   Motion: transform/opacity only, strong ease-out curves, reduced-motion variants. */
:root {
  --night: #020705;
  --ground: #041a12;
  --deep: #06271c;
  --raised: #0a3425;
  --forest: #0a4632;
  --cream: #faf8f4;
  --sage: #a5c9bd;
  --subtle: #8ebcac;
  --gold: #d5ae69;
  --gold-soft: #eddec4;
  --gold-deep: #b08335;
  --control: #5f8a79;
  --danger: #f0a0ab;
  --rule: rgba(213, 174, 105, 0.22);
  --rule-soft: rgba(213, 174, 105, 0.12);
  --glass: rgba(6, 39, 28, 0.55);
  --display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gold-text: linear-gradient(100deg, #b08335 0%, #f6e8c3 38%, #d5ae69 60%, #f6e8c3 82%, #c99d4e 100%);
  --gold-fill: linear-gradient(135deg, #c99d4e 0%, #e9d4a3 42%, #d5ae69 64%, #c99d4e 100%);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --header-h: 76px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 70; background: var(--gold); color: var(--deep); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: max(56px, var(--gutter-l)); padding-right: max(56px, var(--gutter-r)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.overline { font: 600 11px/1.3 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s4); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: .005em; }
.h1 { font-size: clamp(46px, 6.4vw, 96px); line-height: 1; }
.h2 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; }
.h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.gold-text { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(17px, 1.35vw, 20px); font-weight: 300; line-height: 1.65; color: var(--sage); max-width: 56ch; margin: var(--s6) 0 0; }
.prose { color: var(--sage); font-weight: 300; max-width: 64ch; }
.prose p { margin: 0; }
.prose p + p { margin-top: var(--s4); }
.prose strong { color: var(--cream); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.note { font-size: 12px; letter-spacing: .04em; color: rgba(165, 201, 189, .72); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: 600 14px/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; background: none;
  transition: transform .2s var(--ease-out), box-shadow .2s ease, border-color .2s ease, color .2s ease, background-color .2s ease; }
.btn:active { transform: scale(.97); }
.btn-gold { background: var(--gold-fill); color: var(--deep); box-shadow: 0 0 40px rgba(213,174,105,.16), 0 0 0 1px rgba(213,174,105,.5); }
.btn-line { border-color: rgba(213,174,105,.55); color: var(--gold-soft); }
.btn-ghost { color: var(--sage); padding: 0 14px; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 0 56px rgba(213,174,105,.3), 0 0 0 1px rgba(213,174,105,.8); }
  .btn-line:hover { border-color: var(--gold); color: var(--cream); }
  .btn-ghost:hover { color: var(--cream); }
}
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }

/* ---------- header ---------- */
.site { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  padding-left: max(28px, var(--gutter-l)); padding-right: max(28px, var(--gutter-r));
  transition: background-color .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.site.solid { background: rgba(2, 7, 5, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--rule-soft); }
.brand { display: inline-flex; line-height: 0; padding: 6px 0; flex: none; }
.brand img { height: 22px; width: auto; }
.site-right { display: flex; align-items: center; gap: var(--s3); }
.menu-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px 0 14px; background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.menu-btn .bars { position: relative; width: 26px; height: 10px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .28s var(--ease-out), width .28s var(--ease-out); }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { bottom: 0; left: 8px; }
.menu-open .menu-btn .bars::before { transform: translateY(4.5px) rotate(45deg); }
.menu-open .menu-btn .bars::after { left: 0; transform: translateY(-4.5px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { color: var(--cream); } .menu-btn:hover .bars::after { left: 0; } }

/* ---------- simple menu ---------- */
.menu { position: fixed; inset: 0; z-index: 45; background: var(--night); display: grid; overflow-y: auto;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px) max(28px, var(--gutter-r)) calc(32px + env(safe-area-inset-bottom, 0px)) max(28px, var(--gutter-l));
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .28s var(--ease-out), visibility 0s; }
.menu-in { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s12); align-content: center; }
.menu-links { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-links li { border-bottom: 1px solid var(--rule-soft); }
.menu-links a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: 14px 0; text-decoration: none;
  font-family: var(--display); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; color: var(--cream); transition: color .2s ease; }
.menu-links a small { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--subtle); }
.menu-links a[aria-current="page"] { color: var(--gold-soft); }
.menu-links a[aria-current="page"] small { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .menu-links a:hover { color: var(--gold-soft); } }
.menu-links li, .menu-side > * { opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; }
.menu-open .menu-links li, .menu-open .menu-side > * { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); transition-delay: calc(var(--i, 0) * 35ms + 40ms); }
.menu-side { display: grid; gap: var(--s6); align-content: end; }
.menu-side p { margin: 0; color: var(--sage); font-weight: 300; }
.menu-side .label { font: 600 11px/1.3 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.menu-side .actions { margin-top: 0; }
html.menu-open, html.menu-open body { overflow: hidden; }
.menu-open .site { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- page head ---------- */
.page-head { position: relative; padding-top: calc(var(--header-h) + 72px); padding-bottom: var(--s12); isolation: isolate; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 var(--s8); padding: 0; font-size: 12px; letter-spacing: .08em; color: var(--subtle); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(213,174,105,.5); }
.crumbs a { text-decoration: none; color: var(--sage); }
.crumbs a:hover { color: var(--cream); }
.crumbs [aria-current] { color: var(--gold-soft); }
.hairline { height: 1px; background: linear-gradient(90deg, rgba(213,174,105,0) 0%, var(--gold) 50%, rgba(213,174,105,0) 100%); opacity: .5; border: 0; margin: 0; }
section.band { padding-block: clamp(80px, 10vw, 140px); }

/* ---------- chips and badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font: 500 12px/1.4 var(--sans); letter-spacing: .02em; white-space: nowrap; }
.chip-available { background: #e3efe9; color: #0a4632; }
.chip-reserved { background: #f6ead2; color: #8a5a00; }
.chip-example { background: rgba(250,248,244,.08); color: var(--sage); border: 1px solid var(--rule-soft); }
.chip-todo { background: #f6ead2; color: #8a5a00; }
.chip-available::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-reserved::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s6); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: var(--s2); min-width: 0; }
.field > label, .field > .label, fieldset legend { font: 600 13px/1.4 var(--sans); color: var(--cream); padding: 0; }
.field .hint { font-size: 12px; color: var(--subtle); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--control); background: rgba(10, 52, 37, .45);
  color: var(--cream); font: 400 15px/1.4 var(--sans); transition: border-color .15s ease, box-shadow .15s ease; appearance: none; -webkit-appearance: none; }
.textarea { min-height: 120px; padding: 14px 16px; resize: vertical; }
.select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { background: var(--deep); color: var(--cream); }
.input::placeholder, .textarea::placeholder { color: rgba(165, 201, 189, .55); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213, 174, 105, .22); }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--danger); }
.err { font-size: 13px; color: var(--danger); min-height: 0; }
.err:empty { display: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 24px; border: 1px solid var(--rule); background: rgba(6,39,28,.5); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; color: var(--sage); transition: background-color .15s ease, color .15s ease; white-space: nowrap; }
.seg input:checked + span { background: var(--gold-fill); color: var(--deep); font-weight: 600; }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--sage); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); flex: none; }
.success { display: grid; gap: var(--s3); padding: var(--s8); border-radius: var(--r-xl); border: 1px solid var(--rule); background: linear-gradient(160deg, rgba(15,97,69,.28), rgba(4,26,18,.6)); }
.success .mark { width: 40px; height: auto; }
.success h3 { font-size: 30px; }
.success p { margin: 0; color: var(--sage); }

/* ---------- panels ---------- */
.panel { min-width: 0; padding: var(--s8); border-radius: var(--r-xl); border: 1px solid var(--rule); background: linear-gradient(160deg, rgba(15,97,69,.22) 0%, rgba(8,52,37,.3) 42%, rgba(4,26,18,.55) 100%); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: 26px; color: var(--sage); font-weight: 300; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
.ticks strong { color: var(--cream); font-weight: 500; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); counter-reset: s; }
.steps li { counter-increment: s; padding-top: var(--s6); border-top: 1px solid var(--rule); min-width: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--display); font-size: 40px; line-height: 1; color: var(--gold); margin-bottom: var(--s4); }
.steps b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.steps span { display: block; margin-top: var(--s2); font-size: 15px; font-weight: 300; color: var(--sage); }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s4); padding: 22px 0; font-family: var(--display); font-size: clamp(22px, 2vw, 26px); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 0 0 22px; color: var(--sage); font-weight: 300; max-width: 70ch; }

/* ---------- car cards (shared) ---------- */
.car-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; background: rgba(6, 30, 22, .62); border: 1px solid var(--rule);
  transition: border-color .2s ease, transform .25s var(--ease-out), box-shadow .25s ease; }
.car-card .art { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--rule-soft); }
.car-card .art svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .5s var(--ease-out); }
.car-card .art .chips { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; }
.car-card .body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.car-card small { font: 600 11px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.car-card h3 { margin-top: 8px; font-size: 27px; line-height: 1.1; }
.car-card h3 a { text-decoration: none; }
.car-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.car-card .meta { margin: 8px 0 0; font-size: 13px; color: var(--sage); font-variant-numeric: tabular-nums; }
.car-card .specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--subtle); }
.car-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.car-card .price { font-weight: 300; font-size: 24px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cmp-toggle { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--rule); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--sage); transition: border-color .15s ease, color .15s ease, background-color .15s ease; user-select: none; }
.cmp-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); }
.cmp-toggle:has(input:checked) { border-color: var(--gold); color: var(--gold-soft); background: rgba(213,174,105,.1); }
@media (hover: hover) and (pointer: fine) {
  .car-card:hover { border-color: rgba(213,174,105,.6); transform: translateY(-3px); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
  .car-card:hover .art svg { transform: scale(1.03); }
  .cmp-toggle:hover { border-color: rgba(213,174,105,.6); color: var(--cream); }
}

/* ---------- footer ---------- */
.sfoot { position: relative; z-index: 12; border-top: 1px solid var(--rule); background: var(--night); padding-block: var(--s16) var(--s8); }
.sfoot .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.sfoot .logo { width: 210px; height: auto; }
.sfoot p { margin: var(--s4) 0 0; font-size: 14px; color: var(--sage); max-width: 34ch; font-weight: 300; }
.sfoot h2 { font: 600 11px/1.3 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 6px 0 var(--s4); }
.sfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sfoot ul a { font-size: 14px; color: var(--sage); text-decoration: none; }
.sfoot ul a:hover { color: var(--cream); }
.sfoot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--subtle); }

/* ---------- reveal: visible at rest, settles into place ---------- */
.rise { transform: translateY(16px); transition: transform 1s var(--ease-out); }
.rise.in { transform: none; }

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .wrap { padding-left: max(20px, var(--gutter-l)); padding-right: max(20px, var(--gutter-r)); }
  .site { padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
  .site .btn { display: none; }
  .brand img { height: 18px; }
  .menu-in { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s8); }
  .menu-links a { padding: 11px 0; font-size: 30px; }
  .menu-links a small { font-size: 10px; letter-spacing: .16em; }
  .page-head { padding-top: calc(var(--header-h) + 40px); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .sfoot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfoot .cols > :first-child { grid-column: 1 / -1; }
  .panel { padding: var(--s6); }
}
@media (prefers-reduced-motion: reduce) {
  .rise { transform: none; transition: none; }
  .menu-links li, .menu-side > * { transform: none !important; }
  .car-card, .car-card .art svg, .btn { transition-property: border-color, box-shadow, color, background-color; }
  .car-card:hover { transform: none; }
  .car-card:hover .art svg { transform: none; }
}

/* placeholder caption on card art, until real photographs arrive */
.car-card .art .ph { position: absolute; right: 14px; bottom: 12px; font: 500 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(165, 201, 189, .75); }

/* enquiry forms: sending error, and a field only bots fill in */
.form-error { margin: 0; color: var(--danger); font-size: 14px; }
.form-error:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.car-card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .car-card:hover .art img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .car-card:hover .art img { transform: none; } }