:root {
  --primary-color: #2563eb;
  --secondary-color: #475569;
  --accent-color: #f59e0b;
  --heading-font: Inter;
  --body-font: Inter;
  --button-radius: 6px;
  --card-radius: 10px;
  --content-width: 1140px;
  --section-spacing: 64px;
  --header-layout: standard;
  --footer-layout: standard;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--body-font), system-ui, sans-serif;
    color: #1c1f23;
    background: #fff;
}

h1, h2, h3, h4 { font-family: var(--heading-font), system-ui, sans-serif; }

a { color: var(--primary-color); }

.container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 0;
}

.site-header .container { display: flex; align-items: center; gap: 24px; }
.site-header.layout-centered .container { flex-direction: column; gap: 10px; }
.site-header.layout-minimal nav { display: none; }

.site-title { font-weight: 600; font-size: 18px; text-decoration: none; color: inherit; }
.site-header nav { display: flex; gap: 16px; margin-left: auto; }
.site-header.layout-centered nav { margin-left: 0; }

section.block { padding: var(--section-spacing) 0; }

.block-hero { background: #f8fafc; text-align: left; }
.block-hero.align-center { text-align: center; }
.block-hero.align-right { text-align: right; }
.block-hero h1 { font-size: 40px; margin: 0 0 12px; }

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--button-radius);
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

.block-image-text .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.block-image-text.image-right .grid > figure { order: 2; }

.gallery-grid { display: grid; gap: 16px; }

.card {
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    padding: 20px;
}

.block-cta { background: var(--accent-color); color: #fff; }
.block-cta a { color: #fff; }

.site-footer {
    border-top: 1px solid #e5e7eb;
    padding: 28px 0;
    color: #6b7280;
    font-size: 14px;
}

.site-footer nav { display: flex; gap: 16px; margin-bottom: 10px; }
.site-footer.layout-compact nav { display: none; }
.site-footer.layout-columns nav { flex-direction: column; gap: 6px; }

img { max-width: 100%; height: auto; }

form.cms-form label { display: block; margin: 12px 0 4px; font-weight: 500; }
form.cms-form input, form.cms-form textarea, form.cms-form select {
    width: 100%;
    padding: 9px;
    border: 1px solid #cbd5e1;
    border-radius: var(--button-radius);
    font: inherit;
}

@media (max-width: 720px) {
    .block-image-text .grid { grid-template-columns: 1fr; }
    .block-hero h1 { font-size: 28px; }
}

/* ---------------------------------------------------------------------------
   Design tokens.

   A node's settings choose a token name; these rules are what the name means.
   Nothing here comes from content, which is the point: re-tuning a site's
   rhythm is an edit to this file, not to every page that was ever saved.
   --------------------------------------------------------------------------- */

:root {
    --sp-none: 0;
    --sp-xs: 8px;
    --sp-sm: 16px;
    --sp-md: 32px;
    --sp-lg: 64px;
    --sp-xl: 96px;
    --sp-2xl: 144px;
}

.sp-top-none { padding-top: var(--sp-none); }
.sp-top-xs { padding-top: var(--sp-xs); }
.sp-top-sm { padding-top: var(--sp-sm); }
.sp-top-md { padding-top: var(--sp-md); }
.sp-top-lg { padding-top: var(--sp-lg); }
.sp-top-xl { padding-top: var(--sp-xl); }
.sp-top-2xl { padding-top: var(--sp-2xl); }

.sp-bottom-none { padding-bottom: var(--sp-none); }
.sp-bottom-xs { padding-bottom: var(--sp-xs); }
.sp-bottom-sm { padding-bottom: var(--sp-sm); }
.sp-bottom-md { padding-bottom: var(--sp-md); }
.sp-bottom-lg { padding-bottom: var(--sp-lg); }
.sp-bottom-xl { padding-bottom: var(--sp-xl); }
.sp-bottom-2xl { padding-bottom: var(--sp-2xl); }

.block.align-left { text-align: left; }
.block.align-center { text-align: center; }
.block.align-right { text-align: right; }

/* A background image is set as an inline declaration by the renderer; these
   make it behave rather than tile. */
.block[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

/* Layout blocks.

   A container carries the padding for the group, so the blocks inside it do
   not each add their own on top. */
.block-container > .container > .block { padding-top: 0; padding-bottom: 0; }
.block-container.preset-narrow > .container { max-width: 760px; }
.block-container.preset-full > .container { max-width: none; padding: 0; }

.block-row { display: grid; gap: 32px; }
.block-column { min-width: 0; }

/* Column counts.

   One set of rules serves the row block and the gallery grid, so "three across"
   means the same thing wherever it is asked for. */
.cols-desktop-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cols-desktop-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-desktop-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-desktop-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-desktop-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-desktop-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.hide-desktop { display: none; }

@media (max-width: 1024px) {
    .hide-desktop { display: revert; }
    .hide-tablet { display: none; }

    .cols-tablet-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .cols-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cols-tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cols-tablet-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .cols-tablet-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .hide-tablet { display: revert; }
    .hide-mobile { display: none; }

    /* Without an explicit mobile choice, a multi-column row stacks. That is
       almost always what was meant, and it is the safe direction to be wrong
       in — a six-column row on a phone is unreadable. */
    .block-row, .gallery-grid { grid-template-columns: minmax(0, 1fr); }

    .cols-mobile-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .cols-mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-mobile-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cols-mobile-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cols-mobile-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .cols-mobile-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Presets. */
.block-rich-text.preset-narrow .container { max-width: 680px; }
.block-rich-text.preset-wide .container { max-width: 1320px; }
.block-hero.preset-minimal { background: transparent; }
.block-hero.preset-overlay { position: relative; color: #fff; }
.block-hero.preset-overlay h1, .block-hero.preset-overlay p { position: relative; }
.block-image-text.preset-card .grid > div { border: 1px solid #e5e7eb; border-radius: var(--card-radius); padding: 20px; }
.block-image-text.preset-wide-image .grid { grid-template-columns: 2fr 1fr; }
.block-cta.preset-boxed .container > * { max-width: 720px; margin-inline: auto; }
.block-gallery.preset-wide .container { max-width: 1440px; }
.block-form.preset-boxed form.cms-form {
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    padding: 24px;
}

.cms-preview-note { color: #6b7280; font-size: 13px; }

/* Blocks made of repeating entries.

   One grid serves features, statistics and testimonials. The entry count per
   device comes from the block's responsive settings; without one it fits as
   many as will comfortably sit side by side. */
.item-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.block-features.preset-boxed .block-feature-item,
.block-stats.preset-boxed .block-stat-item,
.block-testimonials.preset-boxed .block-testimonial-item {
    background: #f8fafc;
    border-radius: var(--card-radius);
    padding: 20px;
}

.block-features.preset-bordered .block-feature-item {
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    padding: 20px;
}

.block-feature-item h3 { margin: 0 0 8px; font-size: 18px; }
.block-lead { color: #6b7280; margin-top: 0; }

.stat-value { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--primary-color); }
.stat-label { font-weight: 500; margin-top: 4px; }
.block-stat-item small { color: #6b7280; }

.block-testimonial-item { margin: 0; }
.block-testimonial-item blockquote {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.6;
}
.block-testimonial-item figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.block-testimonial-item figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cite-name { font-weight: 600; }
.cite-role { color: #6b7280; font-size: 14px; }

.faq-list { display: grid; gap: 12px; max-width: 820px; }
.block-faq-item {
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    padding: 14px 18px;
}
.block-faq-item > summary { cursor: pointer; font-weight: 600; }
.faq-answer { padding-top: 8px; }
.block-faq.preset-boxed .faq-list { background: #f8fafc; padding: 16px; border-radius: var(--card-radius); }

.map-body { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.block-map.preset-wide .map-body { grid-template-columns: 1fr; }
.block-map.preset-boxed .map-details {
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    padding: 20px;
}
.map-details address { font-style: normal; line-height: 1.7; }

@media (max-width: 720px) {
    .map-body { grid-template-columns: 1fr; }
}