:root {
  color-scheme: dark;
  --bg: #12100c;
  --surface: #1b1812;
  --surface-2: #211d16;
  --ink: #f4efe5;
  --body: #c9c0b1;
  --muted: #918879;
  --line: #383126;
  --gold: #d8a62a;
  --gold-light: #f2ca62;
  --green: #72d5a5;
  --red: #ff8d83;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 5%, rgba(216, 166, 42, .12), transparent 34rem),
    linear-gradient(180deg, #17140e 0, var(--bg) 42rem);
}

a { color: inherit; }

.site-header,
main,
footer {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand,
.back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 750;
  letter-spacing: .09em;
}

.brand-mark { color: var(--gold); font-size: 1.45rem; margin-right: .55rem; }
.back { color: var(--body); font-size: .78rem; letter-spacing: .04em; }
.back:hover { color: var(--gold-light); }

main {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: clamp(40px, 7vw, 92px);
  align-items: start;
  padding-block: clamp(48px, 8vw, 104px);
}

.intro { position: sticky; top: 36px; }
.eyebrow,
.kicker {
  margin: 0 0 16px;
  color: var(--gold-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.3vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.lead {
  max-width: 55ch;
  margin: 28px 0 0;
  color: var(--body);
  font-size: 1.05rem;
  line-height: 1.72;
}

.steps {
  display: grid;
  gap: 12px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .045em;
}

.steps li { display: flex; gap: 14px; align-items: center; }
.steps span { color: var(--gold); font-variant-numeric: tabular-nums; }
.steps .active { color: var(--ink); }

.card {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(35, 31, 23, .98), rgba(25, 22, 17, .98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .26);
}

.card-head h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.card-head > p:last-child {
  margin: 14px 0 0;
  color: var(--body);
  line-height: 1.6;
}

form { display: grid; gap: 20px; margin-top: 30px; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: grid; gap: 9px; color: var(--body); font-size: .84rem; font-weight: 650; }
label small { color: var(--muted); font-weight: 500; }

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--surface-2);
  font: inherit;
  font-size: 1rem;
  outline: none;
}

textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
input:focus,
select:focus,
textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 166, 42, .14); }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--red); }

.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { min-height: 65px; }
.status,
.error { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .86rem; line-height: 1.45; }
.status { color: var(--body); background: rgba(255, 255, 255, .035); }
.status[data-state="ready"] { color: var(--green); }
.error { color: #ffd0cc; background: rgba(255, 80, 70, .1); border: 1px solid rgba(255, 141, 131, .3); }

button,
.secondary {
  min-height: 52px;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.primary { border: 0; color: #181208; background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.primary:disabled { cursor: wait; opacity: .48; }
.secondary { margin-top: 18px; border: 1px solid var(--gold); color: var(--gold-light); }
.privacy { margin: -2px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; text-align: center; }
.privacy a { min-height: 44px; display: inline-flex; align-items: center; color: var(--body); }

.success-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 50%;
  color: #0c251a;
  background: var(--green);
  font-size: 1.45rem;
  font-weight: 900;
}

.calendar-mount { margin: 26px -18px -18px; border-radius: 16px; overflow: hidden; background: #fff; }
.calendar-frame { display: block; width: 100%; min-width: 320px; height: 720px; border: 0; }
.calendar-fallback { margin-top: 24px; padding: 18px; color: var(--body); border: 1px solid var(--line); border-radius: 12px; }

footer {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
}

footer a { min-height: 44px; display: inline-flex; align-items: center; color: var(--body); }

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  .intro { position: static; }
  h1 { max-width: 14ch; }
}

@media (max-width: 580px) {
  .site-header, main, footer { width: min(100% - 24px, 1120px); }
  .site-header { min-height: 68px; }
  main { padding-block: 34px 56px; gap: 32px; }
  .grid-two { grid-template-columns: 1fr; }
  .card { padding: 22px 16px; border-radius: 18px; }
  .calendar-mount { margin-inline: -8px; }
  .calendar-frame { height: 760px; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 18px; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* r26: same focused booking flow, aligned with the public brand. */
@font-face{font-family:Onest;src:url('/assets/petrol-r25/assets/fonts/onest-latin.woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:Onest;src:url('/assets/petrol-r25/assets/fonts/onest-ext.woff2');font-weight:300 800;font-display:swap;unicode-range:U+0100-02FF}
:root{color-scheme:light;--bg:#fafbf8;--surface:#fff;--surface-2:#fff;--ink:#182e30;--body:#536462;--muted:#536462;--line:#c3d0c7;--gold:#145c63;--gold-light:#145c63;--green:#276348;--red:#a22e22;font-family:Onest,sans-serif}
body{background:var(--bg)}.brand{font-size:30px;letter-spacing:-1.6px;font-weight:800}.back{font-size:14px;letter-spacing:0;font-weight:500}
main{padding-block:60px;gap:60px}.intro{top:28px}h1{font-size:clamp(36px,4.2vw,55px);line-height:1.12;font-weight:550;max-width:15ch}
.card{background:#fff;border-radius:6px;box-shadow:none;padding:30px}.card-head h2{font-size:28px;font-weight:550;line-height:1.25}
.eyebrow,.kicker{font-size:14px;letter-spacing:.04em;font-weight:550}.steps{font-size:15px;letter-spacing:0;font-weight:500}.lead{font-size:17px}
label{font-size:14px;font-weight:500}input,select,textarea{border-radius:5px}.primary{background:#145c63;color:#fff}.primary:hover:not(:disabled){background:#103f44;filter:none;transform:none}button,.secondary{border-radius:5px;font-size:15px;font-weight:550}
.error{color:#90261c;background:#fff1ec;border-color:#d59c91}.privacy,.status,.error,footer{font-size:14px}.status{background:#edf4ed}.success-mark{color:white;background:#276348}
:focus-visible{outline:3px solid #1f7aff;outline-offset:4px}.skip{position:fixed;top:5px;left:5px;padding:12px;background:#fff;z-index:90;transform:translateY(-150%)}.skip:focus{transform:none}
@media(max-width:860px){main{gap:28px;padding-block:35px}.steps{grid-template-columns:repeat(3,1fr);margin-top:25px;gap:8px;font-size:14px}.steps li{display:block}.steps span{display:block;margin-bottom:5px}.intro{position:static}}
@media(max-width:580px){.card{border-radius:6px;padding:24px 18px}.site-header,main,footer{width:calc(100% - 36px)}h1{max-width:18ch}.card-head h2{font-size:25px}.lead{margin-top:20px}.calendar-frame{min-width:0}}