/* =========================================================
   Gulmarg Snowline — content.css
   Page-content components: hero slider, cards, pricing,
   services, itinerary, team, forms, legal prose, CTA bands.
   ========================================================= */

.section {
  padding-block: var(--space-2xl);
}

.section-tight {
  padding-block: var(--space-xl);
}

.section-alt {
  background: var(--color-surface);
}

.section-header {
  max-width: 65ch;
  margin-bottom: var(--space-xl);
}

.section-header p {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  margin-top: var(--space-xs);
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

/* ---------- Page title block (every page without a hero slider) ---------- */
.page-header {
  background: transparent;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-xl) var(--space-lg);
}

.page-header h1 {
  color: var(--navy);
}

.page-header .lead {
  max-width: 65ch;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.page-header .lead + .lead {
  margin-top: var(--space-xs);
}

/* ---------- Hero slider ----------
   Slides and caption share one grid cell, so the hero grows to fit its tallest
   caption instead of clipping it. Source photos are portrait, so the band stays
   tall enough on mobile to keep the subject in frame. */
.hero-slider {
  position: relative;
  display: grid;
  min-height: min(70vh, 560px);
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

@media (min-width: 900px) {
  .hero-slider {
    min-height: min(64vh, 620px);
  }
}

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  /* Grid items default to min-width:auto, so a long nowrap button label was
     setting a floor wider than a 320px viewport and forcing page overflow. */
  min-width: 0;
  opacity: 0;
  /* Kept short: captions crossfade with their slide, so a long fade leaves two
     headlines legible at once. */
  transition: opacity 350ms ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 37, 64, 0.9) 0%, rgba(15, 37, 64, 0.55) 40%, rgba(15, 37, 64, 0.2) 100%);
}

/* Works whether the caption sits inside a slide (home) or beside them (package pages). */
.hero-caption {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  padding-block: var(--space-xl) var(--space-2xl);
  color: var(--white);
}

.hero-caption h1,
.hero-caption h2 {
  color: var(--white);
  max-width: 15ch;
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(15, 37, 64, 0.5);
}

.hero-caption p {
  color: rgba(255, 255, 255, 0.94);
  max-width: 42ch;
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  text-shadow: 0 1px 12px rgba(15, 37, 64, 0.5);
}

/* Positioning line under the hero headline. */
.hero-caption .hero-tagline {
  margin-top: var(--space-xs);
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* Same line, used on light page headers. */
.page-tagline {
  margin-top: var(--space-2xs);
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--color-primary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Below ~380px two buttons no longer fit side by side, and long labels
   like "Snowboarding packages" need to be allowed to wrap. */
@media (max-width: 380px) {
  .hero-actions .btn {
    width: 100%;
    padding-inline: var(--space-md);
    white-space: normal;
  }
}

/* ---------- Hero controls (built by hero-slider.js) ---------- */
.hero-controls {
  position: absolute;
  z-index: 3;
  right: var(--space-md);
  top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  /* Photos run from bright snow to dark rock, so the controls carry their own
     backdrop rather than relying on the image behind them. */
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-full);
  background: rgba(15, 37, 64, 0.55);
}

@media (min-width: 900px) {
  .hero-controls {
    right: var(--space-lg);
    top: var(--space-lg);
  }
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.65);
  transition: background var(--transition-fast), width var(--transition-fast);
}

.hero-dot[aria-current="true"] {
  width: 26px;
  background: var(--white);
}

.hero-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: var(--space-3xs);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.hero-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hero-toggle:hover,
.hero-toggle:focus-visible {
  background: rgba(15, 37, 64, 0.85);
}

.hero-controls :focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

/* ---------- Price bar (package detail pages) ---------- */
.price-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.price-bar .price {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
}

.price-bar .sep {
  color: var(--color-border);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.pill-primary {
  background: rgba(25, 155, 232, 0.12);
  border-color: transparent;
  color: var(--blue-dark);
}

/* ---------- Card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* The source photos are tall phone shots and the rider often sits low in frame.
   Cropping from the top cut the skis out entirely, so images can name their own
   focal point. */
.focal-low {
  object-position: center 70% !important;
}

.focal-lower {
  object-position: center 85% !important;
}

.focal-top {
  object-position: center 20% !important;
}

.focal-15 {
  object-position: center 15% !important;
}

.focal-30 {
  object-position: center 30% !important;
}

.card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex-grow: 1;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-3xs);
}

.card-title {
  font-size: var(--text-md);
  color: var(--navy);
  font-weight: 700;
}

.card-summary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-grow: 1;
}

.card-price {
  font-weight: 700;
  color: var(--navy);
  font-size: var(--text-base);
  margin-top: var(--space-2xs);
}

.card-link {
  margin-top: var(--space-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.card-link::after {
  content: "\2192";
}

/* ---------- Services / Why choose us grid ---------- */
.icon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.icon-card {
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.icon-card .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(25, 155, 232, 0.12);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.icon-card .icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.icon-card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-3xs);
}

.icon-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- Pull quote ---------- */
.pullquote {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pullquote blockquote {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--navy);
  line-height: var(--leading-tight);
}

.pullquote cite {
  display: block;
  font-style: normal;
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.team-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.team-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex-grow: 1;
}

/* Pushes the handle to the bottom so cards line up whether or not a bio
   has been written yet. */
.team-body .team-social {
  margin-top: auto;
  padding-top: var(--space-sm);
}

.team-name {
  font-size: var(--text-md);
  color: var(--navy);
}

.team-role {
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2xs);
}

.team-bio {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.team-social {
  margin-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.team-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- About: text + image split ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-split > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .about-split {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-2xl);
  }
}

.about-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .about-media {
    aspect-ratio: 4 / 5;
  }
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* ---------- Values grid (About) ---------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.value-card {
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.value-card h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2xs);
}

.value-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2xs);
}

.value-card p:last-child {
  margin-bottom: 0;
}

/* ---------- Itinerary ---------- */
.itinerary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.day-card {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--white);
}

.day-card h3 {
  font-size: var(--text-base);
  color: var(--navy);
  margin-bottom: var(--space-2xs);
}

.day-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.day-card li {
  padding-left: 1.25em;
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.day-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.day-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.day-card .note {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Includes / Excludes ---------- */
.includes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .includes-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.includes-list li,
.excludes-list li {
  padding-left: 1.75em;
  position: relative;
  margin-bottom: var(--space-2xs);
}

.includes-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #1a8a4a;
  font-weight: 700;
}

.excludes-list li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
  font-weight: 700;
}

.optional-list dt {
  font-weight: 700;
  color: var(--navy);
  margin-top: var(--space-sm);
}

.optional-list dd {
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy);
  color: var(--white);
  padding-block: var(--space-2xl);
  text-align: center;
}

.cta-band h2 {
  color: var(--white);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  margin-inline: auto;
  margin-top: var(--space-sm);
}

.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.cta-contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  font-weight: 600;
}

.cta-contact-list a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Related links ---------- */
.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.related-links a {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--navy);
}

.related-links a:hover,
.related-links a:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Legal prose ---------- */
.legal-content {
  max-width: 75ch;
}

.legal-content h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* The base reset strips list markers site-wide, which is right for nav and
   card lists but leaves legal lists reading as run-on lines. Put them back. */
.legal-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: var(--space-md);
}

.legal-content li {
  margin-bottom: var(--space-2xs);
  padding-left: var(--space-3xs);
}

.legal-content li::marker {
  color: var(--color-primary);
}

.legal-content strong {
  color: var(--color-text);
}

.legal-content table {
  margin-block: var(--space-sm) var(--space-md);
}

.legal-content th,
.legal-content td {
  text-align: left;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.legal-content th {
  background: var(--color-surface);
}

.content-gap {
  display: block;
  background: #fff6e5;
  border: 1px dashed #d9a441;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  color: #7a5518;
  margin-bottom: var(--space-sm);
}

.legal-notice {
  background: rgba(25, 155, 232, 0.08);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

/* ---------- Contact method cards ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast),
    border-color var(--transition-fast);
}

.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.contact-card .icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(25, 155, 232, 0.12);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card .icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.contact-card .contact-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-text-muted);
}

.contact-card .contact-value {
  display: block;
  font-weight: 650;
  color: var(--navy);
  word-break: break-word;
}

/* ---------- Info card ---------- */
.info-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.info-card + .info-card {
  margin-top: var(--space-md);
}

.info-card h2 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2xs);
}

.info-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.info-card address {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ---------- Contact details list ---------- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--text-md);
}

.contact-details dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.contact-details dd {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
}

/* ---------- Enquiry form ---------- */
.form-panel {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  /* The form sits in a narrow column on the contact page, so its layout has to
     respond to its own width, not the viewport's. A viewport breakpoint here
     put two fields side by side inside a 493px panel and squeezed each to
     233px. */
  container-type: inline-size;
}

@media (min-width: 640px) {
  .form-panel {
    padding: var(--space-xl);
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Measured against the panel's content box, so this sits below the panel width
   you'd expect — a 615px panel has ~519px of inner space. */
@container (min-width: 440px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-field-full {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  /* Without this, the longest <option> sets a min-content floor on the select
     and pushes the whole grid track wider than the panel. */
  min-width: 0;
}

.form-field label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--navy);
}

.form-field .required-mark {
  color: #c0392b;
}

.form-field input,
.form-field select,
.form-field textarea {
  /* A select sizes itself to its widest option, which would otherwise push the
     grid track wider than the viewport. */
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--text-base);
  min-height: 48px;
  transition: border-color var(--transition-fast);
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #c0392b;
}

.field-error {
  font-size: var(--text-xs);
  color: #c0392b;
  min-height: 1em;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-checkbox input {
  width: 18px;
  height: 18px;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.form-status {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.form-status[data-state="error"] {
  color: #c0392b;
}

.form-success {
  text-align: center;
  padding: var(--space-lg);
}

.form-success h3 {
  color: var(--navy);
  margin-bottom: var(--space-2xs);
}

.form-success p {
  color: var(--color-text-muted);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Two-column layout (contact page: details + form) ---------- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.split-layout > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .split-layout {
    /* The form is the point of this page, so it gets the wider column. */
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  }
}

/* ---------- Suitable-for pills row ---------- */
.level-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-sm) var(--space-md);
}