/**
 * Medium blog-style spacing — editorial rhythm sitewide.
 * Comfortable line length, paragraph gaps, and section breathing room.
 */
:root {
  /* Section rhythm */
  --space-section-y: clamp(3.5rem, 5.5vw, 5rem);
  --space-section-x: clamp(1.25rem, 4vw, 1.75rem);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.75rem;
  --space-4xl: 3.25rem;
  --space-grid: 1.35rem;

  /* Blog / prose (Medium-style readability) */
  --prose-width: 42rem;
  --prose-width-wide: 48rem;
  --prose-size: 1.0625rem;
  --prose-line: 1.78;
  --prose-para-gap: 1.35em;
  --prose-h2-top: 2.25em;
  --prose-h2-bottom: 0.6em;
  --prose-h3-top: 1.75em;
  --prose-h3-bottom: 0.45em;
  --prose-list-gap: 0.55em;
  --prose-block-gap: 2.5rem;
}

/* ─── Shared prose rhythm (blog body text) ───────────── */
.section-sub,
.hero-desc,
.about-lead,
.panel-text p,
.content-card__desc,
.feature-row__desc,
.why-desc,
.cms-detail-excerpt,
.cms-rich-text,
.cms-block,
.legal-page__intro,
.legal-page__section .cms-rich-text {
  font-size: var(--prose-size);
  line-height: var(--prose-line);
}

.section-sub,
.hero-desc,
.about-lead,
.panel-text p,
.content-card__desc,
.feature-row__desc,
.why-desc,
.cms-detail-excerpt {
  max-width: var(--prose-width);
}

.cms-rich-text p,
.cms-block p,
.panel-text p,
.content-card__desc,
.feature-row__desc,
.about-lead,
.legal-page__intro p,
.legal-page__section .cms-rich-text p {
  margin-bottom: var(--prose-para-gap);
}

.cms-rich-text p:last-child,
.cms-block p:last-child,
.panel-text p:last-child {
  margin-bottom: 0;
}

.cms-rich-text h2,
.cms-block h2,
.legal-page__section-title {
  margin-top: var(--prose-h2-top);
  margin-bottom: var(--prose-h2-bottom);
  line-height: 1.35;
}

.cms-rich-text h2:first-child,
.cms-block h2:first-child {
  margin-top: 0;
}

.cms-rich-text h3,
.cms-block h3 {
  margin-top: var(--prose-h3-top);
  margin-bottom: var(--prose-h3-bottom);
  line-height: 1.4;
}

.cms-rich-text ul,
.cms-rich-text ol,
.cms-block ul,
.cms-block ol {
  margin: 0 0 var(--prose-para-gap);
  padding-left: 1.5em;
}

.cms-rich-text li + li,
.cms-block li + li {
  margin-top: var(--prose-list-gap);
}

.cms-rich-text li,
.cms-block li {
  margin-bottom: 0;
}

/* ─── Sections ───────────────────────────────────────── */
.section {
  padding: var(--space-section-y) var(--space-section-x);
}

.section-label {
  margin-bottom: var(--space-sm);
}

.section-title {
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.section-divider {
  margin-bottom: var(--space-lg);
}

.section-sub {
  margin-bottom: var(--space-3xl);
  margin-left: auto;
  margin-right: auto;
}

/* ─── Heroes ─────────────────────────────────────────── */
.hero-badge {
  margin-bottom: var(--space-xl);
}

.hero-desc {
  margin: var(--space-xl) auto var(--space-3xl);
}

.hero-btns {
  gap: var(--space-md);
}

.hero-stats {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  gap: var(--space-2xl);
}

.hero h1 {
  margin-bottom: var(--space-sm);
  line-height: 1.12;
}

.hero h1 .sub-title {
  margin-top: var(--space-sm);
  line-height: 1.45;
}

.hero-content {
  padding-left: var(--space-section-x);
  padding-right: var(--space-section-x);
  max-width: var(--prose-width-wide);
  margin-left: auto;
  margin-right: auto;
}

.hero:has(.hero-infinite-grid) {
  min-height: clamp(520px, 82vh, 760px);
  padding-top: calc(var(--nav-height, 76px) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
}

.hero:not(:has(.hero-infinite-grid)) {
  padding-top: calc(var(--nav-height, 76px) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
}

.hero:not(:has(.hero-infinite-grid)) .hero-content {
  max-width: var(--prose-width-wide);
}

/* ─── Home: Services ─────────────────────────────────── */
#services.section {
  padding: var(--space-section-y) var(--space-section-x);
}

#services > .container {
  padding-left: var(--space-section-x);
  padding-right: var(--space-section-x);
}

.tab-bar-sticky-wrap {
  margin-bottom: var(--space-xl);
}

.tab-bar {
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
}

.tab-panel.active {
  scroll-margin-top: calc(var(--nav-height, 76px) + 4.5rem);
}

.panel-text h3 {
  margin-bottom: var(--space-md);
}

.panel-tag {
  margin-bottom: var(--space-lg);
}

.panel-inner {
  padding: var(--space-2xl) var(--space-3xl);
  gap: var(--space-2xl);
}

.panel-features {
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.panel-features li {
  line-height: var(--prose-line);
}

/* ─── Home: Parking demo ───────────────────────────── */
#parking-demo.section {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}

#parking-demo .section-sub {
  margin-bottom: var(--space-xl);
}

.demo-section-inner {
  gap: var(--space-xl);
}

.demo-left {
  gap: var(--space-md);
}

/* ─── Home: Portfolio ──────────────────────────────── */
.portfolio-section,
.portfolio-section.section {
  padding: var(--space-section-y) var(--space-section-x);
}

.portfolio-head {
  margin-bottom: var(--space-2xl);
}

.portfolio-stats {
  gap: var(--space-lg) var(--space-2xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
}

.portfolio-stats-note {
  margin: var(--space-lg) auto 0;
  line-height: var(--prose-line);
  max-width: var(--prose-width);
}

.pf-stat-lbl {
  margin-top: var(--space-xs);
}

/* ─── Video embed ────────────────────────────────────── */
.video-section {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
}

.parking-video-more {
  margin-top: var(--space-lg);
  line-height: var(--prose-line);
}

.video-card-caption {
  margin-top: var(--space-md);
  line-height: var(--prose-line);
}

/* ─── Grids & cards ────────────────────────────────── */
.cms-grid,
.portfolio-grid {
  gap: var(--space-grid);
  margin-top: var(--space-2xl);
}

.content-card__body {
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  gap: var(--space-md);
}

.content-card__title {
  line-height: 1.35;
  margin-bottom: var(--space-xs);
}

.content-card__meta {
  margin-bottom: var(--space-sm);
}

.content-card__desc {
  margin-bottom: 0;
}

.content-card__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}

.cms-back-link {
  margin-top: var(--space-3xl);
}

/* ─── Feature rows ───────────────────────────────────── */
.feature-split {
  gap: var(--prose-block-gap);
  margin-top: var(--space-2xl);
}

.feature-row {
  gap: var(--space-2xl);
}

.feature-row__title {
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.feature-row__desc {
  margin-bottom: var(--space-lg);
}

/* ─── Blog / project / use-case detail ───────────────── */
.cms-detail {
  padding-top: calc(var(--nav-height, 76px) + var(--space-2xl));
  padding-bottom: var(--space-section-y);
}

.cms-detail-inner {
  max-width: var(--prose-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-section-x);
  padding-right: var(--space-section-x);
}

.cms-detail-title {
  margin-bottom: var(--space-lg);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.cms-detail-excerpt {
  margin-bottom: var(--space-xl);
}

.cms-detail-tags {
  margin-bottom: var(--space-2xl);
}

.cms-detail-meta {
  margin: 0 0 var(--space-xl);
}

.cms-hero-media {
  margin: var(--space-xl) 0 var(--space-2xl);
}

.cms-block {
  margin-bottom: var(--prose-block-gap);
  padding-bottom: var(--space-2xl);
}

.cms-section-heading {
  margin: var(--space-3xl) 0 var(--space-lg);
}

/* ─── Why / About / Contact ─────────────────────────── */
#why-us.section,
.section.section-dark {
  padding: var(--space-section-y) var(--space-section-x);
}

.why-grid {
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.why-card {
  padding: var(--space-xl) var(--space-2xl);
}

.why-num {
  margin-bottom: var(--space-md);
}

.why-title {
  margin-bottom: var(--space-md);
  line-height: 1.35;
}

.about-section,
.about-section.section {
  padding: var(--space-section-y) var(--space-section-x);
}

.about-intro {
  margin-bottom: var(--space-3xl);
  max-width: var(--prose-width-wide);
  margin-left: auto;
  margin-right: auto;
}

.about-lead {
  margin-bottom: var(--space-xl);
}

.about-pills {
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.leadership-title {
  margin-bottom: var(--space-md);
}

.leadership-sub {
  margin-bottom: var(--space-2xl);
  max-width: var(--prose-width);
  margin-left: auto;
  margin-right: auto;
  line-height: var(--prose-line);
}

.leadership-grid {
  gap: var(--space-xl);
}

#contact.section,
#about-us.section {
  padding: var(--space-section-y) var(--space-section-x);
}

.contact-wrap {
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-info p {
  margin-bottom: var(--space-lg);
  line-height: var(--prose-line);
}

.contact-items {
  gap: var(--space-md);
}

.contact-form {
  padding: var(--space-2xl);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  margin-bottom: var(--space-sm);
}

/* ─── Legal (blog-style long read) ───────────────────── */
.legal-page {
  padding-top: calc(var(--nav-height, 76px) + var(--space-2xl));
  padding-bottom: var(--space-section-y);
}

.legal-page__layout {
  gap: var(--space-2xl);
  max-width: 56rem;
}

.legal-page__main {
  max-width: var(--prose-width);
}

.legal-page__title {
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.legal-page__updated {
  margin-bottom: var(--space-xl);
}

.legal-page__intro {
  margin-bottom: var(--space-2xl);
}

.legal-page__section + .legal-page__section {
  margin-top: var(--prose-block-gap);
}

.legal-page__section-title {
  font-size: 1.25rem;
}

/* ─── Footer ─────────────────────────────────────────── */
footer {
  padding: var(--space-3xl) var(--space-section-x) var(--space-2xl);
}

.footer-top {
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.footer-brand p {
  line-height: var(--prose-line);
  max-width: var(--prose-width);
}

.footer-brand-lockup {
  margin-bottom: var(--space-md);
}

.footer-col h4 {
  margin-bottom: var(--space-md);
}

.footer-col ul li {
  margin-bottom: var(--space-sm);
}

.footer-bottom {
  padding-top: var(--space-lg);
  gap: var(--space-md);
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .feature-row {
    gap: var(--space-xl);
  }

  .feature-split {
    gap: var(--space-2xl);
  }

  .panel-inner {
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  :root {
    --space-section-y: 3rem;
    --prose-size: 1rem;
  }

  .section,
  #services.section,
  .portfolio-section,
  .portfolio-section.section,
  .about-section,
  .about-section.section,
  #why-us.section,
  .section.section-dark,
  #contact.section,
  #parking-demo.section {
    padding: var(--space-section-y) var(--page-gutter, 1.25rem);
  }

  .section-sub {
    margin-bottom: var(--space-2xl);
  }

  .hero,
  .hero:has(.hero-infinite-grid) {
    min-height: auto;
    padding-top: calc(var(--nav-height-mobile, 64px) + var(--space-xl));
    padding-bottom: var(--space-2xl);
  }

  .hero-stats {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    gap: var(--space-xl);
  }

  .cms-detail-inner {
    padding-left: var(--page-gutter, 1.25rem);
    padding-right: var(--page-gutter, 1.25rem);
  }

  .about-intro {
    margin-bottom: var(--space-2xl);
  }

  .tab-bar-sticky-wrap {
    margin-bottom: var(--space-lg);
  }

  .contact-wrap {
    gap: var(--space-2xl);
  }
}

@media (max-width: 480px) {
  :root {
    --space-section-y: 2.75rem;
  }

  .feature-split {
    gap: var(--space-xl);
  }

  .content-card__body {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
  }
}