:root {
--color-bg: #f5ead8;
--color-surface: #ebddc5;
--color-text: #201e1d;
--color-accent: #c67139;
--color-accent-2: #7a8a5e;
--color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f9f4ed;
--color-neutral-200: #eee7db;
--color-neutral-300: #dcd3c4;
--color-neutral-400: #c0b6a5;
--color-neutral-500: #a19786;
--color-neutral-600: #82796a;
--color-neutral-700: #645c50;
--color-neutral-800: #474238;
--color-neutral-900: #2e2b25;
--color-accent-100: #fff2eb;
--color-accent-200: #ffe1d0;
--color-accent-300: #ffc6a5;
--color-accent-400: #f6a06b;
--color-accent-500: #d67f48;
--color-accent-600: #b2622d;
--color-accent-700: #8c491a;
--color-accent-800: #643312;
--color-accent-900: #402310;
--color-accent-2-100: #f0fae1;
--color-accent-2-200: #e1eecc;
--color-accent-2-300: #ccdbb2;
--color-accent-2-400: #aebf92;
--color-accent-2-500: #8fa073;
--color-accent-2-600: #728157;
--color-accent-2-700: #56633f;
--color-accent-2-800: #3d472b;
--color-accent-2-900: #272e1b;
--font-heading: "Caprasimo", system-ui, sans-serif;
--font-heading-weight: 400;
--font-body: "Figtree", system-ui, sans-serif;
--space-1: 4.4px;
--space-2: 8.8px;
--space-3: 13.2px;
--space-4: 17.6px;
--space-6: 26.4px;
--space-8: 35.2px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)} *, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } .hr {
height: 1px; border: 0; margin: var(--space-4) 0;
background: var(--color-divider);
} .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; text-decoration: none;
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent;
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); } .field > label {
display: block; font-size: 12px; margin-bottom: 5px;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
width: 16px; height: 16px; flex: none; border-radius: 50%;
border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
border-color: var(--color-accent); background: var(--color-accent);
box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
display: inline-flex; overflow: hidden;
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } .card {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
display: flex; align-items: center; gap: 6px; font-size: 11px;
color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); } .tag {
display: inline-flex; align-items: center; font-size: 11px;
letter-spacing: 0.02em; padding: 3px 10px;
border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } .nav {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: none;
}
.nav-brand {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } .table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 60%, transparent);
padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
padding: var(--space-2);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } .dialog-backdrop {
position: fixed; inset: 0; display: grid; place-items: center;
padding: var(--space-4);
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } .card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }:root {
--color-bg: #fbfaf6;
--color-surface: #f6f3e9;
--color-accent: #7d8c63;
--color-accent-100: #f2f4ec; --color-accent-200: #e2e7d6; --color-accent-300: #c9d2b6;
--color-accent-400: #a4b18a; --color-accent-500: #7d8c63; --color-accent-600: #68764f;
--color-accent-700: #4f5b3c; --color-accent-800: #39422b; --color-accent-900: #232919;
--color-accent-2: #efe6cd;
--color-accent-2-100: #faf5e7; --color-accent-2-200: #f4ecd9; --color-accent-2-300: #efe6cd;
--color-accent-2-500: #d9c99f; --color-accent-2-800: #5c5233; --color-accent-2-900: #3d3620;
--gutter: max(48px, calc((100vw - 1344px) / 2));
--band-gutter: max(40px, calc((100vw - 1360px) / 2));
}
html { scroll-behavior: smooth; }
body.sbb { margin: 0; background: var(--color-bg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body.sbb a { color: var(--color-accent-700); }
body.sbb a:hover { color: var(--color-accent-800); }
body.sbb a.btn-primary, body.sbb a.btn-primary:hover { color: var(--color-bg); }
body.sbb a.btn-secondary, body.sbb a.btn-secondary:hover { color: var(--color-text); }
[id] { scroll-margin-top: 96px; }
img { max-width: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.sbb-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--color-bg); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-md); }
.sbb-skip:focus { top: 12px; } .sbb-eyebrow { font-size: 14px; font-weight: 600; color: var(--color-accent-700); margin-bottom: 14px; }
.sbb-eyebrow--sand { color: var(--color-accent-2-800); }
.sbb-eyebrow--spaced { margin-top: 36px; }
.sbb-section h2, .sbb-head h2 { font-size: 40px; letter-spacing: -.02em; margin: 0 0 16px; }
.sbb-body { font-size: 17px; line-height: 1.7; color: var(--color-neutral-800); margin: 0 0 16px; max-width: 54ch; }
.sbb-small { font-size: 14px; line-height: 1.6; color: var(--color-neutral-600); margin: 22px 0 0; max-width: 70ch; }
.sbb-more { font-size: 14px; white-space: nowrap; }
.sbb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sbb .btn { transition: background-color .15s; }
.sbb .sbb-hero .btn, .sbb .sbb-actions .btn, .sbb .sbb-cta .btn { font-size: 15px; padding: 14px 26px; white-space: nowrap; } .sbb-header { padding: 22px var(--gutter) 0; position: relative; z-index: 40; }
.sbb-nav { padding: 14px 18px 14px 30px; gap: clamp(14px, 2vw, 28px); background: var(--color-bg); border-radius: 999px; box-shadow: var(--shadow-sm); }
.sbb .sbb-brand { font-size: 22px; white-space: nowrap; color: var(--color-text); text-decoration: none; }
.sbb-menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.sbb .sbb-menu a { white-space: nowrap; color: var(--color-text); }
.sbb .sbb-menu a:hover, .sbb .sbb-menu .current-menu-item:not(.menu-item-type-custom) > a { color: var(--color-accent); }
.sbb .sbb-nav__book { font-size: 14px; padding: 11px 22px; white-space: nowrap; }
.sbb-toggle { display: none; width: 44px; height: 44px; flex: none; border-radius: 50%; border: none; background: var(--color-accent-2-200); place-items: center; cursor: pointer; font-size: 18px; color: var(--color-neutral-900); }
.sbb-toggle:hover { background: var(--color-accent-2-300); }
.sbb-toggle__close { display: none; }
.sbb-header.is-open .sbb-toggle__open { display: none; }
.sbb-header.is-open .sbb-toggle__close { display: inline; }
.sbb-panel { display: none; } .sbb-hero-wrap { padding: 30px var(--gutter) 80px; }
.sbb-hero { position: relative; height: clamp(480px, 48vw, 680px); border-radius: 48px; overflow: hidden; background: var(--color-accent-2-200); }
.sbb-hero--page { height: clamp(440px, 40vw, 580px); }
.sbb-hero__media { position: absolute; inset: 0; }
.sbb-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sbb-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,245,231,.94) 0%, rgba(250,245,231,.78) 32%, rgba(250,245,231,0) 56%); }
.sbb-hero__text { position: absolute; left: clamp(28px, 4vw, 56px); top: 50%; transform: translateY(-50%); max-width: min(460px, 46%); }
.sbb-hero__text .sbb-eyebrow { margin-bottom: 0; }
.sbb-hero h1 { font-size: clamp(44px, 4.8vw, 70px); line-height: 1; letter-spacing: -.025em; margin: 14px 0 0; }
.sbb-hero--page h1 { font-size: clamp(40px, 4.2vw, 60px); }
.sbb-hero__lede { font-size: 17px; line-height: 1.6; margin: 16px 0 0; color: var(--color-neutral-800); }
.sbb-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sbb-hero--plain { height: auto; padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 56px); }
.sbb-hero--plain .sbb-hero__text { position: static; transform: none; max-width: 760px; } .sbb-band { margin: 0 var(--band-gutter) 90px; padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px); border-radius: 56px; background: var(--color-accent-2-200); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.sbb-band--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sbb-band--reverse .sbb-band__media { order: 2; }
.sbb-band__media { position: relative; aspect-ratio: 4 / 5; border-radius: 40px; overflow: hidden; background: var(--color-accent-2-300); }
.sbb-band__media img, .sbb-band__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.sbb-band__media--map { aspect-ratio: 1 / 1; }
.sbb-band h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 22px; color: var(--color-accent-2-900); max-width: 16ch; }
.sbb-band__text p { font-size: 17px; line-height: 1.7; color: var(--color-accent-2-900); margin: 0 0 16px; max-width: 50ch; }
.sbb-band__text p:last-of-type { margin-bottom: 30px; }
.sbb-band__text .sbb-actions { margin-bottom: 30px; }
.sbb-band--block { display: block; }
.sbb-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 24px; border-top: 1px solid rgba(61, 54, 32, .18); }
.sbb-point { display: grid; gap: 6px; align-content: start; }
.sbb .sbb-point__title { font-size: 19px; color: var(--color-accent-2-900); }
.sbb-point__text { font-size: 14px; line-height: 1.5; color: var(--color-accent-2-800); }
.sbb-points--plain { margin-top: 28px; border-top-color: var(--color-divider); }
.sbb-points--plain .sbb-point__title { color: var(--color-text); }
.sbb-points--plain .sbb-point__text { color: var(--color-neutral-700); } .sbb-section { padding: 0 var(--gutter) 90px; }
.sbb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; margin-bottom: 28px; }
.sbb-head h2 { margin: 0; }
.sbb-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.sbb-intro h2 { max-width: 14ch; }
.sbb-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; } .sbb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.sbb .sbb-card { display: block; color: var(--color-text); text-decoration: none; }
.sbb-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 32px; overflow: hidden; background: var(--color-neutral-200); }
.sbb-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; display: block; transition: transform .5s ease; }
.sbb-card:hover .sbb-card__media img { transform: scale(1.03); }
.sbb .sbb-card__title { font-size: 26px; margin-top: 14px; }
.sbb-card:hover .sbb-card__title { color: var(--color-accent-700); }
.sbb-card__text { font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); margin: 10px 0 0; }
.sbb-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.sbb .sbb-cards--four .sbb-card__title { font-size: 22px; }
.sbb-swipe-hint { display: none; } .sbb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sbb-tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sbb-tile { background: var(--color-surface); border-radius: 32px; padding: 30px 30px 26px; }
.sbb-tile p { font-size: 15px; line-height: 1.65; color: var(--color-neutral-800); margin: 10px 0 0; }
.sbb .sbb-tile__title { font-size: 22px; }
.sbb-tile--card { align-self: stretch; display: flex; flex-direction: column; }
.sbb-tile__price { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 15px; }
.sbb-prices { margin: 14px 0 0; }
.sbb-prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.sbb-prices > div:last-child { border-bottom: 0; }
.sbb-prices dd { margin: 0; font-weight: 600; white-space: nowrap; } .sbb-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sbb-step { background: var(--color-accent-2-100); border-radius: 32px; padding: 26px 26px 24px; }
.sbb-step__num { width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent-300); color: var(--color-accent-900); display: grid; place-items: center; font-family: var(--font-heading); font-size: 17px; }
.sbb .sbb-step__title { font-size: 20px; margin-top: 16px; color: var(--color-accent-2-900); }
.sbb-step p { font-size: 15px; line-height: 1.6; color: var(--color-accent-2-900); margin: 8px 0 0; } .sbb-ticks { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--color-divider); }
.sbb-ticks li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--color-divider); font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-800); }
.sbb-ticks li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.sbb-faq { margin-top: 8px; border-top: 1px solid var(--color-divider); }
.sbb-faq details { border-bottom: 1px solid var(--color-divider); }
.sbb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-family: var(--font-heading); font-size: 19px; line-height: 1.3; }
.sbb-faq summary::-webkit-details-marker { display: none; }
.sbb-faq summary::after { content: "+"; font-family: var(--font-body); font-size: 22px; line-height: 1; color: var(--color-accent-700); transition: transform .2s; }
.sbb-faq details[open] summary::after { transform: rotate(45deg); }
.sbb-faq details p { font-size: 15.5px; line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 20px; max-width: 60ch; } .sbb-reviews { background: var(--color-accent-800); padding: clamp(56px, 6vw, 90px) var(--gutter); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head arrows" "track track" "dots all"; align-items: end; row-gap: 40px; column-gap: 24px; }
.sbb-reviews__head { grid-area: head; }
.sbb-reviews__stars { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-accent-300); }
.sbb-reviews__stars span { letter-spacing: 2px; }
.sbb-reviews h2 { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -.02em; margin: 12px 0 0; color: var(--color-accent-2-100); }
.sbb-reviews__arrows { grid-area: arrows; justify-self: end; display: flex; gap: 10px; }
.sbb-arrow { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(250, 245, 231, .4); background: transparent; color: var(--color-accent-2-100); font-size: 20px; cursor: pointer; }
.sbb-arrow:hover { background: rgba(250, 245, 231, .12); }
.sbb-arrow--solid { border: none; background: var(--color-accent-2-100); color: var(--color-accent-900); }
.sbb-arrow--solid:hover { background: var(--color-accent-2-300); }
.sbb-reviews__viewport { grid-area: track; overflow: hidden; }
.sbb-reviews__track { display: flex; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.sbb-quote { flex: 0 0 100%; box-sizing: border-box; padding-right: 8%; margin: 0; }
.sbb-quote blockquote { font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.18; letter-spacing: -.015em; margin: 0; max-width: 26ch; color: var(--color-accent-2-100); }
.sbb-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: inherit; color: inherit; }
.sbb-quote__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--color-accent-300); color: var(--color-accent-900); display: grid; place-items: center; font-family: var(--font-heading); font-size: 18px; }
.sbb-quote__name { display: block; font-size: 15px; font-weight: 600; color: var(--color-accent-2-100); }
.sbb-quote__src { display: block; font-size: 13px; color: rgba(250, 245, 231, .7); }
.sbb-reviews__dots { grid-area: dots; display: flex; gap: 8px; align-self: center; }
.sbb-dot { width: 10px; height: 10px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: rgba(250, 245, 231, .35); transition: all .3s; }
.sbb-dot.is-active { width: 28px; background: var(--color-accent-2-100); }
.sbb .sbb-reviews__all { grid-area: all; justify-self: end; align-self: center; font-size: 14px; font-weight: 600; color: var(--color-accent-2-100); white-space: nowrap; }
.sbb .sbb-reviews__all:hover { color: #fff; } .sbb-cta { margin: 90px var(--band-gutter); padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px); border-radius: 56px; background: var(--color-accent-2-200); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sbb-cta h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 14px; color: var(--color-accent-2-900); }
.sbb-cta p { font-size: 17px; line-height: 1.7; color: var(--color-accent-2-900); margin: 0; max-width: 50ch; }
.sbb-reviews + .sbb-cta { margin-top: 90px; } .sbb-dl { display: grid; gap: 10px; font-size: 16px; padding-top: 18px; margin: 24px 0 0; border-top: 1px solid var(--color-divider); }
.sbb-dl > div { display: flex; justify-content: space-between; gap: 20px; }
.sbb-dl dt { color: var(--color-neutral-600); }
.sbb-dl dd { margin: 0; text-align: right; }
.sbb-formcard { background: var(--color-surface); border-radius: 40px; padding: 36px; }
.sbb .sbb-formcard__title { font-size: 26px; margin-bottom: 20px; }
.sbb-form { display: grid; gap: 16px; position: relative; }
.sbb-form .field > label { font-size: 14px; font-weight: 600; color: var(--color-neutral-700); }
.sbb-form .input { min-height: 48px; font-size: 15px; background: var(--color-bg); padding-inline: 18px; }
.sbb-form textarea.input { border-radius: 24px; padding: 14px 18px; min-height: 130px; }
.sbb-form select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23474238' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.sbb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sbb-form .btn { justify-self: start; margin-top: 4px; font-size: 15px; padding: 14px 26px; border: 0; }
.sbb-form__note { font-size: 13px; color: var(--color-neutral-600); margin: 0; }
.sbb-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sbb-form__msg { margin: 0; padding: 14px 18px; border-radius: 18px; font-size: 15px; }
.sbb-form__msg--ok { background: var(--color-accent-100); color: var(--color-accent-800); }
.sbb-form__msg--err { background: #f6e3dc; color: #7a2e18; } .sbb-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sbb-gallery__item { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; background: var(--color-neutral-200); cursor: zoom-in; }
.sbb-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sbb-gallery__item:hover img { transform: scale(1.03); } .sbb-gallery--blocks { display: block; }
.sbb-gallery--blocks > h2, .sbb-gallery--blocks .wp-block-heading { font-size: 30px; letter-spacing: -.02em; margin: 56px 0 18px; }
.sbb-gallery--blocks > h2:first-child, .sbb-gallery--blocks > .wp-block-heading:first-child { margin-top: 0; }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 0; }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { flex: 0 0 auto; width: calc((100% - 48px) / 4); margin: 0; }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: auto; object-fit: contain; border-radius: 24px; display: block; }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images figure.wp-block-image a { display: block; cursor: zoom-in; }
.sbb .sbb-gallery--blocks .wp-block-gallery figcaption { display: none; }
.sbb .sbb-gallery--blocks .wp-block-video { margin: 16px 0 0; max-width: 320px; }
.sbb .sbb-gallery--blocks .wp-block-video video { width: 100%; height: auto; border-radius: 24px; display: block; background: #000; }
.sbb .sbb-gallery--blocks .wp-block-video figcaption { font-size: 14px; color: var(--color-neutral-700, #6b6560); margin-top: 8px; }
.sbb-lightbox { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; }
.sbb-lightbox::backdrop { background: rgba(35, 41, 25, .88); }
.sbb-lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: 32px; display: block; }
.sbb-lightbox__close { position: absolute; top: -54px; right: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--color-accent-2-200); color: var(--color-neutral-900); font-size: 16px; cursor: pointer; } .sbb-prose > * { max-width: 760px; }
.sbb-prose p, .sbb-prose li { font-size: 17px; line-height: 1.7; color: var(--color-neutral-800); }
.sbb-prose h2 { font-size: 30px; margin: 40px 0 14px; }
.sbb-prose h3 { font-size: 22px; margin: 30px 0 10px; }
.sbb-prose img { border-radius: 32px; height: auto; }
.sbb-post { padding: 24px 0; border-bottom: 1px solid var(--color-divider); }
.sbb-post h2 { font-size: 28px; } .sbb-footer { padding: 40px var(--gutter) 44px; border-top: 1px solid var(--color-divider); font-size: 14px; }
.sbb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.sbb .sbb-footer__brand { font-size: 26px; color: var(--color-text); text-decoration: none; align-self: start; }
.sbb-footer__col { display: grid; gap: 6px; align-content: start; color: var(--color-neutral-800); }
.sbb-footer__label { font-size: 14px; font-weight: 600; color: var(--color-neutral-600); }
.sbb .sbb-footer__plain { color: var(--color-neutral-800); text-decoration: none; }
.sbb .sbb-footer__plain:hover { color: var(--color-accent-700); text-decoration: underline; }
.sbb-footer__social { display: grid; gap: 6px; }
.sbb-footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--color-divider); font-size: 13px; color: var(--color-neutral-600); }
.sbb-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sbb .sbb-footer__links a { color: var(--color-neutral-600); }
.sbb .sbb-footer__links a:hover { color: var(--color-accent-700); }
.sbb-bottombar { display: none; } @media (max-width: 1100px) {
.sbb-tiles--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbb-tiles--prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbb-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc((100% - 32px) / 3); }
} @media (max-width: 860px) {
:root { --gutter: 20px; }
[id] { scroll-margin-top: 80px; } .sbb-header { position: sticky; top: 0; padding: 12px 16px; background: rgba(251, 250, 246, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.admin-bar .sbb-header { top: var(--wp-admin--admin-bar--height, 0px); }
.sbb-nav { padding: 0; gap: 12px; background: transparent; border-radius: 0; box-shadow: none; }
.sbb .sbb-brand { font-size: 19px; }
.sbb-nav__links, .sbb .sbb-nav__book { display: none; }
.sbb-toggle { display: grid; }
.sbb-panel:not([hidden]) { display: grid; margin-top: 12px; padding: 10px 20px 20px; border-radius: 28px; background: var(--color-accent-2-100); box-shadow: var(--shadow-md); }
.sbb-panel__menu { list-style: none; margin: 0 0 4px; padding: 0; display: grid; }
.sbb .sbb-panel__menu a { display: block; padding: 14px 0; font-size: 18px; color: var(--color-neutral-900); text-decoration: none; border-bottom: 1px solid var(--color-divider); }
.sbb .sbb-panel__menu li:last-child a { border-bottom: 0; padding-bottom: 18px; }
.sbb .sbb-panel .btn { font-size: 15px; padding: 14px 0; margin: 0; } .sbb-hero-wrap { padding: 4px 16px 0; }
.sbb-hero, .sbb-hero--page { height: auto; border-radius: 0; overflow: visible; background: transparent; }
.sbb-hero__media { position: relative; inset: auto; aspect-ratio: 4 / 4.6; border-radius: 36px; overflow: hidden; }
.sbb-hero--page .sbb-hero__media { aspect-ratio: 4 / 3.4; }
.sbb-hero__shade { display: none; }
.sbb-hero__text { position: static; transform: none; max-width: none; padding: 26px 4px 56px; }
.sbb-hero h1, .sbb-hero--page h1 { font-size: 44px; line-height: 1.02; margin-top: 10px; }
.sbb-hero--page h1 { font-size: 38px; }
.sbb-hero__lede { font-size: 16px; margin-top: 14px; }
.sbb-hero__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sbb-hero__buttons .btn:only-child { grid-column: 1 / -1; }
.sbb .sbb-hero .btn { padding: 14px 0; }
.sbb-hero--plain { border-radius: 36px; background: var(--color-accent-2-200); padding: 8px 18px 0; margin-bottom: 40px; }
.sbb-hero--plain .sbb-hero__text { padding: 26px 4px 30px; } .sbb-band, .sbb-band--reverse { margin: 0 12px 56px; padding: 14px 14px 28px; border-radius: 36px; grid-template-columns: 1fr; gap: 0; }
.sbb-band--reverse .sbb-band__media { order: 0; }
.sbb-band__media { aspect-ratio: 4 / 3; border-radius: 26px; }
.sbb-band__text { padding: 22px 8px 0; }
.sbb-band__text .sbb-eyebrow { margin-bottom: 10px; }
.sbb-band h2 { font-size: 30px; line-height: 1.08; margin: 0 0 16px; }
.sbb-band__text p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.sbb-band__text p:last-of-type { margin-bottom: 22px; }
.sbb-band--block { padding: 30px 22px 28px; }
.sbb-points { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; }
.sbb-point { gap: 3px; }
.sbb .sbb-point__title { font-size: 17px; line-height: 1.25; } .sbb-section { padding: 0 20px 56px; }
.sbb-section h2, .sbb-head h2 { font-size: 30px; }
.sbb-head { gap: 12px; padding-bottom: 0; margin-bottom: 18px; }
.sbb-intro, .sbb-twocol { grid-template-columns: 1fr; gap: 32px; }
.sbb-twocol { gap: 48px; }
.sbb-body { font-size: 16px; line-height: 1.65; } .sbb-cards { grid-template-columns: 1fr; gap: 32px; }
.sbb-cards--swipe { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scroll-padding-left: 20px; scrollbar-width: none; }
.sbb-cards--swipe::-webkit-scrollbar { display: none; }
.sbb-cards--swipe > * { flex: 0 0 78%; scroll-snap-align: start; }
.sbb-cards--swipe::after { content: ""; flex: 0 0 6px; }
.sbb-card__media { border-radius: 28px; }
.sbb .sbb-card__title { font-size: 22px; }
.sbb-card__text { margin-top: 8px; line-height: 1.6; }
.sbb-swipe-hint { display: block; padding-top: 10px; font-size: 13px; color: var(--color-neutral-600); } .sbb-tiles, .sbb-tiles--four, .sbb-tiles--prices { grid-template-columns: 1fr; gap: 14px; }
.sbb-tile { border-radius: 28px; padding: 24px 22px 20px; }
.sbb-steps { grid-template-columns: 1fr; gap: 12px; }
.sbb-step { border-radius: 26px; padding: 22px 20px 20px; }
.sbb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sbb-gallery__item { border-radius: 24px; }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images { gap: 10px; }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc((100% - 10px) / 2); }
.sbb .sbb-gallery--blocks .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 18px; }
.sbb-gallery--blocks > h2, .sbb-gallery--blocks .wp-block-heading { font-size: 24px; margin-top: 40px; } .sbb-reviews { padding: 48px 20px 44px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "track track" "dots arrows" "all all"; row-gap: 28px; column-gap: 10px; }
.sbb-reviews__stars { gap: 8px; }
.sbb-reviews h2 { font-size: 30px; margin-top: 10px; }
.sbb-quote { padding-right: 4px; }
.sbb-quote blockquote { font-size: 25px; line-height: 1.25; letter-spacing: -.01em; min-height: 5em; max-width: none; }
.sbb-quote figcaption { margin-top: 22px; gap: 12px; }
.sbb-quote__avatar { width: 40px; height: 40px; font-size: 16px; }
.sbb-arrow { width: 48px; height: 48px; font-size: 18px; }
.sbb .sbb-reviews__all { justify-self: start; margin-top: -4px; } .sbb-cta { margin: 56px 12px; padding: 30px 22px 26px; border-radius: 36px; }
.sbb-cta h2 { font-size: 30px; }
.sbb-cta p { font-size: 16px; }
.sbb-cta .sbb-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
.sbb .sbb-cta .btn { padding: 14px 0; }
.sbb-formcard { border-radius: 32px; padding: 26px 20px; }
.sbb-form__row { grid-template-columns: 1fr; } .sbb-footer { padding: 36px 20px 120px; font-size: 15px; border-top: 0; }
.sbb-footer__grid { grid-template-columns: 1fr; gap: 24px; }
.sbb .sbb-footer__brand { font-size: 20px; line-height: 1.2; }
.sbb-footer__col { gap: 4px; }
.sbb-footer__social { display: flex; gap: 20px; }
.sbb-bottombar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); background: rgba(251, 250, 246, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--color-divider); }
.sbb .sbb-bottombar .btn { padding: 14px 22px; font-size: 15px; white-space: nowrap; }
.sbb .sbb-bottombar__book { flex: 1; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
} .sbb-footer__hours { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 14px; color: var(--color-neutral-700, #6b6560); }
.sbb-videoband .sbb-video { margin: 0; max-width: 340px; }
.sbb-video video { width: 100%; height: auto; display: block; border-radius: 28px; background: #000; }
.sbb-video figcaption { font-size: 14px; color: var(--color-neutral-700, #6b6560); margin-top: 8px; }
.sbb-band__text p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .sbb-form--plugin .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 16px; }
.sbb-form--plugin .gform_wrapper .gfield_label, .sbb-form--plugin .gform_wrapper legend.gfield_label { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.sbb-form--plugin .gform_wrapper input[type="text"], .sbb-form--plugin .gform_wrapper input[type="email"], .sbb-form--plugin .gform_wrapper input[type="tel"], .sbb-form--plugin .gform_wrapper select, .sbb-form--plugin .gform_wrapper textarea {
width: 100%; min-height: 48px; font: inherit; font-size: 15px; color: var(--color-text); background: var(--color-bg);
border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); border-radius: 999px; padding: 10px 18px; box-shadow: none;
}
.sbb-form--plugin .gform_wrapper textarea { border-radius: 24px; min-height: 130px; padding: 14px 18px; }
.sbb-form--plugin .gform_wrapper input:focus, .sbb-form--plugin .gform_wrapper textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
.sbb-form--plugin .gform_wrapper .gfield_required { color: var(--color-accent); }
.sbb-form--plugin .gform_wrapper .ginput_complex label, .sbb-form--plugin .gform_wrapper .gfield_description { font-size: 13px; color: var(--color-neutral-700, #6b6560); }
.sbb-form--plugin .gform_wrapper .gform_footer { margin-top: 8px; padding: 0; }
.sbb-form--plugin .gform_wrapper .gform_footer input[type="submit"], .sbb-form--plugin .gform_wrapper .gform_button {
background: var(--color-accent); color: var(--color-bg); border: 0; border-radius: 999px; padding: 14px 26px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.sbb-form--plugin .gform_wrapper .gform_button:hover { background: var(--color-accent-600); }
.sbb-form--plugin .gform_confirmation_message { font-size: 15px; padding: 16px 18px; border-radius: 20px; background: var(--color-accent-100); }
.sbb-media-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sbb-media-row__item { margin: 0; }
.sbb-media-row__item img, .sbb-media-row__item video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 28px; display: block; background: #000; }
.sbb-media-row__item figcaption { font-size: 14px; color: var(--color-neutral-700, #6b6560); margin-top: 8px; }
@media (max-width: 860px) {
.sbb-media-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sbb-media-row__item img, .sbb-media-row__item video { border-radius: 20px; }
} @media (min-width: 861px) {
.sbb-hero--split { background: var(--color-accent-2-200); }
.sbb-hero--split .sbb-hero__media { inset: 18px 18px 18px auto; width: min(44%, 560px); border-radius: 36px; overflow: hidden; }
.sbb-hero--split .sbb-hero__shade { display: none; }
.sbb-hero--split .sbb-hero__text { max-width: min(520px, 48%); }
} .sbb-reviews { row-gap: 28px; padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 64px); }
.sbb-quote blockquote { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; max-width: 44ch; }
.sbb-quote figcaption { margin-top: 20px; }
@media (max-width: 860px) {
.sbb-quote blockquote { font-size: 20px; line-height: 1.35; min-height: 0; }
} :root {
--space-section: clamp(56px, 3rem + 3vw, 96px); --space-head: clamp(18px, 1rem + .6vw, 28px); --fs-h1: clamp(34px, 1.6rem + 2.6vw, 64px);
--fs-h2: clamp(27px, 1.3rem + 1.4vw, 42px);
--fs-h3: clamp(19px, 1.05rem + .35vw, 24px);
--fs-body: clamp(15.5px, .92rem + .15vw, 17px);
--fs-small: 14px;
--radius-xl: clamp(28px, 1.4rem + 1.6vw, 48px);
--radius-lg: clamp(22px, 1.1rem + 1vw, 36px);
--radius-md: clamp(18px, .9rem + .7vw, 28px);
} .sbb-hero h1, .sbb-hero--page h1 { font-size: var(--fs-h1); line-height: 1.03; }
.sbb-section h2, .sbb-head h2, .sbb-band h2, .sbb-reviews h2, .sbb-cta h2, .sbb-prose h2,
.sbb-gallery--blocks > h2, .sbb-gallery--blocks .wp-block-heading { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.02em; }
.sbb .sbb-card__title, .sbb .sbb-cards--four .sbb-card__title, .sbb .sbb-tile__title, .sbb .sbb-step__title,
.sbb .sbb-formcard__title, .sbb-prose h3 { font-size: var(--fs-h3); line-height: 1.2; }
.sbb .sbb-point__title { font-size: calc(var(--fs-h3) - 3px); }
.sbb-faq summary { font-size: calc(var(--fs-h3) - 4px); }
.sbb-body, .sbb-band__text p, .sbb-hero__lede, .sbb-cta p, .sbb-prose p, .sbb-prose li { font-size: var(--fs-body); }
.sbb-card__text, .sbb-tile p, .sbb-step p, .sbb-ticks li, .sbb-faq details p, .sbb-prices > div { font-size: calc(var(--fs-body) - 1.5px); } .sbb-hero-wrap { padding-bottom: var(--space-section); }
.sbb-section { padding-bottom: var(--space-section); }
.sbb-band { margin-bottom: var(--space-section); border-radius: var(--radius-xl); }
.sbb-cta, .sbb-reviews + .sbb-cta { margin-top: var(--space-section); margin-bottom: var(--space-section); border-radius: var(--radius-xl); }
.sbb-head { margin-bottom: var(--space-head); padding-bottom: 0; }
.sbb-gallery--blocks > h2, .sbb-gallery--blocks .wp-block-heading { margin: var(--space-section) 0 var(--space-head); } .sbb-hero { border-radius: var(--radius-xl); }
.sbb-band__media, .sbb-hero--split .sbb-hero__media, .sbb-formcard { border-radius: var(--radius-lg); }
.sbb-card__media, .sbb-tile, .sbb-step, .sbb-media-row__item img, .sbb-media-row__item video { border-radius: var(--radius-md); } .sbb-reviews { padding: calc(var(--space-section) * .8) var(--gutter); row-gap: clamp(18px, 1rem + .8vw, 28px); }
.sbb-reviews h2 { margin-top: 14px; }
.sbb-quote blockquote { font-size: clamp(18px, .95rem + .75vw, 28px); line-height: 1.32; max-width: 46ch; min-height: 0;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.sbb-quote figcaption { margin-top: 16px; } .sbb .sbb-rating { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; border-radius: 999px;
background: rgba(250, 245, 231, .1); border: 1px solid rgba(250, 245, 231, .25); color: var(--color-accent-2-100); text-decoration: none; transition: background-color .15s; }
.sbb .sbb-rating:hover { background: rgba(250, 245, 231, .18); color: var(--color-accent-2-100); }
.sbb-rating__score { font-family: var(--font-heading); font-size: clamp(22px, 1.2rem + .5vw, 28px); line-height: 1; }
.sbb-rating__stars { color: #f2c14e; font-size: clamp(16px, .9rem + .3vw, 20px); letter-spacing: 2px; line-height: 1; }
.sbb-rating__count { font-size: 14px; font-weight: 600; color: rgba(250, 245, 231, .85); white-space: nowrap; } @media (min-width: 1025px) {
.sbb-hero:not(.sbb-hero--plain) { height: clamp(500px, 44vw, 660px); }
.sbb-hero--page:not(.sbb-hero--plain) { height: clamp(440px, 36vw, 560px); }
.sbb-band__media { aspect-ratio: auto; height: clamp(420px, 36vw, 560px); }
.sbb-band__media--map { height: clamp(360px, 30vw, 460px); }
} @media (max-width: 860px) {
.sbb-hero__media, .sbb-hero--page .sbb-hero__media { aspect-ratio: auto; height: clamp(300px, 64vw, 520px); border-radius: var(--radius-lg); }
.sbb-hero__text { padding: 22px 4px var(--space-section); }
.sbb-hero-wrap { padding-bottom: 0; }
.sbb-band, .sbb-band--reverse { margin-bottom: var(--space-section); }
.sbb-band__media { aspect-ratio: auto; height: clamp(220px, 56vw, 420px); }
.sbb-band__media--map { height: clamp(240px, 60vw, 420px); }
.sbb-section { padding-bottom: var(--space-section); }
.sbb-cta { margin-top: var(--space-section); margin-bottom: var(--space-section); }
.sbb-reviews { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "track track" "dots arrows" "all all"; }
.sbb-arrow { width: 42px; height: 42px; font-size: 16px; }
.sbb .sbb-reviews__all { margin-top: 0; }
} @media (min-width: 601px) and (max-width: 860px) {
:root { --gutter: 32px; }
.sbb-cards--swipe > * { flex: 0 0 calc(50% - 7px); }
.sbb-cards:not(.sbb-cards--swipe) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sbb-tiles, .sbb-tiles--four, .sbb-tiles--prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbb-band, .sbb-band--reverse { margin-left: 24px; margin-right: 24px; padding: 18px 18px 32px; }
.sbb-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbb-media-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
} @media (max-width: 600px) {
.sbb-quote blockquote { -webkit-line-clamp: 5; }
.sbb-rating { gap: 8px; padding: 7px 14px 7px 12px; }
.sbb-rating__count { font-size: 13px; }
} @media (max-width: 860px) {
.sbb-reviews { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head arrows" "track track"; align-items: end; padding-top: 40px; padding-bottom: 40px; row-gap: 18px; }
.sbb-reviews__dots, .sbb .sbb-reviews__all { display: none; }
.sbb-reviews h2 { margin-top: 12px; }
.sbb-quote blockquote { -webkit-line-clamp: 4; }
.sbb-arrow { width: 40px; height: 40px; }
} .sbb .sbb-gallery--blocks .sbb-video-pair { display: flex; gap: 16px; flex-wrap: nowrap; margin-top: 16px; max-width: 660px; }
.sbb .sbb-gallery--blocks .sbb-video-pair .wp-block-column { flex: 1 1 0; min-width: 0; }
.sbb .sbb-gallery--blocks .sbb-video-pair .wp-block-video { margin: 0; max-width: none; } .sbb-totop { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 48px; height: 48px; border-radius: 999px; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--color-accent); color: var(--color-bg); box-shadow: 0 6px 18px rgba(0,0,0,.15); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s ease; }
.sbb-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sbb-totop:hover { background: var(--color-accent-600); }
.sbb-totop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 860px) { .sbb-totop { right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .sbb-totop { transition: none; } } .sbb-reviews { margin-bottom: var(--space-section); }
.sbb-cta, .sbb-reviews + .sbb-cta, .sbb-band + .sbb-cta { margin-top: 0; }
.sbb-reviews + .sbb-section .sbb-gallery--blocks > h2:first-child,
.sbb-reviews + .sbb-section .sbb-gallery--blocks > .wp-block-heading:first-child,
.sbb-cta + .sbb-section .sbb-gallery--blocks > .wp-block-heading:first-child { margin-top: 0; } .sbb-insta__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sbb-insta__item { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--color-neutral-200, #eee); }
.sbb-insta__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, opacity .3s ease; }
.sbb-insta__item:hover img { transform: scale(1.04); opacity: .9; }
.sbb-insta__cta { margin-top: var(--space-head); display: flex; justify-content: center; }
.sbb-insta__cta .btn { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 860px) { .sbb-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.sbb .sbb-gallery--blocks .sbb-ig-more { margin: 14px 0 0; font-size: 15px; }
.sbb .sbb-gallery--blocks .sbb-ig-more a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sbb-insta__item img { transition: none; } }