*{
    box-sizing:border-box;
}

/* Global UX authority normalization: balanced density inherited by component families. */
.dc-live-preview{
    --dc-ux-section-space:clamp(52px,6vw,72px);
    --dc-ux-component-gap:clamp(16px,2.2vw,24px);
    --dc-ux-control-height:44px;
}
.dc-live-preview .dc-preview-shell{width:min(var(--dc-theme-content-width,1160px),calc(100% - 40px));}
.dc-live-preview :where(.dc-preview-type--feature_grid,.dc-preview-type--service_grid,.dc-preview-type--related_pages,.dc-preview-type--gallery,.dc-preview-type--faq){padding-block:var(--dc-ux-section-space);}
.dc-live-preview :where(.dc-preview-card-grid,.dc-preview-feature-grid,.dc-preview-communication-grid){gap:var(--dc-ux-component-gap);}
.dc-live-preview :where(.dc-preview-card,.dc-preview-feature-card){padding:clamp(20px,2.6vw,var(--dc-theme-card-padding,26px));}
.dc-live-preview :where(button,.dc-preview-button,.dc-commerce-action){min-height:var(--dc-ux-control-height);}
.dc-global-header--centered .dc-global-header-main{grid-template-columns:1fr auto 1fr;}
.dc-global-header--centered .dc-site-brand{justify-self:center;grid-column:2;grid-row:1;}
.dc-global-header--centered .dc-global-primary-nav{justify-self:center;grid-column:1/-1;grid-row:2;justify-content:center;padding-bottom:16px;}
.dc-global-header--centered .dc-site-button{justify-self:end;grid-column:3;grid-row:1;}
.dc-global-header--compact .dc-global-header-utility{display:none;}
.dc-global-header--compact .dc-global-header-main{min-height:68px;gap:18px;}
.dc-global-header--compact .dc-site-brand-copy small{display:none;}
.dc-global-header--compact .dc-site-brand-mark{width:36px;height:36px;}
.dc-global-primary-nav a:focus-visible,.dc-site-brand:focus-visible,.dc-site-button:focus-visible{outline:3px solid var(--dc-theme-accent);outline-offset:3px;}
@media(max-width:620px){.dc-live-preview{--dc-ux-section-space:44px;--dc-ux-component-gap:14px}.dc-live-preview .dc-preview-shell{width:min(var(--dc-theme-content-width,1160px),calc(100% - 24px));}}

/* SurfLocal UX 2027 Batch B commerce presentation family */
.dc-preview-type--product_card,
.dc-preview-type--inventory_listing,
.dc-preview-type--trailer_showcase,
.dc-preview-type--pricing_block {
    padding-block: clamp(48px, 7vw, var(--dc-theme-section-spacing));
}
.dc-preview-type--product_card > .dc-product,
.dc-preview-type--inventory_listing > .dc-inventory,
.dc-preview-type--trailer_showcase > .dc-trailer,
.dc-preview-type--pricing_block > .dc-pricing,
.dc-preview-type--product_card > .dc-commerce-empty,
.dc-preview-type--inventory_listing > .dc-commerce-empty,
.dc-preview-type--trailer_showcase > .dc-commerce-empty,
.dc-preview-type--pricing_block > .dc-commerce-empty,
.dc-preview-type--inventory_listing > .dc-commerce-heading,
.dc-preview-type--pricing_block > .dc-commerce-heading {
    width: min(var(--dc-theme-content-width, 1180px), calc(100% - 44px));
    margin-inline: auto;
}
.dc-commerce-heading { max-width: 720px; }
.dc-commerce-heading h2 { margin: 8px 0 0; overflow-wrap: anywhere; }
.dc-commerce-heading > p:not([class]) { margin: 14px 0 0; color: var(--dc-theme-muted); line-height: 1.7; }
.dc-commerce-price { margin: 18px 0 0; color: var(--dc-theme-text); font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 850; letter-spacing: -.025em; overflow-wrap: anywhere; }
.dc-commerce-price-note,.dc-commerce-availability { margin: 5px 0 0; color: var(--dc-theme-muted); font-size: .9rem; font-weight: 720; }
.dc-commerce-facts { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.dc-commerce-facts li { position: relative; padding-left: 20px; color: var(--dc-theme-muted); overflow-wrap: anywhere; }
.dc-commerce-facts li::before { position: absolute; left: 0; content: "\\2713"; color: var(--dc-theme-accent); font-weight: 900; }
.dc-commerce-action,.dc-inventory-controls button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin-top: 24px; padding: 11px 18px; border: var(--dc-theme-border-strength) solid var(--dc-theme-border); border-radius: var(--dc-theme-button-radius); background: var(--dc-theme-primary); color: var(--dc-theme-primary-contrast); font-weight: 820; text-decoration: none; cursor: pointer; }
.dc-commerce-action:focus-visible,.dc-inventory-controls button:focus-visible { outline: 3px solid var(--dc-theme-accent); outline-offset: 3px; }
.dc-commerce-empty { display: grid; max-width: 680px; gap: 6px; padding: clamp(20px, 4vw, 32px); border: var(--dc-theme-border-strength) solid var(--dc-theme-border); border-radius: var(--dc-theme-card-radius); background: var(--dc-theme-surface-alt); }
.dc-commerce-empty strong { font-size: 1.08rem; }
.dc-commerce-empty span { color: var(--dc-theme-muted); }
.dc-commerce-media-target:empty,.dc-inventory-media:empty { display: none; }
.dc-commerce-media-target img,.dc-inventory-media img { display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; }
.dc-commerce-media-target img { min-height: clamp(280px, 42vw, 560px); max-height: 620px; }
.dc-product,.dc-trailer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: stretch; overflow: hidden; border: var(--dc-theme-border-strength) solid var(--dc-theme-border); border-radius: var(--dc-theme-card-radius); background: var(--dc-theme-surface); box-shadow: var(--dc-theme-shadow); }
.dc-product--standard { grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); }
.dc-product:not(:has(.dc-commerce-media-target > *)),.dc-trailer:not(:has(.dc-commerce-media-target > *)) { grid-template-columns: minmax(0, 760px); }
.dc-product-body,.dc-trailer-content { align-self: center; padding: clamp(26px, 5vw, 58px); min-width: 0; }
.dc-product .dc-commerce-media-target,.dc-trailer .dc-commerce-media-target { min-width: 0; background: var(--dc-theme-surface-alt); }
.dc-preview-assigned-media-group--product_image,.dc-preview-assigned-media-group--trailer_image { height: 100%; }
.dc-preview-assigned-media-group--product_image figure,.dc-preview-assigned-media-group--trailer_image figure { height: 100%; margin: 0; }
.dc-inventory > .dc-commerce-heading,.dc-pricing > .dc-commerce-heading { margin-bottom: clamp(24px, 4vw, 42px); }
.dc-inventory-grid,.dc-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin: 0; padding: 0; list-style: none; }
.dc-inventory--count-1 .dc-inventory-grid,.dc-pricing--count-1 .dc-pricing-grid { grid-template-columns: minmax(0, 720px); }
.dc-inventory--count-2 .dc-inventory-grid,.dc-pricing--count-2 .dc-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
.dc-inventory-item article,.dc-pricing-option article { height: 100%; overflow: hidden; border: var(--dc-theme-border-strength) solid var(--dc-theme-border); border-radius: var(--dc-theme-card-radius); background: var(--dc-theme-surface); box-shadow: var(--dc-theme-shadow); }
.dc-inventory-media { aspect-ratio: 4 / 3; background: var(--dc-theme-surface-alt); }
.dc-inventory-body,.dc-pricing-option article { padding: clamp(20px, 3vw, 30px); }
.dc-inventory-media + .dc-inventory-body { padding-top: clamp(20px, 3vw, 26px); }
.dc-inventory-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dc-inventory-card-head h3,.dc-pricing-option h3 { margin: 0; overflow-wrap: anywhere; }
.dc-inventory-status { flex: 0 0 auto; max-width: 45%; padding: 5px 9px; border-radius: 999px; background: var(--dc-theme-surface-alt); color: var(--dc-theme-muted); font-size: .75rem; font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.dc-inventory-body > p:not([class]),.dc-pricing-option article > p:not([class]) { color: var(--dc-theme-muted); line-height: 1.65; overflow-wrap: anywhere; }
.dc-inventory-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dc-inventory-controls button { margin-top: 30px; }
.dc-trailer-features,.dc-trailer-specs { margin-top: 28px; }
.dc-trailer-features h3,.dc-trailer-specs h3 { margin: 0 0 12px; font-size: 1rem; }
.dc-trailer-features ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; margin: 0; padding-left: 20px; }
.dc-trailer-features li,.dc-trailer-specs dd { overflow-wrap: anywhere; }
.dc-trailer-specs dl { display: grid; gap: 0; margin: 0; }
.dc-trailer-specs dl > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 18px; padding: 11px 0; border-top: var(--dc-theme-border-strength) solid var(--dc-theme-border); }
.dc-trailer-specs dt { color: var(--dc-theme-muted); font-weight: 750; }
.dc-trailer-specs dd { margin: 0; font-weight: 720; }
.dc-pricing-option article { display: flex; flex-direction: column; }
.dc-pricing-option.is-featured article { border-color: var(--dc-theme-accent); box-shadow: 0 16px 46px rgba(7,31,47,.14); }
.dc-pricing-option .dc-commerce-action { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) {
    .dc-product,.dc-product--standard,.dc-trailer { grid-template-columns: 1fr; }
    .dc-inventory-grid,.dc-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .dc-inventory-grid,.dc-pricing-grid,.dc-inventory--count-2 .dc-inventory-grid,.dc-pricing--count-2 .dc-pricing-grid { grid-template-columns: 1fr; }
    .dc-product-body,.dc-trailer-content { padding: 24px 20px; }
    .dc-trailer-features ul { grid-template-columns: 1fr; }
    .dc-trailer-specs dl > div { grid-template-columns: 1fr; gap: 4px; }
    .dc-inventory-card-head { display: grid; }
    .dc-inventory-status { max-width: 100%; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-commerce-action,.dc-inventory-controls button { scroll-behavior: auto; transition: none; }
}
/* End SurfLocal UX 2027 Batch B commerce presentation family */

/* SurfLocal UX 2027 conversion component family */
.dc-preview-type--inquiry_form,
.dc-preview-type--newsletter_signup { overflow: clip; padding-block: clamp(34px, 5vw, 56px); }
.dc-conversion-shell { display: grid; grid-template-columns: minmax(0, .86fr) minmax(400px, 1.14fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.dc-conversion-intro,.dc-newsletter-copy { min-width: 0; }
.dc-conversion-intro h2,.dc-newsletter-copy h2 { margin: 8px 0 0; font-size: clamp(1.75rem, 3vw, 2.8rem); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; }
.dc-conversion-description,.dc-newsletter-copy > p { max-width: 62ch; margin: 14px 0 0; color: var(--dc-theme-muted); font-size: clamp(.96rem, 1.2vw, 1.06rem); line-height: 1.62; }
.dc-conversion-reassurance { display: flex; gap: 10px; align-items: flex-start; max-width: 58ch; margin-top: 20px; padding-top: 16px; border-top: var(--dc-theme-border-strength) solid var(--dc-theme-border); }
.dc-conversion-reassurance > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--dc-theme-surface-alt); color: var(--dc-theme-primary); font-weight: 900; }
.dc-conversion-reassurance p { margin: 2px 0 0; color: var(--dc-theme-muted); font-size: .92rem; line-height: 1.6; }
.dc-conversion-form { min-width: 0; padding: clamp(22px, 3vw, 30px); border: var(--dc-theme-border-strength) solid var(--dc-theme-border); border-radius: var(--dc-theme-card-radius); background: var(--dc-theme-surface); box-shadow: 0 12px 32px rgba(15,39,64,.09); }
.dc-conversion-form-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 18px; }
.dc-conversion-form-heading span { color: var(--dc-theme-primary); font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
.dc-conversion-form-heading p { margin: 0; color: var(--dc-theme-muted); font-size: .8rem; }
.dc-conversion-field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.dc-conversion-field { min-width: 0; margin-bottom: 14px; }
.dc-conversion-field label,.dc-newsletter-field > label { display: block; margin-bottom: 8px; color: var(--dc-theme-text); font-size: .86rem; font-weight: 800; }
.dc-conversion-field input,.dc-conversion-field textarea,.dc-newsletter-field input { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: var(--dc-theme-border-strength) solid var(--dc-theme-border); border-radius: var(--dc-theme-input-radius); background: var(--dc-theme-surface); color: var(--dc-theme-text); font: inherit; line-height: 1.45; transition: border-color .16s ease,box-shadow .16s ease; }
.dc-conversion-field textarea { min-height: 108px; resize: vertical; }
.dc-conversion-field input:focus,.dc-conversion-field textarea:focus,.dc-newsletter-field input:focus { border-color: var(--dc-theme-primary); outline: 3px solid color-mix(in srgb,var(--dc-theme-primary) 20%,transparent); outline-offset: 1px; }
.dc-conversion-field [aria-invalid="true"],.dc-newsletter-field [aria-invalid="true"] { border-color: #a52b32; }
.dc-conversion-help,.dc-conversion-error,.dc-newsletter-reassurance { margin: 7px 0 0; color: var(--dc-theme-muted); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.dc-conversion-error { color: #8f2028; font-weight: 700; }
.dc-conversion-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 2px; }
.dc-conversion-action-row small,.dc-newsletter-preview-note { color: var(--dc-theme-muted); font-size: .75rem; }
.dc-conversion-submit,.dc-newsletter-action button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 20px; border: 0; border-radius: var(--dc-theme-button-radius); background: var(--dc-theme-primary); color: var(--dc-theme-primary-contrast); font: inherit; font-weight: 850; cursor: pointer; }
.dc-conversion-submit:focus-visible,.dc-newsletter-action button:focus-visible { outline: 3px solid var(--dc-theme-accent); outline-offset: 3px; }
.dc-conversion-submit[aria-disabled="true"],.dc-newsletter-action button[aria-disabled="true"] { cursor: not-allowed; }
.dc-conversion-form[data-dc-form-state="loading"] .dc-conversion-submit,.dc-newsletter-form[data-dc-form-state="loading"] button { opacity: .7; pointer-events: none; }
.dc-conversion-form[data-dc-form-state="loading"] [data-dc-submit-label],.dc-newsletter-form[data-dc-form-state="loading"] [data-dc-submit-label] { display: none; }
.dc-conversion-form[data-dc-form-state="loading"] [data-dc-submit-loading],.dc-newsletter-form[data-dc-form-state="loading"] [data-dc-submit-loading] { display: inline; }
.dc-conversion-status { margin-top: 18px; padding: 12px 14px; border-radius: var(--dc-theme-input-radius); font-size: .88rem; font-weight: 720; line-height: 1.5; }
.dc-conversion-status--error { border: 1px solid #d8a4a8; background: #fff3f3; color: #7f1f26; }
.dc-conversion-status--success { border: 1px solid #9fc8b1; background: #f0faf4; color: #185d38; }
.dc-newsletter { display: grid; grid-template-columns: minmax(0,1fr) minmax(400px,.9fr); gap: clamp(24px, 4vw, 50px); align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--dc-theme-card-radius); background: var(--dc-theme-surface-alt); }
.dc-newsletter--compact { grid-template-columns: minmax(0,1fr) minmax(360px,.75fr); }
.dc-newsletter-copy h2 { font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
.dc-newsletter-form { min-width: 0; }
.dc-newsletter-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.dc-newsletter-action input { min-width: 0; background: var(--dc-theme-surface); }
.dc-newsletter-action button { min-width: 128px; }
.dc-newsletter-preview-note { margin: 8px 0 0; }
@media(max-width:900px){
    .dc-conversion-shell,.dc-newsletter,.dc-newsletter--compact { grid-template-columns: 1fr; }
    .dc-conversion-intro { max-width: 760px; }
}
@media(max-width:620px){
    .dc-preview-type--inquiry_form,.dc-preview-type--newsletter_signup { padding-block: 32px !important; }
    .dc-preview-type--inquiry_form > .dc-preview-shell,.dc-preview-type--newsletter_signup > .dc-preview-shell { width: min(100% - 24px,var(--dc-theme-content-width,1180px)); }
    .dc-conversion-field-row,.dc-newsletter-action { grid-template-columns: 1fr; }
    .dc-conversion-form { padding: 22px 18px; }
    .dc-newsletter { padding: 24px 18px; }
    .dc-conversion-submit,.dc-newsletter-action button { width: 100%; }
}
@media(prefers-reduced-motion:reduce){
    .dc-conversion-field input,.dc-conversion-field textarea,.dc-newsletter-field input { transition: none; }
}
/* End SurfLocal UX 2027 conversion component family */

:root{
    --sl-navy:#07101d;
    --sl-blue:#0878c9;
    --sl-sky:#38bdf8;
    --sl-cyan:#10a8c7;
    --sl-purple:#7557c7;
    --sl-gold:#db8b10;
    --sl-green:#15946f;
    --sl-gray:#65758b;
    --sl-red:#c94b5a;
    --sl-text:#15233a;
    --sl-muted:#65758b;
    --sl-line:#d8e2ee;
    --sl-soft:#f4f8fc;
    --sl-white:#ffffff;
}

html{
    min-height:100%;
    background:#dce7f2;
}

body{
    min-height:100%;
    margin:0;
    color:var(--sl-text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        linear-gradient(
            135deg,
            #d9e7f3,
            #edf4fa 52%,
            #dce9f4
        );
}

button,
select,
input,
textarea{
    font:inherit;
}

a{
    color:inherit;
}

.dc-preview-toolbar{
    position:sticky;
    top:0;
    z-index:1000;
    display:grid;
    grid-template-columns:minmax(220px,1.2fr) auto auto auto;
    align-items:center;
    gap:12px;
    min-height:72px;
    padding:10px 14px;
    color:#edf8ff;
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(56,189,248,.18),
            transparent 34%
        ),
        rgba(7,16,29,.98);
    border-bottom:1px solid rgba(125,211,252,.22);
    box-shadow:0 8px 24px rgba(7,16,29,.24);
}

.dc-preview-toolbar__identity{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.dc-preview-toolbar__identity div{
    display:grid;
    min-width:0;
}

.dc-preview-toolbar__identity strong{
    color:#fff;
    font-size:.78rem;
    letter-spacing:.08em;
}

.dc-preview-toolbar__identity span{
    overflow:hidden;
    color:#8fcff0;
    font-size:.72rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.dc-preview-live-light{
    width:12px;
    height:12px;
    flex:0 0 auto;
    border-radius:999px;
    background:#34d399;
    box-shadow:
        0 0 0 5px rgba(52,211,153,.12),
        0 0 18px rgba(52,211,153,.7);
}

.dc-preview-page-select label{
    display:grid;
    gap:3px;
}

.dc-preview-page-select span{
    color:#7f94ad;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dc-preview-page-select select{
    min-height:38px;
    max-width:210px;
    padding:0 34px 0 10px;
    border:1px solid rgba(125,211,252,.24);
    border-radius:10px;
    color:#edf8ff;
    background:#0d1d30;
}

.dc-preview-toolbar__stats{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
}

.dc-preview-toolbar__stats span{
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    color:#c9d7e6;
    font-size:.67rem;
    background:rgba(255,255,255,.04);
}

.dc-preview-toolbar__stats .is-live{
    color:#c8ffe9;
    border-color:rgba(52,211,153,.28);
    background:rgba(21,148,111,.16);
}

.dc-preview-toolbar__stats .is-paused{
    color:#e3e9f0;
    border-color:rgba(148,163,184,.3);
    background:rgba(100,116,139,.18);
}

.dc-preview-toolbar__stats .is-refreshing{
    color:#fff2c4;
    border-color:rgba(245,158,11,.35);
    background:rgba(219,139,16,.18);
}

.dc-preview-toolbar__stats .is-error{
    color:#ffe1e4;
    border-color:rgba(201,75,90,.4);
    background:rgba(201,75,90,.18);
}

.dc-preview-toolbar__controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
}

.dc-preview-toolbar button,
.dc-preview-toolbar a,
.dc-preview-show-tools{
    min-height:36px;
    padding:0 10px;
    border:1px solid rgba(125,211,252,.2);
    border-radius:9px;
    color:#dff4ff;
    background:rgba(8,120,201,.14);
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.02em;
    text-decoration:none;
    cursor:pointer;
}

.dc-preview-toolbar button:hover,
.dc-preview-toolbar a:hover,
.dc-preview-toolbar button.is-active{
    border-color:rgba(56,189,248,.64);
    color:#fff;
    background:rgba(8,120,201,.32);
}

.dc-preview-mode-group{
    display:flex;
    gap:4px;
    padding:3px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    background:rgba(255,255,255,.03);
}

.dc-preview-mode-group button{
    min-height:29px;
    padding:0 8px;
}

.dc-preview-window-note{
    position:relative;
    z-index:5;
    padding:7px 14px;
    color:#29415d;
    font-size:.72rem;
    text-align:center;
    background:#dceeff;
    border-bottom:1px solid #bdd7ec;
}

.dc-preview-show-tools{
    position:fixed;
    z-index:1001;
    top:10px;
    right:10px;
    display:none;
    color:#fff;
    background:#07101d;
}

.preview-tools-hidden .dc-preview-toolbar,
.preview-tools-hidden .dc-preview-window-note{
    display:none;
}

.preview-tools-hidden .dc-preview-show-tools{
    display:inline-flex;
    align-items:center;
}

.dc-preview-stage{
    min-height:calc(100vh - 104px);
    padding:22px;
    overflow:auto;
}

.dc-preview-canvas{
    width:min(100%,1440px);
    min-height:780px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid rgba(31,74,112,.18);
    border-radius:22px;
    background:#fff;
    box-shadow:
        0 25px 70px rgba(22,50,79,.2),
        0 3px 10px rgba(22,50,79,.1);
    transition:
        width .2s ease,
        border-radius .2s ease;
}

.dc-preview-canvas[data-preview-mode="tablet"]{
    width:min(100%,820px);
}

.dc-preview-canvas[data-preview-mode="mobile"]{
    width:min(100%,390px);
    border-radius:28px;
}

.dc-preview-page{
    min-height:760px;
    background:#fff;
}

.dc-preview-component{
    position:relative;
    scroll-margin-top:90px;
}

.dc-preview-component-label{
    position:absolute;
    z-index:30;
    top:8px;
    left:8px;
    display:none;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    border-radius:8px;
    color:#fff;
    font-size:.57rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 4px 14px rgba(7,16,29,.2);
    pointer-events:none;
}

.dc-preview-component-label span{
    opacity:.74;
}

.show-component-outlines .dc-preview-component{
    outline:2px dashed rgba(8,120,201,.48);
    outline-offset:-2px;
}

.show-component-outlines .dc-preview-component-label{
    display:flex;
}

.show-component-outlines .dc-preview-component--global{
    outline-color:rgba(23,54,93,.72);
}

.show-component-outlines .dc-preview-component--hero{
    outline-color:rgba(8,120,201,.74);
}

.show-component-outlines .dc-preview-component--content{
    outline-color:rgba(16,168,199,.72);
}

.show-component-outlines .dc-preview-component--media{
    outline-color:rgba(117,87,199,.72);
}

.show-component-outlines .dc-preview-component--conversion{
    outline-color:rgba(219,139,16,.78);
}

.show-component-outlines .dc-preview-component--engagement{
    outline-color:rgba(21,148,111,.76);
}

.show-component-outlines .dc-preview-component--navigation{
    outline-color:rgba(101,117,139,.72);
}

.dc-preview-component--global .dc-preview-component-label{
    background:#17365d;
}

.dc-preview-component--hero .dc-preview-component-label{
    background:#0878c9;
}

.dc-preview-component--content .dc-preview-component-label{
    background:#10a8c7;
}

.dc-preview-component--media .dc-preview-component-label{
    background:#7557c7;
}

.dc-preview-component--conversion .dc-preview-component-label{
    background:#db8b10;
}

.dc-preview-component--engagement .dc-preview-component-label{
    background:#15946f;
}

.dc-preview-component--navigation .dc-preview-component-label{
    background:#65758b;
}

.dc-preview-shell{
    width:min(1180px,calc(100% - 44px));
    margin:0 auto;
}

.dc-site-header{
    min-height:76px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:22px;
    padding:0 28px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #07101d,
            #102b4b 62%,
            #0c4572
        );
}

.dc-site-header nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

.dc-site-header nav a{
    color:#cfe4f4;
    font-size:.86rem;
    font-weight:700;
    text-decoration:none;
}

.dc-site-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:1rem;
    font-weight:900;
    text-decoration:none;
}

.dc-site-brand-mark{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #0878c9,
            #10a8c7
        );
    box-shadow:0 7px 18px rgba(8,120,201,.34);
}

.dc-site-button{
    display:inline-flex;
    min-height:46px;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border:1px solid #0878c9;
    border-radius:11px;
    color:#fff;
    background:#0878c9;
    font-size:.84rem;
    font-weight:850;
    text-decoration:none;
    box-shadow:0 9px 22px rgba(8,120,201,.2);
}

.dc-site-button--small{
    min-height:38px;
    padding:0 14px;
}

.dc-site-button--outline{
    color:#0b5f9a;
    background:rgba(255,255,255,.82);
}

.dc-site-button--gold{
    border-color:#9b5d00;
    color:#3d2500;
    background:#ffd66b;
    box-shadow:none;
}

.dc-site-button--light{
    border-color:#fff;
    color:#0b5f9a;
    background:#fff;
    box-shadow:none;
}

.dc-site-button-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px;
}

.dc-site-eyebrow{
    display:inline-block;
    color:#0878c9;
    font-size:.7rem;
    font-weight:950;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.dc-preview-hero{
    min-height:530px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(330px,.8fr);
    align-items:center;
    gap:50px;
    padding-top:74px;
    padding-bottom:74px;
}

.dc-preview-type--hero_home{
    overflow:hidden;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(56,189,248,.21),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f7fbff,
            #edf7fd 58%,
            #e2f1fb
        );
}

.dc-preview-hero h1,
.dc-preview-interior-hero h1{
    max-width:760px;
    margin:14px 0 18px;
    color:#0d2743;
    font-size:clamp(2.5rem,5vw,4.9rem);
    line-height:.98;
    letter-spacing:-.052em;
}

.dc-preview-hero p,
.dc-preview-interior-hero p{
    max-width:690px;
    margin:0;
    color:#526a82;
    font-size:1.08rem;
    line-height:1.75;
}

.dc-preview-media-card{
    min-height:355px;
    display:grid;
    place-content:center;
    gap:8px;
    padding:30px;
    border:1px solid rgba(8,120,201,.2);
    border-radius:32px;
    color:#0e5c93;
    text-align:center;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(215,240,252,.92)
        );
    box-shadow:
        0 28px 55px rgba(23,54,93,.15);
}

.dc-preview-media-card span{
    font-size:.66rem;
    font-weight:950;
    letter-spacing:.1em;
}

.dc-preview-media-card strong{
    color:#0d2743;
    font-size:1.35rem;
}

.dc-preview-media-card small{
    color:#65758b;
}

.dc-preview-type--hero_interior{
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(56,189,248,.24),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #07101d,
            #143a61
        );
}

.dc-preview-interior-hero{
    min-height:330px;
    display:grid;
    align-content:center;
    padding-top:70px;
    padding-bottom:70px;
}

.dc-preview-interior-hero .dc-site-eyebrow{
    color:#7dd3fc;
}

.dc-preview-interior-hero h1{
    color:#fff;
}

.dc-preview-interior-hero p{
    color:#c3d8e8;
}

.dc-preview-type--text_image,
.dc-preview-type--feature_grid,
.dc-preview-type--faq,
.dc-preview-type--related_pages{
    padding:82px 0;
}

.dc-preview-type--gallery,
.dc-preview-type--slideshow_carousel{
    padding:clamp(42px,5vw,64px) 0;
}

.dc-preview-type--service_grid,
.dc-preview-type--process_steps,
.dc-preview-type--communication_center{
    padding:82px 0;
    background:#f4f8fc;
}

.dc-preview-split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(310px,.8fr);
    align-items:center;
    gap:54px;
}

.dc-preview-split h2,
.dc-preview-section-heading h2,
.dc-preview-cta h2,
.dc-preview-offer h2{
    margin:10px 0 14px;
    color:#132d49;
    font-size:clamp(1.9rem,3.5vw,3rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.dc-preview-split p,
.dc-preview-section-heading p,
.dc-preview-cta p,
.dc-preview-offer p{
    color:#60758a;
    line-height:1.75;
}

.dc-site-checks{
    display:grid;
    gap:10px;
    margin:24px 0 0;
    padding:0;
    list-style:none;
}

.dc-site-checks li{
    position:relative;
    padding-left:28px;
    color:#2b4864;
    font-weight:700;
}

.dc-site-checks li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#15946f;
    font-weight:950;
}

.dc-preview-image-placeholder{
    min-height:360px;
    display:grid;
    place-items:center;
    border-radius:26px;
    color:#5b44a1;
    font-weight:950;
    letter-spacing:.14em;
    background:
        linear-gradient(
            145deg,
            #eee9ff,
            #dcd2ff
        );
    box-shadow:0 25px 50px rgba(73,51,140,.14);
}

.dc-preview-section-heading{
    max-width:720px;
    margin-bottom:34px;
}

.dc-preview-card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.dc-preview-card{
    position:relative;
    min-height:245px;
    padding:28px;
    border:1px solid #d9e5ef;
    border-radius:20px;
    background:#fff;
    box-shadow:0 14px 34px rgba(23,54,93,.08);
}

.dc-preview-card > span{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #0878c9,
            #10a8c7
        );
    font-size:.78rem;
    font-weight:950;
}

.dc-preview-card h3,
.dc-preview-feature h3,
.dc-preview-step h3,
.dc-preview-communication h3{
    margin:18px 0 8px;
    color:#17324f;
    font-size:1.18rem;
}

.dc-preview-card p,
.dc-preview-feature p,
.dc-preview-step p,
.dc-preview-communication p{
    margin:0;
    color:#667d91;
    line-height:1.65;
}

.dc-preview-card a{
    display:inline-block;
    margin-top:21px;
    color:#0878c9;
    font-size:.82rem;
    font-weight:850;
    text-decoration:none;
}

.dc-preview-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.dc-preview-feature{
    display:flex;
    gap:15px;
    padding:24px;
    border:1px solid #dce6ef;
    border-radius:18px;
    background:#fff;
}

.dc-preview-feature > span{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:#15946f;
    font-weight:950;
}

.dc-preview-feature h3{
    margin:0 0 6px;
}

.dc-preview-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.dc-preview-step{
    position:relative;
    padding:26px;
    border-top:4px solid #0878c9;
    border-radius:0 0 18px 18px;
    background:#fff;
    box-shadow:0 14px 32px rgba(23,54,93,.08);
}

.dc-preview-step > span{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:#0878c9;
    font-weight:950;
}

.dc-preview-gallery{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:155px;
    gap:12px;
}

.dc-preview-gallery > div{
    display:grid;
    place-items:center;
    border-radius:18px;
    color:#5b44a1;
    background:
        linear-gradient(
            145deg,
            #eee9ff,
            #dcd2ff
        );
    font-size:.74rem;
    font-weight:950;
    letter-spacing:.08em;
}

.dc-preview-gallery-main{
    grid-column:span 2;
    grid-row:span 2;
}

.dc-preview-type--offer{
    padding:64px 0;
    background:#fff9e8;
}

.dc-preview-offer{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:28px;
    padding:34px 42px;
    border:2px dashed #c88412;
    border-radius:22px;
    background:
        linear-gradient(
            135deg,
            #fff4c9,
            #ffe09a
        );
}

.dc-preview-offer-cut{
    position:absolute;
    top:50%;
    width:24px;
    height:48px;
    border-radius:999px;
    background:#fff9e8;
    transform:translateY(-50%);
}

.dc-preview-offer-cut--left{
    left:-14px;
}

.dc-preview-offer-cut--right{
    right:-14px;
}

.dc-preview-faq{
    display:grid;
    gap:10px;
}

.dc-preview-faq details{
    border:1px solid #dbe6ef;
    border-radius:14px;
    background:#fff;
}

.dc-preview-faq summary{
    padding:18px 20px;
    color:#17324f;
    font-weight:850;
    cursor:pointer;
}

.dc-preview-faq p{
    margin:0;
    padding:0 20px 20px;
    color:#65758b;
    line-height:1.65;
}

.dc-preview-type--call_to_action{
    padding:72px 0;
    color:#fff;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(56,189,248,.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0878c9,
            #0d5891
        );
}

.dc-preview-cta{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:30px;
}

.dc-preview-cta .dc-site-eyebrow,
.dc-preview-cta h2,
.dc-preview-cta p{
    color:#fff;
}

.dc-preview-communication-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.dc-preview-communication{
    padding:24px;
    border:1px solid #d5e6df;
    border-radius:19px;
    background:#fff;
    box-shadow:0 13px 30px rgba(25,96,74,.08);
}

.dc-preview-communication > span{
    display:inline-flex;
    padding:7px 9px;
    border-radius:9px;
    color:#fff;
    background:#15946f;
    font-size:.64rem;
    font-weight:950;
}

.dc-preview-communication button{
    min-height:38px;
    margin-top:18px;
    padding:0 13px;
    border:1px solid #15946f;
    border-radius:9px;
    color:#fff;
    background:#15946f;
    font-weight:800;
}

.dc-preview-type--footer{
    color:#c8d8e8;
    background:#07101d;
}

.dc-site-footer{
    position:relative;
    display:grid;
    grid-template-columns:1.4fr .7fr .7fr;
    gap:36px;
    padding-top:62px;
    padding-bottom:76px;
}

.dc-site-footer p{
    max-width:460px;
    color:#829ab1;
    line-height:1.7;
}

.dc-site-footer strong{
    display:block;
    margin-bottom:13px;
    color:#fff;
}

.dc-site-footer a{
    display:block;
    margin:8px 0;
    color:#9db4c8;
    font-size:.84rem;
    text-decoration:none;
}

.dc-site-footer-bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:22px;
    padding-top:17px;
    border-top:1px solid rgba(255,255,255,.1);
    color:#617990;
    font-size:.72rem;
}

.dc-preview-empty,
.dc-preview-error{
    margin:45px;
    padding:38px;
    border:1px dashed #bdd1e2;
    border-radius:20px;
    text-align:center;
    background:#f7fbfe;
}

.dc-preview-error{
    color:#8d2632;
    border-color:#edb8be;
    background:#fff4f5;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-site-header{
    grid-template-columns:1fr auto;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-site-header nav{
    display:none;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-hero,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-split{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-card-grid,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-feature-grid,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-steps,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-communication-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-site-header{
    grid-template-columns:1fr auto;
    padding:0 17px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-site-header nav{
    display:none;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-site-button--small{
    display:none;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-shell{
    width:min(100% - 30px,1180px);
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-hero,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-split,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-card-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-feature-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-steps,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-communication-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-cta,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-site-footer{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-hero{
    min-height:0;
    gap:30px;
    padding-top:58px;
    padding-bottom:58px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-hero h1,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-interior-hero h1{
    font-size:2.55rem;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-media-card,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-image-placeholder{
    min-height:245px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--text_image,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--feature_grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--gallery,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--faq,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--related_pages,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--service_grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--process_steps,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--communication_center{
    padding:60px 0;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer{
    padding:28px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-site-footer{
    padding-top:50px;
    padding-bottom:82px;
}

@media(max-width:1180px){
    .dc-preview-toolbar{
        grid-template-columns:1fr auto;
    }

    .dc-preview-toolbar__stats,
    .dc-preview-toolbar__controls{
        justify-content:flex-start;
    }
}

@media(max-width:720px){
    .dc-preview-toolbar{
        position:relative;
        grid-template-columns:1fr;
    }

    .dc-preview-toolbar__controls{
        justify-content:flex-start;
    }

    .dc-preview-stage{
        padding:10px;
    }

    .dc-preview-canvas{
        border-radius:14px;
    }
}

/* Domain Creator Theme Schema 2.0 preview token bridge */

.dc-preview-page{
    color:var(--dc-theme-text,#15233a);
    background:var(--dc-theme-background,#ffffff);
    font-family:var(--dc-theme-body-font,Inter,system-ui,sans-serif);
    font-size:var(--dc-theme-body-size,17px);
    line-height:var(--dc-theme-line-height,1.65);
}

.dc-preview-shell{
    width:min(
        var(--dc-theme-content-width,1180px),
        calc(100% - 44px)
    );
}

.dc-site-header{
    min-height:calc(var(--dc-theme-logo-size,44px) + 32px);
    color:var(--dc-theme-light-text,#fff);
    background:
        linear-gradient(
            135deg,
            var(--dc-theme-primary-dark,#07101d),
            var(--dc-theme-primary,#0878c9) 72%,
            var(--dc-theme-secondary,#10a8c7)
        );
}

.dc-site-header nav{
    font-family:var(--dc-theme-nav-font,Inter,system-ui,sans-serif);
}

.dc-site-header nav a{
    color:var(--dc-theme-light-text,#fff);
    font-size:var(--dc-theme-nav-size,15px);
    opacity:.82;
}

.dc-site-brand{
    color:var(--dc-theme-light-text,#fff);
    font-family:var(--dc-theme-heading-font,Inter,system-ui,sans-serif);
}

.dc-site-brand-mark{
    width:var(--dc-theme-logo-size,44px);
    height:var(--dc-theme-logo-size,44px);
    border-radius:calc(var(--dc-theme-button-radius,11px) + 2px);
    background:
        linear-gradient(
            135deg,
            var(--dc-theme-primary,#0878c9),
            var(--dc-theme-secondary,#10a8c7)
        );
}

.dc-site-button,
.dc-preview-communication button{
    border-width:var(--dc-theme-border-strength,1px);
    border-color:var(--dc-theme-primary,#0878c9);
    border-radius:var(--dc-theme-button-radius,11px);
    color:var(--dc-theme-light-text,#fff);
    background:var(--dc-theme-primary,#0878c9);
    font-family:var(--dc-theme-nav-font,Inter,system-ui,sans-serif);
    font-size:var(--dc-theme-button-size,15px);
    font-weight:var(--dc-theme-button-weight,800);
    box-shadow:var(--dc-theme-shadow,0 18px 42px rgba(23,54,93,.13));
}

.dc-site-button--outline{
    color:var(--dc-theme-link,#0878c9);
    background:var(--dc-theme-surface,#fff);
}

.dc-site-button--gold{
    border-color:var(--dc-theme-accent,#f2a900);
    color:var(--dc-theme-text,#0a2440);
    background:var(--dc-theme-accent,#f2a900);
    box-shadow:none;
}

.dc-site-button--light{
    border-color:var(--dc-theme-surface,#fff);
    color:var(--dc-theme-link,#0878c9);
    background:var(--dc-theme-surface,#fff);
    box-shadow:none;
}

.dc-site-eyebrow,
.dc-preview-card a{
    color:var(--dc-theme-link,#0878c9);
}

.dc-preview-type--hero_home{
    background:
        radial-gradient(
            circle at 85% 15%,
            color-mix(
                in srgb,
                var(--dc-theme-secondary,#38bdf8) 24%,
                transparent
            ),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--dc-theme-background,#f7fbff),
            var(--dc-theme-surface-alt,#edf7fd)
        );
}

.dc-preview-type--hero_interior{
    background:
        radial-gradient(
            circle at 88% 12%,
            color-mix(
                in srgb,
                var(--dc-theme-secondary,#38bdf8) 26%,
                transparent
            ),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--dc-theme-primary-dark,#07101d),
            var(--dc-theme-primary,#143a61)
        );
}

.dc-preview-hero h1,
.dc-preview-interior-hero h1,
.dc-preview-split h2,
.dc-preview-section-heading h2,
.dc-preview-cta h2,
.dc-preview-offer h2,
.dc-preview-card h3,
.dc-preview-feature h3,
.dc-preview-step h3,
.dc-preview-communication h3,
.dc-preview-faq summary{
    color:var(--dc-theme-text,#132d49);
    font-family:var(--dc-theme-heading-font,Inter,system-ui,sans-serif);
    font-weight:var(--dc-theme-heading-weight,800);
}

.dc-preview-hero h1,
.dc-preview-interior-hero h1{
    font-size:clamp(2.5rem,5vw,var(--dc-theme-h1-max,4.9rem));
}

.dc-preview-split h2,
.dc-preview-section-heading h2,
.dc-preview-cta h2,
.dc-preview-offer h2{
    font-size:clamp(1.9rem,3.5vw,var(--dc-theme-h2-max,3rem));
}

.dc-preview-card h3,
.dc-preview-feature h3,
.dc-preview-step h3,
.dc-preview-communication h3{
    font-size:var(--dc-theme-h3-size,1.18rem);
}

.dc-preview-hero p,
.dc-preview-interior-hero p,
.dc-preview-split p,
.dc-preview-section-heading p,
.dc-preview-cta p,
.dc-preview-offer p,
.dc-preview-card p,
.dc-preview-feature p,
.dc-preview-step p,
.dc-preview-communication p,
.dc-preview-faq p{
    color:var(--dc-theme-muted,#60758a);
    line-height:var(--dc-theme-line-height,1.65);
}

.dc-preview-interior-hero h1,
.dc-preview-interior-hero p,
.dc-preview-interior-hero .dc-site-eyebrow,
.dc-preview-cta .dc-site-eyebrow,
.dc-preview-cta h2,
.dc-preview-cta p{
    color:var(--dc-theme-light-text,#fff);
}

.dc-preview-type--text_image,
.dc-preview-type--feature_grid,
.dc-preview-type--gallery,
.dc-preview-type--slideshow_carousel,
.dc-preview-type--faq,
.dc-preview-type--related_pages,
.dc-preview-type--service_grid,
.dc-preview-type--process_steps,
.dc-preview-type--communication_center{
    padding-top:var(--dc-theme-section-spacing,82px);
    padding-bottom:var(--dc-theme-section-spacing,82px);
}

.dc-preview-type--service_grid,
.dc-preview-type--process_steps,
.dc-preview-type--communication_center{
    background:var(--dc-theme-surface-alt,#f4f8fc);
}

.dc-preview-card,
.dc-preview-feature,
.dc-preview-step,
.dc-preview-communication,
.dc-preview-faq details{
    padding:var(--dc-theme-card-padding,28px);
    border-width:var(--dc-theme-border-strength,1px);
    border-color:var(--dc-theme-border,#d9e5ef);
    border-radius:var(--dc-theme-card-radius,20px);
    background:var(--dc-theme-surface,#fff);
    box-shadow:var(--dc-theme-shadow,0 18px 42px rgba(23,54,93,.13));
}

.dc-preview-faq summary{
    padding:0;
}

.dc-preview-faq p{
    padding:12px 0 0;
}

.dc-preview-card > span,
.dc-preview-step > span{
    background:
        linear-gradient(
            135deg,
            var(--dc-theme-primary,#0878c9),
            var(--dc-theme-secondary,#10a8c7)
        );
}

.dc-preview-feature > span,
.dc-preview-communication > span,
.dc-preview-communication button{
    background:var(--dc-theme-accent-two,#15946f);
    border-color:var(--dc-theme-accent-two,#15946f);
}

.dc-site-checks li{
    color:var(--dc-theme-text,#2b4864);
}

.dc-site-checks li::before{
    color:var(--dc-theme-accent-two,#15946f);
}

.dc-preview-media-card,
.dc-preview-image-placeholder,
.dc-preview-gallery > div{
    border-color:var(--dc-theme-border,#c8dced);
    border-radius:var(--dc-theme-card-radius,20px);
    color:var(--dc-theme-primary,#0878c9);
    background:
        linear-gradient(
            145deg,
            var(--dc-theme-surface,#fff),
            var(--dc-theme-surface-alt,#edf7fd)
        );
    box-shadow:var(--dc-theme-shadow,0 18px 42px rgba(23,54,93,.13));
}

.dc-preview-type--offer{
    background:
        color-mix(
            in srgb,
            var(--dc-theme-accent,#f2a900) 13%,
            var(--dc-theme-background,#fff)
        );
}

.dc-preview-offer{
    border-color:var(--dc-theme-accent,#f2a900);
    border-radius:var(--dc-theme-card-radius,20px);
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--dc-theme-accent,#f2a900) 18%,
                #fff
            ),
            color-mix(
                in srgb,
                var(--dc-theme-accent,#f2a900) 40%,
                #fff
            )
        );
}

.dc-preview-type--call_to_action{
    color:var(--dc-theme-light-text,#fff);
    background:
        radial-gradient(
            circle at 90% 0%,
            color-mix(
                in srgb,
                var(--dc-theme-secondary,#38bdf8) 28%,
                transparent
            ),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--dc-theme-primary,#0878c9),
            var(--dc-theme-primary-dark,#0d5891)
        );
}

.dc-preview-type--footer{
    color:var(--dc-theme-light-text,#fff);
    background:var(--dc-theme-primary-dark,#07101d);
}

.dc-site-footer{
    font-family:var(--dc-theme-body-font,Inter,system-ui,sans-serif);
}

.dc-site-footer strong{
    color:var(--dc-theme-light-text,#fff);
    font-family:var(--dc-theme-heading-font,Inter,system-ui,sans-serif);
}

.dc-site-footer p,
.dc-site-footer a,
.dc-site-footer-bottom{
    color:var(--dc-theme-light-text,#fff);
    opacity:.64;
}

/* Domain Creator Step 11E Final Offer Architecture v3 */

.dc-preview-type--offer{
    padding:clamp(54px,7vw,84px) 0;
}

.dc-preview-offer-shell{
    display:block;
    width:min(100% - 48px,1180px);
    margin-inline:auto;
}

.dc-preview-offer{
    position:relative;
    width:100%;
    min-width:0;
    overflow:visible;
    display:grid;
    align-items:center;
    gap:0;
    border:2px dashed #c88412;
    border-radius:24px;
    background:
        linear-gradient(
            135deg,
            #fff8e2,
            #ffe7ad
        );
    box-shadow:0 18px 46px rgba(145,91,8,.12);
}

.dc-preview-offer-media-target:empty{
    display:none;
}

.dc-preview-offer-body{
    grid-area:body;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-self:stretch;
    padding:clamp(28px,4vw,52px);
}

.dc-preview-offer-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 22px;
    margin:0 0 18px;
}

.dc-preview-offer-meta .dc-site-eyebrow{
    margin:0;
}

.dc-preview-offer-value{
    display:block;
    color:#17324f;
    font-size:clamp(.9rem,1.15vw,1.08rem);
    font-weight:950;
    letter-spacing:.055em;
    line-height:1.25;
    text-transform:uppercase;
}

.dc-preview-offer-body h2{
    max-width:720px;
    margin:0 0 16px;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
}

.dc-preview-offer-description{
    max-width:700px;
    margin:0;
}

.dc-preview-offer-validity{
    margin:19px 0 0 !important;
    color:#314e68 !important;
    font-size:.9rem;
}

.dc-preview-offer-terms{
    display:block;
    margin-top:15px;
    color:#385068;
    font-size:.78rem;
    font-weight:700;
    line-height:1.55;
}

.dc-preview-offer-action{
    margin-top:auto;
    padding-top:25px;
    align-self:flex-start;
}

.dc-preview-offer-action .dc-site-button{
    min-width:170px;
    justify-content:center;
}

.dc-preview-offer-cut{
    position:absolute;
    z-index:4;
    top:50%;
    width:24px;
    height:48px;
    border-radius:999px;
    background:
        color-mix(
            in srgb,
            var(--dc-theme-accent,#f2a900) 13%,
            var(--dc-theme-background,#fff)
        );
    transform:translateY(-50%);
}

.dc-preview-offer-cut--left{
    left:-14px;
}

.dc-preview-offer-cut--right{
    right:-14px;
}

/* Wide Ticket: copy left, complete image right. */
.dc-preview-offer--wide-ticket{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    grid-template-areas:"body media";
}

/* Compact Card: full-width alternate split, complete image left. */
.dc-preview-offer--small-card{
    grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
    grid-template-areas:"media body";
}

.dc-preview-offer--wide-ticket:not(.dc-preview-offer--has-media),
.dc-preview-offer--small-card:not(.dc-preview-offer--has-media){
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"body";
}

.dc-preview-offer--wide-ticket
.dc-preview-offer-media-target,
.dc-preview-offer--wide-ticket
.dc-preview-offer-media,
.dc-preview-offer--small-card
.dc-preview-offer-media-target,
.dc-preview-offer--small-card
.dc-preview-offer-media{
    grid-area:media;
}

.dc-preview-offer--small-card
.dc-preview-offer-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 22px;
}

.dc-preview-offer--small-card
.dc-preview-offer-body h2{
    font-size:clamp(2rem,3.5vw,3rem);
    line-height:1.08;
}

.dc-preview-offer--small-card
.dc-preview-offer-action{
    width:auto;
    align-self:flex-start;
}

.dc-preview-offer--small-card
.dc-preview-offer-action
.dc-site-button{
    width:auto;
    min-width:170px;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-preview-offer,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
        "media"
        "body";
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer{
    border-radius:20px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer-body{
    padding:22px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer-meta{
    display:grid;
    justify-items:start;
    gap:8px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer-body h2{
    font-size:clamp(1.85rem,9vw,2.5rem);
    line-height:1.06;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer-action{
    width:100%;
    align-self:stretch;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer-action
.dc-site-button{
    width:100%;
    box-sizing:border-box;
}

@media (max-width:860px){
    .dc-preview-offer{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:
            "media"
            "body";
    }
}

/* End Domain Creator Step 11E Final Offer Architecture v3 */

/* Domain Creator Step 12A Premium Global Frame */
.dc-global-header{color:#fff;background:radial-gradient(circle at 84% 10%,rgba(52,177,255,.22),transparent 28%),linear-gradient(135deg,#050b14 0%,#0a1f35 48%,#083d67 100%);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 18px 50px rgba(2,12,24,.26)}
.dc-global-header-utility{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.08);color:#9ec7e2;font-size:.69rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.dc-owner-portal-link{color:#fff;text-decoration:none;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.06)}
.dc-global-header-main{min-height:88px;display:grid;grid-template-columns:minmax(220px,auto) 1fr auto;align-items:center;gap:28px;padding:0 28px}
.dc-site-brand-copy{display:grid;gap:2px}.dc-site-brand-copy small{color:#99bdd7;font-size:.66rem;font-weight:750;letter-spacing:.05em}
.dc-global-primary-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px}
.dc-global-primary-nav a{color:#d7e9f6;font-size:.84rem;font-weight:800;text-decoration:none}
.dc-command-footer{color:#d9e9f5;background:#050b13}
.dc-command-action-band{padding:46px 0;background:radial-gradient(circle at 92% 20%,rgba(255,190,66,.22),transparent 27%),linear-gradient(125deg,#075f9b 0%,#0878c9 48%,#0c97cf 100%)}
.dc-command-action-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(420px,1fr);align-items:center;gap:42px}
.dc-command-kicker{display:inline-block;color:#8fd7ff;font-size:.7rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.dc-command-action-band .dc-command-kicker{color:#dff5ff}.dc-command-action-band h2{margin:7px 0 8px;color:#fff;font-size:clamp(2rem,4vw,3.35rem);line-height:1}
.dc-command-action-band p{max-width:700px;margin:0;color:#d8f0ff;line-height:1.7}
.dc-command-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dc-command-action{min-height:48px;display:flex;align-items:center;justify-content:center;padding:0 15px;border:1px solid rgba(255,255,255,.28);border-radius:12px;color:#fff;background:rgba(255,255,255,.1);font-size:.8rem;font-weight:900;text-align:center}
.dc-command-footer-main{padding:48px 0 34px;background:radial-gradient(circle at 12% 0%,rgba(0,135,210,.14),transparent 31%),linear-gradient(180deg,#07111e,#050b13)}
.dc-command-footer-grid{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(130px,.65fr) minmax(150px,.75fr) minmax(220px,1fr);gap:30px 34px;align-items:start}
.dc-command-brand-column p{color:#9fb7c9;line-height:1.65}.dc-command-owner-column p{grid-column:1;grid-row:3;margin:0;color:#9fb7c9;font-size:.82rem;line-height:1.45}
.dc-command-link-column>strong,.dc-command-details-column>strong{display:block;margin-bottom:14px;color:#fff;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.dc-command-footer .dc-site-footer-links{display:grid;gap:11px}.dc-command-footer .dc-site-footer-links a{color:#a9c5d8;text-decoration:none;font-size:.86rem;font-weight:700}
.dc-command-business-details{display:grid;gap:8px}
.dc-command-business-details>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:5px 8px;color:#b7cfdf;font-size:.8rem;line-height:1.4}
.dc-command-business-details>div>span{color:#7897aa;font-size:.68rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.dc-command-business-details a{color:#d8eaf5;text-decoration:none;overflow-wrap:anywhere}

.dc-command-empty-link{color:#728b9e;font-size:.78rem}
.dc-command-owner-column{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;gap:3px 22px;margin-top:2px;padding:14px 16px;border:1px solid rgba(104,192,255,.16);border-radius:14px;background:rgba(13,47,70,.42);box-shadow:none}.dc-command-owner-column .dc-command-kicker{grid-column:1;grid-row:1;margin:0}
.dc-command-owner-column h3{grid-column:1;grid-row:2;margin:1px 0;color:#fff;font-size:1rem;line-height:1.2}
.dc-command-owner-button{grid-column:2;grid-row:1/4;align-self:center;min-height:38px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0 16px;border-radius:9px;color:#07111e;background:#f5bd45;font-size:.72rem;font-weight:950;letter-spacing:.05em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.dc-command-footer-bottom{border-top:1px solid rgba(255,255,255,.08);background:#03070c}
.dc-command-footer-bottom-layout{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.dc-command-legal-links{display:flex;flex-wrap:wrap;gap:16px}.dc-command-legal-links a{color:#8ca9bc;font-size:.74rem;font-weight:700;text-decoration:none}
.dc-command-copyright{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px;color:#829aaa;font-size:.74rem;font-weight:700}.dc-command-copyright span{color:#b3cad9}
.dc-command-preview-status{padding:8px 20px;color:#567183;background:#020509;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.dc-preview-canvas[data-preview-mode="tablet"] .dc-global-header-main,.dc-preview-canvas[data-preview-mode="mobile"] .dc-global-header-main{grid-template-columns:1fr auto}
.dc-preview-canvas[data-preview-mode="tablet"] .dc-global-primary-nav,.dc-preview-canvas[data-preview-mode="mobile"] .dc-global-primary-nav{grid-column:1/-1;justify-content:flex-start;padding-bottom:18px}
.dc-preview-canvas[data-preview-mode="tablet"] .dc-command-action-layout,.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-action-layout{grid-template-columns:1fr}
.dc-preview-canvas[data-preview-mode="tablet"] .dc-command-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.dc-preview-canvas[data-preview-mode="tablet"] .dc-command-owner-column{grid-column:1/-1}
.dc-preview-canvas[data-preview-mode="mobile"] .dc-global-header-utility{padding:10px 18px}
.dc-preview-canvas[data-preview-mode="mobile"] .dc-global-header-main{padding:18px;gap:16px}
.dc-preview-canvas[data-preview-mode="mobile"] .dc-global-primary-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-actions,.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-footer-grid{grid-template-columns:1fr}.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-owner-column{grid-column:1;grid-template-columns:1fr;padding:14px}.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-owner-column .dc-command-kicker,.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-owner-column h3,.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-owner-column p,.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-owner-button{grid-column:1;grid-row:auto}.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-owner-button{justify-self:start;margin-top:7px}
.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-footer-bottom-layout{min-height:0;align-items:flex-start;flex-direction:column;padding-top:24px;padding-bottom:24px}
.dc-preview-canvas[data-preview-mode="mobile"] .dc-command-copyright{justify-content:flex-start}
@media(max-width:860px){.dc-global-header-main{grid-template-columns:1fr auto;padding-top:16px;padding-bottom:16px}.dc-global-primary-nav{grid-column:1/-1}.dc-command-action-layout{grid-template-columns:1fr}.dc-command-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.dc-command-owner-column{grid-column:1/-1}}
@media(max-width:580px){.dc-global-header-utility{padding:10px 18px}.dc-global-header-main{padding-left:18px;padding-right:18px}.dc-global-primary-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.dc-command-actions,.dc-command-footer-grid{grid-template-columns:1fr}.dc-command-owner-column{grid-column:1;grid-template-columns:1fr;padding:14px}.dc-command-owner-column .dc-command-kicker,.dc-command-owner-column h3,.dc-command-owner-column p,.dc-command-owner-button{grid-column:1;grid-row:auto}.dc-command-owner-button{justify-self:start;margin-top:7px}.dc-command-footer-bottom-layout{align-items:flex-start;flex-direction:column;padding-top:24px;padding-bottom:24px}.dc-command-copyright{justify-content:flex-start}}
/* End Domain Creator Step 12A Premium Global Frame */


/* Domain Creator Communication Center Modal Forms */
.dc-preview-communication {
    display: flex;
    flex-direction: column;
}
.dc-preview-communication > .dc-site-button,
.dc-preview-communication > button {
    margin-top: auto;
}
.dc-communication-dialog {
    width: min(720px, calc(100% - 32px));
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 1px solid var(--dc-theme-border);
    border-radius: var(--dc-theme-card-radius);
    padding: clamp(22px, 4vw, 38px);
    color: var(--dc-theme-text);
    background: var(--dc-theme-surface);
    box-shadow: 0 30px 80px rgba(6, 27, 50, .35);
}
.dc-communication-dialog::backdrop {
    background: rgba(6, 27, 50, .72);
    backdrop-filter: blur(3px);
}
.dc-communication-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}
.dc-communication-dialog-header h2 { margin: 4px 0 0; }
.dc-communication-dialog-header form { margin: 0; }
.dc-communication-dialog-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--dc-theme-border);
    border-radius: 50%;
    color: var(--dc-theme-text);
    background: var(--dc-theme-surface-alt);
    font: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.dc-communication-dialog form { margin-top: 20px; }
.dc-communication-dialog label {
    display: block;
    margin-top: 16px;
    font-weight: 800;
}
.dc-communication-dialog input,
.dc-communication-dialog textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    border: var(--dc-theme-border-strength) solid var(--dc-theme-border);
    border-radius: var(--dc-theme-input-radius);
    background: var(--dc-theme-surface);
    color: var(--dc-theme-text);
    font: inherit;
}
.dc-communication-dialog textarea {
    min-height: 130px;
    resize: vertical;
}
.dc-communication-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}
.dc-communication-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.dc-form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
@media (max-width: 680px) {
    .dc-communication-dialog {
        width: 100%;
        max-width: none;
        max-height: 100vh;
        min-height: 100vh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    .dc-communication-form-grid {
        grid-template-columns: 1fr;
    }
}

/* SurfLocal commerce component refinement */

/* Correct commerce checkmark rendering and spacing */
.dc-commerce-facts li {
    padding-left: 26px;
    line-height: 1.55;
}

.dc-commerce-facts li::before {
    content: "✓" !important;
    left: 0;
    top: 0;
    width: 18px;
    text-align: center;
}

/* Keep Trailer Showcase at a practical desktop size */
.dc-preview-type--trailer_showcase > .dc-trailer {
    width: min(1040px, calc(100% - 44px));
    margin-inline: auto;
    grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
}

.dc-trailer .dc-commerce-media-target img {
    min-height: 340px;
    max-height: 480px;
}

.dc-trailer-content {
    padding: clamp(24px, 3vw, 40px);
}

.dc-trailer-features,
.dc-trailer-specs {
    margin-top: 22px;
}

@media (max-width: 900px) {
    .dc-preview-type--trailer_showcase > .dc-trailer {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 720px);
    }

    .dc-trailer .dc-commerce-media-target img {
        min-height: 260px;
        max-height: 380px;
    }
}

/* ==========================================================
   Domain Creator Navigation Refinement
   Standard / Centered / Compact
   ========================================================== */

/* Keep the navigation frame aligned with the website content */
.dc-global-header-main {
    width: min(var(--dc-theme-content-width, 1180px), calc(100% - 44px));
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

.dc-global-header-utility {
    width: min(var(--dc-theme-content-width, 1180px), calc(100% - 44px));
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

/* --------------------------
   STANDARD
   Logo left / links right / CTA far right
   -------------------------- */
.dc-global-header--standard .dc-global-header-main {
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    gap: 26px;
}

.dc-global-header--standard .dc-site-brand {
    justify-self: start;
}

.dc-global-header--standard .dc-global-primary-nav {
    justify-self: end;
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 28px);
}

.dc-global-header--standard .dc-site-button {
    justify-self: end;
}

/* --------------------------
   CENTERED
   Brand centered above one balanced navigation row
   -------------------------- */
.dc-global-header--centered .dc-global-header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.dc-global-header--centered .dc-site-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
}

.dc-global-header--centered .dc-global-primary-nav {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    justify-content: flex-end;
    padding-bottom: 0;
    gap: clamp(16px, 2vw, 26px);
}

.dc-global-header--centered .dc-site-button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: center;
}

/* --------------------------
   COMPACT
   Short single-row business header
   -------------------------- */
.dc-global-header--compact .dc-global-header-utility {
    display: none;
}

.dc-global-header--compact .dc-global-header-main {
    min-height: 68px;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
    gap: 20px;
}

.dc-global-header--compact .dc-site-brand {
    justify-self: start;
}

.dc-global-header--compact .dc-site-brand-copy small {
    display: none;
}

.dc-global-header--compact .dc-site-brand-mark {
    width: 36px;
    height: 36px;
}

.dc-global-header--compact .dc-global-primary-nav {
    justify-self: end;
    justify-content: flex-end;
    gap: 18px;
}

.dc-global-header--compact .dc-site-button {
    justify-self: end;
}

/* --------------------------
   Laptop / tablet behavior
   -------------------------- */
@media (max-width: 860px) {

    .dc-global-header-main,
    .dc-global-header--standard .dc-global-header-main,
    .dc-global-header--compact .dc-global-header-main,
    .dc-global-header--centered .dc-global-header-main {
        width: min(100% - 32px, var(--dc-theme-content-width, 1180px));
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .dc-global-header-utility {
        width: min(100% - 32px, var(--dc-theme-content-width, 1180px));
    }

    .dc-global-header--standard .dc-site-brand,
    .dc-global-header--compact .dc-site-brand {
        grid-column: 1;
        grid-row: 1;
    }

    .dc-global-header--standard .dc-site-button,
    .dc-global-header--compact .dc-site-button {
        grid-column: 2;
        grid-row: 1;
    }

    .dc-global-header--standard .dc-global-primary-nav,
    .dc-global-header--compact .dc-global-primary-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        justify-content: flex-start;
        padding-bottom: 0;
    }

    .dc-global-header--centered .dc-site-brand {
        grid-column: 1 / -1;
    }

    .dc-global-header--centered .dc-global-primary-nav {
        grid-column: 1;
        justify-self: end;
    }
}

/* --------------------------
   Mobile
   -------------------------- */
@media (max-width: 580px) {

    .dc-global-header-main,
    .dc-global-header--standard .dc-global-header-main,
    .dc-global-header--centered .dc-global-header-main,
    .dc-global-header--compact .dc-global-header-main {
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
    }

    .dc-global-header-utility {
        width: calc(100% - 28px);
    }

    .dc-global-header .dc-site-brand,
    .dc-global-header .dc-global-primary-nav,
    .dc-global-header .dc-site-button {
        grid-column: 1;
        justify-self: stretch;
    }

    .dc-global-header .dc-site-brand {
        justify-self: start;
    }

    .dc-global-header .dc-global-primary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        width: 100%;
        gap: 10px;
    }

    .dc-global-header .dc-global-primary-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        text-align: center;
    }

    .dc-global-header .dc-site-button {
        width: 100%;
    }
}

/* ==========================================================
   Domain Creator Featured Media Homepage Components
   Gallery + Video Gallery
   ========================================================== */

.dc-featured-media {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    padding-block: clamp(44px, 6vw, 76px);
}

.dc-featured-media--right {
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
}

.dc-featured-media--right .dc-featured-media__visual {
    grid-column: 2;
    grid-row: 1;
}

.dc-featured-media--right .dc-featured-media__copy {
    grid-column: 1;
    grid-row: 1;
}

.dc-featured-media__visual,
.dc-featured-media__copy {
    min-width: 0;
}

.dc-featured-media__copy {
    max-width: 620px;
}

.dc-featured-media__copy h2 {
    margin: 8px 0 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.06;
}

.dc-featured-media__copy > p {
    margin: 18px 0 0;
    color: var(--dc-theme-muted);
    line-height: 1.72;
}

.dc-featured-media__copy .dc-site-button {
    margin-top: 24px;
}

.dc-featured-media .dc-gallery-items,
.dc-featured-media .dc-video-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.dc-featured-media .dc-gallery-item,
.dc-featured-media .dc-video-item {
    width: 100%;
    margin: 0;
}

.dc-featured-media .dc-gallery-media,
.dc-featured-media .dc-video-poster {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--dc-theme-card-radius);
    background: var(--dc-theme-surface-alt);
}

.dc-featured-media .dc-gallery-media {
    aspect-ratio: 16 / 10;
}

.dc-featured-media .dc-video-poster {
    aspect-ratio: 16 / 9;
}

.dc-featured-media .dc-gallery-media img,
.dc-featured-media .dc-video-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-featured-media .dc-video-copy {
    padding-top: 14px;
}

.dc-featured-media .dc-gallery-controls,
.dc-featured-media .dc-video-controls {
    display: none;
}

@media (max-width: 820px) {
    .dc-featured-media,
    .dc-featured-media--right {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .dc-featured-media--right .dc-featured-media__visual,
    .dc-featured-media--right .dc-featured-media__copy {
        grid-column: 1;
    }

    .dc-featured-media--right .dc-featured-media__visual {
        grid-row: 1;
    }

    .dc-featured-media--right .dc-featured-media__copy {
        grid-row: 2;
    }
}

/* ==========================================================
   Domain Creator Responsive Preview Foundation
   Commerce Family
   Product / Inventory / Trailer / Pricing
   ========================================================== */

/* TABLET PREVIEW — mirror the existing <=900px behavior */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-product,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-product--standard,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-trailer {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-inventory-grid,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-type--trailer_showcase > .dc-trailer {
    width: min(100% - 32px, 720px);
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-trailer .dc-commerce-media-target img {
    min-height: 260px;
    max-height: 380px;
}


/* MOBILE PREVIEW — mirror the existing <=620px behavior */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-product,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-product--standard,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-trailer {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-inventory-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-pricing-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-inventory--count-2 .dc-inventory-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-pricing--count-2 .dc-pricing-grid {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-product-body,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-trailer-content {
    padding: 24px 20px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-trailer-features ul {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-trailer-specs dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-inventory-card-head {
    display: grid;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-inventory-status {
    max-width: 100%;
    justify-self: start;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-type--trailer_showcase > .dc-trailer {
    width: calc(100% - 24px);
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-trailer .dc-commerce-media-target img {
    min-height: 220px;
    max-height: 320px;
}

/* ==========================================================
   Domain Creator Responsive Preview Foundation
   Conversion Family
   Inquiry Form / Newsletter Signup
   ========================================================== */

/* TABLET PREVIEW */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-conversion-shell,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-newsletter,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-newsletter--compact {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-conversion-intro {
    max-width: 760px;
}


/* MOBILE PREVIEW */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-conversion-shell,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-newsletter,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-newsletter--compact {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-conversion-field-row,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-newsletter-action {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-conversion-form {
    padding: 22px 18px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-newsletter {
    padding: 24px 18px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-conversion-submit,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-newsletter-action button {
    width: 100%;
}

/* ==========================================================
   Domain Creator Responsive Preview Foundation
   Offer / Communication Center
   ========================================================== */

/* TABLET PREVIEW */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-offer {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
        "media"
        "body";
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-communication-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
}


/* MOBILE PREVIEW */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
        "media"
        "body";
    border-radius: 20px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer-body {
    padding: 22px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer-meta {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer-action {
    width: 100%;
    align-self: stretch;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-offer-action .dc-site-button {
    width: 100%;
    box-sizing: border-box;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-communication-grid {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-communication {
    min-width: 0;
}

/* ==========================================================
   Domain Creator Responsive Preview Foundation
   Featured Gallery / Featured Video
   ========================================================== */

/* TABLET PREVIEW */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-featured-media,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-featured-media--right {
    grid-template-columns: 1fr;
    gap: 26px;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-featured-media--right .dc-featured-media__visual,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-featured-media--right .dc-featured-media__copy {
    grid-column: 1;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-featured-media--right .dc-featured-media__visual {
    grid-row: 1;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-featured-media--right .dc-featured-media__copy {
    grid-row: 2;
}


/* MOBILE PREVIEW */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-featured-media,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-featured-media--right {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 34px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-featured-media__copy {
    max-width: none;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-featured-media__copy h2 {
    font-size: clamp(1.8rem, 9vw, 2.45rem);
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-featured-media__copy .dc-site-button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

/* ==========================================================
   Domain Creator Media Pagination
   Gallery + Video
   ========================================================== */

.dc-media-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: var(--dc-theme-border-strength, 1px) solid var(--dc-theme-border);
}

.dc-media-pagination button {
    min-height: 42px;
    padding: 9px 16px;
    border: var(--dc-theme-border-strength, 1px) solid var(--dc-theme-border);
    border-radius: var(--dc-theme-button-radius);
    background: var(--dc-theme-surface);
    color: var(--dc-theme-primary);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.dc-media-pagination button:hover:not(:disabled) {
    background: var(--dc-theme-surface-alt);
}

.dc-media-pagination button:focus-visible {
    outline: 3px solid var(--dc-theme-accent);
    outline-offset: 3px;
}

.dc-media-pagination button:disabled {
    opacity: .42;
    cursor: default;
}

.dc-media-page-status {
    min-width: 110px;
    color: var(--dc-theme-muted);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 580px) {
    .dc-media-pagination {
        gap: 8px;
    }

    .dc-media-pagination button {
        flex: 1;
        padding-inline: 10px;
    }

    .dc-media-page-status {
        min-width: 92px;
        font-size: .82rem;
    }
}

/* ==========================================================
   Domain Creator Request Service + Book Appointment
   ========================================================== */

.dc-preview-type--request_service,
.dc-preview-type--book_appointment {
    overflow: clip;
    padding-block: clamp(42px, 6vw, 72px);
}

.dc-service-request,
.dc-book-appointment {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.dc-service-request--form_left,
.dc-book-appointment--form_left {
    grid-template-columns: minmax(420px, 1.08fr) minmax(0, .92fr);
}

.dc-service-request--form_left .dc-service-request-form,
.dc-book-appointment--form_left .dc-book-appointment-form {
    grid-column: 1;
    grid-row: 1;
}

.dc-service-request--form_left .dc-service-request-teaser,
.dc-book-appointment--form_left .dc-book-appointment-teaser {
    grid-column: 2;
    grid-row: 1;
}

.dc-service-request-teaser,
.dc-book-appointment-teaser {
    min-width: 0;
}

.dc-service-request-media,
.dc-book-appointment-media {
    min-height: clamp(240px, 34vw, 420px);
    overflow: hidden;
    border-radius: var(--dc-theme-card-radius);
    background:
        linear-gradient(
            135deg,
            var(--dc-theme-surface-alt),
            var(--dc-theme-surface)
        );
    border: var(--dc-theme-border-strength) solid var(--dc-theme-border);
}

.dc-service-request-media:empty::before,
.dc-book-appointment-media:empty::before {
    content: "FEATURED IMAGE";
    display: grid;
    min-height: inherit;
    place-items: center;
    color: var(--dc-theme-muted);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .12em;
}

.dc-service-request-media img,
.dc-book-appointment-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.dc-service-request-copy,
.dc-book-appointment-copy {
    padding-top: 24px;
}

.dc-service-request-copy h2,
.dc-book-appointment-copy h2 {
    margin: 8px 0 0;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.dc-service-request-copy > p,
.dc-book-appointment-copy > p {
    margin: 16px 0 0;
    color: var(--dc-theme-muted);
    line-height: 1.7;
}

.dc-service-request-form,
.dc-book-appointment-form {
    min-width: 0;
    padding: clamp(24px, 3vw, 34px);
    border: var(--dc-theme-border-strength) solid var(--dc-theme-border);
    border-radius: var(--dc-theme-card-radius);
    background: var(--dc-theme-surface);
    box-shadow: 0 16px 38px rgba(15, 39, 64, .10);
}

.dc-service-request-form > label,
.dc-book-appointment-form > label,
.dc-service-request-form .dc-communication-form-grid > label,
.dc-book-appointment-form .dc-communication-form-grid > label {
    display: block;
    margin-top: 16px;
    color: var(--dc-theme-text);
    font-size: .86rem;
    font-weight: 800;
}

.dc-service-request-form input,
.dc-service-request-form select,
.dc-service-request-form textarea,
.dc-book-appointment-form input,
.dc-book-appointment-form select,
.dc-book-appointment-form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 7px;
    padding: 12px 14px;
    border: var(--dc-theme-border-strength) solid var(--dc-theme-border);
    border-radius: var(--dc-theme-input-radius);
    background: var(--dc-theme-surface);
    color: var(--dc-theme-text);
    font: inherit;
    line-height: 1.45;
}

.dc-service-request-form textarea,
.dc-book-appointment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.dc-service-request-form input:focus,
.dc-service-request-form select:focus,
.dc-service-request-form textarea:focus,
.dc-book-appointment-form input:focus,
.dc-book-appointment-form select:focus,
.dc-book-appointment-form textarea:focus {
    border-color: var(--dc-theme-primary);
    outline: 3px solid color-mix(
        in srgb,
        var(--dc-theme-primary) 20%,
        transparent
    );
    outline-offset: 1px;
}

.dc-service-request-consent,
.dc-book-appointment-consent {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px !important;
    font-weight: 600 !important;
    line-height: 1.5;
}

.dc-service-request-consent input,
.dc-book-appointment-consent input {
    width: auto;
    min-height: 0;
    margin: 3px 0 0;
}

.dc-service-request-actions,
.dc-book-appointment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 24px;
}

.dc-service-request-actions small,
.dc-book-appointment-actions small {
    color: var(--dc-theme-muted);
    font-size: .76rem;
}

/* Tablet preview */
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request--form_left,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment--form_left {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request--form_left .dc-service-request-form,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request--form_left .dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment--form_left .dc-book-appointment-form,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment--form_left .dc-book-appointment-teaser {
    grid-column: 1;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request--form_left .dc-service-request-form,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment--form_left .dc-book-appointment-form {
    grid-row: 2;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request--form_left .dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment--form_left .dc-book-appointment-teaser {
    grid-row: 1;
}

/* Mobile preview */
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request--form_left,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment--form_left {
    grid-template-columns: 1fr;
    gap: 24px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form {
    padding: 22px 18px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-communication-form-grid {
    grid-template-columns: 1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-actions,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-actions {
    align-items: stretch;
    flex-direction: column;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-actions .dc-site-button,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-actions .dc-site-button {
    width: 100%;
}

@media (max-width: 900px) {
    .dc-service-request,
    .dc-book-appointment,
    .dc-service-request--form_left,
    .dc-book-appointment--form_left {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .dc-preview-type--request_service,
    .dc-preview-type--book_appointment {
        padding-block: 32px;
    }

    .dc-service-request-form,
    .dc-book-appointment-form {
        padding: 22px 18px;
    }

    .dc-communication-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Request Service + Book Appointment
   Compact desktop/laptop refinement
   ========================================================== */

.dc-preview-type--request_service,
.dc-preview-type--book_appointment {
    padding-block: clamp(26px, 3.5vw, 46px);
}

.dc-service-request,
.dc-book-appointment {
    grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
    gap: clamp(22px, 3.2vw, 42px);
    align-items: center;
}

.dc-service-request--form_left,
.dc-book-appointment--form_left {
    grid-template-columns: minmax(380px, 1.1fr) minmax(0, .9fr);
}

.dc-service-request-media,
.dc-book-appointment-media {
    min-height: clamp(190px, 24vw, 300px);
    max-height: 320px;
}

.dc-service-request-copy,
.dc-book-appointment-copy {
    padding-top: 16px;
}

.dc-service-request-copy h2,
.dc-book-appointment-copy h2 {
    font-size: clamp(1.7rem, 2.7vw, 2.45rem);
}

.dc-service-request-copy > p,
.dc-book-appointment-copy > p {
    margin-top: 11px;
    line-height: 1.58;
}

.dc-service-request-copy .dc-conversion-reassurance,
.dc-book-appointment-copy .dc-conversion-reassurance {
    margin-top: 14px;
    padding-top: 12px;
}

.dc-service-request-form,
.dc-book-appointment-form {
    padding: clamp(18px, 2vw, 24px);
}

.dc-service-request-form > label,
.dc-book-appointment-form > label,
.dc-service-request-form .dc-communication-form-grid > label,
.dc-book-appointment-form .dc-communication-form-grid > label {
    margin-top: 10px;
}

.dc-service-request-form .dc-communication-form-grid,
.dc-book-appointment-form .dc-communication-form-grid {
    gap: 0 12px;
}

.dc-service-request-form input,
.dc-service-request-form select,
.dc-book-appointment-form input,
.dc-book-appointment-form select {
    min-height: 42px;
    margin-top: 5px;
    padding: 9px 11px;
}

.dc-service-request-form textarea,
.dc-book-appointment-form textarea {
    min-height: 84px;
    margin-top: 5px;
    padding: 9px 11px;
}

.dc-service-request-consent,
.dc-book-appointment-consent {
    margin-top: 14px !important;
}

.dc-service-request-actions,
.dc-book-appointment-actions {
    margin-top: 16px;
}

/* Keep touch targets and breathing room on tablet/mobile. */
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-form input,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-form select,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-form input,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-form select,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form select,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form select {
    min-height: 44px;
}

@media (max-width: 900px) {
    .dc-service-request-media,
    .dc-book-appointment-media {
        min-height: 220px;
        max-height: 300px;
    }
}

@media (max-width: 620px) {
    .dc-preview-type--request_service,
    .dc-preview-type--book_appointment {
        padding-block: 26px;
    }

    .dc-service-request-copy,
    .dc-book-appointment-copy {
        padding-top: 14px;
    }
}

/* ==========================================================
   Request Service + Book Appointment
   Tablet + Mobile final responsive refinement
   ========================================================== */

/* ------------------------------
   TABLET PREVIEW
   ------------------------------ */

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-preview-type--request_service,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-preview-type--book_appointment {
    padding-block: 30px;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request--form_left,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment--form_left {
    grid-template-columns: 1fr;
    gap: 24px;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-teaser,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-form {
    grid-column: 1;
    width: 100%;
}

/* On tablet always show teaser first, form second. */
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-teaser {
    grid-row: 1;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-form {
    grid-row: 2;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-media,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-media {
    min-height: 210px;
    max-height: 260px;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-copy,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-copy {
    padding-top: 14px;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-copy h2,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-copy h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-book-appointment-form {
    padding: 20px;
}


/* ------------------------------
   MOBILE PREVIEW
   ------------------------------ */

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--request_service,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--book_appointment {
    padding-block: 22px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--request_service > .dc-preview-shell,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--book_appointment > .dc-preview-shell {
    width: min(
        100% - 24px,
        var(--dc-theme-content-width, 1180px)
    );
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request--form_left,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment--form_left {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

/* Mobile always uses teaser first, form second. */
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-teaser {
    grid-column: 1;
    grid-row: 1;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form {
    grid-column: 1;
    grid-row: 2;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-media,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-media {
    min-height: 170px;
    max-height: 210px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-copy,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-copy {
    padding-top: 12px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-copy h2,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-copy h2 {
    font-size: 1.75rem;
    line-height: 1.08;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-copy > p,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-copy > p {
    margin-top: 9px;
    font-size: .94rem;
    line-height: 1.55;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-copy .dc-conversion-reassurance,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-copy .dc-conversion-reassurance {
    margin-top: 12px;
    padding-top: 10px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form {
    padding: 18px 16px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form .dc-communication-form-grid,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form .dc-communication-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form > label,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form > label,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form .dc-communication-form-grid > label,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form .dc-communication-form-grid > label {
    margin-top: 9px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form select,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form select {
    min-height: 44px;
    width: 100%;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form textarea,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form textarea {
    min-height: 82px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-consent,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-consent {
    align-items: flex-start;
    margin-top: 12px !important;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-actions,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-actions .dc-site-button,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-actions .dc-site-button {
    width: 100%;
    min-height: 46px;
}

/* ==========================================================
   Request Service + Book Appointment
   Mobile containment repair
   ========================================================== */

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--request_service,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--book_appointment {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--request_service > .dc-preview-shell,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--book_appointment > .dc-preview-shell {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    min-width: 0;
    margin-inline: auto;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 20px;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-teaser,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-copy,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-copy,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-media,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-media,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-communication-form-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form *,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form * {
    box-sizing: border-box;
    max-width: 100%;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form select,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-form textarea,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form select,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-consent input,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-consent input {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-actions,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-actions {
    width: 100%;
    min-width: 0;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-service-request-actions .dc-site-button,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-book-appointment-actions .dc-site-button {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
}


/* ==========================================================
   Request Service + Book Appointment
   FINAL MOBILE PREVIEW AUTHORITY
   ========================================================== */

.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request, .dc-book-appointment) {
    display: flex !important;
    flex-direction: column !important;

    grid-template-columns: none !important;

    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;

    margin-inline: auto !important;
    gap: 20px !important;
}

/*
 * Reset every desktop/form_left grid placement.
 * These elements become ordinary vertical flex children.
 */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-teaser, .dc-book-appointment-teaser),
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-form, .dc-book-appointment-form) {
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}

/* Teaser always first, form always second on mobile. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-teaser, .dc-book-appointment-teaser) {
    order: 1 !important;
}

.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-form, .dc-book-appointment-form) {
    order: 2 !important;
}

/* Prevent descendants from establishing desktop-sized content. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(
    .dc-service-request-teaser,
    .dc-book-appointment-teaser,
    .dc-service-request-copy,
    .dc-book-appointment-copy,
    .dc-service-request-media,
    .dc-book-appointment-media,
    .dc-communication-form-grid
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Form fields must become one physical column. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-form, .dc-book-appointment-form)
.dc-communication-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

/* Restore normal readable mobile typography. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request, .dc-book-appointment) {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-copy, .dc-book-appointment-copy) h2 {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
}

/* Keep fields inside the 390px simulated device. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-form, .dc-book-appointment-form)
:is(input, select, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Checkboxes must NOT inherit full-width input behavior. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-consent, .dc-book-appointment-consent)
input {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

/* Mobile action area. */
.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-actions, .dc-book-appointment-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 8px !important;
}

.dc-preview-canvas[data-preview-mode="mobile"]
:is(.dc-service-request-actions, .dc-book-appointment-actions)
.dc-site-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
}


/* ==========================================================
   CLEAN FINAL MOBILE AUTHORITY
   Request Service + Book Appointment
   ========================================================== */

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 18px !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-teaser,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-teaser {
    order: 1 !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-form,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-form {
    order: 2 !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 18px 16px !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-copy,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-copy,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-media,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-media,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-media {
    min-height: 170px !important;
    max-height: 210px !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-form .dc-communication-form-grid,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-form .dc-communication-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-form input,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-form select,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-form textarea,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-form input,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-form select,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-form textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-consent input,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-consent input {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-copy h2,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-copy h2 {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-actions,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-service-request-actions .dc-site-button,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-book-appointment-actions .dc-site-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
}

/* ==========================================================
   Domain Creator Chat Launcher
   Floating Button + Inline Button + Text Link
   ========================================================== */

.dc-preview-type--chat_launcher {
    position: relative;
    overflow: visible;
}

.dc-chat-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    border: 0;
    text-decoration: none;
    font: inherit;
    font-weight: 850;
    line-height: 1.15;
    cursor: pointer;
    box-sizing: border-box;
}

.dc-chat-launcher--size-small {
    min-height: 42px;
    padding: 10px 14px;
    font-size: .84rem;
}

.dc-chat-launcher--size-medium {
    min-height: 50px;
    padding: 12px 18px;
    font-size: .94rem;
}

.dc-chat-launcher--size-large {
    min-height: 58px;
    padding: 14px 22px;
    font-size: 1rem;
}

.dc-chat-launcher--shape-circle {
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
}

.dc-chat-launcher--size-small.dc-chat-launcher--shape-circle {
    width: 44px;
    height: 44px;
}

.dc-chat-launcher--size-large.dc-chat-launcher--shape-circle {
    width: 64px;
    height: 64px;
}

.dc-chat-launcher--shape-rounded {
    border-radius: var(--dc-theme-button-radius);
}

.dc-chat-launcher--shape-pill {
    border-radius: 999px;
}

.dc-chat-launcher--color-theme,
.dc-chat-launcher--color-primary {
    background: var(--dc-theme-primary);
    color: var(--dc-theme-primary-contrast);
    box-shadow: 0 14px 34px rgba(15, 39, 64, .22);
}

.dc-chat-launcher--color-secondary {
    background: var(--dc-theme-surface-alt);
    color: var(--dc-theme-primary);
    border: var(--dc-theme-border-strength) solid var(--dc-theme-border);
    box-shadow: 0 12px 28px rgba(15, 39, 64, .14);
}

.dc-chat-launcher-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    line-height: 1;
}

.dc-chat-launcher--shape-circle .dc-chat-launcher-icon {
    font-size: 1.4em;
}

.dc-chat-launcher-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dc-chat-launcher-floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
}

.dc-chat-launcher-helper {
    display: inline-block;
    max-width: 230px;
    padding: 8px 11px;
    border: var(--dc-theme-border-strength) solid var(--dc-theme-border);
    border-radius: 12px;
    background: var(--dc-theme-surface);
    color: var(--dc-theme-text);
    box-shadow: 0 10px 28px rgba(15, 39, 64, .12);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.4;
}

.dc-chat-launcher-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-block: 18px;
}

.dc-chat-launcher-inline-copy {
    min-width: 0;
}

.dc-chat-launcher-inline .dc-chat-launcher-helper {
    max-width: 48ch;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--dc-theme-muted);
    font-size: .9rem;
    font-weight: 600;
}

.dc-chat-launcher-inline--text {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    padding-block: 16px;
}

.dc-chat-launcher-text-link {
    color: var(--dc-theme-primary);
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.dc-chat-launcher-inline--text .dc-chat-launcher-helper {
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--dc-theme-muted);
    font-size: .84rem;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-chat-launcher-floating {
    right: 14px;
    bottom: 14px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-chat-launcher-floating {
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-chat-launcher-inline,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-chat-launcher-inline--text {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-chat-launcher-inline .dc-chat-launcher {
    width: 100%;
}

@media (max-width: 620px) {
    .dc-chat-launcher-floating {
        right: 12px;
        bottom: 12px;
    }

    .dc-chat-launcher-inline,
    .dc-chat-launcher-inline--text {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* FAST-007 shared containment contract: applies in preview and generated builds. */
.dc-page-main,.dc-preview-component,.dc-preview-component>*{min-width:0;max-width:100%;}
.dc-preview-component img,.dc-preview-component video,.dc-preview-component iframe{max-width:100%;height:auto;}
.dc-preview-component input,.dc-preview-component select,.dc-preview-component textarea,.dc-preview-component button{max-width:100%;}

/* ==========================================================
   SurfLocal UX 2027 component visual completion authority
   Shared by Development Lab, live preview, and private builds.
   ========================================================== */
.dc-live-preview{
    --dc-content-max:min(var(--dc-theme-content-width,1180px),calc(100% - 40px));
    --dc-text-max:680px;
    --dc-section-y:clamp(38px,5vw,64px);
    --dc-gap-xs:8px;
    --dc-gap-sm:12px;
    --dc-gap-md:18px;
    --dc-gap-lg:clamp(24px,3vw,38px);
    --dc-card-pad:clamp(18px,2.2vw,26px);
    --dc-radius-sm:8px;
    --dc-radius-md:14px;
    --dc-radius-lg:18px;
    --dc-border:var(--dc-theme-border-strength,1px) solid var(--dc-theme-border,#d8e2ec);
    --dc-elevation:0 12px 34px rgba(15,39,64,.09);
    --dc-elevation-hover:0 16px 38px rgba(15,39,64,.13);
    --dc-control-h:44px;
    --dc-motion:160ms ease;
    color:var(--dc-theme-text,#10263a);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.dc-live-preview .dc-preview-shell{width:var(--dc-content-max);}
.dc-live-preview :where(h1,h2,h3){text-wrap:balance;}
.dc-live-preview :where(.dc-preview-section-heading,.dc-commerce-heading){max-width:var(--dc-text-max);margin-bottom:clamp(18px,2.4vw,28px);}
.dc-live-preview :where(.dc-preview-section-heading,.dc-commerce-heading) h2{margin:6px 0 0;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.08;letter-spacing:-.04em;}
.dc-live-preview :where(.dc-preview-section-heading,.dc-commerce-heading)>p{margin:10px 0 0;color:var(--dc-theme-muted);line-height:1.6;}
.dc-live-preview .dc-preview-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.13em;}
.dc-live-preview :where(.dc-site-button,.dc-commerce-action,.dc-conversion-submit,.dc-newsletter-action button,.dc-inventory-controls button){min-height:var(--dc-control-h);padding:10px 17px;border-radius:var(--dc-theme-button-radius,10px);font-size:.9rem;font-weight:780;box-shadow:none;transition:transform var(--dc-motion),background-color var(--dc-motion),border-color var(--dc-motion),box-shadow var(--dc-motion);}
.dc-live-preview :where(.dc-site-button,.dc-commerce-action,.dc-conversion-submit,.dc-newsletter-action button,.dc-inventory-controls button):hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,39,64,.12);}
.dc-live-preview :where(a,button,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--dc-theme-accent,#20b486) 75%,white);outline-offset:3px;}

/* Tooling metadata remains opt-in and outside the customer presentation. */
.dc-preview-component-label{top:6px;left:6px;padding:4px 7px;border:1px solid rgba(255,255,255,.28);border-radius:6px;font-size:.54rem;line-height:1.2;box-shadow:0 3px 10px rgba(7,16,29,.14);}
.show-component-outlines .dc-preview-component{outline-width:1px;outline-style:solid;outline-offset:-1px;}

/* Media and commerce sections share one efficient page rhythm. */
.dc-live-preview :where(.dc-preview-type--gallery,.dc-preview-type--video_gallery,.dc-preview-type--slideshow_carousel,.dc-preview-type--product_card,.dc-preview-type--inventory_listing,.dc-preview-type--trailer_showcase,.dc-preview-type--pricing_block,.dc-preview-type--inquiry_form,.dc-preview-type--newsletter_signup,.dc-preview-type--request_service,.dc-preview-type--book_appointment,.dc-preview-type--communication_center){padding-block:var(--dc-section-y);}
.dc-preview-type--product_card>.dc-product,
.dc-preview-type--inventory_listing>.dc-inventory,
.dc-preview-type--trailer_showcase>.dc-trailer,
.dc-preview-type--pricing_block>.dc-pricing,
.dc-preview-type--product_card>.dc-commerce-empty,
.dc-preview-type--inventory_listing>.dc-commerce-empty,
.dc-preview-type--trailer_showcase>.dc-commerce-empty,
.dc-preview-type--pricing_block>.dc-commerce-empty{width:var(--dc-content-max);margin-inline:auto;}
.dc-commerce-empty,.dc-video-empty{gap:4px;max-width:620px;padding:18px 20px;border:var(--dc-border);border-radius:var(--dc-radius-md);background:var(--dc-theme-surface-alt);box-shadow:none;}
.dc-commerce-empty strong,.dc-video-empty strong{font-size:1rem;}
.dc-commerce-empty span,.dc-video-empty p{margin:0;color:var(--dc-theme-muted);font-size:.88rem;}

/* Commerce: media first, compact information, useful density. */
.dc-product,.dc-trailer{grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);border:var(--dc-border);border-radius:var(--dc-radius-lg);box-shadow:var(--dc-elevation);}
.dc-product--standard{grid-template-columns:minmax(0,.86fr) minmax(320px,1.14fr);}
.dc-product-body,.dc-trailer-content{padding:clamp(22px,3.2vw,40px);}
.dc-commerce-media-target img{min-height:300px;max-height:520px;}
.dc-product .dc-commerce-media-target img{aspect-ratio:4/3;}
.dc-commerce-heading h2{font-size:clamp(1.55rem,2.8vw,2.35rem);}
.dc-commerce-price{margin-top:12px;font-size:clamp(1.45rem,2.4vw,2rem);font-variant-numeric:tabular-nums;letter-spacing:-.035em;}
.dc-commerce-price-note,.dc-commerce-availability{font-size:.82rem;}
.dc-commerce-facts{gap:7px;margin-top:16px;}
.dc-commerce-facts li{padding-left:21px;font-size:.92rem;line-height:1.48;}
.dc-commerce-facts li::before{content:"\2713";width:14px;color:var(--dc-theme-primary);}
.dc-commerce-action{margin-top:18px;}
.dc-inventory>.dc-commerce-heading,.dc-pricing>.dc-commerce-heading{margin-bottom:24px;}
.dc-inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,20px);}
.dc-inventory--count-1 .dc-inventory-grid{grid-template-columns:minmax(0,440px);}
.dc-inventory--count-2 .dc-inventory-grid{grid-template-columns:repeat(2,minmax(0,380px));}
.dc-inventory-item article,.dc-pricing-option article{border:var(--dc-border);border-radius:var(--dc-radius-md);box-shadow:none;transition:transform var(--dc-motion),box-shadow var(--dc-motion),border-color var(--dc-motion);}
.dc-inventory-item article:hover,.dc-pricing-option article:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--dc-theme-primary) 24%,var(--dc-theme-border));box-shadow:var(--dc-elevation-hover);}
.dc-inventory-media{aspect-ratio:16/10;}
.dc-inventory-body{padding:16px;}
.dc-inventory-card-head{gap:10px;}
.dc-inventory-card-head h3{font-size:1.05rem;line-height:1.25;letter-spacing:-.02em;}
.dc-inventory-status{padding:4px 7px;border-radius:999px;font-size:.68rem;line-height:1.2;}
.dc-inventory-body .dc-commerce-price{font-size:1.2rem;}
.dc-inventory-body>p:not([class]){margin:8px 0 0;font-size:.86rem;line-height:1.5;}
.dc-inventory-body .dc-commerce-action{min-height:40px;margin-top:14px;padding:8px 13px;font-size:.82rem;}
.dc-trailer-features,.dc-trailer-specs{margin-top:18px;}
.dc-trailer-features h3,.dc-trailer-specs h3{margin-bottom:9px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;}
.dc-trailer-features ul{gap:7px 16px;font-size:.9rem;}
.dc-trailer-specs dl>div{grid-template-columns:minmax(88px,.65fr) minmax(0,1.35fr);gap:14px;padding:8px 0;font-size:.87rem;}
.dc-pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,20px);align-items:stretch;}
.dc-pricing-option article{padding:22px;}
.dc-pricing-option.is-featured article{border-color:color-mix(in srgb,var(--dc-theme-accent) 65%,var(--dc-theme-border));box-shadow:0 12px 30px rgba(15,39,64,.1);}
.dc-pricing-option h3{font-size:1.05rem;}
.dc-pricing-option .dc-commerce-price{font-size:clamp(1.55rem,2.7vw,2.1rem);}

/* Calm, compact forms with consistent field and action geometry. */
.dc-conversion-shell,.dc-service-request,.dc-book-appointment{gap:clamp(24px,3.5vw,44px);}
.dc-conversion-intro h2,.dc-newsletter-copy h2,.dc-service-request-copy h2,.dc-book-appointment-copy h2{font-size:clamp(1.65rem,3vw,2.5rem);}
.dc-conversion-description,.dc-newsletter-copy>p,.dc-service-request-copy>p,.dc-book-appointment-copy>p{margin-top:10px;font-size:.98rem;line-height:1.58;}
.dc-conversion-reassurance{margin-top:15px;padding-top:12px;}
.dc-conversion-form,.dc-service-request-form,.dc-book-appointment-form{padding:clamp(18px,2.5vw,25px);border:var(--dc-border);border-radius:var(--dc-radius-lg);box-shadow:var(--dc-elevation);}
.dc-conversion-form-heading{margin-bottom:14px;}
.dc-conversion-field-row,.dc-communication-form-grid{gap:12px;}
.dc-conversion-field{margin-bottom:11px;}
.dc-conversion-field label,.dc-newsletter-field>label,.dc-service-request-form label,.dc-book-appointment-form label{margin-bottom:6px;font-size:.8rem;font-weight:750;}
.dc-conversion-field input,.dc-conversion-field textarea,.dc-newsletter-field input,.dc-service-request-form input,.dc-service-request-form select,.dc-service-request-form textarea,.dc-book-appointment-form input,.dc-book-appointment-form select,.dc-book-appointment-form textarea,.dc-communication-dialog input,.dc-communication-dialog textarea{min-height:44px;padding:9px 12px;border:var(--dc-border);border-radius:var(--dc-theme-input-radius,9px);font-size:.94rem;}
.dc-conversion-field textarea,.dc-service-request-form textarea,.dc-book-appointment-form textarea,.dc-communication-dialog textarea{min-height:88px;}
.dc-conversion-help,.dc-conversion-error,.dc-newsletter-reassurance{margin-top:5px;font-size:.74rem;}
.dc-newsletter{gap:clamp(20px,3vw,36px);padding:clamp(20px,2.8vw,28px);border:var(--dc-border);border-radius:var(--dc-radius-lg);}
.dc-newsletter-action{gap:8px;}
.dc-newsletter-action button{min-width:118px;}
.dc-service-request-media,.dc-book-appointment-media{border-radius:var(--dc-radius-lg);}
.dc-communication-dialog{width:min(620px,calc(100% - 28px));max-height:min(88vh,760px);padding:clamp(18px,3vw,28px);border-radius:var(--dc-radius-lg);box-shadow:0 28px 80px rgba(7,16,29,.3);}
.dc-communication-dialog-header{gap:16px;}
.dc-communication-dialog-close{width:42px;height:42px;border-radius:50%;}
.dc-chat-launcher--color-theme,.dc-chat-launcher--color-primary{box-shadow:0 10px 24px rgba(15,39,64,.18);}
.dc-chat-launcher-helper{border-radius:var(--dc-radius-sm);box-shadow:var(--dc-elevation);}

@media(max-width:1024px){
    .dc-inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:820px){
    .dc-live-preview{--dc-section-y:clamp(34px,6vw,50px);}
    .dc-product,.dc-product--standard,.dc-trailer,.dc-conversion-shell,.dc-newsletter,.dc-newsletter--compact{grid-template-columns:1fr;}
    .dc-commerce-media-target img{min-height:240px;max-height:430px;}
    .dc-inventory-grid,.dc-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:580px){
    .dc-live-preview{--dc-content-max:calc(100% - 24px);--dc-section-y:30px;--dc-card-pad:16px;}
    .dc-live-preview :where(.dc-preview-section-heading,.dc-commerce-heading) h2{font-size:clamp(1.55rem,8vw,2rem);}
    .dc-inventory-grid,.dc-pricing-grid,.dc-inventory--count-2 .dc-inventory-grid,.dc-pricing--count-2 .dc-pricing-grid{grid-template-columns:1fr;}
    .dc-product-body,.dc-trailer-content,.dc-pricing-option article{padding:18px 16px;}
    .dc-commerce-media-target img{min-height:210px;max-height:330px;}
    .dc-inventory-media{aspect-ratio:16/9;}
    .dc-conversion-field-row,.dc-communication-form-grid,.dc-newsletter-action{grid-template-columns:1fr;}
    .dc-conversion-form,.dc-service-request-form,.dc-book-appointment-form{padding:17px 14px;}
    .dc-newsletter{padding:18px 15px;}
    .dc-newsletter-action button,.dc-conversion-submit{width:100%;}
    .dc-trailer-features ul,.dc-trailer-specs dl>div{grid-template-columns:1fr;}
    .dc-trailer-specs dl>div{gap:2px;}
}
@media(prefers-reduced-motion:reduce){
    .dc-live-preview :where(*,::before,::after){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}
.dc-cc27-grid>*{min-width:0;}
@media(max-width:680px){.dc-cc27-grid{grid-template-columns:minmax(0,1fr);}.dc-cc27-panel{width:min(100% - 24px,720px);max-height:calc(100dvh - 24px);}}

/* ==========================================================
   FAST-009 responsive and secondary-page finish authority
   Shared by DevelopmentLab, live preview, and private builds.
   ========================================================== */
.dc-live-preview{
    overflow-x:clip;
}

/* Interior titles introduce a page; homepage heroes retain cinematic scale. */
.dc-preview-type--hero_interior .dc-preview-interior-hero{
    min-height:clamp(238px,20vw,258px);
    padding-block:clamp(40px,4vw,48px);
}
.dc-preview-type--hero_interior .dc-preview-interior-hero h1{
    max-width:760px;
    margin:10px 0 13px;
    font-size:clamp(2.35rem,4vw,3.4rem);
    line-height:1.02;
}
.dc-preview-type--hero_interior .dc-preview-interior-hero p{
    max-width:650px;
    font-size:clamp(.96rem,1.25vw,1.04rem);
    line-height:1.62;
}

/* Normal page sections use an editorial rhythm instead of repeating hero scale. */
.dc-live-preview :where(
    .dc-preview-type--text_image,
    .dc-preview-type--feature_grid,
    .dc-preview-type--faq,
    .dc-preview-type--related_pages,
    .dc-preview-type--service_grid,
    .dc-preview-type--process_steps,
    .dc-preview-type--offer,
    .dc-preview-type--call_to_action
){
    padding-block:var(--dc-section-y);
}
.dc-preview-split{
    gap:clamp(26px,3.5vw,42px);
}
.dc-preview-split h2,
.dc-preview-cta h2,
.dc-preview-offer h2{
    font-size:clamp(1.7rem,3vw,2.55rem);
    line-height:1.08;
}

/* Service conversions remain premium while fitting naturally in interior pages. */
.dc-preview-type--request_service,
.dc-preview-type--book_appointment{
    overflow:clip;
}
:is(.dc-service-request,.dc-book-appointment){
    gap:clamp(24px,3vw,36px);
}
:is(.dc-service-request-copy,.dc-book-appointment-copy) h2{
    font-size:clamp(1.65rem,2.7vw,2.3rem);
}
:is(.dc-service-request-media,.dc-book-appointment-media){
    min-height:clamp(230px,25vw,320px);
}

/* Communication Center renderer-owned styles are complete; these rules close
   responsive containment and proportion gaps without replacing that authority. */
.dc-cc27,
.dc-cc27-inner,
.dc-cc27-heading,
.dc-cc27-primary,
.dc-cc27-card,
.dc-cc27-secondary{
    min-width:0;
    max-width:100%;
}
.dc-cc27 :where(h2,h3,p,button,label,small){
    overflow-wrap:anywhere;
}

@media(max-width:900px){
    .dc-site-header{
        grid-template-columns:minmax(0,1fr) auto;
        gap:16px;
        padding-inline:20px;
    }
    .dc-site-header nav{
        display:none;
    }
    .dc-preview-hero,
    .dc-preview-split{
        grid-template-columns:minmax(0,1fr);
    }
    .dc-preview-hero{
        min-height:0;
        gap:32px;
        padding-block:clamp(48px,7vw,64px);
    }
    :is(.dc-service-request,.dc-book-appointment),
    :is(.dc-service-request--form_left,.dc-book-appointment--form_left){
        grid-template-columns:minmax(0,1fr);
    }
    :is(.dc-service-request-teaser,.dc-book-appointment-teaser){
        grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
        gap:24px;
    }
    :is(.dc-service-request-media,.dc-book-appointment-media){
        min-height:220px;
    }
}

@media(max-width:620px){
    .dc-site-header{
        min-height:70px;
        padding-inline:12px;
    }
    .dc-site-brand-copy small{
        display:none;
    }
    .dc-site-header .dc-site-button--small{
        display:none;
    }
    .dc-global-header-utility{
        display:none;
    }
    .dc-global-header-main,
    .dc-global-header--standard .dc-global-header-main,
    .dc-global-header--centered .dc-global-header-main,
    .dc-global-header--compact .dc-global-header-main{
        width:calc(100% - 24px);
        min-width:0;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-rows:auto auto;
        gap:10px 12px;
        padding-block:11px;
    }
    .dc-global-header .dc-site-brand{
        min-width:0;
        grid-column:1;
        grid-row:1;
        justify-self:start;
    }
    .dc-global-header .dc-site-brand-copy{
        min-width:0;
    }
    .dc-global-header .dc-site-brand-copy strong{
        display:block;
        overflow:hidden;
        font-size:.88rem;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .dc-global-header .dc-site-button,
    .dc-global-header .dc-site-button--small{
        display:inline-flex;
        width:auto;
        min-height:40px;
        grid-column:2;
        grid-row:1;
        justify-self:end;
        padding-inline:13px;
    }
    .dc-global-header .dc-global-primary-nav{
        display:flex;
        width:100%;
        min-width:0;
        grid-column:1 / -1;
        grid-row:2;
        justify-self:stretch;
        justify-content:flex-start;
        gap:6px;
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:none;
    }
    .dc-global-header .dc-global-primary-nav::-webkit-scrollbar{
        display:none;
    }
    .dc-global-header .dc-global-primary-nav a{
        min-height:38px;
        flex:0 0 auto;
        padding-inline:12px;
        border-radius:999px;
        background:rgba(255,255,255,.07);
        font-size:.82rem;
    }
    .dc-preview-type--hero_interior .dc-preview-interior-hero{
        min-height:0;
        padding-block:34px 38px;
    }
    .dc-preview-type--hero_interior .dc-preview-interior-hero h1{
        margin-block:8px 11px;
        font-size:clamp(2rem,10.5vw,2.45rem);
        line-height:1.04;
    }
    .dc-preview-type--hero_interior .dc-preview-interior-hero p{
        font-size:.96rem;
        line-height:1.58;
    }
    .dc-preview-hero{
        gap:24px;
        padding-block:42px;
    }
    .dc-preview-hero h1{
        font-size:clamp(2.2rem,11vw,3rem);
    }
    .dc-preview-media-card,
    .dc-preview-image-placeholder{
        min-height:210px;
    }
    .dc-live-preview :where(
        .dc-preview-type--text_image,
        .dc-preview-type--feature_grid,
        .dc-preview-type--faq,
        .dc-preview-type--related_pages,
        .dc-preview-type--service_grid,
        .dc-preview-type--process_steps,
        .dc-preview-type--offer,
        .dc-preview-type--call_to_action
    ){
        padding-block:30px;
    }
    .dc-preview-card-grid,
    .dc-preview-feature-grid,
    .dc-preview-steps,
    .dc-preview-communication-grid,
    .dc-preview-cta,
    .dc-preview-offer,
    .dc-site-footer{
        grid-template-columns:minmax(0,1fr);
    }
    :is(.dc-service-request-teaser,.dc-book-appointment-teaser){
        grid-template-columns:minmax(0,1fr);
        gap:18px;
    }
    :is(.dc-service-request-media,.dc-book-appointment-media){
        min-height:175px;
    }
    .dc-live-preview .dc-cc27{
        padding:38px 12px;
    }
    .dc-live-preview .dc-cc27-heading{
        margin-bottom:20px;
    }
    .dc-live-preview .dc-cc27-heading h2{
        font-size:clamp(1.8rem,9vw,2.35rem);
        line-height:1.04;
    }
    .dc-live-preview .dc-cc27-card{
        min-height:0;
        padding:22px 20px;
        border-radius:18px;
    }
    .dc-live-preview .dc-cc27-card h3{
        margin-top:24px;
        font-size:1.45rem;
    }
    .dc-live-preview .dc-cc27-card button{
        min-height:44px;
        margin-top:18px;
    }
    .dc-live-preview .dc-cc27-secondary{
        padding:18px 20px;
        border-radius:18px;
    }
}

/* =========================================================
   SURFLOCAL TEXT IMAGE AUTHORITATIVE VARIANTS
   component['variant'] is the physical Text + Image layout authority.
   ========================================================= */
.dc-preview-split--image_right{
    grid-template-columns:minmax(0,1fr) minmax(310px,.8fr);
}
.dc-preview-split--image_right > :first-child{order:1;}
.dc-preview-split--image_right > :last-child{order:2;}

.dc-preview-split--image_left{
    grid-template-columns:minmax(310px,.8fr) minmax(0,1fr);
}
.dc-preview-split--image_left > :first-child{order:2;}
.dc-preview-split--image_left > :last-child{order:1;}

.dc-preview-split--image_top{
    grid-template-columns:minmax(0,1fr);
}
.dc-preview-split--image_top > :first-child{order:2;}
.dc-preview-split--image_top > :last-child{order:1;}

@media(max-width:900px){
    .dc-preview-split--image_right,
    .dc-preview-split--image_left,
    .dc-preview-split--image_top{
        grid-template-columns:minmax(0,1fr);
    }
}
/* END SURFLOCAL TEXT IMAGE AUTHORITATIVE VARIANTS */


/* ==========================================================
   SURFLOCAL HOMEPAGE HERO AUTHORITATIVE VARIANTS
   ========================================================== */

/* Image Right is the normal two-column presentation. */
.dc-preview-hero--split_image_right{
    grid-template-columns:minmax(0,1.05fr) minmax(330px,.8fr);
}

/* Image Left reverses the visual relationship. */
.dc-preview-hero--split_image_left{
    grid-template-columns:minmax(330px,.8fr) minmax(0,1.05fr);
}

.dc-preview-hero--split_image_left .dc-preview-media-card{
    grid-column:1;
    grid-row:1;
}

.dc-preview-hero--split_image_left .dc-preview-hero-copy{
    grid-column:2;
    grid-row:1;
}

/* Full Width Media becomes a true full-width visual presentation. */
.dc-preview-hero--full_width_media{
    grid-template-columns:1fr;
    gap:32px;
}

.dc-preview-hero--full_width_media .dc-preview-media-card{
    grid-column:1;
    grid-row:1;
    width:100%;
    min-height:clamp(360px,38vw,520px);
}

.dc-preview-hero--full_width_media .dc-preview-hero-copy{
    grid-column:1;
    grid-row:2;
    max-width:820px;
}

/* Preview tablet/mobile must never create an implicit second column. */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-hero--split_image_left,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-hero--split_image_left{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-hero--split_image_left .dc-preview-media-card,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-hero--split_image_left .dc-preview-hero-copy,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-hero--split_image_left .dc-preview-media-card,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-hero--split_image_left .dc-preview-hero-copy{
    grid-column:1;
    grid-row:auto;
}

@media (max-width:820px){
    .dc-preview-hero--split_image_left{
        grid-template-columns:1fr;
    }

    .dc-preview-hero--split_image_left .dc-preview-media-card,
    .dc-preview-hero--split_image_left .dc-preview-hero-copy{
        grid-column:1;
        grid-row:auto;
    }

    .dc-preview-hero--full_width_media .dc-preview-media-card{
        min-height:280px;
    }
}

/* ==========================================================
   SURFLOCAL INTERIOR HERO AUTHORITATIVE VARIANTS
   ========================================================== */

.dc-preview-interior-hero-copy{
    min-width:0;
}

/* Standard remains the clean text-led interior title. */
.dc-preview-interior-hero--standard{
    grid-template-columns:1fr;
}

/* Media Top places a wide visual above the page introduction. */
.dc-preview-interior-hero--media_top{
    grid-template-columns:1fr;
    gap:28px;
}

.dc-preview-interior-hero--media_top .dc-preview-interior-media{
    min-height:clamp(220px,25vw,330px);
}

/* Media Side creates a true two-column interior hero. */
.dc-preview-interior-hero--media_side{
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
    align-items:center;
    gap:42px;
}

.dc-preview-interior-media{
    min-height:240px;
    display:grid;
    place-content:center;
    gap:7px;
    padding:28px;
    border:1px solid rgba(125,211,252,.24);
    border-radius:24px;
    color:#7dd3fc;
    text-align:center;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(125,211,252,.08)
        );
    box-shadow:0 24px 48px rgba(0,0,0,.18);
}

.dc-preview-interior-media span{
    font-size:.66rem;
    font-weight:950;
    letter-spacing:.1em;
}

.dc-preview-interior-media strong{
    color:#fff;
    font-size:1.22rem;
}

.dc-preview-interior-media small{
    color:#c3d8e8;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-interior-hero--media_side,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-interior-hero--media_side{
    grid-template-columns:1fr;
}

@media (max-width:820px){
    .dc-preview-interior-hero--media_side{
        grid-template-columns:1fr;
        gap:24px;
    }

    .dc-preview-interior-hero--media_top{
        gap:22px;
    }

    .dc-preview-interior-media{
        min-height:210px;
    }
}

/* ==========================================================
   SURFLOCAL SERVICE GRID AUTHORITATIVE VARIANTS
   ========================================================== */

/* 3 Column */
.dc-preview-card-grid--three_column{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

/* 2 Column */
.dc-preview-card-grid--two_column{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Featured First:
   first service becomes the lead card;
   remaining two sit below it. */
.dc-preview-card-grid--featured_first{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-preview-card-grid--featured_first .dc-preview-card:first-child{
    grid-column:1 / -1;
    min-height:280px;
    display:grid;
    align-content:center;
    padding:clamp(30px,4vw,44px);
}

.dc-preview-card-grid--featured_first .dc-preview-card:first-child h3{
    max-width:680px;
    font-size:clamp(1.35rem,2.5vw,1.75rem);
}

.dc-preview-card-grid--featured_first .dc-preview-card:first-child p{
    max-width:760px;
}

/* Tablet preview */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-card-grid--three_column,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-card-grid--two_column,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-card-grid--featured_first{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Mobile preview */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-card-grid--three_column,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-card-grid--two_column,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-card-grid--featured_first{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-card-grid--featured_first .dc-preview-card:first-child{
    grid-column:auto;
    min-height:0;
}

/* Public responsive fallback */
@media (max-width:820px){
    .dc-preview-card-grid--three_column,
    .dc-preview-card-grid--two_column,
    .dc-preview-card-grid--featured_first{
        grid-template-columns:1fr;
    }

    .dc-preview-card-grid--featured_first .dc-preview-card:first-child{
        grid-column:auto;
        min-height:0;
    }
}

/* ==========================================================
   SURFLOCAL FEATURE GRID AUTHORITATIVE VARIANTS
   ========================================================== */

/* 3 Column */
.dc-preview-feature-grid--three_column{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.dc-preview-feature-grid--three_column .dc-preview-feature > span{
    display:none;
}

/* 4 Column */
.dc-preview-feature-grid--four_column{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.dc-preview-feature-grid--four_column .dc-preview-feature{
    display:block;
}

.dc-preview-feature-grid--four_column .dc-preview-feature > span{
    display:none;
}

.dc-preview-feature-grid--four_column .dc-preview-feature h3{
    margin-top:0;
}

/* Numbered gives the sequence numbers visual importance. */
.dc-preview-feature-grid--numbered{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-preview-feature-grid--numbered .dc-preview-feature{
    padding:clamp(26px,3vw,34px);
}

.dc-preview-feature-grid--numbered .dc-preview-feature > span{
    width:48px;
    height:48px;
    border-radius:999px;
    font-size:.82rem;
}

/* Tablet */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-feature-grid--three_column,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-feature-grid--four_column,
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-feature-grid--numbered{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Mobile */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-feature-grid--three_column,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-feature-grid--four_column,
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-feature-grid--numbered{
    grid-template-columns:1fr;
}

@media (max-width:820px){
    .dc-preview-feature-grid--three_column,
    .dc-preview-feature-grid--four_column,
    .dc-preview-feature-grid--numbered{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   SURFLOCAL PROCESS STEPS AUTHORITATIVE VARIANTS
   ========================================================== */

/* Horizontal — classic three-step progression. */
.dc-preview-steps--horizontal{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Vertical — one clear step per row. */
.dc-preview-steps--vertical{
    grid-template-columns:1fr;
    max-width:820px;
}

.dc-preview-steps--vertical .dc-preview-step{
    min-height:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:22px;
    align-items:start;
    border-top:0;
    border-left:4px solid #0878c9;
    border-radius:0 18px 18px 0;
}

.dc-preview-steps--vertical .dc-preview-step > span{
    grid-column:1;
    grid-row:1 / span 2;
}

.dc-preview-steps--vertical .dc-preview-step h3,
.dc-preview-steps--vertical .dc-preview-step p{
    grid-column:2;
}

.dc-preview-steps--vertical .dc-preview-step h3{
    margin-top:0;
}

/* Timeline — connected vertical progression. */
.dc-preview-steps--timeline{
    position:relative;
    grid-template-columns:1fr;
    max-width:860px;
    gap:0;
    padding-left:58px;
}

.dc-preview-steps--timeline::before{
    content:"";
    position:absolute;
    left:18px;
    top:18px;
    bottom:18px;
    width:2px;
    background:linear-gradient(
        to bottom,
        #0878c9,
        #10a8c7
    );
}

.dc-preview-steps--timeline .dc-preview-step{
    position:relative;
    min-height:0;
    margin-bottom:22px;
    border-top:0;
    border-radius:18px;
}

.dc-preview-steps--timeline .dc-preview-step:last-child{
    margin-bottom:0;
}

.dc-preview-steps--timeline .dc-preview-step > span{
    position:absolute;
    left:-66px;
    top:22px;
    z-index:1;
    box-shadow:0 0 0 6px #f4f8fc;
}

/* Tablet */
.dc-preview-canvas[data-preview-mode="tablet"] .dc-preview-steps--horizontal{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Mobile */
.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-steps--horizontal{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-steps--vertical .dc-preview-step{
    grid-template-columns:auto minmax(0,1fr);
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-steps--timeline{
    padding-left:46px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-steps--timeline::before{
    left:15px;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-preview-steps--timeline .dc-preview-step > span{
    left:-58px;
}

/* Public responsive fallback */
@media (max-width:820px){
    .dc-preview-steps--horizontal{
        grid-template-columns:1fr;
    }

    .dc-preview-steps--timeline{
        padding-left:46px;
    }

    .dc-preview-steps--timeline::before{
        left:15px;
    }

    .dc-preview-steps--timeline .dc-preview-step > span{
        left:-58px;
    }
}

/* === SurfLocal Inventory Alignment Authority v1 START === */

/*
 * Reduced inventory sets remain inside the standard
 * Website OS content boundary and center themselves.
 */

.dc-inventory--count-1 .dc-inventory-grid{
    grid-template-columns:minmax(0,440px);
    justify-content:center;
    margin-inline:auto;
}

.dc-inventory--count-2 .dc-inventory-grid{
    grid-template-columns:repeat(2,minmax(0,380px));
    justify-content:center;
    margin-inline:auto;
}

@media(max-width:820px){
    .dc-inventory--count-1 .dc-inventory-grid,
    .dc-inventory--count-2 .dc-inventory-grid{
        width:100%;
    }
}

@media(max-width:580px){
    .dc-inventory--count-1 .dc-inventory-grid,
    .dc-inventory--count-2 .dc-inventory-grid{
        grid-template-columns:1fr;
        width:100%;
    }
}

/* === SurfLocal Inventory Alignment Authority v1 END === */

/* === SurfLocal Pricing Alignment Authority v1 START === */

/*
 * Reduced pricing sets center themselves inside the
 * standard Website OS content boundary.
 */

.dc-pricing--count-1 .dc-pricing-grid{
    grid-template-columns:minmax(0,720px);
    justify-content:center;
    margin-inline:auto;
}

.dc-pricing--count-2 .dc-pricing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(100%,960px);
    justify-content:center;
    margin-inline:auto;
}

@media(max-width:820px){
    .dc-pricing--count-1 .dc-pricing-grid,
    .dc-pricing--count-2 .dc-pricing-grid{
        width:100%;
    }
}

@media(max-width:580px){
    .dc-pricing--count-1 .dc-pricing-grid,
    .dc-pricing--count-2 .dc-pricing-grid{
        grid-template-columns:1fr;
        width:100%;
    }
}

/* === SurfLocal Pricing Alignment Authority v1 END === */

/* === SurfLocal Product Trailer No-Media Alignment v1 START === */

/*
 * Product Card and Trailer Showcase keep their normal
 * outer page boundary. When no media exists, the reduced
 * content column centers itself instead of sitting left.
 */

.dc-product:not(:has(.dc-commerce-media-target > *)),
.dc-trailer:not(:has(.dc-commerce-media-target > *)){
    grid-template-columns:minmax(0,min(100%,760px));
    justify-content:center;
}

@media(max-width:820px){
    .dc-product:not(:has(.dc-commerce-media-target > *)),
    .dc-trailer:not(:has(.dc-commerce-media-target > *)){
        grid-template-columns:1fr;
    }
}

/* === SurfLocal Product Trailer No-Media Alignment v1 END === */

/* === SurfLocal Trailer Showcase Flagship v2 START === */

/*
 * Trailer Showcase is a complete vehicle/product-detail
 * presentation. The first image is the hero. Remaining images
 * become a compact customer-facing thumbnail gallery.
 */

.dc-preview-type--trailer_showcase > .dc-trailer{
    display:block;
    width:min(
        var(--dc-theme-content-width,1180px),
        calc(100% - 44px)
    );
    max-width:1180px;
    margin-inline:auto;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.10);
    border-radius:clamp(22px,2.4vw,32px);
    background:var(--dc-theme-surface,#fff);
    box-shadow:
        0 24px 70px rgba(15,23,42,.09),
        0 2px 8px rgba(15,23,42,.04);
}

.dc-trailer-top{
    display:grid;
    grid-template-columns:
        minmax(0,1.16fr)
        minmax(330px,.84fr);
    align-items:stretch;
    min-width:0;
}

.dc-trailer--featured .dc-trailer-top{
    grid-template-columns:
        minmax(0,1.28fr)
        minmax(330px,.72fr);
}

.dc-trailer-media-panel{
    min-width:0;
    padding:clamp(16px,2vw,24px);
    background:
        linear-gradient(
            180deg,
            rgba(241,245,249,.96),
            rgba(248,250,252,.99)
        );
    border-right:1px solid rgba(15,23,42,.08);
}

.dc-trailer .dc-commerce-media-target{
    width:100%;
    min-width:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
}

.dc-trailer-product-media{
    display:grid;
    gap:14px;
    width:100%;
    min-width:0;
}

.dc-trailer-hero-stage{
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    min-height:clamp(360px,40vw,560px);
    overflow:hidden;
    border:1px solid rgba(15,23,42,.08);
    border-radius:clamp(16px,1.7vw,22px);
    background:#fff;
}

.dc-trailer-hero-slide{
    width:100%;
    height:100%;
    margin:0;
    place-items:center;
}

.dc-trailer-hero-slide.is-active{
    display:grid;
}

.dc-trailer-hero-slide[hidden]{
    display:none !important;
}

.dc-trailer-hero-slide img,
.dc-trailer .dc-commerce-media-target > img{
    display:block;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:560px !important;
    margin:auto;
    object-fit:contain !important;
    object-position:center !important;
}

.dc-trailer-thumbnails{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    width:100%;
}

.dc-trailer-thumb{
    appearance:none;
    display:grid;
    place-items:center;
    min-width:0;
    height:82px;
    padding:5px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.12);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.dc-trailer-thumb:hover{
    transform:translateY(-1px);
}

.dc-trailer-thumb.is-active{
    border-color:var(--dc-theme-accent,#0878c9);
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--dc-theme-accent,#0878c9) 18%,
            transparent
        );
}

.dc-trailer-thumb img{
    display:block;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
}

.dc-trailer-summary{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-width:0;
    padding:
        clamp(30px,4vw,54px)
        clamp(28px,4vw,52px);
}

.dc-trailer-summary .dc-site-eyebrow{
    margin-bottom:13px;
}

.dc-trailer-availability{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    margin-bottom:16px;
    padding:6px 11px;
    border:1px solid
        color-mix(
            in srgb,
            var(--dc-theme-accent,#0878c9) 25%,
            transparent
        );
    border-radius:999px;
    color:var(--dc-theme-accent,#0878c9);
    background:
        color-mix(
            in srgb,
            var(--dc-theme-accent,#0878c9) 7%,
            transparent
        );
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.dc-trailer-summary h2{
    margin:0;
    color:var(--dc-theme-text,#15233a);
    font-size:clamp(2rem,4vw,3.35rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.dc-trailer-price{
    margin:18px 0 0;
    color:var(--dc-theme-text,#15233a);
    font-size:clamp(1.7rem,3vw,2.5rem);
    font-weight:850;
    line-height:1;
    letter-spacing:-.035em;
}

.dc-trailer-description{
    max-width:54ch;
    margin:22px 0 0;
    color:var(--dc-theme-muted,#65758b);
    font-size:clamp(.96rem,1.3vw,1.08rem);
    line-height:1.7;
}

.dc-trailer-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
    margin-top:28px;
}

.dc-trailer-buy-now,
.dc-trailer-inquiry{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 20px;
    border-radius:999px;
    font-size:.84rem;
    font-weight:800;
    line-height:1.1;
    text-decoration:none;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.dc-trailer-buy-now{
    color:#fff;
    border:1px solid var(--dc-theme-accent,#0878c9);
    background:var(--dc-theme-accent,#0878c9);
    box-shadow:
        0 10px 24px
        color-mix(
            in srgb,
            var(--dc-theme-accent,#0878c9) 22%,
            transparent
        );
}

.dc-trailer-inquiry{
    color:var(--dc-theme-text,#15233a);
    border:1px solid rgba(15,23,42,.13);
    background:transparent;
}

.dc-trailer-buy-now:hover,
.dc-trailer-inquiry:hover{
    transform:translateY(-1px);
}

.dc-trailer-details{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    border-top:1px solid rgba(15,23,42,.09);
    background:
        color-mix(
            in srgb,
            var(--dc-theme-surface,#fff) 96%,
            #f1f5f9
        );
}

.dc-trailer-features,
.dc-trailer-specs{
    min-width:0;
    margin:0;
    padding:
        clamp(28px,4vw,48px)
        clamp(28px,4vw,52px);
}

.dc-trailer-features + .dc-trailer-specs{
    border-left:1px solid rgba(15,23,42,.09);
}

.dc-trailer-detail-kicker{
    display:block;
    margin-bottom:8px;
    color:var(--dc-theme-accent,#0878c9);
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dc-trailer-features h3,
.dc-trailer-specs h3{
    margin:0 0 20px;
    color:var(--dc-theme-text,#15233a);
    font-size:clamp(1.35rem,2vw,1.8rem);
    letter-spacing:-.025em;
}

.dc-trailer-features ul{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 22px;
    margin:0;
    padding:0;
    list-style:none;
}

.dc-trailer-features li{
    position:relative;
    padding-left:24px;
    color:var(--dc-theme-text,#15233a);
    line-height:1.55;
}

.dc-trailer-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--dc-theme-accent,#0878c9);
    font-weight:900;
}

.dc-trailer-specs dl{
    display:grid;
    gap:0;
    margin:0;
}

.dc-trailer-spec-row{
    display:grid;
    grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);
    gap:16px;
    padding:11px 0;
    border-bottom:1px solid rgba(15,23,42,.08);
}

.dc-trailer-spec-row:last-child{
    border-bottom:0;
}

.dc-trailer-spec-row dt{
    color:var(--dc-theme-muted,#65758b);
    font-size:.82rem;
    font-weight:700;
}

.dc-trailer-spec-row dd{
    min-width:0;
    margin:0;
    color:var(--dc-theme-text,#15233a);
    font-size:.86rem;
    font-weight:750;
    overflow-wrap:anywhere;
}

/*
 * Tablet preview and real responsive fallback.
 */
@media(max-width:900px){
    .dc-preview-type--trailer_showcase > .dc-trailer{
        width:min(100% - 32px,760px);
    }

    .dc-trailer-top,
    .dc-trailer--featured .dc-trailer-top{
        grid-template-columns:1fr;
    }

    .dc-trailer-media-panel{
        border-right:0;
        border-bottom:1px solid rgba(15,23,42,.08);
    }

    .dc-trailer-hero-stage{
        min-height:320px;
    }

    .dc-trailer-summary{
        padding:32px;
    }

    .dc-trailer-details{
        grid-template-columns:1fr;
    }

    .dc-trailer-features + .dc-trailer-specs{
        border-left:0;
        border-top:1px solid rgba(15,23,42,.09);
    }
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-preview-type--trailer_showcase > .dc-trailer{
    width:min(100% - 32px,760px);
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-trailer-top,
.dc-preview-canvas[data-preview-mode="tablet"]
.dc-trailer--featured .dc-trailer-top{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-trailer-details{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-trailer-features + .dc-trailer-specs{
    border-left:0;
    border-top:1px solid rgba(15,23,42,.09);
}

/*
 * Mobile.
 */
@media(max-width:580px){
    .dc-preview-type--trailer_showcase > .dc-trailer{
        width:calc(100% - 24px);
        border-radius:20px;
    }

    .dc-trailer-media-panel{
        padding:10px;
    }

    .dc-trailer-hero-stage{
        min-height:240px;
        border-radius:14px;
    }

    .dc-trailer-thumbnails{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
    }

    .dc-trailer-thumb{
        height:62px;
        padding:3px;
        border-radius:9px;
    }

    .dc-trailer-summary{
        padding:26px 22px 30px;
    }

    .dc-trailer-summary h2{
        font-size:clamp(1.8rem,9vw,2.45rem);
    }

    .dc-trailer-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .dc-trailer-buy-now,
    .dc-trailer-inquiry{
        width:100%;
    }

    .dc-trailer-features,
    .dc-trailer-specs{
        padding:28px 22px;
    }

    .dc-trailer-features ul{
        grid-template-columns:1fr;
    }

    .dc-trailer-spec-row{
        grid-template-columns:1fr;
        gap:4px;
    }
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-type--trailer_showcase > .dc-trailer{
    width:calc(100% - 24px);
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-trailer-top,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-trailer--featured .dc-trailer-top,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-trailer-details{
    grid-template-columns:1fr;
}

/* === SurfLocal Trailer Showcase Flagship v2 END === */


/* === SurfLocal Trailer Buy Now Price Row v1 START ===
   Universal hosted-checkout button owned and styled by SurfLocal. */

.dc-trailer-price-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 16px;
    width:100%;
    margin-top:18px;
}

.dc-trailer-price-row .dc-trailer-price{
    flex:0 1 auto;
    margin:0;
}

.dc-trailer-price-row .dc-trailer-buy-now{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 18px;
    white-space:nowrap;
}

.dc-trailer-description{
    margin-top:18px;
}

.dc-trailer-actions{
    margin-top:20px;
}

@media(max-width:580px){
    .dc-trailer-price-row{
        gap:10px 12px;
    }

    .dc-trailer-price-row .dc-trailer-buy-now{
        width:auto;
        min-height:40px;
        padding:9px 16px;
    }
}

/* === SurfLocal Trailer Buy Now Price Row v1 END === */


/* === SurfLocal Trailer Featured Layout Authority v1 START ===
   Gallery = side-by-side sales layout.
   Featured = large full-width product presentation. */

@media(min-width:901px){

    /*
     * FEATURED:
     * Hero gallery owns the full width.
     * Product information follows underneath.
     */
    .dc-trailer--featured .dc-trailer-top{
        grid-template-columns:1fr !important;
    }

    .dc-trailer--featured .dc-trailer-media-panel{
        border-right:0 !important;
        border-bottom:1px solid rgba(15,23,42,.09);
        padding:
            clamp(18px,2.5vw,30px)
            clamp(18px,3vw,36px)
            clamp(20px,2.8vw,34px);
    }

    .dc-trailer--featured .dc-trailer-product-media{
        width:100%;
        max-width:1080px;
        margin:0 auto;
    }

    .dc-trailer--featured .dc-trailer-hero-stage{
        min-height:clamp(470px,52vw,690px);
    }

    .dc-trailer--featured .dc-trailer-hero-slide img,
    .dc-trailer--featured .dc-commerce-media-target > img{
        max-height:670px !important;
    }

    /*
     * Thumbnail rail becomes a wider horizontal product strip.
     */
    .dc-trailer--featured .dc-trailer-thumbnails{
        grid-template-columns:repeat(8,minmax(0,1fr));
        max-width:980px;
        margin:0 auto;
    }

    .dc-trailer--featured .dc-trailer-thumb{
        height:92px;
    }

    /*
     * Sales summary becomes a centered presentation below the hero.
     */
    .dc-trailer--featured .dc-trailer-summary{
        align-items:center;
        text-align:center;
        padding:
            clamp(34px,4vw,50px)
            clamp(36px,7vw,92px)
            clamp(38px,4.5vw,56px);
    }

    .dc-trailer--featured .dc-trailer-summary h2{
        max-width:900px;
    }

    .dc-trailer--featured .dc-trailer-description{
        max-width:72ch;
    }

    .dc-trailer--featured .dc-trailer-price-row{
        justify-content:center;
    }

    .dc-trailer--featured .dc-trailer-actions{
        justify-content:center;
    }

    /*
     * Keep the lower Features / Specifications area structured
     * as the two-column information section.
     */
    .dc-trailer--featured .dc-trailer-details{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* === SurfLocal Trailer Featured Layout Authority v1 END === */



/* === SurfLocal Trailer Featured Dense Spacing v1 START ===
   Preserve the large Featured hero while removing excess whitespace. */

.dc-trailer--featured .dc-trailer-media-panel{
    padding:12px 14px 14px !important;
}

.dc-trailer--featured .dc-trailer-product-media{
    gap:8px;
}

.dc-trailer--featured .dc-trailer-thumbnails{
    gap:7px;
}

.dc-trailer--featured .dc-trailer-summary{
    padding:16px 24px 20px !important;
}

.dc-trailer--featured .dc-trailer-summary .dc-site-eyebrow{
    margin-bottom:6px;
}

.dc-trailer--featured .dc-trailer-availability{
    margin-bottom:8px;
}

.dc-trailer--featured .dc-trailer-price-row{
    margin-top:9px;
}

.dc-trailer--featured .dc-trailer-description{
    margin-top:9px;
    line-height:1.55;
}

.dc-trailer--featured .dc-trailer-actions{
    margin-top:10px;
}

.dc-trailer--featured .dc-trailer-features,
.dc-trailer--featured .dc-trailer-specs{
    padding:18px 24px !important;
}

.dc-trailer--featured .dc-trailer-detail-kicker{
    margin-bottom:4px;
}

.dc-trailer--featured .dc-trailer-features h3,
.dc-trailer--featured .dc-trailer-specs h3{
    margin-bottom:10px;
}

@media(max-width:900px){

    .dc-trailer--featured .dc-trailer-media-panel{
        padding:10px !important;
    }

    .dc-trailer--featured .dc-trailer-summary{
        padding:18px 22px !important;
    }

    .dc-trailer--featured .dc-trailer-features,
    .dc-trailer--featured .dc-trailer-specs{
        padding:18px 22px !important;
    }
}

/* === SurfLocal Trailer Featured Dense Spacing v1 END === */

/* === SurfLocal Video Gallery Visual Authority v2 START === */

/*
 * One visual authority for:
 *   Grid
 *   Carousel
 *   Featured
 *
 * Progressive enhancement creates the large inline viewer for
 * Grid and Carousel. Featured retains its purpose-built split
 * composition.
 */

.dc-video-gallery{
    position:relative;
    padding-block:clamp(34px,5vw,62px);
    overflow:clip;
}

.dc-video-gallery-inner{
    width:min(1180px,calc(100% - 32px));
    margin-inline:auto;
}

.dc-video-heading{
    width:min(760px,100%);
    margin:0 auto clamp(22px,3vw,30px);
    text-align:center;
}

.dc-video-heading .dc-eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    margin-bottom:8px;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.dc-video-heading h2{
    margin:0;
    font-size:clamp(2rem,4.2vw,3.35rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.dc-video-heading > p{
    width:min(680px,100%);
    margin:13px auto 0;
    color:var(--dc-theme-muted);
    font-size:clamp(.96rem,1.45vw,1.08rem);
    line-height:1.62;
}

/* ----------------------------------------------------------
   Large active viewer
   ---------------------------------------------------------- */

.dc-video-feature{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(260px,.72fr);
    min-width:0;
    overflow:hidden;
    margin-bottom:18px;
    border:var(--dc-theme-border-strength,1px) solid var(--dc-theme-border);
    border-radius:clamp(16px,2vw,22px);
    background:var(--dc-theme-surface);
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 18px 48px rgba(15,23,42,.08);
}

.dc-video-feature__stage{
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    aspect-ratio:16/9;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 42%),
        #090a0c;
}

.dc-video-feature__stage video,
.dc-video-feature__stage iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#090a0c;
}

.dc-video-feature__stage video{
    object-fit:contain;
}

.dc-video-feature__placeholder{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    color:rgba(255,255,255,.82);
    text-align:center;
}

.dc-video-feature__placeholder::before{
    content:"";
    width:68px;
    aspect-ratio:1;
    margin-bottom:12px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:
        linear-gradient(90deg,transparent 42%,rgba(255,255,255,.92) 42% 58%,transparent 58%);
    opacity:.72;
}

.dc-video-feature__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:clamp(22px,3vw,36px);
}

.dc-video-feature__kicker{
    display:block;
    margin-bottom:9px;
    color:var(--dc-theme-muted);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.dc-video-feature__copy h3{
    margin:0;
    font-size:clamp(1.45rem,2.7vw,2.15rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.dc-video-feature__copy p{
    margin:11px 0 0;
    color:var(--dc-theme-muted);
    font-size:.92rem;
    line-height:1.58;
}

.dc-video-feature__position{
    margin-top:15px;
    color:var(--dc-theme-muted);
    font-size:.72rem;
    font-weight:700;
}

.dc-video-feature__actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:18px;
}

.dc-video-feature__actions button{
    min-height:38px;
    border:var(--dc-theme-border-strength,1px) solid var(--dc-theme-border);
    border-radius:999px;
    padding:8px 14px;
    background:var(--dc-theme-surface);
    color:var(--dc-theme-primary);
    font:inherit;
    font-size:.74rem;
    font-weight:780;
    cursor:pointer;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.dc-video-feature__actions button:hover:not(:disabled){
    transform:translateY(-1px);
    background:var(--dc-theme-surface-alt);
}

.dc-video-feature__actions button[data-dc-video-feature-open]{
    border-color:var(--dc-theme-primary);
    background:var(--dc-theme-primary);
    color:var(--dc-theme-surface);
}

.dc-video-feature__actions button:disabled{
    opacity:.38;
    cursor:default;
}

/* ----------------------------------------------------------
   Library cards
   ---------------------------------------------------------- */

.dc-video-library{
    width:100%;
    min-width:0;
}

.dc-video-items{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.dc-video-item{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--dc-theme-border);
    border-radius:15px;
    background:var(--dc-theme-surface);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.dc-video-item:hover{
    transform:translateY(-2px);
    box-shadow:0 13px 30px rgba(15,23,42,.09);
}

.dc-video-item.is-active{
    border-color:var(--dc-theme-primary);
    box-shadow:
        0 0 0 1px var(--dc-theme-primary),
        0 12px 28px rgba(15,23,42,.08);
}

.dc-video-open{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    text-align:inherit;
    cursor:pointer;
}

.dc-video-poster{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 45%,rgba(255,255,255,.09),transparent 38%),
        #111318;
}

.dc-video-poster img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.dc-video-item:hover .dc-video-poster img{
    transform:scale(1.025);
}

.dc-video-poster-fallback{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 68% 24%,rgba(255,255,255,.10),transparent 24%),
        linear-gradient(145deg,#171a20,#090a0d 68%);
}

.dc-video-play{
    position:absolute;
    left:50%;
    top:50%;
    display:grid;
    place-items:center;
    width:52px;
    aspect-ratio:1;
    border:1px solid rgba(255,255,255,.42);
    border-radius:50%;
    background:rgba(8,9,12,.55);
    box-shadow:0 10px 30px rgba(0,0,0,.28);
    backdrop-filter:blur(10px);
    transform:translate(-50%,-50%);
    transition:
        transform .2s ease,
        background .2s ease;
}

.dc-video-play span{
    width:0;
    height:0;
    margin-left:4px;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:11px solid #fff;
}

.dc-video-item:hover .dc-video-play{
    background:rgba(8,9,12,.76);
    transform:translate(-50%,-50%) scale(1.06);
}

.dc-video-duration{
    position:absolute;
    right:9px;
    bottom:9px;
    padding:4px 7px;
    border-radius:6px;
    background:rgba(0,0,0,.68);
    color:#fff;
    font-size:.66rem;
    font-weight:760;
    line-height:1;
    backdrop-filter:blur(8px);
}

.dc-video-copy{
    padding:12px 13px 14px;
}

.dc-video-copy h3{
    margin:0;
    font-size:.94rem;
    line-height:1.27;
    letter-spacing:-.015em;
}

.dc-video-copy p{
    display:-webkit-box;
    margin:5px 0 0;
    overflow:hidden;
    color:var(--dc-theme-muted);
    font-size:.76rem;
    line-height:1.42;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/* A single regular-library video does not need to repeat below its stage. */
.dc-video-library--enhanced.dc-video-library--count-1 > .dc-video-items{
    display:none;
}

/* ----------------------------------------------------------
   Carousel / filmstrip
   ---------------------------------------------------------- */

.dc-video-library--carousel .dc-video-items{
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(250px,calc((100% - 28px) / 3));
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 12px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;
    scrollbar-width:thin;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
}

.dc-video-library--carousel .dc-video-item{
    scroll-snap-align:start;
}

.dc-video-library--carousel .dc-video-items::-webkit-scrollbar{
    height:6px;
}

.dc-video-library--carousel .dc-video-items::-webkit-scrollbar-track{
    background:transparent;
}

.dc-video-library--carousel .dc-video-items::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(15,23,42,.18);
}

/* ----------------------------------------------------------
   Load-more controls
   ---------------------------------------------------------- */

.dc-video-controls{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
}

.dc-video-controls button{
    min-height:40px;
    border:1px solid var(--dc-theme-border);
    border-radius:999px;
    padding:8px 16px;
    background:var(--dc-theme-surface);
    color:var(--dc-theme-primary);
    font:inherit;
    font-size:.76rem;
    font-weight:780;
    cursor:pointer;
}

.dc-video-controls button:hover{
    background:var(--dc-theme-surface-alt);
}

/* ----------------------------------------------------------
   Featured variant
   ---------------------------------------------------------- */

.dc-video-gallery--featured .dc-video-gallery-inner{
    width:min(1180px,calc(100% - 32px));
}

.dc-video-gallery--featured .dc-featured-media{
    gap:clamp(24px,4vw,48px);
    padding-block:0;
}

.dc-video-gallery--featured .dc-featured-media__visual{
    min-width:0;
}

.dc-video-gallery--featured .dc-video-library{
    overflow:hidden;
    border:1px solid var(--dc-theme-border);
    border-radius:clamp(16px,2vw,22px);
    background:var(--dc-theme-surface);
    box-shadow:0 18px 48px rgba(15,23,42,.08);
}

.dc-video-gallery--featured .dc-video-item{
    border:0;
    border-radius:0;
    box-shadow:none;
}

.dc-video-gallery--featured .dc-video-item:hover{
    transform:none;
    box-shadow:none;
}

.dc-video-gallery--featured .dc-video-copy{
    padding:14px 16px 16px;
}

.dc-video-gallery--featured .dc-featured-media__copy h2{
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.04;
    letter-spacing:-.045em;
}

.dc-video-gallery--featured .dc-featured-media__copy > p{
    margin-top:14px;
    line-height:1.62;
}

/* ----------------------------------------------------------
   Full player modal
   ---------------------------------------------------------- */

.dc-video-dialog[hidden]{
    display:none !important;
}

.dc-video-dialog{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:grid;
    place-items:center;
    padding:18px;
}

.dc-video-dialog-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(3,4,6,.76);
    backdrop-filter:blur(18px);
    cursor:pointer;
}

.dc-video-dialog-panel{
    position:relative;
    z-index:1;
    width:min(1040px,100%);
    max-height:calc(100vh - 36px);
    overflow:auto;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    background:#0b0c0f;
    color:#fff;
    box-shadow:0 28px 90px rgba(0,0,0,.48);
}

.dc-video-dialog-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:48px;
    padding:8px 11px 8px 16px;
    border-bottom:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.66);
    font-size:.75rem;
    font-weight:700;
}

.dc-video-dialog-toolbar button{
    display:grid;
    place-items:center;
    width:34px;
    aspect-ratio:1;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:1.25rem;
    cursor:pointer;
}

.dc-video-stage{
    aspect-ratio:16/9;
    background:#000;
}

.dc-video-player,
.dc-video-player video,
.dc-video-player iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#000;
}

.dc-video-player video{
    object-fit:contain;
}

.dc-video-dialog-copy{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-end;
    padding:16px 18px 18px;
}

.dc-video-dialog-copy h3{
    margin:0;
    font-size:1.1rem;
    line-height:1.25;
}

.dc-video-dialog-copy p{
    margin:5px 0 0;
    color:rgba(255,255,255,.64);
    font-size:.82rem;
    line-height:1.5;
}

.dc-video-dialog-actions{
    display:flex;
    gap:7px;
    flex:0 0 auto;
}

.dc-video-dialog-actions button{
    min-height:36px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    padding:7px 13px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font:inherit;
    font-size:.72rem;
    font-weight:750;
    cursor:pointer;
}

.dc-video-player-message{
    display:grid;
    place-items:center;
    align-content:center;
    min-height:100%;
    padding:30px;
    color:rgba(255,255,255,.76);
    text-align:center;
}

.dc-video-player-message a{
    display:inline-flex;
    margin-top:10px;
    color:#fff;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.dc-video-footer{
    display:flex;
    justify-content:center;
    margin-top:20px;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media(max-width:900px){
    .dc-video-feature{
        grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
    }

    .dc-video-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dc-video-library--carousel .dc-video-items{
        grid-auto-columns:minmax(240px,calc((100% - 14px) / 2));
    }
}

@media(max-width:720px){
    .dc-video-gallery{
        padding-block:30px;
    }

    .dc-video-gallery-inner,
    .dc-video-gallery--featured .dc-video-gallery-inner{
        width:min(100% - 20px,1180px);
    }

    .dc-video-feature{
        grid-template-columns:1fr;
        border-radius:15px;
    }

    .dc-video-feature__copy{
        padding:18px;
    }

    .dc-video-items{
        grid-template-columns:1fr;
        gap:11px;
    }

    .dc-video-library--carousel .dc-video-items{
        grid-auto-columns:minmax(250px,86%);
        gap:11px;
    }

    .dc-video-copy{
        padding:11px 12px 13px;
    }

    .dc-video-dialog{
        padding:8px;
    }

    .dc-video-dialog-panel{
        max-height:calc(100vh - 16px);
        border-radius:15px;
    }

    .dc-video-dialog-copy{
        align-items:stretch;
        flex-direction:column;
        gap:14px;
    }

    .dc-video-dialog-actions{
        width:100%;
    }

    .dc-video-dialog-actions button{
        flex:1;
    }

    .dc-video-gallery--featured .dc-featured-media,
    .dc-video-gallery--featured .dc-featured-media--right{
        grid-template-columns:1fr;
        gap:20px;
    }

    .dc-video-gallery--featured
    .dc-featured-media--right
    .dc-featured-media__visual,
    .dc-video-gallery--featured
    .dc-featured-media--right
    .dc-featured-media__copy{
        grid-column:1;
    }

    .dc-video-gallery--featured
    .dc-featured-media--right
    .dc-featured-media__visual{
        grid-row:1;
    }

    .dc-video-gallery--featured
    .dc-featured-media--right
    .dc-featured-media__copy{
        grid-row:2;
    }
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-video-feature{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="tablet"] .dc-video-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-video-library--carousel .dc-video-items{
    grid-template-columns:none;
    grid-auto-columns:minmax(240px,calc((100% - 14px) / 2));
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-video-feature{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"] .dc-video-items{
    grid-template-columns:1fr;
}

.dc-preview-canvas[data-preview-mode="mobile"]
.dc-video-library--carousel .dc-video-items{
    grid-template-columns:none;
    grid-auto-columns:minmax(250px,86%);
}

@media(prefers-reduced-motion:reduce){
    .dc-video-item,
    .dc-video-poster img,
    .dc-video-play,
    .dc-video-feature__actions button{
        transition:none;
    }
}

/* === SurfLocal Video Gallery Visual Authority v2 END === */



/* === SurfLocal Video Gallery Compact Component + Full Page Authority v3 START === */

/*
 * One spacing authority:
 * the outer Website OS component owns vertical page rhythm.
 * The renderer's internal dc-section must not add a second
 * large layer of whitespace.
 */
.dc-preview-type--video_gallery{
    padding-block:
        var(
            --dc-section-y,
            clamp(34px,4vw,52px)
        );
}

.dc-preview-type--video_gallery .dc-video-gallery{
    margin:0;
    padding:0 !important;
    background:transparent;
}

.dc-video-gallery-inner{
    width:min(
        var(--dc-theme-content-width,1180px),
        calc(100% - 44px)
    );
    margin-inline:auto;
}

.dc-video-heading{
    max-width:760px;
    margin:0 0 18px;
}

.dc-video-heading .dc-eyebrow{
    display:block;
    margin:0 0 6px;
    color:var(--dc-theme-primary);
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.dc-video-heading h2{
    margin:0;
    color:var(--dc-theme-text);
    font-size:clamp(1.65rem,2.8vw,2.35rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.dc-video-heading p{
    max-width:64ch;
    margin:9px 0 0;
    color:var(--dc-theme-muted);
    font-size:.96rem;
    line-height:1.58;
}

/* Active video viewer */
.dc-video-feature{
    display:grid;
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(240px,.65fr);
    gap:0;
    overflow:hidden;
    margin:0 0 14px;
    border:
        var(--dc-theme-border-strength,1px)
        solid
        var(--dc-theme-border);
    border-radius:
        var(--dc-theme-card-radius,18px);
    background:var(--dc-theme-surface);
    box-shadow:none;
}

.dc-video-feature__stage{
    width:100%;
    min-height:0 !important;
    max-height:420px;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:0 !important;
    background:#05080d;
}

.dc-video-feature__stage video,
.dc-video-feature__stage iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:16/9;
    object-fit:contain;
    border:0;
}

.dc-video-feature__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:18px 20px;
}

.dc-video-feature__kicker{
    color:var(--dc-theme-primary);
    font-size:.64rem;
    font-weight:850;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.dc-video-feature__copy h3{
    margin:7px 0 0;
    color:var(--dc-theme-text);
    font-size:clamp(1rem,1.6vw,1.28rem);
    line-height:1.22;
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
}

.dc-video-feature__copy p{
    display:-webkit-box;
    overflow:hidden;
    margin:8px 0 0;
    color:var(--dc-theme-muted);
    font-size:.84rem;
    line-height:1.5;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.dc-video-feature__position{
    margin-top:10px;
    color:var(--dc-theme-muted);
    font-size:.72rem;
    font-weight:750;
}

.dc-video-feature__actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
}

.dc-video-feature__actions button{
    min-height:36px;
    padding:7px 11px;
    border:
        var(--dc-theme-border-strength,1px)
        solid
        var(--dc-theme-border);
    border-radius:
        var(--dc-theme-button-radius,9px);
    background:var(--dc-theme-surface);
    color:var(--dc-theme-text);
    font:inherit;
    font-size:.76rem;
    font-weight:780;
    box-shadow:none;
    cursor:pointer;
}

.dc-video-feature__actions
button[data-dc-video-feature-open]{
    border-color:var(--dc-theme-primary);
    background:var(--dc-theme-primary);
    color:var(--dc-theme-primary-contrast,#fff);
}

/* Compact library */
.dc-video-library{
    margin:0;
}

.dc-video-items{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:12px;
}

.dc-video-item{
    min-width:0;
    overflow:hidden;
    border:
        var(--dc-theme-border-strength,1px)
        solid
        var(--dc-theme-border);
    border-radius:14px;
    background:var(--dc-theme-surface);
    box-shadow:none;
}

.dc-video-open{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

.dc-video-poster{
    display:block;
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:16/9;
    background:var(--dc-theme-surface-alt);
}

.dc-video-poster img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.dc-video-copy{
    padding:10px 11px 12px;
}

.dc-video-copy h3{
    margin:0;
    color:var(--dc-theme-text);
    font-size:.90rem;
    line-height:1.28;
    letter-spacing:-.015em;
    overflow-wrap:anywhere;
}

.dc-video-copy p{
    display:-webkit-box;
    overflow:hidden;
    margin:5px 0 0;
    color:var(--dc-theme-muted);
    font-size:.78rem;
    line-height:1.45;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.dc-video-controls,
.dc-video-footer{
    margin-top:16px;
}

/* Dedicated Videos page */
.dc-video-gallery--full-page{
    padding-top:0;
}

.dc-video-gallery--full-page
.dc-video-gallery-inner{
    padding-bottom:8px;
}

.dc-video-page-back{
    margin:0 0 16px;
}

.dc-video-page-back a{
    display:inline-flex;
    min-height:38px;
    align-items:center;
    padding:7px 12px;
    border:
        var(--dc-theme-border-strength,1px)
        solid
        var(--dc-theme-border);
    border-radius:999px;
    background:var(--dc-theme-surface);
    color:var(--dc-theme-text);
    font-size:.80rem;
    font-weight:780;
    text-decoration:none;
    box-shadow:none;
}

.dc-video-page-back a:hover{
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary) 35%,
            var(--dc-theme-border)
        );
    color:var(--dc-theme-primary);
}

.dc-video-gallery--full-page
.dc-video-heading{
    margin-bottom:20px;
}

.dc-video-gallery--full-page
.dc-video-feature__stage{
    max-height:480px;
}

/* Tablet */
@media(max-width:820px){
    .dc-video-feature{
        grid-template-columns:1fr;
    }

    .dc-video-feature__stage{
        max-height:430px;
    }

    .dc-video-feature__copy{
        padding:16px 17px;
    }

    .dc-video-items{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

/* Mobile */
@media(max-width:580px){
    .dc-preview-type--video_gallery{
        padding-block:30px;
    }

    .dc-video-gallery-inner{
        width:calc(100% - 24px);
    }

    .dc-video-heading{
        margin-bottom:15px;
    }

    .dc-video-feature{
        margin-bottom:11px;
        border-radius:12px;
    }

    .dc-video-feature__stage{
        max-height:none;
    }

    .dc-video-feature__copy{
        padding:14px;
    }

    .dc-video-items{
        grid-template-columns:1fr;
        gap:10px;
    }

    .dc-video-page-back{
        margin-bottom:13px;
    }
}

/* === SurfLocal Video Gallery Compact Component + Full Page Authority v3 END === */


/* === SurfLocal Video Gallery Premium Theme Authority v4 START === */

/*
 * Presentation only.
 * Uses the active Website OS theme variables.
 * No video, assignment, routing, or content authority lives here.
 */

.dc-preview-type--video_gallery{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 8% 0%,
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 13%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 93% 16%,
            color-mix(
                in srgb,
                var(--dc-theme-accent,#20b486) 10%,
                transparent
            ),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--dc-theme-surface-alt,#f4f8fc) 90%,
                var(--dc-theme-primary,#0878c9) 10%
            ),
            var(--dc-theme-surface,#fff)
        );
}

.dc-preview-type--video_gallery::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 0 auto;
    height:3px;
    background:
        linear-gradient(
            90deg,
            var(--dc-theme-primary,#0878c9),
            var(--dc-theme-secondary,#38bdf8),
            var(--dc-theme-accent,#20b486)
        );
}

/* Premium component shell */
.dc-video-gallery-inner{
    position:relative;
    padding:
        clamp(20px,2.7vw,30px);
    border:
        var(--dc-theme-border-strength,1px)
        solid
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 15%,
            var(--dc-theme-border,#d8e2ee)
        );
    border-radius:
        clamp(
            18px,
            2vw,
            var(--dc-theme-card-radius,24px)
        );
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--dc-theme-surface,#fff) 96%,
                var(--dc-theme-primary,#0878c9) 4%
            ),
            color-mix(
                in srgb,
                var(--dc-theme-surface,#fff) 94%,
                var(--dc-theme-accent,#20b486) 6%
            )
        );
    box-shadow:
        0 22px 60px rgba(15,39,64,.10),
        inset 0 1px 0 rgba(255,255,255,.72);
}

/* Heading */
.dc-video-heading{
    position:relative;
    padding-right:20px;
}

.dc-video-heading .dc-eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    margin-bottom:8px;
    padding:5px 9px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 22%,
            transparent
        );
    border-radius:999px;
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 8%,
            var(--dc-theme-surface,#fff)
        );
    color:var(--dc-theme-primary,#0878c9);
    line-height:1;
}

.dc-video-heading h2{
    max-width:820px;
}

.dc-video-heading p{
    max-width:720px;
}

/* Featured viewer */
.dc-video-feature{
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 22%,
            var(--dc-theme-border,#d8e2ee)
        );
    background:
        linear-gradient(
            145deg,
            var(--dc-theme-surface,#fff),
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 5%,
                var(--dc-theme-surface,#fff)
            )
        );
    box-shadow:
        0 16px 42px rgba(15,39,64,.11);
}

.dc-video-feature__stage{
    position:relative;
    background:
        radial-gradient(
            circle at 50% 18%,
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 18%,
                #05080d
            ),
            #05080d 60%
        );
}

.dc-video-feature__stage::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.055);
}

.dc-video-feature__copy{
    background:
        radial-gradient(
            circle at 100% 0%,
            color-mix(
                in srgb,
                var(--dc-theme-secondary,#38bdf8) 11%,
                transparent
            ),
            transparent 42%
        );
}

.dc-video-feature__kicker{
    display:inline-flex;
    align-self:flex-start;
    padding:4px 7px;
    border-radius:999px;
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 9%,
            transparent
        );
}

/* Featured buttons */
.dc-video-feature__actions button{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background-color .18s ease;
}

.dc-video-feature__actions button:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 35%,
            var(--dc-theme-border,#d8e2ee)
        );
    box-shadow:
        0 7px 18px rgba(15,39,64,.10);
}

.dc-video-feature__actions
button[data-dc-video-feature-open]{
    border-color:transparent;
    background:
        linear-gradient(
            135deg,
            var(--dc-theme-primary,#0878c9),
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 70%,
                var(--dc-theme-secondary,#38bdf8)
            )
        );
    box-shadow:
        0 8px 20px
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 22%,
            transparent
        );
}

/* Library cards */
.dc-video-item{
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 12%,
            var(--dc-theme-border,#d8e2ee)
        );
    background:
        linear-gradient(
            180deg,
            var(--dc-theme-surface,#fff),
            color-mix(
                in srgb,
                var(--dc-theme-surface-alt,#f4f8fc) 88%,
                var(--dc-theme-primary,#0878c9) 12%
            )
        );
    box-shadow:
        0 7px 20px rgba(15,39,64,.055);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.dc-video-item:hover{
    transform:translateY(-2px);
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 32%,
            var(--dc-theme-border,#d8e2ee)
        );
    box-shadow:
        0 14px 30px rgba(15,39,64,.10);
}

.dc-video-poster{
    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--dc-theme-border,#d8e2ee) 78%,
            transparent
        );
}

.dc-video-poster-fallback{
    display:block;
    width:100%;
    height:100%;
    background:
        radial-gradient(
            circle at 32% 22%,
            color-mix(
                in srgb,
                var(--dc-theme-secondary,#38bdf8) 22%,
                transparent
            ),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 18%,
                #07101d
            ),
            #07101d
        );
}

/* Play button */
.dc-video-play{
    width:46px;
    height:46px;
    border:
        1px solid
        rgba(255,255,255,.70);
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 88%,
            transparent
        );
    box-shadow:
        0 10px 28px rgba(7,16,29,.26);
    backdrop-filter:blur(8px);
}

.dc-video-play span{
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.dc-video-duration{
    border:
        1px solid
        rgba(255,255,255,.16);
    background:rgba(7,16,29,.76);
    backdrop-filter:blur(8px);
}

/* Card typography */
.dc-video-copy h3{
    color:var(--dc-theme-text,#15233a);
    font-weight:790;
}

.dc-video-copy p{
    color:var(--dc-theme-muted,#65758b);
}

/* Load controls */
.dc-video-more,
.dc-video-less{
    border:
        1px solid
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 24%,
            var(--dc-theme-border,#d8e2ee)
        );
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 7%,
            var(--dc-theme-surface,#fff)
        );
    color:var(--dc-theme-primary,#0878c9);
    font-weight:800;
    transition:
        transform .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.dc-video-more:hover,
.dc-video-less:hover{
    transform:translateY(-1px);
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 11%,
            var(--dc-theme-surface,#fff)
        );
    box-shadow:
        0 8px 18px rgba(15,39,64,.09);
}

/* View All Videos */
.dc-video-footer{
    padding-top:2px;
}

.dc-video-footer .dc-button{
    min-height:42px;
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 30%,
            var(--dc-theme-border,#d8e2ee)
        );
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 9%,
                var(--dc-theme-surface,#fff)
            ),
            var(--dc-theme-surface,#fff)
        );
    color:var(--dc-theme-primary,#0878c9);
    font-weight:800;
}

/* Full Videos page gets a slightly stronger presentation */
.dc-video-gallery--full-page
.dc-video-gallery-inner{
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 20%,
            var(--dc-theme-border,#d8e2ee)
        );
    background:
        radial-gradient(
            circle at 100% 0%,
            color-mix(
                in srgb,
                var(--dc-theme-secondary,#38bdf8) 8%,
                transparent
            ),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--dc-theme-surface,#fff),
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 5%,
                var(--dc-theme-surface,#fff)
            )
        );
}

/* Back control */
.dc-video-page-back a{
    border-color:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 22%,
            var(--dc-theme-border,#d8e2ee)
        );
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 6%,
            var(--dc-theme-surface,#fff)
        );
    box-shadow:
        0 5px 14px rgba(15,39,64,.06);
}

/* Modal */
.dc-video-dialog-panel{
    border:
        1px solid
        color-mix(
            in srgb,
            var(--dc-theme-primary,#0878c9) 20%,
            rgba(255,255,255,.15)
        );
    background:
        linear-gradient(
            145deg,
            var(--dc-theme-surface,#fff),
            color-mix(
                in srgb,
                var(--dc-theme-primary,#0878c9) 5%,
                var(--dc-theme-surface,#fff)
            )
        );
    box-shadow:
        0 28px 90px rgba(7,16,29,.34);
}

/* Responsive */
@media(max-width:820px){
    .dc-video-gallery-inner{
        padding:20px;
    }
}

@media(max-width:580px){
    .dc-video-gallery-inner{
        padding:16px;
        border-radius:16px;
    }

    .dc-video-heading{
        padding-right:0;
    }

    .dc-video-play{
        width:42px;
        height:42px;
    }
}

@media(prefers-reduced-motion:reduce){
    .dc-video-item,
    .dc-video-feature__actions button,
    .dc-video-more,
    .dc-video-less{
        transition:none;
    }

    .dc-video-item:hover,
    .dc-video-feature__actions button:hover,
    .dc-video-more:hover,
    .dc-video-less:hover{
        transform:none;
    }
}

/* ============================================================
   SurfLocal Image Gallery Component 2027
   Dynamic image count layout
============================================================ */

.dc-preview-type--gallery .dc-gallery{
    margin:0;
    padding:0 !important;
    background:transparent;
}

.dc-gallery-items{
    display:grid;
    gap:var(--dc-ux-component-gap);
}

.dc-gallery--count-1 .dc-gallery-items{
    grid-template-columns:minmax(0,760px);
}

.dc-gallery--count-2 .dc-gallery-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-gallery--count-3 .dc-gallery-items{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.dc-gallery--count-4 .dc-gallery-items{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.dc-gallery--count-5 .dc-gallery-items,
.dc-gallery--count-6 .dc-gallery-items{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.dc-gallery-item{
    overflow:hidden;
    border-radius:var(--dc-theme-card-radius);
    border:var(--dc-theme-border-strength) solid var(--dc-theme-border);
    background:var(--dc-theme-surface);
    box-shadow:var(--dc-theme-shadow);
}

.dc-gallery-media{
    display:block;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:var(--dc-theme-surface-alt);
}

.dc-gallery-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .25s ease;
}

.dc-gallery-item:hover img{
    transform:scale(1.04);
}

@media(max-width:900px){
    .dc-gallery--count-3 .dc-gallery-items,
    .dc-gallery--count-4 .dc-gallery-items,
    .dc-gallery--count-5 .dc-gallery-items,
    .dc-gallery--count-6 .dc-gallery-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:620px){
    .dc-gallery-items{
        grid-template-columns:1fr !important;
    }
}

/* === SurfLocal Video Gallery Premium Theme Authority v4 END === */

/* === SurfLocal Product Showcase v3 START === */

.dc-preview-type--trailer_showcase > .dc-trailer{
    display:block!important;
    width:min(1180px,calc(100% - 32px))!important;
    margin-inline:auto!important;
    overflow:hidden!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:22px!important;
    background:var(--dc-theme-surface,#fff)!important;
    box-shadow:0 16px 44px rgba(15,23,42,.08)!important;
}

.dc-trailer-top{
    display:grid!important;
    min-width:0!important;
}

.dc-trailer--featured .dc-trailer-top,
.dc-trailer--gallery .dc-trailer-top{
    grid-template-columns:1fr!important;
}

.dc-trailer--split .dc-trailer-top{
    grid-template-columns:
        minmax(0,1.2fr)
        minmax(320px,.8fr)!important;
}

.dc-trailer-media-panel{
    min-width:0!important;
    padding:10px 12px 12px!important;
    background:#f8fafc!important;
}

.dc-trailer--split .dc-trailer-media-panel{
    border-right:1px solid rgba(15,23,42,.08)!important;
}

.dc-trailer .dc-commerce-media-target{
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
}

.dc-trailer-product-media{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
}

.dc-trailer-hero-stage{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    border-radius:14px!important;
    background:#fff!important;
}

.dc-trailer-hero-slide{
    display:none!important;
    place-items:center!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
}

.dc-trailer-hero-slide.is-active{
    display:grid!important;
}

.dc-trailer-hero-slide[hidden]{
    display:none!important;
}

.dc-trailer-hero-slide img,
.dc-trailer .dc-commerce-media-target > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:640px!important;
    object-fit:contain!important;
    object-position:center!important;
}

.dc-trailer-thumbnails{
    display:grid!important;
    grid-template-columns:
        repeat(6,minmax(0,1fr))!important;
    gap:7px!important;
}

.dc-trailer-thumb{
    display:grid!important;
    place-items:center!important;
    height:72px!important;
    min-width:0!important;
    padding:3px!important;
    overflow:hidden!important;
    border:1px solid rgba(15,23,42,.14)!important;
    border-radius:9px!important;
    background:#fff!important;
    cursor:pointer!important;
}

.dc-trailer-thumb.is-active{
    border-color:var(--dc-theme-primary,#155e9d)!important;
    box-shadow:0 0 0 2px rgba(21,94,157,.14)!important;
}

.dc-trailer-thumb img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}

@media(min-width:901px){
    .dc-trailer--gallery .dc-trailer-product-media{
        grid-template-columns:minmax(0,1fr) 108px!important;
        align-items:start!important;
    }

    .dc-trailer--gallery .dc-trailer-hero-stage{
        grid-column:1!important;
        grid-row:1!important;
    }

    .dc-trailer--gallery .dc-trailer-thumbnails{
        grid-column:2!important;
        grid-row:1!important;
        grid-template-columns:1fr!important;
        max-height:640px!important;
        overflow:auto!important;
    }

    .dc-trailer--gallery .dc-trailer-thumb{
        height:82px!important;
    }
}

.dc-trailer-summary{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:16px 24px 20px!important;
}

.dc-trailer--split .dc-trailer-summary{
    padding:28px 32px!important;
}

.dc-trailer-availability{
    display:inline-flex!important;
    margin-bottom:7px!important;
    padding:5px 10px!important;
    border-radius:999px!important;
    color:var(--dc-theme-primary,#155e9d)!important;
    background:rgba(21,94,157,.07)!important;
    font-size:.72rem!important;
    font-weight:800!important;
}

.dc-trailer-summary h2{
    margin:0!important;
    font-size:clamp(1.8rem,3.5vw,3.1rem)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
}

.dc-trailer-price-row{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:10px 14px!important;
    margin-top:9px!important;
}

.dc-trailer-price{
    margin:0!important;
    font-size:clamp(1.5rem,2.5vw,2.2rem)!important;
    font-weight:850!important;
}

.dc-trailer-description{
    max-width:72ch!important;
    margin:9px 0 0!important;
    line-height:1.55!important;
}

.dc-trailer-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:9px!important;
    margin-top:10px!important;
}

.dc-trailer-buy-now,
.dc-trailer-inquiry{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:10px 18px!important;
    border-radius:8px!important;
    font-weight:800!important;
    text-decoration:none!important;
}

.dc-trailer-buy-now{
    color:#fff!important;
    background:var(--dc-theme-primary,#155e9d)!important;
}

.dc-trailer-details{
    display:grid!important;
    grid-template-columns:
        repeat(2,minmax(0,1fr))!important;
    border-top:1px solid rgba(15,23,42,.09)!important;
}

.dc-trailer-features,
.dc-trailer-specs{
    margin:0!important;
    padding:18px 24px!important;
}

.dc-trailer-features + .dc-trailer-specs{
    border-left:1px solid rgba(15,23,42,.09)!important;
}

.dc-trailer-detail-kicker{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--dc-theme-primary,#155e9d)!important;
    font-size:.68rem!important;
    font-weight:850!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
}

.dc-trailer-features h3,
.dc-trailer-specs h3{
    margin:0 0 10px!important;
}

.dc-trailer-features ul{
    display:grid!important;
    grid-template-columns:
        repeat(2,minmax(0,1fr))!important;
    gap:8px 18px!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
}

.dc-trailer-features li{
    position:relative!important;
    padding-left:20px!important;
}

.dc-trailer-features li::before{
    content:"✓"!important;
    position:absolute!important;
    left:0!important;
    color:var(--dc-theme-primary,#155e9d)!important;
    font-weight:900!important;
}

.dc-trailer-specs dl{
    margin:0!important;
}

.dc-trailer-spec-row{
    display:grid!important;
    grid-template-columns:120px minmax(0,1fr)!important;
    gap:12px!important;
    padding:8px 0!important;
    border-bottom:1px solid rgba(15,23,42,.08)!important;
}

.dc-trailer-spec-row dd{
    margin:0!important;
    font-weight:750!important;
}

@media(max-width:900px){
    .dc-trailer-top,
    .dc-trailer--split .dc-trailer-top{
        grid-template-columns:1fr!important;
    }

    .dc-trailer--split .dc-trailer-media-panel{
        border-right:0!important;
    }

    .dc-trailer--gallery .dc-trailer-product-media{
        grid-template-columns:1fr!important;
    }

    .dc-trailer-thumbnails,
    .dc-trailer--gallery .dc-trailer-thumbnails{
        grid-template-columns:
            repeat(4,minmax(0,1fr))!important;
        max-height:none!important;
        overflow:visible!important;
    }

    .dc-trailer-details{
        grid-template-columns:1fr!important;
    }

    .dc-trailer-features + .dc-trailer-specs{
        border-left:0!important;
        border-top:1px solid rgba(15,23,42,.09)!important;
    }
}

@media(max-width:580px){
    .dc-preview-type--trailer_showcase > .dc-trailer{
        width:calc(100% - 18px)!important;
        border-radius:17px!important;
    }

    .dc-trailer-media-panel{
        padding:8px!important;
    }

    .dc-trailer-summary{
        padding:15px 18px 18px!important;
    }

    .dc-trailer-thumb{
        height:58px!important;
    }

    .dc-trailer-features,
    .dc-trailer-specs{
        padding:16px 18px!important;
    }

    .dc-trailer-features ul,
    .dc-trailer-spec-row{
        grid-template-columns:1fr!important;
    }
}

/* === SurfLocal Product Showcase v3 END === */


/* ============================================================
   SURFLOCAL INVENTORY LISTING 2027
   ============================================================ */

.dc-inventory{
    width:min(100%,1280px);
    margin-inline:auto;
    padding:
        clamp(30px,4vw,54px)
        clamp(16px,2.5vw,26px);
}

.dc-inventory-grid{
    list-style:none;
    margin:0;
    padding:0;
}

.dc-inventory-item[hidden]{
    display:none!important;
}

.dc-inventory-item article{
    overflow:hidden;
    height:100%;
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 28px rgba(15,23,42,.07);
}

.dc-inventory-media{
    position:relative;
    overflow:hidden;
    background:#eef3f6;
}

/* SMART GRID */

.dc-inventory--grid .dc-inventory-grid,
.dc-inventory--featured .dc-inventory-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px,1fr)
        );
    gap:20px;
}

.dc-inventory--grid .dc-inventory-media,
.dc-inventory--featured
.dc-inventory-item:not(:first-child)
.dc-inventory-media{
    aspect-ratio:4/3;
}

.dc-inventory--grid .dc-inventory-media img,
.dc-inventory--featured
.dc-inventory-item:not(:first-child)
.dc-inventory-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.dc-inventory-body{
    padding:17px 18px 19px;
}

.dc-inventory-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    margin:0 0 8px;
}

.dc-inventory-meta span{
    color:#64748b;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.dc-inventory-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.dc-inventory-card-head h3{
    margin:0;
    color:#0f172a;
    font-size:1.08rem;
    line-height:1.22;
}

.dc-inventory-status{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:4px 8px;
    border-radius:999px;
    color:#155e75;
    background:#ecfeff;
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.dc-inventory-description{
    margin:9px 0 0;
    color:#526273;
    font-size:.88rem;
    line-height:1.55;
}

.dc-inventory .dc-commerce-price{
    margin:12px 0 0;
    color:#0f172a;
    font-size:1.18rem;
    font-weight:900;
}

/*
 * MASONRY / TETRIS
 *
 * Natural image geometry is authoritative here.
 * Portrait stays portrait.
 * Landscape stays landscape.
 * Square stays square.
 * Panoramic stays panoramic.
 */

.dc-inventory--masonry .dc-inventory-grid{
    display:block!important;
    columns:4 250px;
    column-gap:18px;
}

.dc-inventory--masonry .dc-inventory-item{
    display:inline-block;
    width:100%;
    margin:0 0 18px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

.dc-inventory--masonry .dc-inventory-media{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
}

.dc-inventory--masonry .dc-inventory-media img,
.dc-inventory--masonry
.dc-inventory-media
[data-dc-media-slot]
img{
    display:block;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
}

.dc-inventory--masonry .dc-inventory-body{
    padding:13px 15px 16px;
}

/* FEATURED */

.dc-inventory--featured
.dc-inventory-item:first-child{
    grid-column:span 2;
}

.dc-inventory--featured
.dc-inventory-item:first-child
article{
    display:grid;
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(260px,.65fr);
}

.dc-inventory--featured
.dc-inventory-item:first-child
.dc-inventory-media{
    min-height:340px;
}

.dc-inventory--featured
.dc-inventory-item:first-child
.dc-inventory-media img{
    display:block;
    width:100%;
    height:100%;
    min-height:340px;
    object-fit:cover;
}

.dc-inventory--featured
.dc-inventory-item:first-child
.dc-inventory-body{
    align-self:center;
    padding:24px;
}

/* COLLECTION CONTROLS */

.dc-inventory-controls{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:25px;
}

.dc-inventory-controls button{
    min-height:44px;
    padding:0 18px;
    border:1px solid rgba(15,23,42,.12);
    border-radius:999px;
    color:#0f172a;
    background:#fff;
    font-weight:850;
    cursor:pointer;
}

/* PRIVATE SETUP STATE */

.dc-inventory-setup-empty{
    width:min(100%,760px);
    margin:24px auto;
    display:grid;
    gap:5px;
    padding:18px 20px;
    border:1px dashed rgba(15,23,42,.18);
    border-radius:15px;
    color:#64748b;
    background:#f8fafc;
}

.dc-inventory-setup-empty strong{
    color:#0f172a;
}

@media (max-width:860px){

    .dc-inventory--masonry .dc-inventory-grid{
        columns:2 210px;
    }

    .dc-inventory--featured
    .dc-inventory-item:first-child{
        grid-column:1/-1;
    }
}

@media (max-width:620px){

    .dc-inventory--masonry .dc-inventory-grid{
        columns:1;
    }

    .dc-inventory--featured
    .dc-inventory-item:first-child
    article{
        grid-template-columns:1fr;
    }

    .dc-inventory--featured
    .dc-inventory-item:first-child
    .dc-inventory-media{
        min-height:0;
        aspect-ratio:16/10;
    }

    .dc-inventory--featured
    .dc-inventory-item:first-child
    .dc-inventory-media img{
        min-height:0;
    }
}

/* END SURFLOCAL INVENTORY LISTING 2027 */


/* ============================================================
   SURFLOCAL INVENTORY PRODUCTION MEDIA 2027 v2

   PHOTO RULE:
   Show the complete photograph.
   Never crop to make photographs match.
   ============================================================ */

.dc-inventory{
    width:min(100%,1320px);
    margin-inline:auto;
    padding:
        clamp(22px,3vw,38px)
        clamp(12px,2vw,22px);
}

.dc-inventory>.dc-commerce-heading{
    margin-bottom:14px!important;
}

.dc-inventory-gallery-target{
    min-width:0;
}

.dc-inventory-photo-set{
    min-width:0;
}

.dc-inventory-photo{
    min-width:0;
    margin:0;
}

.dc-inventory-photo-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:10px;
    overflow:hidden;
    background:#f2f5f7;
    appearance:none;
}

.dc-inventory-photo-button:focus-visible{
    outline:3px solid var(--dc-theme-accent,#0071e3);
    outline-offset:2px;
}

/*
 * Absolute geometry authority.
 * These selectors intentionally beat legacy cover rules.
 */
.dc-inventory .dc-inventory-photo img,
.dc-inventory .dc-inventory-photo-image,
.dc-preview-type--inventory_listing
.dc-inventory
.dc-inventory-photo
img{
    display:block!important;
    max-width:100%!important;
    max-height:none;
    object-fit:contain!important;
    object-position:center!important;
}

.dc-inventory-photo figcaption{
    margin:5px 2px 0;
    color:var(--dc-theme-text,#172033);
    font-size:.78rem;
    font-weight:700;
    line-height:1.3;
}

.dc-inventory-photo:not(:has(figcaption)){
    padding-bottom:0;
}


/* ============================================================
   1. GRID / SMART CATALOG
   Complete image inside a consistent compact presentation.
   ============================================================ */

.dc-inventory--grid .dc-inventory-photo-set{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );
    gap:9px;
}

.dc-inventory--grid .dc-inventory-photo{
    overflow:hidden;
    border:1px solid rgba(15,23,42,.09);
    border-radius:11px;
    background:#fff;
}

.dc-inventory--grid .dc-inventory-photo-button{
    width:100%;
    height:230px;
    border-radius:10px 10px 0 0;
}

.dc-inventory--grid .dc-inventory-photo img{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:230px!important;
}


/* ============================================================
   2. FEATURED STACK
   One large Featured image; supporting photographs below.
   ============================================================ */

.dc-inventory--featured .dc-inventory-photo-set{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
}

.dc-inventory--featured .dc-inventory-photo:first-child{
    flex:0 0 100%;
}

.dc-inventory--featured
.dc-inventory-photo:first-child
.dc-inventory-photo-button{
    width:100%;
    max-height:540px;
    background:#f4f6f8;
}

.dc-inventory--featured
.dc-inventory-photo:first-child
img{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:540px!important;
}

.dc-inventory--featured
.dc-inventory-photo:not(:first-child){
    flex:0 0 auto;
    max-width:100%;
}

.dc-inventory--featured
.dc-inventory-photo:not(:first-child)
.dc-inventory-photo-button{
    width:auto;
    height:210px;
}

.dc-inventory--featured
.dc-inventory-photo:not(:first-child)
img{
    width:auto!important;
    height:210px!important;
    max-width:100%!important;
}


/* ============================================================
   3. JUSTIFIED ROWS
   Approximately equal height.
   Width follows the photograph's natural aspect ratio.
   ============================================================ */

.dc-inventory--justified .dc-inventory-photo-set{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:7px;
}

.dc-inventory--justified .dc-inventory-photo{
    flex:0 0 auto;
    max-width:100%;
}

.dc-inventory--justified .dc-inventory-photo-button{
    width:auto;
    height:230px;
}

.dc-inventory--justified .dc-inventory-photo img{
    width:auto!important;
    height:230px!important;
    max-width:100%!important;
}


/* ============================================================
   4. MASONRY / TETRIS
   Portrait, landscape, square and panoramic stay natural.
   ============================================================ */

.dc-inventory--masonry .dc-inventory-photo-set{
    display:block!important;
    columns:4 235px;
    column-gap:8px;
}

.dc-inventory--masonry .dc-inventory-photo{
    display:inline-block;
    width:100%;
    margin:0 0 8px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

.dc-inventory--masonry .dc-inventory-photo-button{
    width:100%;
    height:auto!important;
}

.dc-inventory--masonry .dc-inventory-photo img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:auto!important;
}


/* ============================================================
   5. FEATURED VIEWER
   Large selected photograph + natural-ratio thumbnail row.
   Clicking another photograph moves it into the stage.
   ============================================================ */

.dc-inventory--viewer .dc-inventory-photo-set{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:7px;
}

.dc-inventory--viewer .dc-inventory-photo:first-child{
    flex:0 0 100%;
}

.dc-inventory--viewer
.dc-inventory-photo:first-child
.dc-inventory-photo-button{
    width:100%;
    max-height:540px;
    background:#f4f6f8;
    cursor:default;
}

.dc-inventory--viewer
.dc-inventory-photo:first-child
img{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:540px!important;
}

.dc-inventory--viewer
.dc-inventory-photo:not(:first-child){
    flex:0 0 auto;
}

.dc-inventory--viewer
.dc-inventory-photo:not(:first-child)
.dc-inventory-photo-button{
    width:auto;
    height:92px;
    cursor:pointer;
}

.dc-inventory--viewer
.dc-inventory-photo:not(:first-child)
img{
    width:auto!important;
    height:92px!important;
    max-width:220px!important;
}


/* ============================================================
   6. EDITORIAL MOSAIC
   Larger opening images + compact supporting photographs.
   Full photograph is still visible.
   ============================================================ */

.dc-inventory--mosaic .dc-inventory-photo-set{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    align-items:start;
    gap:8px;
}

.dc-inventory--mosaic .dc-inventory-photo{
    grid-column:span 4;
}

.dc-inventory--mosaic .dc-inventory-photo:first-child{
    grid-column:span 7;
}

.dc-inventory--mosaic .dc-inventory-photo:nth-child(2){
    grid-column:span 5;
}

.dc-inventory--mosaic .dc-inventory-photo-button{
    width:100%;
    height:auto!important;
    min-height:0;
}

.dc-inventory--mosaic .dc-inventory-photo img{
    width:100%!important;
    height:auto!important;
    max-height:430px!important;
}


/* ============================================================
   OPTIONAL INVENTORY DETAILS
   No content = no artificial content whitespace.
   ============================================================ */

.dc-inventory-details-grid{
    display:grid!important;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        )!important;
    gap:9px!important;
    margin:12px 0 0!important;
    padding:0!important;
    list-style:none!important;
}

.dc-inventory-detail-card{
    height:100%;
    padding:13px 14px;
    border:1px solid rgba(15,23,42,.09);
    border-radius:11px;
    background:#fff;
    box-shadow:none!important;
}

.dc-inventory-detail-card:hover{
    transform:none!important;
}

.dc-inventory-meta{
    display:flex;
    flex-wrap:wrap;
    gap:4px 8px;
    margin-bottom:5px;
}

.dc-inventory-meta span{
    color:#6b7280;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.dc-inventory-card-head{
    gap:8px!important;
}

.dc-inventory-card-head h3{
    font-size:1rem!important;
}

.dc-inventory-status{
    padding:3px 7px!important;
    font-size:.65rem!important;
}

.dc-inventory-description{
    margin:7px 0 0;
    color:#596579;
    font-size:.83rem;
    line-height:1.45;
}

.dc-inventory .dc-commerce-price{
    margin:7px 0 0!important;
    font-size:1.08rem!important;
}

.dc-inventory .dc-commerce-facts{
    margin-top:8px;
}

.dc-inventory .dc-commerce-action{
    min-height:38px!important;
    margin-top:10px!important;
    padding:7px 12px!important;
    font-size:.8rem!important;
}

.dc-inventory-controls{
    margin-top:12px!important;
}

.dc-inventory-controls button{
    margin-top:0!important;
}

.dc-inventory-setup-empty{
    margin-top:8px;
    padding:13px 15px!important;
}


/*
 * Public image-only Inventory waits invisibly for the secure
 * MediaPreviewRenderer to insert assigned images.
 */
.dc-inventory--awaiting-media:not(.dc-inventory--setup-only)
:not(:has(.dc-inventory-photo)){
    display:none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

    .dc-inventory--masonry .dc-inventory-photo-set{
        columns:3 190px;
    }

    .dc-inventory--justified .dc-inventory-photo-button{
        height:190px;
    }

    .dc-inventory--justified .dc-inventory-photo img{
        height:190px!important;
    }

    .dc-inventory--featured
    .dc-inventory-photo:not(:first-child)
    .dc-inventory-photo-button{
        height:180px;
    }

    .dc-inventory--featured
    .dc-inventory-photo:not(:first-child)
    img{
        height:180px!important;
    }
}

@media(max-width:680px){

    .dc-inventory{
        padding-left:10px;
        padding-right:10px;
    }

    .dc-inventory--masonry .dc-inventory-photo-set{
        columns:2 150px;
    }

    .dc-inventory--justified .dc-inventory-photo-button{
        height:145px;
    }

    .dc-inventory--justified .dc-inventory-photo img{
        height:145px!important;
    }

    .dc-inventory--featured
    .dc-inventory-photo:not(:first-child)
    .dc-inventory-photo-button{
        height:135px;
    }

    .dc-inventory--featured
    .dc-inventory-photo:not(:first-child)
    img{
        height:135px!important;
    }

    .dc-inventory--mosaic .dc-inventory-photo,
    .dc-inventory--mosaic .dc-inventory-photo:first-child,
    .dc-inventory--mosaic .dc-inventory-photo:nth-child(2){
        grid-column:span 6;
    }
}

@media(max-width:460px){

    .dc-inventory--masonry .dc-inventory-photo-set{
        columns:1;
    }

    .dc-inventory--mosaic .dc-inventory-photo,
    .dc-inventory--mosaic .dc-inventory-photo:first-child,
    .dc-inventory--mosaic .dc-inventory-photo:nth-child(2){
        grid-column:1/-1;
    }

    .dc-inventory--viewer
    .dc-inventory-photo:not(:first-child)
    .dc-inventory-photo-button{
        height:72px;
    }

    .dc-inventory--viewer
    .dc-inventory-photo:not(:first-child)
    img{
        height:72px!important;
    }
}

/* END SURFLOCAL INVENTORY PRODUCTION MEDIA 2027 v2 */


/* ============================================================
   SURFLOCAL INVENTORY WORLD-CLASS POLISH 2027 v1

   PRINCIPLES
   - Photographs dominate.
   - Entire photograph remains visible.
   - Optional names live on the photograph.
   - Hover moves the complete frame, never crops/zooms the image.
   - Blank metadata creates zero visual baggage.
   ============================================================ */

.dc-inventory{
    --dc-inventory-gap:8px;
    --dc-inventory-radius:14px;
    --dc-inventory-overlay-bg:rgba(10,18,31,.76);
    --dc-inventory-overlay-border:rgba(255,255,255,.16);
    --dc-inventory-shadow:
        0 14px 35px rgba(15,23,42,.11);
    --dc-inventory-shadow-hover:
        0 22px 48px rgba(15,23,42,.18);
}

.dc-inventory-gallery-target{
    margin-top:2px;
}

.dc-inventory-photo-set{
    gap:var(--dc-inventory-gap)!important;
}

.dc-inventory-photo{
    position:relative;
    isolation:isolate;
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
    will-change:transform;
}

.dc-inventory-photo:hover{
    transform:
        translateY(-3px)
        scale(1.008);
    z-index:3;
}

.dc-inventory-photo-button{
    position:relative;
    border-radius:var(--dc-inventory-radius)!important;
    box-shadow:var(--dc-inventory-shadow);
    transition:
        box-shadow .24s ease,
        background-color .24s ease;
}

.dc-inventory-photo:hover
.dc-inventory-photo-button{
    box-shadow:var(--dc-inventory-shadow-hover);
}

/*
 * Absolute anti-crop authority.
 * The hover effect above moves the whole frame.
 * The photograph itself does NOT zoom.
 */
.dc-inventory
.dc-inventory-photo
img,
.dc-inventory
.dc-inventory-photo:hover
img{
    transform:none!important;
    object-fit:contain!important;
    object-position:center!important;
}

/*
 * Optional Image Name
 *
 * This is assignment caption metadata.
 * No caption = no overlay at all.
 */
.dc-inventory-photo figcaption{
    position:absolute!important;
    z-index:4;
    left:9px!important;
    right:auto!important;
    bottom:9px!important;

    width:auto!important;
    max-width:calc(100% - 18px);

    margin:0!important;
    padding:7px 10px!important;

    border:1px solid var(--dc-inventory-overlay-border);
    border-radius:999px;

    color:#fff!important;
    background:var(--dc-inventory-overlay-bg);
    box-shadow:
        0 5px 18px rgba(0,0,0,.18);

    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);

    font-size:.71rem!important;
    font-weight:800!important;
    line-height:1.15!important;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    pointer-events:none;
}

/*
 * No caption = nothing reserved below the image.
 */
.dc-inventory-photo:not(:has(figcaption)){
    margin-bottom:0!important;
}


/* ============================================================
   GRID — disciplined catalog
   ============================================================ */

.dc-inventory--grid
.dc-inventory-photo-set{
    gap:10px!important;
}

.dc-inventory--grid
.dc-inventory-photo{
    border:0!important;
    border-radius:var(--dc-inventory-radius)!important;
    background:transparent!important;
}

.dc-inventory--grid
.dc-inventory-photo-button{
    border:1px solid rgba(15,23,42,.08);
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        );
}


/* ============================================================
   FEATURED — one premium hero + supporting photographs
   ============================================================ */

.dc-inventory--featured
.dc-inventory-photo-set{
    gap:9px!important;
}

.dc-inventory--featured
.dc-inventory-photo:first-child
.dc-inventory-photo-button{
    border-radius:18px!important;
    border:1px solid rgba(15,23,42,.08);
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(255,255,255,.98),
            rgba(241,245,249,.95)
        );
}

.dc-inventory--featured
.dc-inventory-photo:first-child
figcaption{
    left:14px!important;
    bottom:14px!important;
    max-width:calc(100% - 28px);
    padding:8px 12px!important;
    font-size:.77rem!important;
}

.dc-inventory--featured
.dc-inventory-photo:not(:first-child)
.dc-inventory-photo-button{
    border:1px solid rgba(15,23,42,.07);
}


/* ============================================================
   JUSTIFIED — signature photography layout
   Same visual height; natural width.
   ============================================================ */

.dc-inventory--justified
.dc-inventory-photo-set{
    gap:7px!important;
}

.dc-inventory--justified
.dc-inventory-photo-button{
    background:#f3f5f7;
    border:1px solid rgba(15,23,42,.07);
}

.dc-inventory--justified
.dc-inventory-photo figcaption{
    bottom:7px!important;
    left:7px!important;
}


/* ============================================================
   MASONRY / TETRIS — minimal furniture
   ============================================================ */

.dc-inventory--masonry
.dc-inventory-photo{
    border-radius:var(--dc-inventory-radius);
}

.dc-inventory--masonry
.dc-inventory-photo-button{
    background:#f4f6f8;
    border:1px solid rgba(15,23,42,.06);
}

.dc-inventory--masonry
.dc-inventory-photo figcaption{
    left:8px!important;
    bottom:8px!important;
}


/* ============================================================
   VIEWER — main photograph feels like a presentation stage
   ============================================================ */

.dc-inventory--viewer
.dc-inventory-photo:first-child
.dc-inventory-photo-button{
    border-radius:18px!important;
    border:1px solid rgba(15,23,42,.08);
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef2f6
        );
    box-shadow:
        0 18px 46px rgba(15,23,42,.13);
}

.dc-inventory--viewer
.dc-inventory-photo:first-child
figcaption{
    left:14px!important;
    bottom:14px!important;
    padding:8px 12px!important;
    font-size:.76rem!important;
}

.dc-inventory--viewer
.dc-inventory-photo:not(:first-child){
    opacity:.93;
}

.dc-inventory--viewer
.dc-inventory-photo:not(:first-child):hover{
    opacity:1;
}


/* ============================================================
   MOSAIC — editorial character
   ============================================================ */

.dc-inventory--mosaic
.dc-inventory-photo-button{
    border:1px solid rgba(15,23,42,.07);
    background:
        linear-gradient(
            160deg,
            #f8fafc,
            #edf1f5
        );
}

.dc-inventory--mosaic
.dc-inventory-photo:first-child
figcaption{
    left:13px!important;
    bottom:13px!important;
    padding:8px 12px!important;
}


/* ============================================================
   OPTIONAL DETAILS
   Keep them visually subordinate to photography.
   ============================================================ */

.dc-inventory-details-grid{
    margin-top:10px!important;
    gap:8px!important;
}

.dc-inventory-detail-card{
    padding:11px 12px!important;
    border:1px solid rgba(15,23,42,.075)!important;
    border-radius:12px!important;
    background:
        rgba(255,255,255,.84)!important;
    box-shadow:none!important;
}

.dc-inventory-detail-card h3{
    letter-spacing:-.015em;
}

.dc-inventory-meta{
    margin-bottom:4px!important;
}

.dc-inventory-description{
    margin-top:5px!important;
}

.dc-inventory .dc-commerce-price{
    margin-top:5px!important;
}

.dc-inventory .dc-commerce-facts{
    margin-top:6px!important;
}

.dc-inventory .dc-commerce-action{
    margin-top:8px!important;
}


/* ============================================================
   PRIVATE EMPTY SETUP
   Only visible until real photographs/details exist.
   ============================================================ */

.dc-inventory-setup-empty{
    margin:7px 0 0!important;
    padding:11px 13px!important;
    border-radius:11px!important;
    font-size:.82rem;
}

.dc-inventory-setup-empty strong{
    display:inline;
    margin-right:4px;
}

.dc-inventory-setup-empty span{
    display:inline;
}


/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

    .dc-inventory-photo,
    .dc-inventory-photo-button{
        transition:none!important;
    }

    .dc-inventory-photo:hover{
        transform:none!important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:620px){

    .dc-inventory{
        --dc-inventory-gap:6px;
    }

    .dc-inventory-photo figcaption{
        left:6px!important;
        bottom:6px!important;
        max-width:calc(100% - 12px);
        padding:6px 8px!important;
        font-size:.66rem!important;
    }

    .dc-inventory--featured
    .dc-inventory-photo:first-child
    figcaption,
    .dc-inventory--viewer
    .dc-inventory-photo:first-child
    figcaption{
        left:9px!important;
        bottom:9px!important;
        max-width:calc(100% - 18px);
    }
}

/* END SURFLOCAL INVENTORY WORLD-CLASS POLISH 2027 v1 */


/* ============================================================
   SURFLOCAL INVENTORY PRESENTATION 2027 v2

   Final presentation pass:
   - Featured = hero left / support stack right
   - Mosaic   = editorial mirror / hero right
   - Viewer   = presentation stage + support strip
   - Justified = same-height natural-width rows
   - Masonry  = true natural-height columns
   - Grid     = disciplined catalog

   FULL PHOTOGRAPH / NO CROP remains authoritative.
   ============================================================ */

.dc-inventory
.dc-inventory-photo-button{
    overflow:hidden;
}

.dc-inventory
.dc-inventory-photo-image{
    object-fit:contain!important;
    object-position:center!important;
}


/* ------------------------------------------------------------
   GRID
   ------------------------------------------------------------ */

.dc-inventory--grid
.dc-inventory-photo-set{
    display:grid!important;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(205px,1fr)
        )!important;
    gap:12px!important;
    align-items:start!important;
}

.dc-inventory--grid
.dc-inventory-photo,
.dc-inventory--grid
.dc-inventory-photo-button{
    width:100%!important;
    min-width:0!important;
}

.dc-inventory--grid
.dc-inventory-photo img{
    display:block!important;
    width:100%!important;
    height:auto!important;
}


/* ------------------------------------------------------------
   FEATURED
   Large LEFT.
   Supporting images stack down the RIGHT.
   Additional images continue underneath.
   ------------------------------------------------------------ */

.dc-inventory--featured
.dc-inventory-photo-set{
    display:grid!important;
    grid-template-columns:
        minmax(0,1.65fr)
        minmax(170px,.72fr)!important;
    grid-auto-flow:row!important;
    gap:10px!important;
    align-items:start!important;
}

.dc-inventory--featured
.dc-inventory-photo:first-child{
    grid-column:1!important;
    grid-row:1 / span 2!important;
}

.dc-inventory--featured
.dc-inventory-photo:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
}

.dc-inventory--featured
.dc-inventory-photo:nth-child(3){
    grid-column:2!important;
    grid-row:2!important;
}

.dc-inventory--featured
.dc-inventory-photo:nth-child(n+4){
    grid-column:auto!important;
    grid-row:auto!important;
}

.dc-inventory--featured
.dc-inventory-photo:first-child
.dc-inventory-photo-button{
    width:100%!important;
}

.dc-inventory--featured
.dc-inventory-photo:first-child img,
.dc-inventory--featured
.dc-inventory-photo:nth-child(n+2) img{
    display:block!important;
    width:100%!important;
    height:auto!important;
}

@supports selector(:has(*)){

    .dc-inventory--featured
    .dc-inventory-photo-set:
    has(> .dc-inventory-photo:only-child){
        grid-template-columns:1fr!important;
    }

    .dc-inventory--featured
    .dc-inventory-photo-set:
    has(> .dc-inventory-photo:nth-child(2):last-child)
    > .dc-inventory-photo:first-child{
        grid-row:1!important;
    }
}


/* ------------------------------------------------------------
   JUSTIFIED
   Same visual row height.
   Natural photograph width.
   ------------------------------------------------------------ */

.dc-inventory--justified
.dc-inventory-photo-set{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:8px!important;
}

.dc-inventory--justified
.dc-inventory-photo{
    display:inline-flex!important;
    flex:0 1 auto!important;
    width:auto!important;
    max-width:100%!important;
    height:190px!important;
}

.dc-inventory--justified
.dc-inventory-photo-button{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    height:190px!important;
    padding:0!important;
}

.dc-inventory--justified
.dc-inventory-photo img{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:190px!important;
    object-fit:contain!important;
}


/* ------------------------------------------------------------
   MASONRY / TETRIS
   True natural-height columns.
   ------------------------------------------------------------ */

.dc-inventory--masonry
.dc-inventory-photo-set{
    display:block!important;
    columns:3 220px!important;
    column-gap:10px!important;
}

.dc-inventory--masonry
.dc-inventory-photo{
    display:inline-block!important;
    width:100%!important;
    margin:0 0 10px!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
}

.dc-inventory--masonry
.dc-inventory-photo-button{
    display:block!important;
    width:100%!important;
}

.dc-inventory--masonry
.dc-inventory-photo img{
    display:block!important;
    width:100%!important;
    height:auto!important;
}


/* ------------------------------------------------------------
   VIEWER
   One large stage image.
   Supporting images form a clean strip underneath.
   Existing click-to-view JavaScript remains authoritative.
   ------------------------------------------------------------ */

.dc-inventory--viewer
.dc-inventory-photo-set{
    display:grid!important;
    grid-template-columns:
        repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
    align-items:start!important;
}

.dc-inventory--viewer
.dc-inventory-photo:first-child{
    grid-column:1 / -1!important;
}

.dc-inventory--viewer
.dc-inventory-photo:first-child
.dc-inventory-photo-button{
    width:100%!important;
}

.dc-inventory--viewer
.dc-inventory-photo:first-child img{
    display:block!important;
    width:100%!important;
    max-height:520px!important;
    height:auto!important;
    object-fit:contain!important;
}

.dc-inventory--viewer
.dc-inventory-photo:nth-child(n+2)
.dc-inventory-photo-button{
    width:100%!important;
}

.dc-inventory--viewer
.dc-inventory-photo:nth-child(n+2) img{
    display:block!important;
    width:100%!important;
    height:auto!important;
}


/* ------------------------------------------------------------
   MOSAIC
   Editorial mirror of Featured:
   Large image on the RIGHT.
   Supporting images stack on the LEFT.
   ------------------------------------------------------------ */

.dc-inventory--mosaic
.dc-inventory-photo-set{
    display:grid!important;
    grid-template-columns:
        minmax(170px,.72fr)
        minmax(0,1.65fr)!important;
    grid-auto-flow:row!important;
    gap:10px!important;
    align-items:start!important;
}

.dc-inventory--mosaic
.dc-inventory-photo:first-child{
    grid-column:2!important;
    grid-row:1 / span 2!important;
}

.dc-inventory--mosaic
.dc-inventory-photo:nth-child(2){
    grid-column:1!important;
    grid-row:1!important;
}

.dc-inventory--mosaic
.dc-inventory-photo:nth-child(3){
    grid-column:1!important;
    grid-row:2!important;
}

.dc-inventory--mosaic
.dc-inventory-photo:nth-child(n+4){
    grid-column:auto!important;
    grid-row:auto!important;
}

.dc-inventory--mosaic
.dc-inventory-photo:first-child img,
.dc-inventory--mosaic
.dc-inventory-photo:nth-child(n+2) img{
    display:block!important;
    width:100%!important;
    height:auto!important;
}

@supports selector(:has(*)){

    .dc-inventory--mosaic
    .dc-inventory-photo-set:
    has(> .dc-inventory-photo:only-child){
        grid-template-columns:1fr!important;
    }

    .dc-inventory--mosaic
    .dc-inventory-photo-set:
    has(> .dc-inventory-photo:nth-child(2):last-child)
    > .dc-inventory-photo:first-child{
        grid-row:1!important;
    }
}


/* ------------------------------------------------------------
   OVER-IMAGE NAME
   Already supplied by assignment caption.
   Refine only its presentation.
   ------------------------------------------------------------ */

.dc-inventory
.dc-inventory-photo figcaption{
    left:10px!important;
    bottom:10px!important;

    padding:7px 11px!important;

    color:#fff!important;
    background:rgba(8,15,28,.74)!important;

    border:
        1px solid
        rgba(255,255,255,.18)!important;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.20)!important;

    -webkit-backdrop-filter:
        blur(10px)
        saturate(125%)!important;

    backdrop-filter:
        blur(10px)
        saturate(125%)!important;

    font-size:.70rem!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
}


/* ------------------------------------------------------------
   DETAILS
   Examples are useful, but photographs remain dominant.
   ------------------------------------------------------------ */

.dc-inventory-details-grid{
    margin-top:12px!important;

    display:grid!important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px,1fr)
        )!important;

    gap:9px!important;
}

.dc-inventory-detail-card{
    height:100%;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:820px){

    .dc-inventory--featured
    .dc-inventory-photo-set,
    .dc-inventory--mosaic
    .dc-inventory-photo-set{
        grid-template-columns:
            minmax(0,1.35fr)
            minmax(145px,.65fr)!important;
    }

    .dc-inventory--viewer
    .dc-inventory-photo-set{
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;
    }

    .dc-inventory--justified
    .dc-inventory-photo,
    .dc-inventory--justified
    .dc-inventory-photo-button,
    .dc-inventory--justified
    .dc-inventory-photo img{
        height:165px!important;
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:620px){

    .dc-inventory--featured
    .dc-inventory-photo-set,
    .dc-inventory--mosaic
    .dc-inventory-photo-set{
        display:grid!important;
        grid-template-columns:1fr!important;
    }

    .dc-inventory--featured
    .dc-inventory-photo,
    .dc-inventory--mosaic
    .dc-inventory-photo{
        grid-column:1!important;
        grid-row:auto!important;
    }

    .dc-inventory--viewer
    .dc-inventory-photo-set{
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;
    }

    .dc-inventory--viewer
    .dc-inventory-photo:first-child{
        grid-column:1 / -1!important;
    }

    .dc-inventory--justified
    .dc-inventory-photo-set{
        gap:6px!important;
    }

    .dc-inventory--justified
    .dc-inventory-photo,
    .dc-inventory--justified
    .dc-inventory-photo-button,
    .dc-inventory--justified
    .dc-inventory-photo img{
        height:135px!important;
    }

    .dc-inventory--masonry
    .dc-inventory-photo-set{
        columns:2 140px!important;
        column-gap:7px!important;
    }
}

/* END SURFLOCAL INVENTORY PRESENTATION 2027 v2 */

/* ============================================================
   SURFLOCAL INVENTORY RESPONSE RAIL 2027 v1
   ============================================================ */

.dc-inventory
.dc-inventory-details-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;

    gap:12px!important;

    width:100%;
    max-width:100%;

    margin-top:14px!important;
    padding:2px 2px 12px!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;

    scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;
    scroll-behavior:smooth;

    overscroll-behavior-inline:contain;

    -webkit-overflow-scrolling:touch;

    list-style:none!important;
}

.dc-inventory
.dc-inventory-details-grid
.dc-inventory-item{
    flex:
        0 0
        clamp(
            278px,
            31vw,
            348px
        )!important;

    width:auto!important;
    min-width:0!important;

    scroll-snap-align:start;
}

.dc-inventory
.dc-inventory-detail-card{
    display:flex;
    flex-direction:column;

    height:100%;
}


/* APPLE UI 2027 RESPONSE BUTTON */

.dc-inventory
.dc-inventory-response-action{
    position:relative;

    display:flex!important;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    width:100%;
    min-height:46px;

    margin-top:auto!important;
    padding:11px 14px!important;

    border:
        1px solid
        rgba(255,255,255,.28)!important;

    border-radius:13px!important;

    background:
        linear-gradient(
            135deg,
            #087cff 0%,
            #4857ff 52%,
            #8b4dff 100%
        )!important;

    color:#fff!important;

    text-decoration:none!important;

    font-size:.80rem!important;
    font-weight:800!important;
    line-height:1.1!important;

    box-shadow:
        0 10px 24px
        rgba(48,82,255,.25),
        inset 0 1px 0
        rgba(255,255,255,.28)!important;

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease!important;

    -webkit-tap-highlight-color:transparent;
}

.dc-inventory
.dc-inventory-response-action:visited{
    color:#fff!important;
}

.dc-inventory
.dc-inventory-response-action:hover{
    color:#fff!important;

    transform:
        translateY(-2px)
        scale(1.012);

    filter:
        saturate(1.12)
        brightness(1.035);

    box-shadow:
        0 15px 32px
        rgba(48,82,255,.30),
        inset 0 1px 0
        rgba(255,255,255,.34)!important;
}

.dc-inventory
.dc-inventory-response-action:active{
    color:#fff!important;

    transform:
        translateY(1px)
        scale(.974);
}

.dc-inventory
.dc-inventory-response-action:focus-visible{
    outline:
        3px solid
        rgba(8,124,255,.28)!important;

    outline-offset:3px;
}


/* REQUEST APPOINTMENT */

.dc-inventory
.dc-inventory-response-action--booking{
    background:
        linear-gradient(
            135deg,
            #ff8a00 0%,
            #ff5f57 48%,
            #ec4899 100%
        )!important;
}


/* CHAT */

.dc-inventory
.dc-inventory-response-action--chat{
    background:
        linear-gradient(
            135deg,
            #8b45ff 0%,
            #5557ff 50%,
            #00a9ff 100%
        )!important;
}


/* CALL */

.dc-inventory
.dc-inventory-response-action--call{
    background:
        linear-gradient(
            135deg,
            #18b96b 0%,
            #00a9a5 48%,
            #087cff 100%
        )!important;
}


/* BUTTON ARROW */

.dc-inventory-response-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    width:24px;
    height:24px;

    border-radius:999px;

    background:
        rgba(255,255,255,.16);

    color:#fff!important;

    font-size:1.25rem;
    line-height:1;

    transition:
        transform .18s ease,
        background-color .18s ease;
}

.dc-inventory-response-action:hover
.dc-inventory-response-arrow{
    transform:
        translateX(2px);

    background:
        rgba(255,255,255,.23);
}


/* CLICK PRESS / REBOUND */

.dc-inventory-response-action.is-pressed{
    animation:
        dcInventoryResponsePress
        .28s
        cubic-bezier(.2,.72,.25,1);
}

@keyframes dcInventoryResponsePress{

    0%{
        transform:
            translateY(0)
            scale(1);
    }

    42%{
        transform:
            translateY(2px)
            scale(.968);
    }

    100%{
        transform:
            translateY(-1px)
            scale(1);
    }
}


@media(max-width:620px){

    .dc-inventory
    .dc-inventory-details-grid
    .dc-inventory-item{
        flex-basis:
            min(
                84vw,
                320px
            )!important;
    }

    .dc-inventory
    .dc-inventory-response-action{
        min-height:48px;
    }
}


@media(prefers-reduced-motion:reduce){

    .dc-inventory
    .dc-inventory-details-grid{
        scroll-behavior:auto;
    }

    .dc-inventory
    .dc-inventory-response-action,
    .dc-inventory-response-arrow{
        transition:none!important;
    }

    .dc-inventory
    .dc-inventory-response-action:hover,
    .dc-inventory
    .dc-inventory-response-action:active{
        transform:none!important;
    }

    .dc-inventory-response-action.is-pressed{
        animation:none!important;
    }
}

/* END SURFLOCAL INVENTORY RESPONSE RAIL 2027 v1 */

/* ============================================================
   SURFLOCAL INVENTORY DYNAMIC FEATURED WRAP 2027 v2

   FEATURED:
     Featured photograph anchored LEFT.
     Natural-height support photographs fill RIGHT.
     When the hero boundary is reached, photographs wrap below.

   MOSAIC:
     Featured photograph anchored RIGHT.
     Natural-height support photographs fill LEFT.
     When the hero boundary is reached, photographs wrap below.

   No fixed support count.
   No crop.
   No artificial empty rows.
   ============================================================ */


/* ------------------------------------------------------------
   FALLBACK
   ------------------------------------------------------------ */

.dc-inventory--featured
.dc-inventory-photo-set,
.dc-inventory--mosaic
.dc-inventory-photo-set{
    display:grid!important;

    gap:8px!important;

    align-items:start!important;

    margin:0!important;
    padding:0!important;
}


/*
 * Once the runtime has natural dimensions, use a fine-grained
 * twelve-column / four-pixel-row dense packing grid.
 */

.dc-inventory--featured
.dc-inventory-photo-set.is-dc-inventory-wrap-ready,
.dc-inventory--mosaic
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    grid-template-columns:
        repeat(
            12,
            minmax(0,1fr)
        )!important;

    grid-auto-flow:dense!important;
    grid-auto-rows:4px!important;

    column-gap:8px!important;
    row-gap:8px!important;
}


/* ------------------------------------------------------------
   FULL PHOTOGRAPH GEOMETRY
   ------------------------------------------------------------ */

.dc-inventory--featured
.dc-inventory-photo,
.dc-inventory--mosaic
.dc-inventory-photo{
    margin:0!important;
    padding:0!important;

    min-width:0!important;

    align-self:start!important;
}


.dc-inventory--featured
.dc-inventory-photo-button,
.dc-inventory--mosaic
.dc-inventory-photo-button{
    display:block!important;

    width:100%!important;
    height:auto!important;

    margin:0!important;
    padding:0!important;
}


.dc-inventory--featured
.dc-inventory-photo-image,
.dc-inventory--mosaic
.dc-inventory-photo-image{
    display:block!important;

    width:100%!important;
    max-width:100%!important;
    height:auto!important;

    object-fit:contain!important;
    object-position:center!important;

    transform:none!important;
}


/* ------------------------------------------------------------
   DYNAMIC FEATURED — HERO LEFT
   ------------------------------------------------------------ */

.dc-inventory--featured
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo:first-child{
    grid-column:
        1 / span 8!important;

    grid-row-start:auto!important;
    grid-row-end:auto!important;
}


.dc-inventory--featured
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo:not(:first-child){
    grid-column:
        span 4!important;

    grid-row-start:auto!important;
    grid-row-end:auto!important;
}


/* ------------------------------------------------------------
   DYNAMIC MOSAIC — HERO RIGHT
   ------------------------------------------------------------ */

.dc-inventory--mosaic
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo:first-child{
    grid-column:
        5 / span 8!important;

    grid-row-start:auto!important;
    grid-row-end:auto!important;
}


.dc-inventory--mosaic
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo:not(:first-child){
    grid-column:
        span 4!important;

    grid-row-start:auto!important;
    grid-row-end:auto!important;
}


/* One photograph gets the full canvas. */

.dc-inventory--featured
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo:only-child,
.dc-inventory--mosaic
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo:only-child{
    grid-column:
        1 / -1!important;
}


/* ------------------------------------------------------------
   IMAGE LABELS STAY WITH THEIR PHOTOGRAPH
   ------------------------------------------------------------ */

.dc-inventory--featured
.dc-inventory-photo figcaption,
.dc-inventory--mosaic
.dc-inventory-photo figcaption{
    pointer-events:none;
}


/* ------------------------------------------------------------
   INFORMATION RAIL — KEEP THE THIN CUE
   ------------------------------------------------------------ */

.dc-inventory
.dc-inventory-details-grid{
    padding-bottom:6px!important;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(72,78,91,.32)
        transparent;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar{
    height:4px;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-track{
    background:transparent;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-thumb{
    min-width:34px;

    border-radius:999px;

    background:
        rgba(72,78,91,.30);
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-thumb:hover{
    background:
        rgba(72,78,91,.47);
}


/* ------------------------------------------------------------
   TABLET
   Keep the same dynamic mathematics.
   ------------------------------------------------------------ */

@media(max-width:820px) and (min-width:621px){

    .dc-inventory--featured
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready
    > .dc-inventory-photo:first-child{
        grid-column:
            1 / span 8!important;
    }


    .dc-inventory--mosaic
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready
    > .dc-inventory-photo:first-child{
        grid-column:
            5 / span 8!important;
    }
}


/* ------------------------------------------------------------
   MOBILE
   No masonry mathematics. Natural vertical stack.
   ------------------------------------------------------------ */

@media(max-width:620px){

    .dc-inventory--featured
    .dc-inventory-photo-set,
    .dc-inventory--mosaic
    .dc-inventory-photo-set,
    .dc-inventory--featured
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready,
    .dc-inventory--mosaic
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        display:grid!important;

        grid-template-columns:1fr!important;
        grid-auto-flow:row!important;
        grid-auto-rows:auto!important;

        gap:7px!important;
    }


    .dc-inventory--featured
    .dc-inventory-photo,
    .dc-inventory--mosaic
    .dc-inventory-photo{
        grid-column:
            1 / -1!important;

        grid-row:
            auto!important;
    }
}

/* END SURFLOCAL INVENTORY DYNAMIC FEATURED WRAP 2027 v2 */

/* ============================================================
   SURFLOCAL INVENTORY MASTERPIECE FINISH 2027 v1

   Final optical refinement only.
   Dynamic layout mathematics remain authoritative.
   Photograph geometry remains untouched.
   ============================================================ */


/* ------------------------------------------------------------
   PHOTOGRAPH RHYTHM
   ------------------------------------------------------------ */

.dc-inventory--featured
.dc-inventory-photo-set.is-dc-inventory-wrap-ready,
.dc-inventory--mosaic
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    column-gap:6px!important;
    row-gap:6px!important;
}


/*
 * One consistent photographic edge treatment.
 * Shadow is deliberately quiet so the imagery remains dominant.
 */

.dc-inventory--featured
.dc-inventory-photo-button,
.dc-inventory--mosaic
.dc-inventory-photo-button{
    border:0!important;

    border-radius:10px!important;

    overflow:hidden!important;

    background:transparent!important;

    box-shadow:
        0 3px 10px
        rgba(17,24,39,.055)!important;
}


.dc-inventory--featured
.dc-inventory-photo-image,
.dc-inventory--mosaic
.dc-inventory-photo-image{
    border-radius:10px!important;

    object-fit:contain!important;

    transform:none!important;
}


/*
 * Preserve captions without changing photograph dimensions.
 */

.dc-inventory--featured
.dc-inventory-photo figcaption,
.dc-inventory--mosaic
.dc-inventory-photo figcaption{
    margin-top:3px!important;
}


/* ------------------------------------------------------------
   GALLERY → INVENTORY TRANSITION
   ------------------------------------------------------------ */

.dc-inventory
.dc-inventory-gallery-target{
    margin-bottom:7px!important;
}


.dc-inventory
.dc-inventory-details-grid{
    margin-top:7px!important;

    gap:9px!important;

    padding:
        1px
        1px
        5px!important;
}


/* ------------------------------------------------------------
   INVENTORY CARD FINISH
   ------------------------------------------------------------ */

.dc-inventory
.dc-inventory-detail-card{
    border-radius:12px!important;

    border:
        1px solid
        rgba(18,32,52,.075)!important;

    box-shadow:
        0 5px 16px
        rgba(18,32,52,.048)!important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


@media(hover:hover){

    .dc-inventory
    .dc-inventory-detail-card:hover{
        transform:
            translateY(-1px);

        border-color:
            rgba(18,32,52,.105)!important;

        box-shadow:
            0 8px 21px
            rgba(18,32,52,.065)!important;
    }
}


/* ------------------------------------------------------------
   TRUE THIN INFORMATION-RAIL SCROLLBAR
   ------------------------------------------------------------ */

.dc-inventory
.dc-inventory-details-grid{
    scrollbar-width:thin;

    scrollbar-color:
        rgba(70,77,90,.26)
        transparent;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar{
    width:3px!important;
    height:3px!important;

    background:transparent!important;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-track{
    background:transparent!important;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-thumb{
    min-width:30px;

    border:0!important;

    border-radius:999px!important;

    background:
        rgba(70,77,90,.27)!important;
}


.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-thumb:hover{
    background:
        rgba(70,77,90,.42)!important;
}


/*
 * Chromium/Windows can otherwise retain large native arrow
 * buttons even when the scrollbar track itself is thin.
 */

.dc-inventory
.dc-inventory-details-grid::-webkit-scrollbar-button{
    display:none!important;

    width:0!important;
    height:0!important;
}


/* ------------------------------------------------------------
   MOBILE OPTICAL TIGHTENING
   ------------------------------------------------------------ */

@media(max-width:620px){

    .dc-inventory--featured
    .dc-inventory-photo-set,
    .dc-inventory--mosaic
    .dc-inventory-photo-set{
        gap:5px!important;
    }


    .dc-inventory
    .dc-inventory-gallery-target{
        margin-bottom:5px!important;
    }


    .dc-inventory
    .dc-inventory-details-grid{
        margin-top:5px!important;

        gap:8px!important;
    }
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

    .dc-inventory
    .dc-inventory-detail-card{
        transition:none!important;
    }


    .dc-inventory
    .dc-inventory-detail-card:hover{
        transform:none!important;
    }
}

/* END SURFLOCAL INVENTORY MASTERPIECE FINISH 2027 v1 */

/* ============================================================
   SURFLOCAL INVENTORY FIVE-LAYOUT MASTER 2027 v1

   GRID
   JUSTIFIED
   MASONRY
   VIEWER
   MOSAIC

   Featured remains locked to the approved dynamic design.

   Universal principles:
   - full photograph visible
   - natural aspect ratio
   - tight visual rhythm
   - no forced crop
   - no artificial empty rows
   ============================================================ */


/* ------------------------------------------------------------
   SHARED PHOTOGRAPH FINISH
   ------------------------------------------------------------ */

.dc-inventory--grid
.dc-inventory-photo,
.dc-inventory--justified
.dc-inventory-photo,
.dc-inventory--masonry
.dc-inventory-photo,
.dc-inventory--viewer
.dc-inventory-photo{
    margin:0!important;
    padding:0!important;

    min-width:0!important;
}


.dc-inventory--grid
.dc-inventory-photo-button,
.dc-inventory--justified
.dc-inventory-photo-button,
.dc-inventory--masonry
.dc-inventory-photo-button,
.dc-inventory--viewer
.dc-inventory-photo-button{
    display:block!important;

    width:100%!important;
    height:auto!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:10px!important;

    overflow:hidden!important;

    background:transparent!important;

    box-shadow:
        0 3px 10px
        rgba(17,24,39,.055)!important;
}


.dc-inventory--grid
.dc-inventory-photo-image,
.dc-inventory--justified
.dc-inventory-photo-image,
.dc-inventory--masonry
.dc-inventory-photo-image,
.dc-inventory--viewer
.dc-inventory-photo-image{
    display:block!important;

    width:100%!important;
    max-width:100%!important;
    height:auto!important;

    border-radius:10px!important;

    object-fit:contain!important;
    object-position:center!important;

    transform:none!important;
}


/* ============================================================
   1. GRID
   Compact, orderly catalog.
   Four equal-width columns on desktop.
   Natural photograph height.
   Fine-grid mathematics remove dead vertical space.
   ============================================================ */

.dc-inventory--grid
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    display:grid!important;

    grid-template-columns:
        repeat(
            12,
            minmax(0,1fr)
        )!important;

    grid-auto-flow:dense!important;
    grid-auto-rows:4px!important;

    gap:6px!important;

    margin:0!important;
    padding:0!important;
}


.dc-inventory--grid
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo{
    grid-column:
        span
        var(
            --dc-inventory-column-span,
            3
        )!important;
}


/* ============================================================
   2. JUSTIFIED
   Matched-height rows built from real aspect ratios by JS.
   ============================================================ */

.dc-inventory--justified
.dc-inventory-photo-set.is-dc-inventory-flow-ready{
    display:flex!important;

    flex-wrap:wrap!important;
    align-items:flex-start!important;
    align-content:flex-start!important;

    gap:6px!important;

    width:100%!important;

    margin:0!important;
    padding:0!important;
}


.dc-inventory--justified
.dc-inventory-photo-set.is-dc-inventory-flow-ready
> .dc-inventory-photo{
    width:auto!important;
    max-width:none!important;
}


/* ============================================================
   3. MASONRY / TETRIS
   Real photograph ratio determines both vertical span and
   whether the image receives 1/3, 1/2 or 2/3 of the row.
   ============================================================ */

.dc-inventory--masonry
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    display:grid!important;

    grid-template-columns:
        repeat(
            12,
            minmax(0,1fr)
        )!important;

    grid-auto-flow:dense!important;
    grid-auto-rows:4px!important;

    gap:6px!important;

    margin:0!important;
    padding:0!important;
}


.dc-inventory--masonry
.dc-inventory-photo-set.is-dc-inventory-wrap-ready
> .dc-inventory-photo{
    grid-column:
        span
        var(
            --dc-inventory-column-span,
            4
        )!important;
}


/* ============================================================
   4. VIEWER
   First photograph is the selected full-width hero.
   Supporting images form natural justified rows underneath.
   Existing click-to-select JavaScript remains authoritative.
   ============================================================ */

.dc-inventory--viewer
.dc-inventory-photo-set.is-dc-inventory-flow-ready{
    display:flex!important;

    flex-wrap:wrap!important;
    align-items:flex-start!important;
    align-content:flex-start!important;

    gap:6px!important;

    width:100%!important;

    margin:0!important;
    padding:0!important;
}


.dc-inventory--viewer
.dc-inventory-photo-set.is-dc-inventory-flow-ready
> .dc-inventory-photo:first-child{
    flex:
        0 0
        100%!important;

    width:100%!important;
    max-width:100%!important;

    margin-bottom:2px!important;
}


.dc-inventory--viewer
.dc-inventory-photo-set.is-dc-inventory-flow-ready
> .dc-inventory-photo:not(:first-child){
    width:auto!important;
    max-width:none!important;
}


/*
 * Give the selected image a little more presence without
 * changing or cropping the photograph.
 */

.dc-inventory--viewer
.dc-inventory-photo-set
> .dc-inventory-photo:first-child
.dc-inventory-photo-button{
    box-shadow:
        0 7px 22px
        rgba(17,24,39,.075)!important;
}


/* ============================================================
   5. MOSAIC
   Already uses the approved natural featured-wrap engine.
   This contract preserves that system instead of replacing it.
   ============================================================ */

.dc-inventory--mosaic
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    gap:6px!important;
}


/* ------------------------------------------------------------
   CAPTIONS
   ------------------------------------------------------------ */

.dc-inventory--grid
.dc-inventory-photo figcaption,
.dc-inventory--justified
.dc-inventory-photo figcaption,
.dc-inventory--masonry
.dc-inventory-photo figcaption,
.dc-inventory--viewer
.dc-inventory-photo figcaption{
    margin-top:3px!important;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:820px) and (min-width:621px){

    .dc-inventory--grid
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready
    > .dc-inventory-photo{
        grid-column:
            span 4!important;
    }


    .dc-inventory--masonry
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready
    > .dc-inventory-photo{
        grid-column:
            span
            min(
                var(
                    --dc-inventory-column-span,
                    6
                ),
                6
            )!important;
    }
}


/* ------------------------------------------------------------
   MOBILE FALLBACK
   The dynamic grid intentionally disengages below 620px.
   Use tight natural columns instead of forcing equal-height rows.
   ------------------------------------------------------------ */

@media(max-width:620px){

    .dc-inventory--grid
    .dc-inventory-photo-set,
    .dc-inventory--masonry
    .dc-inventory-photo-set{
        display:block!important;

        columns:2;
        column-gap:5px!important;

        margin:0!important;
        padding:0!important;
    }


    .dc-inventory--grid
    .dc-inventory-photo,
    .dc-inventory--masonry
    .dc-inventory-photo{
        display:inline-block!important;

        width:100%!important;

        margin:
            0
            0
            5px!important;

        break-inside:avoid!important;
    }


    .dc-inventory--justified
    .dc-inventory-photo-set.is-dc-inventory-flow-ready,
    .dc-inventory--viewer
    .dc-inventory-photo-set.is-dc-inventory-flow-ready{
        gap:5px!important;
    }


    .dc-inventory--viewer
    .dc-inventory-photo-set.is-dc-inventory-flow-ready
    > .dc-inventory-photo:first-child{
        margin-bottom:1px!important;
    }
}

/* END SURFLOCAL INVENTORY FIVE-LAYOUT MASTER 2027 v1 */

/* ============================================================
   SURFLOCAL INVENTORY GRID MASONRY FINAL 2027 v2

   GRID
     precise aligned catalog
     uniform 4:3 visual frames
     complete photograph remains visible

   MASONRY
     photograph #1 full-width Featured
     natural supporting masonry below

   FEATURED / JUSTIFIED / VIEWER / MOSAIC LOCKED
   ============================================================ */


/* ============================================================
   GRID — PRECISE CATALOG
   ============================================================ */

.dc-inventory--grid
.dc-inventory-photo-set,
.dc-inventory--grid
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    display:grid!important;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        )!important;

    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;

    gap:6px!important;

    width:100%!important;

    margin:0!important;
    padding:0!important;

    columns:auto!important;
}


.dc-inventory--grid
.dc-inventory-photo{
    display:block!important;

    grid-column:auto!important;
    grid-row:auto!important;
    grid-row-end:auto!important;

    width:100%!important;
    min-width:0!important;

    margin:0!important;
    padding:0!important;

    break-inside:auto!important;
}


.dc-inventory--grid
.dc-inventory-photo-button{
    display:grid!important;
    place-items:center!important;

    width:100%!important;
    height:auto!important;

    aspect-ratio:
        4 / 3!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;

    border-radius:10px!important;

    background:
        rgba(245,247,250,.72)!important;
}


.dc-inventory--grid
.dc-inventory-photo-image{
    display:block!important;

    width:100%!important;
    height:100%!important;

    max-width:100%!important;
    max-height:100%!important;

    object-fit:contain!important;
    object-position:center!important;

    border-radius:10px!important;

    transform:none!important;
}


.dc-inventory--grid
.dc-inventory-photo figcaption{
    margin:
        3px
        2px
        0!important;
}


/* ============================================================
   MASONRY — NATURAL PHOTO WALL
   ============================================================ */

.dc-inventory--masonry
.dc-inventory-photo-set,
.dc-inventory--masonry
.dc-inventory-photo-set.is-dc-inventory-wrap-ready{
    display:block!important;

    width:100%!important;

    column-count:3!important;
    column-gap:6px!important;

    margin:0!important;
    padding:0!important;
}


/*
 * Photograph #1 is the visual introduction.
 * It owns the complete width.
 */

.dc-inventory--masonry
.dc-inventory-photo-set
> .dc-inventory-photo:first-child{
    display:block!important;

    column-span:all!important;

    width:100%!important;

    margin:
        0
        0
        6px!important;

    padding:0!important;

    break-inside:avoid!important;
}


/*
 * Everything afterward naturally fills the available columns.
 */

.dc-inventory--masonry
.dc-inventory-photo-set
> .dc-inventory-photo:not(:first-child){
    display:inline-block!important;

    width:100%!important;

    margin:
        0
        0
        6px!important;

    padding:0!important;

    vertical-align:top!important;

    break-inside:avoid!important;
    page-break-inside:avoid!important;
}


.dc-inventory--masonry
.dc-inventory-photo{
    grid-column:auto!important;
    grid-row:auto!important;
    grid-row-end:auto!important;
}


.dc-inventory--masonry
.dc-inventory-photo-button{
    display:block!important;

    width:100%!important;
    height:auto!important;

    aspect-ratio:auto!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;

    border-radius:10px!important;
}


.dc-inventory--masonry
.dc-inventory-photo-image{
    display:block!important;

    width:100%!important;
    height:auto!important;

    max-width:100%!important;

    object-fit:contain!important;
    object-position:center!important;

    border-radius:10px!important;

    transform:none!important;
}


.dc-inventory--masonry
.dc-inventory-photo figcaption{
    margin:
        3px
        2px
        0!important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

    .dc-inventory--grid
    .dc-inventory-photo-set,
    .dc-inventory--grid
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            )!important;
    }


    .dc-inventory--masonry
    .dc-inventory-photo-set,
    .dc-inventory--masonry
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        column-count:2!important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:620px){

    .dc-inventory--grid
    .dc-inventory-photo-set,
    .dc-inventory--grid
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        display:grid!important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )!important;

        gap:5px!important;

        columns:auto!important;
    }


    .dc-inventory--masonry
    .dc-inventory-photo-set,
    .dc-inventory--masonry
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        display:block!important;

        column-count:2!important;
        column-gap:5px!important;
    }


    .dc-inventory--masonry
    .dc-inventory-photo-set
    > .dc-inventory-photo:first-child{
        column-span:all!important;

        margin-bottom:5px!important;
    }


    .dc-inventory--masonry
    .dc-inventory-photo-set
    > .dc-inventory-photo:not(:first-child){
        margin-bottom:5px!important;
    }
}


/* ============================================================
   VERY NARROW MOBILE
   ============================================================ */

@media(max-width:390px){

    .dc-inventory--grid
    .dc-inventory-photo-set,
    .dc-inventory--grid
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        grid-template-columns:1fr!important;
    }


    .dc-inventory--masonry
    .dc-inventory-photo-set,
    .dc-inventory--masonry
    .dc-inventory-photo-set.is-dc-inventory-wrap-ready{
        column-count:1!important;
    }
}

/* END SURFLOCAL INVENTORY GRID MASONRY FINAL 2027 v2 */


/* ============================================================
   SURFLOCAL LARGE SITE HEADER 2027 v1

   Locked global header.
   Small sites remain simple.
   Large sites receive:
     - five clean permanent top links
     - grouped Explore mega navigation
     - dedicated mobile drawer
     - real company logo geometry

   ============================================================ */


/* ============================================================
   COMPANY LOGO
   ============================================================ */

.dc-site-brand{
    min-width:0;
}

.dc-site-brand
.dc-preview-assigned-logo{
    display:block!important;

    width:auto!important;
    height:
        clamp(
            36px,
            var(--dc-theme-logo-size),
            58px
        )!important;

    max-width:
        min(
            220px,
            28vw
        )!important;

    max-height:58px!important;

    object-fit:contain!important;
    object-position:left center!important;

    flex:0 0 auto;
}


/* ============================================================
   LARGE DESKTOP NAVIGATION
   ============================================================ */

.dc-global-header-main{
    position:relative;
}

.dc-global-primary-nav--large{
    display:flex!important;
    align-items:center;
    justify-content:center;

    gap:4px;

    min-width:0;
}

.dc-global-primary-nav--large
> .dc-nav-direct-link,
.dc-nav-overflow-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;

    padding:8px 11px;

    border:0;
    border-radius:10px;

    color:var(--dc-theme-text);

    background:transparent;

    font:
        inherit;

    font-family:
        var(--dc-theme-nav-font);

    font-size:
        var(--dc-theme-nav-size);

    font-weight:700;

    line-height:1.2;

    text-decoration:none;

    cursor:pointer;

    transition:
        background-color .16s ease,
        transform .16s ease,
        color .16s ease;
}

.dc-global-primary-nav--large
> .dc-nav-direct-link:hover,
.dc-nav-overflow-toggle:hover{
    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary) 8%,
            transparent
        );

    transform:
        translateY(-1px);
}

.dc-global-primary-nav--large
> .dc-nav-direct-link[aria-current="page"]{
    color:
        var(--dc-theme-primary);

    background:
        color-mix(
            in srgb,
            var(--dc-theme-primary) 10%,
            transparent
        );
}


/* ============================================================
   EXPLORE / MEGA PANEL
   ============================================================ */

.dc-nav-overflow{
    position:relative;
}

.dc-nav-overflow-toggle{
    gap:6px;
}

.dc-nav-mega{
    position:absolute;

    z-index:250;

    top:
        calc(
            100% + 12px
        );

    right:0;

    display:none;

    width:
        min(
            820px,
            calc(100vw - 40px)
        );

    max-height:
        min(
            72vh,
            720px
        );

    overflow:auto;

    padding:20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--dc-theme-border) 82%,
            transparent
        );

    border-radius:18px;

    background:
        color-mix(
            in srgb,
            var(--dc-theme-surface) 96%,
            transparent
        );

    box-shadow:
        0 28px 80px
        rgba(15,23,42,.20);

    backdrop-filter:
        blur(22px);
}

.dc-nav-overflow.is-open
.dc-nav-mega{
    display:block;
}

.dc-nav-mega-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    padding:
        2px
        4px
        16px;

    border-bottom:
        1px solid
        var(--dc-theme-border);
}

.dc-nav-mega-heading span{
    color:
        var(--dc-theme-muted);

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.10em;
}

.dc-nav-mega-heading strong{
    font-size:
        clamp(
            1.15rem,
            2vw,
            1.45rem
        );
}

.dc-nav-mega-groups{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap:14px;

    padding-top:16px;
}

.dc-nav-mega-group{
    min-width:0;

    padding:14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--dc-theme-border) 72%,
            transparent
        );

    border-radius:14px;

    background:
        color-mix(
            in srgb,
            var(--dc-theme-surface-alt) 48%,
            var(--dc-theme-surface)
        );
}

.dc-nav-mega-group
> strong{
    display:block;

    margin-bottom:8px;

    color:
        var(--dc-theme-text);

    font-size:.78rem;

    letter-spacing:.04em;

    text-transform:uppercase;
}

.dc-nav-mega-group-links{
    display:grid;

    gap:2px;
}

.dc-nav-mega-link{
    display:block;

    padding:7px 8px;

    border-radius:9px;

    color:
        var(--dc-theme-text);

    text-decoration:none;

    font-size:.91rem;

    line-height:1.25;

    transition:
        background-color .15s ease,
        transform .15s ease;
}

.dc-nav-mega-link:hover{
    background:
        var(--dc-theme-surface);

    transform:
        translateX(2px);
}

.dc-nav-mega-link[aria-current="page"]{
    color:
        var(--dc-theme-primary);

    font-weight:800;
}

.dc-nav-group-note{
    display:block;

    margin-top:9px;

    padding:
        9px
        8px
        0;

    border-top:
        1px solid
        var(--dc-theme-border);

    color:
        var(--dc-theme-muted);

    font-size:.78rem;

    line-height:1.35;
}


/* ============================================================
   MOBILE CONTROLS — HIDDEN ON DESKTOP
   ============================================================ */

.dc-nav-mobile-toggle,
.dc-nav-mobile-close{
    display:none;
}


/* ============================================================
   TABLET / MOBILE DRAWER
   ============================================================ */

@media(max-width:860px){

    .dc-global-header-main{
        grid-template-columns:
            minmax(0,1fr)
            auto
            auto!important;

        align-items:center;
    }

    .dc-nav-mobile-toggle{
        display:inline-flex;

        align-items:center;
        justify-content:center;

        gap:7px;

        min-height:42px;

        padding:
            8px
            12px;

        border:
            1px solid
            var(--dc-theme-border);

        border-radius:11px;

        background:
            var(--dc-theme-surface);

        color:
            var(--dc-theme-text);

        font:
            inherit;

        font-weight:800;

        cursor:pointer;
    }

    .dc-global-primary-nav--large{
        position:fixed!important;

        z-index:1000;

        top:0;
        right:0;
        bottom:0;

        display:block!important;

        width:
            min(
                88vw,
                390px
            )!important;

        height:
            100dvh;

        padding:
            76px
            20px
            30px!important;

        overflow:auto;

        background:
            color-mix(
                in srgb,
                var(--dc-theme-surface) 97%,
                transparent
            );

        box-shadow:
            -24px 0 70px
            rgba(15,23,42,.24);

        backdrop-filter:
            blur(24px);

        transform:
            translateX(106%);

        transition:
            transform
            .24s
            cubic-bezier(
                .2,
                .72,
                .25,
                1
            );
    }

    .dc-global-primary-nav--large.is-mobile-open{
        transform:
            translateX(0);
    }

    .dc-nav-mobile-close{
        position:absolute;

        top:18px;
        right:18px;

        display:inline-flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        border:
            1px solid
            var(--dc-theme-border);

        border-radius:999px;

        background:
            var(--dc-theme-surface-alt);

        color:
            var(--dc-theme-text);

        font-size:1.45rem;

        line-height:1;

        cursor:pointer;
    }

    .dc-global-primary-nav--large
    > .dc-nav-direct-link{
        display:flex!important;

        justify-content:flex-start;

        width:100%;

        min-height:48px;

        padding:
            11px
            12px;

        margin-bottom:3px;

        font-size:1rem;

        border-bottom:
            1px solid
            color-mix(
                in srgb,
                var(--dc-theme-border) 70%,
                transparent
            );
    }

    .dc-nav-overflow{
        width:100%;

        margin-top:6px;
    }

    .dc-nav-overflow-toggle{
        width:100%;

        min-height:48px;

        justify-content:space-between;

        padding:
            11px
            12px;

        background:
            var(--dc-theme-surface-alt);
    }

    .dc-nav-mega{
        position:static;

        width:100%;

        max-height:none;

        margin-top:8px;

        padding:10px;

        border:0;

        border-radius:13px;

        box-shadow:none;

        background:
            color-mix(
                in srgb,
                var(--dc-theme-surface-alt) 50%,
                transparent
            );

        backdrop-filter:none;
    }

    .dc-nav-mega-heading{
        display:block;

        padding:
            4px
            4px
            12px;
    }

    .dc-nav-mega-heading strong{
        display:block;

        margin-top:3px;
    }

    .dc-nav-mega-groups{
        grid-template-columns:1fr;

        gap:8px;

        padding-top:10px;
    }

    .dc-nav-mega-group{
        padding:12px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:580px){

    .dc-global-header-main{
        padding-left:14px!important;
        padding-right:14px!important;
    }

    .dc-site-brand-copy small{
        display:none;
    }

    .dc-site-brand
    .dc-preview-assigned-logo{
        max-width:
            min(
                165px,
                42vw
            )!important;

        height:
            clamp(
                32px,
                var(--dc-theme-logo-size),
                48px
            )!important;
    }

    .dc-nav-mobile-toggle{
        padding:
            8px
            10px;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.dc-nav-mobile-toggle:focus-visible,
.dc-nav-mobile-close:focus-visible,
.dc-nav-overflow-toggle:focus-visible,
.dc-nav-mega-link:focus-visible,
.dc-nav-direct-link:focus-visible{
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--dc-theme-primary) 38%,
            transparent
        );

    outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){

    .dc-global-primary-nav--large,
    .dc-nav-mega-link,
    .dc-nav-overflow-toggle,
    .dc-nav-direct-link{
        transition:none!important;
    }
}

/* END SURFLOCAL LARGE SITE HEADER 2027 v1 */

/* SURFLOCAL SLIDESHOW MEDIA-ONLY LAYOUT 2027 v1 */
.dc-slideshow-shell--media-only .dc-slideshow-layout{
    display:block;
}
.dc-slideshow-shell--media-only .dc-slideshow-placement{
    width:100%;
    max-width:none;
    grid-column:1 / -1;
}
.dc-slideshow-shell--media-only .dc-slideshow{
    width:100%;
    max-width:none;
}
/* END SURFLOCAL SLIDESHOW MEDIA-ONLY LAYOUT 2027 v1 */


/* Domain Creator assigned-media preview v1 */

.dc-preview-assigned-media-group{
    width:min(
        var(--dc-content-width,1180px),
        calc(100% - 36px)
    );
    margin:clamp(1rem,3vw,2rem) auto;
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(220px,1fr)
    );
    gap:16px;
}

.dc-preview-assigned-media{
    margin:0;
    min-width:0;
}

.dc-preview-assigned-media img{
    display:block;
    width:100%;
    height:clamp(210px,32vw,460px);
    border-radius:var(--dc-card-radius,22px);
    background:var(--dc-surface-alt,#eaf5ff);
    box-shadow:var(
        --dc-shadow-card,
        0 18px 45px rgba(2,6,23,.16)
    );
}

.dc-preview-assigned-media figcaption{
    margin-top:8px;
    color:var(--dc-text-muted,#526a80);
    font-size:.82rem;
    line-height:1.45;
}

.dc-preview-assigned-media-group--hero_media img{
    height:clamp(260px,45vw,640px);
}

.dc-preview-assigned-media-group--primary_image{
    max-width:620px;
}

.dc-preview-assigned-media-group--gallery_image{
    grid-template-columns:repeat(
        auto-fit,
        minmax(190px,1fr)
    );
}

.dc-preview-assigned-media-group--gallery_image img{
    height:clamp(170px,24vw,300px);
}

.dc-preview-assigned-logo{
    display:block;
    width:var(--dc-logo-size,56px);
    height:var(--dc-logo-size,56px);
    border-radius:12px;
    object-fit:contain;
    background:#fff;
}

@media(max-width:680px){
    .dc-preview-assigned-media-group{
        width:min(100% - 24px,1180px);
        grid-template-columns:1fr;
    }
}

/* Domain Creator Step 11E Natural Offer Media Architecture v5 */

.dc-preview-type--offer
.dc-preview-offer-media{
    grid-area:media;
    min-width:0;
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    display:block;
    align-self:center;
    overflow:hidden;
    box-sizing:border-box;
    background:transparent;
}

.dc-preview-type--offer
.dc-preview-offer-media
.dc-preview-assigned-media{
    width:100%;
    height:auto;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    display:block;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.dc-preview-type--offer
.dc-preview-offer-media
img{
    display:block;
    width:100%;
    height:auto !important;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    object-fit:initial !important;
    object-position:center center !important;
    background:transparent;
    box-shadow:none;
}

.dc-preview-type--offer
.dc-preview-offer-media
figcaption{
    display:none;
}

.dc-preview-offer--wide-ticket
.dc-preview-offer-media{
    border-left:1px solid rgba(200,132,18,.2);
    border-radius:0 22px 22px 0;
}

.dc-preview-offer--small-card
.dc-preview-offer-media{
    border-right:1px solid rgba(200,132,18,.2);
    border-radius:22px 0 0 22px;
}

.dc-preview-canvas[data-preview-mode="tablet"]
.dc-preview-offer-media,
.dc-preview-canvas[data-preview-mode="mobile"]
.dc-preview-offer-media{
    height:auto;
    min-height:0;
    border-left:0;
    border-right:0;
    border-radius:20px 20px 0 0;
}

@media (max-width:860px){
    .dc-preview-type--offer
    .dc-preview-offer-media{
        height:auto;
        min-height:0;
        border-left:0;
        border-right:0;
        border-radius:22px 22px 0 0;
    }
}

/* End Domain Creator Step 11E Natural Offer Media Architecture v5 */

/* SurfLocal UX 2027 Gallery */
.dc-preview-type--gallery{
    padding-block:clamp(34px,4.5vw,58px) !important;
}

.dc-preview-type--gallery .dc-preview-shell{
    width:min(1320px,calc(100% - clamp(28px,5vw,72px)));
}

.dc-preview-type--gallery .dc-preview-section-heading{
    max-width:680px;
    margin-bottom:clamp(20px,2.8vw,30px);
}

.dc-preview-type--gallery .dc-preview-section-heading h2{
    margin-block:7px 10px;
}

.dc-preview-type--gallery .dc-preview-section-heading p{
    max-width:62ch;
    margin:0;
    line-height:1.6;
}

.dc-gallery,
.dc-preview-assigned-media-group.dc-gallery{
    display:block;
    width:100%;
    max-width:none;
    margin:0;
}

.dc-gallery-items{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(10px,1.25vw,16px);
    align-items:start;
}

.dc-gallery-item{
    min-width:0;
    margin:0;
}

.dc-gallery-item[hidden]{
    display:none !important;
}

.dc-gallery-open{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:12px;
    background:var(--dc-surface-alt,#e8f0f6);
    box-shadow:0 1px 0 rgba(15,35,53,.06);
    color:inherit;
    cursor:zoom-in;
    text-align:left;
    -webkit-tap-highlight-color:transparent;
}

.dc-gallery-open::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(255,255,255,.26);
    border-radius:inherit;
    pointer-events:none;
}

.dc-gallery-open:disabled{
    cursor:default;
}

.dc-gallery-open:focus-visible,
.dc-gallery-more:focus-visible,
.dc-gallery-less:focus-visible,
.dc-gallery-lightbox button:focus-visible,
.dc-gallery-inquiry input:focus-visible,
.dc-gallery-inquiry textarea:focus-visible{
    outline:3px solid #20b486;
    outline-offset:3px;
}

.dc-gallery-media{
    display:block;
    aspect-ratio:4/3;
    overflow:hidden;
    background:linear-gradient(135deg,#edf3f7,#dfeaf1);
}

.dc-gallery-media img{
    display:block;
    width:100%;
    height:100%;
    border-radius:0;
    object-fit:cover;
    transform:scale(1.001);
    transition:transform .48s cubic-bezier(.2,.72,.2,1),filter .3s ease;
    will-change:transform;
}

@media(hover:hover) and (pointer:fine){
    .dc-gallery-open:not(:disabled):hover img{
        transform:scale(1.055);
    }
}

.dc-gallery-item figcaption{
    margin:8px 2px 0;
    color:var(--dc-text-muted,#526a80);
    font-size:clamp(.79rem,.75rem + .15vw,.88rem);
    line-height:1.45;
    overflow-wrap:anywhere;
}

.dc-gallery--captions-overlay .dc-gallery-item{
    position:relative;
}

.dc-gallery--captions-overlay figcaption{
    position:absolute;
    inset:auto 0 0;
    margin:0;
    padding:38px 12px 11px;
    border-radius:0 0 12px 12px;
    background:linear-gradient(transparent,rgba(3,14,25,.82));
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.24);
    pointer-events:none;
}

.dc-gallery--captions-hidden figcaption{
    display:none;
}

.dc-gallery--masonry .dc-gallery-items{
    display:block;
    columns:4 230px;
    column-gap:clamp(10px,1.25vw,16px);
}

.dc-gallery--masonry .dc-gallery-item{
    break-inside:avoid;
    margin-bottom:clamp(10px,1.25vw,16px);
}

.dc-gallery--masonry .dc-gallery-media{
    aspect-ratio:auto;
}

.dc-gallery--masonry .dc-gallery-media img{
    height:auto;
    aspect-ratio:auto;
}

.dc-gallery--featured .dc-gallery-items{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.dc-gallery--featured .dc-gallery-item:first-child{
    grid-column:span 2;
    grid-row:span 2;
}

.dc-gallery--featured .dc-gallery-item:first-child .dc-gallery-media{
    aspect-ratio:1/1;
}

.dc-gallery--count-1 .dc-gallery-items,
.dc-gallery--masonry.dc-gallery--count-1 .dc-gallery-items{
    display:grid;
    grid-template-columns:minmax(0,min(100%,920px));
    justify-content:center;
    columns:auto;
}

.dc-gallery--count-1 .dc-gallery-media{
    aspect-ratio:16/10;
}

.dc-gallery--count-2 .dc-gallery-items,
.dc-gallery--masonry.dc-gallery--count-2 .dc-gallery-items{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    columns:auto;
}

.dc-gallery--count-3 .dc-gallery-items,
.dc-gallery--masonry.dc-gallery--count-3 .dc-gallery-items{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    columns:auto;
}

.dc-gallery--count-1 .dc-gallery-item,
.dc-gallery--count-2 .dc-gallery-item,
.dc-gallery--count-3 .dc-gallery-item{
    margin-bottom:0;
}

.dc-gallery--featured.dc-gallery--count-1 .dc-gallery-item:first-child,
.dc-gallery--featured.dc-gallery--count-2 .dc-gallery-item:first-child,
.dc-gallery--featured.dc-gallery--count-3 .dc-gallery-item:first-child{
    grid-column:auto;
    grid-row:auto;
}

.dc-gallery-controls,
.dc-video-controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:clamp(20px,3vw,30px) auto 0;
}

.dc-gallery-more,
.dc-gallery-less,
.dc-gallery-inquire,
.dc-gallery-inquiry button[type="submit"]{
    min-height:46px;
    padding:10px 19px;
    border:1px solid transparent;
    border-radius:999px;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}

.dc-gallery-more,
.dc-gallery-less{
    display:block;
    margin:0;
    border-color:rgba(19,54,76,.18);
    background:rgba(255,255,255,.78);
    color:#173b53;
    box-shadow:0 6px 20px rgba(16,45,66,.07);
}

.dc-gallery-more[hidden],
.dc-gallery-less[hidden]{
    display:none;
}

@media(hover:hover) and (pointer:fine){
    .dc-gallery-more:hover,
    .dc-gallery-less:hover,
    .dc-gallery-inquire:hover,
    .dc-gallery-inquiry button[type="submit"]:hover{
        transform:translateY(-1px);
    }

    .dc-gallery-more:hover,
    .dc-gallery-less:hover{
        border-color:rgba(19,54,76,.28);
        background:#fff;
    }
}

.dc-gallery-lightbox[hidden],
.dc-gallery-inquiry[hidden]{
    display:none;
}

.dc-gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:100000;
    display:grid;
    place-items:center;
    padding:clamp(10px,2.3vw,28px);
    overscroll-behavior:contain;
}

.dc-gallery-lightbox-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(2,9,16,.92);
    cursor:zoom-out;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.dc-gallery-lightbox-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(1280px,100%);
    max-height:calc(100vh - clamp(20px,4.6vw,56px));
    max-height:calc(100dvh - clamp(20px,4.6vw,56px));
    overflow:auto;
    overscroll-behavior:contain;
    padding:10px 12px 14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:rgba(8,20,31,.96);
    color:#fff;
    box-shadow:0 30px 100px rgba(0,0,0,.52);
}

.dc-gallery-lightbox-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:0 2px 6px 10px;
}

.dc-gallery-lightbox-toolbar [data-dc-gallery-position]{
    color:#d5e1e9;
    font-size:.78rem;
    font-variant-numeric:tabular-nums;
    font-weight:800;
    letter-spacing:.08em;
}

.dc-gallery-lightbox-toolbar button,
.dc-gallery-lightbox-stage>button{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    padding:0;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.dc-gallery-lightbox-stage{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 52px;
    align-items:center;
    gap:clamp(8px,1.5vw,18px);
    min-height:0;
}

.dc-gallery-lightbox-stage figure{
    min-width:0;
    margin:0;
    text-align:center;
}

.dc-gallery-lightbox-stage img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:72vh;
    max-height:72dvh;
    margin:auto;
    border-radius:10px;
    background:#02070b;
    object-fit:contain;
    box-shadow:0 14px 44px rgba(0,0,0,.3);
}

.dc-gallery-lightbox-stage figcaption{
    max-width:760px;
    margin:11px auto 0;
    padding-inline:6px;
    color:#c9d7e0;
    font-size:.9rem;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.dc-gallery-lightbox-stage figcaption:empty{
    display:none;
}

.dc-gallery-inquire{
    align-self:center;
    margin:14px auto 0;
    background:#f6fafc;
    color:#102d40;
}

.dc-gallery-inquire[disabled]{
    opacity:.68;
    cursor:not-allowed;
}

.dc-gallery-inquiry{
    width:min(760px,100%);
    box-sizing:border-box;
    margin:14px auto 0;
    padding:18px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    background:#f8fbfd;
    color:#17324f;
}

.dc-gallery-inquiry h3{
    margin:0 0 14px;
    font-size:1.15rem;
}

.dc-gallery-inquiry-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.dc-gallery-inquiry label{
    display:block;
    min-width:0;
    font-size:.87rem;
    font-weight:750;
}

.dc-gallery-inquiry input,
.dc-gallery-inquiry textarea{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:6px;
    padding:11px 12px;
    border:1px solid #cbd8e2;
    border-radius:9px;
    background:#fff;
    color:#17324f;
    font:inherit;
}

.dc-gallery-inquiry textarea{
    min-height:96px;
    resize:vertical;
}

.dc-gallery-inquiry button[type="submit"]{
    margin:14px 0 0;
    background:#0b7654;
    color:#fff;
}

.dc-gallery-scroll-lock{
    overflow:hidden;
    overscroll-behavior:none;
}

@media(max-width:960px){
    .dc-preview-type--gallery .dc-preview-shell{
        width:min(100% - 34px,1320px);
    }

    .dc-gallery-items,
    .dc-gallery--featured .dc-gallery-items{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .dc-gallery--masonry .dc-gallery-items{
        columns:3 190px;
    }

    .dc-gallery--featured .dc-gallery-item:first-child{
        grid-column:span 2;
    }

    .dc-gallery-inquiry-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:680px){
    .dc-preview-type--gallery{
        padding-block:32px !important;
    }

    .dc-preview-type--gallery .dc-preview-shell{
        width:min(100% - 24px,1320px);
    }

    .dc-preview-type--gallery .dc-preview-section-heading{
        margin-bottom:18px;
    }

    .dc-gallery-items,
    .dc-gallery--featured .dc-gallery-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .dc-gallery--count-2 .dc-gallery-items,
    .dc-gallery--count-3 .dc-gallery-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dc-gallery--masonry .dc-gallery-items{
        columns:2 140px;
        column-gap:8px;
    }

    .dc-gallery--masonry .dc-gallery-item{
        margin-bottom:8px;
    }

    .dc-gallery-open{
        border-radius:9px;
    }

    .dc-gallery--captions-overlay figcaption{
        border-radius:0 0 9px 9px;
        padding:32px 9px 8px;
        font-size:.76rem;
    }

    .dc-gallery--featured .dc-gallery-item:first-child{
        grid-column:span 2;
        grid-row:auto;
    }

    .dc-gallery--featured .dc-gallery-item:first-child .dc-gallery-media{
        aspect-ratio:16/10;
    }

    .dc-gallery-lightbox{
        padding:0;
    }

    .dc-gallery-lightbox-panel{
        width:100%;
        max-height:100vh;
        max-height:100dvh;
        min-height:100vh;
        min-height:100dvh;
        padding:8px 8px max(12px,env(safe-area-inset-bottom));
        border:0;
        border-radius:0;
    }

    .dc-gallery-lightbox-toolbar{
        padding-top:max(0px,env(safe-area-inset-top));
    }

    .dc-gallery-lightbox-stage{
        position:relative;
        display:block;
        flex:1 1 auto;
    }

    .dc-gallery-lightbox-stage>button{
        position:absolute;
        z-index:2;
        top:50%;
        transform:translateY(-50%);
        background:rgba(4,16,26,.68);
    }

    .dc-gallery-lightbox-stage>[data-dc-gallery-prev]{
        left:6px;
    }

    .dc-gallery-lightbox-stage>[data-dc-gallery-next]{
        right:6px;
    }

    .dc-gallery-lightbox-stage img{
        max-height:64vh;
        max-height:64dvh;
        border-radius:8px;
    }

    .dc-gallery-lightbox-stage figcaption{
        padding-inline:12px;
    }

    .dc-gallery-inquiry{
        padding:15px;
        border-radius:12px;
    }

    .dc-gallery-inquiry-grid{
        grid-template-columns:1fr;
        gap:10px;
    }
}

@media(max-width:390px){
    .dc-gallery:not(.dc-gallery--featured) .dc-gallery-items{
        grid-template-columns:1fr;
    }

    .dc-gallery--masonry .dc-gallery-items{
        columns:1;
    }

    .dc-gallery--count-1 .dc-gallery-items,
    .dc-gallery--count-2 .dc-gallery-items,
    .dc-gallery--count-3 .dc-gallery-items{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    .dc-gallery-media img,
    .dc-gallery-more,
    .dc-gallery-less,
    .dc-gallery-inquire,
    .dc-gallery-inquiry button[type="submit"]{
        transition:none;
    }

    .dc-gallery-open:hover img,
    .dc-gallery-more:hover,
    .dc-gallery-less:hover,
    .dc-gallery-inquire:hover,
    .dc-gallery-inquiry button[type="submit"]:hover{
        transform:none;
    }
}
/* End SurfLocal UX 2027 Gallery */

/* SurfLocal UX 2027 Video Library */
.dc-preview-type--video_gallery{
    padding-block:clamp(38px,5vw,64px) !important;
}

.dc-preview-type--video_gallery .dc-preview-shell{
    width:min(1280px,calc(100% - clamp(28px,5vw,68px)));
}

.dc-preview-type--video_gallery .dc-preview-section-heading{
    max-width:700px;
    margin-bottom:clamp(22px,3vw,32px);
}

.dc-video-library{
    width:100%;
}

.dc-video-items{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,2vw,28px) clamp(12px,1.7vw,22px);
}

.dc-video-library--count-1 .dc-video-items{
    grid-template-columns:minmax(0,1fr);
}

.dc-video-library--count-2 .dc-video-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dc-video-library--count-3 .dc-video-items{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.dc-video-library--featured.dc-video-library--count-1 .dc-video-item:first-child,
.dc-video-library--featured.dc-video-library--count-2 .dc-video-item:first-child,
.dc-video-library--featured.dc-video-library--count-3 .dc-video-item:first-child{
    grid-column:auto;
}

.dc-video-shell--count-1{
    display:grid;
    grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);
    align-items:center;
    gap:clamp(28px,5vw,72px);
}

.dc-video-shell--count-1 .dc-preview-section-heading{
    margin-bottom:0;
}

.dc-video-item{
    min-width:0;
    margin:0;
}

.dc-video-item[hidden]{
    display:none !important;
}

.dc-video-open{
    display:block;
    width:100%;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:12px;
    background:#071827;
    color:#fff;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(11,35,51,.12);
    -webkit-tap-highlight-color:transparent;
}

.dc-video-open:focus-visible,
.dc-video-more:focus-visible,
.dc-video-less:focus-visible,
.dc-video-dialog button:focus-visible,
.dc-video-player a:focus-visible{
    outline:3px solid #20b486;
    outline-offset:3px;
}

.dc-video-poster{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    overflow:hidden;
    background:linear-gradient(145deg,#143c54,#071827);
}

.dc-video-poster img,
.dc-video-poster-fallback{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .48s cubic-bezier(.2,.72,.2,1),filter .3s ease;
}

.dc-video-poster-fallback{
    background:
        radial-gradient(circle at 72% 25%,rgba(46,191,151,.28),transparent 28%),
        linear-gradient(145deg,#194860,#081925 72%);
}

.dc-video-poster::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(2,11,18,.42));
    pointer-events:none;
}

.dc-video-play{
    position:absolute;
    z-index:1;
    top:50%;
    left:50%;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border:1px solid rgba(255,255,255,.48);
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 28px rgba(0,0,0,.22);
    transform:translate(-50%,-50%);
    transition:transform .24s ease,background-color .24s ease;
}

.dc-video-play span{
    width:0;
    height:0;
    margin-left:4px;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:13px solid #0b7654;
}

.dc-video-duration{
    position:absolute;
    z-index:1;
    right:9px;
    bottom:9px;
    padding:4px 7px;
    border-radius:6px;
    background:rgba(2,11,18,.82);
    color:#fff;
    font-size:.72rem;
    font-variant-numeric:tabular-nums;
    font-weight:800;
    letter-spacing:.03em;
}

@media(hover:hover) and (pointer:fine){
    .dc-video-open:hover .dc-video-poster img,
    .dc-video-open:hover .dc-video-poster-fallback{
        transform:scale(1.035);
        filter:saturate(1.06);
    }

    .dc-video-open:hover .dc-video-play{
        background:#fff;
        transform:translate(-50%,-50%) scale(1.06);
    }
}

.dc-video-copy{
    padding:12px 2px 0;
}

.dc-video-copy h3{
    margin:0;
    color:var(--dc-text,#16324c);
    font-size:clamp(1rem,.94rem + .25vw,1.17rem);
    line-height:1.25;
    letter-spacing:-.015em;
}

.dc-video-copy p{
    margin:7px 0 0;
    color:var(--dc-text-muted,#60758a);
    font-size:.88rem;
    line-height:1.52;
    overflow-wrap:anywhere;
}

.dc-video-library--featured .dc-video-item:first-child{
    grid-column:span 2;
}

.dc-video-library--featured .dc-video-item:first-child .dc-video-copy h3{
    font-size:clamp(1.15rem,1rem + .55vw,1.45rem);
}

.dc-video-more,
.dc-video-less{
    display:block;
    min-height:46px;
    margin:0;
    padding:10px 19px;
    border:1px solid rgba(19,54,76,.18);
    border-radius:999px;
    background:#fff;
    color:#173b53;
    box-shadow:0 6px 20px rgba(16,45,66,.07);
    font:inherit;
    font-weight:800;
    cursor:pointer;
}

.dc-video-more[hidden],
.dc-video-less[hidden]{
    display:none;
}

.dc-video-empty{
    padding:clamp(28px,5vw,54px);
    border:1px dashed rgba(31,74,99,.24);
    border-radius:12px;
    background:var(--dc-surface-alt,#f4f8fc);
    color:var(--dc-text-muted,#60758a);
    text-align:center;
}

.dc-video-empty p{
    margin:0;
}

.dc-video-dialog[hidden]{
    display:none;
}

.dc-video-dialog{
    position:fixed;
    inset:0;
    z-index:100000;
    display:grid;
    place-items:center;
    padding:clamp(10px,2.5vw,30px);
    overscroll-behavior:contain;
}

.dc-video-dialog-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(2,9,16,.93);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.dc-video-dialog-panel{
    position:relative;
    width:min(1180px,100%);
    max-height:calc(100vh - 30px);
    max-height:calc(100dvh - 30px);
    overflow:auto;
    padding:10px 12px 18px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:#071827;
    color:#fff;
    box-shadow:0 32px 110px rgba(0,0,0,.55);
}

.dc-video-dialog-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    padding:0 2px 6px 10px;
}

.dc-video-dialog-toolbar span{
    color:#d5e1e9;
    font-size:.78rem;
    font-variant-numeric:tabular-nums;
    font-weight:800;
    letter-spacing:.08em;
}

.dc-video-dialog-toolbar button,
.dc-video-dialog-actions button{
    min-width:48px;
    min-height:48px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.1);
    color:#fff;
    font:inherit;
    font-weight:750;
    cursor:pointer;
}

.dc-video-dialog-toolbar button{
    width:48px;
    padding:0;
    font-size:1.35rem;
}

.dc-video-stage,
.dc-video-player{
    width:100%;
    min-width:0;
}

.dc-video-player{
    display:grid;
    place-items:center;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:10px;
    background:#02070b;
}

.dc-video-player iframe,
.dc-video-player video{
    display:block;
    width:100%;
    height:100%;
    border:0;
    object-fit:contain;
}

.dc-video-player-message{
    max-width:520px;
    padding:28px;
    color:#d7e3ea;
    text-align:center;
}

.dc-video-player-message a{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    margin-top:12px;
    padding:0 18px;
    border-radius:999px;
    background:#fff;
    color:#12384f;
    font-weight:800;
    text-decoration:none;
}

.dc-video-dialog-copy{
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:24px;
    padding:15px 4px 0;
}

.dc-video-dialog-copy h3{
    margin:0;
    color:#fff;
    font-size:clamp(1.12rem,1rem + .5vw,1.45rem);
}

.dc-video-dialog-copy p{
    max-width:70ch;
    margin:7px 0 0;
    color:#c4d4de;
    line-height:1.5;
}

.dc-video-dialog-copy p:empty{
    display:none;
}

.dc-video-dialog-actions{
    display:flex;
    gap:8px;
    flex:0 0 auto;
}

.dc-video-dialog-actions button{
    padding:0 16px;
}

@media(max-width:900px){
    .dc-video-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dc-video-library--featured .dc-video-item:first-child{
        grid-column:span 2;
    }

    .dc-video-library--count-3 .dc-video-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dc-video-shell--count-1{
        display:block;
    }

    .dc-video-shell--count-1 .dc-preview-section-heading{
        margin-bottom:clamp(22px,3vw,32px);
    }
}

@media(max-width:620px){
    .dc-preview-type--video_gallery{
        padding-block:32px !important;
    }

    .dc-preview-type--video_gallery .dc-preview-shell{
        width:min(100% - 24px,1280px);
    }

    .dc-video-items{
        grid-template-columns:1fr;
        gap:22px;
    }

    .dc-video-library--featured .dc-video-item:first-child{
        grid-column:auto;
    }

    .dc-video-library--count-2 .dc-video-items,
    .dc-video-library--count-3 .dc-video-items{
        grid-template-columns:1fr;
    }

    .dc-video-dialog{
        padding:0;
    }

    .dc-video-dialog-panel{
        width:100%;
        max-height:100vh;
        max-height:100dvh;
        min-height:100vh;
        min-height:100dvh;
        box-sizing:border-box;
        padding:8px 8px max(14px,env(safe-area-inset-bottom));
        border:0;
        border-radius:0;
    }

    .dc-video-dialog-toolbar{
        padding-top:max(0px,env(safe-area-inset-top));
    }

    .dc-video-dialog-copy{
        display:block;
        padding-inline:8px;
    }

    .dc-video-dialog-actions{
        margin-top:16px;
    }

    .dc-video-dialog-actions button{
        flex:1 1 50%;
    }
}

@media(prefers-reduced-motion:reduce){
    .dc-video-poster img,
    .dc-video-poster-fallback,
    .dc-video-play{
        transition:none;
    }

    .dc-video-open:hover .dc-video-poster img,
    .dc-video-open:hover .dc-video-poster-fallback,
    .dc-video-open:hover .dc-video-play{
        transform:none;
        filter:none;
    }

    .dc-video-open:hover .dc-video-play{
        transform:translate(-50%,-50%);
    }
}
/* End SurfLocal UX 2027 Video Library */

/* SurfLocal UX 2027 Slideshow Carousel */
.dc-slideshow-shell{
    container-type:inline-size;
}

.dc-preview-type--slideshow_carousel{
    padding-block:clamp(36px,5vw,58px) !important;
}

.dc-slideshow-layout{
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(280px,2fr);
    gap:clamp(28px,4vw,56px);
    align-items:center;
}

.dc-slideshow-shell .dc-preview-section-heading{
    max-width:520px;
    margin:0;
}

.dc-slideshow-editorial h2{
    margin:9px 0 0;
    font-size:clamp(1.8rem,3vw,3rem);
    line-height:1.08;
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
}

.dc-slideshow-editorial p{
    margin:15px 0 0;
    color:var(--dc-theme-muted,#5c7082);
    line-height:1.65;
}

.dc-slideshow-cta{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    gap:9px;
    margin-top:22px;
    color:var(--dc-theme-primary,#155e9d);
    font-weight:850;
    text-decoration:none;
}

.dc-slideshow-cta:focus-visible{
    outline:3px solid color-mix(in srgb,var(--dc-theme-primary,#155e9d) 62%,white);
    outline-offset:3px;
}

.dc-slideshow-placement{
    min-width:0;
}

.dc-slideshow-placement--empty{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:720px;
    min-height:76px;
    padding:16px 18px;
    border:1px solid var(--dc-theme-border,#d9e5ef);
    border-radius:var(--dc-theme-card-radius,18px);
    background:var(--dc-theme-surface-alt,#f4f8fc);
}

.dc-slideshow-empty-mark{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:12px;
    background:var(--dc-theme-primary,#155e9d);
    opacity:.82;
}

.dc-slideshow-empty-copy{
    margin:0;
    color:var(--dc-theme-muted,#5c7082);
    font-size:.94rem;
    line-height:1.5;
}

.dc-slideshow{
    min-width:0;
}

.dc-slideshow-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:100%;
    gap:clamp(12px,2vw,22px);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--dc-theme-primary,#155e9d) 42%,transparent) transparent;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y pinch-zoom;
    padding:2px 2px 10px;
}

.dc-slideshow--count-1 .dc-slideshow-track{
    display:block;
    overflow:visible;
    padding:0;
}

.dc-slideshow--count-2 .dc-slideshow-track{
    grid-auto-columns:100%;
}

.dc-slideshow-slide{
    min-width:0;
    margin:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    transition:opacity .18s ease;
}

.dc-slideshow.is-enhanced .dc-slideshow-slide{
    opacity:.78;
}

.dc-slideshow.is-enhanced .dc-slideshow-slide.is-current,
.dc-slideshow--count-1 .dc-slideshow-slide{
    opacity:1;
}

.dc-slideshow-media{
    position:relative;
    overflow:hidden;
    aspect-ratio:3/2;
    max-height:min(480px,62vh);
    border-radius:clamp(14px,2vw,var(--dc-theme-card-radius,22px));
    background:var(--dc-theme-surface-alt,#e9f0f6);
    box-shadow:var(--dc-theme-shadow,0 16px 42px rgba(15,39,64,.12));
}

.dc-slideshow-shell--hero .dc-slideshow-media{
    aspect-ratio:16/9;
    max-height:min(520px,68vh);
}

.dc-slideshow-shell--featured .dc-slideshow-media{
    aspect-ratio:4/3;
    max-height:min(480px,62vh);
}

.dc-slideshow-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.dc-slideshow-slide figcaption{
    max-width:68ch;
    margin:12px 2px 0;
    color:var(--dc-theme-muted,#5c7082);
    font-size:clamp(.88rem,1.3vw,.98rem);
    line-height:1.55;
    overflow-wrap:anywhere;
}

.dc-slideshow-placement--captions-hidden .dc-slideshow-slide figcaption{
    display:none;
}

.dc-slideshow-placement--captions-overlay .dc-slideshow-slide{
    position:relative;
}

.dc-slideshow-placement--captions-overlay .dc-slideshow-slide figcaption{
    position:absolute;
    z-index:1;
    right:clamp(10px,2vw,20px);
    bottom:clamp(10px,2vw,20px);
    left:clamp(10px,2vw,20px);
    max-width:min(68ch,calc(100% - 20px));
    margin:0;
    padding:10px 13px;
    border-radius:12px;
    color:#fff;
    background:rgba(5,20,34,.82);
    backdrop-filter:blur(8px);
}

.dc-slideshow-controls{
    display:none;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin-top:12px;
}

.dc-slideshow.is-enhanced .dc-slideshow-controls{
    display:flex;
}

.dc-slideshow-controls button{
    display:inline-grid;
    place-items:center;
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--dc-theme-border,#c7d5e1);
    border-radius:50%;
    color:var(--dc-theme-text,#10263a);
    background:var(--dc-theme-surface,#fff);
    box-shadow:0 6px 18px rgba(16,38,58,.08);
    cursor:pointer;
}

.dc-slideshow-controls button:hover{
    border-color:var(--dc-theme-primary,#155e9d);
    color:var(--dc-theme-primary,#155e9d);
}

.dc-slideshow-controls button:focus-visible,
.dc-slideshow-track:focus-visible{
    outline:3px solid color-mix(in srgb,var(--dc-theme-primary,#155e9d) 62%,white);
    outline-offset:3px;
}

.dc-slideshow-position{
    min-width:62px;
    color:var(--dc-theme-muted,#5c7082);
    font-size:.82rem;
    font-variant-numeric:tabular-nums;
    font-weight:800;
    letter-spacing:.08em;
    padding:7px 10px;
    border:1px solid var(--dc-theme-border,#c7d5e1);
    border-radius:999px;
    background:var(--dc-theme-surface-alt,#f4f8fc);
    text-align:center;
}

@container (max-width:700px){
    .dc-slideshow-shell--hero .dc-slideshow-media,
    .dc-slideshow-shell--featured .dc-slideshow-media{
        aspect-ratio:4/3;
    }
}

@media(max-width:900px){
    .dc-slideshow-layout{
        grid-template-columns:1fr;
        gap:24px;
    }

    .dc-slideshow-editorial{
        order:-1;
        max-width:700px !important;
    }

    .dc-slideshow-media,
    .dc-slideshow-shell--hero .dc-slideshow-media,
    .dc-slideshow-shell--featured .dc-slideshow-media{
        max-height:min(460px,58vh);
    }
}

@media(max-width:620px){
    .dc-preview-type--slideshow_carousel{
        padding-block:32px !important;
    }

    .dc-preview-type--slideshow_carousel .dc-preview-shell{
        width:min(100% - 24px,var(--dc-theme-content-width,1180px));
    }

    .dc-slideshow-track,
    .dc-slideshow--count-2 .dc-slideshow-track{
        grid-auto-columns:100%;
        gap:10px;
    }

    .dc-slideshow-media,
    .dc-slideshow-shell--hero .dc-slideshow-media,
    .dc-slideshow-shell--featured .dc-slideshow-media{
        aspect-ratio:4/3;
        max-height:min(390px,52vh);
        border-radius:14px;
    }

    .dc-slideshow-placement--captions-overlay .dc-slideshow-slide figcaption{
        position:static;
        max-width:none;
        margin:10px 2px 0;
        padding:0;
        color:var(--dc-theme-muted,#5c7082);
        background:transparent;
        backdrop-filter:none;
    }

    .dc-slideshow-controls{
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion:reduce){
    .dc-slideshow-track{
        scroll-behavior:auto !important;
    }
    .dc-slideshow-slide{
        transition:none;
    }
}
/* End SurfLocal UX 2027 Slideshow Carousel */

/* SurfLocal UX 2027 media-library completion authority */
.dc-preview-type--gallery,
.dc-preview-type--video_gallery,
.dc-preview-type--slideshow_carousel{
    padding-block:var(--dc-section-y,clamp(38px,5vw,64px));
}
.dc-preview-type--gallery .dc-preview-shell,
.dc-preview-type--video_gallery .dc-preview-shell,
.dc-preview-type--slideshow_carousel .dc-preview-shell{
    width:min(
        var(--dc-theme-content-width,1180px),
        calc(100% - 44px)
    );
    margin-inline:auto;
}

@media(max-width:620px){
    .dc-preview-type--gallery .dc-preview-shell,
    .dc-preview-type--video_gallery .dc-preview-shell,
    .dc-preview-type--slideshow_carousel .dc-preview-shell{
        width:min(
            var(--dc-theme-content-width,1180px),
            calc(100% - 24px)
        );
        margin-inline:auto;
    }
}
.dc-gallery-items{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(8px,1vw,13px);
}
.dc-gallery-open{border-radius:var(--dc-radius-sm,8px);box-shadow:none;}
.dc-gallery-media{aspect-ratio:4/3;}
.dc-gallery-item figcaption{margin:6px 1px 0;font-size:.78rem;line-height:1.35;}
.dc-gallery--captions-overlay figcaption{padding:30px 9px 8px;border-radius:0 0 var(--dc-radius-sm,8px) var(--dc-radius-sm,8px);font-size:.76rem;}
.dc-gallery--masonry .dc-gallery-items{columns:5 190px;column-gap:clamp(8px,1vw,13px);}
.dc-gallery--masonry .dc-gallery-item{margin-bottom:clamp(8px,1vw,13px);}
.dc-gallery--featured .dc-gallery-items{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));}
.dc-gallery--featured .dc-gallery-item:first-child{grid-column:span 1;grid-row:span 2;}
.dc-gallery--featured .dc-gallery-item:first-child .dc-gallery-media{height:100%;aspect-ratio:auto;min-height:100%;}
.dc-gallery-controls,.dc-video-controls{margin-top:18px;}
.dc-gallery-more,.dc-gallery-less,.dc-video-more,.dc-video-less{min-height:42px;padding:8px 15px;border-radius:var(--dc-theme-button-radius,10px);box-shadow:none;font-size:.84rem;}
.dc-gallery-lightbox-panel,.dc-video-dialog-panel{border-radius:var(--dc-radius-lg,18px);}
.dc-gallery-lightbox-toolbar button,.dc-gallery-lightbox-stage>button,.dc-video-dialog-toolbar button{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px;}

.dc-video-items{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px) clamp(10px,1.4vw,17px);}
.dc-video-open{border-radius:var(--dc-radius-sm,8px);box-shadow:none;}
.dc-video-play{width:48px;height:48px;}
.dc-video-play span{border-top-width:7px;border-bottom-width:7px;border-left-width:11px;}
.dc-video-copy{padding-top:10px;}
.dc-video-copy h3{font-size:1rem;line-height:1.28;}
.dc-video-copy p{display:-webkit-box;margin-top:5px;overflow:hidden;font-size:.82rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.dc-video-library--featured .dc-video-item:first-child{grid-column:span 2;grid-row:span 2;}
.dc-video-library--featured .dc-video-item:first-child .dc-video-copy{padding-top:12px;}
.dc-video-empty{padding:18px 20px;border-style:solid;text-align:left;}
.dc-video-dialog-copy{padding-top:12px;}
.dc-video-dialog-actions button{min-height:42px;padding-inline:14px;}

.dc-slideshow-layout{grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:clamp(22px,3.5vw,44px);}
.dc-slideshow-track{border-radius:var(--dc-radius-lg,18px);}
.dc-slideshow-slide{border-radius:var(--dc-radius-lg,18px);}
.dc-slideshow-controls button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;box-shadow:0 6px 18px rgba(15,39,64,.1);}
.dc-slideshow-position{font-size:.75rem;font-variant-numeric:tabular-nums;letter-spacing:.08em;}
.dc-slideshow-empty-copy{max-width:38ch;font-size:.88rem;}

@media(max-width:1024px){
    .dc-gallery-items{grid-template-columns:repeat(4,minmax(0,1fr));}
    .dc-gallery--masonry .dc-gallery-items{columns:4 170px;}
    .dc-video-items{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:820px){
    .dc-preview-type--gallery .dc-preview-shell,.dc-preview-type--video_gallery .dc-preview-shell,.dc-preview-type--slideshow_carousel .dc-preview-shell{width:calc(100% - 28px);}
    .dc-gallery-items{grid-template-columns:repeat(3,minmax(0,1fr));}
    .dc-gallery--masonry .dc-gallery-items{columns:3 150px;}
    .dc-gallery--featured .dc-gallery-items{grid-template-columns:repeat(3,minmax(0,1fr));}
    .dc-gallery--featured .dc-gallery-item:first-child{grid-column:span 2;grid-row:span 2;}
    .dc-video-items{grid-template-columns:repeat(2,minmax(0,1fr));}
    .dc-slideshow-layout{grid-template-columns:1fr;gap:20px;}
}
@media(max-width:580px){
    .dc-preview-type--gallery .dc-preview-shell,.dc-preview-type--video_gallery .dc-preview-shell,.dc-preview-type--slideshow_carousel .dc-preview-shell{width:calc(100% - 24px);}
    .dc-gallery-items,.dc-gallery--count-2 .dc-gallery-items,.dc-gallery--count-3 .dc-gallery-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
    .dc-gallery--masonry .dc-gallery-items{columns:2 130px;column-gap:7px;}
    .dc-gallery--masonry .dc-gallery-item{margin-bottom:7px;}
    .dc-gallery--featured .dc-gallery-items{grid-template-columns:repeat(2,minmax(0,1fr));}
    .dc-gallery--featured .dc-gallery-item:first-child{grid-column:span 2;grid-row:auto;}
    .dc-gallery--featured .dc-gallery-item:first-child .dc-gallery-media{aspect-ratio:16/10;}
    .dc-gallery--captions-below .dc-gallery-item figcaption{display:none;}
    .dc-video-items{grid-template-columns:1fr;gap:18px;}
    .dc-video-copy p{-webkit-line-clamp:2;}
    .dc-slideshow-controls{gap:8px;}
}
@media(max-width:340px){
    .dc-gallery-items,.dc-gallery--count-2 .dc-gallery-items,.dc-gallery--count-3 .dc-gallery-items{grid-template-columns:1fr;}
    .dc-gallery--masonry .dc-gallery-items{columns:1;}
}

/* FAST-009 slideshow and single-video proportion finish. */
.dc-slideshow-editorial h2{
    font-size:clamp(1.65rem,2.8vw,2.45rem);
    line-height:1.08;
}
.dc-video-library--count-1 .dc-video-items{
    grid-template-columns:minmax(0,760px);
}
.dc-video-library--count-1 .dc-video-item{
    max-width:760px;
}
.dc-video-library--count-1 .dc-video-copy{
    padding-top:12px;
}
@media(max-width:820px){
    .dc-slideshow-editorial h2{font-size:clamp(1.55rem,5vw,2.15rem);}
}

/* ==========================================================
   SurfLocal Gallery Architecture Authority
   Natural image geometry + Home teaser / full library modes
   ========================================================== */

.dc-preview-type--gallery .dc-gallery-media{
    height:auto;
    min-height:0;
    aspect-ratio:auto;
}

.dc-preview-type--gallery .dc-gallery-media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:auto;
}

.dc-preview-type--gallery
.dc-gallery--featured
.dc-gallery-item:first-child
.dc-gallery-media{
    height:auto;
    min-height:0;
    aspect-ratio:auto;
}

.dc-preview-type--gallery
.dc-gallery--grid
.dc-gallery-items{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(240px,100%),
                1fr
            )
        );
    align-items:start;
    gap:clamp(10px,1.25vw,16px);
}

.dc-preview-type--gallery
.dc-gallery--teaser.dc-gallery--grid
.dc-gallery-items{
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(260px,100%),
                1fr
            )
        );
}

.dc-preview-type--gallery
.dc-gallery--masonry
.dc-gallery-media,
.dc-preview-type--gallery
.dc-gallery--masonry
.dc-gallery-media img{
    height:auto;
    min-height:0;
    aspect-ratio:auto;
}

.dc-gallery-destination{
    display:flex;
    justify-content:center;
    margin-top:clamp(20px,3vw,30px);
}

/* === SurfLocal Gallery Alignment Authority v2 START === */

/*
 * Gallery follows the same centered horizontal boundary
 * as the rest of Website OS.
 */
.dc-preview-type--gallery .dc-preview-shell{
    width:min(
        var(--dc-theme-content-width,1180px),
        calc(100% - 44px)
    );
    margin-inline:auto;
}

.dc-preview-type--gallery .dc-gallery,
.dc-preview-type--gallery
.dc-preview-assigned-media-group.dc-gallery{
    width:100%;
    max-width:none;
    margin-inline:auto;
}


/* ----------------------------------------------------------
   GRID
   Never reserve empty columns on the right.
   ---------------------------------------------------------- */

.dc-preview-type--gallery
.dc-gallery--grid
.dc-gallery-items{
    display:grid;
    width:100%;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(240px,100%),
                1fr
            )
        );
    justify-content:center;
    align-items:start;
    gap:clamp(10px,1.25vw,16px);
}


/* One image: useful size, centered. */
.dc-preview-type--gallery
.dc-gallery--grid.dc-gallery--count-1
.dc-gallery-items{
    grid-template-columns:minmax(0,min(100%,760px));
}


/* Two images: don't stretch ridiculously wide. */
.dc-preview-type--gallery
.dc-gallery--grid.dc-gallery--count-2
.dc-gallery-items{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(100%,960px);
    margin-inline:auto;
}


/* Three images: centered three-card presentation. */
.dc-preview-type--gallery
.dc-gallery--grid.dc-gallery--count-3
.dc-gallery-items{
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:min(100%,1080px);
    margin-inline:auto;
}


/* Four-image Home teaser fills the available row. */
.dc-preview-type--gallery
.dc-gallery--teaser.dc-gallery--grid
[data-dc-gallery-count="4"]
.dc-gallery-items{
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
}


/*
 * Five-image Home teaser:
 * three on row one, two centered underneath.
 */
.dc-preview-type--gallery
.dc-gallery--teaser.dc-gallery--grid
[data-dc-gallery-count="5"]
.dc-gallery-items{
    grid-template-columns:repeat(6,minmax(0,1fr));
}

.dc-preview-type--gallery
.dc-gallery--teaser.dc-gallery--grid
[data-dc-gallery-count="5"]
.dc-gallery-item{
    grid-column:span 2;
}

.dc-preview-type--gallery
.dc-gallery--teaser.dc-gallery--grid
[data-dc-gallery-count="5"]
.dc-gallery-item:nth-child(4){
    grid-column:2 / span 2;
}


/* Six-image Home teaser becomes a balanced 3 x 2. */
.dc-preview-type--gallery
.dc-gallery--teaser.dc-gallery--grid
[data-dc-gallery-count="6"]
.dc-gallery-items{
    grid-template-columns:repeat(3,minmax(0,1fr));
}


/* ----------------------------------------------------------
   MASONRY
   Natural image proportions and full centered width.
   ---------------------------------------------------------- */

.dc-preview-type--gallery
.dc-gallery--masonry
.dc-gallery-items{
    display:block;
    width:100%;
    columns:260px;
    column-gap:clamp(10px,1.25vw,16px);
}

.dc-preview-type--gallery
.dc-gallery--masonry
.dc-gallery-item{
    width:100%;
    break-inside:avoid;
    margin:0 0 clamp(10px,1.25vw,16px);
}


/* Small masonry sets become centered grids. */
.dc-preview-type--gallery
.dc-gallery--masonry.dc-gallery--count-1
.dc-gallery-items{
    display:grid;
    width:min(100%,760px);
    margin-inline:auto;
    grid-template-columns:1fr;
    columns:auto;
}

.dc-preview-type--gallery
.dc-gallery--masonry.dc-gallery--count-2
.dc-gallery-items{
    display:grid;
    width:min(100%,960px);
    margin-inline:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    columns:auto;
}

.dc-preview-type--gallery
.dc-gallery--masonry.dc-gallery--count-3
.dc-gallery-items{
    display:grid;
    width:min(100%,1080px);
    margin-inline:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    columns:auto;
}


/* ----------------------------------------------------------
   FEATURED
   Keep the intentional featured composition,
   but require it to occupy the centered Gallery width.
   ---------------------------------------------------------- */

.dc-preview-type--gallery
.dc-gallery--featured
.dc-gallery-items{
    width:100%;
    margin-inline:auto;
}


/* Natural image geometry remains authoritative. */
.dc-preview-type--gallery .dc-gallery-media,
.dc-preview-type--gallery .dc-gallery-media img{
    height:auto;
    min-height:0;
    aspect-ratio:auto;
}

.dc-preview-type--gallery .dc-gallery-media img{
    display:block;
    width:100%;
}


/* Responsive boundary matches Website OS. */
@media(max-width:820px){
    .dc-preview-type--gallery .dc-preview-shell{
        width:calc(100% - 28px);
        margin-inline:auto;
    }

    .dc-preview-type--gallery
    .dc-gallery--grid
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--grid.dc-gallery--count-2
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--grid.dc-gallery--count-3
    .dc-gallery-items{
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="4"]
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="5"]
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="6"]
    .dc-gallery-items{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="5"]
    .dc-gallery-item{
        grid-column:auto;
    }
}

@media(max-width:580px){
    .dc-preview-type--gallery .dc-preview-shell{
        width:calc(100% - 24px);
        margin-inline:auto;
    }

    .dc-preview-type--gallery
    .dc-gallery--grid
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--grid.dc-gallery--count-2
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--grid.dc-gallery--count-3
    .dc-gallery-items{
        grid-template-columns:1fr;
    }

    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="4"]
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="5"]
    .dc-gallery-items,
    .dc-preview-type--gallery
    .dc-gallery--teaser.dc-gallery--grid
    [data-dc-gallery-count="6"]
    .dc-gallery-items{
        grid-template-columns:1fr;
    }
}

/* === SurfLocal Gallery Alignment Authority v2 END === */

/* SURFLOCAL SLIDESHOW MEDIA-ONLY LAYOUT 2027 v1 */
.dc-slideshow-shell--media-only .dc-slideshow-layout{
    display:block;
}
.dc-slideshow-shell--media-only .dc-slideshow-placement{
    width:100%;
    max-width:none;
    grid-column:1 / -1;
}
.dc-slideshow-shell--media-only .dc-slideshow{
    width:100%;
    max-width:none;
}
/* END SURFLOCAL SLIDESHOW MEDIA-ONLY LAYOUT 2027 v1 */