/* Layout: two columns on desktop. Left = numbered booking steps, right = a
   sticky "flight strip" ticket that carries the bill and the card form.
   One column on phones, ticket last. */
:root {
  --bg: #f6f5f7;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --muted: #6e7180;
  --line: #e2e5e7;
  --accent: #d9513e;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6e2;
  --strip: #ffffff;
  --strip-ink: #1a1a1a;
  --strip-muted: #6e7180;
  --strip-line: #e2e5e7;
  --strip-field: #f6f5f7;
  --ok: #1d7a46;
  --ok-soft: #e3f3e9;
  --warn: #9a5b00;
  --warn-soft: #fdf1dc;
  --bad: #b3261e;
  --bad-soft: #fbe5e3;
  --f-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f2227; --surface: #292d33; --ink: #eef0f3; --muted: #b0b6bf; --line: #3b4048;
    --accent: #e8705f; --accent-ink: #1a0b08; --accent-soft: #4a2620;
    --strip: #2c3037; --strip-ink: #eef0f3; --strip-muted: #a8aeb7; --strip-line: #444a53; --strip-field: #363b42;
    --ok: #6fd89c; --ok-soft: #1e3d2e; --warn: #f3bf6e; --warn-soft: #45351b; --bad: #ff9a90; --bad-soft: #4a2321;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1f2227; --surface: #292d33; --ink: #eef0f3; --muted: #b0b6bf; --line: #3b4048;
  --accent: #e8705f; --accent-ink: #1a0b08; --accent-soft: #4a2620;
  --strip: #2c3037; --strip-ink: #eef0f3; --strip-muted: #a8aeb7; --strip-line: #444a53; --strip-field: #363b42;
  --ok: #6fd89c; --ok-soft: #1e3d2e; --warn: #f3bf6e; --warn-soft: #45351b; --bad: #ff9a90; --bad-soft: #4a2321;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--f-body); }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.2; text-wrap: balance; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* top bar */
.top { background: var(--strip); color: var(--strip-ink); border-bottom: 3px solid var(--accent); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { display: block; height: 56px; width: auto; }
.brand b { font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; font-size: 18px; }
.brand b i { font-style: normal; color: var(--accent); }
.brand span { font-family: var(--f-mono); font-size: 12px; color: var(--strip-muted); }
.top .help { margin-left: auto; font-size: 13px; color: var(--strip-muted); }
.top .help strong { color: var(--strip-ink); font-weight: 600; }
.demo-flag { background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.demo-flag .wrap { padding-block: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.demo-flag button { background: none; border: 1px solid currentColor; border-radius: 6px; padding: 2px 10px; color: inherit; cursor: pointer; }
.demo-flag a { color: inherit; font-weight: 600; }

/* tabs */
.tabs { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.tabs .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 14px 14px 11px; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }

/* page grid */
.page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; padding-block: 28px 64px; }
@media (max-width: 920px) { .page { grid-template-columns: minmax(0, 1fr); } }
.lead h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; }
.lead p { color: var(--muted); margin: 6px 0 0; max-width: 60ch; }
.steps { display: grid; gap: 18px; margin-top: 22px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.step.locked { opacity: .5; pointer-events: none; }
.step > header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.step > header .n { font-family: var(--f-mono); font-size: 12px; color: var(--accent); font-weight: 600; }
.step > header h2 { font-size: 17px; font-weight: 600; }
.step > header .aside { margin-left: auto; font-size: 13px; color: var(--muted); }

/* product picker */
.group-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 8px; }
.group-label:not(:first-child) { margin-top: 18px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.prod { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; }
.prod:hover { border-color: var(--muted); }
.prod[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.prod b { font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.3; }
.prod .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.prod .meta .p { color: var(--ink); font-weight: 600; }
.picked { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.picked b { font-family: var(--f-display); }
.linkbtn { background: none; border: 0; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.blurb { color: var(--muted); margin: 6px 0 0; font-size: 14px; }

/* aircraft */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.choice { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice b { font-family: var(--f-display); font-size: 15px; }
.choice small { color: var(--muted); }

/* dates & times */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day { min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 4px; text-align: center; cursor: pointer; display: grid; gap: 1px; }
.day small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.day b { font-family: var(--f-display); font-size: 18px; }
.day .c { font-size: 11px; color: var(--ok); }
.day.none { opacity: .45; }
.day.none .c { color: var(--muted); }
.day[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.datepick { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.time { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 9px 4px; cursor: pointer; font-family: var(--f-mono); font-size: 14px; }
.time[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.empty { color: var(--muted); font-size: 14px; padding: 12px 0 0; }

/* forms */
.field { display: grid; gap: 5px; min-width: 0; }
.field label, .lbl { font-size: 13px; font-weight: 600; }
.field .hint { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 10px 12px; min-width: 0; }
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pax { display: grid; gap: 10px; }
.paxrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 158px 92px; gap: 10px; align-items: center; }
.paxrow.paxhd { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: -4px; }
.paxrow .dobwrap { position: relative; display: block; min-width: 0; }
.paxrow .dobwrap .input { width: 100%; }
.paxrow .minor { position: absolute; top: -8px; right: 6px; background: var(--warn-soft); color: var(--warn); font: 700 10px/1 var(--f-display); padding: 3px 6px; border-radius: 999px; }
.paxrow .i { font-family: var(--f-mono); color: var(--muted); font-size: 13px; }
.unit { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.unit button { border: 0; background: none; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.unit button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; }
.stepper button { width: 38px; height: 38px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.stepper span { min-width: 34px; text-align: center; font-family: var(--f-mono); }
.paxhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* weight meter */
.wb { margin-top: 14px; display: grid; gap: 6px; }
.wb .bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.wb .bar i { display: block; height: 100%; background: var(--ok); border-radius: 4px; transition: width .2s; }
.wb.over .bar i { background: var(--warn); }
.wb .txt { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); gap: 8px; flex-wrap: wrap; }
.note { border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.bad { background: var(--bad-soft); color: var(--bad); }
.note.ok { background: var(--ok-soft); color: var(--ok); }
.note.info { background: var(--bg); color: var(--muted); }

.checks { display: grid; gap: 10px; margin-top: 4px; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; align-items: start; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.check small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* gift */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.giftcard { margin-top: 14px; border-radius: 12px; padding: 18px; background: linear-gradient(135deg, #d9513e, #e8806f); color: #ffffff; display: grid; gap: 14px; aspect-ratio: 1.75; max-width: 360px; max-width: 100%; width: 360px; align-content: space-between; position: relative; overflow: hidden; }
.giftcard .ring { position: absolute; right: 6px; top: 8px; width: 176px; height: 176px; max-width: none; pointer-events: none; }
.giftcard .v { font-family: var(--f-display); font-size: 32px; font-weight: 700; position: relative; z-index: 1; }
.giftcard .w { font-size: 13px; color: rgba(255, 255, 255, .88); position: relative; z-index: 1; }
.giftcard .w b { color: #ffffff; }

/* ticket */
.ticket { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); background: var(--strip); color: var(--strip-ink); border-radius: 14px; overflow: hidden; border: 1px solid var(--strip-line); border-top: 5px solid var(--accent); box-shadow: 0 6px 24px rgba(27, 29, 33, .08); }
@media (max-width: 920px) { .ticket { position: static; } }
.ticket .hd { padding: 18px 20px 14px; display: grid; gap: 10px; }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.route .code { font-family: var(--f-mono); font-size: 26px; font-weight: 600; letter-spacing: .02em; }
.route .code small { display: block; font-size: 10px; color: var(--strip-muted); letter-spacing: .08em; font-weight: 400; }
.route .path { height: 1px; border-top: 1px dashed var(--strip-muted); position: relative; }
/* A helicopter (traced from our own R44) sits on the dashed route line */
.route .path::before { content: ""; position: absolute; left: 50%; top: -8px; width: 44px; height: 16px; transform: translateX(-50%); background: var(--strip); }
.route .path::after { content: ""; position: absolute; left: 50%; top: -9px; width: 34px; height: 13px; transform: translateX(-50%); background: var(--accent);
  -webkit-mask: url("heli-icon.png") center / contain no-repeat; mask: url("heli-icon.png") center / contain no-repeat; }
.tk-title { font-family: var(--f-display); font-weight: 600; font-size: 16px; }
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.tk-grid div { min-width: 0; }
.tk-grid small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--strip-muted); }
.tk-grid span { font-family: var(--f-mono); font-size: 13px; overflow-wrap: anywhere; }
.perf { height: 18px; position: relative; }
.perf::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dotted var(--strip-muted); opacity: .5; }
.perf::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0 50%, var(--bg) 9px, transparent 10px), radial-gradient(circle at 100% 50%, var(--bg) 9px, transparent 10px); }
.bill { padding: 6px 20px 4px; display: grid; gap: 6px; font-size: 14px; }
.bill .l { display: flex; justify-content: space-between; gap: 14px; }
.bill .l span:first-child { color: var(--strip-muted); min-width: 0; }
.bill .l span:last-child { font-family: var(--f-mono); white-space: nowrap; }
.bill .tot { border-top: 1px solid var(--strip-line); padding-top: 10px; margin-top: 4px; font-size: 16px; }
.bill .tot span:first-child { color: var(--strip-ink); font-weight: 600; }
.bill .tot span:last-child { font-size: 20px; font-weight: 600; }
.bill .feeline { font-size: 12px; color: var(--strip-muted); }
.giftapply { display: flex; gap: 8px; padding: 10px 20px 0; }
.giftapply input { flex: 1; min-width: 0; background: var(--strip-field); border: 1px solid var(--strip-line); border-radius: 7px; padding: 8px 10px; color: var(--strip-ink); font-family: var(--f-mono); text-transform: uppercase; }
.giftapply button { background: none; border: 1px solid var(--strip-muted); color: var(--strip-ink); border-radius: 7px; padding: 0 12px; cursor: pointer; }
.giftmsg { padding: 6px 20px 0; font-size: 12px; color: var(--strip-muted); }
.pay { padding: 16px 20px 20px; display: grid; gap: 10px; }
.cardbox { background: #ffffff; color: #1b1d21; border: 1px solid var(--strip-line); border-radius: 9px; padding: 12px; display: grid; gap: 8px; }
.cardbox .crow { display: grid; grid-template-columns: 1fr 72px 64px; gap: 8px; }
.cardbox input { border: 1px solid #d5d8de; border-radius: 6px; padding: 9px 10px; font-family: var(--f-mono); font-size: 14px; min-width: 0; width: 100%; background: #fff; color: #1b1d21; }
.cardbox .testcards { font-size: 11px; color: #5d636d; line-height: 1.5; }
.cardbox .testcards button { background: #eef0f3; border: 0; border-radius: 4px; padding: 1px 6px; font-family: var(--f-mono); font-size: 11px; cursor: pointer; color: #1b1d21; }
#sq-card { min-height: 90px; }
.btn { border: 0; border-radius: 6px; padding: 13px 16px; font-family: var(--f-display); font-weight: 600; font-size: 15px; cursor: pointer; background: var(--accent); color: var(--accent-ink); width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: none; border: 1px solid var(--strip-muted); color: var(--strip-ink); }
.secure { font-size: 12px; color: var(--strip-muted); text-align: center; }
.confirmfee { background: var(--strip-field); border-radius: 9px; padding: 12px; font-size: 13px; display: grid; gap: 10px; }
.err { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 10px 12px; font-size: 13px; }

/* receipt */
.receipt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 16px; }
.receipt .big { font-family: var(--f-mono); font-size: 28px; font-weight: 600; color: var(--accent); }
.receipt table { width: 100%; border-collapse: collapse; font-size: 14px; }
.receipt td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.receipt td:last-child { text-align: right; font-family: var(--f-mono); }
.receipt ul { margin: 0; padding-left: 18px; color: var(--muted); }
.lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.btn2 { border: 1px solid var(--ink); background: var(--ink); color: var(--surface); border-radius: 6px; font-family: var(--f-display); padding: 0 16px; cursor: pointer; font-weight: 600; }
.qcard { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 4px; margin-top: 12px; }
.qcard .amt { font-family: var(--f-mono); font-size: 22px; font-weight: 600; }
footer.foot { color: var(--muted); font-size: 13px; padding-block: 0 40px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Website embed: the page sits inside lrhelicopters.com, so drop our own header, tabs and footer
   and let the tour page around it do that job. Same steps and ticket as the full site. */
body.embed { background: var(--surface); }
body.embed .top, body.embed .tabs, body.embed footer.foot { display: none; }
body.embed::before { display: none; }
body.embed .page { padding-block: 4px 8px; gap: 22px; }
body.embed .lead h1 { font-size: 22px; }
body.embed .ticket { position: static; }
body.embed .demo-flag .wrap a { display: none; }
body.embed .demo-flag .wrap a.exit { display: inline; }
.demo-flag a.exit { display: none; }

.customreq { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.page.solo { grid-template-columns: minmax(0, 760px); }

.biz { border-top: 1px solid var(--strip-line); padding-top: 10px; font-size: 11px; line-height: 1.5; color: var(--strip-muted); }
.biz a { color: inherit; }
.receipt .biz2 { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }

/* card-on-file consent for deposit bookings, inside the dark ticket */
.bill .storeok { margin: 8px 0 4px; font-size: 13px; color: var(--strip-ink); }
.bill .storeok small { color: var(--strip-muted); }

/* ---------- phones: everything fits the screen, nothing scrolls sideways ---------- */
@media (max-width: 640px) {
  .tabs .wrap { flex-wrap: wrap; overflow: visible; gap: 0 2px; }
  .tabs button { flex: 1 1 auto; padding: 10px 8px 8px; font-size: 13px; }
  .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .choice { padding: 10px 8px; }
  .choice b { font-size: 13px; line-height: 1.25; }
  .choice small { font-size: 11px; line-height: 1.3; }
  .choice .mono { font-size: 13px; }
  .days { gap: 4px; }
  .day { padding: 6px 1px; border-radius: 7px; }
  .day small { font-size: 10px; letter-spacing: .02em; }
  .day small + b + small { display: none; }  /* month: the weekday and date are enough */
  .day b { font-size: 16px; }
  .day .c { font-size: 10px; line-height: 1.2; }
  .day .c .o { display: none; }               /* "15 open" becomes "15" */
  .times { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .time { padding-inline: 2px; font-size: 13px; }
  .top .help { margin-left: 0; width: 100%; }
  .brand img { height: 46px; }
  .paxrow { grid-template-columns: 22px minmax(0, 1fr) 78px; }
  .paxrow .input[data-pax="name"] { grid-column: 2 / 4; }
  .paxrow .dobwrap { grid-column: 2; }
  .paxrow.paxhd { display: none; }
  .paxrow { row-gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .stepper button { min-width: 40px; min-height: 40px; }
  .check input, .chk input { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
  .day small:first-child { font-size: 9px; }
  .day .c { font-size: 9px; }
}
/* embedded on lrhelicopters.com: the parent page sizes the frame, so the frame itself never scrolls */
/* Embeds never lock scrolling: the iframe on lrhelicopters.com has scrolling="no" and grows to fit, and the page must still scroll anywhere else (previews, apps, odd browsers) */

/* aircraft photos on the aircraft choice cards */
.choice { align-content: start; }
.choice.hasphoto { padding-top: 0; overflow: hidden; }
.choice .acphoto.none { display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: .06em; color: var(--muted); background: linear-gradient(135deg, var(--bg), var(--line)); }
.choice .acphoto { display: block; width: calc(100% + 28px); height: auto; max-width: none; margin: 0 -14px 8px; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line); }
@media (max-width: 640px) {
  .choice .acphoto { width: calc(100% + 16px); margin: 0 -8px 6px; aspect-ratio: 4 / 3; }
}
footer.foot a { color: inherit; }

/* the logo has black lettering: give it a white plate on dark screens */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { background: #ffffff; border-radius: 8px; padding: 4px 8px; } }
:root[data-theme="dark"] .brand img { background: #ffffff; border-radius: 8px; padding: 4px 8px; }

/* narrow screens and tight embeds (a phone inside a padded box on the tour page): aircraft cards become rows with a small photo */
@media (max-width: 440px) {
  .choices { grid-template-columns: minmax(0, 1fr); }
  .choice.hasphoto { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px; }
  .choice.hasphoto > :not(.acphoto) { grid-column: 2; }
  .choice .acphoto { grid-column: 1; grid-row: 1 / span 4; width: 96px; margin: 0; aspect-ratio: 4 / 3; border-radius: 6px; }
  .choice .acphoto.none { font-size: 14px; }
  .choice b { font-size: 14px; }
  .choice small { font-size: 12px; }
  body.embed .wrap { padding-left: 0; padding-right: 0; }
}

/* aircraft photo gallery on the aircraft cards: photos cross-fade in place */
.acgal { position: relative; overflow: hidden; }
.acgal img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.acgal img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .acgal img { transition: none; } }

/* seasonal sale: banner, tour card tag, calendar tag */
/* Sale coupon: fixed colours so it reads the same on light and dark pages */
:root { --cp-a: #a3271c; --cp-b: #d9513e; --cp-stub: #fff4ea; --cp-stub-ink: #b3261e; --cp-ink: #ffffff; --cp-soft: #ffe1d9; --cp-hot: #121212; --cp-gold: #ffc93c; }
.coupon { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: stretch; margin: 18px 0 18px; border-radius: 14px; overflow: hidden; color: var(--cp-ink); background: linear-gradient(115deg, var(--cp-a), var(--cp-b)); box-shadow: 0 10px 24px -14px rgba(163, 39, 28, .7); }
.coupon .cp-stub { position: relative; display: grid; place-content: center; text-align: center; background: var(--cp-stub); color: var(--cp-stub-ink); border-right: 2px dashed var(--cp-b); }
.coupon .cp-stub::before, .coupon .cp-stub::after { content: ""; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.coupon .cp-stub::before { top: -8px; } .coupon .cp-stub::after { bottom: -8px; }
.coupon .cp-stub b { font: 800 40px/0.9 var(--f-display); letter-spacing: -.03em; }
.coupon .cp-stub b i { font-style: normal; font-size: 22px; vertical-align: top; margin-left: 1px; }
.coupon .cp-stub span { font: 800 14px/1 var(--f-display); letter-spacing: .28em; margin-top: 4px; padding-left: .28em; }
.coupon .cp-body { display: grid; gap: 4px; align-content: center; padding: 16px 18px; min-width: 0; }
.coupon .cp-eye { font: 700 11px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .12em; color: var(--cp-soft); }
.coupon .cp-head { font: 700 21px/1.2 var(--f-display); text-wrap: balance; }
.coupon .cp-sub { font-size: 13px; line-height: 1.45; color: var(--cp-soft); }
.coupon .cp-side { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 14px 18px; background: rgba(0, 0, 0, .16); text-align: center; min-width: 128px; }
.coupon .cp-k { font: 600 11px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: var(--cp-soft); }
.coupon .cp-big { font: 800 30px/1.05 var(--f-display); white-space: nowrap; }
.coupon .cp-timer { font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.coupon .cp-cta { margin-top: 10px; border: 0; border-radius: 999px; background: #ffffff; color: var(--cp-a); font: 700 13px/1 var(--f-display); padding: 10px 16px; cursor: pointer; white-space: nowrap; }
.coupon .cp-cta:hover { background: var(--cp-stub); }
.coupon .cp-cta:focus-visible { outline: 3px solid var(--cp-gold); outline-offset: 2px; }
.coupon .cp-left { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.coupon .cp-bar { flex: none; width: 110px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.coupon .cp-bar i { display: block; height: 100%; background: var(--cp-gold); border-radius: 99px; }
.coupon .cp-left b { color: var(--cp-gold); }
/* Black Friday style: black coupon, red stub, gold clock */
.coupon.hot { background: var(--cp-hot); box-shadow: 0 0 0 1px #3a3a3a, 0 12px 26px -14px rgba(0, 0, 0, .8); }
.coupon.hot .cp-stub { background: var(--cp-b); color: #ffffff; border-right-color: var(--cp-hot); }
.coupon.hot .cp-eye, .coupon.hot .cp-timer { color: var(--cp-gold); }
.coupon.hot .cp-sub, .coupon.hot .cp-k { color: #d9d9d9; }
.coupon.hot .cp-side { background: rgba(255, 255, 255, .06); }
.coupon.hot .cp-cta { background: var(--cp-gold); color: var(--cp-hot); }
.teaser { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border: 1.5px dashed var(--accent); border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.45; }
.teaser .tz-tag { flex: none; background: var(--cp-hot); color: var(--cp-gold); font: 700 11px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; padding: 6px 9px; border-radius: 6px; }
.teaser.done { border-style: solid; border-color: var(--line); color: var(--muted); }
.teaser + .steps, .coupon + .steps { margin-top: 16px; }
.coupon .cp-left b { white-space: nowrap; }
.coupon .cp-left { flex-wrap: wrap; }
@media (max-width: 640px) {
  .coupon { grid-template-columns: 78px minmax(0, 1fr); }
  .coupon .cp-stub { grid-row: span 2; }
  .coupon .cp-stub b { font-size: 30px; } .coupon .cp-stub b i { font-size: 16px; } .coupon .cp-stub span { font-size: 12px; }
  .coupon .cp-body { padding: 14px 14px 8px; }
  .coupon .cp-head { font-size: 18px; }
  .coupon .cp-side { grid-template-columns: auto auto auto; justify-content: start; justify-items: start; align-items: baseline; gap: 6px; padding: 8px 14px 14px; background: none; min-width: 0; text-align: left; }
  .coupon .cp-big { font-size: 20px; } .coupon .cp-timer { font-size: 18px; }
  .coupon .cp-cta { grid-column: 1 / -1; margin-top: 6px; }
  .teaser { align-items: flex-start; flex-direction: column; gap: 6px; }
  .dsale { font-size: 9px; padding: 2px 4px; right: -3px; }
}
.prod { position: relative; }
.saletag { position: absolute; top: -9px; right: 8px; background: var(--cp-a); color: #ffffff; font: 700 11px/1 var(--f-display); padding: 5px 8px; border-radius: 999px; letter-spacing: .02em; box-shadow: 0 2px 6px -2px rgba(0,0,0,.35); }
.day { position: relative; }
.dsale { position: absolute; top: -7px; right: -4px; background: var(--cp-a); color: #ffffff; font: 700 10px/1 var(--f-display); padding: 3px 5px; border-radius: 999px; }
/* Struck-through regular price next to the sale price */
.prod .p s, .choice .mono s { color: var(--muted); font-weight: 400; }
.prod .p em, .choice .mono em { font-style: normal; color: var(--accent); font-weight: 700; }
.choice small.saleon { color: var(--accent); font-weight: 600; }
/* Student pilot mission */
.mission { display: flex; gap: 14px; align-items: flex-start; margin: 16px 0 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; }
.steps + .mission { margin-top: 18px; }
.mission .ms-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.mission b { font-family: var(--f-display); font-size: 15px; }
.mission p { margin: 4px 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.mission .btn2 { height: 38px; }
.chips + .mission { margin: 0 0 14px; }


/* per-person value under the per-aircraft price */
.prod .pp { display: block; font-size: 12px; color: var(--ok); font-weight: 600; margin-top: 2px; }
.choice small.pp { color: var(--ok); font-weight: 600; }
@media (max-width: 420px) { .giftcard .ring { width: 138px; height: 138px; right: 4px; top: 6px; } }
.giftcard .ring + .w { max-width: calc(100% - 170px); }
@media (max-width: 420px) { .giftcard .ring + .w { max-width: calc(100% - 140px); } }
a.btn2.linkish { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; text-decoration: none; margin: 4px 6px 0 0; }
.coupon .cp-stub b.cp-bonus { font-size: 30px; letter-spacing: -.02em; }
@media (max-width: 640px) { .coupon .cp-stub b.cp-bonus { font-size: 20px; } }
/* Date and time: 8 days in a row, then More dates; friendly picks, then times by part of day */
.days.daystrip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.day .few { color: var(--warn); font-weight: 700; }
.day.moredays { border-style: dashed; color: var(--accent); align-content: center; }
.day.moredays b { color: var(--accent); font-size: 22px; line-height: 1; }
.day.moredays small { color: var(--accent); font-weight: 700; }
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.pick { position: relative; text-align: left; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; font: inherit; }
.pick b { font-family: var(--f-mono); font-size: 20px; font-weight: 600; }
.pick small { font-size: 12px; color: var(--muted); }
.pick .pk-tag { justify-self: start; font: 700 11px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; padding: 5px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.pick.golden .pk-tag { background: #fff1d6; color: #9a5b00; }
.pick.morning .pk-tag { background: #e3f0fb; color: #1f5f99; }
.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.pick[aria-pressed="true"] small { color: #ffffff; }
.alltimes { margin-top: 14px; display: grid; gap: 10px; }
.alltimes .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.tgroups { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); justify-self: start; max-width: 100%; }
.tg { border: 0; background: transparent; color: var(--ink); font: 600 13px var(--f-display); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.tg span { color: var(--muted); font-weight: 400; margin-left: 2px; }
.tg[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.tg[aria-selected="true"] span { color: var(--surface); opacity: .75; }
@media (max-width: 640px) {
  .days.daystrip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .days.daystrip .day { flex: 0 0 68px; scroll-snap-align: start; }
  .picks { grid-template-columns: minmax(0, 1fr); }
  .pick { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
  .pick .pk-tag { grid-column: 1 / -1; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pick.golden .pk-tag { background: #45351b; color: #f3bf6e; } :root:not([data-theme="light"]) .pick.morning .pk-tag { background: #1d3347; color: #8cc4f2; } }
:root[data-theme="dark"] .pick.golden .pk-tag { background: #45351b; color: #f3bf6e; }
:root[data-theme="dark"] .pick.morning .pk-tag { background: #1d3347; color: #8cc4f2; }
/* Peak pricing marks: whole days (holidays, summer weekends) and golden hour times */
.dpeak { position: absolute; top: -7px; right: -4px; background: #fff1d6; color: #9a5b00; border: 1px solid #f0d49a; font: 700 10px/1 var(--f-display); padding: 3px 5px; border-radius: 999px; }
.time.peak small { display: block; font-size: 10px; color: #9a5b00; font-family: var(--f-display); font-weight: 700; }
.time.peak[aria-pressed="true"] small { color: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dpeak { background: #45351b; color: #f3bf6e; border-color: #6b5226; } :root:not([data-theme="light"]) .time.peak small { color: #f3bf6e; } }
:root[data-theme="dark"] .dpeak { background: #45351b; color: #f3bf6e; border-color: #6b5226; }
:root[data-theme="dark"] .time.peak small { color: #f3bf6e; }
.teaser.deal { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.teaser.deal .tz-tag { background: var(--cp-a); color: #ffffff; }
.wbnote { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
/* Helicopter switched for weight: the time was taken, so the nearest open times pop up right there */
.switchbox { border: 2px solid var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; display: grid; gap: 10px; font-size: 14px; animation: swpop .25s ease-out; }
.switchbox small { color: var(--muted); }
.switchbox .times { margin: 0; }
@keyframes swpop { from { transform: scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .switchbox { animation: none; } }
.btn2.switchbtn { min-height: 36px; padding: 0 14px; margin: 6px 6px 6px 0; }

/* Group bookings: several helicopters, any mix of types, flying together */
.groupbox { margin-top: 14px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; font-size: 14px; }
.groupbox .legs, .groupbox .legadd { display: flex; flex-wrap: wrap; gap: 8px; }
.groupbox .leg { display: inline-flex; align-items: center; gap: 6px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 10px; }
.groupbox .leg .mono { font-family: var(--f-mono); font-size: 12px; background: var(--red, #d9513e); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-grid; place-items: center; }
.groupbox .leg small { color: var(--muted); }
.groupbox .legx { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 6px; }
.legpax { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.leghead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.leghead .sub { color: var(--muted); font-size: 13px; }
.leghead .stepper { margin-left: auto; }
.stepper.sm button { width: 34px; height: 34px; }

/* Passengers seat by seat: every seat listed, empty seats shaded */
.paxsum { font-size: 14px; }
.seathint { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.legpax.solo { border: 0; padding: 0; }
.seats { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.seats small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.seaticons { display: inline-flex; gap: 4px; }
.seat { width: 16px; height: 18px; border-radius: 5px 5px 3px 3px; border: 1.5px solid var(--line); background: transparent; display: inline-block; position: relative; }
.seat::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 3px; border-radius: 2px; background: var(--line); }
.seat.on { background: var(--red, #d9513e); border-color: var(--red, #d9513e); }
.seat.on::after { background: var(--red, #d9513e); }
.paxrow.empty .input { background: transparent; border-style: dashed; }
.paxrow.empty .i { opacity: .55; }
.paxrow.empty .input::placeholder { color: var(--muted); font-style: italic; }

/* Make it longer: extra time on a tour */
.longer { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.longer-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.longer-h span { color: var(--muted); font-size: 14px; }
.longer-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.lopt { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 3px; font: inherit; color: inherit; min-width: 0; }
.lopt b { font-size: 14px; }
.lopt .mono { font-size: 12px; color: var(--muted); }
.lopt small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lopt small em { font-style: normal; font-weight: 700; color: var(--ink); }
.lopt[aria-pressed="true"] { border-color: var(--red, #d9513e); box-shadow: 0 0 0 1px var(--red, #d9513e) inset; }

/* Charter: hours and route */
.charter { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 12px; }
.charter-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.charter-row .sub { margin: 0; font-size: 13px; color: var(--muted); flex: 1 1 240px; }
.charter .ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.charter textarea { width: 100%; resize: vertical; }
.charter .hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* Grow a Pilot */
.chip.grow[aria-pressed="false"] { border-color: var(--red, #d9513e); color: var(--red, #d9513e); }
.growhero { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #1f2227, #3a3f47); color: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.growhero > div:first-child { flex: 1 1 280px; min-width: 0; }
.growhero .eyebrow, .growdone .eyebrow { display: inline-block; font: 700 11px/1 var(--f-head, 'Poppins', sans-serif); letter-spacing: .18em; text-transform: uppercase; background: var(--red, #d9513e); color: #fff; padding: 5px 9px; border-radius: 999px; margin-bottom: 8px; }
.growhero b { display: block; font: 700 20px/1.25 var(--f-head, 'Poppins', sans-serif); }
.growhero p { margin: 6px 0 0; font-size: 14px; color: #d8dbe0; max-width: 52ch; }
.hrsbig { text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 12px 18px; min-width: 150px; }
.hrsbig span { display: block; font: 800 30px/1.1 var(--f-head, 'Poppins', sans-serif); }
.hrsbig small { color: #d8dbe0; font-size: 12px; }
.chip.hrchip { display: inline-grid; text-align: center; line-height: 1.2; padding: 8px 16px; }
.chip.hrchip span { font-weight: 500; font-size: 12px; opacity: .8; }
.stucards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.stucard { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; grid-template-columns: 36px 1fr; gap: 2px 10px; font: inherit; color: inherit; min-width: 0; }
.stucard .av { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: 700; }
.stucard.fund .av { background: var(--red, #d9513e); color: #fff; }
.stucard small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.stucard[aria-pressed="true"] { border-color: var(--red, #d9513e); box-shadow: 0 0 0 1px var(--red, #d9513e) inset; }
.giftcard.grow { background: linear-gradient(150deg, #1f2227, #3a3f47); }
.btn2.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.growdone h2 { margin: 4px 0 6px; }
.stucard { grid-template-rows: auto 1fr; align-content: start; align-items: start; }
.stucard b { align-self: center; }
.lostcard { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.lostcard b { color: var(--ink); }