:root {
  color-scheme: light dark;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --font:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-editorial:Georgia,"Times New Roman",serif;
  --text-display:600 3.5rem/1.08 var(--font);
  --text-title:600 2rem/1.16 var(--font);
  --text-headline:600 1.125rem/1.35 var(--font);
  --text-body:400 1.0625rem/1.5 var(--font);
  --text-callout:400 1rem/1.5 var(--font);
  --text-subhead:500 1rem/1.4 var(--font);
  --text-caption:400 .8125rem/1.45 var(--font);
  --color-bg:#ffffff; --color-surface:#ffffff; --color-text:#153a3b; --color-secondary:#526668; --color-fill:#eef4f3; --color-border:#6d8088;
  --color-accent:#11605e; --color-accent-hover:#0c4b49; --color-accent-text:#ffffff; --color-focus:#006d87; --color-error:#b1263b;
  --color-backdrop:#10252f99; --color-shadow:#10252f26; --color-image-bg:#dbe6e1;
  --radius-control:12px; --radius-image:24px; --radius-dialog:24px;
  --spring-control:linear(0,.3 9%,.7 18%,.95 27%,1.03 36%,1.01 50%,1);
  --duration-control:160ms;
  --page-margin:var(--space-8); --page-width:1200px;
}
body[data-variant="2"] { --color-bg:#eef3ef; --color-text:#163e31; --color-secondary:#476257; --color-fill:#e0e9e2; --color-accent:#224f40; --color-accent-hover:#163e31; --text-display:400 3.75rem/1.08 var(--font-editorial); }
body[data-variant="3"] { --color-bg:#10252f; --color-surface:#16333f; --color-text:#f6fafb; --color-secondary:#c1d3da; --color-fill:#24434e; --color-border:#7a919b; --color-accent:#ffffff; --color-accent-hover:#deebf0; --color-accent-text:#15313c; --color-focus:#ffffff; --color-error:#ff9cae; --text-display:600 3.25rem/1.08 var(--font); }
body[data-variant="4"] { --color-bg:#f2f6fa; --color-text:#152e4b; --color-secondary:#50647b; --color-fill:#e5edf7; --color-accent:#204c88; --color-accent-hover:#163c70; }
body[data-variant="5"] { --color-bg:#ffffff; --color-text:#182f53; --color-secondary:#52637b; --color-fill:#ecf0f7; --color-accent:#1e497e; --color-accent-hover:#15365f; --text-display:400 4.25rem/1.08 var(--font-editorial); }
@media(prefers-color-scheme:dark) {
  :root { --color-bg:#0e2124; --color-surface:#182c30; --color-text:#f0f7f8; --color-secondary:#b2cbd0; --color-fill:#233c41; --color-border:#7a919b; --color-accent:#a3dddb; --color-accent-hover:#c5efed; --color-accent-text:#153738; --color-focus:#a3dddb; --color-error:#ff9cae; --color-backdrop:#000000b3; --color-shadow:#00000066; --color-image-bg:#233c41; }
  body[data-variant="2"] { --color-bg:#14251c; --color-surface:#1b3023; --color-text:#f2f7ef; --color-secondary:#c2d1be; --color-fill:#21382a; --color-border:#7a919b; --color-accent:#c9e2bb; --color-accent-hover:#e0f0d6; --color-accent-text:#203a1d; }
  body[data-variant="3"] { --color-bg:#10252f; --color-surface:#16333f; --color-text:#f6fafb; --color-secondary:#c1d3da; --color-fill:#24434e; --color-border:#7a919b; --color-accent:#ffffff; --color-accent-hover:#deebf0; --color-accent-text:#15313c; --color-focus:#ffffff; --color-error:#ff9cae; }
  body[data-variant="4"] { --color-bg:#102036; --color-surface:#162b45; --color-text:#f1f6fd; --color-secondary:#b4c9e4; --color-fill:#1b3455; --color-border:#7a919b; --color-accent:#b7d3fb; --color-accent-hover:#d8e8ff; --color-accent-text:#12305c; }
  body[data-variant="5"] { --color-bg:#132034; --color-surface:#1a2e48; --color-text:#f1f4fa; --color-secondary:#c0cce0; --color-fill:#203552; --color-border:#7a919b; --color-accent:#c1d1f0; --color-accent-hover:#dee8fc; --color-accent-text:#18315c; }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-height:100svh; padding-bottom:calc(var(--space-24) + env(safe-area-inset-bottom)); background:var(--color-bg); color:var(--color-text); font:var(--text-body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure,fieldset { margin:0; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--color-focus); outline-offset:var(--space-1); }
svg { width:20px; height:20px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.content { width:min(var(--page-width),calc(100% - 2*var(--page-margin))); margin-inline:auto; }
.skip-link { position:fixed; inset-block-start:-100%; inset-inline-start:var(--space-4); padding:var(--space-3); z-index:20; background:var(--color-surface); color:var(--color-text); }
.skip-link:focus { inset-block-start:var(--space-4); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding-block:var(--space-6); }
.service-label { font:var(--text-headline); letter-spacing:-.02em; }
.action { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:48px; min-width:44px; padding:var(--space-3) var(--space-6); border:1px solid transparent; border-radius:999px; font:var(--text-subhead); font-weight:600; text-decoration:none; background:transparent; color:var(--color-text); transition:transform var(--duration-control) var(--spring-control),background var(--duration-control),color var(--duration-control); }
.action:active { transform:scale(.98); }
.primary-action { background:var(--color-accent); color:var(--color-accent-text); padding-inline:var(--space-8); }
.call-action { background:var(--color-fill); color:var(--color-text); }
.quiet-action { color:var(--color-secondary); padding-inline:var(--space-3); }
.hero { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-12); align-items:center; min-height:calc(100svh - 256px); padding-block:var(--space-10) var(--space-12); }
.hero-copy h1 { font:var(--text-display); letter-spacing:-.045em; max-width:17ch; text-wrap:balance; }
.hero-description { margin-top:var(--space-6); color:var(--color-secondary); font:var(--text-body); max-width:40ch; }
.cta-group { margin-top:var(--space-8); }
.cta-group .primary-action { min-height:52px; }
.cta-help { font:var(--text-caption); color:var(--color-secondary); max-width:35ch; margin-top:var(--space-3); }
.experience { margin-top:var(--space-6); color:var(--color-secondary); font:var(--text-caption); max-width:42ch; }
.experience,.site-footer,.preview-label,.step-count,.version-nav { letter-spacing:.01em; }
.selling-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); margin-block-end:0; padding:0; list-style:none; }
.selling-points li { display:grid; justify-items:start; align-content:start; gap:var(--space-2); min-width:0; font-weight:500; }
.selling-points svg { width:var(--space-6); height:var(--space-6); color:var(--color-text); }
.selling-points span { overflow-wrap:anywhere; }
body[data-variant="2"] .selling-points li { justify-items:center; }
@media(max-width:480px) { .selling-points { gap:var(--space-2); } }
.hero-visual { margin:0; aspect-ratio:3/2; border-radius:var(--radius-image); overflow:hidden; background:var(--color-image-bg); }
.hero-visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:44% center; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding-block:var(--space-2); font:var(--text-caption); color:var(--color-secondary); }
.site-footer .action { font:var(--text-caption); }
.noscript { padding-block:var(--space-4); font:var(--text-callout); }
body[data-variant="2"] .hero { grid-template-columns:1fr; justify-items:center; gap:var(--space-10); padding-top:var(--space-4); }
body[data-variant="2"] .hero-copy { text-align:center; max-width:800px; }
body[data-variant="2"] .hero-copy h1 { max-width:22ch; margin-inline:auto; letter-spacing:-.045em; }
body[data-variant="2"] .hero-description,body[data-variant="2"] .cta-help,body[data-variant="2"] .experience { margin-inline:auto; }
body[data-variant="2"] .hero-description { max-width:62ch; }
body[data-variant="2"] .cta-group { margin-top:var(--space-6); }
body[data-variant="2"] .experience { margin-top:var(--space-4); }
body[data-variant="2"] .hero-visual { width:min(100%,920px); aspect-ratio:2/1; }
body[data-variant="3"] .hero { position:relative; min-height:640px; border-radius:var(--radius-image); overflow:hidden; padding:var(--space-8); grid-template-columns:1fr minmax(0,400px); margin-block:var(--space-4) var(--space-6); }
body[data-variant="3"] .hero-visual { position:absolute; inset:0; aspect-ratio:auto; border-radius:0; }
body[data-variant="3"] .hero-visual img { object-position:35% center; }
body[data-variant="3"] .hero-copy { grid-column:2; position:relative; z-index:1; padding:var(--space-8); background:var(--color-surface); border-radius:var(--radius-image); }
body[data-variant="3"] .hero-copy h1 { font-size:2.75rem; max-width:15ch; }
body[data-variant="3"] .hero-description { font:var(--text-callout); }
body[data-variant="4"] .hero { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--space-16); }
body[data-variant="4"] .hero-visual { grid-row:1; grid-column:1; border-radius:var(--space-4) var(--space-16) var(--space-4) var(--space-4); aspect-ratio:1.15; }
body[data-variant="4"] .hero-visual img { object-position:27% center; }
body[data-variant="4"] .hero-copy { grid-column:2; grid-row:1; }
body[data-variant="4"] .hero-copy h1 { max-width:15ch; }
body[data-variant="5"] .hero { grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--space-6) var(--space-12); padding-top:var(--space-4); }
body[data-variant="5"] .hero-copy { display:contents; }
body[data-variant="5"] .hero-copy h1 { grid-column:1/-1; grid-row:1; max-width:24ch; margin-bottom:var(--space-6); font-size:4.25rem; letter-spacing:-.04em; }
body[data-variant="5"] .hero-description { grid-column:2; grid-row:2; margin-top:0; align-self:end; }
body[data-variant="5"] .cta-group { grid-column:2; grid-row:3; margin-top:0; align-self:start; }
body[data-variant="5"] .experience { grid-column:2; grid-row:4; margin-top:0; align-self:start; }
body[data-variant="5"] .hero-visual { grid-column:1; grid-row:2/5; aspect-ratio:1.65; border-radius:var(--space-2); }
.version-nav { position:fixed; inset-block-end:calc(var(--space-4) + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:var(--space-2); align-items:center; width:max-content; max-width:calc(100% - var(--space-8)); padding:var(--space-2); border:1px solid var(--color-border); border-radius:var(--space-4); background:var(--color-surface); color:var(--color-text); box-shadow:0 var(--space-2) var(--space-8) var(--color-shadow); }
.version-nav>span { padding-inline:var(--space-3); font:var(--text-caption); color:var(--color-secondary); white-space:nowrap; }
.version-nav a { display:flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-3); font:var(--text-caption); font-weight:600; border-radius:var(--space-2); text-decoration:none; }
.version-nav a[aria-current] { background:var(--color-accent); color:var(--color-accent-text); text-decoration:underline; text-underline-offset:var(--space-1); }
.version-number { font-variant-numeric:tabular-nums; }
.booking-dialog,.details-dialog { width:min(640px,calc(100% - var(--space-8))); max-height:calc(100dvh - var(--space-8)); border:1px solid var(--color-border); border-radius:var(--radius-dialog); padding:var(--space-6) var(--space-8) var(--space-8); overflow:auto; background:var(--color-surface); color:var(--color-text); box-shadow:0 var(--space-6) var(--space-24) var(--color-shadow); }
dialog::backdrop { background:var(--color-backdrop); }
.dialog-toolbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-2); min-height:44px; margin-bottom:var(--space-4); }
.back-action { justify-self:start; padding-inline:var(--space-2); color:var(--color-secondary); min-height:44px; }
.step-count { grid-column:2; color:var(--color-secondary); font:var(--text-caption); font-variant-numeric:tabular-nums; }
.close-action { grid-column:3; justify-self:end; min-width:44px; min-height:44px; padding:var(--space-3); background:var(--color-fill); color:var(--color-text); }
progress { display:block; width:100%; height:var(--space-1); border:0; border-radius:999px; overflow:hidden; background:var(--color-fill); accent-color:var(--color-accent); }
progress::-webkit-progress-bar { background:var(--color-fill); }
progress::-webkit-progress-value { background:var(--color-accent); }
progress::-moz-progress-bar { background:var(--color-accent); }
.question-heading { padding-top:var(--space-8); }
.question-heading h2,.booking-result h2,.details-dialog h2 { font:var(--text-title); letter-spacing:-.025em; max-width:26ch; }
.question-heading p { margin-top:var(--space-3); color:var(--color-secondary); font:var(--text-callout); max-width:54ch; }
.question-fields { margin-top:var(--space-6); }
.choice-group { display:grid; gap:var(--space-2); border:0; padding:0; min-width:0; }
.choice { display:flex; align-items:center; gap:var(--space-3); min-height:56px; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text); background:var(--color-bg); font:var(--text-callout); cursor:pointer; }
.choice:has(input:checked) { border:2px solid var(--color-accent); padding:calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); background:var(--color-fill); }
.choice:has(input:focus-visible) { outline:3px solid var(--color-focus); outline-offset:var(--space-1); }
.choice input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--color-accent); }
.choice input:focus-visible { outline:0; }
.compact-choices { margin-top:var(--space-6); grid-template-columns:1fr 1fr; }
.field-label { font:var(--text-subhead); padding:0; margin-bottom:var(--space-3); }
.field { margin-top:var(--space-5); }
.field:first-child { margin-top:0; }
.field label { display:block; font:var(--text-subhead); margin-bottom:var(--space-2); }
.field input,.field textarea,.field select { display:block; width:100%; max-width:100%; min-width:0; min-height:52px; border:1px solid var(--color-border); border-radius:var(--radius-control); padding:var(--space-3) var(--space-4); background:var(--color-bg); color:var(--color-text); font:var(--text-callout); }
.field textarea { resize:vertical; min-height:112px; }
.field input::placeholder,.field textarea::placeholder { color:var(--color-secondary); opacity:1; }
.field input[aria-invalid=true],.field textarea[aria-invalid=true],.field select[aria-invalid=true] { border-color:var(--color-error); }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-6); }
.field-pair .field { margin-top:0; }
[data-conditional="destination"] { margin-top:var(--space-5); }
[data-conditional="recurring"],[data-conditional="stairs"] { margin-top:var(--space-6); }
.field-hint { margin-top:var(--space-3); font:var(--text-caption); color:var(--color-secondary); }
.check-row { display:flex; align-items:center; gap:var(--space-3); min-height:44px; margin-top:var(--space-2); padding-block:var(--space-2); font:var(--text-callout); cursor:pointer; }
.check-row input { width:20px; height:20px; flex:none; margin:0; accent-color:var(--color-accent); }
.booking-error { display:flex; gap:var(--space-2); margin-top:var(--space-5); color:var(--color-error); font:var(--text-callout); }
.error-symbol { width:20px; height:20px; flex:none; border:1px solid currentColor; border-radius:50%; display:flex; align-items:center; justify-content:center; font:var(--text-caption); font-weight:700; margin-top:var(--space-1); }
.booking-actions { margin-top:var(--space-6); }
.booking-actions>.primary-action { width:100%; min-height:52px; }
.booking-context { margin-top:var(--space-4); font:var(--text-caption); color:var(--color-secondary); }
.preview-label { margin-top:var(--space-5); text-align:center; font:var(--text-caption); color:var(--color-secondary); }
.review-row { display:grid; grid-template-columns:1fr auto; gap:var(--space-1) var(--space-4); padding-block:var(--space-4); border-bottom:1px solid var(--color-border); }
.review-row:first-child { padding-top:0; }
.review-row h3 { font:var(--text-subhead); }
.review-row p { grid-column:1; font:var(--text-callout); color:var(--color-secondary); white-space:pre-line; overflow-wrap:anywhere; }
.review-edit { grid-column:2; grid-row:1/3; align-self:start; min-width:44px; min-height:44px; padding:var(--space-2); border:0; border-radius:var(--space-2); background:transparent; color:var(--color-text); text-decoration:underline; text-underline-offset:var(--space-1); font:var(--text-callout); }
.booking-result { padding-block:var(--space-8) var(--space-4); }
.booking-result p,.details-dialog p { margin-top:var(--space-5); font:var(--text-body); color:var(--color-secondary); max-width:52ch; }
.booking-result .primary-action,.details-dialog form { margin-top:var(--space-8); }
.result-symbol { width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-6); border-radius:50%; background:var(--color-fill); color:var(--color-text); font:var(--text-title); }
@media(hover:hover) {
  .primary-action:hover { background:var(--color-accent-hover); }
  .quiet-action:hover,.back-action:hover,.review-edit:hover,.version-nav a:not([aria-current]):hover { background:var(--color-fill); color:var(--color-text); }
  .choice:hover { background:var(--color-fill); }
}
@media(max-width:1050px) {
  :root { --page-margin:var(--space-6); --text-display:600 2.75rem/1.08 var(--font); }
  .hero { gap:var(--space-8); }
  body[data-variant="2"] { --text-display:400 3.25rem/1.08 var(--font-editorial); }
  body[data-variant="4"] .hero { gap:var(--space-8); }
  body[data-variant="5"] .hero-copy h1 { font-size:3.5rem; }
  body[data-variant="3"] .hero { min-height:600px; grid-template-columns:1fr minmax(0,360px); padding:var(--space-6); }
  body[data-variant="3"] .hero-copy { padding:var(--space-6); }
}
@media(max-width:800px) {
  :root { --page-margin:var(--space-6); }
  .site-header { padding-block:var(--space-4); gap:var(--space-4); }
  .service-label { font:var(--text-subhead); font-weight:600; }
  .call-action { padding-inline:var(--space-4); min-height:44px; }
  .hero { grid-template-columns:1fr; min-height:0; padding-block:var(--space-4) var(--space-8); gap:var(--space-6); }
  .hero-visual { grid-column:1; grid-row:1; aspect-ratio:3/2; border-radius:var(--space-4); }
  .hero-copy { grid-column:1; grid-row:2; }
  .hero-copy h1 { max-width:20ch; }
  .hero-description { margin-top:var(--space-4); }
  .cta-group { margin-top:var(--space-6); }
  .experience { margin-top:var(--space-4); }
  body[data-variant="2"] .hero { gap:var(--space-6); }
  body[data-variant="2"] .hero-copy { grid-row:1; }
  body[data-variant="2"] .hero-visual { grid-row:2; aspect-ratio:3/2; }
  body[data-variant="3"] .hero { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; padding:0; margin-top:var(--space-4); border-radius:var(--space-4); }
  body[data-variant="3"] .hero-visual { position:static; aspect-ratio:3/2; }
  body[data-variant="3"] .hero-copy { border-radius:0; padding:var(--space-6); }
  body[data-variant="3"] .hero-copy h1 { font-size:2.5rem; max-width:20ch; }
  body[data-variant="4"] .hero { grid-template-columns:1fr; gap:var(--space-6); }
  body[data-variant="4"] .hero-visual { grid-column:1; grid-row:1; aspect-ratio:3/2; border-radius:var(--space-4); }
  body[data-variant="4"] .hero-copy { grid-column:1; grid-row:2; }
  body[data-variant="5"] .hero { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-6); }
  body[data-variant="5"] .hero-copy h1 { font-size:3rem; margin:0; order:-2; }
  body[data-variant="5"] .hero-visual { order:-1; aspect-ratio:3/2; }
  body[data-variant="5"] .hero-description { margin:0; align-self:auto; }
  body[data-variant="5"] .cta-group,body[data-variant="5"] .experience { align-self:auto; }
  .version-nav .version-title { display:none; }
  .version-nav a { padding:var(--space-3); }
  .site-footer>span { max-width:36ch; }
}
@media(max-width:480px) {
  :root { --page-margin:var(--space-4); --text-display:600 2.5rem/1.1 var(--font); --text-title:600 1.75rem/1.16 var(--font); }
  body[data-variant="2"] { --text-display:400 2.75rem/1.08 var(--font-editorial); }
  .hero-copy h1 br { display:none; }
  .hero-copy h1 { max-width:15ch; }
  .hero-description { font:var(--text-callout); }
  body[data-variant="3"] .hero-copy h1 { font-size:2.25rem; }
  body[data-variant="5"] .hero-copy h1 { font-size:2.75rem; }
  .site-footer { gap:var(--space-2); align-items:flex-start; }
  .site-footer>span { padding-top:var(--space-3); max-width:28ch; }
  .version-nav>span { display:none; }
  .version-nav { max-width:calc(100% - var(--space-8)); }
  .booking-dialog { width:100%; max-width:none; min-height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom)); }
  .question-heading { padding-top:var(--space-6); }
  .compact-choices,.field-pair { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .action { transition:none; }
  .action:active { transform:none; }
}
@media(prefers-reduced-transparency:reduce) { :root { --color-backdrop:var(--color-bg); } }
@media(prefers-contrast:more) { :root,body[data-variant] { --color-secondary:var(--color-text); --color-border:var(--color-text); } }
@media(forced-colors:active) {
  :root,body[data-variant] { --color-bg:Canvas; --color-surface:Canvas; --color-text:CanvasText; --color-secondary:CanvasText; --color-fill:Canvas; --color-border:CanvasText; --color-accent:Highlight; --color-accent-hover:Highlight; --color-accent-text:HighlightText; --color-focus:Highlight; --color-error:CanvasText; --color-backdrop:Canvas; --color-shadow:transparent; }
  .action { border:1px solid ButtonText; }
  .choice:has(input:checked) { outline:2px solid Highlight; }
}
