/* ==========================================================================
   Autosiekis — vairavimo mokykla Vilniuje
   Design tokens inherited from the demo (ivory / gold / Fraunces + Manrope),
   with two contrast-corrected ink tokens added for production a11y:
   --gold  #A87B2D on cream = 3.6:1  → decorative + large type only
   --gold-ink #8A6320       = 5.2:1  → eyebrows, links, small type
   --stone #8C8377          = 3.6:1  → borders + non-essential meta only
   --stone-ink #6B6156      = 5.8:1  → body copy
   ========================================================================== */

:root {
  --ivory: #f6f2eb;
  --cream: #fbf8f2;
  --ink: #161513;
  --ink-soft: #2c2924;
  --stone: #8c8377;
  --stone-ink: #6b6156;
  --gold: #a87b2d;
  --gold-ink: #8a6320;
  --champagne: #eadfc9;
  --line: rgba(140, 131, 119, 0.22);
  --line-strong: rgba(140, 131, 119, 0.4);
  /* Champagne over cream, pre-blended. Table rows must be OPAQUE: the row
     header is position:sticky, and a translucent fill let the cells scrolling
     underneath ("400 €") show straight through the pinned code ("BE"). */
  --row-alt: #f7f3e9;
  --row-hover: #f3ede0;

  --ok: #2f6f4f;
  --warn: #9a5b1d;
  --err: #9b2c2c;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 6rem;
  --s-9: 8rem;

  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  --shadow-sm: 0 1px 0 rgba(22, 21, 19, 0.06);
  --shadow-md: 0 18px 40px -26px rgba(22, 21, 19, 0.4);
  --shadow-lg: 0 30px 60px -28px rgba(22, 21, 19, 0.32);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.25s;
  --dur-2: 0.45s;
  --dur-3: 0.9s;

  --wrap: 76rem;
  --prose: 34rem;
  /* Measured, not guessed: 0.9rem padding × 2 + the logo. The logo grows at
     64rem, so this has to grow with it or anchors land under the bar. */
  --nav-h: 5.05rem;

  color-scheme: only light;
}

@media (min-width: 64rem) {
  :root {
    --nav-h: 5.8rem;
  }
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  background: var(--ivory);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  color: inherit;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection {
  background: var(--champagne);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 48rem) {
  .wrap {
    padding-inline: 2.5rem;
  }
}
.section {
  padding-block: var(--s-7);
}
.section--tight {
  padding-block: var(--s-6);
}
.section--tall {
  padding-block: var(--s-8);
}
@media (min-width: 48rem) {
  .section {
    padding-block: var(--s-8);
  }
  .section--tight {
    padding-block: var(--s-7);
  }
  .section--tall {
    padding-block: var(--s-9);
  }
}
.bg-cream {
  background: var(--cream);
}
.bg-ivory {
  background: var(--ivory);
}
.bg-ink {
  background: var(--ink);
  color: var(--cream);
}
.prose {
  max-width: var(--prose);
}
.prose--wide {
  max-width: 52rem;
}
.prose--doc {
  max-width: 44rem;
}
/* Headings inside a .stack breathe more than the 1rem between paragraphs.
   `* + h2` so the first heading in the stack is not pushed down. */
.stack > * + h2 {
  margin-top: 2.5rem;
}
.doc__updated {
  margin-top: 2.5rem;
}
.stack > * + * {
  margin-top: var(--s-3);
}

/* Section headings — three shapes, so the same block of markup does not get
   re-invented with inline styles on every page. */
.section__head {
  max-width: 34rem;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .section__head {
    margin-bottom: 3.5rem;
  }
}
.section__head--wide {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-end;
}
.section__head--wide > * {
  max-width: 32rem;
}
.section__head--wide > .muted {
  max-width: 26rem;
}
.section__head .lead {
  margin-top: 1.25rem;
}
/* Centred variant is usually the whole content of its section, so it drops the
   bottom margin that would otherwise stack on top of the section padding. */
.section__head--center {
  max-width: 52rem;
  margin-inline: auto;
  margin-bottom: 0;
  text-align: center;
}
.section__head--center .lead {
  margin-top: 2rem;
  margin-inline: auto;
  max-width: 46ch;
}
/* Heading and footnote around a block inside a section (table, list, form). */
.block__title {
  margin-bottom: 1.5rem;
}
.block__title--gap {
  margin-top: 3rem;
}
.block__note {
  margin-top: 1rem;
}
.block__note--loose {
  margin-top: 3rem;
}

/* ---------- type ---------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.25rem;
}
/* Gold reads at only 3.4:1 on ink — every dark surface gets the champagne token. */
.bg-ink .eyebrow,
.hero .eyebrow,
.banner .eyebrow,
.card--dark .eyebrow,
.footer .eyebrow {
  color: var(--champagne);
}
.h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
}
.h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
}
.h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.h4 {
  font-size: 1.2rem;
}
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--stone-ink);
  line-height: 1.7;
}
.muted {
  color: var(--stone-ink);
}
.meta {
  font-size: 0.82rem;
  color: var(--stone-ink);
}
.italic {
  font-style: italic;
}
.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
em.accent {
  font-style: italic;
  color: var(--stone-ink);
}
.bg-ink em.accent {
  color: var(--champagne);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease,
    border-color var(--dur-1) ease, transform var(--dur-1) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--ink);
  color: var(--cream);
}
.btn--primary:hover {
  background: var(--gold-ink);
}
.btn--light {
  background: var(--cream);
  color: var(--ink);
}
.btn--light:hover {
  background: var(--champagne);
}
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--champagne);
  border-color: transparent;
}
.btn--on-dark {
  border-color: rgba(251, 248, 242, 0.4);
  color: var(--cream);
}
.btn--on-dark:hover {
  background: rgba(251, 248, 242, 0.12);
}
.btn--block {
  width: 100%;
}
/* A full-width button stacked directly under another one. */
.btn--stacked {
  margin-top: 0.6rem;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.btn__arrow {
  transition: transform var(--dur-1) var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(3px);
}
/* Buttons closing a block of copy. Replaces per-button margin-top/margin-left
   inline pairs, which wrapped badly once two buttons sat side by side. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.link-underline {
  position: relative;
  text-decoration: none;
  color: var(--gold-ink);
  font-weight: 500;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-2) var(--ease);
}
.link-underline:hover::after {
  width: 100%;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  padding-block: 0.9rem;
  transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav__logo {
  height: 3.25rem;
  width: auto;
}
@media (min-width: 64rem) {
  .nav__logo {
    height: 4rem;
  }
}
.nav__logo--dark {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.nav__logo--light {
  display: none;
}
.nav__links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}
@media (min-width: 64rem) {
  .nav__links {
    display: flex;
  }
}
.nav__link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-2) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  width: 100%;
}
.nav__cta {
  display: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem;
  font-size: 0.9rem;
}
@media (min-width: 48rem) {
  .nav__cta {
    display: inline-flex;
  }
}

/* solid state — used on scroll and on every page without a photo hero */
.nav.is-solid,
.nav--solid {
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.nav.is-solid .nav__link,
.nav--solid .nav__link {
  color: var(--ink);
  text-shadow: none;
}
.nav.is-solid .nav__logo--dark,
.nav--solid .nav__logo--dark {
  display: none;
}
.nav.is-solid .nav__logo--light,
.nav--solid .nav__logo--light {
  display: block;
}
.nav.is-solid .nav__cta,
.nav--solid .nav__cta {
  background: var(--ink);
  color: var(--cream);
}
.nav.is-solid .nav__burger,
.nav--solid .nav__burger {
  color: var(--ink);
  border-color: var(--line-strong);
}

.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
}
@media (min-width: 64rem) {
  .nav__burger {
    display: none;
  }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-2) var(--ease), visibility var(--dur-2);
  overflow-y: auto;
}
.menu[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
}
.menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.menu__logo {
  height: 3.25rem;
  width: auto;
}
.menu__close {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(251, 248, 242, 0.3);
  background: transparent;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.menu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  padding: 0.6rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 248, 242, 0.1);
}
.menu__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
}
.menu__foot a {
  color: var(--champagne);
  text-decoration: none;
}
.menu__foot .meta {
  color: rgba(251, 248, 242, 0.55);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
/* Absolute, not fixed. A fixed full-bleed image jumps on iOS Safari every time
   the address bar collapses, because that resizes the viewport the image is
   pinned to. Absolute pins it to the hero instead, which never resizes. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 0;
}
.hero ~ * {
  position: relative;
  z-index: 2;
}
.hero__scrim,
.hero__scrim-top {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.hero__scrim {
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 18, 15, 0.62) 0%,
    rgba(20, 18, 15, 0.22) 38%,
    rgba(20, 18, 15, 0.06) 65%,
    rgba(20, 18, 15, 0.14) 100%
  );
}
.hero__scrim-top {
  inset-inline: 0;
  top: 0;
  height: 12rem;
  background: linear-gradient(to bottom, rgba(20, 18, 15, 0.5), transparent);
}
.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 4rem 4.5rem;
}
@media (min-width: 48rem) {
  .hero__body {
    padding-block: 6rem 6rem;
  }
}
.hero__title {
  color: #fff;
  max-width: 20ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  line-height: 1.02;
}
.hero__title .word {
  display: inline-block;
}
.hero__title .word--accent {
  color: var(--champagne);
}
.hero__sub {
  margin-top: 1.75rem;
  max-width: 36ch;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
}
.hero__ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
/* Three separate claims, so they are three separate objects. As one run of
   text split by "·" they collapsed into an unreadable grey block on a phone. */
.hero__trust {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(20, 18, 15, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.hero__trust li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.5px solid var(--champagne);
  border-bottom: 1.5px solid var(--champagne);
  transform: rotate(-45deg);
  margin-top: -0.2rem;
}
/* The hero photo has bright sky where the small type sits — the scrim alone
   is not enough, so the light text carries its own shadow. The trust pills
   carry their own background instead. */
.hero .eyebrow,
.hero__sub {
  text-shadow: 0 1px 16px rgba(20, 18, 15, 0.7), 0 1px 3px rgba(20, 18, 15, 0.45);
}

/* page hero — inner pages, no fixed spectacle (RUNBOOK I) */
.phero {
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: var(--s-6);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.phero__title {
  max-width: 18ch;
}
.phero__lead {
  margin-top: 1.25rem;
  max-width: var(--prose);
}
/* Short pages (404, confirmations) centre their hero instead of stacking a
   full section under it. */
.phero--center {
  min-height: 60svh;
  display: flex;
  align-items: center;
}

/* Compact pill buttons — the "other categories" row. Deliberately NOT called
   .chips: rezervacija.css already owns that name for the booking selector. */
.cat-nav {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.btn--chip {
  min-height: 2.75rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
}

/* ---------- breadcrumbs ---------- */
.crumbs {
  font-size: 0.8rem;
  color: var(--stone-ink);
  margin-bottom: 1.25rem;
}
.crumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.crumbs a {
  color: var(--stone-ink);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--gold-ink);
}
.crumbs li + li::before {
  content: "→";
  margin-right: 0.4rem;
  color: var(--stone);
}

/* ---------- key figures under a category hero ---------- */
.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: flex-end;
}
.spec__value {
  font-size: 1.5rem;
  line-height: 1.6;
}
.spec__value--lead {
  font-size: 2.75rem;
  line-height: 1;
}
/* Footnote that breaks onto its own line below the buttons it qualifies. */
.spec__note {
  width: 100%;
  margin-top: 0.25rem;
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
}
@media (min-width: 48rem) {
  .stats {
    gap: 2.25rem 1.5rem;
  }
}
@media (min-width: 64rem) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Small on a phone — the figures are supporting detail here, not the headline.
   Weight stays 300: the Fraunces file only carries 300–600. */
.stat__num {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
}
.stat__num--gold {
  color: var(--gold-ink);
}
.stat__label {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--stone-ink);
  font-weight: 500;
  /* Two labels wrap to two lines and two do not, which left the 2×2 grid
     ragged. Reserving two lines makes all four cells the same height. */
  min-height: 2.8em;
}
@media (min-width: 48rem) {
  .stat__num {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
  }
  .stat__label {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    min-height: 0;
  }
}
@media (min-width: 64rem) {
  /* Separator *between* columns. On the first stat the rule and its indent
     pushed the whole block 1.5rem right of every other section's left edge. */
  .stat + .stat {
    border-left: 1px solid var(--line);
    padding-left: 1.5rem;
  }
}

/* ---------- feature rows ---------- */
.rows {
  display: grid;
  gap: 0 4rem;
}
@media (min-width: 48rem) {
  .rows {
    grid-template-columns: 1fr 1fr;
  }
}
/* Three items in a two-column grid left a hole in the bottom-right corner.
   Odd counts get their own column each instead. */
@media (min-width: 62rem) {
  .rows--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.5rem;
  }
  /* Stretch each item to the tallest of the three, so the closing rules line
     up instead of ending wherever the copy happens to run out. */
  .rows--3 > * {
    display: flex;
    flex-direction: column;
  }
  .rows--3 > * > .row {
    flex: 1;
  }
}
.row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.75rem 0.75rem;
  margin-inline: -0.75rem;
  border-top: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-2) ease;
}
.row:hover {
  background: rgba(234, 223, 201, 0.4);
}
/* Close each column with a rule, so the two columns end on the same line.
   Previously only the very last row carried one, as an inline style. */
.rows > * > .row:last-child {
  border-bottom: 1px solid var(--line);
}
.row__num {
  font-family: var(--font-display);
  color: var(--gold-ink);
  font-size: 1.15rem;
  padding-top: 0.15rem;
}
.row__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
}

/* ---------- cards ---------- */
.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) ease,
    border-color var(--dur-2) ease;
}
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(168, 123, 45, 0.5);
}
.card--dark {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}
.card__top {
  display: flex;
  /* The badge is nowrap, so without wrapping it pushed straight out past the
     card border once its text got long (see "Nuolaida su 95 kodu" at 3 cols).
     Now it drops onto its own line instead. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.75rem;
}
.card__code {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
}
/* Three-letter codes ("KET") do not fit at 3rem. Tied to the code itself, not
   to which card happens to be the dark one. */
.card__code--long {
  font-size: 1.9rem;
  line-height: 1.15;
}
.card__badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: rgba(234, 223, 201, 0.7);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}
.card--dark .card__title {
  color: var(--champagne);
}
.card__text {
  font-size: 0.92rem;
  color: var(--stone-ink);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
.card--dark .card__text {
  color: rgba(251, 248, 242, 0.75);
}
.card__foot {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}
.card__figures {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}
/* On a phone there is no hover, so the lift-on-hover was the only hint that a
   card is a link — which meant no hint at all on the devices that matter most. */
.card__go {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-ink);
  font-size: 0.95rem;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) ease;
}
a.card:hover .card__go {
  transform: translateX(3px);
  background: rgba(234, 223, 201, 0.6);
}
.card--dark .card__go {
  border-color: rgba(251, 248, 242, 0.3);
  color: var(--champagne);
}
.card--dark a.card:hover .card__go,
a.card--dark:hover .card__go {
  background: rgba(251, 248, 242, 0.12);
}
.card--dark .card__foot {
  border-top-color: rgba(251, 248, 242, 0.15);
}
.card__price {
  font-family: var(--font-display);
  font-size: 2rem;
}
.card__price span {
  color: var(--gold-ink);
  font-size: 1.1rem;
}
.card--dark .card__price span {
  color: var(--champagne);
}
.card__note {
  font-size: 0.85rem;
  color: var(--stone-ink);
}
.card--dark .card__note {
  color: rgba(251, 248, 242, 0.6);
}

/* A soft card that lifts a list or a note out of the page flow. Flips its fill
   so it always sits a shade apart from the section behind it. */
.boxed {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.75rem;
}
@media (min-width: 48rem) {
  .boxed {
    padding: 2.25rem;
  }
}
.bg-cream .boxed {
  background: var(--ivory);
}

/* Copy on one side, a single action on the other; stacked on a phone. */
.callout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.callout__body > * + * {
  margin-top: 0.75rem;
}
@media (min-width: 48rem) {
  .callout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
  .callout__body {
    max-width: 42rem;
  }
  .callout .btn-row {
    margin-top: 0;
    flex-shrink: 0;
  }
}

/* ---------- paired info cards ----------
   Two related blocks side by side. As plain columns their bottoms never lined
   up and the button hung in mid-air; as cards they share a baseline and the
   action sits pinned to the bottom of its card. */
.duo {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 48rem) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
.duo__card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.75rem;
}
@media (min-width: 48rem) {
  .duo__card {
    padding: 2.25rem;
  }
}
.duo__card--accent {
  background: linear-gradient(165deg, var(--champagne), var(--cream) 60%);
  border-color: rgba(168, 123, 45, 0.28);
}
.duo__card .ticks {
  margin-top: 1.5rem;
  gap: 0.9rem;
}
.duo__card .btn-row {
  margin-top: auto;
  padding-top: 1.75rem;
}
@media (min-width: 34rem) {
  .duo__card .btn--block {
    width: auto;
  }
}

/* ---------- editorial split ---------- */
.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 48rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  .split--flip .split__media {
    order: 2;
  }
}
.split + .split {
  margin-top: 5rem;
}
.split__media {
  overflow: hidden;
  border-radius: var(--r-xl);
}
.split__media img {
  width: 100%;
  height: 18.75rem;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
@media (min-width: 48rem) {
  .split__media img {
    height: 27.5rem;
  }
}
.split:hover .split__media img {
  transform: scale(1.04);
}
.split__media--portrait img {
  height: auto;
  aspect-ratio: 4 / 5;
}
/* Step marker: a bare gold numeral read as decoration, so it now sits in a
   ring that makes the sequence obvious at a glance. */
/* Step marker and its one hard fact sit on a single row — on a phone that is
   one tidy line instead of two stacked ornaments. */
.split__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.split__fact {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: rgba(234, 223, 201, 0.55);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
}
.split__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--cream);
  font-family: var(--font-display);
  color: var(--gold-ink);
  font-size: 1.35rem;
  line-height: 1;
}
.bg-cream .split__step {
  background: var(--ivory);
}
.split__title {
  margin: 1rem 0 0;
  position: relative;
  padding-bottom: 1rem;
}
.split__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--gold-ink);
  opacity: 0.5;
}
/* The text column of a split — vertical rhythm lives here, not re-declared as
   an inline margin-top on every child. */
.split__body > * + * {
  margin-top: 1.25rem;
}
.split__body > .ticks {
  margin-top: 1.75rem;
}
.split__body > .btn-row {
  margin-top: 2rem;
}

/* ---------- CTA banner ---------- */
.banner {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: 3.5rem 2rem;
  text-align: center;
}
@media (min-width: 48rem) {
  .banner {
    padding: 5rem 4rem;
  }
}
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.banner::before {
  top: -6rem;
  right: -6rem;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(168, 123, 45, 0.35), transparent 70%);
}
.banner::after {
  bottom: -8rem;
  left: -5rem;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle, rgba(234, 223, 201, 0.18), transparent 70%);
}
.banner > * {
  position: relative;
}
.banner .h2 {
  color: var(--cream);
}
.banner__text {
  color: rgba(251, 248, 242, 0.78);
  margin: 1.5rem auto 0;
  max-width: 36ch;
}
.banner__ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ---------- contact ---------- */
.contact {
  display: grid;
  gap: 3rem;
}
@media (min-width: 64rem) {
  .contact {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: stretch;
  }
}
.contact__list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.contact__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact__icon {
  color: var(--gold-ink);
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.contact__label {
  font-size: 0.75rem;
  color: var(--stone-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.contact__value {
  font-size: 1.1rem;
}
.map {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  min-height: 24rem;
  height: 100%;
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  border: 0;
  display: block;
}

/* ---------- footer ---------- */
.footer {
  /* The hero image is position:fixed, and `.hero ~ *` only reaches siblings
     inside <main> — the footer sits outside it and would let the photo show
     through. Same bug as pikovalanda/anonser. */
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: rgba(251, 248, 242, 0.72);
  padding-block: 4rem 2.5rem;
}
.footer a {
  color: inherit;
  text-decoration: none;
}
.footer a:hover {
  color: var(--cream);
}
.footer__top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 48rem) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.footer__logo {
  height: 5rem;
  width: auto;
  margin-bottom: 1.25rem;
}
.footer__about {
  max-width: 32ch;
  line-height: 1.7;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  font-size: 0.9rem;
}
/* WCAG 2.2 target size: standalone nav links need 24px of height, not 22. */
.footer__nav a,
.menu__foot a,
.footer__legal a {
  display: inline-block;
  padding-block: 0.4rem;
}
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 2rem;
  font-size: 0.85rem;
}
@media (min-width: 48rem) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.footer__contactline {
  border: 0;
  padding-top: 0.5rem;
}
.footer__brandword {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 9rem);
  line-height: 0.85;
  color: rgba(251, 248, 242, 0.07);
  letter-spacing: -0.03em;
  margin-top: 3rem;
  user-select: none;
  pointer-events: none;
}

/* ---------- sticky call bar (mobile) ---------- */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-strong);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 24px -18px rgba(22, 21, 19, 0.6);
}
@media (min-width: 64rem) {
  .callbar {
    display: none;
  }
}
.callbar a {
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.callbar a.is-primary {
  background: var(--ink);
  color: var(--cream);
}
body.has-callbar {
  padding-bottom: 3.5rem;
}
@media (min-width: 64rem) {
  body.has-callbar {
    padding-bottom: 0;
  }
}

/* ---------- details / FAQ ---------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.7rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid var(--gold-ink);
  border-bottom: 1.5px solid var(--gold-ink);
  transform: rotate(45deg);
  transition: transform var(--dur-1) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq__a {
  padding: 0 2.5rem 1.5rem 0;
  color: var(--stone-ink);
  max-width: 56ch;
}

/* ---------- tables ---------- */
.table-block {
  position: relative;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  /* A right-edge fade tells the reader there is more table off-screen; without
     it the last columns were simply invisible on a phone. */
  background-image: linear-gradient(to left, rgba(22, 21, 19, 0.09), rgba(22, 21, 19, 0) 2.5rem);
  background-attachment: local, scroll;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.table-wrap table {
  background: var(--cream);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 34rem;
}
th,
td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  scroll-snap-align: start;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--champagne);
  border-bottom: 1px solid var(--line-strong);
}
/* Pinned both ways, so the column title stays over the column it names. */
thead th:first-child {
  left: 0;
  z-index: 3;
  box-shadow: 1px 0 0 var(--line);
}
th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
}
/* Row header (the category code) stays put while the rest scrolls sideways,
   so you never lose track of which row you are reading. */
tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--cream);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  box-shadow: 1px 0 0 var(--line);
}
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) th[scope="row"] {
  background: var(--row-alt);
}
tbody tr:hover td,
tbody tr:hover th[scope="row"] {
  background: var(--row-hover);
}
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 0;
}
td.price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--ink);
}

/* Scroll affordance — only shown when the table really is wider than its box,
   and it disappears as soon as you start scrolling. main.js toggles the flag. */
.table-hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-ink);
}
.table-block.is-scrollable .table-hint {
  display: inline-flex;
}
.table-block.is-scrolled .table-hint {
  display: none;
}
.table-hint__arrow {
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

/* ---------- lists ---------- */
.ticks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--stone-ink);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.5px solid var(--gold-ink);
  border-bottom: 1.5px solid var(--gold-ink);
  transform: rotate(-45deg);
}

/* ---------- fleet ---------- */
.fleet {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .fleet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.fleet__item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.fleet__media {
  background: linear-gradient(160deg, var(--champagne), var(--cream) 60%);
  padding: 1.25rem;
}
.fleet__media img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 26px rgba(22, 21, 19, 0.28));
}
.fleet__media--photo {
  padding: 0;
}
.fleet__media--photo img {
  filter: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fleet__body {
  padding: 1.5rem;
}
.fleet__body .muted {
  font-size: 0.92rem;
}

/* ==== forms, panels and notices (shared by /rezervacija/ and /uzklausa/) ==== */
/* ---------- summary panel ---------- */
/* The panel is where the page is actually used (summary, form), so it gets
   lift instead of sitting flat against the section. */
.panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 64rem) {
  .panel {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
}
.panel--roomy {
  padding: 2rem;
}
.panel--loose {
  margin-top: 1rem;
}
.panel__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.panel__lead {
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}
.panel__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.panel__empty {
  color: var(--stone-ink);
  font-size: 0.9rem;
}
.sum {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.sum li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.sum dt,
.sum .k {
  color: var(--stone-ink);
}
.sum .val {
  text-align: right;
  font-weight: 600;
}
.sum__total {
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  font-size: 1rem;
}
.sum__total .val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
}

/* ---------- form ---------- */
.field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-ink);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--ivory);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.field textarea {
  min-height: 5.5rem;
  resize: vertical;
}
/* select was left out of both of these — it focused with no ring and never
   showed the invalid state. */
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(168, 123, 45, 0.15);
  outline: none;
}
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
  border-color: var(--err);
}
.field__err {
  font-size: 0.78rem;
  color: var(--err);
  min-height: 1px;
}
.field--check {
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
}
.field--check input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-top: 0.1rem;
  flex-shrink: 0;
  accent-color: var(--gold-ink);
}
.field--check label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--stone-ink);
  line-height: 1.5;
}
.field--check a {
  color: var(--gold-ink);
}
/* "(nebūtina)" inside an otherwise uppercase field label. */
.label-optional {
  text-transform: none;
  font-weight: 400;
}
.field__err--full {
  grid-column: 1 / -1;
}
/* Small print under a form or a submit button. */
.form-note {
  margin-top: 0.75rem;
  text-align: center;
}
.form-note--loose {
  margin-top: 1rem;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.notice--warn {
  background: rgba(154, 91, 29, 0.1);
  color: var(--warn);
}
.notice--err {
  background: rgba(155, 44, 44, 0.09);
  color: var(--err);
}
.notice--ok {
  background: rgba(47, 111, 79, 0.1);
  color: var(--ok);
}
.notice--wide {
  max-width: 40rem;
}
.notice--loose {
  margin-top: 1rem;
}
[hidden] {
  display: none !important;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ---------- reveal (progressive enhancement — never hides without JS) ----------
   Only main.js adds .reveal-ready, so if the script never runs the content
   stays visible. */
.js .reveal-ready {
  opacity: 0;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .nav,
  .callbar,
  .menu,
  .banner {
    display: none !important;
  }
  body {
    background: #fff;
  }
}

/* ---------- inquiry page (/uzklausa/) ---------- */
.ask {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.ask > * {
  min-width: 0;
}
@media (min-width: 64rem) {
  .ask {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 3rem;
  }
}
.ask__form {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 48rem) {
  .ask__form {
    padding: 2.25rem;
  }
}
.ask__row {
  display: grid;
  gap: 0 1rem;
}
@media (min-width: 34rem) {
  .ask__row {
    grid-template-columns: 1fr 1fr;
  }
}
.ask__steps {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--stone-ink);
}
.ask__steps li::marker {
  color: var(--gold-ink);
  font-weight: 700;
}
@media (min-width: 64rem) {
  .ask__side .panel:first-child {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
}