:root{--mmwb-accent:#c0392b;--mmwb-accent-dark:#a13024;--mmwb-on-accent:#fff;--mmwb-fontFamily:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--mmwb-maxw:1120px;--mmwb-fontHead:'Saira Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--mmwb-color-1:#FFFFFF;--mmwb-color-2:#F7F7FA;--mmwb-color-3:#E5E7EB;--mmwb-color-4:#9CA3AF;--mmwb-color-5:#4B5563;--mmwb-color-6:#111827;--mmwb-color-7:#c0392b;--mmwb-color-8:#22D3EE;--mmwb-color-9:#F43F5E;--mmwb-color-10:#10B981;--mmwb-h1:48px;--mmwb-h2:34px;--mmwb-h3:24px;--mmwb-h4:20px;--mmwb-h5:18px;--mmwb-h6:16px;--mmwb-p1:18px;--mmwb-p2:16px;--mmwb-p3:14px;}
/* ============================================================================
 * Base element defaults for BUILDER markup only. These used to target raw
 * h1/a/img/body globally, which restyled "Copy an existing website" pages
 * into the builder look (wrong font, accent links, squashed images). They are
 * scoped to the builder's own roots (sections, header/footer chrome, popups)
 * so a copied site keeps its own CSS. Injected into the canvas + published
 * output. Add any new non-section root to BUILDER_ROOTS or it renders unstyled.
 * ==========================================================================*/
html { scroll-behavior:smooth; }
body { margin:0; -webkit-font-smoothing:antialiased; }
section[id], footer[id], form[id] { scroll-margin-top:16px; }
.ds-section, .ds-root, .ds-nav, .ds-footer, .mmwb-popup:not(.mmwb-popup-keep), [class^="ds-"], [class*=" ds-"] { box-sizing: border-box; }
.ds-section *, .ds-root *, .ds-nav *, .ds-footer *, .mmwb-popup:not(.mmwb-popup-keep) *, [class^="ds-"] *, [class*=" ds-"] * { box-sizing: border-box; }
.ds-section, .ds-root, .ds-nav, .ds-footer, .mmwb-popup:not(.mmwb-popup-keep) {
  font-family: var(--mmwb-fontFamily, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size:16px; line-height:1.6; color:#1f2937;
}
.ds-section h1, .ds-root h1, .ds-nav h1, .ds-footer h1, .mmwb-popup:not(.mmwb-popup-keep) h1, .ds-section h2, .ds-root h2, .ds-nav h2, .ds-footer h2, .mmwb-popup:not(.mmwb-popup-keep) h2, .ds-section h3, .ds-root h3, .ds-nav h3, .ds-footer h3, .mmwb-popup:not(.mmwb-popup-keep) h3, .ds-section h4, .ds-root h4, .ds-nav h4, .ds-footer h4, .mmwb-popup:not(.mmwb-popup-keep) h4, .ds-section h5, .ds-root h5, .ds-nav h5, .ds-footer h5, .mmwb-popup:not(.mmwb-popup-keep) h5, .ds-section h6, .ds-root h6, .ds-nav h6, .ds-footer h6, .mmwb-popup:not(.mmwb-popup-keep) h6, .ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  margin:0 0 .5em; line-height:1.18; font-weight:700; color:#111827; letter-spacing:-.01em;
  font-family: var(--mmwb-fontHead, inherit);
}
.ds-section h1, .ds-root h1, .ds-nav h1, .ds-footer h1, .mmwb-popup:not(.mmwb-popup-keep) h1, .ds-h1 { font-size: var(--mmwb-h1, clamp(30px, 4.5vw, 48px)); letter-spacing:-.02em; }
.ds-section h2, .ds-root h2, .ds-nav h2, .ds-footer h2, .mmwb-popup:not(.mmwb-popup-keep) h2, .ds-h2 { font-size: var(--mmwb-h2, clamp(24px, 3vw, 34px)); letter-spacing:-.02em; }
.ds-section h3, .ds-root h3, .ds-nav h3, .ds-footer h3, .mmwb-popup:not(.mmwb-popup-keep) h3, .ds-h3 { font-size: var(--mmwb-h3, 22px); }
.ds-section h4, .ds-root h4, .ds-nav h4, .ds-footer h4, .mmwb-popup:not(.mmwb-popup-keep) h4, .ds-h4 { font-size: var(--mmwb-h4, 18px); }
.ds-section h5, .ds-root h5, .ds-nav h5, .ds-footer h5, .mmwb-popup:not(.mmwb-popup-keep) h5 { font-size: var(--mmwb-h5, 16px); }
.ds-section h6, .ds-root h6, .ds-nav h6, .ds-footer h6, .mmwb-popup:not(.mmwb-popup-keep) h6 { font-size: var(--mmwb-h6, 14px); }
.ds-section p, .ds-root p, .ds-nav p, .ds-footer p, .mmwb-popup:not(.mmwb-popup-keep) p, .ds-text, .ds-lead { margin:0 0 1em; }
.ds-section a, .ds-root a, .ds-nav a, .ds-footer a, .mmwb-popup:not(.mmwb-popup-keep) a { color: var(--mmwb-accent, #7367f0); text-decoration:none; }
.ds-section a:hover, .ds-root a:hover, .ds-nav a:hover, .ds-footer a:hover, .mmwb-popup:not(.mmwb-popup-keep) a:hover { text-decoration:underline; }
.ds-section strong, .ds-root strong, .ds-nav strong, .ds-footer strong, .mmwb-popup:not(.mmwb-popup-keep) strong, .ds-section b, .ds-root b, .ds-nav b, .ds-footer b, .mmwb-popup:not(.mmwb-popup-keep) b { font-weight:700; }
.ds-section img, .ds-root img, .ds-nav img, .ds-footer img, .mmwb-popup:not(.mmwb-popup-keep) img, .ds-section svg, .ds-root svg, .ds-nav svg, .ds-footer svg, .mmwb-popup:not(.mmwb-popup-keep) svg, .ds-section video, .ds-root video, .ds-nav video, .ds-footer video, .mmwb-popup:not(.mmwb-popup-keep) video, .ds-section canvas, .ds-root canvas, .ds-nav canvas, .ds-footer canvas, .mmwb-popup:not(.mmwb-popup-keep) canvas { max-width:100%; height:auto; }
.ds-section img, .ds-root img, .ds-nav img, .ds-footer img, .mmwb-popup:not(.mmwb-popup-keep) img { display:block; }
/* Images default to a contained size; this opt-in class makes one full-bleed. */
.mmwb-img-full { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
/* Image object-fit (takes effect when the image has a constrained height). */
.mmwb-fit-cover { object-fit:cover; }
.mmwb-fit-contain { object-fit:contain; }
.mmwb-fit-fill { object-fit:fill; }
/* ----------------------------------------------------------------------------
 * Inspector behaviour utilities (set by the right-panel settings; shared by the
 * editor canvas and published output).
 * --------------------------------------------------------------------------*/
/* Button size + width modifiers (pair with .ds-btn). */
.ds-btn-sm { padding:8px 16px; font-size:13px; border-radius:9px; }
.ds-btn-lg { padding:16px 30px; font-size:17px; border-radius:14px; }
.ds-btn-block { display:flex; width:100%; }
/* Section background overlay: a tint above the background image, content above it.
 * Strength is set per modifier via --mmwb-ov. ::before is pointer-transparent so
 * children stay selectable in the editor. */
[class*="mmwb-overlay-"] { position:relative; }
[class*="mmwb-overlay-"]::before { content:""; position:absolute; inset:0; background:rgba(15,23,42,var(--mmwb-ov,.4)); pointer-events:none; z-index:0; }
[class*="mmwb-overlay-"] > * { position:relative; z-index:1; }
.mmwb-overlay-light { --mmwb-ov:.25; }
.mmwb-overlay-medium { --mmwb-ov:.45; }
.mmwb-overlay-dark { --mmwb-ov:.65; }
/* Section minimum height presets (hero "fit to screen"). */
.mmwb-minh-half { min-height:50vh; }
.mmwb-minh-full { min-height:100vh; }
/* Responsive visibility — hide an element at a given breakpoint. Breakpoints:
 * mobile ≤767, tablet 768–991, desktop ≥992. In the editor canvas these are
 * neutralised (elements stay visible + faded so they remain selectable); the
 * real hide applies on the published page and in device preview. */
@media (max-width:767px) { .mmwb-hide-mobile { display:none !important; } }
@media (min-width:768px) and (max-width:991px) { .mmwb-hide-tablet { display:none !important; } }
@media (min-width:992px) { .mmwb-hide-desktop { display:none !important; } }
/* Lightbox: the click-to-expand affordance (runtime injected by the compiler). */
.mmwb-lightbox { cursor:zoom-in; }
/* Hover effects (set by the Style panel). */
.mmwb-hover-lift { transition:transform .2s ease, box-shadow .2s ease; }
.mmwb-hover-lift:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(16,24,40,.16); }
.mmwb-hover-grow { transition:transform .2s ease; }
.mmwb-hover-grow:hover { transform:scale(1.04); }
.mmwb-hover-shadow { transition:box-shadow .2s ease; }
.mmwb-hover-shadow:hover { box-shadow:0 16px 40px rgba(16,24,40,.22); }
/* Any element made clickable via the generic element link (data-href). */
[data-href] { cursor:pointer; }
/* Section parallax: background pinned while the section scrolls past. */
.mmwb-parallax { background-attachment:fixed; background-size:cover; background-position:center; background-repeat:no-repeat; }
/* Button icons (inserted by the icon picker). */
.ds-btn-icon { display:inline-flex; align-items:center; font-size:1.05em; line-height:0; }
/* Menu: stack its links vertically on phones. */
@media (max-width:767px) { .mmwb-menu-stack { flex-direction:column; align-items:flex-start; gap:10px; } }
/* Menu: collapse to a hamburger button on phones. The toggle button + the
 * mmwb-menu-ready class are added by the published-page runtime (compiler
 * menuRuntime). The collapse is gated on mmwb-menu-ready SO IT NEVER APPLIES IN
 * THE EDITOR (which has no runtime) — the nav stays fully visible while editing;
 * only the live page collapses, where the toggle exists to reopen it. */
/* Inherits the bar's colour: a white box on a dark navbar was the old default. */
.mmwb-menu-toggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:1px solid rgba(128,128,128,.45); border-radius:9px; background:rgba(128,128,128,.14); color:inherit; cursor:pointer; }
.mmwb-menu-toggle svg { display:block; }
@media (max-width:767px) {
  .mmwb-menu-toggle { display:inline-flex; }
  .mmwb-menu-ready.mmwb-menu-burger { flex-wrap:wrap; }
  /* !important so collapse beats the per-link inline display many menu blocks
   * carry (e.g. the horizontal navs' inline display:inline-block) — without it
   * the links never hide and the hamburger toggle appears to do nothing. */
  .mmwb-menu-ready.mmwb-menu-burger > a, .mmwb-menu-ready.mmwb-menu-burger > .mmwb-mi { display:none !important; }
  .mmwb-menu-ready.mmwb-menu-burger.mmwb-menu-open { flex-direction:column; align-items:flex-start; }
  .mmwb-menu-ready.mmwb-menu-burger.mmwb-menu-open > a, .mmwb-menu-ready.mmwb-menu-burger.mmwb-menu-open > .mmwb-mi { display:block !important; }
}
/* Menu dropdowns: a top-level item (.mmwb-mi) with a nested .mmwb-submenu that
 * reveals on hover (desktop) and expands inline on phones. */
.mmwb-mi { position:relative; display:inline-flex; align-items:center; }
.mmwb-has-sub > a::after { content:"▾"; margin-left:6px; font-size:.8em; opacity:.7; }
.mmwb-submenu { display:none; position:absolute; top:100%; left:0; min-width:180px; flex-direction:column; gap:2px; padding:8px; background:#fff; border:1px solid #eceef3; border-radius:10px; box-shadow:0 12px 30px rgba(16,24,40,.14); z-index:50; }
.mmwb-mi:hover > .mmwb-submenu, .mmwb-mi:focus-within > .mmwb-submenu { display:flex; }
.mmwb-submenu a { display:block; padding:7px 10px; border-radius:7px; white-space:nowrap; font-weight:500; }
.mmwb-submenu a:hover { background:#f5f6fa; }
@media (max-width:767px) {
  .mmwb-mi { display:flex; flex-direction:column; align-items:flex-start; }
  .mmwb-submenu { position:static; display:flex; box-shadow:none; border:0; padding:4px 0 4px 14px; min-width:0; }
}
/* Image caption (image wrapped in <figure>). */
.mmwb-figure { margin:0; display:inline-block; max-width:100%; }
.mmwb-figure img { display:block; }
.mmwb-caption { margin-top:8px; font-size:13px; line-height:1.5; color:#6b7280; text-align:center; }
/* Section background video + content stacking. */
.mmwb-has-bgvideo { position:relative; overflow:hidden; }
.mmwb-bgvideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.mmwb-has-bgvideo > *:not(.mmwb-bgvideo) { position:relative; z-index:1; }
/* Section bottom-edge shape divider. */
.mmwb-has-div { position:relative; }
.mmwb-shapediv { position:absolute; left:0; right:0; bottom:-1px; line-height:0; color:#ffffff; z-index:2; pointer-events:none; }
.mmwb-shapediv svg { display:block; width:100%; height:60px; }
/* Social links: icon glyph + optional circle/square chips. */
.ds-social-ic { display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:0; }
.mmwb-social-circle a, .mmwb-social-square a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:#f1f3f9; color:#1f2937; }
.mmwb-social-circle a { border-radius:999px; }
.mmwb-social-square a { border-radius:9px; }
.mmwb-social-circle a:hover, .mmwb-social-square a:hover { background:var(--ds-accent, #7367f0); color:#fff; }
/* Container max-width presets (pairs with .ds-container's centering). */
.mmwb-w-narrow { max-width:720px; margin-left:auto; margin-right:auto; }
.mmwb-w-wide { max-width:1320px; margin-left:auto; margin-right:auto; }
.mmwb-w-full { max-width:none; }
.ds-section iframe, .ds-root iframe, .ds-nav iframe, .ds-footer iframe, .mmwb-popup:not(.mmwb-popup-keep) iframe { max-width:100%; border:0; }
/* Generated/embedded forms fill the section so fields are not clipped at auto width.
 * .ds-form is the one-line newsletter row (email + button) — leave that flex wrap alone. */
.ds-section form:not(.ds-form), .ds-root form:not(.ds-form), .ds-nav form:not(.ds-form), .ds-footer form:not(.ds-form), .mmwb-popup:not(.mmwb-popup-keep) form:not(.ds-form) { width:100%; max-width:100%; height:auto; box-sizing:border-box; overflow:visible; }
.ds-section form:not(.ds-form) .ds-input, .ds-root form:not(.ds-form) .ds-input, .ds-nav form:not(.ds-form) .ds-input, .ds-footer form:not(.ds-form) .ds-input, .mmwb-popup:not(.mmwb-popup-keep) form:not(.ds-form) .ds-input, .ds-section form:not(.ds-form) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]), .ds-root form:not(.ds-form) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]), .ds-nav form:not(.ds-form) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]), .ds-footer form:not(.ds-form) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]), .mmwb-popup:not(.mmwb-popup-keep) form:not(.ds-form) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]), .ds-section form:not(.ds-form) select, .ds-root form:not(.ds-form) select, .ds-nav form:not(.ds-form) select, .ds-footer form:not(.ds-form) select, .mmwb-popup:not(.mmwb-popup-keep) form:not(.ds-form) select, .ds-section form:not(.ds-form) textarea, .ds-root form:not(.ds-form) textarea, .ds-nav form:not(.ds-form) textarea, .ds-footer form:not(.ds-form) textarea, .mmwb-popup:not(.mmwb-popup-keep) form:not(.ds-form) textarea { width:100%; max-width:none; min-width:0; box-sizing:border-box; }
.ds-section iframe:not([src*="youtube"]):not([src*="youtu.be"]):not([src*="vimeo"]):not([src*="maps.goog"]):not([src*="google.com/maps"]), .ds-root iframe:not([src*="youtube"]):not([src*="youtu.be"]):not([src*="vimeo"]):not([src*="maps.goog"]):not([src*="google.com/maps"]), .ds-nav iframe:not([src*="youtube"]):not([src*="youtu.be"]):not([src*="vimeo"]):not([src*="maps.goog"]):not([src*="google.com/maps"]), .ds-footer iframe:not([src*="youtube"]):not([src*="youtu.be"]):not([src*="vimeo"]):not([src*="maps.goog"]):not([src*="google.com/maps"]), .mmwb-popup:not(.mmwb-popup-keep) iframe:not([src*="youtube"]):not([src*="youtu.be"]):not([src*="vimeo"]):not([src*="maps.goog"]):not([src*="google.com/maps"]) { width:100%; max-width:100%; display:block; }
.ds-section blockquote, .ds-root blockquote, .ds-nav blockquote, .ds-footer blockquote, .mmwb-popup:not(.mmwb-popup-keep) blockquote { margin:0 0 1em; padding:6px 0 6px 20px; border-left:3px solid var(--mmwb-accent, #7367f0); color:#4b5563; font-size:18px; font-style:italic; }
.ds-section ul, .ds-root ul, .ds-nav ul, .ds-footer ul, .mmwb-popup:not(.mmwb-popup-keep) ul, .ds-section ol, .ds-root ol, .ds-nav ol, .ds-footer ol, .mmwb-popup:not(.mmwb-popup-keep) ol { margin:0 0 1em; padding-left:1.4em; line-height:1.7; }
.ds-section hr, .ds-root hr, .ds-nav hr, .ds-footer hr, .mmwb-popup:not(.mmwb-popup-keep) hr { border:0; border-top:1px solid #eceef3; margin:24px 0; }
.ds-section button, .ds-root button, .ds-nav button, .ds-footer button, .mmwb-popup:not(.mmwb-popup-keep) button { font-family:inherit; }
/* Constrain map embeds (the basic 'map' block) to a sane default height. */
.ds-section iframe[src*="maps.goog"], .ds-root iframe[src*="maps.goog"], .ds-nav iframe[src*="maps.goog"], .ds-footer iframe[src*="maps.goog"], .mmwb-popup:not(.mmwb-popup-keep) iframe[src*="maps.goog"], .ds-section iframe[src*="google.com/maps"], .ds-root iframe[src*="google.com/maps"], .ds-nav iframe[src*="google.com/maps"], .ds-footer iframe[src*="google.com/maps"], .mmwb-popup:not(.mmwb-popup-keep) iframe[src*="google.com/maps"],
[data-gjs-type="map"] { width:100%; height:360px; border:0; display:block; }

/* Brand tokens resolve on EVERY ds-* element (not just .ds-section), so
 * standalone components used on their own — a bare .ds-banner / .ds-cta /
 * .ds-footer — still pick up the accent instead of rendering with an unset var. */
.ds-root, [class^="ds-"], [class*=" ds-"] { box-sizing: border-box; --ds-accent: var(--mmwb-accent, #7367f0); --ds-accent-dark: var(--mmwb-accent-dark, #5b4fd6); }
/* Brand tokens flow from the host theme (--mmwb-accent / --mmwb-fontFamily). */
.ds-section { --ds-accent: var(--mmwb-accent, #7367f0); --ds-accent-dark: var(--mmwb-accent-dark, #5b4fd6); font-family: var(--mmwb-fontFamily, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color:#1f2937; }
.ds-container { max-width: var(--mmwb-maxw, 1120px); margin: 0 auto; padding: 0 24px; }
.ds-prose { max-width: 760px; }
.ds-prose > h1, .ds-prose > .ds-h1 { margin: 0 0 16px; }
.ds-prose > h2, .ds-prose > .ds-h2 { margin: 36px 0 12px; font-size: clamp(20px, 2.4vw, 26px); }
.ds-prose > p, .ds-prose > .ds-lead, .ds-prose > .ds-text { margin: 0 0 14px; max-width: none; line-height: 1.65; }
.ds-prose ul, .ds-prose ol { margin: 0 0 16px; padding-left: 1.25em; }
.ds-prose li { margin: 0 0 6px; }
.ds-prose img:not(.ds-logo) { width: 100%; max-width: 100%; height: auto; display: block; margin: 20px 0; }
img:not([src]), img[src=""], img[src="#"], img[src="about:blank"] { display: none !important; }
/* Empty layout primitives (Container / Stack cells) show a visible drop-zone so
 * they're findable on the canvas; the placeholder vanishes once content is added
 * (:empty no longer matches), so filled containers and the export stay clean. */
.mmwb-dropzone:empty { min-height: 120px; background: #e9ebef; border-radius: 10px; }
.ds-container.mmwb-dropzone:empty { min-height: 200px; }
.ds-stack-v { width: 100%; }
.ds-section { padding: var(--ds-pad, 72px) 0; }
.ds-eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ds-accent); margin:0 0 12px; }
.ds-h1 { font-size: var(--mmwb-h1, clamp(34px, 5vw, 56px)); line-height:1.08; font-weight:var(--ds-head-weight, 800); letter-spacing:var(--ds-head-tracking, -.02em); text-transform:var(--ds-head-case, none); margin:0 0 18px; overflow:visible; overflow-wrap:anywhere; white-space:normal; max-width:100%; }
.ds-h2 { font-size: var(--mmwb-h2, clamp(26px, 3.4vw, 38px)); line-height:1.15; font-weight:var(--ds-head-weight, 800); letter-spacing:var(--ds-head-tracking, -.02em); text-transform:var(--ds-head-case, none); margin:0 0 14px; overflow:visible; overflow-wrap:anywhere; white-space:normal; max-width:100%; }
.ds-h3 { font-size: var(--mmwb-h3, 20px); font-weight:var(--ds-head-weight-sm, 700); margin:0 0 8px; overflow:visible; overflow-wrap:anywhere; white-space:normal; max-width:100%; }
.ds-lead { font-size: var(--mmwb-p1, 18px); line-height:1.6; color:#4b5563; margin:0 0 26px; overflow:visible; overflow-wrap:anywhere; }
.ds-text { font-size: var(--mmwb-p2, 16px); line-height:1.65; color:#4b5563; margin:0 0 14px; overflow:visible; overflow-wrap:anywhere; }
.ds-center { text-align:center; }
.ds-muted { color:#6b7280; }

.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:var(--ds-radius-ui, 12px); font-weight:var(--ds-btn-weight, 600); font-size:15px; text-transform:var(--ds-btn-case, none); letter-spacing:var(--ds-btn-tracking, 0); text-decoration:none; cursor:pointer; border:1px solid transparent; color:#111827; background:#fff; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
/* --mmwb-on-accent: black on a light accent (gold, yellow, mint), white on a dark one — set by the theme. */
.ds-btn-primary, .ds-section a.ds-btn-primary, .ds-nav a.ds-btn-primary, .ds-footer a.ds-btn-primary, .ds-sticky-cta a.ds-btn-primary { background: var(--ds-accent); color:var(--mmwb-on-accent, #fff); box-shadow:0 6px 18px rgba(115,103,240,.35); }
.ds-section a.ds-btn-primary:hover, .ds-nav a.ds-btn-primary:hover { text-decoration:none; }
.ds-btn-primary:hover { transform: translateY(-1px); background: var(--ds-accent-dark); }
.ds-btn-ghost { background:#fff; color:#111827; border-color:#e5e7eb; }
.ds-btn-ghost:hover { border-color:#d1d5db; background:#f9fafb; }
.ds-btn-row { display:flex; gap:12px; flex-wrap:wrap; }
/* Desktop is not a phone: the generator set button rows to column + width:100%, which stacked two full-width buttons under a hero on a 1440px screen. */
@media (min-width: 768px) {
  .ds-btn-row { flex-direction:row !important; width:auto !important; }
  .ds-btn-row > .ds-btn { width:auto !important; flex:0 1 auto !important; }
}
.ds-center .ds-btn-row { justify-content:center; }

.ds-grid { display:grid; gap:24px; align-items:stretch; overflow:visible; }
.ds-grid > * { min-width:0; max-width:100%; grid-row:auto !important; }
.ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Headings, photos, and CTAs in a card grid get their own full row so a
 * car photo never sits in column 1 while the other cards collide with it. */
.ds-grid > .ds-h1, .ds-grid > .ds-h2, .ds-grid > .ds-h3,
.ds-grid > .ds-lead, .ds-grid > .ds-eyebrow, .ds-grid > .ds-center,
.ds-grid > h1, .ds-grid > h2, .ds-grid > h3, .ds-grid > p,
.ds-grid > img, .ds-grid > picture, .ds-grid > video, .ds-grid > .ds-hero-media,
.ds-grid > .ds-btn, .ds-grid > .ds-btn-row,
.ds-grid > *:has(> img:only-child),
.ds-grid > *:has(> picture:only-child) { grid-column: 1 / -1 !important; }
.ds-grid > .ds-card {
  grid-column: auto !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-grid > .ds-card img { width:100%; max-width:100%; height:auto; }
@media (max-width: 767px){ .ds-grid-2,.ds-grid-3,.ds-grid-4 { grid-template-columns: 1fr; } }
/* A stats strip on a phone: two by two, close together — four numbers stacked a
   screen tall each read as four empty bands. */
@media (max-width: 767px){ .ds-grid-4:has(> .ds-stat), .ds-grid-3:has(> .ds-stat), .ds-stat-row { grid-template-columns: 1fr 1fr; gap: 22px 12px; } .ds-stat .num { font-size: 34px; } .ds-stat.ds-stat-inline { padding-left: 0; border-left: 0; } }
/* Auto-responsive custom grid (the generic "Grid/Columns" layout block). The row
 * tracks come in via the --cols custom property; grid-template-columns is set only
 * by these class rules, so the mobile collapse wins cleanly and a per-mobile
 * override on the element still beats it (higher-specificity id rule). */
.mmwb-arow { display:grid; gap:24px; grid-template-columns: var(--cols, 1fr); }
@media (max-width:767px){ .mmwb-arow { grid-template-columns: 1fr; } }

.ds-card { background:#fff; border:1px solid #eceef3; border-radius:var(--ds-radius, 18px); padding:28px; box-shadow:var(--ds-card-shadow, 0 1px 2px rgba(16,24,40,.04)); min-width:0; height:auto; overflow-wrap:anywhere; }
.ds-card-img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }
.ds-card-body { padding:20px 22px 22px; }
.ds-card:has(> .ds-card-img) { padding:0; overflow:hidden; }
.ds-card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.ds-card-hover:hover { transform: translateY(-4px); box-shadow:0 16px 40px rgba(16,24,40,.10); }
.ds-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background: rgba(115,103,240,.12); color: var(--ds-accent); margin-bottom:16px; font-size:22px; line-height:0; text-align:center; }
.ds-icon > svg, .ds-icon > img { display:block; margin:auto; flex:none; max-width:60%; max-height:60%; }
/* Tile tint follows the site accent (the fixed purple tint above is the fallback for old engines), and on a
 * light band the glyph is a darkened accent so a pale accent (gold, mint) still reads against its own tint. */
.ds-icon { background:color-mix(in srgb, var(--ds-accent) 14%, #fff); color:color-mix(in srgb, var(--ds-accent) 72%, #000); }
.ds-band-dark .ds-icon, .ds-hero-bg .ds-icon, .ds-card-dark .ds-icon, .ds-card-glass .ds-icon { background:rgba(255,255,255,.1); color:var(--ds-accent); }

/* Hero */
.ds-hero { padding: var(--ds-pad, 96px) 0; background: radial-gradient(1200px 500px at 50% -10%, rgba(115,103,240,.14), transparent), #fff; }
.ds-hero .ds-h1 { max-width: 760px; margin-left:auto; margin-right:auto; }
.ds-hero .ds-lead { max-width: 620px; margin-left:auto; margin-right:auto; }
.ds-hero-media { margin-top:40px; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px rgba(16,24,40,.18); }
.ds-hero-media img { width:100%; display:block; }
/* Photo-backed hero / CTA band: set background-image inline; the overlay keeps text legible. */
.ds-hero-bg { position:relative; isolation:isolate; background-color:#0b1b2a; background-size:cover; background-position:center; background-repeat:no-repeat; color:#fff; min-height:var(--ds-hero-min, auto); display:grid; align-content:center; }
.ds-hero-bg::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(7,19,31,.74),rgba(7,19,31,.56)); }
/* The scrim is the theme's own dark colour, heavy enough that a bright daylight photo still sits
 * inside the palette, with a deeper band where the copy sits and a vignette at the edges. */
.ds-hero-bg::before { background:
  linear-gradient(90deg, color-mix(in srgb, var(--ds-hero-dark, #07131f) 82%, transparent) 0%, color-mix(in srgb, var(--ds-hero-dark, #07131f) 62%, transparent) 55%, color-mix(in srgb, var(--ds-hero-dark, #07131f) 48%, transparent) 100%),
  radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--ds-hero-dark, #07131f) 70%, transparent), transparent 60%); }
.ds-hero-bg::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:color-mix(in srgb, var(--ds-hero-dark, #07131f) 35%, transparent); mix-blend-mode:multiply; }
.ds-hero-bg .ds-h1, .ds-hero-bg .ds-h2 { text-shadow:0 2px 28px rgba(0,0,0,.45); }
.ds-hero-bg .ds-lead, .ds-hero-bg .ds-audience, .ds-hero-bg .ds-note { text-shadow:0 1px 14px rgba(0,0,0,.5); }
.ds-hero-bg .ds-h1, .ds-hero-bg .ds-h2, .ds-hero-bg .ds-h3, .ds-hero-bg .ds-lead, .ds-hero-bg p, .ds-hero-bg li { color:#fff; }
.ds-hero-bg .ds-btn-ghost { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }

/* Pricing */
.ds-price { font-size:44px; font-weight:800; letter-spacing:-.02em; }
.ds-price small { font-size:15px; font-weight:600; color:#6b7280; }
.ds-price-feat { list-style:none; padding:0; margin:18px 0 24px; }
.ds-price-feat li { padding:7px 0 7px 26px; position:relative; color:#374151; }
.ds-price-feat li::before { content:"✓"; position:absolute; left:0; color: var(--ds-accent); font-weight:800; }
.ds-card-featured { border-color: var(--ds-accent); box-shadow:0 20px 50px rgba(115,103,240,.18); }
.ds-badge { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--ds-accent); color:#fff; font-size:12px; font-weight:700; }

/* Testimonials */
.ds-quote { font-size:18px; line-height:1.6; color:#1f2937; margin:0 0 18px; }
.ds-person { display:flex; align-items:center; gap:12px; }
.ds-avatar { width:44px; height:44px; border-radius:999px; object-fit:cover; background:#e5e7eb; color:#1f2937; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:1; flex:none; overflow:hidden; }
.ds-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.ds-person b { display:block; font-size:14px; }
.ds-person span { font-size:13px; color:#6b7280; }

/* Stats */
.ds-stat { text-align:center; }
.ds-stat .num { font-size:42px; font-weight:800; color:var(--ds-accent); letter-spacing:-.02em; }
.ds-stat .lbl { color:#6b7280; font-weight:500; }

/* Gallery */
.ds-gallery img { width:100%; border-radius:14px; display:block; object-fit:cover; aspect-ratio: 4/3; }

/* FAQ */
.ds-faq details { border-bottom:1px solid #eceef3; padding:18px 0; }
.ds-faq summary { font-weight:600; font-size:17px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.ds-faq summary::after { content:"+"; color:var(--ds-accent); font-weight:800; }
.ds-faq details[open] summary::after { content:"–"; }
.ds-faq p { color:#4b5563; margin:12px 0 0; }

/* Tabs — native Tabs element. Visual styling lives here (editor + published);
 * the show/hide + switching JS is publish-only (compiler tabsRuntime), so in the
 * editor every panel is visible and directly editable. */
.mmwb-tablist { display:flex; gap:6px; flex-wrap:wrap; }
.mmwb-tab { padding:11px 20px; border:0; border-radius:10px; font:600 15px inherit; cursor:pointer; background:transparent; color:#6b7280; }
.mmwb-tab.mmwb-tab-on { background:var(--ds-accent,#7367f0); color:#fff; }
.mmwb-tabpanels { margin-top:8px; }
.mmwb-tabpanel { padding-top:18px; }

/* CTA — card (ds-cta) or full-bleed band (ds-cta-band / section.ds-cta).
 * Buttons on a colored band must stay readable even if the model set color:#fff. */
.ds-cta { background: linear-gradient(135deg, var(--ds-accent), #4f46e5); color:#fff; border-radius:24px; padding:48px 40px; text-align:center; }
.ds-cta-band, .ds-section.ds-cta { background: linear-gradient(135deg, var(--ds-accent), #4f46e5); color:#fff; text-align:center; border-radius:0; padding:56px 24px; }
.ds-cta .ds-h2, .ds-cta .ds-lead, .ds-cta-band .ds-h2, .ds-cta-band .ds-lead, .ds-section.ds-cta .ds-h2, .ds-section.ds-cta .ds-lead { color:#fff; }
.ds-cta .ds-lead, .ds-cta-band .ds-lead, .ds-section.ds-cta .ds-lead { opacity:.9; }
.ds-cta .ds-btn-primary, .ds-cta-band .ds-btn-primary, .ds-section.ds-cta .ds-btn-primary { background:#fff; color:var(--ds-accent); box-shadow:none; }
.ds-cta .ds-btn-ghost, .ds-cta-band .ds-btn-ghost, .ds-section.ds-cta .ds-btn-ghost, .ds-hero .ds-btn-ghost { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }

/* Navbar / Footer */
/* A bare <nav class="ds-nav"> at the top of a generated page gets its own gutter; inside a ds-container the container already has one. */
.ds-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px clamp(16px, 4vw, 40px); color:#1f2937; }
.ds-container > .ds-nav, .ds-section .ds-nav { padding-left:0; padding-right:0; }
.ds-nav .brand, .ds-footer .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; }
.ds-nav .brand img.ds-logo, .ds-footer .brand img.ds-logo { height:36px; width:auto; max-width:168px; object-fit:contain; display:block; }
.ds-nav .links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; }
.ds-nav > :first-child, .ds-nav .brand { white-space:nowrap; flex:none; }
.ds-nav .links a { color:inherit; opacity:.82; text-decoration:none; font-weight:500; white-space:nowrap; }
.ds-nav .links a:hover { color:var(--ds-accent); opacity:1; }
/* The runtime wraps a ds-nav's links + CTA in one panel; on wide screens it is invisible to layout. */
.mmwb-menu-panel { display:contents; }
/* Header nav on phones: collapse the .links group behind a hamburger. The toggle
 * button is injected by the published-page runtime (compiler menuRuntime) into
 * every .ds-nav that has a .links group; the links stay hidden until the nav gets
 * .mmwb-menu-open. The order property positions the injected toggle to the right
 * and drops the opened links onto their own full-width row, regardless of DOM. */
@media (max-width:767px) {
  /* Gated on .mmwb-menu-ready (runtime-added) so it only collapses on the live
   * page, never in the editor. Keep the FIRST child (the logo/brand — the toggle
   * is appended last, so first-child stays the logo) + the toggle; tuck the links
   * group AND any CTA buttons into the opened panel, each on its own row. */
  .ds-nav { flex-wrap:wrap; }
  /* A long brand line must not push the hamburger onto a second row: it shrinks and ellipsises. */
  .ds-nav.mmwb-menu-ready > :first-child { flex:1 1 auto; min-width:0; max-width:calc(100% - 56px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; position:relative; z-index:2; }
  .ds-nav.mmwb-menu-ready .mmwb-menu-toggle { order:1; margin-left:auto; position:relative; z-index:2; color:inherit; background:transparent; border-color:color-mix(in srgb, currentColor 28%, transparent); }
  /* The opened menu is a full-screen sheet (compiler menuStyles is the live copy of these rules). */
  .ds-nav.mmwb-menu-ready .mmwb-menu-panel { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; gap:0; padding:calc(var(--mmwb-nav-h, 72px) + 12px) 22px 28px; background:var(--mmwb-menu-bg, #fff); color:inherit; overflow:auto; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px); transition:opacity .2s ease, transform .24s ease, visibility 0s linear .24s; }
  .ds-nav.mmwb-menu-ready.mmwb-menu-open { position:fixed; top:0; left:0; right:0; z-index:99990; background:var(--mmwb-menu-bg, #fff); padding:14px 20px; flex-wrap:nowrap; }
  .ds-nav.mmwb-menu-ready.mmwb-menu-open .mmwb-menu-panel { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .ds-nav.mmwb-menu-ready .mmwb-menu-panel .links { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; width:100%; }
  .ds-nav.mmwb-menu-ready .mmwb-menu-panel .links a { display:block; font-size:22px; font-weight:600; line-height:1.25; padding:16px 0; opacity:1; white-space:normal; border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent); }
  .ds-nav.mmwb-menu-ready .mmwb-menu-panel > a, .ds-nav.mmwb-menu-ready .mmwb-menu-panel > .ds-btn { display:flex; justify-content:center; align-items:center; width:100%; box-sizing:border-box; margin:22px 0 0; padding:15px 18px; font-size:16px; text-align:center; border-radius:12px; white-space:normal; }
  .ds-nav.mmwb-menu-ready:not(:has(.mmwb-menu-panel)) > :not(:first-child):not(.mmwb-menu-toggle) { display:none !important; order:3; flex-basis:100%; }
  .ds-nav.mmwb-menu-ready.mmwb-menu-open:not(:has(.mmwb-menu-panel)) > :not(:first-child):not(.mmwb-menu-toggle) { display:flex !important; flex-direction:column; align-items:flex-start; gap:10px; padding:2px 0; }
}
.ds-footer { background:#0e1424; color:#cbd5e1; padding:40px 0 28px; }
.ds-footer a { color:#cbd5e1; text-decoration:none; display:block; padding:5px 0; }
.ds-footer a:hover { color:#fff; }
.ds-footer .brand { color:#fff; font-weight:800; font-size:20px; margin-bottom:10px; }
.ds-footer .bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding-top:20px; color:#94a3b8; font-size:14px; }

/* Defensive layout guards — keep imperfect / auto-composed structure tidy so it
 * never leaves dead vertical space (applies in the canvas AND published output).
 * Sections aren't meant to nest; when they do, the inner one shouldn't re-pad.
 * A full-bleed footer shouldn't carry an outer section/container's padding. */
.ds-section .ds-section { padding-top:0; padding-bottom:0; }
/* Footer and CTA already pad themselves — an outer section must not add another
 * 72px band, or the buttons sit in a tall empty well above the footer. */
.ds-section:has(.ds-footer) { padding:0; }
.ds-section:has(.ds-cta), .ds-section.ds-cta-band, .ds-section.ds-cta { padding-bottom:0; }
.ds-section:has(+ .ds-footer),
.ds-section:has(+ footer),
.ds-section:has(+ .ds-section > .ds-footer),
.ds-section:has(+ .ds-section > .ds-container > .ds-footer) {
  padding-bottom:36px !important;
  min-height:0 !important;
}
.ds-section:has(.ds-cta) + .ds-section:has(.ds-footer) { padding:0; }
.ds-section:has(.ds-cta) + .ds-section:has(.ds-footer) .ds-footer,
.ds-cta + .ds-footer,
.ds-cta-band + .ds-footer,
.ds-section:has(.ds-cta):has(.ds-footer) .ds-footer { padding-top:28px; }
.ds-cta + .ds-spacer,
.ds-cta-band + .ds-spacer,
.ds-spacer:has(+ .ds-footer),
.ds-section:has(.ds-cta) + .ds-spacer { display:none; }
.ds-section > .ds-container:has(> .ds-footer),
.ds-section > .ds-container:has(> .ds-cta) { max-width:none; padding-left:0; padding-right:0; }
.ds-container > .ds-cta { border-radius:0; padding:48px 24px; }
.ds-footer { margin-bottom:0; }

/* Generated pages often pull cards over the next photo (negative margin,
 * absolute images, or a section background). Keep content in flow so
 * nothing is clipped or stacked on top of the next block. */
.ds-section, .ds-container { overflow: visible; }
.ds-container > img,
.ds-container > picture,
.ds-grid > img,
.ds-grid > picture,
.ds-grid > .ds-hero-media {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-row: auto !important;
  width: 100%;
  max-width: 100%;
  height: auto;
  z-index: 0;
}
.ds-card, .ds-grid, .ds-btn, .ds-btn-row, .ds-stat {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.ds-hero-media:has(.ds-card),
.ds-hero-media:has(.ds-grid) { overflow: visible; }
.ds-section [style*="margin-top:-"],
.ds-section [style*="margin-top: -"],
.ds-container [style*="margin-top:-"],
.ds-container [style*="margin-top: -"] { margin-top: 0 !important; }
.ds-section [style*="margin-bottom:-"],
.ds-section [style*="margin-bottom: -"],
.ds-container [style*="margin-bottom:-"],
.ds-container [style*="margin-bottom: -"] { margin-bottom: 0 !important; }
.ds-section:has(.ds-card)[style*="background-image"],
.ds-section:has(.ds-grid)[style*="url("] {
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: min(920px, 100%) auto !important;
  padding-bottom: 240px !important;
}

/* Logos */
.ds-logos { display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:center; opacity:.7; }
.ds-logos span { font-weight:800; font-size:22px; color:#9ca3af; letter-spacing:-.01em; }

/* Misc */
.ds-divider { height:1px; background:#eceef3; border:0; margin:0; }
.ds-spacer { height:48px; }
.ds-social { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ds-social a { width:40px; height:40px; min-width:40px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#f3f4f6; color:#111827; text-decoration:none; overflow:hidden; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; line-height:1; }
.ds-social a:hover { background: var(--ds-accent); color:#fff; }
.ds-footer .ds-social a { display:inline-flex; background:rgba(255,255,255,.12); color:#fff; padding:0; width:40px; height:40px; }
.ds-footer .ds-social a:hover { background: var(--ds-accent); color:#fff; }

/* Split (image + content) */
.ds-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.ds-split img { width:100%; border-radius:18px; display:block; }
@media (max-width:767px){ .ds-split { grid-template-columns:1fr; } }
/* A split whose picture sits left on desktop; the copy still comes first on a phone. */
@media (min-width:768px){ .ds-split-flip > :first-child { order:2; } }
/* An inner page's short photo banner: the copy sits tight, the fade is shallower. */
.ds-hero-banner { --ds-pad: 64px; }
.ds-hero-banner .ds-h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }

/* Steps / how it works */
/* Numbered steps: three to five in a row, one column on a phone. */
.ds-steps { display:grid; gap:22px; grid-template-columns:repeat(3, 1fr); }
.ds-steps-4 { grid-template-columns:repeat(4, 1fr); }
.ds-steps-5 { grid-template-columns:repeat(5, 1fr); }
.ds-steps-2 { grid-template-columns:repeat(2, 1fr); }
.ds-step { text-align:center; padding:22px 18px; border-radius:18px; border:1px solid #eceef3; background:#fff; }
.ds-step.ds-card-dark { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.ds-step .ds-h3 { margin:0 0 6px; }
.ds-step p { margin:0; color:#4b5563; font-size:15px; }
.ds-step.ds-card-dark p { color:rgba(255,255,255,.8); }
.ds-step .ds-step-num svg { width:20px; height:20px; }
@media (max-width:767px){ .ds-steps, .ds-steps-2, .ds-steps-4, .ds-steps-5 { grid-template-columns:1fr; } }
/* Team: portrait cards. */
.ds-team-card { text-align:center; }
.ds-team-photo { width:120px; height:120px; border-radius:999px; object-fit:cover; margin:0 auto 14px; display:block; }
.ds-team-photo.ds-avatar { display:grid; place-items:center; font-size:34px; }
.ds-team-card .ds-h3 { margin:0 0 2px; }
.ds-team-card .ds-tagline { margin:0 0 8px; }
/* Contact band: details left, map right. */
.ds-contact-split { align-items:start; }
.ds-map-embed { border-radius:18px; overflow:hidden; min-height:320px; height:100%; border:1px solid #eceef3; }
.ds-map-embed iframe { width:100%; height:100%; min-height:320px; border:0; display:block; }
.ds-step-num { width:46px; height:46px; border-radius:999px; display:grid; place-items:center; background:var(--ds-accent); color:#fff; font-weight:800; font-size:18px; margin:0 auto 14px; box-shadow:0 6px 16px rgba(115,103,240,.3); }

/* Forms (newsletter / contact) */
.ds-form { display:flex; gap:10px; flex-wrap:wrap; }
.ds-center .ds-form { justify-content:center; }
/* A multi-field inquiry form that reused the newsletter class must stack, not clip. */
.ds-form:has(textarea), .ds-form:has(input:nth-of-type(3)) { flex-direction:column; width:100%; max-width:100%; }
.ds-form:has(textarea) .ds-input, .ds-form:has(input:nth-of-type(3)) .ds-input { max-width:none; width:100%; }
.ds-input { flex:1; min-width:220px; max-width:360px; padding:13px 16px; border:1px solid #e5e7eb; border-radius:var(--ds-radius-ui, 12px); font-size:15px; font-family:inherit; color:#1f2937; background:#fff; }
.ds-input:focus, .ds-textarea:focus { outline:2px solid var(--ds-accent); outline-offset:-1px; border-color:transparent; }
.ds-field { display:block; margin-bottom:14px; }
.ds-label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:#374151; }
.ds-textarea { width:100%; padding:13px 16px; border:1px solid #e5e7eb; border-radius:var(--ds-radius-ui, 12px); font-family:inherit; font-size:15px; min-height:120px; resize:vertical; }

/* Announcement banner */
.ds-banner { background:var(--ds-accent); color:#fff; padding:12px 20px; display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; font-weight:500; }
.ds-banner a { color:#fff; }
.ds-banner .ds-btn-ghost { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; padding:8px 16px; }

/* Checklist */
.ds-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ds-list li { padding-left:30px; position:relative; color:#374151; line-height:1.5; }
.ds-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--ds-accent); font-weight:800; }

/* Rating / tag / alert */
.ds-rating { color:#f5b301; font-size:22px; letter-spacing:3px; }
.ds-tag { display:inline-block; padding:4px 12px; border-radius:999px; background:rgba(115,103,240,.12); color:var(--ds-accent); font-size:13px; font-weight:600; }
.ds-alert { display:flex; gap:12px; padding:16px 18px; border-radius:14px; background:rgba(115,103,240,.08); border:1px solid rgba(115,103,240,.22); color:#374151; line-height:1.5; }
.ds-alert .ds-alert-icon { color:var(--ds-accent); font-weight:800; flex:none; }

/* Animations (CSS-only; play on load). Add a class to any element. */
@keyframes dsUp { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform:none;} }
@keyframes dsIn { from { opacity:0;} to { opacity:1;} }
@keyframes dsZoom { from { opacity:0; transform: scale(.96);} to { opacity:1; transform:none;} }
.ds-anim-up { animation: dsUp .6s cubic-bezier(.4,0,.2,1) both; }
.ds-anim-in { animation: dsIn .7s ease both; }
.ds-anim-zoom { animation: dsZoom .6s cubic-bezier(.4,0,.2,1) both; }
.ds-hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.ds-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,24,40,.12); }
.ds-hover-grow { transition: transform .2s ease; }
.ds-hover-grow:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ds-anim-up,.ds-anim-in,.ds-anim-zoom { animation: none; } }

/* Marquee — continuously scrolling inline content. Put the phrase TWICE inside
 * the child so the -50% loop is seamless. */
@keyframes dsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ds-marquee { overflow: hidden; white-space: nowrap; width: 100%; }
.ds-marquee > * { display: inline-block; animation: dsMarquee 18s linear infinite; }
.ds-marquee:hover > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ds-marquee > * { animation: none; } }

/* ── Location Finder (editor canvas + publish) ─────────────────────────────
 * Three themes: split (list + map), cards (photo grid), drill (banner cards).
 * Runtime still keys off .mmwb-lf-card / .mmwb-lf-hide / data-mmwb-loc-*. */
.mmwb-lf-wrap{display:flex;align-items:stretch;gap:0;background:#f7f8fa;padding:0}
.mmwb-lf-panel{flex:1 1 56%;max-width:56%;padding:28px 32px;overflow:auto;max-height:88vh}
.mmwb-lf-head{margin-bottom:20px}
.mmwb-lf-h{margin:0 0 14px}
.mmwb-lf-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.mmwb-lf-search{flex:1 1 240px;min-width:160px}
.mmwb-lf-near{white-space:nowrap}
.mmwb-locfinder{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1180px){.mmwb-locfinder{grid-template-columns:1fr}}
.mmwb-lf-card{display:flex;flex-direction:column;gap:8px}
.mmwb-lf-card:not(.ds-card):not(.mmwb-lf-card--drill){background:#fff;border:1px solid #ececf1;border-radius:10px;padding:18px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.mmwb-lf-btn:not(.ds-btn){display:inline-block;padding:9px 16px;border-radius:6px;font-weight:700;font-size:13px;text-decoration:none;text-align:center}
.mmwb-lf-btn-primary:not(.ds-btn){background:var(--ds-accent,#e4002b);color:#fff;border:1px solid var(--ds-accent,#e4002b)}
.mmwb-lf-btn-ghost:not(.ds-btn){background:#fff;color:#111;border:1px solid #d5d9e8}
.mmwb-lf-search:not(.ds-input){box-sizing:border-box;padding:11px 14px;border:1px solid #d5d9e8;border-radius:6px;font-size:15px;outline:none;background:#fff}
.mmwb-lf-search-btn:not(.ds-btn){padding:11px 22px;background:var(--ds-accent,#e4002b);color:#fff;border:0;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer}
.mmwb-lf-card.mmwb-lf-hide{display:none}
.mmwb-lf-title{margin:0}
.mmwb-lf-addr{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.5}
.mmwb-lf-dist{margin:0;color:var(--ds-accent,#e4002b);font-size:13px;font-weight:700}
.mmwb-lf-btns{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.mmwb-lf-map{flex:1 1 44%;min-height:640px;align-self:stretch;position:sticky;top:0;background:#dde2f1;display:flex;align-items:center;justify-content:center}
.mmwb-lf-map-note{color:#6b7280;font-size:14px;font-weight:600}
.mmwb-lf-empty{margin:16px 2px}
.mmwb-lf-map .leaflet-container{width:100%;height:100%}
.mmwb-lf-wrap--cards,.mmwb-lf-wrap--drill{display:block;padding:72px 0;max-width:none}
.mmwb-lf-wrap--cards .mmwb-lf-panel,.mmwb-lf-wrap--drill .mmwb-lf-panel{max-width:none;max-height:none;padding:0}
.mmwb-lf-wrap--cards .mmwb-locfinder{grid-template-columns:repeat(3,1fr)}
.mmwb-lf-map--wide{position:relative;min-height:360px;margin-top:36px;border-radius:18px;overflow:hidden}
.mmwb-lf-card--drill{min-height:240px;padding:28px;border-radius:16px;background-size:cover;background-position:center;justify-content:flex-end;box-shadow:inset 0 -80px 80px rgba(0,0,0,.55)}
.mmwb-locfinder--drill{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){
  .mmwb-lf-wrap{flex-direction:column}
  .mmwb-lf-panel{max-width:100%;max-height:none}
  .mmwb-lf-map{min-height:340px;position:relative}
  .mmwb-lf-wrap--cards .mmwb-locfinder,.mmwb-locfinder--drill{grid-template-columns:1fr}
}

/* ── Popup / Lightbox ──────────────────────────────────────────────────────
   Hidden by default; the publish runtime adds .is-open on its trigger. In the
   editor this is neutralised (see core/resolveEditorConfig) so the card shows
   inline & editable instead of a fixed, hidden full-screen overlay. */
.mmwb-popup { position: fixed; inset: 0; z-index: 9000; box-sizing: border-box; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15,23,42,.6); }
.mmwb-popup.is-open { display: flex; }
.mmwb-popup[data-popup-position="top"] { align-items: flex-start; }
.mmwb-popup[data-popup-position="bottom"] { align-items: flex-end; }
.mmwb-popup[data-popup-position="left"] { justify-content: flex-start; padding: 0; }
.mmwb-popup[data-popup-position="right"] { justify-content: flex-end; padding: 0; }
.mmwb-popup-box { position: relative; box-sizing: border-box; width: 100%; max-width: 480px; max-height: 100%; overflow: auto; padding: 40px; border-radius: 16px; background: #fff; color: #0f172a; box-shadow: 0 30px 80px rgba(2,6,23,.35); }
.mmwb-popup[data-popup-position="left"] .mmwb-popup-box,
.mmwb-popup[data-popup-position="right"] .mmwb-popup-box { max-width: 420px; height: 100%; max-height: 100%; border-radius: 0; }
.mmwb-popup-content { display: flex; flex-direction: column; gap: 14px; }
.mmwb-popup-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.mmwb-popup-x:hover { background: #e2e8f0; color: #0f172a; }
.mmwb-popup-hide-x .mmwb-popup-x { display: none; }
@keyframes mmwb-pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmwb-pop-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mmwb-pop-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mmwb-pop-down { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes mmwb-pop-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
.mmwb-popup.is-open .mmwb-popup-box { animation: mmwb-pop-fade .25s ease both; }
.mmwb-popup[data-popup-anim="zoom"].is-open .mmwb-popup-box { animation: mmwb-pop-zoom .26s cubic-bezier(.2,.8,.2,1) both; }
.mmwb-popup[data-popup-anim="slide-up"].is-open .mmwb-popup-box { animation: mmwb-pop-up .3s cubic-bezier(.2,.8,.2,1) both; }
.mmwb-popup[data-popup-anim="slide-down"].is-open .mmwb-popup-box { animation: mmwb-pop-down .3s cubic-bezier(.2,.8,.2,1) both; }
.mmwb-popup[data-popup-anim="slide-right"].is-open .mmwb-popup-box { animation: mmwb-pop-right .3s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .mmwb-popup .mmwb-popup-box { animation: none !important; } }
body.mmwb-popup-lock { overflow: hidden; }
/* ── Donate (fundraiser gift form) ─────────────────────────────────────────── */
.mmwb-donate-card { padding: 32px; }
/* The paid state of a Donate / register / book / checkout form. */
.mmwb-paid-card { margin: 0; }
.mmwb-paid-card .ds-form-success-title { text-transform: none; letter-spacing: 0; }
.mmwb-paid-receipt { color: var(--ds-accent, #7367f0); font-weight: 600; text-decoration: underline; }
.mmwb-checkout[hidden] { display: none !important; }
/* The block inside a card the page already drew (a form tab): no second card. */
.mmwb-donate-inline { padding: 0; }
.ds-tab-panel > .ds-sample-badge, .ds-form-card > .ds-sample-badge { margin-bottom: 14px; }
.mmwb-donate-title { margin: 0 0 8px; }
.mmwb-donate-lead { margin: 0 0 18px; }
.mmwb-donate-progress { margin: 0 0 22px; }
.mmwb-donate-bar { height: 10px; border-radius: 999px; background: rgba(15, 23, 42, .1); overflow: hidden; }
.ds-band-dark .mmwb-donate-bar { background: rgba(255, 255, 255, .16); }
.mmwb-donate-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ds-accent, #7367f0); transition: width .6s ease; }
.mmwb-donate-stats { margin: 8px 0 0; font-size: .9rem; opacity: .85; }
.mmwb-donate-stats b { font-size: 1.05rem; opacity: 1; }
.mmwb-donate-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.mmwb-donate-freq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mmwb-donate-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mmwb-donate-chip { position: relative; display: block; cursor: pointer; }
.mmwb-donate-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mmwb-donate-chip span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 12px; border: 1.5px solid rgba(15, 23, 42, .18); border-radius: 10px; font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
.ds-band-dark .mmwb-donate-chip span { border-color: rgba(255, 255, 255, .25); }
.mmwb-donate-chip.is-on span, .mmwb-donate-chip input:checked + span { border-color: var(--ds-accent, #7367f0); background: var(--ds-accent, #7367f0); color: #fff; }
.mmwb-donate-chip input:focus-visible + span { outline: 2px solid var(--ds-accent, #7367f0); outline-offset: 2px; }
.mmwb-donate-other { margin-top: 10px; }
.mmwb-donate-note { margin: 12px 0 0; resize: vertical; }
.mmwb-donate .mmwb-pay-fields { margin-top: 12px; }
.mmwb-donate .mmwb-pay-btn { margin-top: 16px; }
/* "Enlarge tap targets" from the publish dialog: a link or button a thumb missed on a phone. */
@media (max-width: 767px) { .mmwb-tap { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; box-sizing: border-box; } }
/* A popup copied from another site keeps that site's modal markup and stylesheet
   (see the importer's convertPopups): the platform's own overlay layer fills the
   popup, its card sits where the site placed it, and the builder's scrim + card
   chrome are switched off. The runtime sets .is-fit when the card would not fit the
   viewport (a desktop lightbox on a phone): the card is centred and scaled. */
.mmwb-popup.mmwb-popup-keep { padding: 0; background: transparent; }
.mmwb-popup-keep .mmwb-popup-box { max-width: none; height: 100%; max-height: 100%; padding: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
.mmwb-popup-keep .mmwb-popup-content { display: block; height: 100%; }
.mmwb-popup-keep .mmwb-popup-content > * { pointer-events: auto; }
.mmwb-popup-keep [data-popup-card] { pointer-events: auto; }
.mmwb-popup-keep [data-popup-card] > .mmwb-popup-x { display: flex; top: 10px; right: 10px; z-index: 5; font-family: system-ui, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.mmwb-popup-keep.is-fit .mmwb-popup-content > * { min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden; }
.mmwb-popup-keep.is-fit [data-popup-card] { position: fixed !important; left: 50% !important; top: 50% !important; margin: 0 !important; transform-origin: center; }
.mmwb-video-ph:has(iframe[src^="http"]) .mmwb-video-ph-ui,
.mmwb-video-ph:has(video[src]:not([src=""])) .mmwb-video-ph-ui { display: none !important; }

/* ============================================================================
 * Modern component families. Choice controls keep a NATIVE input underneath
 * the styled label (accessible, submits like any radio/checkbox); the details
 * card, profile split, collage, checklist, footer columns and the phone-only
 * sticky CTA give the generator named patterns instead of improvised markup.
 * ==========================================================================*/
.ds-btn:focus-visible { outline:3px solid color-mix(in srgb, var(--ds-accent) 45%, transparent); outline-offset:2px; }
.ds-btn:active { transform:translateY(0); }
.ds-btn[disabled], .ds-btn:disabled, .ds-btn.is-disabled { opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }
.ds-btn.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.ds-btn.is-loading::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform:rotate(360deg); } }
.ds-btn-outline { background:transparent; color:var(--ds-accent); border:2px solid var(--ds-accent); }
.ds-btn-outline:hover { background:var(--ds-accent); color:#fff; }
.ds-hero-bg .ds-btn-outline, .ds-band-dark .ds-btn-outline { color:#fff; border-color:rgba(255,255,255,.7); }
.ds-btn-xl { padding:17px 34px; font-size:17px; border-radius:14px; font-weight:700; }
/* Longhand on purpose: the hero and photo CTA bands also carry ds-band-dark, and a
   background shorthand here (later in the sheet than .ds-hero-bg) reset their
   background-size/repeat — the hero photo tiled at natural size instead of covering. */
.ds-band-dark { background-color:var(--ds-dark, #0f172a); color:#fff; }
.ds-band-dark .ds-h1, .ds-band-dark .ds-h2, .ds-band-dark .ds-h3, .ds-band-dark p, .ds-band-dark li, .ds-band-dark .ds-lead, .ds-band-dark .ds-text { color:#fff; }
.ds-band-dark .ds-muted, .ds-band-dark .ds-eyebrow { color:rgba(255,255,255,.7); }
.ds-band-dark .ds-card { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#e2e8f0; }

/* Choice cards: <label class="ds-choice"><input type="radio" name="…" value="…"><div class="ds-icon">svg</div><strong>Label</strong><span>Detail</span></label> */
.ds-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:0 0 16px; }
.ds-choice { position:relative; display:flex; flex-direction:column; gap:6px; padding:16px 44px 16px 18px; border:1.5px solid #e5e7eb; border-radius:14px; background:#fff; cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s; min-width:0; }
.ds-choice input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.ds-choice:hover { border-color:#c7cbd6; transform:translateY(-1px); }
.ds-choice::after { content:""; position:absolute; top:14px; right:14px; width:18px; height:18px; border-radius:50%; border:2px solid #d1d5db; background:#fff; }
.ds-choice:has(input:checked) { border-color:var(--ds-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--ds-accent) 18%, transparent); background:color-mix(in srgb, var(--ds-accent) 6%, #fff); }
.ds-choice:has(input:checked)::after { border-color:var(--ds-accent); background:var(--ds-accent); box-shadow:inset 0 0 0 3px #fff; }
.ds-choice:has(input[type="checkbox"])::after { border-radius:5px; }
.ds-choice:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--ds-accent) 45%, transparent); outline-offset:2px; }
.ds-choice .ds-icon { width:40px; height:40px; margin-bottom:4px; font-size:18px; }
.ds-choice strong { font-weight:700; color:#111827; font-size:15px; line-height:1.3; }
.ds-choice span { color:#6b7280; font-size:13.5px; line-height:1.45; }
.ds-hero-bg .ds-choice, .ds-band-dark .ds-choice, .ds-card-dark .ds-choice { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); }
.ds-hero-bg .ds-choice strong, .ds-band-dark .ds-choice strong, .ds-card-dark .ds-choice strong { color:#fff; }
.ds-hero-bg .ds-choice span, .ds-band-dark .ds-choice span, .ds-card-dark .ds-choice span { color:rgba(255,255,255,.75); }

/* Segmented control: <div class="ds-segmented"><label><input type="radio" name="…" checked>Mixer</label><label><input type="radio" name="…">Private time</label></div> */
.ds-segmented { display:inline-flex; flex-wrap:wrap; gap:6px; padding:6px; border-radius:999px; background:#f3f4f6; margin:0 0 16px; }
.ds-segmented label { position:relative; padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; color:#374151; cursor:pointer; transition:background .12s, color .12s; }
.ds-segmented label input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.ds-segmented label:has(input:checked) { background:#fff; color:#111827; box-shadow:0 2px 8px rgba(16,24,40,.12); }
.ds-segmented label:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--ds-accent) 45%, transparent); }
.ds-band-dark .ds-segmented, .ds-hero-bg .ds-segmented { background:rgba(255,255,255,.12); }
.ds-band-dark .ds-segmented label, .ds-hero-bg .ds-segmented label { color:rgba(255,255,255,.8); }
.ds-band-dark .ds-segmented label:has(input:checked), .ds-hero-bg .ds-segmented label:has(input:checked) { background:#fff; color:#111827; }
.ds-select { width:100%; padding:13px 40px 13px 16px; border:1px solid #e5e7eb; border-radius:var(--ds-radius-ui, 12px); font-size:15px; font-family:inherit; color:#1f2937; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; appearance:none; -webkit-appearance:none; }
.ds-select:focus { outline:2px solid var(--ds-accent); outline-offset:-1px; border-color:transparent; }
.ds-form .ds-input, .ds-form .ds-select { max-width:none; width:100%; }
/* Phone: dial-code select beside the number. */
.ds-phone { display:flex; gap:8px; align-items:stretch; }
.ds-form .ds-phone .ds-phone-cc, .ds-phone .ds-phone-cc { width:auto; flex:0 0 auto; min-width:108px; padding-right:34px; }
.ds-form .ds-phone .ds-input, .ds-phone .ds-input { flex:1 1 auto; min-width:0; max-width:none; width:auto; }
.ds-phone .mmwb-co-in { flex:1 1 auto; min-width:0; width:auto; }
.ds-phone select.mmwb-co-in { flex:0 0 auto; width:auto; min-width:108px; }
.ds-grid-2 > .ds-phone, .mmwb-co-row > .ds-phone { min-width:0; }
.ds-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.ds-form-grid .ds-field { margin:0; }
.ds-form-grid .full { grid-column:1 / -1; }

/* Details card: <div class="ds-details"><div class="ds-details-img"><img …></div><div><div class="ds-icon">svg</div><div><b>Location</b><p>Las Vegas</p></div></div>…</div> */
.ds-details { display:grid; gap:0; border:1px solid #eceef3; border-radius:18px; background:#fff; padding:8px 22px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
/* !important: the generator styles rows by id (display:flex, column direction, extra margins) and broke the icon/text line; the row layout is the family's, not the page's. */
.ds-details > div { display:grid !important; grid-template-columns:40px 1fr !important; flex-direction:row !important; gap:14px !important; align-items:center !important; padding:12px 0 !important; margin:0 !important; border-bottom:1px solid #f1f2f6; }
.ds-details > div > * { margin:0; min-width:0; }
.ds-details > div:last-child { border-bottom:0; }
.ds-details .ds-icon { width:40px !important; height:40px !important; margin:0 !important; font-size:18px; }
.ds-details span:not(.ds-icon) { display:block; color:#4b5563; font-size:14px; line-height:1.4; }
/* Inside a dark band, hero or dark card the details card goes dark by itself — no ds-card-dark needed. */
.ds-band-dark .ds-details, .ds-hero-bg .ds-details, .ds-card-dark .ds-details { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); box-shadow:none; }
.ds-band-dark .ds-details > div, .ds-hero-bg .ds-details > div, .ds-card-dark .ds-details > div { border-color:rgba(255,255,255,.08); }
.ds-band-dark .ds-details b, .ds-band-dark .ds-details strong, .ds-hero-bg .ds-details b, .ds-hero-bg .ds-details strong, .ds-card-dark .ds-details b, .ds-card-dark .ds-details strong { color:rgba(255,255,255,.65); }
.ds-band-dark .ds-details p, .ds-band-dark .ds-details span:not(.ds-icon), .ds-hero-bg .ds-details p, .ds-hero-bg .ds-details span:not(.ds-icon), .ds-card-dark .ds-details p, .ds-card-dark .ds-details span:not(.ds-icon) { color:#fff; }
.ds-band-dark .ds-details .ds-icon, .ds-hero-bg .ds-details .ds-icon, .ds-card-dark .ds-details .ds-icon { background:rgba(255,255,255,.1); color:var(--ds-accent); }
.ds-details b, .ds-details strong { display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; font-weight:700; margin-bottom:2px; }
.ds-details p { margin:0; color:#111827; font-weight:500; line-height:1.45; }
.ds-details > .ds-details-img { display:block; padding:0; border-bottom:0; margin:-8px -22px 10px; }
.ds-details-img img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:17px 17px 0 0; }
.ds-card-dark { background:#0f172a; border-color:rgba(255,255,255,.1); color:#e2e8f0; }

/* Live-list bands (packages/ai/src/collections.ts): sample mode ribbon + card shapes.
   The ribbon stays on the published preview on purpose: a customer shows the layout
   before entering a single event, and nobody mistakes demo entries for real ones. */
.ds-sample-badge { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 12px; border-radius:999px; background:#fff7ed; border:1px dashed #f59e0b; color:#9a3412; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ds-sample-dot { width:8px; height:8px; border-radius:50%; background:#f59e0b; }
.ds-band-dark .ds-sample-badge { background:rgba(245,158,11,.14); color:#fcd34d; }
.ds-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ds-event-card { display:flex; gap:18px; padding:22px; align-items:flex-start; }
.ds-event-card[data-href] { cursor:pointer; }
.ds-event-date { flex:none; min-width:64px; padding:12px 8px; border-radius:12px; background:var(--ds-accent); color:#fff; text-align:center; font-size:13px; font-weight:800; letter-spacing:.06em; line-height:1.15; text-transform:uppercase; }
.ds-event-body { min-width:0; flex:1; }
.ds-event-body .ds-h3 { margin:0 0 6px; font-size:19px; }
.ds-event-card.ds-event-card-media { flex-direction:column; gap:0; padding:0; overflow:hidden; }
.ds-event-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:#111827; }
.ds-event-media img { width:100%; height:100%; object-fit:cover; display:block; }
.ds-event-media .ds-event-date { position:absolute; left:14px; bottom:14px; min-width:0; padding:8px 10px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.ds-event-card-media .ds-event-body { padding:18px 20px 20px; }
.ds-btn.ds-btn-icon { width:40px; height:40px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
.ds-btn-icon svg { width:18px; height:18px; }
.ds-event-meta { margin:0 0 4px; font-size:14px; color:#6b7280; }
.ds-card-dark .ds-event-meta { color:rgba(226,232,240,.75); }
.ds-event-text { margin:8px 0 0; font-size:14px; }
.ds-event-more { display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:var(--ds-accent); }
.ds-card-media { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.ds-product-link { display:block; line-height:0; }
.ds-product-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ds-card-media .ds-card-body { display:flex; flex-direction:column; gap:8px; flex:1; }
.ds-product-name { margin:0; font-size:17px; }
.ds-product-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:8px; }
.ds-product-price { font-size:18px; }
.ds-menu { display:grid; grid-template-columns:1fr 1fr; gap:10px 48px; }
.ds-menu-row { display:flex; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(127,127,127,.22); }
.ds-menu-main { flex:1; min-width:0; }
.ds-menu-name { margin:0; font-size:17px; font-weight:700; }
.ds-menu-text { margin:4px 0 0; font-size:14px; color:#6b7280; }
.ds-band-dark .ds-menu-text { color:rgba(226,232,240,.75); }
.ds-menu-price { flex:none; font-size:16px; color:var(--ds-accent); }
.ds-schedule { display:flex; flex-direction:column; gap:12px; }
.ds-review-stat { font-size:18px; margin:0 0 20px; }
.ds-review-stat strong { font-size:26px; margin-right:6px; }
.ds-review-card { display:flex; flex-direction:column; gap:10px; }
.ds-review-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ds-stars { color:#f5b301; letter-spacing:2px; font-size:16px; }
.ds-review-text { margin:0; line-height:1.55; }
.ds-review-who { margin:auto 0 0; font-size:14px; }
.ds-loc-social { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ds-team-card { overflow:hidden; padding:0; }
.ds-team-photo { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ds-team-photo[hidden] { display:none; }
.ds-team-bio { display:none; margin:12px 0 0; }
.ds-team-card.is-open .ds-team-bio { display:block; }
.mmwb-locnav { display:flex; flex-wrap:wrap; gap:6px; padding:14px 0; border-bottom:1px solid rgba(127,127,127,.18); margin-bottom:8px; }
.mmwb-locnav-link { display:inline-block; padding:8px 14px; border-radius:999px; font-weight:600; font-size:14px; text-decoration:none; color:inherit; background:rgba(127,127,127,.10); }
.mmwb-locnav-link[aria-current="page"] { background:var(--mmwb-accent,#7367f0); color:#fff; }
.ds-sched-filter { display:flex; justify-content:flex-end; margin:0 0 14px; }
.ds-sched-filter label { display:inline-flex; align-items:center; gap:10px; }
.ds-sched-filter .ds-select { min-width:160px; padding:8px 12px; border-radius:10px; }
.ds-sched-row { display:grid; grid-template-columns:170px 1fr auto; gap:20px; align-items:center; padding:18px 22px; border-radius:16px; background:#fff; border:1px solid #eceef3; }
.ds-band-dark .ds-sched-row { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.ds-sched-when { font-weight:700; color:var(--ds-accent); font-size:15px; }
.ds-sched-name { margin:0; font-size:17px; font-weight:700; }
.ds-sched-text { margin:4px 0 0; font-size:14px; color:#6b7280; }
.ds-band-dark .ds-sched-text { color:rgba(226,232,240,.75); }
.ds-sched-side { display:flex; align-items:center; gap:14px; }
.ds-sched-price { font-weight:700; }
.ds-member-card .ds-price { margin:10px 0 6px; }
.ds-member-text { margin:0 0 20px; font-size:15px; }
.ds-service-card { display:flex; flex-direction:column; }
.ds-service-card .ds-h3 { margin:0 0 8px; }
.ds-service-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 16px; font-size:15px; }
.ds-service-duration { color:#6b7280; }
.ds-band-dark .ds-service-duration { color:rgba(226,232,240,.75); }
.ds-service-price { font-size:18px; }
/* Layout variants the design map can ask for (see SECTION_FAMILIES[].layouts). */
.ds-menu-single { grid-template-columns:1fr; max-width:760px; margin:0 auto; }
.ds-photo-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.ds-photo-strip img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; }
.ds-split-strip { display:grid; grid-template-columns:3fr 2fr; gap:36px; align-items:center; }
.ds-strip-copy { padding:36px; border-radius:18px; background:var(--ds-accent); color:#fff; }
.ds-strip-copy .ds-eyebrow, .ds-strip-copy .ds-h2, .ds-strip-copy p { color:#fff; }
.ds-strip-copy .ds-h2 { font-size:clamp(34px, 4vw, 52px); line-height:1; margin:0 0 12px; }
.ds-event-rows { display:flex; flex-direction:column; gap:10px; }
.ds-event-row { display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:center; padding:16px 22px; border-radius:14px; background:#fff; border:1px solid #eceef3; }
.ds-band-dark .ds-event-row { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.ds-event-row[data-href] { cursor:pointer; }
.ds-event-row .ds-event-date { min-width:0; padding:8px 6px; font-size:12px; }
.ds-event-row .ds-h3 { margin:0 0 2px; font-size:18px; }
.ds-event-row .ds-event-meta { margin:0; }
.ds-event-row .ds-event-more { margin:0; white-space:nowrap; }
.ds-product-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.ds-product-strip .ds-card-media .ds-card-body { padding:14px 16px 16px; }
.ds-product-strip .ds-product-name { font-size:15px; }
.ds-product-strip .ds-btn-sm { padding:7px 12px; font-size:13px; }
.ds-hero-copy.ds-center { margin:0 auto; text-align:center; }
.ds-hero-copy.ds-center .ds-btn-row { justify-content:center; }
.ds-hero-copy.ds-center .ds-details { margin-left:auto; margin-right:auto; }
@media (max-width: 767px){
  .ds-photo-strip { grid-template-columns:1fr 1fr; }
  .ds-split-strip { grid-template-columns:1fr; }
  .ds-event-row { grid-template-columns:1fr; gap:8px; }
  .ds-product-strip { grid-template-columns:1fr 1fr; }
}
@media (max-width: 767px){
  .ds-menu { grid-template-columns:1fr; }
  .ds-sched-row { grid-template-columns:1fr; gap:10px; }
  .ds-sched-side { justify-content:space-between; }
}
.ds-card-dark p, .ds-card-dark .ds-h3, .ds-card-dark .ds-h4, .ds-card-dark strong { color:#fff; }
.ds-card-dark.ds-details b, .ds-card-dark.ds-details strong { color:rgba(255,255,255,.6); }
.ds-card-dark.ds-details > div { border-color:rgba(255,255,255,.08); }
.ds-card-dark .ds-icon { background:rgba(255,255,255,.1); color:#fff; }
.ds-card-glass { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); color:#fff; }

/* Profile: <div class="ds-profile"><img …><div><span class="ds-eyebrow">About</span><h2 class="ds-h2">…</h2><p class="ds-lead">…</p><ul class="ds-creds"><li><div class="ds-icon">svg</div><div><b>Founder</b><small>MyManager.com</small></div></li></ul></div></div> */
.ds-profile { display:grid; grid-template-columns:minmax(240px, 2fr) 3fr; gap:44px; align-items:center; }
.ds-profile > img, .ds-profile > .ds-profile-img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:20px; display:block; }
/* No portrait: the placeholder is an invisible 4:5 block of nothing — drop it and let the copy take the row. */
.ds-profile > .ds-profile-img:empty { display:none; }
.ds-profile:has(> .ds-profile-img:empty) { grid-template-columns:1fr; }
.ds-creds { display:flex; flex-wrap:wrap; gap:14px 30px; margin:22px 0 0; padding:0; list-style:none; }
.ds-creds li { display:flex; align-items:center; gap:10px; font-size:14.5px; color:#374151; }
.ds-creds li .ds-icon { width:38px; height:38px; margin:0; font-size:20px; border-radius:10px; flex:none; }
.ds-creds li b { display:block; color:#111827; line-height:1.2; }
.ds-creds li small { color:#6b7280; }
.ds-band-dark .ds-creds li, .ds-hero-bg .ds-creds li { color:rgba(255,255,255,.85); }
.ds-band-dark .ds-creds li b { color:#fff; }

/* Photo tiles: <div class="ds-tiles"><a class="ds-tile" style="grid-column:span 4;background-image:url(…)"><div class="ds-tile-body">…</div></a>…</div> */
.ds-tiles { display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; }
.ds-tile { position:relative; display:flex; align-items:flex-end; min-height:320px; border-radius:var(--ds-radius, 18px); overflow:hidden; background:#111827 center/cover no-repeat; color:#fff; text-decoration:none; isolation:isolate; transition: transform .2s ease, box-shadow .2s ease; }
.ds-tile::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.04) 35%, rgba(0,0,0,.82) 100%); transition: background .2s ease; }
.ds-tile:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.28); }
.ds-tile:hover::before { background:linear-gradient(180deg, rgba(0,0,0,.12) 30%, rgba(0,0,0,.88) 100%); }
.ds-tile-wide { min-height:260px; }
.ds-tile-plain { background:color-mix(in srgb, var(--ds-accent) 22%, #111827); }
.ds-tile-body { padding:26px 26px 24px; max-width:520px; }
.ds-tile .ds-eyebrow { color:color-mix(in srgb, var(--ds-accent) 70%, #fff); margin-bottom:6px; }
.ds-tile .ds-h3 { color:#fff; margin:0 0 6px; font-size:24px; line-height:1.1; letter-spacing:-.01em; }
.ds-tile p { color:rgba(255,255,255,.86); margin:0 0 14px; font-size:15px; }
.ds-tile .ds-btn { pointer-events:none; }
/* Location finder tiles rendered by the section engine: a photo tile per location that
   keeps the finder runtime's card hooks. The two-class selectors outrank the finder's own
   white-card CSS that publish injects. */
/* The finder's old white-card rule (.mmwb-lf-card:not(.ds-card):not(--drill)) outranks
   .ds-tile on specificity, which painted white cards under white tile text. These win
   on specificity and put the copy at the bottom of the tile, over the dark scrim. */
.ds-tile.mmwb-lf-card, .ds-tile.mmwb-lf-card:not(.ds-card):not(.mmwb-lf-card--drill) { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:0; border:0; box-shadow:none; min-height:340px; background-color:#111827; background-size:cover; background-position:center 35%; background-repeat:no-repeat; color:#fff; }
.ds-tile.ds-tile-plain.mmwb-lf-card:not(.ds-card):not(.mmwb-lf-card--drill) { background-color:color-mix(in srgb, var(--ds-accent) 22%, #111827); }
.ds-tile.mmwb-lf-card .ds-tile-body { margin-top:auto; width:100%; }
.ds-tile.mmwb-lf-card .ds-lf-hours { color:rgba(255,255,255,.8); font-size:14px; margin:0 0 12px; white-space:pre-line; }
.ds-tile.mmwb-lf-card.mmwb-lf-hide { display:none; }
.ds-tile.mmwb-lf-card .ds-btn { pointer-events:auto; }
.ds-tile.mmwb-lf-card .ds-lf-hours { font-size:13.5px; line-height:1.5; }
.ds-tile.mmwb-lf-card .ds-btn-row { margin-top:4px; }
.ds-lf-controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.ds-lf-controls .mmwb-lf-search { flex:1 1 260px; max-width:420px; }
.ds-lf-map { margin-top:32px; border-radius:18px; overflow:hidden; min-height:380px; background:#e5e7eb; }
.ds-lf-map:empty, .ds-lf-map:has(> .mmwb-lf-map-note:only-child) { display:grid; place-items:center; color:#6b7280; }
.ds-lf-embed { border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.14); background:#e5e7eb; }
.ds-lf-embed iframe { display:block; width:100%; height:420px; border:0; }
@media (max-width:640px) { .ds-lf-embed iframe { height:300px; } .ds-tile.mmwb-lf-card { min-height:300px; } }
.ds-btn-sm { padding:9px 16px; font-size:13px; }
/* Collage: <div class="ds-collage"><img class="wide tall" …><img …><img …></div> */
.ds-collage { display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:150px; gap:10px; }
.ds-collage img { width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; }
.ds-collage .wide { grid-column:span 2; }
.ds-collage .tall { grid-row:span 2; }

/* Checklist: <ul class="ds-checklist"><li><div class="ds-icon">check svg</div>Entrepreneurs &amp; Business Owners</li>…</ul> */
.ds-checklist { columns:2; column-gap:32px; list-style:none; padding:0; margin:0; }
.ds-checklist li { break-inside:avoid; display:flex; gap:10px; align-items:flex-start; padding:6px 0; color:#1f2937; line-height:1.45; }
/* The tick is a solid accent tile with an on-accent glyph: a 12px accent-on-tint stroke was almost invisible. */
.ds-checklist li .ds-icon, .ds-band-dark .ds-checklist li .ds-icon, .ds-card-dark .ds-checklist li .ds-icon { width:24px; height:24px; margin:0; border-radius:7px; font-size:14px; flex:none; background:var(--ds-accent); color:var(--mmwb-on-accent, #fff); }
.ds-checklist li .ds-icon > svg { max-width:70%; max-height:70%; stroke-width:3; }
.ds-checklist.cols-3 { columns:3; }
.ds-band-dark .ds-checklist li { color:rgba(255,255,255,.9); }

/* Footer columns */
.ds-footer .ds-footer-cols { display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:36px; }
.ds-footer .ds-footer-cols h4, .ds-footer .ds-footer-cols .ds-h4 { color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px; font-weight:700; }
.ds-footer .ds-footer-cols p { color:#94a3b8; font-size:14.5px; line-height:1.6; margin:0; }

/* Spec forms (rendered from a FormSpec): labels, hints, checks, steps, success, dark variants. */
.ds-form.ds-form-spec { display:block; width:100%; }
.ds-form-card { padding:28px; }
.ds-form-spec .ds-h3 { margin:0 0 6px; }
.ds-form-spec > .ds-muted { margin:0 0 20px; }
.ds-form-spec .ds-label { display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; margin:0 0 6px; }
.ds-form-spec .ds-req { color:var(--ds-accent); }
.ds-form-spec .ds-hint { display:block; margin-top:5px; font-size:12.5px; color:#6b7280; }
.ds-form-spec .ds-field[hidden] { display:none !important; }
.ds-form-spec .ds-check { display:flex; align-items:flex-start; gap:10px; padding:10px 0; font-size:15px; color:#1f2937; cursor:pointer; }
.ds-form-spec .ds-check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--ds-accent); flex:none; }
.ds-form-spec .ds-checks { display:grid; gap:2px; }
.ds-form-spec .ds-segmented { display:flex; }
.ds-form-spec .ds-segmented label { flex:1 1 auto; text-align:center; }
.ds-form-spec .ds-btn-block { margin-top:10px; }
.ds-form-spec .ds-form-nav { justify-content:space-between; margin-top:18px; }
.ds-form-spec .ds-form-nav .ds-btn-block { flex:1; }
.ds-form-step { border:0; padding:0; margin:0; min-width:0; }
.ds-form-step[hidden] { display:none; }
.ds-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ds-form-steps { display:flex; gap:8px; list-style:none; padding:0; margin:0 0 22px; counter-reset:step; }
.ds-form-steps li { flex:1; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#9ca3af; padding-bottom:10px; border-bottom:2px solid #e5e7eb; }
.ds-form-steps li span { width:22px; height:22px; border-radius:999px; background:#e5e7eb; color:#374151; display:inline-grid; place-items:center; font-size:12px; }
.ds-form-steps li.is-current, .ds-form-steps li.is-done { color:#111827; border-color:var(--ds-accent); }
.ds-form-steps li.is-current span, .ds-form-steps li.is-done span { background:var(--ds-accent); color:#fff; }
.ds-form-success { margin:16px 0 0; padding:32px 22px 26px; border-radius:16px; border:1px solid rgba(16,185,129,.35); background:rgba(16,185,129,.07); color:#111827; text-align:center; }
.ds-form-success[hidden] { display:none; }
.ds-form-success-icon { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:999px; border:3px solid #10b981; color:#10b981; margin:0 auto 16px; }
.ds-form-success-title { margin:0 0 10px; font-size:24px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:inherit; }
.ds-form-success-text { margin:0 auto; max-width:46ch; font-size:16px; line-height:1.55; color:#374151; }
.ds-form-success-text b { color:var(--ds-accent); font-weight:700; }
.ds-form-success-cal { display:grid; gap:10px; margin:22px 0 0; }
.ds-form-success-label { margin:0 0 4px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6b7280; }
.ds-form-success-cal .ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:0; text-transform:uppercase; letter-spacing:.06em; font-size:14px; }
.ds-form-success-again { margin:20px 0 0; background:none; border:0; padding:0; font:inherit; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b7280; text-decoration:underline; cursor:pointer; }
.ds-form-error { margin:12px 0 0; padding:12px 14px; border-radius:10px; background:rgba(239,68,68,.12); color:#991b1b; font-weight:600; font-size:14px; }
.ds-form-error[hidden] { display:none; }
.ds-band-dark .ds-form-error, .ds-card-dark .ds-form-error { background:rgba(239,68,68,.2); color:#fecaca; }
.ds-form-spec.is-sent > :not(.ds-form-success) { display:none; }
.ds-form-spec.is-sent > .ds-form-success { display:block; }
.ds-band-dark .ds-form-spec .ds-label, .ds-hero-bg .ds-form-spec .ds-label, .ds-card-dark .ds-form-spec .ds-label { color:rgba(255,255,255,.65); }
.ds-band-dark .ds-form-spec .ds-hint, .ds-band-dark .ds-form-spec .ds-check, .ds-hero-bg .ds-form-spec .ds-hint, .ds-hero-bg .ds-form-spec .ds-check, .ds-card-dark .ds-form-spec .ds-hint, .ds-card-dark .ds-form-spec .ds-check { color:rgba(255,255,255,.85); }
.ds-band-dark .ds-form-spec .ds-h3, .ds-hero-bg .ds-form-spec .ds-h3, .ds-card-dark .ds-form-spec .ds-h3 { color:#fff; }
.ds-band-dark .ds-form-spec .ds-muted, .ds-hero-bg .ds-form-spec .ds-muted, .ds-card-dark .ds-form-spec .ds-muted { color:rgba(255,255,255,.7); }
.ds-band-dark .ds-input, .ds-band-dark .ds-textarea, .ds-band-dark .ds-select, .ds-hero-bg .ds-input, .ds-hero-bg .ds-textarea, .ds-hero-bg .ds-select, .ds-card-dark .ds-input, .ds-card-dark .ds-textarea, .ds-card-dark .ds-select { background-color:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff; }
.ds-band-dark .ds-input::placeholder, .ds-band-dark .ds-textarea::placeholder, .ds-hero-bg .ds-input::placeholder, .ds-card-dark .ds-input::placeholder { color:rgba(255,255,255,.45); }
.ds-band-dark .ds-select option, .ds-hero-bg .ds-select option, .ds-card-dark .ds-select option { color:#111827; }
.ds-band-dark .ds-form-steps li, .ds-card-dark .ds-form-steps li { color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.15); }
.ds-band-dark .ds-form-steps li.is-current, .ds-band-dark .ds-form-steps li.is-done, .ds-card-dark .ds-form-steps li.is-current { color:#fff; border-color:var(--ds-accent); }
.ds-band-dark .ds-form-success, .ds-card-dark .ds-form-success { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.45); color:#fff; }
.ds-band-dark .ds-form-success-text, .ds-card-dark .ds-form-success-text { color:rgba(255,255,255,.85); }
.ds-band-dark .ds-form-success-label, .ds-band-dark .ds-form-success-again, .ds-card-dark .ds-form-success-label, .ds-card-dark .ds-form-success-again { color:rgba(255,255,255,.6); }

/* Tabs (CSS only, radio driven): <div class="ds-tabs"><input type="radio" name="t" id="t-rsvp" checked><input type="radio" name="t" id="t-zoom"><div class="ds-tab-bar"><label for="t-rsvp">RSVP</label><label for="t-zoom">Book a Zoom</label></div><article class="ds-tab-panel">…form 1…</article><article class="ds-tab-panel">…form 2…</article></div> — up to 4 tabs; two forms on one page go in tabs, never stacked */
.ds-tabs { position:relative; display:block; }
.ds-tabs > input[type="radio"] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.ds-tab-bar { display:flex; flex-wrap:wrap; gap:6px; padding:5px; margin:0 0 22px; border-radius:14px; background:rgba(17,24,39,.06); }
.ds-tab-bar label { flex:1 1 auto; text-align:center; padding:12px 18px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; color:#374151; opacity:.75; transition:background .15s, opacity .15s, box-shadow .15s; }
.ds-tab-bar label:hover { opacity:1; }
.ds-tabs > .ds-tab-panel { display:none; }
.ds-tabs > input:nth-of-type(1):checked ~ .ds-tab-bar label:nth-of-type(1),
.ds-tabs > input:nth-of-type(2):checked ~ .ds-tab-bar label:nth-of-type(2),
.ds-tabs > input:nth-of-type(3):checked ~ .ds-tab-bar label:nth-of-type(3),
.ds-tabs > input:nth-of-type(4):checked ~ .ds-tab-bar label:nth-of-type(4) { background:#fff; color:#111827; opacity:1; box-shadow:0 1px 3px rgba(16,24,40,.12); }
.ds-tabs > input:nth-of-type(1):checked ~ .ds-tab-panel:nth-of-type(1),
.ds-tabs > input:nth-of-type(2):checked ~ .ds-tab-panel:nth-of-type(2),
.ds-tabs > input:nth-of-type(3):checked ~ .ds-tab-panel:nth-of-type(3),
.ds-tabs > input:nth-of-type(4):checked ~ .ds-tab-panel:nth-of-type(4) { display:block; }
.ds-band-dark .ds-tab-bar, .ds-hero-bg .ds-tab-bar, .ds-card-dark .ds-tab-bar { background:rgba(255,255,255,.1); }
.ds-band-dark .ds-tab-bar label, .ds-hero-bg .ds-tab-bar label, .ds-card-dark .ds-tab-bar label { color:rgba(255,255,255,.85); }
.ds-band-dark .ds-tabs > input:checked ~ .ds-tab-bar label, .ds-hero-bg .ds-tabs > input:checked ~ .ds-tab-bar label { color:rgba(255,255,255,.85); }
.ds-band-dark .ds-tabs > input:nth-of-type(1):checked ~ .ds-tab-bar label:nth-of-type(1), .ds-band-dark .ds-tabs > input:nth-of-type(2):checked ~ .ds-tab-bar label:nth-of-type(2), .ds-band-dark .ds-tabs > input:nth-of-type(3):checked ~ .ds-tab-bar label:nth-of-type(3), .ds-band-dark .ds-tabs > input:nth-of-type(4):checked ~ .ds-tab-bar label:nth-of-type(4),
.ds-hero-bg .ds-tabs > input:nth-of-type(1):checked ~ .ds-tab-bar label:nth-of-type(1), .ds-hero-bg .ds-tabs > input:nth-of-type(2):checked ~ .ds-tab-bar label:nth-of-type(2), .ds-hero-bg .ds-tabs > input:nth-of-type(3):checked ~ .ds-tab-bar label:nth-of-type(3), .ds-hero-bg .ds-tabs > input:nth-of-type(4):checked ~ .ds-tab-bar label:nth-of-type(4) { background:var(--ds-accent); color:#111827; }

/* Phone safety net: the generator lays hero columns out with inline flex percentages and then "fixes" them with [style*=…] media queries, which die once the editor moves inline styles into classes. Below tablet width every direct child of a container takes the full width. */
@media (max-width: 768px) {
  .ds-section .ds-container { flex-wrap:wrap; }
  .ds-section .ds-container > * { flex:0 0 100% !important; width:auto !important; max-width:100% !important; }
  /* Side padding is only stripped from bare column divs (the model's inline-styled "columns"); cards,
   * details and quote blocks keep their own padding. */
  .ds-section .ds-container > div:not([class]) { padding-left:0 !important; padding-right:0 !important; }
  .ds-section p, .ds-section li, .ds-section .ds-eyebrow, .ds-section h1, .ds-section h2, .ds-section h3 { white-space:normal !important; overflow-wrap:anywhere; }
}
/* Phones: a segmented control or tab bar with long labels used to WRAP inside a pill-shaped track,
 * so the selected white pill and the grey track ended with different corners and a lopsided
 * stack. On phones both become a grid: two options side by side (labels wrap to two lines),
 * three stack, four make a 2×2 — every cell the same size, the track squared to match. */
@media (max-width: 767px) {
  .ds-segmented, .ds-form-spec .ds-segmented { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; box-sizing:border-box; border-radius:16px; padding:6px; }
  .ds-segmented label { display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 12px; border-radius:11px; text-align:center; white-space:normal; line-height:1.25; }
  .ds-segmented:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns:1fr; }
  .ds-tab-bar { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .ds-tab-bar label { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 10px; font-size:14px; white-space:normal; line-height:1.25; }
  .ds-tab-bar:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns:1fr; }
}
/* Phones: a layout div the generator built itself (id only, no family class) drops to one column — its "grid-template-columns:1fr 1fr" and "columns:2" were patched for phones with [style*=…] rules that no longer match. Family rows (details, choices) keep their own grids. */
@media (max-width: 640px) {
  .ds-section div[id]:not([class]):not(.ds-details > div):not(.ds-choice > div):not(.ds-profile > div):not(.ds-split > div) { grid-template-columns:1fr !important; columns:1 !important; }
  .ds-section ul[id]:not([class]) { columns:1 !important; }
}

/* Structured-section renderer classes (packages/ai sections.ts). */
.ds-sec-head { max-width:760px; margin:0 0 32px; }
.ds-sec-head.ds-center { margin-left:auto; margin-right:auto; }
.ds-sec-head .ds-h2 { margin-bottom:10px; }
.ds-hero-copy { max-width:680px; }
.ds-hero-split { align-items:end; }
.ds-hero-person img { width:100%; max-width:520px; margin:0 auto; display:block; border-radius:0; }
.ds-h1-highlight { display:block; color:var(--ds-accent); font-size:1.9em; line-height:.95; letter-spacing:-.02em; margin-top:.05em; }
/* Accent words inside the headline line (the common case on a designed page). */
.ds-h1-highlight.ds-h1-inline { display:inline; font-size:inherit; line-height:inherit; margin:0; }
/* Icon strip: small icon over a two-word label, hairline dividers, no cards. */
.ds-icon-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px 0; text-align:center; }
.ds-icon-cell { padding:6px 12px; border-left:1px solid rgba(128,128,128,.25); }
.ds-icon-row > .ds-icon-cell:first-child { border-left:0; }
.ds-icon-cell .ds-icon { margin:0 auto 10px; }
.ds-icon-label { font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.25; }
.ds-strip .ds-sec-head { margin-bottom:22px; }
/* Thin fact strip under a hero: icon + number + label side by side. */
.ds-section.ds-strip { padding:26px 0; }
.ds-stat-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px 22px; align-items:center; }
.ds-stat.ds-stat-inline { display:flex; align-items:center; gap:14px; text-align:left; padding:6px 0 6px 18px; border-left:1px solid rgba(128,128,128,.28); }
.ds-stat-row > .ds-stat-inline:first-child { border-left:0; padding-left:0; }
.ds-stat-inline .num { font-size:26px; line-height:1.1; }
.ds-stat-inline .lbl { font-size:13px; }
.ds-stat-inline .ds-icon { flex:0 0 auto; }
.ds-stats-split { align-items:center; }
.ds-stats-split .ds-sec-head { margin-bottom:0; }
.ds-band-dark .ds-stat .lbl { color:rgba(255,255,255,.72); }
/* A CTA band on its own photograph. */
.ds-cta-band.ds-cta-photo { background:#0b1b2a center/cover no-repeat; position:relative; isolation:isolate; }
.ds-cta-band.ds-cta-photo::before { content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--ds-hero-dark, #07131f) 64%, transparent); }
.ds-cta-band.ds-cta-photo .ds-h2 { text-shadow:0 2px 24px rgba(0,0,0,.45); }
.ds-audience { font-size:14px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ds-accent); margin:14px 0 10px; }
.ds-note { font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; opacity:.8; margin:12px 0 0; }
.ds-hero .ds-details.ds-card-glass { margin:22px 0 24px; }
.ds-checklist.cols-1 { columns:1; margin:14px 0 20px; }
/* Scoped like the generic blockquote reset above (which otherwise outranks this and strips the padding). */
.ds-quote-card, .ds-section blockquote.ds-quote-card, .ds-root blockquote.ds-quote-card, .ds-nav blockquote.ds-quote-card, .ds-footer blockquote.ds-quote-card, .mmwb-popup:not(.mmwb-popup-keep) blockquote.ds-quote-card { margin:36px 0 0; padding:28px 32px; border-left:4px solid var(--ds-accent); font-style:normal; font-size:inherit; color:inherit; }
.ds-quote-card .ds-quote { color:#fff; font-size:22px; font-style:italic; font-weight:700; margin:0 0 8px; }
.ds-quote-card cite { color:rgba(255,255,255,.6); font-style:normal; font-size:14px; }
.ds-tagline { color:var(--ds-accent); font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 16px; }
/* Small accent-coloured labels on a LIGHT band: a pale accent (gold, mint, sky) reads at
 * ~1.6:1 on white, so the label is a darkened accent there; dark bands keep the pure accent. */
.ds-eyebrow, .ds-tagline, .ds-audience { color:color-mix(in srgb, var(--ds-accent) 68%, #000); }
.ds-band-dark .ds-tagline, .ds-band-dark .ds-audience, .ds-hero-bg .ds-eyebrow, .ds-hero-bg .ds-tagline, .ds-hero-bg .ds-audience, .ds-card-dark .ds-eyebrow, .ds-card-dark .ds-tagline, .ds-cta-band .ds-eyebrow, .ds-footer .ds-eyebrow { color:var(--ds-accent); }
.ds-links a { color:var(--ds-accent); font-weight:600; text-decoration:none; }
.ds-split-form { align-items:start; }
.ds-schedule { margin-top:8px; }
.ds-footer .ds-footer-cols.cols-2 { grid-template-columns:2fr 1fr; }
.ds-footer .ds-footer-cols.cols-3 { grid-template-columns:2fr 1fr 1fr; }
.ds-card .ds-checklist.cols-1 { margin:10px 0 18px; }
.ds-card-body > .ds-btn { margin-top:14px; }
@media (max-width:767px) { .ds-hero-split { align-items:start; } .ds-footer .ds-footer-cols.cols-2, .ds-footer .ds-footer-cols.cols-3 { grid-template-columns:1fr 1fr; } .ds-h1-highlight { font-size:1.6em; } }

/* Premium photo treatment: a hero photo melts into the band below instead of ending on a hard edge (set --ds-fade-to to the next band's colour); a person cut-out fades out at its bottom. */
.ds-hero-bg.ds-fade-bottom::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--ds-fade-to, #0b0b0b)); }
.ds-hero-bg.ds-fade-bottom { padding-bottom:120px; }
.ds-hero-bg[style*="url("], .ds-cta-band.ds-cta-photo[style*="url("] { background-size:cover; background-position:center; background-repeat:no-repeat; }
.ds-img-fade { -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); }
.ds-img-fade-x { -webkit-mask-image:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }

/* Sticky mobile CTA: <div class="ds-sticky-cta"><a class="ds-btn ds-btn-primary" href="#form-…">Confirm my RSVP</a></div> — hidden on desktop */
/* Lives outside any .ds-section, so it sets the site font itself (it rendered in Times on iOS). */
.ds-sticky-cta { display:none; font-family: var(--mmwb-fontFamily, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }

@media (max-width:767px) {
  .ds-profile { grid-template-columns:1fr; gap:24px; }
  .ds-profile > img, .ds-profile > .ds-profile-img { aspect-ratio:4/3; }
  .ds-collage { grid-template-columns:repeat(2, 1fr); grid-auto-rows:120px; }
  .ds-tiles { gap:12px; }
  .ds-tile { grid-column:span 12 !important; min-height:220px; }
  .ds-checklist, .ds-checklist.cols-3 { columns:1; }
  .ds-footer .ds-footer-cols { grid-template-columns:1fr 1fr; gap:24px; }
  .ds-form-grid { grid-template-columns:1fr; }
  .ds-choices { grid-template-columns:1fr; }
  .ds-btn-row .ds-btn { flex:1 1 auto; justify-content:center; }
  /* A photo hero on a phone is as tall as its copy: the desktop min-height (a
     viewport-sized band) left a black gap under the buttons. */
  .ds-hero-bg { min-height:0; padding-top:72px; padding-bottom:72px; }
  /* Icon strip: two per row on a phone (auto-fit gave three and a lonely fourth). */
  .ds-icon-row { grid-template-columns:repeat(2, 1fr); gap:18px 0; }
  .ds-icon-row > .ds-icon-cell:nth-child(odd) { border-left:0; }
  .ds-sticky-cta { display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid #e5e7eb; box-shadow:0 -8px 24px rgba(16,24,40,.08); }
  .ds-sticky-cta .ds-btn { flex:1; justify-content:center; padding:15px 20px; font-size:16px; }
  body:has(.ds-sticky-cta) .ds-footer { padding-bottom:96px; }
}
* { box-sizing: border-box; }
body {margin: 0;}
*{box-sizing:border-box;}
body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}
:root{--mmwb-accent:#c0392b;--mmwb-accent-dark:#a13024;--mmwb-on-accent:#fff;--mmwb-fontFamily:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--mmwb-maxw:1120px;--mmwb-fontHead:'Saira Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--mmwb-color-1:#FFFFFF;--mmwb-color-2:#F7F7FA;--mmwb-color-3:#E5E7EB;--mmwb-color-4:#9CA3AF;--mmwb-color-5:#4B5563;--mmwb-color-6:#111827;--mmwb-color-7:#c0392b;--mmwb-color-8:#22D3EE;--mmwb-color-9:#F43F5E;--mmwb-color-10:#10B981;--mmwb-h1:48px;--mmwb-h2:34px;--mmwb-h3:24px;--mmwb-h4:20px;--mmwb-h5:18px;--mmwb-h6:16px;--mmwb-p1:18px;--mmwb-p2:16px;--mmwb-p3:14px;}
#ilndf3{row-gap:0.5rem;column-gap:0.5rem;}
#iar9rk{text-align:center;margin-left:0px;margin-right:0px;align-self:center;}
#ifc6ni{text-align:center;margin-left:0px;margin-right:0px;align-self:center;}
#ilndf3{row-gap:0.5rem;column-gap:0.5rem;justify-content:center;}
#iv4t1k-3 img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;display:block;}
#in9a6c .ds-muted a{color:rgb(248, 250, 252);text-decoration-line:none;text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;}
#in9a6c .ds-muted a:hover{color:rgb(200, 16, 46);}
#i4ob0q{width:100%;display:block;}
#ip2n5{display:inline-block;width:100%;color:rgb(248, 250, 252);}
#top.ds-nav{min-height:unset;}
#top.ds-nav .brand{display:flex;align-items:center;row-gap:0.6rem;column-gap:0.6rem;}
#izio2a{color:#fff;text-decoration:none;}
#ig2811{color:#fff;text-decoration:none;}
#iqwkv8{display:flex;flex-direction:column;gap:4px;color:#f8fafc;}
#iqwkv8 a{color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;}
#iqwkv8 a:hover{text-decoration-line:underline;text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;}
#imox89{color:#f8fafc;}
#i5h4k6{color:#fff;}
#i94yqe{color:#f8fafc;}
#ip3622{color:#f8fafc;}
#ihmx5m{color:#f8fafc;}
#i67qxq{color:#f8fafc;}
#iyat87{color:#f8fafc;}
#isodp6{color:#f8fafc;}
#ipuw9i{color:#f8fafc;}
#iusahr{color:#f8fafc;}
#iaawxb{color:#f8fafc;}
#i3b8x7{color:#f8fafc;}
#icismw{color:#f8fafc;}
#io9bks{color:#f8fafc;}
#is6jn4{color:#f8fafc;}
#imkt4v{color:#f8fafc;}
#ir5zmb{color:#f8fafc;}
#itu95j{color:#f8fafc;}
#iczpzp{color:#f8fafc;}
#io6e67{color:#f8fafc;}
#i68soa{color:#f8fafc;}
#ioez8q{color:#f8fafc;}
#i06dmn{color:#f8fafc;}
#iqypyv{color:#f8fafc;}
#ixyyw7{color:#f8fafc;}
#i0ca9d{color:#f8fafc;}
#i6kqhf{color:#f8fafc;}
#ikq4wp{color:#f8fafc;}
#ilpcjk{color:#f8fafc;}
#i83nqr{color:#f8fafc;}
#in0hbe{color:#f8fafc;}
#i1uedp{color:#f8fafc;}
#in2blj{color:#f8fafc;}
#io2ts8{color:#f8fafc;}
#ijvnf{align-items:center;gap:2rem;color:#f8fafc;}
#ijvnf{display:flex;flex-direction:row;align-items:center;row-gap:2rem;column-gap:2rem;flex-wrap:wrap;}
#ijvnf > *{flex-grow:1;flex-shrink:1;flex-basis:220px;}
#i4ob0q-2-caption{color:#f8fafc;}
#i4ob0q-2-wrap{display:flex;flex-direction:column;align-items:center;gap:0.75rem;color:#f8fafc;}
#i4ob0q-2{width:75%;max-width:320px;aspect-ratio:3 / 4;object-fit:cover;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;display:block;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;flex-grow:0;flex-shrink:0;flex-basis:auto;}
#i4ob0q-2-caption{color:rgb(248, 250, 252);font-family:var(--mmwb-font,Inter,sans-serif);font-size:1rem;font-weight:600;text-align:center;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;letter-spacing:0.01em;}
#ilo0lm{color:#111827;}
#izux1i{color:#111827;}
#top{color:#111827;}
#izux1i{color:rgb(17, 24, 39);display:flex;align-items:center;justify-content:center;flex-grow:1;flex-shrink:1;flex-basis:0%;}
#top{display:flex;align-items:center;row-gap:0.75rem;column-gap:0.75rem;color:rgb(17, 24, 39);}
#ilo0lm{display:flex;align-items:center;row-gap:0.6rem;column-gap:0.6rem;font-family:var(--mmwb-fontHead);color:rgb(192, 57, 43);text-decoration-line:none;text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;font-size:1.65rem;font-weight:700;}
#iowcz8{height:80px;width:auto;object-fit:contain;display:block;flex-shrink:0;filter:none;}
#tagline-center{color:#111827;}
#tagline-center{color:rgb(17, 24, 39);font-family:var(--mmwb-fontHead);font-size:2.3rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;line-height:1.1;text-align:center;font-style:italic;}
#i7lst2{color:#f8fafc;}
#ipnwvb{color:#f8fafc;}
#iun6a7{color:#f8fafc;}
#icnfvi{color:#f8fafc;}
#iuix8z{color:#f8fafc;}
#igidsi{color:#f8fafc;}
#ihd73x{color:#f8fafc;}
#i7008f{color:#f8fafc;}
#ihvojn{color:#f8fafc;}
#pg-gallery{color:#f8fafc;}
#pg-gallery .pg-gallery-trio{display:grid;grid-template-columns:1fr 1.3fr 1fr;row-gap:16px;column-gap:16px;margin-top:2rem;align-items:center;}
#pg-gallery .pg-gallery-photo{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;overflow-x:hidden;overflow-y:hidden;}
#pg-gallery .pg-gallery-photo img{width:100%;height:280px;object-fit:cover;display:block;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;}
#pg-gallery .pg-gallery-center img{height:340px;}
#pg-gallery .ds-h2, #pg-gallery .ds-eyebrow, #pg-gallery .ds-lead{color:rgb(248, 250, 252);}
@media (max-width: 767px){#irb35b{text-align:center;color:#f8fafc;}}
@media (max-width: 700px){#ijvnf{flex-direction:column;}#i4ob0q-2{width:75%;max-width:100%;}}
@media (max-width: 640px){#pg-gallery .pg-gallery-trio{grid-template-columns:1fr;}#pg-gallery .pg-gallery-photo img, #pg-gallery .pg-gallery-center img{height:240px;}}