/* Base stylesheet for published sites. Theme values come from :root variables
   appended by the renderer; sections may override --sec-* locally. */

:root {
  --color-primary: #3355ff;
  --color-primary-contrast: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #f5f6f8;
  --color-fg: #16181d;
  --color-muted: #5c6270;
  --font-heading: 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Segoe UI', system-ui, sans-serif;
  --radius: 10px;
  --container-max: 1080px;
  --sec-pad: 72px;
  --sec-bg: transparent;
  --sec-fg: inherit;
}

* { box-sizing: border-box; }

/* Element defaults are variable-driven so the Theme editor's "Defaults" tab
   can override every one of them (fallbacks = the classic values). */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: var(--body-size, 1rem);
  line-height: var(--body-line-height, 1.6);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--heading-line-height, 1.2);
  margin: 0 0 var(--heading-spacing, 0.5em);
}
h1 { font-size: var(--h1-size, clamp(2rem, 5vw, 3.25rem)); }
h2 { font-size: var(--h2-size, clamp(1.5rem, 3.5vw, 2.25rem)); }
h3 { font-size: var(--h3-size, 1.17em); }
h4 { font-size: var(--h4-size, 1em); }
p { margin: 0 0 var(--paragraph-spacing, 1em); }
img { max-width: 100%; display: block; }
a { color: var(--link-color, var(--color-primary)); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

.sec { padding: var(--sec-pad) 0; background: var(--sec-bg); color: var(--sec-fg); }

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: 12px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

/* nav */
.sec-nav { padding: 18px 0; border-bottom: 1px solid var(--color-surface); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: var(--color-fg); text-decoration: none; }

/* hero */
.hero-inner { display: flex; align-items: center; gap: 48px; }
.sec-hero.variant-center .hero-inner { flex-direction: column; text-align: center; }
.hero-copy { flex: 1; }
.hero-subtitle { color: var(--color-muted); font-size: 1.15rem; }
.hero-media { flex: 1; }
.hero-media img { border-radius: var(--radius); }

/* features */
.sec-title { text-align: center; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.feature-card { background: var(--color-surface); border-radius: var(--radius); padding: 28px; }
.feature-card h3 { margin-bottom: 0.35em; }
.feature-card p { color: var(--color-muted); margin: 0; }

/* text: same content width as every other section by default; themes can
   narrow articles via the --text-max default (Theme > Defaults). */
.text-inner { max-width: var(--text-max, var(--container-max)); }
.text-inner .sec-title { text-align: left; }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; }
.gallery-cell { margin: 0; }
.gallery-cell img { border-radius: var(--radius); width: 100%; height: 220px; object-fit: cover; }

/* cta */
.sec-cta { background: var(--color-primary); color: var(--color-primary-contrast); text-align: center; }
.sec-cta .btn { background: var(--color-primary-contrast); color: var(--color-primary); }
.cta-subtitle { opacity: 0.85; }

/* footer */
.sec-footer { background: var(--color-surface); padding: 36px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-text { color: var(--color-muted); }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--color-muted); text-decoration: none; }

/* whole-slot links keep the surrounding text style */
.slot-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* inline images in editable text: class-based sizing/alignment only, no absolutes.
   Images flow INLINE with the surrounding text by default (icons, badges,
   verified ticks); an alignment class (rt-left/center/right) promotes them
   to block-level content images on their own row. */
.richtext img, [data-cms-kind="text"] img { display: inline-block; vertical-align: middle; border-radius: var(--radius); }
.richtext img.rt-left, .richtext img.rt-center, .richtext img.rt-right { display: block; margin: 12px 0; }
/* Width steps (5%..100% in steps of 5) written by the media bar slider. */
.richtext img.rt-w-5, [data-cms-kind="text"] img.rt-w-5 { width: 5%; }
.richtext img.rt-w-10, [data-cms-kind="text"] img.rt-w-10 { width: 10%; }
.richtext img.rt-w-15, [data-cms-kind="text"] img.rt-w-15 { width: 15%; }
.richtext img.rt-w-20, [data-cms-kind="text"] img.rt-w-20 { width: 20%; }
.richtext img.rt-w-25, [data-cms-kind="text"] img.rt-w-25 { width: 25%; }
.richtext img.rt-w-30, [data-cms-kind="text"] img.rt-w-30 { width: 30%; }
.richtext img.rt-w-35, [data-cms-kind="text"] img.rt-w-35 { width: 35%; }
.richtext img.rt-w-40, [data-cms-kind="text"] img.rt-w-40 { width: 40%; }
.richtext img.rt-w-45, [data-cms-kind="text"] img.rt-w-45 { width: 45%; }
.richtext img.rt-w-50, [data-cms-kind="text"] img.rt-w-50 { width: 50%; }
.richtext img.rt-w-55, [data-cms-kind="text"] img.rt-w-55 { width: 55%; }
.richtext img.rt-w-60, [data-cms-kind="text"] img.rt-w-60 { width: 60%; }
.richtext img.rt-w-65, [data-cms-kind="text"] img.rt-w-65 { width: 65%; }
.richtext img.rt-w-70, [data-cms-kind="text"] img.rt-w-70 { width: 70%; }
.richtext img.rt-w-75, [data-cms-kind="text"] img.rt-w-75 { width: 75%; }
.richtext img.rt-w-80, [data-cms-kind="text"] img.rt-w-80 { width: 80%; }
.richtext img.rt-w-85, [data-cms-kind="text"] img.rt-w-85 { width: 85%; }
.richtext img.rt-w-90, [data-cms-kind="text"] img.rt-w-90 { width: 90%; }
.richtext img.rt-w-95, [data-cms-kind="text"] img.rt-w-95 { width: 95%; }
.richtext img.rt-w-100, [data-cms-kind="text"] img.rt-w-100 { width: 100%; }
.richtext img.rt-left { margin-right: auto; }
.richtext img.rt-center { margin-left: auto; margin-right: auto; }
.richtext img.rt-right { margin-left: auto; }

/* accordion */
.sec-accordion .acc-item { border-bottom: 1px solid var(--color-surface); }
.sec-accordion .acc-summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sec-accordion .acc-summary::-webkit-details-marker { display: none; }
.sec-accordion .acc-summary::after { content: '\002B'; font-weight: 400; margin-left: 12px; opacity: 0.6; }
.sec-accordion .acc-item[open] .acc-summary::after { content: '\2212'; }
.sec-accordion .acc-content { padding: 0 0 16px; }

/* tabs */
.sec-tabs .tabs-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-surface); margin-bottom: 20px; }
.sec-tabs .tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 16px; margin-bottom: -1px; font: inherit; color: inherit; cursor: pointer; }
.sec-tabs .tab-btn.active { border-bottom-color: var(--color-primary); font-weight: 600; }
.sec-tabs .tab-panel { display: none; }
.sec-tabs .tab-panel.active { display: block; }

/* embed */
.sec-embed .embed-inner { min-height: 24px; }

/* copywriter-added blocks inside any flex/grid container */
.cms-block { min-width: 0; }

/* Per-block alignment set from the editor's text bar on ONE paragraph/
   heading/list item. An explicit per-element choice must beat every broader
   rule (parent box companions, .sec-title...) - hence !important. */
.ta-left { text-align: left !important; }
.ta-center { text-align: center !important; }
.ta-right { text-align: right !important; }
.ta-justify { text-align: justify !important; }

@media (max-width: 720px) {
  .hero-inner { flex-direction: column; }
  .nav-inner { flex-direction: column; gap: 12px; }
}

:root {
  --color-primary: #bc7c4b;
  --color-primary-contrast: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #f7f4f0;
  --color-fg: #121212;
  --color-muted: #6d6d6d;
  --font-heading: Poppins;
  --font-body: Poppins;
  --radius: 8px;
  --container-max: 830px;
  --sec-pad: 48px;
  --paragraph-spacing: 0;
  --heading-spacing: 0;
  --c-c-bg: #ffffff;
  --c-c-ink: #121212;
  --c-c-muted: #6d6d6d;
  --c-c-brand: #bc7c4b;
  --c-c-brand-contrast: #ffffff;
  --c-c-banner: #bc7c4b;
  --c-c-surface: #f7f4f0;
  --c-c-divider: #e6e6e6;
  --c-c-verified: #2fac66;
  --c-c-overlay: #00000080;
  --shadow-s-soft: 0px 4px 14px 0px #0000001a;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/statics/fonts/5238525b-21ce-4ce6-a498-61fed7a6187c.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/statics/fonts/4d12b404-983f-4a98-90b9-b1b6bc13bfbc.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/statics/fonts/aa7ee239-1693-4f45-aa88-c54aadfbf5a1.woff2') format('woff2');
}
.typo-t-h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--c-c-ink);
  text-decoration: none;
}
.typo-t-h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-c-ink);
  text-decoration: none;
}
.typo-t-body {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--c-c-ink);
  text-decoration: none;
}
.typo-t-body-bold {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-c-ink);
  text-decoration: none;
}
.typo-t-byline {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-c-ink);
  text-decoration: none;
}
.typo-t-caption {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--c-c-muted);
  text-decoration: none;
}
.typo-t-banner {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-c-brand-contrast);
  text-decoration: none;
}
.tc-c-bg { color: var(--c-c-bg); }
.bc-c-bg { background-color: var(--c-c-bg); }
.tc-c-ink { color: var(--c-c-ink); }
.bc-c-ink { background-color: var(--c-c-ink); }
.tc-c-muted { color: var(--c-c-muted); }
.bc-c-muted { background-color: var(--c-c-muted); }
.tc-c-brand { color: var(--c-c-brand); }
.bc-c-brand { background-color: var(--c-c-brand); }
.tc-c-brand-contrast { color: var(--c-c-brand-contrast); }
.bc-c-brand-contrast { background-color: var(--c-c-brand-contrast); }
.tc-c-banner { color: var(--c-c-banner); }
.bc-c-banner { background-color: var(--c-c-banner); }
.tc-c-surface { color: var(--c-c-surface); }
.bc-c-surface { background-color: var(--c-c-surface); }
.tc-c-divider { color: var(--c-c-divider); }
.bc-c-divider { background-color: var(--c-c-divider); }
.tc-c-verified { color: var(--c-c-verified); }
.bc-c-verified { background-color: var(--c-c-verified); }
.tc-c-overlay { color: var(--c-c-overlay); }
.bc-c-overlay { background-color: var(--c-c-overlay); }
.bx-b-banner.bx-b-banner {
  padding: 10px 16px 10px 16px;
  background-color: var(--c-c-banner);
  color: var(--c-c-brand-contrast);
  border-top-style: none;
  border-top-width: 0px;
  border-top-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-right-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-bottom-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-left-color: currentColor;
  border-radius: 0px 0px 0px 0px;
}
.bx-b-btn-primary.bx-b-btn-primary {
  padding: 16px 36px 16px 36px;
  background-color: var(--c-c-brand);
  color: var(--c-c-brand-contrast);
  border-top-style: none;
  border-top-width: 0px;
  border-top-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-right-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-bottom-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-left-color: currentColor;
  border-radius: 8px 8px 8px 8px;
}
.bx-b-image.bx-b-image {
  padding: 0 0 0 0;
  background-color: var(--c-c-surface);
  border-top-style: none;
  border-top-width: 0px;
  border-top-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-right-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-bottom-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-left-color: currentColor;
  border-radius: 8px 8px 8px 8px;
}
.bx-b-avatar.bx-b-avatar {
  padding: 0 0 0 0;
  background-color: var(--c-c-surface);
  border-top-style: none;
  border-top-width: 0px;
  border-top-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-right-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-bottom-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-left-color: currentColor;
  border-radius: 100px 100px 100px 100px;
}
.bx-b-reason-row.bx-b-reason-row {
  padding: 24px 0 24px 0;
  background-color: var(--c-c-bg);
  color: var(--c-c-ink);
  border-top-style: none;
  border-top-width: 0px;
  border-top-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-right-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-bottom-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-left-color: currentColor;
  border-radius: 0px 0px 0px 0px;
}
.bx-b-overlay-label.bx-b-overlay-label {
  padding: 4px 10px 4px 10px;
  background-color: var(--c-c-overlay);
  color: var(--c-c-brand-contrast);
  border-top-style: none;
  border-top-width: 0px;
  border-top-color: currentColor;
  border-right-style: none;
  border-right-width: 0px;
  border-right-color: currentColor;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-bottom-color: currentColor;
  border-left-style: none;
  border-left-width: 0px;
  border-left-color: currentColor;
  border-radius: 4px 4px 4px 4px;
}
.richtext ul.cms-list-default-ul,
.richtext ol.cms-list-default-ol,
.richtext ul.list-default-ul,
.richtext ol.list-default-ol,
.richtext ul:not([class*="cms-list-"]):not([class*="list-"]),
.richtext ol:not([class*="cms-list-"]):not([class*="list-"]) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1em;
  padding-left: 1.5em;
  overflow: visible;
}
.richtext ul.cms-list-default-ul,
.richtext ul.list-default-ul,
.richtext ul:not([class*="cms-list-"]):not([class*="list-"]) { list-style-type: disc; }
.richtext ol.cms-list-default-ol,
.richtext ol.list-default-ol,
.richtext ol:not([class*="cms-list-"]):not([class*="list-"]) { list-style-type: decimal; }
.richtext ul.cms-list-l-check, .richtext ol.cms-list-l-check, .richtext ul.list-l-check, .richtext ol.list-l-check {
  display: block;
  width: 100%;
  max-width: 100%;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  overflow: visible;
}
.richtext ul.cms-list-l-check > li, .richtext ol.cms-list-l-check > li, .richtext ul.list-l-check > li, .richtext ol.list-l-check > li {
  display: list-item;
  position: relative;
  padding-left: 1.75em;
  margin: 0 0 0.35em;
  width: auto;
  max-width: 100%;
  font-family: inherit;
  overflow-wrap: break-word;
}
.richtext ul.cms-list-l-check > li::before, .richtext ol.cms-list-l-check > li::before, .richtext ul.list-l-check > li::before, .richtext ol.list-l-check > li::before {
  content: '\f058';
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  position: absolute;
  left: 0;
  width: 1.25em;
  text-align: center;
  font-size: 1em;
  line-height: inherit;
  pointer-events: none;
}
.richtext ul.cms-list-l-check > li::before, .richtext ol.cms-list-l-check > li::before, .richtext ul.list-l-check > li::before, .richtext ol.list-l-check > li::before {
  color: var(--c-c-brand);
}
