:root {
  
  --s-1: 0.38rem;
  --s-2: 0.72rem;
  --s-3: 1.15rem;
  --s-4: 1.72rem;
  --s-5: 2.59rem;
  --s-6: 3.88rem;
  --s-7: 5.82rem;

  
  --section-y: clamp(4.8rem, 8.7vw, 7.6rem);
  --stack: var(--s-4);

  
  --step--1: 0.781rem;
  --step-0:  1rem;
  --step-1:  1.280rem;
  --step-2:  1.638rem;
  --step-3:  2.097rem;

  
  --travel: 10px;
  --dur: 0.5s;
  --lift: -2px;
  --ease-out: cubic-bezier(0.22, 0.75, 0.30, 1);
}


section { padding: var(--section-y) 0; }
.sec-head { margin-bottom: var(--s-6); }
.sec-head p { margin-top: var(--s-2); }


h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.hero-sub, .sec-head p { max-width: 42ch; }


.hours, .price, .charge-rows, .rd-ref-code, .info-list, time,
.rd-detail dd, .menu-price { font-variant-numeric: tabular-nums; }


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}


a, button, .btn, input, select, textarea, summary {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: no-preference) {
  
  .btn {
    transition: transform 0.16s var(--ease-out),
                box-shadow 0.22s var(--ease-out),
                background-color 0.2s var(--ease-out),
                border-color 0.2s var(--ease-out),
                color 0.2s var(--ease-out);
  }
  .btn:hover { transform: translateY(var(--lift)); }
  
  .btn:active { transform: translateY(1px); transition-duration: 0.06s; }
}


.field input,
.field select,
.field textarea {
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent); }

[aria-invalid="true"] {
  border-color: var(--warn, var(--accent)) !important;
}

button[aria-busy="true"] { cursor: progress; opacity: 0.85; }


@media (prefers-reduced-motion: no-preference) {
  .m-figure {
    transition: transform 0.35s var(--ease-out);
  }
}