/*
* Description: Custom CSS Additions Go Here
* Template: twentyseventeen
* Version: 1.0
* Author: VDS
*/

/* vars vars vars vars vars vars vars vars vars vars vars vars vars vars  */

:root {

/* These vars do not require values as they get set automatically in options-page-stylesheet.php
 * They are mainly here so they show up as autocomplete suggestions in code editors if desired.
*/

@property --accent1 { syntax: '*'; inherits: true; }
@property --accent2 { syntax: '*'; inherits: true; }
@property --accent3 { syntax: '*'; inherits: true; }
@property --dark1   { syntax: '*'; inherits: true; }
@property --dark2   { syntax: '*'; inherits: true; }
@property --dark3   { syntax: '*'; inherits: true; }
@property --light1  { syntax: '*'; inherits: true; }
@property --light2  { syntax: '*'; inherits: true; }
@property --light3  { syntax: '*'; inherits: true; }
@property --uihover { syntax: '*'; inherits: true; }
@property --white   { syntax: '*'; inherits: true; }
@property --black   { syntax: '*'; inherits: true; }

/* font family vars */
/*--bodyfont:;*/
/*--headingfont:;*/
/* 	--DunbarMed: 'DunbarTall-Medium', sans-serif; */
/* 	--MontReg: 'Montserrat-Regular', sans-serif; */
/* 	--MontB: 'Montserrat-Bold', sans-serif; */

}

/* /vars /vars /vars /vars /vars /vars /vars /vars /vars /vars /vars  */

/* General */

body.logged-in.single.admin-bar {
	margin-top: 0;
}

/* Sticky Header */
body header#header {
    z-index: 99999999;
    position: fixed;
    width: 100%;
}

.site-content, .single #content, .blog #content { padding-top: 120px !important; }

@media (max-width: 600px) { .site-content, .single #content, .blog #content { padding-top: 135px !important; }}
@media (max-width: 587px) { .site-content, .single #content, .blog #content { padding-top: 153px !important; }}

/* Open menu scrolls internally, sized from its top edge to the viewport bottom */
#mobile-site-navigation #top-menu.toggled {
    max-height: calc(100vh - var(--menu-top, 120px));
    max-height: calc(100dvh - var(--menu-top, 120px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Old Edge/IE */
}
#mobile-site-navigation #top-menu.toggled::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, iOS */
}
/* Page lock while the menu is open (JS adds this class to html and body) */
html.mm-locked,
body.mm-locked {
    overflow: hidden;
}
/* /Sticky Header */

/* Top Anchor + Recaptcha */

a.topbutton {
    background-color: var(--accent1);
    transition: all 0.3s ease-in-out;
    border: 2px solid var(--light1);
    text-decoration: none;
    border-radius: 7px;
    bottom: 100px;
    right: 12px;
}
a.topbutton:hover {
	border-color: var(--accent2);
}
a.topbutton i.icon-angle-up {
	justify-content: center;
	align-items: center;
	display: flex;
}
a.topbutton i.icon-angle-up:before {
	transition: all 0.3s ease-in-out;
    margin: 0 !important;
    color: var(--light1);
    position: relative;
    font-size: 48px;
    line-height: 1;
    top: -4.5px;
}
a.topbutton:hover i:before {
	transition: all 0.3s ease-in-out;
	color: var(--accent2);
}
div.grecaptcha-badge {
    bottom: 70px !important;
}

/* END Top Anchor + Recaptcha */

.top-widget .widget a:link {
    color: var(--accent2);
}

/* === Page: _global === 2026-09-09 === */
:root {
    --sm-neutral-1: #d8cbb2;
    --sm-neutral-2: #979088;
    --sm-neutral-3: #66625e;
    --sm-body: #5c5c5c;
    --sm-cream: #f6f0e2;
    --sm-cream-deep: #efe6d2;
    --sm-sage: #c9d8cd;
    --sm-gold: #c08a2e;
    --sm-orange: #e87323;
    --sm-green: #173a2e;
    --sm-brown: #4a3f31;
    --sm-dark: #251c12;
    --sm-dark-4: #1b140d;   /* Figma dark/Dark 4 — not published on the design-system board */
    --sm-radius: 16px;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body #content h1,
body #content h2,
body #content h3,
body #content h4,
body #content h5 {
    font-family: 'Fraunces', 'HendersonSlabBasic-SemiBold', Georgia, serif !important;
}
body h6,
body #content h6 {
    font-family: 'Jost', 'Urbanist-SemiBold', sans-serif !important;
}
body a.btn-bt,
body button,
body form label,
body span.vc_tta-title-text,
body .top-widget p,
body .top-widget p a,
body .gform_footer input[type="submit"],
body #content a.btn-bt,
body #content button,
body #content span.vc_tta-title-text,
ul#left-menu li a,
ul#right-menu li a,
nav ul#top-menu li a,
nav div#top-menu ul li a,
#mobile-site-navigation ul.mobile-menu li a,
body footer h2.widget-title,
body footer h3.widget-title,
body .copyright p {
    font-family: 'Jost', 'Urbanist-SemiBold', sans-serif !important;
}
.top-widget .container,
.top-header .container {
    max-width: 1440px;
}
.bakery #content .wpb_text_column img {
    border-radius: var(--sm-radius);
}


/* ---------------------------------------------------------------------------
   SHARED ROW LIBRARY  (declared once — every page inherits, do not redeclare)
   Established on the Homepage build (B1). Rows map to the Figma design system.
--------------------------------------------------------------------------- */

/* --- type scale ---------------------------------------------------------- */
body #content h1 { font-size: 62px; line-height: 1.04; font-weight: 700; }
body #content h2 { font-size: 48px; line-height: 1.1; font-weight: 600; }
body #content h3 { font-size: 36px; line-height: 1.11; font-weight: 600; }
/* E0 2026-09-14: h3 had NO bottom margin at any breakpoint, so every bare h3 in a
   prose row sat flush on the paragraph under it (15 instances across 5 pages,
   at desktop as well as mobile — it was never a mobile-only bug). The theme's
   global reset `style.css:14` zeroes margin on every heading, h1 and h2 get theirs
   back from row-specific rules, and h3 simply never did. Declared here as the
   TYPE-SCALE default, not per row, so later pages inherit it. Anything that wants
   a different value already sets its own at higher specificity
   (.sm-ticket-card h3, .sm-owner-note h3, .sm-exp-body h3, .sm-faq-short h3). */
body #content h3 { margin-bottom: 18px; }
body #content h4 { font-size: 21px; line-height: 1.15; font-weight: 700; }
body #content h5 { font-size: 19px; line-height: 1.47; font-weight: 700; }
body #content p:not(.sm-hero-note),
body#legal-page #content .bakery li {
	color: var(--sm-body) !important;
	line-height: 26px;
	font-size: 16px;
}

body #content .sm-eyebrow {
    font-size: 12px; line-height: 1.2; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 700;
    color: var(--sm-orange) !important; margin: 0 0 14px;
}
body #content .sm-lede { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Global row padding is now 0 via theme option Layout > WPBakery > Row > Padding,
   so no reset is needed at desktop — each row declares its own rhythm.

   BUILD-PLAN E0, RESOLVED 2026-09-14. This block used to be:
       @media (max-width: 480px) {
         .bakery .vc_row.sm-row:not(.vc_inner) { padding: 0 !important }
       }
   to beat `themes/vds/style.css:539`, which forces `padding: 30px 0` under 480px
   and loads after custom.css. It worked, and it also destroyed the authored mobile
   rhythm of 105 row classes across all 29 pages — every section butted against the
   next below 480px. Twenty page blocks carried `!important` re-assertions to claw
   some of it back; those are now deleted too.

   THE CORRECT READ OF THE CASCADE: the theme's selector
   `.bakery .vc_row:not(.vc_inner)` is only THREE classes. Anything at four or more
   beats it outright, with NO `!important` and regardless of load order. Every
   page-scoped row rule (`.bakery .vc_row.sm-xspec.sm-room`) is already four, so it
   always won on its own — the blanket `!important` reset was the only thing
   overriding it. Nothing had to fight the theme globally.

   What genuinely does need help is the opposite case: rows that must stay FLUSH at
   0 and get their spacing from `min-height` (heroes) or from padding on an inner
   column (the full-bleed splits). Those have no padding declaration of their own, so
   the theme's 30px would apply and open a gap. They are neutralised below at five
   classes, which is specific enough to need no `!important` either. Any row class
   NOT listed here keeps whatever its own CSS says, which is the point. */
@media (max-width: 480px) {
    .bakery .vc_row.sm-row.sm-hero:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-hero-page:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-hero-jumbo:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-spotlight:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-visit:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-stats:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-trust-strip:not(.vc_inner),
    .bakery .vc_row.sm-row.sm-gal4-2:not(.vc_inner) { padding-top: 0; padding-bottom: 0; }
}

/* The other half of the E0 fix. These row rhythms are declared by the LIBRARY at
   three classes (`.bakery .vc_row.sm-gather`), which TIES with the theme's
   `.bakery .vc_row:not(.vc_inner)` — and the theme loads last, so under 480px the
   theme's 30px won and every shared row lost its rhythm. Re-declared here at four
   classes (adding `.sm-row`, which every row already carries) so the library wins
   outright. No `!important`: page blocks assemble AFTER `_global`, so a page's own
   four-class rule still overrides any of these, which is exactly the precedence
   we want. Values are the library's authored 767px-and-under rhythm, measured at 481px —
   just above the theme's breakpoint, where it does not interfere. */
@media (max-width: 480px) {
    .bakery .vc_row.sm-row.sm-experience   { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-snowbird     { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-video        { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-reviews      { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-collage      { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-gather       { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-explore      { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-faq          { padding-top: 56px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-awards       { padding-top: 0;    padding-bottom: 72px; }
    .bakery .vc_row.sm-row.sm-estate       { padding-top: 88px; padding-bottom: 88px; }
    .bakery .vc_row.sm-row.sm-cta-bottom   { padding-top: 68px; padding-bottom: 68px; }
    .bakery .vc_row.sm-row.sm-cta-bar      { padding-top: 30px; padding-bottom: 30px; }
    .bakery .vc_row.sm-row.sm-ornament-row { padding-top: 8px;  padding-bottom: 40px; }
    .bakery .vc_row.sm-row.sm-owner        { padding-top: 40px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-tickets      { padding-top: 0;    padding-bottom: 57px; }
    .bakery .vc_row.sm-row.sm-tickets-head { padding-top: 48px; padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-xslider      { padding-top: 48px; padding-bottom: 0; }
    .bakery .vc_row.sm-row.sm-3366         { padding-top: 38px; padding-bottom: 0; }
    .bakery .vc_row.sm-row.sm-2x           { padding-top: 24px; padding-bottom: 24px; }
    .bakery .vc_row.sm-row.sm-gal4         { padding-top: 24px; padding-bottom: 24px; }
    /* gal4-2 is the flush variant — must come AFTER .sm-gal4 to win the tie */
    .bakery .vc_row.sm-row.sm-gal4-2       { padding-top: 0;    padding-bottom: 0; }
}

/* --- section rhythm + heads ---------------------------------------------- */
.bakery .vc_row.sm-hero, .bakery .vc_row.sm-stats, .bakery .vc_row.sm-trust-strip, .bakery .vc_row.sm-experience,
.bakery .vc_row.sm-snowbird, .bakery .vc_row.sm-awards, .bakery .vc_row.sm-estate, .bakery .vc_row.sm-video,
.bakery .vc_row.sm-spotlight, .bakery .vc_row.sm-reviews, .bakery .vc_row.sm-collage, .bakery .vc_row.sm-gather,
.bakery .vc_row.sm-visit, .bakery .vc_row.sm-faq, .bakery .vc_row.sm-cta-bottom, .bakery .vc_row.sm-cta-bar,
.bakery .vc_row.sm-ornament-row { width: 100%; margin: 0; }

.bakery .vc_row.sm-experience, .bakery .vc_row.sm-video, .bakery .vc_row.sm-faq { padding: 96px 0; }
/* Rows whose rhythm was doubling against the row above, re-measured off Figma. */
.bakery .vc_row.sm-snowbird { padding: 0 0 35px; }
.bakery .vc_row.sm-reviews  { padding: 40px 0; }
.bakery .vc_row.sm-collage  { padding: 40px 0 80px; }
.bakery .vc_row.sm-gather   { padding: 78px 0; }
.bakery .vc_row.sm-estate { padding: 88px 0; }
.bakery .vc_row.sm-awards { padding: 0 0 72px; }
.bakery .vc_row.sm-ornament-row { padding: 8px 0 40px; }

.bakery .vc_row.sm-experience > .container,
.bakery .vc_row.sm-snowbird > .container,
.bakery .vc_row.sm-video > .container,
.bakery .vc_row.sm-reviews > .container,
.bakery .vc_row.sm-collage > .container,
.bakery .vc_row.sm-gather > .container,
.bakery .vc_row.sm-faq > .container,
.bakery .vc_row.sm-awards > .container,
.bakery .vc_row.sm-ornament-row > .container { max-width: 1188px; }

.sm-section-head { text-align: center; margin: 0 auto 48px; }
.sm-section-head.sm-narrow, .sm-narrow { max-width: 900px; }
body #content .sm-section-head h2 { margin: 0 0 16px; }
.sm-ornament { display: block; margin: 0 auto 18px; height: 34px; width: auto; }

/* --- buttons (variants beyond the theme's default/alternate) -------------- */
body #content a.btn-bt,
body a.btn-bt {
    display: inline-block; font-size: 13px; line-height: 15.6px; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 600; padding: 17px 30px; border-radius: 999px;
    border: 1px solid transparent; text-decoration: none; transition: all .2s ease;
}
body #content a.btn-bt + a.btn-bt { margin-left: 12px; }
body #content a.btn-bt.light {
    background: #fff !important; color: var(--sm-dark) !important; border-color: #fff;
}
body #content a.btn-bt.light:hover { background: var(--sm-cream) !important; }
body #content a.btn-bt.border {
    background: transparent !important; color: var(--sm-dark) !important; border-color: var(--sm-dark);
}
body #content a.btn-bt.border:hover { background: var(--sm-dark) !important; color: var(--sm-cream) !important; }
body #content a.btn-bt.border-light {
    background: transparent !important; color: #fff !important; border-color: #fff;
}
body #content a.btn-bt.border-light:hover { background: #fff !important; color: var(--sm-dark) !important; }
body #content a.btn-bt.green {
    background: var(--sm-green) !important; color: var(--sm-cream) !important; border-color: var(--sm-green);
}
body #content a.btn-bt.green:hover { background: #0f2a21 !important; }
body #content a.btn-bt.alternate { background: var(--sm-orange) !important; color: #fff !important; }
/* The compiled colour scheme sets `.header-button a.btn-bt, .default, .accent1
   { color: var(--light1) }`. `def_button_styles_group_def_btn_color` is set to the
   right value in the option store but is never compiled, so force it here. */
.header-button a.btn-bt,
body #content a.btn-bt.default,
body #content a.btn-bt.accent1,
.header-button a.btn-bt:hover,
body #content a.btn-bt.default:hover,
body #content a.btn-bt.accent1:hover { color: var(--sm-dark-4) !important; }

/* --- data points row (design system 225:850) ----------------------------- */
.bakery .vc_row.sm-stats { background: var(--sm-green); }
.sm-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 1440px; margin: 0 auto; padding: 30px 0;
}
.sm-stat { text-align: center; padding: 4px 24px; }
.sm-stat + .sm-stat { border-left: 1px solid var(--sm-dark); }
body #content .sm-stat-num {
    display: block; font-family: 'Fraunces', Georgia, serif !important;
    font-size: 30px; font-weight: 700; color: var(--sm-gold) !important; margin-bottom: 6px;
}
body #content .sm-stat-label { display: block; font-size: 13px; color: var(--sm-cream) !important; }

/* --- trust row (design system 225:865) ----------------------------------- */
.bakery .vc_row.sm-trust-strip { background: var(--sm-dark); }
.sm-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 1440px; margin: 0 auto; padding: 16px 0;
}
.sm-trust-item {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13px; color: var(--sm-cream); text-align: center;
}
.sm-trust-icon { font-size: 15px; line-height: 1; }

/* --- 3x cards spotlight (design system 225:884) --------------------------- */
.bakery .vc_row.sm-experience { background: var(--sm-cream); }
.sm-exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sm-exp-card {
    background: #fff; border-radius: var(--sm-radius); overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 2px 18px rgba(37,28,18,.06);
}
.sm-exp-media { padding: 12px 12px 0; }
.sm-exp-media img { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 12px; }

/* --- `.sm-exp-slider` — the spotlight card's two-frame autoplay -------------
   QA sheet row 4: these image areas are meant to autoplay two images. Done as a
   CSS crossfade rather than a carousel instance, deliberately:
     * WP Carousel Pro's CPT is not REST-exposed, so three instances would each
       have to be hand-built in wp-admin and could not be rebuilt from here;
     * a carousel ships a slider library, arrows and dot pagination to dissolve
       between two stills — all of which then has to be styled back off, which is
       what the `_global.add.css` WP Carousel block already does for the rows
       that genuinely need sliding.
   Frame B sits on top and fades out, so frame A shows if animations never run
   (print, reduced motion, an old browser): the card is never blank. Frame B is
   `aria-hidden` with an empty alt — it is the same subject as frame A, and a
   screen reader should hear the card's image described once. */
.sm-exp-slider { position: relative; }
.sm-exp-slider .sm-exp-slide-b {
    position: absolute; top: 12px; left: 12px; right: 12px;
    width: auto; animation: sm-exp-fade 9s ease-in-out infinite;
}
@keyframes sm-exp-fade {
    0%, 42%   { opacity: 1; }
    50%, 92%  { opacity: 0; }
    100%      { opacity: 1; }
}
/* stagger the three cards so the row does not blink in unison */
.sm-exp-grid .sm-exp-card:nth-child(2) .sm-exp-slide-b { animation-delay: -3s; }
.sm-exp-grid .sm-exp-card:nth-child(3) .sm-exp-slide-b { animation-delay: -6s; }
@media (prefers-reduced-motion: reduce) {
    .sm-exp-slider .sm-exp-slide-b { animation: none; opacity: 0; }
}
.sm-exp-body { padding: 22px 22px 28px; display: flex; flex-direction: column; flex: 1; }
body #content .sm-exp-body h3 { font-size: 21px; font-weight: 700; margin: 0 0 12px; }
/* 15 — card eyebrows are dark1, unlike the orange section-head eyebrow */
body #content .sm-exp-body .sm-eyebrow { color: var(--sm-green) !important; }
body #content .sm-exp-body p { margin: 0 0 16px; }
.sm-exp-list { list-style: none; margin: 0 0 22px; padding: 0; }
.sm-exp-list li { position: relative; padding-left: 16px; font-size: 14px; line-height: 24px; color: var(--sm-body); }
.sm-exp-list li:before {
    content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
    background: var(--sm-gold); transform: rotate(45deg);
}
.sm-exp-body a.btn-bt { margin-top: auto; align-self: flex-start; }

/* --- awards / badges ------------------------------------------------------ */
.bakery .vc_row.sm-awards { background: var(--sm-cream); }
.sm-awards-row { display: flex; align-items: center; justify-content: center; gap: 48px; }
.sm-awards-row img { height: 144px; width: auto; border-radius: 0 !important; }

/* --- 50/50 rows (design system 232:691 / 232:713) ------------------------- */
.bakery .vc_row.sm-5050 > .container { display: flex; align-items: center; }
/* The `.sm-row` reset at the foot of this file zeroes EVERY column's vertical
   padding at six classes, so this rule's five lost the top/bottom half silently
   while the horizontal half landed -- a declaration half-applying, which reads
   as a wrong value rather than a lost one. Spelled through `.container >
   .vc_column_container` to carry seven, beating the reset by specificity rather
   than `!important` (which the theme's later `style.css` makes a one-way door). */
.bakery .vc_row.sm-5050 > .container > .vc_column_container.sm-5050-text > .vc_column-inner {
    max-width: 560px; margin-left: auto; padding: 24px 44px;
}
.bakery .vc_row.sm-5050 .sm-5050-media > .vc_column-inner { padding: 0 40px; }
.bakery .vc_row.sm-5050 .sm-5050-media img { display: block; width: 100%; border-radius: var(--sm-radius); }
/* About Us (C1) is the first page to actually use this row, which is how the
   missing heading rhythm surfaced - the `sm-row` reset zeroes the margins and
   nothing put them back, so the h2 sat flush against its paragraph. */
body #content .sm-5050 h6.sm-eyebrow { margin: 0 0 14px; }
body #content .sm-5050 h2 { margin: 0 0 20px; }
body #content .sm-5050 p + p { margin-top: 22px; }
.sm-ministats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0 32px; }
body #content .sm-ministat-num {
    display: block; font-family: 'Fraunces', Georgia, serif !important;
    font-size: 26px; font-weight: 700; color: var(--sm-orange) !important;
}
.sm-ministats div span:last-child { font-size: 12px; line-height: 17px; color: var(--sm-body); display: block; }

/* --- video row ------------------------------------------------------------ */
.bakery .vc_row.sm-video { background: var(--sm-cream); }
.sm-video-frame {
    width: 100%; aspect-ratio: 16 / 9; border-radius: var(--sm-radius); overflow: hidden; background: #000;
}
.sm-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.sm-fpo {
    display: flex; align-items: center; justify-content: center;
    color: #b3b3b3; font-family: 'Jost', sans-serif; font-size: 46px;
    letter-spacing: .02em; text-transform: uppercase;
}
body #content .sm-video-caption { text-align: center; margin: 22px 0 0; font-size: 14px; }

/* --- `.sm-media-tbd` — a placeholder IMAGE in a media column ---------------
   Emitted by `pagelib.img_tbd()`. Added in the QA pass, where four sheet rows
   (4, 13, 18, 19) asked for an FPO while the designer picks the real art, and
   four pages inventing four different stand-ins is how a placeholder ends up
   shipping unnoticed. Same treatment the `.sm-card-tbd` panels already use —
   dashed outline, greyscale, half opacity — so every unfinished image on the
   build looks unfinished the same way.

   The photograph underneath is real and subject-appropriate, NOT a random stock
   stand-in: the row has to hold its true proportions while the designer decides,
   or the layout shifts when the real photo lands. Replacing one is a `src` swap
   and dropping the wrapper; no geometry moves. */
.sm-media-tbd { position: relative; }
.sm-media-tbd img {
    filter: grayscale(1); opacity: .5;
    outline: 1px dashed rgba(37,28,18,.35); outline-offset: -1px;
}
body #content .sm-media-tbd .sm-media-tbd-label {
    margin: 10px 0 0; font-size: 12px; line-height: 18px; letter-spacing: .12em;
    text-transform: uppercase; color: #8a7f70; text-align: center;
}

/* Tile variant, for a placeholder inside a `.sm-gal4-grid` mosaic (QA row 5).
   A gal4 figure is a FIXED 220px grid row with `overflow:hidden`, so the label
   cannot flow under the image -- it would be clipped and the crop would lose
   height, which is the one thing a placeholder must not do. Lay it over the
   bottom of the crop instead, on a light scrim so it stays readable against a
   greyscaled photograph. */
body #content .sm-gal4-grid figure.sm-media-tbd .sm-media-tbd-label {
    position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0;
    padding: 6px 8px; border-radius: var(--sm-radius);
    background: rgba(253,251,247,.88); color: #6d6357;
}

/* --- 50/50 spotlight row (design system 232:793) -------------------------- */
.bakery .vc_row.sm-spotlight { background: var(--sm-dark); }
.bakery .vc_row.sm-spotlight > .container { display: flex; align-items: stretch; }
.bakery .vc_row.sm-spotlight .sm-spotlight-media > .vc_column-inner { padding: 0; height: 100%; }
.bakery .vc_row.sm-spotlight .sm-spotlight-media img {
    display: block; width: 100%; height: 100%; min-height: 460px;
    object-fit: cover; border-radius: 0 !important;
}
.bakery .vc_row.sm-spotlight .sm-spotlight-text > .vc_column-inner {
    max-width: 560px; padding: 80px 40px; display: flex; flex-direction: column; justify-content: center;
}
body #content .sm-spotlight h2 { color: var(--sm-cream) !important; margin: 0 0 18px; }
body #content .sm-spotlight p { color: #d9d2c6 !important; }
.sm-btn-pair { margin-top: 12px; }

/* --- testimonial row (design system 225:768) ------------------------------ */
.bakery .vc_row.sm-reviews { background: var(--sm-cream); }
.sm-stars { color: var(--sm-gold); letter-spacing: .18em; }
.sm-stars-lg { font-size: 20px; display: block; margin-bottom: 14px; color: #fbd033; }
.sm-reviews-wrap { position: relative; display: flex; align-items: center; gap: 14px; }
.sm-reviews-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; flex: 1; }
.sm-review-card {
    background: #fff; border-radius: var(--sm-radius); padding: 24px 26px 26px;
    box-shadow: 0 2px 18px rgba(37,28,18,.06);
}
.sm-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sm-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--sm-brown); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 600; flex: 0 0 34px;
}
.sm-review-card:nth-child(2) .sm-avatar { background: var(--sm-orange); }
.sm-review-card:nth-child(3) .sm-avatar { background: var(--sm-green); }
.sm-review-who strong { display: block; font-size: 14px; color: var(--sm-dark); }
.sm-review-who em { display: block; font-size: 12px; font-style: normal; color: var(--sm-neutral-3); }
body #content .sm-review-card p { font-size: 14px; line-height: 22px; margin: 10px 0 14px; }
body #content a.sm-readmore { font-size: 12px; color: var(--sm-neutral-3) !important; text-decoration: none; }
.sm-car-arrow {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sm-neutral-1);
    background: #fff; color: var(--sm-dark); font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 34px;
}

/* --- Trustindex Google reviews widget ------------------------------------- */
/* "Widgets for Google Reviews" (wp-reviews-plugin-for-google) renders the reviews
   carousel via [trustindex no-registration=google]. The widget carries
   .ti-disable-font, so it inherits site type — these rules pull it onto the
   comped card. The static .sm-review-card markup it replaced is retired; its CSS
   is kept below only until no page references it. */
.sm-reviews-trustindex .ti-widget.ti-goog .ti-review-item .ti-inner {
    border-radius: var(--sm-radius) !important;
    box-shadow: 0 2px 18px rgba(37,28,18,.06) !important;
    padding: 24px 26px 26px !important;
}
body #content .sm-reviews-trustindex .ti-name,
body #content .sm-reviews-trustindex .ti-name a {
    font-family: 'Jost', sans-serif !important; font-size: 14px !important;
    font-weight: 600 !important; color: var(--sm-dark) !important;
}
body #content .sm-reviews-trustindex .ti-date {
    font-family: 'Jost', sans-serif !important; font-size: 12px !important;
    color: var(--sm-neutral-3) !important;
}
body #content .sm-reviews-trustindex .ti-review-text-container {
    font-family: 'IBMPlexSans-Regular', sans-serif !important;
    font-size: 14px !important; line-height: 22px !important; color: var(--sm-body) !important;
}
body #content .sm-reviews-trustindex .ti-read-more,
body #content .sm-reviews-trustindex .ti-read-more a {
    font-family: 'Jost', sans-serif !important; font-size: 12px !important;
    color: var(--sm-neutral-3) !important;
}
.sm-reviews-trustindex .ti-next, .sm-reviews-trustindex .ti-prev {
    border: 1px solid var(--sm-neutral-1) !important; background-color: #fff !important;
}

/* --- carousel placeholder (rule 6) ---------------------------------------- */
.sm-carousel-placeholder {
    border: 2px dashed var(--sm-orange); border-radius: 10px; padding: 10px 16px; margin: 0 0 18px;
    font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sm-orange); text-align: center; background: rgba(232,115,35,.06);
}

/* --- cards explore row, grid variant (design system 225:984) -------------- */
.bakery .vc_row.sm-gather { background: var(--sm-cream-deep); }
body #content .sm-gather h2 { color: var(--sm-dark) !important; }
.sm-gather-grid {
    display: grid; gap: 22px;
    /* Level 1 pages have however many Level 2 children they have. 4 is the comp
       (cards explore row expanded, 225:984); About Us has 5, Events will have 9.
       A page sets the count on its own scope instead of redeclaring the grid. */
    grid-template-columns: repeat(var(--sm-gather-cols, 4), 1fr);
}
.sm-gather-card {
    background: #fff; border-radius: var(--sm-radius); overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 2px 18px rgba(37,28,18,.06);
}
.sm-gather-media img { display: block; width: 100%; height: 118px; object-fit: cover; border-radius: 0 !important; }
.sm-gather-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
body #content .sm-gather-body h4 { margin: 0 0 10px; }
body #content .sm-gather-body p { font-size: 13px; line-height: 20px; margin: 0 0 16px; }
/* The learn-more anchor sits inside a paragraph, so `margin-top:auto` on the ANCHOR
   never reached the flex column -- the paragraph is the flex child, not the link.
   Pinning the last child instead aligns every card's link along one baseline, which
   is what the board shows and what the grid could not do while blurb lengths varied.
   Found on the News & Blog press row, where seven outlet headlines run 1 to 4 lines
   and the misalignment is unmissable. Harmless where blurbs are already even.
   NB the sibling rule below is `body #content .sm-gather-body p`, which carries an
   ID and so outranks a plain class selector -- this one has to match that weight
   or it loses silently (gotcha 3). */
body #content .sm-gather-body > *:last-child { margin-top: auto; margin-bottom: 0; }
body #content a.sm-learnmore {
    margin-top: auto; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--sm-orange) !important; text-decoration: none;
}

/* --- visit / map split row ------------------------------------------------ */
.bakery .vc_row.sm-visit > .container { display: flex; }
.bakery .vc_row.sm-visit .sm-visit-text { background: var(--sm-dark-4); }
.bakery .vc_row.sm-visit .sm-visit-text > .vc_column-inner { padding: 66px 40px 66px 0; }
.sm-visit-inner { max-width: 560px; margin-left: auto; }
body #content .sm-visit h2 { color: #fff !important; margin: 0 0 28px; }
.sm-visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 22px; }
/* no colour override — the eyebrow keeps the shared orange, per Figma */
body #content .sm-visit .sm-eyebrow { margin-bottom: 6px; }
body #content .sm-visit p, body #content .sm-visit p a { color: var(--sm-cream) !important; font-size: 16px; }
body #content .sm-visit p a { text-decoration: none; }
.sm-visit-weddings { margin-bottom: 28px; }
.bakery .vc_row.sm-visit .sm-visit-map > .vc_column-inner { padding: 0; }
.sm-map, .sm-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* --- FAQ accordion (design system 384:503) -------------------------------- */
.bakery .vc_row.sm-faq { background: var(--sm-cream); }
.bakery .vc_row.sm-faq .vc_tta-panels,
.bakery .vc_row.sm-faq .vc_tta-panel,
.bakery .vc_row.sm-faq .vc_tta-panel-body,
.bakery .vc_row.sm-faq .vc_tta-panel-heading { background: transparent !important; border: 0 !important; }
.bakery .vc_row.sm-faq .vc_tta-panel { border-bottom: 1px solid rgba(37,28,18,.14) !important; }
.bakery .vc_row.sm-faq .vc_tta-panel-title > a { padding: 26px 40px 26px 0 !important; }
/* Both comps draw the accordion 760 wide and centred inside the 1188 container
   (homepage 1:2 and christmas tours 147:66 agree: dividers run x=340..1100).
   `.vc_tta-container` is the element el_class lands on, and WPBakery leaves it
   full-width, so the measure and the centring are both set here. Dev decision
   2026-09-11: apply site-wide, not per page. */
.bakery .vc_row.sm-faq .sm-faq-acc,
.bakery .vc_row.sm-faq .vc_tta-container.sm-faq-acc {
    max-width: 760px; margin-left: auto !important; margin-right: auto !important;
}
body #content .sm-faq span.vc_tta-title-text {
    font-family: 'Jost', sans-serif !important; font-size: 16px; font-weight: 600; color: var(--sm-dark) !important;
}
.bakery .vc_row.sm-faq .vc_tta-controls-icon { color: var(--sm-gold) !important; }
.bakery .vc_row.sm-faq .vc_tta-panel-body { padding: 0 40px 26px 0 !important; }
body #content .sm-faq .vc_tta-panel-body p { font-size: 15px; line-height: 26px; }
body #content .sm-faq .vc_tta-panel-body p + p { margin-top: 12px; }
body #content .sm-faq ul.sm-faq-list { margin: 0; padding: 0; list-style: none; }
body #content .sm-faq ul.sm-faq-list li {
    position: relative; padding-left: 16px; font-size: 15px; line-height: 26px; color: var(--sm-body);
}
body #content .sm-faq ul.sm-faq-list li:before {
    content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px;
    background: var(--sm-gold); transform: rotate(45deg);
}
body #content .sm-faq-foot {
    margin: 34px 0 0; color: var(--sm-brown) !important; text-align: center;
    font-family: 'Jost', sans-serif !important; font-size: 14px; font-style: normal;
    font-weight: 400; line-height: 16.8px;
}
body #content .sm-faq-foot a { color: var(--sm-green) !important; font-weight: 600; }

/* --- bottom CTA rows (design system 220:606 / 220:625 / 225:661 / 225:675)  */
.bakery .vc_row.sm-cta-bottom {
    background-color: var(--sm-dark); background-size: cover; background-position: center;
    background-repeat: no-repeat; position: relative; padding: 108px 0;
    /* themes/vds/style.css:66 sets `background-blend-mode: overlay` on every .vc_row,
       which blended the photo into the dark3 background-colour and crushed it far past
       the comp. Figma just stacks the image on dark3 — so blend normally and carry the
       darkening in the :before overlay alone. */
    background-blend-mode: normal;
}
/* No :before overlay here. themes/vds/style.css:177 sets
   `.bakery div.vc_row:before { content: none }` and the row is also a flex
   container — the pseudo never paints, even with !important. The darkening is a
   gradient layer inside background-image instead, the same way .sm-hero does it.
   Calibrated to the comp: mean RGB (96,71,48) over bottom-cta-bg-christmas.jpg. */
.bakery .vc_row.sm-cta-bottom > .container { position: relative; z-index: 1; }
.sm-cta-inner { max-width: 780px; margin: 0 auto; text-align: center; }
body #content .sm-cta-bottom .sm-eyebrow { color: var(--sm-cream) !important; letter-spacing: .18em; }
body #content .sm-cta-bottom h2 { color: #fff !important; margin: 0 0 18px; }
body #content .sm-cta-bottom p {
    margin: 0 0 30px; color: var(--sm-cream) !important; text-align: center;
    font-family: 'Jost', sans-serif !important; font-size: 16px; font-style: normal;
    font-weight: 400; line-height: 26.4px;
}
body #content .sm-cta-bottom p a { color: #fff !important; text-decoration: underline; }
.bakery .vc_row.sm-cta-christmas { background-image: linear-gradient(rgba(37,28,18,.30), rgba(37,28,18,.30)), url('/wp-content/uploads/2026/09/bottom-cta-bg-christmas.jpg'); }
.bakery .vc_row.sm-cta-weddings  { background-image: linear-gradient(rgba(37,28,18,.30), rgba(37,28,18,.30)), url('/wp-content/uploads/2026/09/bottom-cta-bg-weddings.jpg'); }
.bakery .vc_row.sm-cta-events    { background-image: linear-gradient(rgba(37,28,18,.30), rgba(37,28,18,.30)), url('/wp-content/uploads/2026/09/bottom-cta-bg-events.jpg'); }

/* --- the EVENTS variant is structurally different from the christmas one ---
   225:661 is LEFT-aligned with NO eyebrow, copy inset to x=100 (so the 1240
   container, not the centred 780 measure), H2 on a ~620 measure over two lines
   and the paragraph on ~460. The christmas variant (220:606) really is centred
   WITH an eyebrow, which is why B1/B2 look right — these are different layouts,
   not one layout with different words. Reused by the whole Events tree: C2 plus
   the eight Events children, so nine pages. */
.bakery .vc_row.sm-cta-events > .container { max-width: 1240px; }
.sm-cta-events .sm-cta-inner { max-width: 640px; margin: 0; text-align: left; }
body #content .sm-cta-events .sm-cta-inner p { text-align: left; max-width: 485px; }

/* --- the WEDDINGS variant is the same structural family as EVENTS -----------
   220:625 is LEFT-aligned with NO eyebrow on the 1240 container, H2 over two
   lines on a ~560 measure, one short paragraph on ~470, and TWO buttons (gold
   "Request a Date" + outlined-white "Contact Us"). Until C4 this variant had
   only its background image here, so it silently inherited the CHRISTMAS
   layout (centred, 780 measure, eyebrow) — wrong on every weddings page.
   Found and diagnosed by the C4 agent against the board node; promoted here
   from `css/weddings.css` so the three weddings children inherit it too.
   Reused by C4 plus wedding-packages / wedding-galleries / bridal-showers. */
.bakery .vc_row.sm-cta-weddings > .container { max-width: 1240px; }
.sm-cta-weddings .sm-cta-inner { max-width: 560px; margin: 0; text-align: left; }
body #content .sm-cta-weddings .sm-cta-inner p { text-align: left; max-width: 470px; }
.sm-cta-weddings .sm-cta-btns { margin: 0; }
.bakery .vc_row.sm-cta-murder    { background-image: linear-gradient(rgba(37,28,18,.30), rgba(37,28,18,.30)), url('/wp-content/uploads/2026/09/bottom-cta-bg-murder.jpg'); }

/* --- CTA bar above the footer (design system 220:614) --------------------- */
.bakery .vc_row.sm-cta-bar { background: var(--sm-green); padding: 30px 0; }
.sm-cta-bar-inner {
    max-width: 979px;
	margin: 0 auto;
	display: flex;
	align-items: center;
    justify-content: space-between;
	gap: 40px;
}
.explore-sm-cta .sm-cta-bar-inner {
    justify-content: center;
}
.sm-cta-bar-inner h4 {
	color: var(--white);
}
body #content .sm-cta-bar h2 { color: #fff !important; margin: 0; font-size: 36px; }
.sm-cta-bar-form { flex: 0 0 auto; }
.sm-cta-bar-form .gform_wrapper form { display: flex; align-items: center; gap: 12px; margin: 0; }
.sm-cta-bar-form .gform_wrapper .gform_body { margin: 0; }
.sm-cta-bar-form .gform_wrapper input[type="email"],
.sm-cta-bar-form .gform_wrapper input[type="text"] {
    width: 283px; height: 51px; border: 1px solid rgba(27,20,13,.30);
    background: rgba(255,255,255,.90); color: var(--sm-dark);
    padding: 13px 16px; border-radius: 2px; font-size: 14px;
}
.sm-cta-bar-form .gform_wrapper input::placeholder { color: var(--sm-neutral-3); }
.sm-cta-bar-form .gform_wrapper .gform_footer { margin: 0; padding: 0; }
.sm-cta-bar-form .gform_wrapper input[type="submit"] {
    background: transparent; color: var(--sm-cream); border: 1px solid var(--sm-cream);
    border-radius: 999px; padding: 13px 26px; font-size: 13px; letter-spacing: .1em;
    text-transform: uppercase; cursor: pointer;
}
.sm-cta-bar-form .gform_wrapper input[type="submit"]:hover { background: var(--sm-cream); color: var(--sm-green); }

/* --- responsive ----------------------------------------------------------- */
/* TABLET TIER = 979, moved from 1024 on 2026-09-14 (dev request). The theme makes
   every `.bakery .container` a flex row at 980+ (vds/style.css:186) and swaps to the
   mobile menu below 980, so stacking our rows at 1024 broke the site into a stacked
   body under a still-desktop header across the 980-1024 band. Every 1024 block in the
   build moved with this one — the paddings in these blocks are the tablet rhythm that
   pairs with the stacked layout and cannot be split from it. Two deliberate holdouts
   remain at 1024, each commented in place: the nav squeeze in `_chrome.add.css` and
   the intermediate press-grid step in `news-blog.css`. */
@media (max-width: 979px) {
    body #content h1 { font-size: 46px; }
    body #content h2 { font-size: 36px; }
    body #content h3 { font-size: 28px; }
    .sm-exp-grid, .sm-gather-grid, .sm-reviews-track { grid-template-columns: repeat(2, 1fr); }
    .sm-stats-grid, .sm-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .sm-stat:nth-child(3) { border-left: 0; }
    .bakery .vc_row.sm-5050 > .container,
    .bakery .vc_row.sm-spotlight > .container,
    .bakery .vc_row.sm-visit > .container { flex-direction: column; }
    /* Same seven-class spelling as the base rule -- a media query adds no
       specificity, so at the old five this uncapped nothing once the base rule
       was raised, and the stacked column kept its 560px cap with `margin-left:
       auto` pushing the copy right of centre between 560 and 979. */
    .bakery .vc_row.sm-5050 > .container > .vc_column_container.sm-5050-text > .vc_column-inner,
    .bakery .sm-visit-inner { max-width: none; margin: 0; }
    /* E0 2026-09-14: `.sm-5050` stacks here and its two columns had a 0px gap, so
       body copy (or a button) butted straight onto the image on every one of the 12
       pages that use the row. Its sibling ratios were already authored correctly
       (`.sm-3366` 34px, `.sm-6633` 32px) — only 5050 was missed. Matched to 32px.
       `.sm-spotlight` and `.sm-visit` are deliberately EXCLUDED: they are full-bleed
       bands whose halves are meant to meet flush, and their text column carries its
       own padding (80px 40px / 48px 24px). */
    .bakery .vc_row.sm-5050 > .container > .vc_column_container:not(:last-child) {
        margin-bottom: 32px;
    }
    .bakery .vc_row.sm-visit .sm-visit-text > .vc_column-inner { padding: 48px 24px; }
    .sm-cta-bar-inner { flex-direction: column; text-align: center; }
    /* the left-aligned bottom-CTA variants unconstrain their measure here, or the
       copy column keeps its desktop width on a narrower container. */
    .sm-cta-events .sm-cta-inner, .sm-cta-weddings .sm-cta-inner { max-width: none; }
}
@media (max-width: 767px) {
    body #content h1 { font-size: 34px; }
    body #content h2 { font-size: 28px; }
    /* E0 2026-09-14: h3 used to stay at 28px all the way down, which made it EQUAL
       to h2 here and collapsed the visual hierarchy — and at 28px the longer room
       titles on christmas-spectacular ran to three lines on a phone. */
    body #content h3 { font-size: 24px; }
    /* The newsletter bar's h2 opts out of the type scale at 36px (line ~474). That
       reads fine beside the form at desktop, but once `.sm-cta-bar-inner` stacks it
       is a 36px headline above a 283px input on all 28 pages — the most widespread
       oversized-heading instance on the site. */
    body #content .sm-cta-bar h2 { font-size: 26px; }
    .bakery .vc_row.sm-experience, .bakery .vc_row.sm-snowbird, .bakery .vc_row.sm-video, .bakery .vc_row.sm-reviews,
    .bakery .vc_row.sm-collage, .bakery .vc_row.sm-gather, .bakery .vc_row.sm-faq { padding: 56px 0; }
    .bakery .vc_row.sm-cta-bottom { padding: 68px 0; }
    .sm-exp-grid, .sm-gather-grid, .sm-reviews-track,
    .sm-stats-grid, .sm-trust-grid, .sm-ministats, .sm-visit-grid { grid-template-columns: 1fr; }
    .sm-stat + .sm-stat { border-left: 0; border-top: 1px solid rgba(246,240,226,.18); }
    .sm-awards-row { gap: 26px; }
    .sm-awards-row img { height: 68px; }
    .sm-car-arrow { display: none; }
    body #content a.btn-bt + a.btn-bt { margin-left: 0; margin-top: 10px; }
    .sm-fpo { font-size: 22px; }
    .sm-cta-bar-form .gform_wrapper form { flex-direction: column; }
    .sm-cta-bar-form .gform_wrapper input[type="email"] { width: 100%; }
}

/* --- spacing reset: WPBakery/theme defaults inside the shared row library -- */
.bakery .vc_row.sm-row > .container > .vc_column_container > .vc_column-inner { padding-top: 0; padding-bottom: 0; }
.bakery .vc_row.sm-row .wpb_content_element,
.bakery .vc_row.sm-row .wpb_text_column,
.bakery .vc_row.sm-row .wpb_text_column > .wpb_wrapper > *:last-child { margin-bottom: 0; }
.bakery .vc_row.sm-row .vc_column-inner > .wpb_wrapper > .wpb_content_element:last-child { margin-bottom: 0; }

/* ===========================================================================
   SECTIONS  (the dev's house workflow for rows that SHARE a background)
   ---------------------------------------------------------------------------
   Where several rows sit on one background colour, wrap them in a WPBakery
   `vc_section`: the SECTION owns the outer padding, the inner rows carry no
   padding at all (`themes/vds/style.css:535` already zeroes it), and the gap
   BETWEEN inner rows is the row's own margin-bottom - the theme's 35px default,
   killed per row with `mb0`, or desktop-only with `mb0-desktop` (style.css:79/87).
   This is why adjacent paddings cannot double up in the dev's model: only one
   side of a join ever contributes.

   The reset directly above zeroes every margin for `.sm-row`, which neutralised
   that whole mechanism site-wide (it is why B1/B2/C1 hand-write per-row padding).
   Re-assert it INSIDE a section only, so nothing outside one changes by a pixel.
   `mb0`/`mb0-desktop` are `!important` in the theme, so they beat this. */
/* The section owns the outer padding, so an inner row owns NONE. The theme's own
   `section.vc_section .wpb_row { padding: 0 }` (style.css:535) is only two classes
   and loses to every library row rule (`.bakery .vc_row.sm-gal4` is three), so the
   inner rows keep their 80/68px and the gaps balloon - measured 163/189/160px on
   the first attempt at this. Re-zero it here at four classes so it actually wins. */
.bakery section.vc_section > .vc_row.sm-row { padding-top: 0; padding-bottom: 0; }
.bakery section.vc_section > .vc_row.sm-row { margin-bottom: 35px; }
.bakery section.vc_section > .vc_row.sm-row:last-child { margin-bottom: 0; }

/* --- section backgrounds (comp: no bare white anywhere on the page) ------- */
.bakery .vc_row.sm-snowbird, .bakery .vc_row.sm-ornament-row, .bakery .vc_row.sm-collage { background: var(--sm-cream); }
.bakery .vc_row.sm-estate { background: var(--sm-cream-deep); }

/* --- full-bleed split rows: kill every inherited gutter ------------------- */
.bakery .vc_row.sm-spotlight .sm-spotlight-media > .vc_column-inner,
.bakery .vc_row.sm-spotlight .sm-spotlight-media .wpb_text_column,
.bakery .vc_row.sm-spotlight .sm-spotlight-media .wpb_wrapper,
.bakery .vc_row.sm-visit .sm-visit-map > .vc_column-inner,
.bakery .vc_row.sm-visit .sm-visit-map .wpb_text_column,
.bakery .vc_row.sm-visit .sm-visit-map .wpb_wrapper { padding: 0 !important; margin: 0 !important; }
.bakery .vc_row.sm-spotlight .sm-spotlight-media,
.bakery .vc_row.sm-visit .sm-visit-map,
.bakery .vc_row.sm-visit .sm-visit-text { padding: 0 !important; }
.bakery .vc_row.sm-spotlight .sm-spotlight-media .wpb_wrapper,
.bakery .vc_row.sm-visit .sm-visit-map .wpb_wrapper { height: 100%; }
.bakery .vc_row.sm-visit .sm-visit-text > .vc_column-inner { padding: 66px 40px !important; }
.bakery .vc_row.sm-spotlight > .container,
.bakery .vc_row.sm-visit > .container { max-width: none; width: 100%; padding: 0; }

/* --- CTA bar submit: theme button styles are more specific ---------------- */
.sm-cta-bar-form .gform_wrapper input[type="submit"],
body #content .sm-cta-bar-form .gform_wrapper input[type="submit"] {
    background: transparent !important; color: var(--sm-cream) !important;
    border: 1px solid var(--sm-cream) !important; border-radius: 999px !important;
    padding: 13px 26px !important; font-family: 'Jost', sans-serif !important;
    font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
body #content .sm-cta-bar-form .gform_wrapper input[type="submit"]:hover {
    background: var(--sm-cream) !important; color: var(--sm-green) !important;
}

/* --- late fixes: things the theme / Gravity Forms' own CSS was winning ----- */

/* buttons must never inherit the content-area link underline */
body #content a.btn-bt,
body #content a.btn-bt:hover,
body a.btn-bt { text-decoration: none !important; }

/* map column has to stretch the full height of the split row.
   GOTCHA 34 — `.sm-visit-map` itself must NOT carry `height: 100%`. It is a flex
   item of `.container` (align-items: stretch), and stretch only applies when the
   item's cross size is `auto`. Setting `height: 100%` on it opts out of stretch,
   and the percentage then resolves against `.container`'s content-driven height,
   which is indefinite — so the column shrink-wrapped to the `min-height: 420px`
   on `.sm-map` while the text column drove the row to 453.6px. Let it stretch;
   the percentage chain BELOW it is fine, because a stretched flex item has a
   definite used height for its descendants to resolve against. */
.bakery .vc_row.sm-visit .sm-visit-map > .vc_column-inner,
.bakery .vc_row.sm-visit .sm-visit-map .wpb_wrapper,
.bakery .vc_row.sm-visit .sm-visit-map .wpb_text_column { height: 100%; }

/* CTA-bar newsletter form — GF ships `gravity-theme` CSS with high-specificity
   selectors of its own, so match its shape rather than fight it generically */
body #content .sm-cta-bar .gform_wrapper.gravity-theme form,
body #content .sm-cta-bar .gform_wrapper form {
    display: flex; align-items: center; gap: 12px; margin: 0;
}
body #content .sm-cta-bar .gform_wrapper.gravity-theme .gform_fields {
    display: block !important; grid-template-columns: none !important;
}
body #content .sm-cta-bar .gform_wrapper.gravity-theme .gfield { margin: 0 !important; padding: 0 !important; }
body #content .sm-cta-bar .gform_wrapper.gravity-theme .gform_footer {
    margin: 0 !important; padding: 0 !important; width: auto !important;
}
body #content .sm-cta-bar .gform_wrapper.gravity-theme input[type="email"],
body #content .sm-cta-bar .gform_wrapper.gravity-theme input[type="text"] {
    width: 283px !important; height: 51px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(27,20,13,.30) !important; border-radius: 2px !important;
    color: var(--sm-dark) !important; padding: 13px 16px !important; font-size: 14px !important;
}
body #content .sm-cta-bar .gform_wrapper.gravity-theme input::placeholder { color: var(--sm-neutral-3) !important; }
body #content .sm-cta-bar .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
    background: transparent !important; color: var(--sm-cream) !important;
    border: 1px solid var(--sm-cream) !important; border-radius: 999px !important;
    padding: 13px 26px !important; margin: 0 !important;
    font-family: 'Jost', sans-serif !important; font-size: 13px !important;
    letter-spacing: .1em !important; text-transform: uppercase !important; width: auto !important;
}
body #content .sm-cta-bar .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
    background: var(--sm-cream) !important; color: var(--sm-green) !important;
}
/* GF renders the honeypot as a visible field in some themes */
body #content .sm-cta-bar .gfield--type-honeypot,
body #content .sm-cta-bar .gform_validation_container { display: none !important; }

/* GF renders the submit as button.gform_button, not an
   input[type=submit] — the theme's input-based rules never reach it either */
body #content .sm-cta-bar .gform_wrapper button.gform_button,
body #content .sm-cta-bar .gform_wrapper .gform-footer button {
    background: transparent !important; color: var(--sm-cream) !important;
    border: 1px solid var(--sm-cream) !important; border-radius: 999px !important;
    padding: 13px 26px !important; margin: 0 !important; width: auto !important;
    font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: .1em !important; text-transform: uppercase !important; cursor: pointer;
}
body #content .sm-cta-bar .gform_wrapper button.gform_button:hover {
    background: var(--sm-cream) !important; color: var(--sm-green) !important;
}
body #content .sm-cta-bar .gform_wrapper .gform-footer,
body #content .sm-cta-bar .gform_wrapper .gform_footer { display: flex !important; align-items: center; }

/* the theme's columns don't stretch inside .container, so split rows need an
   explicit flex context for equal-height halves */
.bakery .vc_row.sm-visit > .container,
.bakery .vc_row.sm-spotlight > .container { display: flex; align-items: stretch; }
.bakery .vc_row.sm-visit > .container > .vc_column_container,
.bakery .vc_row.sm-spotlight > .container > .vc_column_container { display: flex; }
.bakery .vc_row.sm-visit > .container > .vc_column_container > .vc_column-inner,
.bakery .vc_row.sm-spotlight > .container > .vc_column_container > .vc_column-inner { width: 100%; }

/* ===========================================================================
   B2 additions — design-system rows first used on Christmas Tours (147:66).
   Page-agnostic on purpose: these are library rows, so later pages inherit.
   Page-specific values (background images, band colours, per-comp rhythm)
   live in the page block, scoped by that page's own row class.
   =========================================================================== */

/* --- sub page hero jumbo (design system 220:577 — 1440x594) ---------------
   Distinct from the homepage `.sm-hero` (220:559, 680 tall). Left-aligned copy
   over artwork, no CSS scrim — as with .sm-hero the darkening is baked into the
   export, and `background-blend-mode: overlay` on every .vc_row would blend a
   gradient layer rather than composite it anyway (see gotcha 5).
   The comp insets the copy to x=100, i.e. a 1240 container, NOT the 1188 the
   content rows use — so it is set explicitly here. */
.bakery .vc_row.sm-hero-jumbo {
    min-height: 594px; display: flex; align-items: center;
    background-size: cover; background-position: center top !important; background-repeat: no-repeat;
}
.bakery .vc_row.sm-hero-jumbo > .container { max-width: 1240px; }
/* Comp centres the copy block 34px ABOVE the row's optical centre; the extra
   bottom padding buys exactly that offset without abandoning align-items:center. */
.sm-hero-jumbo .sm-hero-inner { max-width: 640px; padding: 0 0 68px; }
body #content .sm-hero-jumbo h1 { color: #fff !important; margin: 0 0 26px; max-width: 520px; }
body #content .sm-hero-jumbo .sm-hero-sub {
    color: #ede7db !important; font-size: 17px; font-weight: 500;
    font-family: 'Jost', sans-serif !important; line-height: 28.05px;
    max-width: 420px; margin: 0 0 30px;
}
.sm-hero-jumbo .sm-hero-btns { margin: 0; }

/* --- 33 66 row (design system 233:816) ------------------------------------
   Comp geometry: the shared 1188 container with a 40px column inset, so the
   inner track is 1108 = 440 + 64 gap + 604. Both columns top-align.
   WPBakery's own column widths are irrelevant here — the grid on .container
   drives the split — but they stay 1/2 + 1/2 so the editor stays sane. */
.bakery .vc_row.sm-3366 > .container {
    max-width: 1188px; padding: 0 40px;
    display: grid; grid-template-columns: 440fr 604fr; column-gap: 64px; align-items: start;
}
.bakery .vc_row.sm-3366 > .container > .vc_column_container { width: 100%; }
.bakery .vc_row.sm-3366 .vc_column-inner { padding: 0; }
.bakery .vc_row.sm-3366 img { display: block; width: 100%; height: auto; border-radius: var(--sm-radius); }
body #content .sm-3366 h2 { margin: 0 0 22px; }
body #content .sm-3366 p + p { margin-top: 26px; }
body #content .sm-3366 p.sm-3366-btn { margin-top: 30px; }

/* 16:9 video embed inside a column. `.sm-video` is the full-bleed video ROW
   (231:429); this is the inline variant a text/media row uses. */
.sm-video-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--sm-radius); overflow: hidden; background: #000;
}
.sm-video-embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

/* --- price tiers row (design system 225:1104) -----------------------------
   Comp: two 554 cards, 27 gap, inside the 1188 container (1134 track). */
.bakery .vc_row.sm-tickets > .container {
    max-width: 1188px; padding: 0 27px;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 27px; align-items: start;
}
.bakery .vc_row.sm-tickets > .container > .vc_column_container { width: 100%; }
.bakery .vc_row.sm-tickets .vc_column-inner { padding: 0; }
.sm-ticket-card {
    background: #fff; border-radius: var(--sm-radius); padding: 40px;
    box-shadow: 0 1px 3px rgba(37,28,18,.10);
}
body #content .sm-ticket-card h3 { font-size: 30px; margin: 0 0 18px; }
body #content .sm-ticket-card .sm-eyebrow { margin: 0 0 14px; }
body #content .sm-ticket-card .sm-ticket-desc { font-size: 15px; line-height: 21px; margin: 0; }
.sm-ticket-rates { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(37,28,18,.14); }
.sm-ticket-rate { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sm-ticket-rate + .sm-ticket-rate { margin-top: 17px; }
body #content .sm-ticket-rate span {
    font-family: 'Jost', sans-serif !important; font-size: 15px; line-height: 17px; color: var(--sm-body) !important;
}
body #content .sm-ticket-rate span.sm-ticket-price {
    font-weight: 700; font-size: 16px; color: var(--sm-dark) !important;
}
body #content .sm-ticket-note {
    margin: 22px 0 0; font-size: 13px; line-height: 15px; color: var(--sm-neutral-3) !important;
}
.sm-ticket-card a.btn-bt { margin-top: 24px; }

/* --- centred "message" note block (shared section furniture) -------------- */
.sm-owner-note { max-width: 1100px; margin: 0 auto; text-align: center; }
body #content .sm-owner-note h3 { font-size: 24px; margin: 0 0 20px; }
body #content .sm-owner-note p { margin: 0; }

/* --- B2 responsive -------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-hero-jumbo { min-height: 500px; }
    .bakery .vc_row.sm-3366 > .container {
        grid-template-columns: 1fr; row-gap: 34px; padding: 0 24px;
    }
    .bakery .vc_row.sm-tickets > .container {
        grid-template-columns: 1fr; row-gap: 24px; padding: 0 24px;
    }
    body #content .sm-ticket-card h3 { font-size: 26px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-hero-jumbo { min-height: 440px; background-position: center top; }
    .sm-hero-jumbo .sm-hero-inner { max-width: none; padding: 0; }
    body #content .sm-hero-jumbo h1 { max-width: none; }
    .sm-ticket-card { padding: 28px 22px; }
    .sm-owner-note { text-align: left; }
}

/* ===========================================================================
   WP Carousel Pro — site-wide normalisation (applies to EVERY instance)
   ===========================================================================
   Every carousel emits its own INLINE style block keyed to its wrapper ID, e.g.
     #wpcpro-wrapper-2850:not(.wpcpro-thumbnail-slider) .wpcp-swiper-wrapper
       { margin-bottom: 60px }
   — space reserved for dot pagination the carousel may not even show. It pushed
   the row after the Christmas slider 73px past the comp. Killed here for all
   instances so no future carousel inherits it.
   TWO THINGS THAT WASTE TIME HERE:
     1. The class is `.wpcp-swiper-wrapper`, NOT swiper's own `.swiper-wrapper`.
        Overriding the latter does nothing at all.
     2. The plugin's rules carry ID specificity but NO `!important`, so a single
        `!important` on a class selector beats them wherever they load.
   The inline block is emitted per page render, so after changing this you need a
   HARD refresh — the browser caches custom.css. */
[id^="wpcpro-wrapper-"] .wpcp-swiper-wrapper,
.wpcpro-wrapper .wpcp-swiper-wrapper { margin-bottom: 0 !important; }

/* Arrows: the plugin ships bare grey chevrons that hover to its own teal
   (#178087). Both comps draw a 38px white circle with a soft shadow and a dark
   chevron; hover follows the house button language — gold, light glyph, the same
   0.3s ease-in-out as `a.btn-bt.default:hover` (#c08a2e at 65% in the compiled
   options sheet). Position is left to the plugin's `nav-vertical-center`. */
.wpcpro-wrapper .wpcp-prev-button,
.wpcpro-wrapper .wpcp-next-button {
    width: 38px !important; height: 38px !important; border-radius: 50% !important;
    background-color: #fff !important; border: 0 !important; color: var(--sm-dark) !important;
    font-size: 15px !important; line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 2px 10px rgba(37,28,18,.12) !important;
    transition: all .3s ease-in-out !important;
}
.wpcpro-wrapper .wpcp-prev-button:hover,
.wpcpro-wrapper .wpcp-next-button:hover {
    background-color: var(--sm-gold) !important; border: 0 !important;
    color: #fff !important; font-size: 15px !important;
    box-shadow: 0 4px 14px rgba(37,28,18,.20) !important;
}
.wpcpro-wrapper .wpcp-prev-button i,
.wpcpro-wrapper .wpcp-next-button i { color: inherit !important; font-size: inherit !important; }


/* ===========================================================================
   GALLERY GRID 4x  (design system 227:1636 set 1 / 227:1652 set 2)
   ---------------------------------------------------------------------------
   Four-image mosaic, 1188 x 456, measured off both Figma nodes:
     set 1  one 580x456 hero LEFT  + two 282x220 on top right + one 580x220 under
     set 2  mirrored - one 580x220 across the top left, two 282x220 under it,
            and the 580x456 hero on the RIGHT
   Gaps in the comp are 20 between the two halves and 16 inside the cluster; the
   columns are fr units so the row fills its 1188 container either way (the 18px
   compromise column-gap lands every tile within ~1% of the comp).

   NOTE for E3: `.sm-xcollage` in the christmas-tours block is this same geometry,
   declared page-scoped before this row existed. Christmas Tours is awaiting
   sign-off so it is deliberately left alone - fold it onto `.sm-gal4-1` in E3.
   =========================================================================== */
.bakery .vc_row.sm-gal4 { width: 100%; margin: 0; padding: 80px 0; }
.bakery .vc_row.sm-gal4 > .container { max-width: 1188px; }
.sm-gal4-grid {
    display: grid; grid-template-rows: 220px 220px;
    column-gap: 18px; row-gap: 16px;
}
.sm-gal4-grid figure { margin: 0; overflow: hidden; border-radius: var(--sm-radius); }
.sm-gal4-grid img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    border-radius: 0 !important;
}
/* set 1 - hero left */
.sm-gal4-1 .sm-gal4-grid { grid-template-columns: 580fr 282fr 282fr; }
.sm-gal4-1 .sm-gal4-a { grid-column: 1; grid-row: 1 / span 2; }
.sm-gal4-1 .sm-gal4-b { grid-column: 2; grid-row: 1; }
.sm-gal4-1 .sm-gal4-c { grid-column: 3; grid-row: 1; }
.sm-gal4-1 .sm-gal4-d { grid-column: 2 / span 2; grid-row: 2; }
/* set 2 - hero right */
.sm-gal4-2 .sm-gal4-grid { grid-template-columns: 282fr 282fr 580fr; }
.sm-gal4-2 .sm-gal4-a { grid-column: 1 / span 2; grid-row: 1; }
.sm-gal4-2 .sm-gal4-b { grid-column: 1; grid-row: 2; }
.sm-gal4-2 .sm-gal4-c { grid-column: 2; grid-row: 2; }
.sm-gal4-2 .sm-gal4-d { grid-column: 3; grid-row: 1 / span 2; }

/* ===========================================================================
   2x ROW  (design system 370:872)
   ---------------------------------------------------------------------------
   1188 x 325: two 550-wide text blocks, 82 gutter, 20 padding top and bottom,
   heading block 80 tall with the paragraph starting 20px under it. Two short
   sections that do not each earn a full row of their own.
   The theme injects `.container` between the row and the columns (see the load
   -order gotcha), so the grid goes on `.container`, same as `.sm-3366`.
   =========================================================================== */
.bakery .vc_row.sm-2x { width: 100%; margin: 0; padding: 68px 0; }
.bakery .vc_row.sm-2x > .container {
    max-width: 1188px; display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 82px; align-items: start;
}
/* WPBakery gives a 1/2 column `vc_col-sm-6`, which carries `width: 50%`. As a grid
   item that is 50% OF ITS TRACK, so both columns render half-width with a hole
   beside them. `.sm-3366` hits the same thing - reset it the same way. */
.bakery .vc_row.sm-2x > .container > .vc_column_container { width: 100%; }
.bakery .vc_row.sm-2x .vc_column-inner { padding: 0; }
/* The comp's heading block is 80px for two lines, so ~30/40 - a step down from
   the page h2. Kept semantic (these are real h2s in the live hierarchy). */
body #content .sm-2x h2 {
    font-size: 30px; line-height: 40px; margin: 0 0 20px;
    /* the comp's heading block is a fixed 80 (two lines) so both paragraphs start
       on the same line - hold that when a heading only runs to one line. */
    min-height: 80px;
}
body #content .sm-2x p + p { margin-top: 22px; }

/* --- responsive for the two rows above ------------------------------------ */
@media (max-width: 979px) {
    .sm-gal4-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto; }
    .sm-gal4-grid figure { grid-column: auto !important; grid-row: auto !important; height: 240px; }
    .bakery .vc_row.sm-2x > .container { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-gal4 { padding: 56px 0; }
    .bakery .vc_row.sm-2x { padding: 48px 0; }
    .sm-gal4-grid { grid-template-columns: 1fr !important; }
    .sm-gal4-grid figure { height: 220px; }
    body #content .sm-2x h2 { font-size: 26px; line-height: 34px; }
}


/* ===========================================================================
   SUB PAGE HERO  (design system 220:587) — 1440x358
   ---------------------------------------------------------------------------
   The DEFAULT opener for every Level 2 page (18 of them), so this is the single
   highest-reuse row in the build. Same 1240 container as `.sm-hero-jumbo`; copy
   block is 957 wide, vertically centred (94 above, 94 below a 170-tall block).
   H1 56 tall, then a 29 gap, then the sub-paragraph at 779 wide.
   Like the jumbo hero it takes **no CSS scrim** — the darkening is baked into the
   per-page artwork, because `background-blend-mode: overlay` on every `.vc_row`
   would blend a gradient layer rather than composite it (see the blend gotcha).
   Background image is per-page: set it in that page's block.
   =========================================================================== */
.bakery .vc_row.sm-hero-page {
    width: 100%; margin: 0; padding: 0; min-height: 358px;
    display: flex; align-items: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bakery .vc_row.sm-hero-page > .container { max-width: 1240px; }
.sm-hero-page .sm-hero-inner { max-width: 957px; padding: 0; }
body #content .sm-hero-page h1 {
    color: #fff !important; font-size: 48px; line-height: 56px; margin: 0 0 29px;
}
body #content .sm-hero-page .sm-hero-sub {
    color: #fff !important; max-width: 779px; margin: 0;
    font-size: 15px; line-height: 28px;
}
body #content .sm-hero-page .sm-hero-sub a {
    color: #fff !important; text-decoration: underline;
}

/* --- `.sm-hero-scrim` — OPT-IN modifier for a REUSED hero image -----------
   The row above deliberately takes no scrim, because every hero the designer
   cut has its darkening baked into the artwork. Phase D broke that assumption:
   there is no Level 2 hero export for any of the 17 sub pages, so the dev's
   call was to reuse each tree's LEVEL 1 hero on its children. Those images are
   cut for the 594-tall jumbo, and `cover`-cropping one to 358 lands the copy
   block on whatever happens to be in the middle of the frame — on the About
   tree that is a lit lamp, and the 15px sub-line loses contrast against it.
   This modifier adds the darkening back, using the ONLY recipe that works on
   this theme: themes/vds/style.css:66 puts `background-blend-mode: overlay` on
   every .vc_row, which BLENDS a gradient rather than compositing it, and
   style.css:177 kills row `:before` overlays outright, so neither a pseudo
   element nor a plain gradient layer will do. Blend normally, and carry the
   darkening as the first layer of `background-image` in the page block — the
   same thing `.sm-cta-bottom` does, for the same reason.
   PURELY ADDITIVE: nothing that existed before Phase D carries this class, so
   no already-signed-off hero changes. DELETE IT, and the `sm-hero-scrim` class
   from the 17 page rows, once the designer delivers real Level 2 hero art with
   the darkening baked in. */
.bakery .vc_row.sm-hero-page.sm-hero-scrim { background-blend-mode: normal; }

/* --- `.sm-list` — the shared bulleted list for long-form prose -------------
   NOT a row: a text element, added in Phase D because the Tours and Events
   source pages carry real bulleted lists (refund policies, what-to-know notes,
   group fine print) and nothing in the library styled one. The theme's default
   `ul` inside `.wpb_text_column` has browser bullets and browser spacing, which
   reads as unstyled next to everything else here. Same marker treatment as
   `.sm-faq-list`, so the two look like one family, but usable anywhere prose is.
   Page-agnostic on purpose — the Events tree will want it too. */
body #content ul.sm-list { margin: 0; padding: 0; list-style: none; }
body #content ul.sm-list li {
    position: relative; padding-left: 22px; margin: 0 0 14px;
    font-size: 15px; line-height: 26px;
}
body #content ul.sm-list li:last-child { margin-bottom: 0; }
body #content ul.sm-list li:before {
    content: ""; position: absolute; left: 0; top: 11px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--sm-gold);
}
body #content ul.sm-list li strong { font-weight: 600; }

/* ===========================================================================
   CARDS EXPLORE ROW - carousel variant  (design system 225:1160) — 1440x495
   ---------------------------------------------------------------------------
   The sibling-links row every Level 2 page ends with, so like the hero above it
   is reused across all 18. It is the SAME card as `.sm-gather` minus the blurb
   paragraph: image 279x150, then an 80-tall body with a 25-tall title and the
   LEARN MORE link 9px under it.

   RENDERED BY WP CAROUSEL PRO - one instance PER TREE, not per page (the dev's
   call, and a better one than the scroll-snap track that used to live here):
     * About tree = instance 2883, `[sp_wpcarousel id="2883"]`
   One instance serves every page in its tree, so a copy change is edited once and
   the client can edit it in wp-admin. `my-script.js` removes the slide whose link
   matches the current path, so a page never links to itself.
   **The slide hrefs MUST be root-relative** (`/about-us/the-estate/`): that script
   compares against `window.location.pathname`, so an absolute URL never matches and
   the self-link would survive.
   The plugin sets `.wpcp-single-content { min-height: 230px }` per instance, which is
   the comp's card height. The 60px dot-margin and the arrow styling are already
   normalised site-wide (see the WP Carousel Pro block) so a new instance needs no
   new CSS. Only ONE tree is wired so far - Events, Tours and Weddings still need
   their own instance made in wp-admin.
   =========================================================================== */
.bakery .vc_row.sm-explore { width: 100%; margin: 0; padding: 78px 0 72px; }
.bakery .vc_row.sm-explore > .container { max-width: 1240px; }
/* Comp measure is 918 and the H2 is one line there, but rendered Fraunces runs a
   shade wider than the Figma metrics so it wrapped. The single line is clearly
   deliberate, so widen the measure to recover it (documented drift workaround). */
.sm-explore .sm-section-head { max-width: 1040px; margin: 0 auto 36px; }
.sm-explore-card {
    background: #fff; border-radius: var(--sm-radius);
    overflow: hidden; display: flex; flex-direction: column;
}
.sm-explore-media img {
    display: block; width: 100%; height: 150px; object-fit: cover;
    border-radius: 0 !important;
}
.sm-explore-body { padding: 9px 15px 21px; display: flex; flex-direction: column; flex: 1; }
body #content .sm-explore-body h4 { font-size: 19px; line-height: 25px; margin: 0 0 9px; }
.sm-explore-body .sm-learnmore { margin-top: auto; }

/* --- making the plugin's slides match the comp ----------------------------
   The slides are authored in wp-admin, so they may carry either the carousel
   card classes or the grid ones (`.sm-gather-*`); style both. */
.bakery .vc_row.sm-explore { background: var(--sm-cream-deep); }
/* The plugin centres slide content; both explore comps are left-aligned. */
.sm-explore .wpcp-single-content,
.sm-explore .sm-gather-card,
.sm-explore .sm-explore-card { text-align: left; }
/* Stretch every slide to the tallest card instead of letting them ragged-bottom. */
.sm-explore .swiper-slide { height: auto; }
.sm-explore .wpcp-single-item,
.sm-explore .wpcp-single-content,
.sm-explore .sm-gather-card,
.sm-explore .sm-explore-card { height: 100%; }
/* The carousel card's image is 150 tall; the GRID card's is 118. */
.sm-explore .sm-gather-media img { height: 150px; }
/* 225:1160 has NO description between the title and LEARN MORE - that is the
   difference from the grid variant, and the blurb is also the only
   variable-height element, so leaving it out is what makes the cards equal.
   Kept as a safety net in case a slide still has one. */
.sm-explore .sm-gather-body > p:first-of-type:not(:last-child) { display: none; }

@media (max-width: 979px) {
    .bakery .vc_row.sm-hero-page { min-height: 300px; }
    body #content .sm-hero-page h1 { font-size: 40px; line-height: 48px; }
    .bakery .vc_row.sm-explore { padding: 56px 0; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-hero-page { min-height: 260px; background-position: center top; }
    .sm-hero-page .sm-hero-inner { max-width: none; }
    body #content .sm-hero-page h1 { font-size: 32px; line-height: 40px; margin: 0 0 18px; }
    body #content .sm-hero-page .sm-hero-sub { max-width: none; }
}

/* ===========================================================================
   PHASE B3 — the rest of the design-system row library
   All geometry measured off the design-system nodes (130:71 board).
   =========================================================================== */

/* --- sub page hero short (220:600) — 1440x181 — utility pages ------------- */
.bakery .vc_row.sm-hero-short {
    width: 100%; margin: 0; padding: 0; min-height: 181px;
    display: flex; align-items: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bakery .vc_row.sm-hero-short > .container { max-width: 1240px; }
body #content .sm-hero-short h1 {
    color: #fff !important; font-size: 42px; line-height: 56px; margin: 0; max-width: 957px;
}

/* --- 66/33 row (233:811) — 1176x303 --------------------------------------
   Text 672 + 64 gap + image 440. The 33/66 row resolved to a 1108 track when
   measured off a PAGE comp; this one is taken from the design-system frame, so
   it keeps that frame's own 1176. Same 64 gutter either way. */
.bakery .vc_row.sm-6633 { width: 100%; margin: 0; padding: 40px 0; }
.bakery .vc_row.sm-6633 > .container {
    max-width: 1176px; display: grid; grid-template-columns: 672fr 440fr;
    column-gap: 64px; align-items: start;
}
.bakery .vc_row.sm-6633 > .container > .vc_column_container { width: 100%; }
.bakery .vc_row.sm-6633 .vc_column-inner { padding: 0; }
.bakery .vc_row.sm-6633 img {
    display: block; width: 100%; aspect-ratio: 440 / 303; object-fit: cover;
    border-radius: var(--sm-radius);
}
body #content .sm-6633 h2 { margin: 0 0 22px; }
body #content .sm-6633 p + p { margin-top: 26px; }

/* --- 3x row (384:318) 1188x426 and 4x row (384:338) 1188x321 --------------
   Same anatomy as `.sm-2x`: a heading block then a paragraph 20px under it,
   20px padding top and bottom. 3x = 330 columns on a 99 gutter;
   4x = 243 columns on a 71 gutter. Heading block is 49 tall (two lines). */
.bakery .vc_row.sm-3x, .bakery .vc_row.sm-4x { width: 100%; margin: 0; padding: 40px 0; }
.bakery .vc_row.sm-3x > .container, .bakery .vc_row.sm-4x > .container {
    max-width: 1188px; display: grid; align-items: start;
}
.bakery .vc_row.sm-3x > .container { grid-template-columns: repeat(3, 1fr); column-gap: 99px; }
.bakery .vc_row.sm-4x > .container { grid-template-columns: repeat(4, 1fr); column-gap: 71px; }
.bakery .vc_row.sm-3x > .container > .vc_column_container,
.bakery .vc_row.sm-4x > .container > .vc_column_container { width: 100%; }
.bakery .vc_row.sm-3x .vc_column-inner, .bakery .vc_row.sm-4x .vc_column-inner { padding: 0; }
body #content .sm-3x h2, body #content .sm-3x h3,
body #content .sm-4x h2, body #content .sm-4x h3 {
    font-size: 20px; line-height: 25px; margin: 0 0 20px; min-height: 50px;
}
body #content .sm-3x p + p, body #content .sm-4x p + p { margin-top: 20px; }

/* --- faq (short) (384:547) — 1440x395 -------------------------------------
   NOT an accordion. Five 179-wide tabs on a 28 gutter, centred (1007 total),
   each with a 1px bottom border; then the active panel 1104 wide, also centred,
   with a 40-tall question and the answer 15px under it. Build on
   `[vc_tta_tabs]`, not `[vc_tta_accordion]`.

   **The row el_class MUST include `tabs`.** The theme ships a whole tab
   treatment gated behind `.bakery .wpb_row.tabs` (style.css) that centres the
   tabs list, strips the container border, hides the panel headings and holds a
   1100 measure - i.e. most of this row already. Leave it off and you are
   hand-rebuilding it (and fighting the filled-tab look WPBakery's `flat` style
   applies). Everything below is only what the comp adds on top: the 179 tab
   width, the 28 gutter, the 1px underline and the orange active state.
   `sm-faq-tabs` el_class on the shortcode lands on `.vc_tta-container`.
   **The tab link is NOT a child of the `li`** - the markup is
   `li.vc_tta-tab > h4.vc_tta-panel-title > a`, so `li.vc_tta-tab > a` silently
   matches nothing (the theme's own rule uses a descendant selector too). */
.bakery .vc_row.sm-faq-short { width: 100%; margin: 0; padding: 56px 0; }
.bakery .vc_row.sm-faq-short > .container { max-width: 1188px; }
/* WPBakery's flat style paints the tab pills and the active one in the scheme
   colour; the comp has no fills at all, just an underline. */
.bakery .wpb_row.sm-faq-short .vc_tta-tabs-container,
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list { background: transparent !important; }
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list { column-gap: 28px !important; padding: 0 !important; }
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list li.vc_tta-tab { min-width: 0 !important; margin: 0 !important; }
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list li.vc_tta-tab a,
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list li.vc_tta-tab.vc_active a {
    background: transparent !important; background-color: transparent !important;
    min-width: 179px; text-align: center; padding: 15px 0 !important;
    border: 0 !important; border-bottom: 1px solid rgba(37,28,18,.18) !important;
    border-radius: 0 !important;
    font-family: 'Jost', sans-serif !important; font-size: 13px !important;
    letter-spacing: .1em; text-transform: uppercase; color: var(--sm-brown) !important;
}
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list li.vc_tta-tab.vc_active a {
    color: var(--sm-orange) !important; border-bottom-color: var(--sm-orange) !important;
}
/* js_composer colours the inner `.vc_tta-title-text` span, not the anchor, so the
   anchor's colour alone leaves the active tab washed out. */
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list li.vc_tta-tab a .vc_tta-title-text {
    color: var(--sm-brown) !important;
}
.bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list li.vc_tta-tab.vc_active a .vc_tta-title-text {
    color: var(--sm-orange) !important;
}
.bakery .wpb_row.sm-faq-short .vc_tta-panel-body { max-width: 1104px; margin: 40px auto 0; padding: 0 !important; }
body #content .sm-faq-short .vc_tta-panel-body h3 { font-size: 30px; line-height: 40px; margin: 0 0 15px; }

/* --- gallery grid 8x (229:348) — 1188x933 --------------------------------
   Two 456-tall bands, 21 apart. Each band is a 282-wide FULL-height tile, a
   282 column split into two 221s, and a 580 hero - mirrored between the bands
   (hero right on band 1, hero left on band 2). */
.bakery .vc_row.sm-gal8 { width: 100%; margin: 0; padding: 40px 0; }
.bakery .vc_row.sm-gal8 > .container { max-width: 1188px; }
.sm-gal8-band { display: grid; grid-template-rows: 221px 221px; column-gap: 18px; row-gap: 14px; }
.sm-gal8-band + .sm-gal8-band { margin-top: 21px; }
.sm-gal8-band figure { margin: 0; overflow: hidden; border-radius: var(--sm-radius); }
.sm-gal8-band img {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important;
}
.sm-gal8-band-1 { grid-template-columns: 282fr 282fr 580fr; }
.sm-gal8-band-1 .sm-gal8-a { grid-column: 1; grid-row: 1 / span 2; }
.sm-gal8-band-1 .sm-gal8-b { grid-column: 2; grid-row: 1; }
.sm-gal8-band-1 .sm-gal8-c { grid-column: 2; grid-row: 2; }
.sm-gal8-band-1 .sm-gal8-d { grid-column: 3; grid-row: 1 / span 2; }
.sm-gal8-band-2 { grid-template-columns: 580fr 282fr 282fr; }
.sm-gal8-band-2 .sm-gal8-a { grid-column: 1; grid-row: 1 / span 2; }
.sm-gal8-band-2 .sm-gal8-b { grid-column: 2; grid-row: 1 / span 2; }
.sm-gal8-band-2 .sm-gal8-c { grid-column: 3; grid-row: 1; }
.sm-gal8-band-2 .sm-gal8-d { grid-column: 3; grid-row: 2; }

/* --- gallery grid 3x3 (234:871) — 1790x1254, FULL BLEED ------------------
   Nine 580x398 tiles, 25 column gap, 30 row gap. The frame is 1790 - wider than
   the 1440 artboard - so the row needs
   `full_width="stretch_row_content_no_spaces"` and the tiles hold their ratio. */
.bakery .vc_row.sm-gal3x3 { width: 100%; margin: 0; padding: 40px 0; }
.bakery .vc_row.sm-gal3x3 > .container { max-width: none; padding: 0 25px; }
.sm-gal3x3-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 25px; row-gap: 30px;
}
.sm-gal3x3-grid figure { margin: 0; overflow: hidden; border-radius: var(--sm-radius); }
.sm-gal3x3-grid img {
    object-position: center top;
    border-radius: 0 !important;
	aspect-ratio: 580 / 398;
	object-fit: cover;
    display: block;
	width: 100%;
}

/* --- large centered image (229:349) — 1188x684 ---------------------------- */
.bakery .vc_row.sm-bigimage { width: 100%; margin: 0; padding: 40px 0; }
.bakery .vc_row.sm-bigimage > .container { max-width: 1188px; }
.sm-bigimage figure { margin: 0; }
.sm-bigimage img {
    display: block; width: 100%; aspect-ratio: 1188 / 684; object-fit: cover;
    border-radius: var(--sm-radius);
}

/* --- video row 2x (232:690) — 1479x525 -----------------------------------
   Head 86 tall (eyebrow + h2), 39 gap, then two 710x400 players on a 59
   gutter. 710x400 is 16:9. The frame is 1479, wider than the site's 1440 cap,
   so the track is capped at 1440 and the players scale with it. */
.bakery .vc_row.sm-video2x { width: 100%; margin: 0; padding: 40px 0; }
.bakery .vc_row.sm-video2x > .container { max-width: 1440px; }
.sm-video2x .sm-section-head { margin: 0 auto 39px; }
.sm-video2x-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 59px; }
.sm-video2x-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sm-radius); }
.sm-video2x-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- responsive for the B3 rows ------------------------------------------ */
@media (max-width: 979px) {
    .bakery .vc_row.sm-6633 > .container { grid-template-columns: 1fr; row-gap: 32px; }
    .bakery .vc_row.sm-3x > .container { grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 40px; }
    .bakery .vc_row.sm-4x > .container { grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 40px; }
    .sm-gal8-band, .sm-gal8-band-1, .sm-gal8-band-2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .sm-gal8-band figure { grid-column: auto !important; grid-row: auto !important; height: 240px; }
    .sm-gal3x3-grid { grid-template-columns: repeat(2, 1fr); }
    .sm-video2x-grid { gap: 32px; }
    body #content .sm-hero-short h1 { font-size: 34px; line-height: 44px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-hero-short { min-height: 140px; }
    body #content .sm-hero-short h1 { font-size: 28px; line-height: 36px; }
    .bakery .vc_row.sm-3x > .container, .bakery .vc_row.sm-4x > .container { grid-template-columns: 1fr; }
    body #content .sm-3x h2, body #content .sm-3x h3,
    body #content .sm-4x h2, body #content .sm-4x h3 { min-height: 0; }
    .sm-gal8-band, .sm-gal8-band-1, .sm-gal8-band-2 { grid-template-columns: 1fr; }
    .sm-gal8-band figure { height: 220px; }
    .sm-gal3x3-grid { grid-template-columns: 1fr; }
    .sm-video2x-grid { grid-template-columns: 1fr; gap: 24px; }
    .bakery .wpb_row.sm-faq-short ul.vc_tta-tabs-list { flex-direction: column; column-gap: 0 !important; }
    .bakery .wpb_row.sm-faq-short .vc_tta-panel-body { margin-top: 24px; }
}

/* ---------------------------------------------------------------------------
   GLOBAL CHROME — top announcement bar, footer, copyright row
   Built after B1 (session 4). Applies site-wide; no page classes here.

   WHY SO MUCH OF THIS IS HAND-WRITTEN:
   the theme options for top-bar background, top-bar link colours, footer
   background, footer link colours, footer text colour and footer widget-title
   styling are all SET in the option store but generate_options_css() never
   consumes them — the compiled Top Widgetized Area tab emits only height +
   container width, and the compiled Footer tab emits only container width and
   two icon transitions. Re-saving theme options will not change any colour
   below. Height (36px), header height (84px) and the container percentages DO
   compile, so those stay as options and are deliberately absent here.
--------------------------------------------------------------------------- */

/* --- top announcement bar (design system 161:205) ------------------------ */
.top-widget { background: var(--sm-dark); }
.top-widget > .container {
    display: flex; align-items: center; justify-content: center; height: 36px;
}
.top-widget .span6.left { float: none; width: 100%; text-align: center; }
.top-widget .span6.right { display: none; }
.top-widget .sidebar, .top-widget .widget { margin: 0; }
body .top-widget p.sm-topbar-announce {
    color: var(--sm-cream) !important; letter-spacing: .375px; font-style: normal;
    line-height: 15px; font-size: 12.5px; font-weight: 400; margin: 0;
}
/* the compiled `body span {font-family: IBMPlexSans-Regular}` hits this span
   directly, so it has to restate the family and size rather than inherit */
body .top-widget span.sm-topbar-label {
    font-family: 'Jost', sans-serif !important; font-size: 12.5px; font-style: normal;
    font-weight: 700 !important; line-height: 15px; letter-spacing: .375px;
    color: var(--sm-gold) !important; margin-right: 16px;
}

/* --- primary nav spacing (design system 161:205) -------------------------- */
/* themes/vds/style.css:267 sets `.left-right-header ul#top-menu li {padding:38px 10px}`
   and loads after custom.css, so these need HIGHER specificity, not just !important —
   `body .top-header.left-right-header` adds a class and a type and wins.
   Comped desktop value is 34px 27px. The horizontal half then steps down so the nav
   never wraps between 1440 and 980, where the theme swaps to the mobile menu.
   Budget at 1440: container is 92% (max 1440), logo 185px, BOOK A TOUR 158px, and the
   nav block measures 433px plus 12 times the horizontal padding (6 items, 2 sides each,
   plus the 10px li:last-child margin and the 15px nav padding-right). Each step keeps
   about 16px of slack, i.e. padding no greater than (0.92 * viewport - 792) / 12.
   Re-derive from that if a nav item is ever added or renamed.
   NOTE: never write a less-than character in custom.css, comments included — the CSS
   API strips from it to the next greater-than, which is usually a child combinator in
   a later selector, silently deleting everything in between. */
body .top-header.left-right-header ul#top-menu li { padding: 34px 27px; }
@media (max-width: 1239px) { body .top-header.left-right-header ul#top-menu li { padding: 34px 22px; } }
@media (max-width: 1150px) { body .top-header.left-right-header ul#top-menu li { padding: 34px 17px; } }
@media (max-width: 1080px) { body .top-header.left-right-header ul#top-menu li { padding: 34px 13px; } }
/* DELIBERATELY 1024, NOT 979. The build's layout tier moved to 979 on 2026-09-14 to
   match the theme (its `.bakery .container` is a flex row at 980+ and the mobile menu
   swaps in below 980). This rule squeezes the DESKTOP menu in the 980-1024 band, which
   only exists above the new tier — moving it to 979 would delete it where it is needed. */
@media (max-width: 1024px) { body .top-header.left-right-header ul#top-menu li { padding: 34px 9px; } }

/* --- footer (design system 161:113) -------------------------------------- */
footer#footer.site-footer { background: var(--sm-dark); padding: 40px 0 40px; margin: 0; }
footer#footer.site-footer .row .container {
    max-width: 1188px; display: flex; align-items: flex-start;
}
footer#footer.site-footer .mobile-clear { display: none; }
footer#footer.site-footer .vc_col-sm-3.span3 { float: none; width: auto; padding: 0; }
footer#footer.site-footer .footer-col-1 { flex: 0 0 29%; }
footer#footer.site-footer .footer-col-2,
footer#footer.site-footer .footer-col-3,
footer#footer.site-footer .footer-col-4 { flex: 0 0 23.6%; }
footer#footer.site-footer .sidebar,
footer#footer.site-footer .widget { margin: 0; padding: 0; }

body footer#footer .widget-title {
    color: var(--sm-orange) !important;
    font-size: 12px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.2;
    text-transform: uppercase; margin: 0 0 18px;
}
body footer#footer p,
body footer#footer li,
body footer#footer a {
    color: var(--sm-cream) !important;
    font-family: 'Jost', 'Urbanist-SemiBold', sans-serif !important;
    font-size: 13px; line-height: 30px;
}
body footer#footer a { text-decoration: none; transition: color .2s ease; }
body footer#footer a:hover { color: var(--sm-gold) !important; }

body footer#footer ul.sm-footer-links { list-style: none; margin: 0; padding: 0; }
body footer#footer ul.sm-footer-links li { margin: 0; }

.sm-footer-logo { display: inline-block; margin: 0 0 26px; }
.sm-footer-logo img { width: 134px; height: auto; display: block; }
body footer#footer p.sm-footer-address,
body footer#footer p.sm-footer-phone { margin: 0; font-size: 14px; line-height: 22px; }
body footer#footer p.sm-footer-address a,
body footer#footer p.sm-footer-phone a { font-size: 14px; line-height: 22px; }

/* --- copyright row ------------------------------------------------------- */
/* the compiled colours section hard-codes `.row.copyright, .top-widget
   {background:var(--dark2)}` — match its specificity to beat it */
.row.copyright { background: var(--sm-dark); }
.copyright .container {
    max-width: 1188px;
    border-top: 1px solid rgba(246, 240, 226, .16);
    padding-top: 18px; padding-bottom: 22px;
}
.copyright .copyright-content.span6.right { display: none; }
.copyright .copyright-text.span6.left { float: none; width: 100%; }
body .copyright p#copyright-p,
body .copyright p#copyright-p .sm-copy-tail {
    font-family: 'Jost', 'Urbanist-SemiBold', sans-serif !important;
    font-size: 12px !important; line-height: 1.6;
    color: rgba(246, 240, 226, .7) !important;
}
body .copyright p#copyright-p { margin: 0; }
body .copyright p#copyright-p i.icon-copyright { font-style: normal; }
/* The theme hard-codes `(c) [year] [site title]` and then appends
   copyright_row_group_copyright_text after a markup newline. The option is set
   to a span.sm-copy-tail wrapping ". All rights reserved." so the tail can
   pull back over that collapsed space and read as one sentence. */
body .copyright p#copyright-p .sm-copy-tail { margin-left: -.28em; }

/* --- chrome responsive --------------------------------------------------- */
@media (max-width: 900px) {
    footer#footer.site-footer .row .container { flex-wrap: wrap; }
    footer#footer.site-footer .footer-col-1 { flex: 0 0 100%; margin-bottom: 32px; }
    footer#footer.site-footer .footer-col-2,
    footer#footer.site-footer .footer-col-3,
    footer#footer.site-footer .footer-col-4 { flex: 0 0 33.33%; }
}
@media (max-width: 600px) {
    .top-widget { height: auto; }
    .top-widget > .container { height: auto; padding-top: 8px; padding-bottom: 8px; }
    body .top-widget p.sm-topbar-announce { font-size: 12px; line-height: 1.5; }
    body .top-widget .sm-topbar-label { display: block; margin: 0 0 2px; }
    footer#footer.site-footer .footer-col-2,
    footer#footer.site-footer .footer-col-3,
    footer#footer.site-footer .footer-col-4 { flex: 0 0 100%; margin-bottom: 28px; }
    footer#footer.site-footer .footer-col-4 { margin-bottom: 0; }
}

/* ==========================================================================
   WEDDING-INQUIRY MODAL  (theme file: inc/sm-inquiry-modal.php)
   --------------------------------------------------------------------------
   A dependency-free lightbox around Gravity Form 4, opened by any element with
   `sm-inquiry-trigger`. It renders in `wp_footer`, i.e. OUTSIDE `#content`, so
   none of the `body #content …` selectors used everywhere else in this build
   reach it — every rule below has to stand on its own. That is also why the
   selectors here are deliberately plain: there is no theme rule to out-specify
   out here, only Gravity Forms' own `gravity-theme` stylesheet.
   ========================================================================== */

.sm-modal {
    /* The theme puts `z-index: 9999999` on the header's own anchors, and the header
       is NOT a stacking context (static, z-index auto), so those anchors compete
       with the modal directly at the root and the nav printed straight through the
       dialog at 100000. This has to clear 9999999, not merely "be a big number". */
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.sm-modal[hidden] { display: none; }

/* The scroll lock goes on the root element, not `body`. The theme restyles
   `body`, and a lock there loses to it; `position: fixed` on body would also
   jump the page back to the top on open. */
html.sm-modal-open { overflow: hidden; }

.sm-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(27, 20, 13, .72);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

.sm-modal-dialog {
    position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 48px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--sm-cream-deep); border-radius: var(--sm-radius);
    box-shadow: 0 24px 70px rgba(27, 20, 13, .45);
    /* A hairline of gold reads as the same family as the site's dividers without
       putting a second surface colour into the panel. */
    border-top: 3px solid var(--sm-gold);
    outline: none;
}
.sm-modal-body { padding: 40px 44px 44px; }

.sm-modal-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 38px; height: 38px; line-height: 1; padding: 0;
    background: transparent; border: 0; border-radius: 50%; cursor: pointer;
    font-size: 30px; color: var(--sm-neutral-3); transition: all .2s ease;
}
.sm-modal-close:hover { background: rgba(27, 20, 13, .07); color: var(--sm-dark); }

.sm-modal-title {
    font-family: 'Fraunces', Georgia, serif; color: var(--sm-green);
    font-size: 32px; line-height: 40px; margin: 0 0 28px; text-align: center;
}
/* GF's heading block is hidden at the dev's request (2026-09-14). It held the
   form title — which `.sm-modal-title` already prints — the description, and the
   `"*" indicates required fields` legend. Hiding the wrapper takes all three, so
   there is deliberately no `.gform_description` / `.gform_required_legend`
   styling below: it would be dead CSS. */
.sm-modal-body .gform_heading {
    display: none;
}

/* --- fields --------------------------------------------------------------
   The form is long (name, date, time, headcount, two yes/no pairs, a nine-option
   budget radio, message, email, phone). GF's own grid is left in charge of the
   column spans; only the rhythm and the skin are set here. */
.sm-modal .gform_wrapper.gravity-theme .gform_fields { row-gap: 20px; column-gap: 22px; }
.sm-modal .gform_wrapper.gravity-theme .gfield_label,
.sm-modal .gform_wrapper.gravity-theme legend.gfield_label {
    font-family: 'Jost', sans-serif; font-size: 13px; line-height: 20px;
    letter-spacing: .04em; font-weight: 600; color: var(--sm-brown);
    margin: 0 0 7px; padding: 0;
}
/* FONT FAMILY HAS TO BE RESTATED ON THE SPANS, NOT JUST THE LABELS. The theme
   carries a bare `body span` font-family rule. A label styled above passes Jost
   down by inheritance, but any SPAN inside it is matched by `body span` directly
   and inheritance never gets a say — so the required asterisk rendered in the
   theme's IBM Plex Sans next to a Jost label. Covers every GF label variant
   (label / legend / sub / inline) and their spans in one place. */
.sm-modal .gform_wrapper.gravity-theme label,
.sm-modal .gform_wrapper.gravity-theme legend,
.sm-modal .gform_wrapper.gravity-theme label span,
.sm-modal .gform_wrapper.gravity-theme legend span,
.sm-modal .gform_wrapper.gravity-theme .gform-field-label,
.sm-modal .gform_wrapper.gravity-theme .gfield_required,
.sm-modal .gform_wrapper.gravity-theme .gfield_required_asterisk {
    font-family: 'Jost', sans-serif;
}
/* The dev switched GF's required indicator to the bare asterisk on 2026-09-14. */
.sm-modal .gform_wrapper.gravity-theme .gfield_required,
.sm-modal .gform_wrapper.gravity-theme .gfield_required_asterisk {
    color: var(--sm-gold); margin-left: 2px; font-weight: 600;
}
/* GF's sub-labels (Prefix/First/Last, HH/MM) come through at two different sizes
   — 12px under a complex field, 15px under the time field. One size for both. */
.sm-modal .gform_wrapper.gravity-theme .gform-field-label--type-sub {
    font-size: 12px; line-height: 18px; color: var(--sm-neutral-2); font-weight: 400;
}

.sm-modal .gform_wrapper.gravity-theme .gform_fields .gfield_description,
.sm-modal .gform_wrapper.gravity-theme .ginput_complex label {
    font-family: 'Jost', sans-serif; font-size: 12px; color: var(--sm-neutral-2);
    letter-spacing: .02em; padding-top: 4px;
}

.sm-modal .gform_wrapper.gravity-theme input[type="text"],
.sm-modal .gform_wrapper.gravity-theme input[type="email"],
.sm-modal .gform_wrapper.gravity-theme input[type="tel"],
.sm-modal .gform_wrapper.gravity-theme input[type="number"],
.sm-modal .gform_wrapper.gravity-theme input[type="date"],
.sm-modal .gform_wrapper.gravity-theme select,
.sm-modal .gform_wrapper.gravity-theme textarea {
    font-family: 'Jost', sans-serif; font-size: 15px; line-height: 24px;
    color: var(--sm-dark); background: #fff;
    border: 1px solid var(--sm-neutral-1); border-radius: 8px;
    padding: 11px 9px; width: 100%; box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sm-modal .gform_wrapper.gravity-theme textarea { min-height: 110px; resize: vertical; }
.sm-modal .gform_wrapper.gravity-theme input::placeholder,
.sm-modal .gform_wrapper.gravity-theme textarea::placeholder { color: var(--sm-neutral-2); }
.sm-modal .gform_wrapper.gravity-theme input:focus,
.sm-modal .gform_wrapper.gravity-theme select:focus,
.sm-modal .gform_wrapper.gravity-theme textarea:focus {
    outline: none; border-color: var(--sm-gold);
    box-shadow: 0 0 0 3px rgba(192, 138, 46, .16);
}

/* Radios and checkboxes: the budget field alone is nine options, so they are set
   as a wrapping row of chips rather than a nine-line list that would push the
   submit button off a laptop screen. */
.sm-modal .gform_wrapper.gravity-theme .gfield_radio,
.sm-modal .gform_wrapper.gravity-theme .gfield_checkbox {
    display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.sm-modal .gform_wrapper.gravity-theme .gchoice {
    display: flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--sm-neutral-1); border-radius: 999px;
    padding: 7px 14px 7px 11px; margin: 0;
}
.sm-modal .gform_wrapper.gravity-theme .gchoice label {
    font-family: 'Jost', sans-serif; font-size: 14px; line-height: 20px;
    color: var(--sm-body); margin: 0; cursor: pointer;
}
.sm-modal .gform_wrapper.gravity-theme .gchoice input[type="radio"],
.sm-modal .gform_wrapper.gravity-theme .gchoice input[type="checkbox"] {
    accent-color: var(--sm-gold); width: 15px; height: 15px; margin: 0; cursor: pointer;
}
/* The date field is an input plus GF's own calendar-picker image button; without
   this the button sits on the text baseline rather than the field's centre. */
.sm-modal .gform_wrapper.gravity-theme .ginput_container_date {
    display: flex; align-items: center; gap: 10px;
}
.sm-modal .gform_wrapper.gravity-theme .ginput_container_date input { flex: 1 1 auto; }
.sm-modal .gform_wrapper.gravity-theme .ui-datepicker-trigger { flex: 0 0 auto; cursor: pointer; }

/* GOTCHA 40 — GF's HORIZONTAL CHOICE ALIGNMENT, not the padding.
   A choice field set to horizontal alignment in the form editor carries
   `gfield--choice-align-horizontal`, and GF then ships (via a long selector list
   that also covers the legacy `gf_list_inline`):
     ... .gchoice { display: inline-block; padding-inline-end: 16px;
                    vertical-align: top }
   Its `:where(...)` segment adds no specificity, but it still outweighs the base
   `.gchoice` rule above. `display: inline-block` + `vertical-align: top` takes the
   chip out of flex centring and lets INLINE layout place the radio — that is what
   pushed the button off-centre and stretched the chip to 47px against the budget
   group's 36px, and why the right padding read 16px when 14px is authored.
   **The 7px top padding was never the cause.** The budget field carries the
   identical padding and centres correctly, because it is NOT set to horizontal
   alignment. Dropping padding-top would have flattened the budget bubbles to fix a
   problem they never had.
   GF's exact selector is
     .gform_wrapper.gravity-theme .gfield.gfield--choice-align-horizontal
       .gfield_radio .gchoice
   — SIX classes. Dropping `.gfield_radio` from ours ties at six and GF's sheet is
   enqueued AFTER custom.css, so the tie goes to GF. The group class has to stay in
   the selector to reach seven. Also restate the right padding as the LOGICAL
   property GF used: a physical shorthand does not displace `padding-inline-end`. */
.sm-modal .gform_wrapper.gravity-theme .gfield.gfield--choice-align-horizontal .gfield_radio,
.sm-modal .gform_wrapper.gravity-theme .gfield.gfield--choice-align-horizontal .gfield_checkbox {
    display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.sm-modal .gform_wrapper.gravity-theme .gfield.gfield--choice-align-horizontal .gfield_radio .gchoice,
.sm-modal .gform_wrapper.gravity-theme .gfield.gfield--choice-align-horizontal .gfield_checkbox .gchoice {
    display: flex; align-items: center; vertical-align: middle;
    padding: 7px 14px 7px 11px; padding-inline-end: 14px;
}

/* The time field is three controls (HH / MM / AM-PM) that GF lays out inline. */
.sm-modal .gform_wrapper.gravity-theme .gfield_time_hour,
.sm-modal .gform_wrapper.gravity-theme .gfield_time_minute,
.sm-modal .gform_wrapper.gravity-theme .gfield_time_ampm { max-width: 92px; }

/* --- submit --------------------------------------------------------------
   Matched to `a.btn-bt.default`, the gold pill used everywhere else on the site.
   The gold is declared literally rather than inherited from the theme's compiled
   colour scheme, which only paints `.btn-bt` inside `#content`. */
.sm-modal .gform_wrapper.gravity-theme .gform_footer {
    justify-content: center; margin: 26px 0 0; padding: 0;
}
.sm-modal .gform_wrapper.gravity-theme .gform_footer button.gform_button,
.sm-modal .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
    font-family: 'Jost', sans-serif; font-size: 13px; line-height: 15.6px;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    background: var(--sm-gold); color: var(--sm-dark-4);
    border: 1px solid var(--sm-gold); border-radius: 999px;
    padding: 17px 38px; cursor: pointer; transition: all .2s ease; width: auto;
}
.sm-modal .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover,
.sm-modal .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
    background: var(--sm-green); border-color: var(--sm-green); color: var(--sm-cream);
}

/* --- validation + confirmation ------------------------------------------- */
.sm-modal .gform_wrapper.gravity-theme .gfield_error input,
.sm-modal .gform_wrapper.gravity-theme .gfield_error select,
.sm-modal .gform_wrapper.gravity-theme .gfield_error textarea { border-color: #b3382c; }
.sm-modal .gform_wrapper.gravity-theme .validation_message,
.sm-modal .gform_wrapper.gravity-theme .gform_validation_errors {
    font-family: 'Jost', sans-serif; font-size: 13px; border-radius: 8px;
}
.sm-modal .gform_confirmation_message {
    font-family: 'Jost', sans-serif; font-size: 17px; line-height: 30px;
    color: var(--sm-green); text-align: center; padding: 28px 0 8px;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 767px) {
    .sm-modal { padding: 0; align-items: flex-end; }
    /* Full-height sheet on a phone: a centred card with 24px of scrim above and
       below wastes the only axis this form is short of. */
    .sm-modal-dialog {
        max-width: none; max-height: 100vh; height: 100%;
        border-radius: 0; border-top-width: 0;
    }
    .sm-modal-body { padding: 30px 22px 40px; }
    .sm-modal-title { font-size: 26px; line-height: 34px; }
    .sm-modal .gform_wrapper.gravity-theme .gfield_time_hour,
    .sm-modal .gform_wrapper.gravity-theme .gfield_time_minute,
    .sm-modal .gform_wrapper.gravity-theme .gfield_time_ampm { max-width: 78px; }
    .sm-modal .gform_wrapper.gravity-theme .gform_footer button.gform_button,
    .sm-modal .gform_wrapper.gravity-theme .gform_footer input[type="submit"] { width: 100%; }
}


/* === Page: home === 2026-09-09 === */
/* Homepage-only overrides. Everything reusable lives in the _global block. */

/* --- hero (design system 220:559 — 1440x680, homepage only) --------------- */
.bakery .vc_row.sm-hero {
    min-height: 680px;
    display: flex;
    align-items: center;
    /* No CSS scrim — the darkening is baked into the artwork. This matches the comp
       exactly (solved against images/01-home/hero.jpg: mean delta 0.003, best-fit
       alpha 0). Do not add a gradient layer back; if the hero ever needs more contrast,
       the fix belongs in the image. */
    background-image: url('/wp-content/uploads/2026/09/home-hero.jpg');
    background-size: cover;
    background-position: center;
}
.sm-hero-inner { max-width: 700px; padding: 40px 0; }
.sm-hero-badge {
    display: inline-block; margin-bottom: 26px; padding: 8px 18px; border-radius: 999px;
    background: rgba(0,0,0,.40); border: 1px solid var(--sm-dark);
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
body #content .sm-hero h1 { color: #fff !important; margin: 0 0 22px; max-width: 550px; }
body #content .sm-hero .sm-hero-sub {
    color: #ede7db !important; font-size: 17px; font-weight: 500;
    font-family: 'Jost', sans-serif !important; line-height: 28.05px;
    max-width: 420px; margin: 0 0 30px;
}
.sm-hero-btns { margin: 0 0 26px; }
body #content .sm-hero p.sm-hero-rating {
    color: var(--sm-cream) !important; margin: 0;
    font-family: 'Jost', sans-serif !important; font-style: normal; font-weight: 700;
    font-size: 14px !important; line-height: 16.2px !important;
}
body #content .sm-hero .sm-hero-rating strong { color: #fff !important; }
/* `body span` in the compiled options stylesheet sets IBM Plex directly on every
   span, so spans never inherit — each one has to restate family and size. */
body #content .sm-hero .sm-hero-rating .sm-stars {
    color: var(--sm-gold) !important; font-size: 14px; font-family: 'Jost', sans-serif !important;
}

/* --- collage (homepage "Step Inside the Gilded Age") ---------------------- */
.sm-collage-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.62fr 0.62fr;
    grid-template-rows: 168px 232px;
    gap: 16px;
}
.sm-collage-grid figure { margin: 0; overflow: hidden; border-radius: var(--sm-radius); }
.sm-collage-grid img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.sm-cg-1 { grid-column: 1; grid-row: 1 / span 2; }
.sm-cg-2 { grid-column: 2; grid-row: 1; }
.sm-cg-3 { grid-column: 3; grid-row: 1; }
.sm-cg-4 { grid-column: 2 / span 2; grid-row: 2; }
body #content .sm-collage-copy {
    max-width: 1100px; margin: 77px auto 0; text-align: center; font-size: 16px; line-height: 26.5px;
}

@media (max-width: 979px) {
    .bakery .vc_row.sm-hero { min-height: 560px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-hero {
        min-height: 520px;
        background-image: url('/wp-content/uploads/2026/09/home-hero-mobile.jpg');
        background-position: center top;
    }
    .sm-hero-inner { max-width: none; }
    .sm-collage-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 140px 180px; }
    .sm-cg-1 { grid-column: 1 / span 2; grid-row: 1; }
    .sm-cg-2 { grid-column: 1; grid-row: 2; }
    .sm-cg-3 { grid-column: 2; grid-row: 2; }
    .sm-cg-4 { grid-column: 1 / span 2; grid-row: 3; }
}


/* === Page: christmas-tours === 2026-09-09 === */
/* Christmas Tours (page 2721) — page-only overrides. Figma 147:66.
   custom.css is ONE globally-loaded file, so every rule here is scoped with
   `.sm-xmas` — a class every row on this page carries alongside `sm-row`.
   Without that scope these band colours and paddings would repaint the
   homepage's shared rows too. Anything page-agnostic belongs in _global.add.css. */

/* --- hero (sub page hero jumbo, 1440x594) -------------------------------- */
.bakery .vc_row.sm-xmas.sm-hero-jumbo {
    background-image: url('/wp-content/uploads/2026/09/tours-christmas-tours-hero-christmas-tours.jpg');
}

/* --- band colours -------------------------------------------------------
   The comp alternates cream / cream-deep differently from the homepage, and
   the global library defaults these rows to cream. */
.bakery .vc_row.sm-xmas.sm-snowbird,
.bakery .vc_row.sm-xmas.sm-awards,
.bakery .vc_row.sm-xmas.sm-collage,
.bakery .vc_row.sm-xmas.sm-faq { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-xmas.sm-3366,
.bakery .vc_row.sm-xmas.sm-tickets,
.bakery .vc_row.sm-xmas.sm-tickets-head,
.bakery .vc_row.sm-xmas.sm-xslider,
.bakery .vc_row.sm-xmas.sm-owner { background: var(--sm-cream); }

/* --- per-comp row rhythm (measured off the 1440 comp, band by band) ------
   intro + awards share one 456 band: 36 top, 30 between, 34 bottom. */
.bakery .vc_row.sm-xmas.sm-snowbird { padding: 36px 0 0; }
.bakery .vc_row.sm-xmas.sm-awards   { padding: 30px 0 34px; }
/* Christmas comp draws the award badges at 90px, not the homepage's 144. */
.sm-xmas .sm-awards-row img { height: 90px; }
/* The intro paragraph runs the full 1108 track, far wider than the 760 `.sm-lede`. */
body #content .sm-xmas .sm-intro-lede { max-width: 1100px; }

/* three 33/66 rows: 38 top on the first, 100 between, 133 after the last */
.bakery .vc_row.sm-xmas.sm-3366-1 { padding: 38px 0 0; }
.bakery .vc_row.sm-xmas.sm-3366-2 { padding: 100px 0 0; }
.bakery .vc_row.sm-xmas.sm-3366-3 { padding: 100px 0 133px; }

.bakery .vc_row.sm-xmas.sm-collage { padding: 40px 0 65px; }
/* the section head is its own row: `.sm-tickets` makes .container a 2-col grid,
   so a full-width head cannot sit inside it. */
.bakery .vc_row.sm-xmas.sm-tickets-head { padding: 48px 0 0; }
.bakery .vc_row.sm-xmas.sm-tickets      { padding: 0 0 57px; }
.sm-xmas.sm-tickets-head .sm-section-head { margin-bottom: 56px; }
.bakery .vc_row.sm-xmas.sm-xslider { padding: 75px 0 0; }
.bakery .vc_row.sm-xmas.sm-owner   { padding: 49px 0 71px; }

/* --- collage (comp 147:66, 1180x456) -------------------------------------
   Page-specific geometry: a 580 hero image beside two 282 thumbs and one 580
   wide strip. The homepage collage (`.sm-collage-grid`, home block) is a
   different set of proportions, so this page declares its own grid rather
   than bending that one. Exports are exactly these sizes. */
.sm-xcollage {
    display: grid; grid-template-columns: 580fr 282fr 282fr;
    grid-template-rows: 219px 219px; gap: 18px;
}
.sm-xcollage figure { margin: 0; overflow: hidden; border-radius: var(--sm-radius); }
.sm-xcollage img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.sm-xcg-1 { grid-column: 1; grid-row: 1 / span 2; }
.sm-xcg-2 { grid-column: 2; grid-row: 1; }
.sm-xcg-3 { grid-column: 3; grid-row: 1; }
.sm-xcg-4 { grid-column: 2 / span 2; grid-row: 2; }

/* --- FAQ foot + reviews reuse the library as built; only the band changed - */

/* --- gallery slider ------------------------------------------------------
   WP Carousel Pro instance 2850 (Carousel preset > Center style, variable width
   + equal height) — which is what 147:66 draws: a 630 centre slide with the
   neighbours clipped to ~277, all 420 tall. The plugin's reserved 60px dot-
   pagination margin and the arrow styling are handled SITE-WIDE in
   _global.add.css, not here.
   Only the arrow OFFSET is page-scoped: 147:66 puts the circles at x=46 and 1356,
   i.e. 10px outside this row's container edge. Other carousels will sit in other
   containers, so this stays off the global rule. */
.sm-xmas.sm-xslider .wpcp-prev-button { left: -10px !important; }
.sm-xmas.sm-xslider .wpcp-next-button { right: -10px !important; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-xmas.sm-3366-2,
    .bakery .vc_row.sm-xmas.sm-3366-3 { padding-top: 72px; }
    .bakery .vc_row.sm-xmas.sm-3366-3 { padding-bottom: 90px; }
    .sm-xcollage { grid-template-rows: 200px 200px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-xmas.sm-xslider { padding-top: 48px; }
    .bakery .vc_row.sm-xmas.sm-owner { padding: 40px 0 56px; }
    .sm-xmas .sm-awards-row img { height: 68px; }
    .sm-xcollage { grid-template-columns: 1fr 1fr; grid-template-rows: 190px 140px 150px; }
    .sm-xcg-1 { grid-column: 1 / span 2; grid-row: 1; }
    .sm-xcg-2 { grid-column: 1; grid-row: 2; }
    .sm-xcg-3 { grid-column: 2; grid-row: 2; }
    .sm-xcg-4 { grid-column: 1 / span 2; grid-row: 3; }
}

/* --- corrections from the first 1440 comp diff ---------------------------- */

/* Comp breaks the intro H2 after "Tour," — unconstrained it runs one word long. */
body #content .sm-xmas.sm-snowbird .sm-section-head h2 { max-width: 790px; margin-left: auto; margin-right: auto; }
/* Rendered Jost is a shade wider than the Figma metrics, so the comp's line
   counts need a little more track than the comp's own measured text width. */
body #content .sm-xmas .sm-intro-lede { max-width: 1130px; }
.sm-xmas .sm-owner-note { max-width: 1140px; }

/* The shared `sm-row` reset zeroes the last child's margin-bottom, which kills
   `.sm-section-head`'s 48px — so the gap to the cards has to be row padding. */
.bakery .vc_row.sm-xmas.sm-tickets-head { padding: 48px 0 56px; }

/* Spotlight: this comp splits 656/784, not the library's 50/50, and gives the
   dark column a 625px text measure inset 79px from the image edge. */
.bakery .vc_row.sm-xmas.sm-spotlight .sm-spotlight-media { flex: 0 0 45.56%; max-width: 45.56%; }
.bakery .vc_row.sm-xmas.sm-spotlight .sm-spotlight-text { flex: 1 1 auto; max-width: 54.44%; }
.bakery .vc_row.sm-xmas.sm-spotlight .sm-spotlight-text > .vc_column-inner {
    max-width: 744px; padding: 80px 40px 80px 79px !important;
}

/* FAQ accordion measure (760, centred) moved to the shared library on the dev's
   call 2026-09-11 — it now applies to every page, homepage included. */

/* Comp sets the bottom-CTA lede on one line; the library's 780 measure wraps it. */
.sm-xmas .sm-cta-inner { max-width: 900px; }

@media (max-width: 979px) {
    .bakery .vc_row.sm-xmas.sm-spotlight .sm-spotlight-media,
    .bakery .vc_row.sm-xmas.sm-spotlight .sm-spotlight-text { flex: 1 1 auto; max-width: none; }
    .bakery .vc_row.sm-xmas.sm-spotlight .sm-spotlight-text > .vc_column-inner {
        max-width: none; padding: 48px 24px !important;
    }
}

/* The comp's bottom CTA is deliberately asymmetric — 105 above the eyebrow,
   155 below the button (band 457). The library's symmetric 108 left it 34 short. */
.bakery .vc_row.sm-xmas.sm-cta-bottom { padding: 108px 0 142px; }
@media (max-width: 767px) {
    .bakery .vc_row.sm-xmas.sm-cta-bottom { padding: 68px 0 84px; }
}

/* Small-phone rhythm (480px and under). These are DELIBERATELY tighter than this
   page's 767px values — a real responsive step, not a re-assertion of the same
   numbers, which is why they survived the E0 cleanup that deleted the 21 pure
   workaround blocks elsewhere. The `!important` they used to carry is gone: E0
   replaced the blunt global reset, and at five classes these beat
   `themes/vds/style.css:539` (three classes) on specificity alone. */
@media (max-width: 480px) {
    .bakery .vc_row.sm-row.sm-xmas.sm-snowbird    { padding: 28px 0 0; }
    .bakery .vc_row.sm-row.sm-xmas.sm-awards      { padding: 24px 0 28px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-3366-1      { padding: 40px 0 0; }
    .bakery .vc_row.sm-row.sm-xmas.sm-3366-2,
    .bakery .vc_row.sm-row.sm-xmas.sm-3366-3      { padding: 48px 0 0; }
    .bakery .vc_row.sm-row.sm-xmas.sm-3366-3      { padding-bottom: 56px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-collage     { padding: 40px 0 48px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-tickets-head{ padding: 44px 0 32px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-tickets     { padding: 0 0 48px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-xslider     { padding: 44px 0 0; }
    .bakery .vc_row.sm-row.sm-xmas.sm-owner       { padding: 36px 0 48px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-faq         { padding: 52px 0; }
    .bakery .vc_row.sm-row.sm-xmas.sm-reviews     { padding: 40px 0; }
    .bakery .vc_row.sm-row.sm-xmas.sm-ornament-row{ padding: 8px 0 32px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-cta-bottom  { padding: 60px 0 76px; }
    .bakery .vc_row.sm-row.sm-xmas.sm-cta-bar     { padding: 28px 0; }
}


/* === Page: about-us === 2026-09-09 === */
/* About Us (page 2703) — page-only overrides. No comp: structure comes from the
   designer README (§2.2 layout, §2.3 Level 1 rule, §3 image notes) plus
   row-inventory.md. custom.css is ONE globally-loaded file, so every rule here is
   scoped with `.sm-about` — a class every row on this page carries alongside
   `sm-row`. Anything page-agnostic belongs in _global.add.css instead. */

/* --- hero (sub page hero jumbo, 1440x594) -------------------------------- */
.bakery .vc_row.sm-about.sm-hero-jumbo {
    background-image: url('/wp-content/uploads/2026/09/about-us-hero-about.jpg');
}

/* --- band colours --------------------------------------------------------
   Alternate cream / cream-deep so the text rows and the two galleries read as
   separate bands. The library defaults most of these to cream. */
.bakery .vc_row.sm-about.sm-gal4-1,
.bakery .vc_row.sm-about.sm-gal4-2,
.bakery .vc_row.sm-about.sm-2x { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-about.sm-5050,
.bakery .vc_row.sm-about.sm-snowbird.sm-closing { background: var(--sm-cream); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. So the page works on a single
   HALF-SEAM of 40px - every row contributes 40 top and 40 bottom, which makes
   every join 80 - and a join is tightened by zeroing one side rather than by
   inventing a new pair of numbers. (The first pass mixed 24/56/80 halves, which
   gave 165px double-padding seams AND left the gallery rows visibly lopsided.)

   EXCEPTION - gallery set 2 and the 2x row are NOT in this table. They are the
   one pair on this page that shares a background, so they sit in a `vc_section`
   (the house pattern) and take their spacing from it instead. See below. */
.bakery .vc_row.sm-about.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-about.sm-5050     { padding: 40px 0; }
.bakery .vc_row.sm-about.sm-gal4-1   { padding: 40px 0; }
.bakery .vc_row.sm-about.sm-snowbird.sm-school   { padding: 40px 0; }
.bakery .vc_row.sm-about.sm-snowbird.sm-closing  { padding: 40px 0 88px; }

/* --- section: gallery set 2 + the 2x row (shared cream-deep band) ---------
   House pattern. The section carries the outer padding at the same 40px
   half-seam as every other row here, so its joins to the School House row above
   and the closing row below still come out at 80. Inside it, the two rows have
   no padding (the theme zeroes `section.vc_section .wpb_row`) and the join is
   the 35px row margin re-enabled for section-inner rows in `_global.add.css`.
   To tighten that join further, add `mb0` to the gallery row's el_class - do NOT
   reintroduce padding on either row, or the doubling comes straight back. */
.bakery section.vc_section.sm-about-sec { padding: 40px 0; }
.bakery section.vc_section.sm-about-sec-estate { background: var(--sm-cream-deep); }
/* Both live headings in this row must occupy the SAME number of lines, or the two
   paragraphs start at different heights and the row reads as broken. The longer one
   ("The Historic Greenhouse & the Original Central Florida Steam Furnace") needs a
   step down from the library's 30px to fit two lines in the 523px column, so the
   min-height comes down to a 2-line block to match. */
body #content .sm-about.sm-2x h2 { font-size: 26px; line-height: 34px; min-height: 68px; }

/* The intro sits under the H1 with no H2 of its own — it is the lede paragraph
   from the live page, so let it run wider than the 760 `.sm-lede` default. */
body #content .sm-about .sm-intro-lede { max-width: 1000px; }

/* The School House and the closing passage are long-form body copy: hold them
   to a readable measure instead of the full 1188 track. */
.sm-about .sm-prose { max-width: 900px; margin: 0 auto; }
body #content .sm-about .sm-prose h2 { text-align: center; margin: 0 0 24px; }

/* NOTE: `sm-about` sits on the ROW element alongside the row-type class, so a page
   override of a row itself is `.sm-about.sm-gal4-2`, COMPOUND - no space. Written as
   a descendant (`.sm-about .sm-gal4-2`) it matches nothing and fails silently. */

/* --- gallery object-positions --------------------------------------------
   Every tile in a 4x mosaic is a crop (the widest slot is 2.6:1 and no source
   photo is), so each one is anchored deliberately rather than left on `center`.
   Sources are the live /scrap-book page — see media-map.md batch 5. */
.sm-about.sm-gal4-1 .sm-gal4-d img { object-position: center 40%; }  /* floor patterns */
.sm-about.sm-gal4-2 .sm-gal4-a img { object-position: center 62%; }  /* kitchen, keep the island */
.sm-about.sm-gal4-2 .sm-gal4-c img { object-position: center 30%; }  /* bedroom, keep the bed */
.sm-about.sm-gal4-2 .sm-gal4-d img { object-position: center 55%; }  /* school house */

/* --- explore grid: About Us has FIVE Level 2 children, not the comp's four -- */
.sm-about .sm-gather-grid { --sm-gather-cols: 4; gap: 18px; }
.sm-about .sm-gather-media img { height: 148px; }
/* Meet the Team is a NEW page with no card export and no copy yet: its card is
   flagged as a placeholder so it is obvious in QA. */
.sm-about .sm-gather-card.sm-card-tbd { outline: 1px dashed rgba(37,28,18,.35); }
.sm-about .sm-gather-card.sm-card-tbd .sm-gather-media img { filter: grayscale(1); opacity: .55; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .sm-about .sm-gather-grid { --sm-gather-cols: 2; }
    .bakery .vc_row.sm-about.sm-snowbird { padding: 56px 0 32px; }
    .bakery section.vc_section.sm-about-sec { padding: 32px 0; }
}
@media (max-width: 767px) {
    /* the designer shipped a portrait hero crop for narrow widths (media 2866);
       the shared row already sets min-height and `center top` down here, so the
       page only has to swap the image. NOTE: Christmas Tours has the equivalent
       export (2839) and never wired it up - worth doing in E0. */
    .bakery .vc_row.sm-about.sm-hero-jumbo {
        background-image: url('/wp-content/uploads/2026/09/about-us-hero-about-mobile.jpg');
    }
    .sm-about .sm-gather-grid { --sm-gather-cols: 1; }
    .sm-about .sm-gather-media img { height: 200px; }
    .bakery .vc_row.sm-about.sm-5050   { padding: 24px 0; }
    .bakery .vc_row.sm-about.sm-gal4-1 { padding: 24px 0; }
    .bakery .vc_row.sm-about.sm-snowbird.sm-school  { padding: 24px 0; }
    .bakery section.vc_section.sm-about-sec { padding: 24px 0; }
    .bakery .vc_row.sm-about.sm-snowbird.sm-closing { padding: 24px 0 56px; }
}


/* === Page: tours === 2026-09-09 === */
/* Tours (page 2705) — page-only overrides. No comp: structure comes from the
   designer README (§2.2 layout, §2.3 Level 1 rule, §3 image notes) plus
   row-inventory.md geometry. custom.css is ONE globally-loaded file, so every rule
   here is scoped with `.sm-tours` — a class every row on this page carries
   alongside `sm-row`. Anything page-agnostic belongs in _global.add.css instead.

   NOTE: `sm-tours` sits on the ROW element next to the row-type class, so a page
   override of a row itself is `.sm-tours.sm-gal4-1`, COMPOUND — no space. Written
   as a descendant it matches nothing and fails silently. A space is only correct
   when the target really is a descendant (`.sm-tours .sm-gather-grid`). */

/* --- hero (sub page hero jumbo, 1440x594) -------------------------------- */
.bakery .vc_row.sm-tours.sm-hero-jumbo {
    background-image: url('/wp-content/uploads/2026/09/tours-hero-tours.jpg');
}

/* --- band colours --------------------------------------------------------
   Three bands: the intro copy and the gallery that illustrates it share the cream
   band (they are one section), then the explore grid changes to cream-deep to mark
   the switch from "about the tour" to "pick a tour". The library gives `.sm-gal4`
   no background of its own and `.sm-gather` cream-deep already. */
.bakery .vc_row.sm-tours.sm-gal4-1 { background: var(--sm-cream); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. Budget (build-plan): 64 within a
   section, 96 between sections.
     hero  -> intro    72 (opening breath, one side only)
     intro -> gallery  32 + 32 = 64   same section
     gallery -> grid   48 + 48 = 96   section change, and the band colour changes
     grid  -> cta      78 + 108, both library values, left alone: the bottom CTA is
                       a full-bleed dark band and reads as the page ending. */
.bakery .vc_row.sm-tours.sm-snowbird { padding: 72px 0 32px; }
.bakery .vc_row.sm-tours.sm-gal4-1   { padding: 32px 0 48px; }
.bakery .vc_row.sm-tours.sm-gather   { padding: 48px 0 78px; }

/* --- intro prose measure -------------------------------------------------
   Four paragraphs of live body copy: hold them to a readable measure rather than
   the full 1188 track. The lede is inside the same block, so it matches it instead
   of the library's centred 760. */
.sm-tours .sm-prose { max-width: 900px; margin: 0 auto; }
body #content .sm-tours .sm-intro-lede { max-width: 900px; }

/* --- gallery -------------------------------------------------------------
   Every tile was cropped to its exact slot ratio before upload (and at 2x the slot
   size, so it is not soft on retina), so `object-position: center` is already the
   intended framing and no per-tile anchoring is needed here. */

/* --- explore grid: Tours has THREE Level 2 children, not the comp's four ---
   At 3-up the card is ~381px wide and the card art is 560x300 (1.87:1), so the
   library's 118px media height would letterbox it badly; 200px is the art's own
   ratio at that width. */
.sm-tours .sm-gather-grid { --sm-gather-cols: 3; }
.sm-tours .sm-gather-media img { height: 200px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .sm-tours .sm-gather-grid { --sm-gather-cols: 2; }
    .sm-tours .sm-gather-media img { height: 180px; }
    .bakery .vc_row.sm-tours.sm-snowbird { padding: 56px 0 28px; }
    .bakery .vc_row.sm-tours.sm-gal4-1   { padding: 28px 0 40px; }
    .bakery .vc_row.sm-tours.sm-gather   { padding: 40px 0 56px; }
}
@media (max-width: 767px) {
    /* the designer shipped a portrait hero crop for narrow widths (media 2914);
       the shared row already sets min-height and `center top` down here, so the
       page only has to swap the image. */
    .bakery .vc_row.sm-tours.sm-hero-jumbo {
        background-image: url('/wp-content/uploads/2026/09/tours-hero-tours-mobile.jpg');
    }
    .sm-tours .sm-gather-grid { --sm-gather-cols: 1; }
    .sm-tours .sm-gather-media img { height: 200px; }
    .bakery .vc_row.sm-tours.sm-snowbird { padding: 40px 0 24px; }
    .bakery .vc_row.sm-tours.sm-gal4-1   { padding: 24px 0 32px; }
    .bakery .vc_row.sm-tours.sm-gather   { padding: 32px 0 48px; }
}


/* === Page: contact-us === 2026-09-09 === */
/* Contact Us (page 226) — page-only overrides. No comp: structure comes from the
   C6 brief, the designer README (§2.2 layout, §2.3 Level 1 rule) and
   row-inventory.md. custom.css is ONE globally-loaded file, so every rule here is
   scoped with `.sm-contact` — a class every row on this page carries alongside
   `sm-row`. Anything page-agnostic belongs in _global.add.css instead.

   NOTE: `sm-contact` sits on the ROW element next to the row-type class, so a
   page override of a row itself is `.sm-contact.sm-3x`, COMPOUND — no space.
   Written as a descendant it matches nothing and fails silently. A space is only
   correct where the target really is a descendant (`.sm-contact .sm-gf-contact`). */

/* --- hero (sub page hero jumbo, 1440x594) --------------------------------
   QA row 25 moved two live note lines into this hero, and they landed on the
   brightest part of the photograph — the white "TOUR STARTS HERE" sign at lower
   left — where 16px text is not readable. Same failure the Level 2 heroes hit,
   so the same documented recipe: `background-blend-mode: normal` (the theme puts
   `overlay` on every .vc_row, which BLENDS a gradient instead of compositing it)
   plus a gradient LAYER over the photograph. Weighted to the left, where the copy
   block sits, so the four faces on the right keep their exposure. See the
   `.sm-hero-scrim` block in _global.add.css for the full explanation. */
.bakery .vc_row.sm-contact.sm-hero-jumbo {
    background-image: linear-gradient(100deg, rgba(24,18,12,.72) 0%,
                                              rgba(24,18,12,.55) 32%,
                                              rgba(24,18,12,.12) 62%,
                                              rgba(24,18,12,.04) 100%),
                      url('/wp-content/uploads/2026/09/contact-us-hero-contact.jpg');
    background-blend-mode: normal;
}

/* --- band colours --------------------------------------------------------
   Alternate cream / cream-deep so the contact details and the directions read as
   separate bands from the prose around them. The library defaults most rows to
   cream. `.sm-visit` paints its own dark4 column and the map fills the other, so
   it is left alone. */
.bakery .vc_row.sm-contact.sm-3x,
.bakery .vc_row.sm-contact.sm-snowbird.sm-dir,
.bakery .vc_row.sm-contact.sm-2x { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-contact.sm-snowbird.sm-contact-form { background: var(--sm-cream); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. This page works on the same
   40px half-seam C1 settled on, so every ordinary join is 80. The two
   exceptions are deliberate:
     * directions head -> route columns is ONE section, so it is tightened to a
       32/32 = 64 in-section seam;
     * the route columns -> the full-bleed map get 72 on the bottom, because
       `.sm-visit` contributes nothing (it is padding-0 by design) and a 40px
       gap above a full-bleed band reads as a mistake. */
/* QA row 25 removed the intro row, which was the one carrying the 72px opener
   after the hero. The 3x contact lines are the first content row now, so the
   opener moves onto them. */
.bakery .vc_row.sm-contact.sm-3x                        { padding: 72px 0 40px; }
.bakery .vc_row.sm-contact.sm-snowbird.sm-contact-form  { padding: 40px 0 72px; }
.bakery .vc_row.sm-contact.sm-snowbird.sm-dir           { padding: 40px 0 32px; }
.bakery .vc_row.sm-contact.sm-2x.sm-dir-routes          { padding: 32px 0 72px; }

/* --- the two live lines, now in the hero (QA row 25) ---------------------
   They were a full-width row under the hero and are hero note lines now. Two
   short stacked lines, not one paragraph, so they stay tight; they sit between
   the sub-line and the Book a Tour button, so they take the hero's light-on-dark
   treatment and their links have to stay legible against the photograph. */
body #content .sm-contact .sm-hero-note {
    font-size: 16px; line-height: 26px; margin: 0; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
body #content .sm-contact .sm-hero-sub + .sm-hero-note { margin-top: 14px; }
body #content .sm-contact .sm-hero-note + .sm-hero-note { margin-top: 4px; }
body #content .sm-contact .sm-hero-note a {
    color: #fff; text-decoration: underline;
}
body #content .sm-contact .sm-hero-note a:hover { color: var(--sm-gold); }
body #content .sm-contact .sm-hero-inner .sm-hero-btns { margin-top: 26px; }

/* --- the three live contact lines (.sm-3x) -------------------------------
   The labels are bold text inside a paragraph on the live page, not headings
   (see the builder for the exact markup),
   so they are styled up to read as headings instead of being promoted in markup.
   The library gives `.sm-3x` a 50px min-height heading block so the paragraphs
   line up; with no h2/h3 in these columns that job falls to the label. */
.sm-contact .sm-ways-label { min-height: 50px; margin: 0; }
body #content .sm-contact .sm-ways-label strong {
    font-family: 'Jost', sans-serif !important; font-size: 20px; line-height: 25px;
    font-weight: 600; color: var(--sm-green) !important;
}
body #content .sm-contact.sm-3x p { text-align: left; }
body #content .sm-contact.sm-3x p a { color: var(--sm-green) !important; text-decoration: underline; }

/* --- directions route columns (.sm-2x) -----------------------------------
   Same label treatment, one step smaller, and the second column runs three
   paragraphs against the first column's one — `align-items:start` in the library
   keeps them top-aligned, so nothing else is needed. */
.sm-contact .sm-route-label { margin: 0 0 12px; }
body #content .sm-contact .sm-route-label strong {
    font-family: 'Jost', sans-serif !important; font-size: 18px; line-height: 24px;
    font-weight: 600; color: var(--sm-green) !important;
}

/* --- Gravity Forms: the CONTACT form (form 2) ----------------------------
   The only GF styling in the shared library is for the CTA-bar newsletter
   (`.sm-cta-bar-form`), which is a one-field inline bar — nothing there applies
   to a six-field stacked form, so the contact form is styled here, page-scoped.
   Form 2 uses GF's own `gravity-theme` grid (Email and Phone are span-6, the rest
   span-12), so the two-up row comes for free; this block only skins it.
   GF's `gravity-theme` stylesheet is high-specificity, hence `!important` on the
   text properties — the same approach the CTA-bar block already uses. */
.sm-contact .sm-gf-contact { max-width: 760px; margin: 0 auto; }
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme .gform_fields { row-gap: 22px; }
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme .gfield_label {
    font-family: 'Jost', sans-serif !important; font-size: 13px !important;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    color: var(--sm-green) !important; margin-bottom: 8px;
}
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme input[type="text"],
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme input[type="email"],
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme input[type="tel"],
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme select,
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme textarea {
    width: 100%; background: #fff; border: 1px solid var(--sm-neutral-1);
    border-radius: 8px; padding: 14px 16px;
    font-family: 'Jost', sans-serif !important; font-size: 16px !important;
    line-height: 24px; color: var(--sm-dark) !important;
}
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme textarea { min-height: 160px; resize: vertical; }
body #content .sm-contact .sm-gf-contact .gform_wrapper input::placeholder,
body #content .sm-contact .sm-gf-contact .gform_wrapper textarea::placeholder { color: var(--sm-neutral-2); }
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme input:focus,
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme select:focus,
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme textarea:focus {
    outline: 0; border-color: var(--sm-gold);
}
body #content .sm-contact .sm-gf-contact .gform_wrapper .gfield_required { color: var(--sm-orange) !important; }
body #content .sm-contact .sm-gf-contact .gform_wrapper .gform_validation_container { display: none !important; }
body #content .sm-contact .sm-gf-contact .gform_wrapper.gravity-theme .gform_footer {
    padding: 0; margin: 26px 0 0; justify-content: center;
}
/* GOTCHA 9: GF renders the submit as `button.gform_button`, NOT
   `input[type=submit]`. Both are matched so a GF version change cannot silently
   drop the styling. Matches `a.btn-bt.default`. */
body #content .sm-contact .sm-gf-contact .gform_wrapper button.gform_button,
body #content .sm-contact .sm-gf-contact .gform_wrapper input[type="submit"].gform_button,
body #content .sm-contact .sm-gf-contact .gform_wrapper .gform-footer button {
    display: inline-block; border: 1px solid transparent; border-radius: 999px;
    background: var(--sm-gold) !important; color: var(--sm-dark-4) !important;
    font-family: 'Jost', sans-serif !important; font-size: 13px !important;
    line-height: 15.6px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 600; padding: 17px 34px; cursor: pointer; transition: all .2s ease;
}
body #content .sm-contact .sm-gf-contact .gform_wrapper button.gform_button:hover,
body #content .sm-contact .sm-gf-contact .gform_wrapper input[type="submit"].gform_button:hover,
body #content .sm-contact .sm-gf-contact .gform_wrapper .gform-footer button:hover {
    background: var(--sm-green) !important; color: var(--sm-cream) !important;
}
body #content .sm-contact .sm-gf-contact .gform_wrapper .gform_confirmation_message,
body #content .sm-contact .sm-gf-contact .gform_wrapper .validation_message {
    font-family: 'Jost', sans-serif !important; font-size: 15px !important;
}

/* --- responsive (standing rule 9) ---------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-contact.sm-3x                        { padding: 56px 0 32px; }
    .bakery .vc_row.sm-contact.sm-snowbird.sm-contact-form  { padding: 32px 0 56px; }
    .bakery .vc_row.sm-contact.sm-snowbird.sm-dir           { padding: 32px 0 24px; }
    .bakery .vc_row.sm-contact.sm-2x.sm-dir-routes          { padding: 24px 0 56px; }
    /* the library drops `.sm-3x` to two columns here; the third label would then
       sit alone under a 50px block, so let the labels size themselves. */
    .sm-contact .sm-ways-label { min-height: 0; margin-bottom: 8px; }
}
@media (max-width: 767px) {
    /* the designer shipped a portrait hero crop for narrow widths (media 2911);
       the shared row already sets min-height and `center top` down here, so the
       page only has to swap the image. */
    .bakery .vc_row.sm-contact.sm-hero-jumbo {
        /* the portrait crop needs the scrim top-weighted instead of left-weighted:
           stacked, the copy block sits over the upper half of the frame. */
        background-image: linear-gradient(rgba(24,18,12,.66) 0%,
                                          rgba(24,18,12,.52) 55%,
                                          rgba(24,18,12,.20) 100%),
                          url('/wp-content/uploads/2026/09/contact-us-hero-contact-mobile.jpg');
    }
    .sm-contact .sm-gf-contact { max-width: none; }
    .bakery .vc_row.sm-contact.sm-3x                        { padding: 40px 0 24px; }
    .bakery .vc_row.sm-contact.sm-snowbird.sm-contact-form  { padding: 24px 0 40px; }
    .bakery .vc_row.sm-contact.sm-snowbird.sm-dir           { padding: 24px 0 16px; }
    .bakery .vc_row.sm-contact.sm-2x.sm-dir-routes          { padding: 16px 0 40px; }
    body #content .sm-contact .sm-ways-label strong { font-size: 18px; line-height: 23px; }
}


/* === Page: events === 2026-09-09 === */
/* Events (page 2704) — page-only overrides. No comp: structure comes from the
   designer README (§2.2 layout, §2.3 Level 1 rule + Events row, §3 image notes)
   plus row-inventory.md geometry. custom.css is ONE globally-loaded file, so every
   rule here is scoped with `.sm-events` — a class every row on this page carries
   alongside `sm-row`. Anything page-agnostic belongs in _global.add.css instead.

   NOTE: `sm-events` sits on the ROW element next to the row-type class, so a page
   override of a row itself is `.sm-events.sm-5050`, COMPOUND — no space. Written as
   a descendant it matches nothing and fails silently (gotcha 15). A space is only
   correct where the target really is a descendant (`.sm-events .sm-gather-grid`). */

/* --- hero (sub page hero jumbo, 1440x594) -------------------------------- */
.bakery .vc_row.sm-events.sm-hero-jumbo {
    background-image: url('/wp-content/uploads/2026/09/events-hero-events.jpg');
}

/* --- band colours --------------------------------------------------------
   Alternate cream / cream-deep so the three 50/50 sections read as separate
   bands rather than one long light run. The library defaults these to cream. */
.bakery .vc_row.sm-events.sm-5050-b { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-events.sm-5050-a,
.bakery .vc_row.sm-events.sm-5050-c { background: var(--sm-cream); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. This page uses the same single
   HALF-SEAM as About Us — 40px per side, so every join lands at 80 — and tightens
   a join by zeroing one side rather than by inventing new numbers. The intro lede
   belongs to the hero above it, so its top is 72 and the seam to the first 50/50
   stays at the 40+40 budget. No row on this page shares a background with its
   neighbour, so no `vc_section` is needed here. */
.bakery .vc_row.sm-events.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-events.sm-5050     { padding: 40px 0; }
.bakery .vc_row.sm-events.sm-ornament-row { padding: 24px 0 16px; }

/* The intro is the back half of the live lede paragraph sitting under the H1 with
   no H2 of its own — let it run wider than the 760 `.sm-lede` default, as About Us
   does with the same row. */
body #content .sm-events .sm-intro-lede { max-width: 1050px; }

/* The live "Contact us today" button sits under the third 50/50 section. */
.sm-events .sm-5050-btns { margin: 26px 0 0; }

/* QA row 13: this row's copy (eyebrow + three-line h2 + two long paragraphs) is
   the tallest text column on the page, and a 3:2 landscape beside it left the
   right-hand side short by roughly 280px. A portrait crop is what the row wants.
   Set on the row scope, not the shared `.sm-5050`, because the other two 50/50s
   on this page have short copy and their landscape images are correct. */
.bakery .vc_row.sm-events.sm-5050-a .sm-5050-media img { aspect-ratio: 3 / 4; }
.bakery .vc_row.sm-events.sm-5050-a > .container { align-items: stretch; }
@media (max-width: 767px) {
    /* stacked, there is no column to match, so the portrait crop would just be a
       very tall photograph — back to the source's own landscape shape. */
    .bakery .vc_row.sm-events.sm-5050-a .sm-5050-media img { aspect-ratio: 3 / 2; }
}

/* --- explore grid: EIGHT Level 2 children plus the future Quinceañera card ---
   Nine cards divide evenly only by three, so a 3x3 is the one column count with no
   orphan cell, and a 3-up card lands at ~380px — the same width the explore
   CAROUSEL renders on this tree's Level 2 pages, so grid and carousel read as one
   component. (5 columns gives 5+4 with a dangling empty cell; change the one
   variable below if the dev prefers two rows.) The taller card image is the
   carousel's 150 rounded up for the wider card, keeping the tile off letterbox. */
.sm-events .sm-gather-grid { --sm-gather-cols: 3; gap: 22px; }
.sm-events .sm-gather-media img { height: 190px; }

/* Quinceañera is a FUTURE page (README §2.3 Events row + §5): it has no route, so
   its card carries no anchor at all and is marked the same way About Us marks its
   Meet the Team placeholder — dashed outline, greyscale image. */
.sm-events .sm-gather-card.sm-card-tbd { outline: 1px dashed rgba(37,28,18,.35); }
.sm-events .sm-gather-card.sm-card-tbd .sm-gather-media img { filter: grayscale(1); opacity: .55; }
/* the "Coming Soon" stand-in is a SPAN, so it gets none of the `a.sm-learnmore`
   styling from the library; restate it muted and non-interactive. */
.sm-events span.sm-learnmore-tbd {
    margin-top: auto; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(37,28,18,.45);
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    /* the library already drops `.sm-gather-grid` to 2 columns here; the page sets
       its own variable, so it has to restate the step-down or the 3-up sticks. */
    .sm-events .sm-gather-grid { --sm-gather-cols: 2; }
    .bakery .vc_row.sm-events.sm-snowbird { padding: 56px 0 32px; }
    .bakery .vc_row.sm-events.sm-5050     { padding: 32px 0; }
}
@media (max-width: 767px) {
    /* the designer shipped a portrait hero crop for narrow widths (media 2926); the
       shared row already sets min-height and `center top` down here, so the page
       only has to swap the image. Christmas Tours forgot this step (media 2839) and
       it became a bug — wiring it at build time instead. */
    .bakery .vc_row.sm-events.sm-hero-jumbo {
        background-image: url('/wp-content/uploads/2026/09/events-hero-events-mobile.jpg');
    }
    .sm-events .sm-gather-grid { --sm-gather-cols: 1; }
    .sm-events .sm-gather-media img { height: 200px; }
    .bakery .vc_row.sm-events.sm-5050 { padding: 24px 0; }
    /* image-left row: stack the image ABOVE its copy like the other two, so the
       reading order is the same all the way down the page. */
    .bakery .vc_row.sm-events.sm-5050-b > .container { flex-direction: column; }
}


/* === Page: weddings === 2026-09-09 === */
/* Weddings (page 2706, Level 1) — page-only overrides. No comp: structure comes
   from the designer README's explicit Weddings recipe (§3 image notes) plus the
   Level 1 rule (§2.3) and `row-inventory.md` geometry. custom.css is ONE globally
   loaded file, so every rule here is scoped with `.sm-weddings` — a class every
   row on this page carries alongside `sm-row`. Page-agnostic things belong in
   _global.add.css instead.

   NOTE: `sm-weddings` sits on the ROW element next to the row-type class, so a
   page override of a row itself is COMPOUND — `.sm-weddings.sm-5050`, no space.
   Written as a descendant it matches nothing and fails silently (gotcha 15). */

/* --- hero (sub page hero jumbo, 1440x594) -------------------------------- */
.bakery .vc_row.sm-weddings.sm-hero-jumbo {
    background-image: url('/wp-content/uploads/2026/09/weddings-hero-weddings.jpg');
}

/* --- band colours --------------------------------------------------------
   Alternate cream / cream-deep so the copy rows and the galleries read as
   separate bands. The library defaults `.sm-snowbird` to cream and `.sm-gather`
   to cream-deep; everything else is set here. */
.bakery .vc_row.sm-weddings.sm-xslider,
.bakery .vc_row.sm-weddings.sm-gal8,
.bakery .vc_row.sm-weddings.sm-gal3x3,
.bakery .vc_row.sm-weddings.sm-video2x { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-weddings.sm-5050,
.bakery .vc_row.sm-weddings.sm-6633 { background: var(--sm-cream); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. Budget (build-plan / C1):
   64px WITHIN a section (a gallery that belongs to the copy above it) and 96px
   BETWEEN sections — so 32 per side inside a section and 48 per side between.
   Every number below is one of those two halves; nothing else is invented.

     hero        (library)            -> intro      72 . . . . . . . . opener
     intro       72 / 32   + slider   32  =  64   (the slider illustrates the intro)
     slider      32 / 48   + 5050     48  =  96
     5050        48 / 32   + gal8     32  =  64   (the gallery belongs to the 5050)
     gal8        32 / 48   + 6633     48  =  96
     6633        48 / 48   + planning 48  =  96
     planning    48 / 48   + video2x  48  =  96
     video2x     48 / 48   + fairytale 48 =  96
     fairytale   48 / 32   + gal3x3   32  =  64   (the gallery closes the copy)
     gal3x3      32 / 16   + gather   78  =  94   (library's own 78 top is kept)
     gather      (library 78/78)      -> CTA (library 108)                        */
.bakery .vc_row.sm-weddings.sm-snowbird.sm-intro     { padding: 72px 0 32px; }
.bakery .vc_row.sm-weddings.sm-xslider               { padding: 32px 0 48px; }
.bakery .vc_row.sm-weddings.sm-5050                  { padding: 48px 0 32px; }
.bakery .vc_row.sm-weddings.sm-gal8                  { padding: 32px 0 48px; }
.bakery .vc_row.sm-weddings.sm-6633                  { padding: 48px 0; }
.bakery .vc_row.sm-weddings.sm-snowbird.sm-planning  { padding: 48px 0; }
.bakery .vc_row.sm-weddings.sm-video2x               { padding: 48px 0; }
.bakery .vc_row.sm-weddings.sm-snowbird.sm-fairytale { padding: 48px 0 32px; }
.bakery .vc_row.sm-weddings.sm-gal3x3                { padding: 32px 0 16px; }

/* --- intro lede ----------------------------------------------------------
   The intro has an H2 of its own and two live paragraphs; let them run a little
   wider than the 760 `.sm-lede` default, as About Us's lede does. */
body #content .sm-weddings .sm-intro-lede { max-width: 1000px; }
body #content .sm-weddings .sm-intro-lede + .sm-intro-lede { margin-top: 18px; }

/* --- long-form prose rows ------------------------------------------------
   "Planning Your Perfect…" and "Creating a Fairytale Experience" are body copy:
   hold them to a readable measure rather than the full 1188 track. */
.sm-weddings .sm-prose { max-width: 900px; margin: 0 auto; }
body #content .sm-weddings .sm-prose h2 { text-align: center; margin: 0 0 24px; }
body #content .sm-weddings .sm-prose p + p { margin-top: 22px; }
.sm-weddings .sm-prose-btn { margin-top: 30px; text-align: center; }

/* The live testimonial, set as a pull quote: gold rule, serif, slightly larger
   than body, with the bare-initials attribution the live page uses. */
.sm-weddings .sm-quote {
    margin: 0 0 26px; padding: 0 0 0 26px; border-left: 2px solid var(--sm-gold);
}
body #content .sm-weddings .sm-quote p {
    font-family: 'Fraunces', Georgia, serif !important; font-size: 20px; line-height: 32px;
    font-style: italic; margin: 0;
}
body #content .sm-weddings .sm-quote cite {
    display: block; margin-top: 14px; font-family: 'Jost', sans-serif !important;
    font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sm-orange) !important;
}

/* --- gallery slider row --------------------------------------------------
   The WP Carousel Pro instance for this page DOES NOT EXIST YET — the plugin's
   CPT is not REST-exposed, so it has to be made in wp-admin (Christmas Tours'
   is 2850). The row and its arrow offsets are ready for the shortcode; the
   dot-margin kill and the arrow restyle are already site-wide in
   _global.add.css, so nothing else is needed here. */
.bakery .vc_row.sm-weddings.sm-xslider > .container { max-width: 1188px; }
.sm-weddings.sm-xslider .wpcp-prev-button { left: -10px !important; }
.sm-weddings.sm-xslider .wpcp-next-button { right: -10px !important; }

/* --- gallery grid 3x3 ----------------------------------------------------
   The row is FULL BLEED, so its container is uncapped with a 25px edge inset —
   which would drag the section head out to the window edges too. Cap the head
   back to the shared 1188 track. */
.sm-weddings.sm-gal3x3 .sm-section-head { max-width: 1188px; margin: 0 auto 40px; }

/* --- video row 2x --------------------------------------------------------
   One live embed ("What is the Stetson Mansion?") plus the wedding-venue video
   reserved for this page. Head is the live H2 with no eyebrow. */
.sm-weddings.sm-video2x .sm-section-head { margin: 0 auto 39px; }

/* --- explore grid: the Weddings tree has THREE Level 2 children ----------- */
.sm-weddings .sm-gather-grid { --sm-gather-cols: 3; gap: 22px; }
.sm-weddings .sm-gather-media img { height: 168px; }
/* Bridal Showers is a genuinely NEW page with no live copy at all, so its card
   is flagged as a placeholder and is unmistakable in QA. */
.sm-weddings .sm-gather-card.sm-card-tbd { outline: 1px dashed rgba(37,28,18,.35); }
.sm-weddings .sm-gather-card.sm-card-tbd .sm-gather-media img { filter: grayscale(1); opacity: .55; }

/* --- bottom CTA, WEDDINGS variant (design system 220:625) -----------------
   FIRST USE of `.sm-cta-weddings`, and the board node does NOT match what the
   library gives it. _global.add.css only sets this variant's background image, so
   it inherits the CHRISTMAS layout — centred on a 780 measure, with an eyebrow.
   220:625 is a different layout: LEFT-aligned, NO eyebrow, copy inset to x=100
   (so the 1240 container, not the centred measure), H2 over two lines on a ~560
   measure, one short paragraph, and TWO buttons (gold "Request a Date" +
   outlined-white "Contact Us"). That is the same structural difference the events
   variant has, and it is documented in `_global.add.css` for events but was never
   written for weddings.
   *** These four rules belong in _global.add.css next to the events block, so the
   three weddings children inherit them. They are page-scoped here only because a
   page agent must not touch the shared file. CONDUCTOR: please promote. *** */
/* PROMOTED to _global.add.css (next to the events block) by the conductor,
   2026-09-11 — the whole weddings tree needs them, not just this page. */

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .sm-weddings .sm-gather-grid { --sm-gather-cols: 2; }
    .bakery .vc_row.sm-weddings.sm-snowbird.sm-intro { padding: 56px 0 28px; }
    .bakery .vc_row.sm-weddings.sm-6633,
    .bakery .vc_row.sm-weddings.sm-video2x,
    .bakery .vc_row.sm-weddings.sm-snowbird.sm-planning { padding: 40px 0; }
}
@media (max-width: 767px) {
    /* the designer shipped a portrait hero crop for narrow widths (media 2935);
       the shared row already sets min-height and `center top` down here, so the
       page only has to swap the image. */
    .bakery .vc_row.sm-weddings.sm-hero-jumbo {
        background-image: url('/wp-content/uploads/2026/09/weddings-hero-weddings-mobile.jpg');
    }
    .sm-weddings .sm-gather-grid { --sm-gather-cols: 1; }
    .sm-weddings .sm-gather-media img { height: 200px; }
    body #content .sm-weddings .sm-quote p { font-size: 18px; line-height: 29px; }
    .sm-weddings .sm-quote { padding-left: 18px; }
    .bakery .vc_row.sm-weddings.sm-5050    { padding: 24px 0; }
    .bakery .vc_row.sm-weddings.sm-gal8    { padding: 24px 0 32px; }
    .bakery .vc_row.sm-weddings.sm-gal3x3  { padding: 24px 0 8px; }
    .bakery .vc_row.sm-weddings.sm-xslider { padding: 24px 0 32px; }
    body #content .sm-weddings a.btn-bt + a.btn-bt { margin-left: 0; margin-top: 10px; }
}


/* === Page: news-blog === 2026-09-09 === */
/* News & Blog (page 1054, slug `blog`) — page-only overrides. No comp; structure
   comes from the designer README (2.2 layout, 5 the /blog + /news consolidation)
   plus row-inventory.md. custom.css is ONE globally-loaded file, so every rule
   here is scoped with `.sm-blog` — a class every row on this page carries
   alongside `sm-row`. Page-scope selectors are COMPOUND (`.sm-blog.sm-snowbird`,
   no space); a space matches nothing and fails silently.

   README 2.3 EXEMPTS this page from the Level 1 hero-jumbo/explore/CTA recipe
   ("All Level 1 pages (except Homepage & News/Blog)"), and the design-system
   board carries NO blog-listing row and NO single-post layout at all. So the
   listing below has no design to match: it reuses the theme's own
   `article.blog-post-row` markup, which is the only reference that exists. */

/* --- hero (sub page hero jumbo, 1440x594) --------------------------------
   Artwork is the live /blog page's own exterior-with-fountain shot, re-cropped
   to 1440x594 with the darkening BAKED IN (the library puts no CSS scrim on a
   hero, and `background-blend-mode: overlay` on every .vc_row would eat one). */
.bakery .vc_row.sm-blog.sm-hero-jumbo {
    background-image: url('/wp-content/uploads/2026/09/news-blog-hero-stetson-mansion-exterior-with-fountain.jpg');
}

/* --- band colours --------------------------------------------------------
   Cream intro, cream listing, cream-deep press row — so the two listings read as
   separate sections without a rule or a divider between them. */
.bakery .vc_row.sm-blog.sm-snowbird { background: var(--sm-cream); }
.bakery .vc_row.sm-blog.sm-listing  { background: var(--sm-cream); }
.bakery .vc_row.sm-blog.sm-press    { background: var(--sm-cream-deep); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. Seam budget, the one About Us
   settled and the Phase C batch verified: 64 inside a section, 96 between two
   sections. The intro and the listing are one section (32+32 = 64); listing to
   press is a section change (48+48 = 96); press to the bottom CTA likewise.
   The intro opens the page under the hero, so it takes the larger 72 top. */
/* QA row 24 removed the intro row, which was the one carrying the 72px opener
   under the hero, so the listing is the first content row now and takes it. */
.bakery .vc_row.sm-blog.sm-snowbird { padding: 72px 0 32px; }
.bakery .vc_row.sm-blog.sm-listing  { padding: 72px 0 48px; }
.bakery .vc_row.sm-blog.sm-press    { padding: 48px 0 48px; }

/* The intro is a single lede paragraph with no H2 of its own — it is the second
   sentence of the live /news intro, so let it run a little wider than the 760
   `.sm-lede` default without going full 1188. */
body #content .sm-blog .sm-intro-lede { max-width: 900px; }

/* GOTCHA 13, live example. WPBakery HOISTS a shortcode's output out of the
   `[vc_column_text]` it was written in: the section head stays inside
   `.wpb_text_column > .wpb_wrapper` while `.sm-postlist` becomes a SIBLING of that
   wrapper. That makes the head the LAST CHILD of the wrapper, so the library reset
   `.bakery .vc_row.sm-row .wpb_text_column > .wpb_wrapper > *:last-child
   { margin-bottom: 0 }` (_global.add.css:471) zeroed its 48px and the heading sat
   flush on the grid. Restated here at higher weight for both listing rows.
   Watch for this on ANY row that mixes authored HTML with a shortcode. */
.bakery .vc_row.sm-blog.sm-listing .wpb_text_column > .wpb_wrapper > .sm-section-head,
.bakery .vc_row.sm-blog.sm-press .wpb_text_column > .wpb_wrapper > .sm-section-head {
    margin-bottom: 48px;
}
/* ...and the gap is ALSO asserted as PADDING on the grid, because restoring the
   head's margin alone did not move the grid one pixel: a bottom margin on the last
   child collapses out through `.wpb_wrapper` and `.wpb_text_column`, both of which
   the library resets to zero. Padding cannot collapse, so this is the rule actually
   doing the work; the margin above is kept so the head is correct in isolation.
   COMPOUND selectors (gotcha 15): `sm-blog` and `sm-listing` sit on the SAME row
   element, so `.sm-blog .sm-listing` with a space matches nothing. */
.sm-blog.sm-listing .sm-postlist,
.sm-blog.sm-press .sm-gather-grid { padding-top: 48px; }

/* The theme adds `padding: 32px 0` to `.blog #content .blog` (style.css:212). That
   fires on page 1054 because the theme puts the PAGE SLUG on the body, and this
   page's slug is `blog` — so `body.blog` is true, and `.bakery` also carries the slug
   as a class from `page.php`. The bottom half of that padding stacks on top of the
   CTA bar's own and reads as a dead strip. Dev-directed, 2026-09-11. */
.blog #content .blog { padding-bottom: 0 !important; }
/* QA row 24: and the TOP half of that same theme padding is the white strip the
   designer boxed between the header and the hero — a hero is meant to meet the
   header. Only the bottom half was overridden the first time round. */
.blog #content .blog { padding-top: 0 !important; }

/* --- the blog listing ([sm_post_list]) -----------------------------------
   The shortcode emits the `article.blog-post-row` markup lifted verbatim out of
   `blog.php`, so the two templates stay interchangeable. But the theme's own blog
   CSS is gated on the `.blog` / `.single` BODY classes (`themes/vds/style.css`
   208-217) and page 1054's body class is `page` — so almost none of it applies
   here and the listing is styled for real below. The few `#primary`-scoped theme
   rules do not reach it either; the shortcode deliberately does not emit an
   `#primary`, since `page.php` has no such wrapper and duplicating an ID would be
   worse than restyling.

   Three up, matching the Events explore grid (C2) and the ~380px card width the
   explore CAROUSEL renders at on the Level 2 pages, so every card-shaped thing on
   the site reads as one component. Six live posts divide evenly by three. */
.sm-blog .sm-postlist {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    max-width: 1188px; margin: 0 auto;
}
.sm-blog .sm-postlist .blog-post-row {
    background: #fff; border-radius: var(--sm-radius); overflow: hidden;
    display: flex; flex-direction: column; margin: 0; padding: 0;
    box-shadow: 0 2px 18px rgba(37, 28, 18, .06);
}
/* The article's inner wrapper has to stretch so the READ MORE block can be pinned
   to the bottom of every card regardless of how many lines the title takes. */
.sm-blog .sm-postlist .post-image-and-text {
    display: flex; flex-direction: column; flex: 1; margin: 0;
}
.sm-blog .sm-postlist .post-image-wrap { margin: 0; }
.sm-blog .sm-postlist img.post-image {
    display: block; width: 100%; height: 210px; object-fit: cover;
    border-radius: 0 !important; transition: opacity .3s ease-in-out;
}
.sm-blog .sm-postlist a.archive-post-image-link:hover img.post-image { opacity: .78; }
.sm-blog .sm-postlist .post-text-wrap { padding: 24px 26px 0; flex: 1; }
body #content .sm-blog .sm-postlist h2.archive-post-title {
    font-size: 22px; line-height: 1.3; margin: 0 0 12px;
}
body #content .sm-blog .sm-postlist a.archive-post-title-link {
    color: var(--sm-dark) !important; text-decoration: none; transition: color .2s ease;
}
body #content .sm-blog .sm-postlist a.archive-post-title-link:hover { color: var(--sm-orange) !important; }
body #content .sm-blog .sm-postlist p.archive-post-excerpt {
    font-size: 15px; line-height: 24px; margin: 0 0 20px;
}
.sm-blog .sm-postlist .post-read-more-wrap { padding: 0 26px 26px; margin-top: auto; }
/* The listing button is the small, quiet variant — a full-size default button in a
   380px card would dominate the excerpt it is meant to sit under. */
body #content .sm-blog .sm-postlist a.btn-bt.archive-btn {
    padding: 12px 22px; font-size: 12px;
}

/* --- pagination ----------------------------------------------------------
   Does not render at six posts against `per_page="9"`; styled now so a tenth post
   never ships an unstyled pager. `paginate_links(type=plain)` emits bare anchors
   and one `span.current`, no list wrapper. */
.sm-blog .sm-postlist-pagination {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    max-width: 1188px; margin: 44px auto 0;
}
body #content .sm-blog .sm-postlist-pagination a.page-numbers,
body #content .sm-blog .sm-postlist-pagination span.page-numbers {
    display: inline-block; min-width: 42px; padding: 10px 14px; text-align: center;
    font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em;
    border-radius: 999px; text-decoration: none;
    color: var(--sm-dark) !important; background: #fff;
    transition: all .2s ease;
}
body #content .sm-blog .sm-postlist-pagination a.page-numbers:hover {
    background: var(--sm-dark); color: var(--sm-cream) !important;
}
body #content .sm-blog .sm-postlist-pagination span.current {
    background: var(--sm-dark); color: var(--sm-cream) !important;
}
.sm-blog .sm-postlist-empty { text-align: center; }

/* --- in the press (`.sm-gather` cards) -----------------------------------
   Seven outbound press mentions, so four columns: 4 + 3 with one empty cell,
   which reads better than three columns' 3 + 3 + 1 dangling card. The media slot
   is 280x186 at this width; the sources were normalised to 3:2 to match it, so
   `object-fit: cover` has almost nothing to crop. */
.sm-blog .sm-press-grid { --sm-gather-cols: 4; }
.sm-blog .sm-press-grid .sm-gather-media img { height: 186px; }
/* Headline over outlet: the h4 carries the outlet's own headline verbatim, so it
   runs long and needs a tighter measure than a one-line explore-card title. */
body #content .sm-blog .sm-press-grid .sm-gather-body h4 {
    font-size: 17px; line-height: 1.32; margin: 0 0 8px;
}
/* The blurb here is the OUTLET NAME, not a sentence — set it as an attribution
   line so it never reads as body copy. */
body #content .sm-blog .sm-press-grid p.sm-gather-blurb {
    font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--sm-gold) !important; margin: 0 0 14px;
}

/* Responsive (standing rule 9; authored, not yet visually reviewed — site-wide
   mobile pass is build-plan E0). The hero's own breakpoints are in the library. */
/* Stays at 1024: this is an intermediate 4-up -> 3-up step ABOVE the 979 layout tier,
   not a stack. The real step-down to 2-up is in the 979 block below. */
@media (max-width: 1024px) {
    .sm-blog .sm-press-grid { --sm-gather-cols: 3; }
}
@media (max-width: 979px) {
    .bakery .vc_row.sm-blog.sm-snowbird { padding: 56px 0 28px; }
    .bakery .vc_row.sm-blog.sm-listing  { padding: 28px 0 40px; }
    .bakery .vc_row.sm-blog.sm-press    { padding: 40px 0; }
    .sm-blog .sm-postlist { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .sm-blog .sm-press-grid { --sm-gather-cols: 2; }
}
@media (max-width: 767px) {
    body #content .sm-blog .sm-intro-lede { max-width: none; }
    .sm-blog .sm-postlist { grid-template-columns: 1fr; }
    .sm-blog .sm-postlist img.post-image { height: 240px; }
    .sm-blog .sm-press-grid { --sm-gather-cols: 1; }
    .sm-blog .sm-postlist-pagination { margin-top: 32px; }
}


/* === Page: single-post === 2026-09-09 === */
/* Single blog post — theme-wide chrome, NOT one page's styling, which is why this is
   its own block rather than an addition to `news-blog.css`. Template:
   `themes/vds/single.php` (master copy `master-files/theme-src/single.php`).

   There is NO design for this page. The design-system board (130:71) carries heroes,
   page-ending CTAs, content/proof rows, galleries, text/image rows, FAQ, buttons and
   logos — and nothing for an article. The one thing the spec DOES say is that single
   posts take `sub page hero short` (README 2.3, row-inventory line 23, build-plan E1),
   and that row is reused from the library rather than rebuilt. Everything below it is
   the site's own type scale and card language applied to the theme's existing markup.

   SCOPE: `.single-post-page` is on the two `.bakery` wrappers in the template; the
   article itself keeps the theme's `.blog.single` wrapper, and the body carries the
   `.single` class, so the article rules hang off `.single` and only ever match a post. */

/* --- hero (sub page hero short, 220:600) ---------------------------------
   Geometry — 181px, flex-centred, 1240 container, 42/56 white h1 — all comes from
   `.bakery .vc_row.sm-hero-short` in the library. Only the artwork is set here. It is
   ONE shared image for every post, not the post's featured image: the featured image
   leads the article a few lines below, and a 181px band is no place for a photograph.
   The file is cut to 1440x181 exactly, so nothing is lost to `cover`, and the
   darkening is BAKED IN — `background-blend-mode: overlay` sits on every `.vc_row`
   (style.css:66), so a CSS scrim would be blended away rather than composited.
   Media 2975. Reuse it for the other `sm-hero-short` utility pages in E1 (privacy,
   thank-you, accessibility) unless the designer supplies per-page art. */
.bakery .vc_row.sm-post-hero {
    background-image: url('/wp-content/uploads/2026/09/single-post-hero-short.jpg');
}
/* The theme's own `.single h1.single-post-title { font-size: 36px }` loads AFTER
   custom.css, so the library's hero size has to be restated at ID weight to win. */
body #content .sm-post-hero h1.single-post-title {
    font-size: 42px !important; line-height: 56px !important; margin: 0;
}

/* --- the article --------------------------------------------------------- */
.single #content .blog.single { background: var(--sm-cream); padding: 0 0 64px; }
/* The theme caps `.single #content .wrap` at 1100 and the sidebar is gone, so the
   article is centred on a real reading measure instead. 760 is the same width the
   FAQ settled on site-wide, which keeps long-form copy consistent across the build. */
.single #content .blog.single .wrap {
    max-width: 760px; width: 90%; margin-left: auto; margin-right: auto;
}
/* `#primary` is a FLEX ROW in the theme (`.blog #primary`, style.css:211) — and that
   selector matches the wrapper DIV's own `blog` class, not just the blog body class,
   so it fires on single posts too. As a flex row it shrink-wrapped the article to its
   widest child instead of filling the measure. Two IDs here to outrank it, and an
   explicit width because a stale float/flex base would otherwise still size it. */
.single #content #primary {
    display: block; width: 100%; max-width: none; float: none;
}

/* The featured image sat UNDER the hero and overlapped it by 44px; removed at the
   dev's direction 2026-09-11. It now starts cleanly below the hero band. The
   mobile -28px variant went with it — keeping that would have left the overlap
   on phones only. */
.single .single-post-feat-img-wrap { margin: 40px 0 32px; }
.single #content img.feat-img {
    display: block; width: 100%; height: auto; border-radius: var(--sm-radius);
    box-shadow: 0 4px 28px rgba(37, 28, 18, .12);
}

.single .single-post-title-wrap { margin: 0 0 28px; }
.single .single-post-meta-wrap { margin: 0; }
body #content .single .single-post-meta,
body #content .single-post-meta {
    font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--sm-gold) !important; margin: 0;
}
body #content .single-post-meta i { margin-right: 6px; }

.single .single-post-content-wrap { margin: 0 0 12px; }
body #content .single-post-content p { font-size: 17px; line-height: 30px; margin: 0 0 26px; }
body #content .single-post-content h2 { font-size: 30px; line-height: 40px; margin: 44px 0 16px; }
body #content .single-post-content h3 { font-size: 22px; line-height: 32px; margin: 36px 0 14px; }
body #content .single-post-content ul,
body #content .single-post-content ol { margin: 0 0 26px 22px; }
body #content .single-post-content li { font-size: 17px; line-height: 30px; margin: 0 0 10px; }
body #content .single-post-content a {
    color: var(--sm-orange) !important; text-decoration: underline; text-underline-offset: 3px;
}
body #content .single-post-content a:hover { color: var(--sm-dark) !important; }
body #content .single-post-content img {
    display: block; width: 100%; height: auto; border-radius: var(--sm-radius); margin: 8px 0 26px;
}
/* The imported posts carry an image-credit line as their closing paragraph. */
body #content .single-post-content > p:last-child { margin-bottom: 0; }

/* --- prev / next --------------------------------------------------------
   `previous_post_link` / `next_post_link` emit a bare anchor each, and either side
   can be empty on the first and last post — hence `justify-content: space-between`
   plus a `:empty` guard rather than a grid that would leave a hole. */
.single #single-pagination {
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    border-top: 1px solid rgba(37, 28, 18, .14); margin-top: 44px; padding-top: 28px;
}
.single .single-pagination-link { max-width: 46%; }
.single .single-pagination-link:empty { display: none; }
.single .single-pagination-link.next { margin-left: auto; text-align: right; }
body #content .single-pagination-link a {
    font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: .04em; line-height: 22px;
    color: var(--sm-dark) !important; text-decoration: none; transition: color .2s ease;
}
body #content .single-pagination-link a:hover { color: var(--sm-orange) !important; }

/* --- more from the blog --------------------------------------------------
   The cards are `[sm_post_list]`'s own markup, so they inherit the listing styling
   from the `news-blog` block. Only the three-up track and the row rhythm are set
   here; a post page is not the News & Blog page and does not carry `.sm-blog`. */
.bakery .vc_row.sm-post-more { width: 100%; margin: 0; padding: 64px 0 72px; background: var(--sm-cream-deep); }
/* The theme makes every `.bakery .container` a FLEX row at 980+ (style.css:186),
   which on a WPBakery page is harmless because the container holds one column. Here
   it holds two siblings — the section head and the card grid — so without this they
   lay out side by side and the heading squeezes into a narrow column. Block, not
   flex. (Same class of trap as gotcha 4: the theme injects and restyles `.container`
   between the row and its children.) */
.bakery .vc_row.sm-post-more > .container { max-width: 1188px; display: block; }
.bakery .vc_row.sm-post-more { display: block; }
.sm-post-more .sm-postlist {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    max-width: 1188px; margin: 0 auto;
}
.sm-post-more .blog-post-row {
    background: #fff; border-radius: var(--sm-radius); overflow: hidden;
    display: flex; flex-direction: column; margin: 0; padding: 0;
    box-shadow: 0 2px 18px rgba(37, 28, 18, .06);
}
.sm-post-more .post-image-and-text { display: flex; flex-direction: column; flex: 1; margin: 0; }
.sm-post-more .post-image-wrap { margin: 0; }
.sm-post-more img.post-image {
    display: block; width: 100%; height: 210px; object-fit: cover;
    border-radius: 0 !important; transition: opacity .3s ease-in-out;
}
.sm-post-more a.archive-post-image-link:hover img.post-image { opacity: .78; }
.sm-post-more .post-text-wrap { padding: 24px 26px 0; flex: 1; }
body #content .sm-post-more h2.archive-post-title { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
body #content .sm-post-more a.archive-post-title-link {
    color: var(--sm-dark) !important; text-decoration: none; transition: color .2s ease;
}
body #content .sm-post-more a.archive-post-title-link:hover { color: var(--sm-orange) !important; }
body #content .sm-post-more p.archive-post-excerpt { font-size: 15px; line-height: 24px; margin: 0 0 20px; }
.sm-post-more .post-read-more-wrap { padding: 0 26px 26px; margin-top: auto; }
body #content .sm-post-more a.btn-bt.archive-btn { padding: 12px 22px; font-size: 12px; }
/* One post on the whole site means nothing to show here — hide the row rather than
   print a heading over an empty grid. */
.sm-post-more .sm-postlist-empty { display: none; }

/* Responsive (standing rule 9; authored, not visually reviewed — E0 owns the
   site-wide mobile pass). */
@media (max-width: 979px) {
    .bakery .vc_row.sm-post-more { padding: 48px 0 56px; }
    .sm-post-more .sm-postlist { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
    .single #content .blog.single .wrap { width: 88%; }
    body #content .single-post-content p,
    body #content .single-post-content li { font-size: 16px; line-height: 27px; }
    body #content .single-post-content h2 { font-size: 25px; line-height: 34px; margin: 34px 0 14px; }
    .sm-post-more .sm-postlist { grid-template-columns: 1fr; }
    .single .single-pagination-link { max-width: 100%; }
    .single .single-pagination-link.next { text-align: left; margin-left: 0; }
}


/* === Page: the-estate === 2026-09-09 === */
/* The Estate (page 2707) — page-only overrides, scope `sm-thestate`.
   custom.css is ONE globally-loaded file, so every rule here hangs off that
   class, which every row on this page carries alongside `sm-row`.
   NB the scope sits on the ROW element beside the row-type class, so a page
   override of a row is COMPOUND — `.sm-thestate.sm-5050`, no space. Written as
   a descendant it matches nothing and fails silently (gotcha 15). */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the DESIGNER'S OWN Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358
   and uploaded back in the globals batch. An earlier session recorded "no Level 2
   hero art exists for ANY of the 17 pages" and planned around cropping a Level 1
   hero instead. That was a NAMING MISS: the designer called these files
   `header-bg`, not `hero`, so a search for hero art never found them. The three
   Weddings children have bespoke ones (2799 / 2789 / 2768); every other Level 2
   page takes this shared default.
   It carries NO baked-in darkening — mean luminance 71 over a bright parquet
   pattern — so the row also takes `sm-hero-scrim` and the gradient layer below.
   See that modifier in _global.add.css for why a gradient LAYER is the only
   scrim this theme will composite. No mobile variant is needed: the artwork is
   an edge-to-edge texture with no focal subject, so it crops cleanly at any
   width, unlike the portrait crops the Level 1 heroes need. */
.bakery .vc_row.sm-thestate.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------
   Alternate cream / cream-deep so the media rows read as separate bands from
   the prose. The spotlight row brings its own dark background from the library. */
.bakery .vc_row.sm-thestate.sm-3366,
.bakery .vc_row.sm-thestate.sm-video2x { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-thestate.sm-5050,
.bakery .vc_row.sm-thestate.sm-6633 { background: var(--sm-cream); }

/* --- row rhythm ----------------------------------------------------------
   ADJACENT ROW PADDINGS ADD UP: the visible gap between two rows is this row's
   padding-bottom PLUS the next row's padding-top. This page uses C1's proven
   single HALF-SEAM of 40px — every row contributes 40 top and 40 bottom, so
   every join is 80 — and a join is tightened by zeroing one side, never by
   inventing a new pair of numbers. */
.bakery .vc_row.sm-thestate.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-thestate.sm-5050     { padding: 40px 0; }
.bakery .vc_row.sm-thestate.sm-3366     { padding: 40px 0; }
.bakery .vc_row.sm-thestate.sm-6633     { padding: 40px 0; }
.bakery .vc_row.sm-thestate.sm-video2x  { padding: 40px 0; }
.bakery .vc_row.sm-thestate.sm-snowbird.sm-closing { padding: 40px 0 56px; }

/* The intro sits under the H1 with no H2 of its own — it is the lede paragraph
   from the live page, so let it run wider than the 760 `.sm-lede` default. */
body #content .sm-thestate .sm-intro-lede { max-width: 1000px; }

/* The live /present-day page has no section headings at all, so several rows
   here are paragraph-only. Hold them to a readable measure rather than letting
   a lone paragraph run the full track. */
.sm-thestate .sm-prose { max-width: 900px; margin: 0 auto; }

/* The 33/66 row is image-left on this page and its text column is a single
   short paragraph, so centre it against the tall image rather than top-aligning
   it to a ragged hole. */
.bakery .vc_row.sm-thestate.sm-3366 > .container { align-items: center; }

/* The live page's sign-off address line. Preserved live oddity: the venue name
   runs into the street number with no space. Flagged, not fixed. */
body #content .sm-thestate .sm-address {
    text-align: center; font-size: 15px; line-height: 28px; margin: 0;
    color: var(--sm-dark);
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-thestate.sm-snowbird { padding: 56px 0 32px; }
    .bakery .vc_row.sm-thestate.sm-5050,
    .bakery .vc_row.sm-thestate.sm-3366,
    .bakery .vc_row.sm-thestate.sm-6633,
    .bakery .vc_row.sm-thestate.sm-video2x { padding: 32px 0; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-thestate.sm-5050,
    .bakery .vc_row.sm-thestate.sm-3366,
    .bakery .vc_row.sm-thestate.sm-6633,
    .bakery .vc_row.sm-thestate.sm-video2x { padding: 24px 0; }
    .bakery .vc_row.sm-thestate.sm-snowbird.sm-closing { padding: 24px 0 40px; }
}


/* === Page: john-b-stetson === 2026-09-09 === */
/* John B. Stetson (page 2708) — page-only overrides, scope `sm-jbs`.
   Page overrides of a row are COMPOUND (`.sm-jbs.sm-3366`, no space) because the
   scope sits on the ROW element beside the row-type class (gotcha 15). */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the DESIGNER'S OWN Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358
   and uploaded back in the globals batch. An earlier session recorded "no Level 2
   hero art exists for ANY of the 17 pages" and planned around cropping a Level 1
   hero instead. That was a NAMING MISS: the designer called these files
   `header-bg`, not `hero`, so a search for hero art never found them. The three
   Weddings children have bespoke ones (2799 / 2789 / 2768); every other Level 2
   page takes this shared default.
   It carries NO baked-in darkening — mean luminance 71 over a bright parquet
   pattern — so the row also takes `sm-hero-scrim` and the gradient layer below.
   See that modifier in _global.add.css for why a gradient LAYER is the only
   scrim this theme will composite. No mobile variant is needed: the artwork is
   an edge-to-edge texture with no focal subject, so it crops cleanly at any
   width, unlike the portrait crops the Level 1 heroes need. */
.bakery .vc_row.sm-jbs.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-jbs.sm-3366,
.bakery .vc_row.sm-jbs.sm-5050 { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-jbs.sm-6633,
.bakery .vc_row.sm-jbs.sm-snowbird.sm-jbs-video { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-jbs.sm-3366 { padding: 56px 0 40px; }
.bakery .vc_row.sm-jbs.sm-snowbird { padding: 40px 0; }
.bakery .vc_row.sm-jbs.sm-6633  { padding: 40px 0; }
.bakery .vc_row.sm-jbs.sm-5050  { padding: 40px 0; }
.bakery .vc_row.sm-jbs.sm-snowbird.sm-jbs-video { padding: 40px 0 56px; }

/* QA row 7. This page's prose rows USED to be held to a 900px measure inside the
   1188 track. That is a defensible choice for long-form reading, but it left
   every prose row inset ~144px from the 66/33 and 50/50 rows directly above and
   below them, which is what the designer boxed: the paragraphs looked
   accidentally indented rather than deliberately narrow. The measure is gone —
   prose now starts on the same track edge as every other row on the page. */
.sm-jbs .sm-prose { max-width: none; margin: 0; }
body #content .sm-jbs .sm-prose h2 { text-align: center; margin: 0 0 24px; }

/* QA row 8 asks for the Legacy section and the post-video paragraph to be
   centred. Centred text needs a measure — ragged-centred lines across the full
   1188 track are unreadable — so these two blocks keep the 900 the rest of the
   prose just lost. That is the one place on the page where an inset is intended,
   and being centred is what makes it read as intended rather than accidental. */
body #content .sm-jbs .sm-prose-centred {
    max-width: 900px; margin: 0 auto; text-align: center;
}

/* QA row 6 moved the Early Life block into the portrait row's text column, so
   its heading needs the space between sibling blocks that the row rhythm gave it
   when it was a row of its own. */
body #content .sm-jbs .sm-jbs-h2-early { margin-top: 40px; }

/* The portrait is a tall 440x676 PNG. It used to face a text column of two short
   elements, and the pair was centred so the hole read as deliberate. QA row 6
   filled that column with the Early Life block, so the column is now the taller
   of the two and top-alignment is correct again — centring it would push the
   heading below the top of the painting. */
.bakery .vc_row.sm-jbs.sm-3366 > .container { align-items: start; }

/* The live page's own credit line for the biography. */
body #content .sm-jbs .sm-byline {
    font-style: italic; font-size: 14px; color: #6b6053; margin-top: 26px;
}

/* The 150-years video: the library's inline 16:9 embed, held to the same
   measure as the prose above it so the column does not jump width. */
.sm-jbs .sm-video-embed { max-width: 900px; margin: 0 auto; }
.sm-jbs .sm-video-note { margin-top: 32px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-jbs.sm-3366 { padding: 40px 0 32px; }
    .bakery .vc_row.sm-jbs.sm-snowbird,
    .bakery .vc_row.sm-jbs.sm-6633,
    .bakery .vc_row.sm-jbs.sm-5050 { padding: 32px 0; }
    .bakery .vc_row.sm-jbs.sm-snowbird.sm-jbs-video { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-jbs.sm-3366,
    .bakery .vc_row.sm-jbs.sm-snowbird,
    .bakery .vc_row.sm-jbs.sm-6633,
    .bakery .vc_row.sm-jbs.sm-5050 { padding: 24px 0; }
    .bakery .vc_row.sm-jbs.sm-snowbird.sm-jbs-video { padding: 24px 0 40px; }
}


/* === Page: the-renovation === 2026-09-09 === */
/* The Renovation (page 2709) — page-only overrides, scope `sm-renov`.
   Page overrides of a row are COMPOUND (`.sm-renov.sm-3x`, no space) — gotcha 15. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the DESIGNER'S OWN Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358
   and uploaded back in the globals batch. An earlier session recorded "no Level 2
   hero art exists for ANY of the 17 pages" and planned around cropping a Level 1
   hero instead. That was a NAMING MISS: the designer called these files
   `header-bg`, not `hero`, so a search for hero art never found them. The three
   Weddings children have bespoke ones (2799 / 2789 / 2768); every other Level 2
   page takes this shared default.
   It carries NO baked-in darkening — mean luminance 71 over a bright parquet
   pattern — so the row also takes `sm-hero-scrim` and the gradient layer below.
   See that modifier in _global.add.css for why a gradient LAYER is the only
   scrim this theme will composite. No mobile variant is needed: the artwork is
   an edge-to-edge texture with no focal subject, so it crops cleanly at any
   width, unlike the portrait crops the Level 1 heroes need. */
.bakery .vc_row.sm-renov.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-renov.sm-3x { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-renov.sm-snowbird.sm-showcase { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-renov.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-renov.sm-3x { padding: 40px 0; }
.bakery .vc_row.sm-renov.sm-snowbird.sm-prose-row { padding: 40px 0; }
/* SEAM: the spotlight's own 80px inner bottom padding plus this row's 40px top
   measured 131px — over the 96 budget for a between-sections join. The house fix
   is to zero one side rather than invent a new pair, so this row (the only one
   that ever follows the spotlight) drops its top padding. Measured 107 after.
   QA row 10 REOPENED this: 107 is the gap under the spotlight's TEXT column,
   which carries 80px of inner padding. The IMAGE column has none, so under the
   photograph the gap was only the 16px below — and the photograph is the side
   the heading actually sits beneath. Restored to 56, giving 56 under the image
   and 136 under the text, which is the seam the designer asked for. */
.bakery .vc_row.sm-renov.sm-snowbird.sm-prose-row.sm-after-spot { padding-top: 56px; }
.bakery .vc_row.sm-renov.sm-snowbird.sm-showcase { padding: 40px 0 56px; }

/* Long-form essay: hold the prose rows to a readable measure. */
.sm-renov .sm-prose { max-width: 900px; margin: 0 auto; }
body #content .sm-renov .sm-prose h2 { text-align: center; margin: 0 0 24px; }

/* QA rows 9 + 10. Every prose row on this page had a centred h2 over left-aligned
   body copy, which the designer read as inconsistent in both places it happens
   ("body copy should be centred for consistency"). All three prose rows here are
   a personal essay held to a 900 measure, so centring the paragraphs with their
   headings is coherent — this is NOT the john-b-stetson case, where the prose
   runs the full 1188 track and centring it would be unreadable. */
body #content .sm-renov .sm-prose,
body #content .sm-renov .sm-prose p { text-align: center; }

/* --- the Before / During / After triptych --------------------------------
   The library's 3x row is three EQUAL TEXT columns on a 99px gutter; here each
   column is a figure. The gutter is cut to 32 because three photographs 99px
   apart read as three unrelated images rather than one sequence, and the
   heading min-height the row sets for text columns is released because these
   captions sit BELOW their image and are one word each. */
.bakery .vc_row.sm-renov.sm-3x > .container { column-gap: 32px; }
.sm-renov .sm-tri { margin: 0; }
.sm-renov .sm-tri img {
    display: block; width: 100%; aspect-ratio: 440 / 409; object-fit: cover;
    border-radius: var(--sm-radius);
}
.sm-renov .sm-tri figcaption { margin-top: 14px; }
body #content .sm-renov .sm-tri h3 {
    min-height: 0; margin: 0; font-size: 18px; line-height: 24px;
    letter-spacing: .16em; text-transform: uppercase;
}

/* --- the spotlight row runs IMAGE RIGHT on this page ---------------------
   The library row is authored image-LEFT, so the text column is emitted first
   and the flex order of `.sm-spotlight > .container` flips it. The COLUMN ORDER
   needs no override — but the text column's INSET does, and this is the trap:
   the library gives that column `padding: 80px 40px`, which is correct when the
   text sits on the RIGHT half (the page gutter is then on the far side and the
   40px is an inner gutter against the image). Flipped to the left half, that
   same 40px puts body copy 40px from the VIEWPORT edge, while every other row on
   the page is inset to the 1188 container — 126px at 1440. The column reads as
   falling off the page. So the left inset is set to the site gutter instead, and
   the measure released to fill what is left of the half. */
.bakery .vc_row.sm-renov.sm-spot-right .sm-spotlight-text > .vc_column-inner {
    max-width: none; padding: 80px 40px 80px 126px;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-renov.sm-snowbird { padding: 56px 0 32px; }
    .bakery .vc_row.sm-renov.sm-3x { padding: 32px 0; }
    /* stacked, the row is full width again and the site gutter no longer applies. */
    .bakery .vc_row.sm-renov.sm-spot-right .sm-spotlight-text > .vc_column-inner {
        padding: 56px 24px;
    }
    .bakery .vc_row.sm-renov.sm-snowbird.sm-prose-row { padding: 32px 0; }
    .bakery .vc_row.sm-renov.sm-snowbird.sm-showcase { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    /* the triptych is a sequence, so it stacks rather than reflowing to 2 + 1. */
    .bakery .vc_row.sm-renov.sm-3x > .container { grid-template-columns: 1fr; row-gap: 24px; }
    .bakery .vc_row.sm-renov.sm-3x { padding: 24px 0; }
    .bakery .vc_row.sm-renov.sm-snowbird.sm-prose-row { padding: 24px 0; }
    .bakery .vc_row.sm-renov.sm-snowbird.sm-showcase { padding: 24px 0 40px; }
}


/* === Page: visiting-the-estate === 2026-09-09 === */
/* Visiting the Estate (page 2710) — page-only overrides, scope `sm-visiting`.
   Page overrides of a row are COMPOUND (`.sm-visiting.sm-6633`, no space) — gotcha 15.
   NOTE the scope is `sm-visiting`, NOT `sm-visit` — `.sm-visit` is an existing
   library ROW (the full-bleed split on the homepage) and reusing the name would
   repaint it site-wide. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the DESIGNER'S OWN Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358
   and uploaded back in the globals batch. An earlier session recorded "no Level 2
   hero art exists for ANY of the 17 pages" and planned around cropping a Level 1
   hero instead. That was a NAMING MISS: the designer called these files
   `header-bg`, not `hero`, so a search for hero art never found them. The three
   Weddings children have bespoke ones (2799 / 2789 / 2768); every other Level 2
   page takes this shared default.
   It carries NO baked-in darkening — mean luminance 71 over a bright parquet
   pattern — so the row also takes `sm-hero-scrim` and the gradient layer below.
   See that modifier in _global.add.css for why a gradient LAYER is the only
   scrim this theme will composite. No mobile variant is needed: the artwork is
   an edge-to-edge texture with no focal subject, so it crops cleanly at any
   width, unlike the portrait crops the Level 1 heroes need. */
.bakery .vc_row.sm-visiting.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-visiting.sm-6633 { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-visiting.sm-5050 { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 -----------
   This is a SHORT page (the live source is four paragraphs and a dining note),
   so the hero-to-intro opener is the only place carrying extra air. */
.bakery .vc_row.sm-visiting.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-visiting.sm-6633 { padding: 40px 0; }
.bakery .vc_row.sm-visiting.sm-snowbird.sm-prose-row { padding: 40px 0; }
.bakery .vc_row.sm-visiting.sm-5050 { padding: 40px 0 56px; }

/* QA row 11 moved this lede out of a centred full-width row and into the 66/33
   copy column, so the 1000px cap it needed as a centred block is gone — it now
   takes the column's width like the paragraph under it. It keeps the lede type
   size, which is what still marks it as the page's opening line. */
body #content .sm-visiting .sm-intro-lede {
    font-size: 20px; line-height: 32px; margin-bottom: 20px;
}
.sm-visiting .sm-prose { max-width: 900px; margin: 0 auto; }

/* --- the 66/33 row runs IMAGE LEFT on this page --------------------------
   The designer's export is named "66-33-img-left-outside", i.e. the 440 column
   sits left. The library row is authored text-left (672fr 440fr), so the track
   widths are swapped here and the image column is emitted first in the builder.
   Both columns still top-align, as the library row intends. */
.bakery .vc_row.sm-visiting.sm-6633.sm-img-left > .container {
    grid-template-columns: 440fr 672fr;
}
/* The image is a 604x345 landscape in a 440 column; the library's 440/303
   aspect-ratio crop would cut it tighter than the source wants, so this one
   keeps its own proportions. */
.bakery .vc_row.sm-visiting.sm-6633.sm-img-left img { aspect-ratio: 604 / 345; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-visiting.sm-snowbird { padding: 56px 0 32px; }
    .bakery .vc_row.sm-visiting.sm-6633 { padding: 32px 0; }
    .bakery .vc_row.sm-visiting.sm-snowbird.sm-prose-row { padding: 32px 0; }
    .bakery .vc_row.sm-visiting.sm-5050 { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    /* stacked, the image should lead — it is the establishing shot for the copy. */
    .bakery .vc_row.sm-visiting.sm-6633.sm-img-left > .container {
        grid-template-columns: 1fr;
    }
    .bakery .vc_row.sm-visiting.sm-6633 { padding: 24px 0; }
    .bakery .vc_row.sm-visiting.sm-snowbird.sm-prose-row { padding: 24px 0; }
    .bakery .vc_row.sm-visiting.sm-5050 { padding: 24px 0 40px; }
}


/* === Page: meet-the-team === 2026-09-09 === */
/* Meet the Team (page 2711) — page-only overrides, scope `sm-team`.
   THIS PAGE IS A DELIBERATE PLACEHOLDER. It has no live source and invents no
   copy; the panel below is build scaffolding, styled so that it is unmistakably
   unfinished in QA and in a client walkthrough alike.

   HOUSE PLACEHOLDER PATTERN (dev's call, 2026-09-11): a real on-brand photograph,
   dashed outline, greyscaled and dimmed, a `[PLACEHOLDER]` label, and a muted
   "Coming Soon" that is a span and NOT a link. Same treatment as the C2
   Quinceanera card; C1's picsum variant is retired. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the DESIGNER'S OWN Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358
   and uploaded back in the globals batch. An earlier session recorded "no Level 2
   hero art exists for ANY of the 17 pages" and planned around cropping a Level 1
   hero instead. That was a NAMING MISS: the designer called these files
   `header-bg`, not `hero`, so a search for hero art never found them. The three
   Weddings children have bespoke ones (2799 / 2789 / 2768); every other Level 2
   page takes this shared default.
   It carries NO baked-in darkening — mean luminance 71 over a bright parquet
   pattern — so the row also takes `sm-hero-scrim` and the gradient layer below.
   See that modifier in _global.add.css for why a gradient LAYER is the only
   scrim this theme will composite. No mobile variant is needed: the artwork is
   an edge-to-edge texture with no focal subject, so it crops cleanly at any
   width, unlike the portrait crops the Level 1 heroes need. */
.bakery .vc_row.sm-team.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- the placeholder panel ------------------------------------------------ */
.bakery .vc_row.sm-team.sm-snowbird.sm-team-tbd { padding: 80px 0; }
.sm-team .sm-team-panel {
    max-width: 940px; margin: 0 auto; display: grid;
    grid-template-columns: 380fr 520fr; column-gap: 48px; align-items: center;
    padding: 32px; border-radius: var(--sm-radius);
}
.sm-team .sm-team-panel.sm-card-tbd { outline: 1px dashed rgba(37,28,18,.35); }
.sm-team .sm-team-media img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--sm-radius); filter: grayscale(1); opacity: .55;
}
body #content .sm-team .sm-tbd-label {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: #8a7f70; margin: 0 0 10px;
}
body #content .sm-team .sm-team-body h2 { font-size: 28px; line-height: 36px; margin: 0 0 16px; }
body #content .sm-team .sm-team-body p { font-size: 15px; line-height: 28px; }
/* The muted no-anchor "Coming Soon", same token the placeholder cards use. */
.sm-team .sm-learnmore-tbd {
    display: inline-block; margin-top: 8px; color: #8a7f70;
    font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-team.sm-snowbird.sm-team-tbd { padding: 56px 0; }
}
@media (max-width: 767px) {
    .sm-team .sm-team-panel {
        grid-template-columns: 1fr; row-gap: 24px; padding: 24px;
    }
    .bakery .vc_row.sm-team.sm-snowbird.sm-team-tbd { padding: 40px 0; }
}


/* === Page: historic-tours === 2026-09-09 === */
/* Historic Tours (page 2720) — page-only overrides, scope `sm-histour`.
   Page overrides of a row are COMPOUND (`.sm-histour.sm-5050`, no space) — gotcha 15. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the designer's own Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358 and
   uploaded in the globals batch. The three Weddings children have bespoke ones
   (2799 / 2789 / 2768); every other Level 2 page takes this shared default.
   No baked-in darkening, so the row also carries `sm-hero-scrim` and the
   gradient layer below — see that modifier in _global.add.css. */
.bakery .vc_row.sm-histour.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-histour.sm-tickets,
.bakery .vc_row.sm-histour.sm-3366,
.bakery .vc_row.sm-histour.sm-gal8 { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-histour.sm-5050,
.bakery .vc_row.sm-histour.sm-snowbird.sm-addinfo { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-histour.sm-snowbird.sm-sched { padding: 72px 0 40px; }
.bakery .vc_row.sm-histour.sm-tickets { padding: 40px 0; }
.bakery .vc_row.sm-histour.sm-5050    { padding: 40px 0; }
.bakery .vc_row.sm-histour.sm-gal8    { padding: 40px 0; }
.bakery .vc_row.sm-histour.sm-3366    { padding: 40px 0; }
.bakery .vc_row.sm-histour.sm-snowbird.sm-addinfo { padding: 40px 0; }
/* SEAM: the spotlight carries its own 80px inner padding, so the row before it
   gives up its bottom half rather than letting the join reach 120 (the fix the
   renovation page needed after measuring 131). */
.bakery .vc_row.sm-histour.sm-snowbird.sm-addinfo { padding-bottom: 16px; }

.sm-histour .sm-prose { max-width: 900px; margin: 0 auto; }

/* The 33/66 row pairs a tall marker photograph with a three-item list, so centre
   the pair instead of top-aligning the list against a much taller image. */
.bakery .vc_row.sm-histour.sm-3366 > .container { align-items: center; }

/* The ticket cards here carry a longer note than the Christmas ones (the
   student-ID line runs to three lines), so the note gets a little more air. */
body #content .sm-histour .sm-ticket-note { margin-top: 16px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-histour.sm-snowbird.sm-sched { padding: 56px 0 32px; }
    .bakery .vc_row.sm-histour.sm-tickets,
    .bakery .vc_row.sm-histour.sm-5050,
    .bakery .vc_row.sm-histour.sm-gal8,
    .bakery .vc_row.sm-histour.sm-3366 { padding: 32px 0; }
    .bakery .vc_row.sm-histour.sm-snowbird.sm-addinfo { padding: 32px 0 16px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-histour.sm-tickets,
    .bakery .vc_row.sm-histour.sm-5050,
    .bakery .vc_row.sm-histour.sm-gal8,
    .bakery .vc_row.sm-histour.sm-3366 { padding: 24px 0; }
    .bakery .vc_row.sm-histour.sm-snowbird.sm-addinfo { padding: 24px 0 16px; }
}


/* === Page: group-information-discounts === 2026-09-09 === */
/* Group Information & Discounts (page 2722) — page-only overrides, scope `sm-groups`.
   Page overrides of a row are COMPOUND (`.sm-groups.sm-5050`, no space) — gotcha 15. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the designer's own Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358 and
   uploaded in the globals batch. The three Weddings children have bespoke ones
   (2799 / 2789 / 2768); every other Level 2 page takes this shared default.
   No baked-in darkening, so the row also carries `sm-hero-scrim` and the
   gradient layer below — see that modifier in _global.add.css. */
.bakery .vc_row.sm-groups.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-groups.sm-5050,
.bakery .vc_row.sm-groups.sm-snowbird.sm-questions { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-groups.sm-snowbird.sm-fineprint,
.bakery .vc_row.sm-groups.sm-3366 { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-groups.sm-snowbird.sm-rates { padding: 72px 0 40px; }
.bakery .vc_row.sm-groups.sm-5050 { padding: 40px 0; }
.bakery .vc_row.sm-groups.sm-snowbird.sm-fineprint { padding: 40px 0; }
.bakery .vc_row.sm-groups.sm-3366 { padding: 40px 0; }
.bakery .vc_row.sm-groups.sm-snowbird.sm-questions { padding: 40px 0 56px; }

.sm-groups .sm-prose { max-width: 900px; margin: 0 auto; }

/* The headline rate list sits directly under a centred section head, so centre
   the block itself while leaving the list items left-aligned to read as a list. */
/* NB the compound scope below is a FIX, not a style choice: this rule was
   written with a space and so never matched anything. `pagelib.row()` puts the
   page scope on the ROW element beside the row class. Found by
   `scratchpad/scope-audit.py`. */
.sm-groups.sm-rates .sm-prose { max-width: 680px; }

/* The fine print is the longest list on the build (fourteen items, several of
   them full paragraphs), so it gets a wider measure than standard prose and a
   little more room between items. */
.sm-groups.sm-fineprint .sm-prose { max-width: 980px; }
body #content .sm-groups.sm-fineprint ul.sm-list li { margin-bottom: 18px; }

/* The 33/66 terms row runs image-left against a long paragraph plus a button. */
.bakery .vc_row.sm-groups.sm-3366 > .container { align-items: center; }
body #content .sm-groups.sm-3366 h2 { font-size: 26px; line-height: 34px; }

body #content .sm-groups .sm-contact-line { font-size: 16px; line-height: 28px; margin: 18px 0 0; }
body #content .sm-groups .sm-contact-line a { color: var(--sm-green) !important; font-weight: 600; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-groups.sm-snowbird.sm-rates { padding: 56px 0 32px; }
    .bakery .vc_row.sm-groups.sm-5050,
    .bakery .vc_row.sm-groups.sm-snowbird.sm-fineprint,
    .bakery .vc_row.sm-groups.sm-3366 { padding: 32px 0; }
    .bakery .vc_row.sm-groups.sm-snowbird.sm-questions { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-groups.sm-5050,
    .bakery .vc_row.sm-groups.sm-snowbird.sm-fineprint,
    .bakery .vc_row.sm-groups.sm-3366 { padding: 24px 0; }
    .bakery .vc_row.sm-groups.sm-snowbird.sm-questions { padding: 24px 0 40px; }
}
/* --- ornament divider band colour (fixed 2026-09-14) ----------------------
   The shared library paints `.sm-ornament-row` with `--sm-cream`
   (`_global.add.css:499`). That is right where the divider ENDS a cream band
   before the cream-deep `.sm-explore` row begins, which is the common case.
   Here the ornament sits between two CREAM-DEEP rows, so the library default
   rendered a visibly lighter stripe across the page. Band colours are page
   business (see the B2 note in `_global.add.css`), so it is corrected here
   rather than by changing the library default, which 12 other pages rely on.
   Audit: `scratchpad/ornament-audit.js` measures every ornament row against
   both neighbours and flags any that matches neither. */
.bakery .vc_row.sm-groups.sm-ornament-row { background: var(--sm-cream-deep); }


/* === Page: wedding-packages === 2026-09-09 === */
/* Wedding Packages (page 2723) — page-only overrides, scope `sm-wpack`.
   Page overrides of a row are COMPOUND (`.sm-wpack.sm-3x`, no space) — gotcha 15. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2799**, `header-bg-Wedding-Pacakges.jpg` — a BESPOKE Level 2 header the
   designer cut for this exact page at 1440x358. The Weddings tree is the only
   one with per-child header art; every other Level 2 page falls back to the
   shared default, media 2690. No baked-in darkening on any of them, so the row
   also carries `sm-hero-scrim` and the gradient layer below — see that modifier
   in _global.add.css for why a gradient LAYER is the only scrim this theme
   composites. */
.bakery .vc_row.sm-wpack.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/weddings-wedding-packages-header-bg-wedding-pacakges.jpg');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-wpack.sm-3x,
.bakery .vc_row.sm-wpack.sm-gal4-1 { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-wpack.sm-5050,
.bakery .vc_row.sm-wpack.sm-wpack-slider { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-wpack.sm-3x { padding: 72px 0 40px; }
.bakery .vc_row.sm-wpack.sm-wpack-slider { padding: 40px 0; }
.bakery .vc_row.sm-wpack.sm-5050 { padding: 40px 0; }
.bakery .vc_row.sm-wpack.sm-gal4-1 { padding: 40px 0; }

/* --- the three package cards ---------------------------------------------
   The library's 3x row is three equal TEXT columns; here each column is a card,
   so it gets a surface, and the heading min-height the row sets for plain text
   columns is released because these headings are one line each. The cards are
   equal height with the CTA pinned to the bottom, or three descriptions of
   different lengths leave the buttons on three different baselines. */
.bakery .vc_row.sm-wpack.sm-3x > .container { column-gap: 36px; align-items: stretch; }
.bakery .vc_row.sm-wpack.sm-3x > .container > .vc_column_container { display: flex; }
.sm-wpack .sm-pack-card {
    background: #fff; border-radius: var(--sm-radius); padding: 36px 30px;
    /* `flex: 1 1 auto` — the card is the last item in the stretched chain above
       and defaults to `0 1 auto`, i.e. it shrink-wraps its copy instead of
       filling the column the grid already sized for it. */
    display: flex; flex-direction: column; width: 100%; flex: 1 1 auto;
}
body #content .sm-wpack .sm-pack-card h3 {
    min-height: 0; font-size: 26px; line-height: 34px; margin: 0 0 16px;
}
body #content .sm-wpack .sm-pack-card p { font-size: 15px; line-height: 26px; margin: 0; }
/* Two actions per card now (the PDF, then the inquiry modal). At 3-up the column
   is ~330px, so a pair of pills side by side would wrap mid-button — they stack,
   and the pair as a whole is what gets pinned to the bottom of the equal-height
   card, not each button individually. */
/* EQUAL-HEIGHT CARDS: the grid stretches `.vc_column_container` to the tallest
   row (all three measured 423), but WPBakery's `.vc_column-inner` /
   `.wpb_text_column` / `.wpb_wrapper` chain between the column and the card is
   plain block, so the card shrink-wrapped its own content — 423 / 389 / 389, and
   the CTAs landed on three different baselines. Each level of the chain has to be
   a stretching flex column for the card to reach the bottom of its column. */
.bakery .vc_row.sm-wpack.sm-3x > .container > .vc_column_container > .vc_column-inner,
.bakery .vc_row.sm-wpack.sm-3x .vc_column-inner > .wpb_wrapper,
.bakery .vc_row.sm-wpack.sm-3x .wpb_text_column,
.bakery .vc_row.sm-wpack.sm-3x .wpb_text_column > .wpb_wrapper {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
/* `.sm-pack-btns` is a paragraph, and `body #content .sm-wpack .sm-pack-card p`
   above sets `margin: 0` at higher specificity — without matching that weight the
   `margin-top: auto` that pins the pair to the bottom of the card is discarded. */
body #content .sm-wpack .sm-pack-card p.sm-pack-btns {
    margin: auto 0 0; padding-top: 24px;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
body #content .sm-wpack .sm-pack-btns a.btn-bt { text-align: center; }
body #content .sm-wpack .sm-pack-btns a.btn-bt + a.btn-bt { margin-left: 0; }
/* THE PRICES ARE MISSING ON PURPOSE — the live page publishes none in text. See
   the builder's docstring. When rates arrive they go in `.sm-ticket-rates`
   markup between the paragraph and the button; Historic Tours shows the pattern. */

/* --- the caterers row ----------------------------------------------------- */
body #content .sm-wpack .sm-5050-text h3 { font-size: 19px; line-height: 25px; margin: 26px 0 14px; }
/* The caterers are outbound vendor links. They take the site's underline-on-hover
   link treatment rather than the content area's default, so a list of four names
   does not read as four buttons. */
body #content .sm-wpack ul.sm-caterers a {
    color: var(--sm-green); text-decoration: none; border-bottom: 1px solid rgba(23, 58, 46, .3);
    transition: color .2s ease, border-color .2s ease;
}
body #content .sm-wpack ul.sm-caterers a:hover {
    color: var(--sm-gold); border-bottom-color: var(--sm-gold);
}
body #content .sm-wpack .sm-caterer-note {
    margin-top: 22px; font-size: 14px; line-height: 24px; color: #6b6053;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-wpack.sm-3x { padding: 56px 0 32px; }
    .bakery .vc_row.sm-wpack.sm-wpack-slider,
    .bakery .vc_row.sm-wpack.sm-5050,
    .bakery .vc_row.sm-wpack.sm-gal4-1 { padding: 32px 0; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-wpack.sm-3x { padding: 40px 0 24px; }
    .bakery .vc_row.sm-wpack.sm-wpack-slider,
    .bakery .vc_row.sm-wpack.sm-5050,
    .bakery .vc_row.sm-wpack.sm-gal4-1 { padding: 24px 0; }
    .sm-wpack .sm-pack-card { padding: 28px 22px; }
}
/* --- ornament divider band colour (fixed 2026-09-14) ----------------------
   The shared library paints `.sm-ornament-row` with `--sm-cream`
   (`_global.add.css:499`). That is right where the divider ENDS a cream band
   before the cream-deep `.sm-explore` row begins, which is the common case.
   Here the ornament sits between two CREAM-DEEP rows, so the library default
   rendered a visibly lighter stripe across the page. Band colours are page
   business (see the B2 note in `_global.add.css`), so it is corrected here
   rather than by changing the library default, which 12 other pages rely on.
   Audit: `scratchpad/ornament-audit.js` measures every ornament row against
   both neighbours and flags any that matches neither. */
.bakery .vc_row.sm-wpack.sm-ornament-row { background: var(--sm-cream-deep); }


/* === Page: wedding-galleries === 2026-09-09 === */
/* Wedding Galleries (page 2724) — page-only overrides, scope `sm-wgal`.
   Page overrides of a row are COMPOUND (`.sm-wgal.sm-gal3x3`, no space) — gotcha 15. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2789**, `header-bg-Wedding-Galleries.jpg` — a BESPOKE Level 2 header the
   designer cut for this exact page at 1440x358. The Weddings tree is the only
   one with per-child header art; every other Level 2 page falls back to the
   shared default, media 2690. No baked-in darkening on any of them, so the row
   also carries `sm-hero-scrim` and the gradient layer below — see that modifier
   in _global.add.css for why a gradient LAYER is the only scrim this theme
   composites. */
.bakery .vc_row.sm-wgal.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/weddings-wedding-galleries-header-bg-wedding-galleries.jpg');
}

/* --- band colours --------------------------------------------------------
   The three galleries alternate so consecutive full-bleed grids do not merge
   into one undifferentiated wall of photographs. */
.bakery .vc_row.sm-wgal.sm-wgal-2 { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-wgal.sm-wgal-1,
.bakery .vc_row.sm-wgal.sm-wgal-3 { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-wgal.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-wgal.sm-gal3x3 { padding: 40px 0; }
.bakery .vc_row.sm-wgal.sm-snowbird.sm-closing { padding: 40px 0 56px; }

body #content .sm-wgal .sm-intro-lede { max-width: 1000px; }

/* The gallery row is full bleed, so its section head would otherwise sit flush
   against the viewport edge with the tiles. Inset it to the site container. */
/* NB the compound scope below is a FIX, not a style choice: this rule was
   written with a space and so never matched anything. `pagelib.row()` puts the
   page scope on the ROW element beside the row class. Found by
   `scratchpad/scope-audit.py`. */
.sm-wgal.sm-gal3x3 .sm-section-head { max-width: 1188px; margin: 0 auto 32px; padding: 0 25px; }

/* The closing line is the live page's sign-off, set as a display line rather
   than a section heading with body copy under it. */
body #content .sm-wgal.sm-closing h2 { margin: 0; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-wgal.sm-snowbird { padding: 56px 0 32px; }
    .bakery .vc_row.sm-wgal.sm-gal3x3 { padding: 32px 0; }
    .bakery .vc_row.sm-wgal.sm-snowbird.sm-closing { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-wgal.sm-gal3x3 { padding: 24px 0; }
    .bakery .vc_row.sm-wgal.sm-snowbird.sm-closing { padding: 24px 0 40px; }
}


/* === Page: bridal-showers === 2026-09-09 === */
/* Bridal Showers (page 2725) — page-only overrides, scope `sm-bridal`.
   THIS PAGE IS A DELIBERATE PLACEHOLDER — there is no live source for it
   anywhere on stetsonmansion.com and no copy has been written on the client's
   behalf. It reuses the placeholder panel that meet-the-team 2711 introduced;
   the two blocks are intentionally near-identical, and if a third page ever
   needs one the panel should move into _global.add.css instead. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2768**, `header-bg-Bridal-Showers.jpg` — a BESPOKE Level 2 header the
   designer cut for this exact page at 1440x358. The Weddings tree is the only
   one with per-child header art; every other Level 2 page falls back to the
   shared default, media 2690. No baked-in darkening on any of them, so the row
   also carries `sm-hero-scrim` and the gradient layer below — see that modifier
   in _global.add.css for why a gradient LAYER is the only scrim this theme
   composites. */
.bakery .vc_row.sm-bridal.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/weddings-bridal-showers-header-bg-bridal-showers.jpg');
}

/* --- the placeholder panel (house pattern — see meet-the-team.css) -------- */
.bakery .vc_row.sm-bridal.sm-snowbird.sm-bridal-tbd { padding: 80px 0; }
.sm-bridal .sm-team-panel {
    max-width: 940px; margin: 0 auto; display: grid;
    grid-template-columns: 380fr 520fr; column-gap: 48px; align-items: center;
    padding: 32px; border-radius: var(--sm-radius);
}
.sm-bridal .sm-team-media img {
    display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
    border-radius: var(--sm-radius);
}
body #content .sm-bridal .sm-tbd-label {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: #8a7f70; margin: 0 0 10px;
}
body #content .sm-bridal .sm-team-body h2 { font-size: 28px; line-height: 36px; margin: 0 0 16px; }
body #content .sm-bridal .sm-team-body p { font-size: 15px; line-height: 28px; }
.sm-bridal .sm-learnmore-tbd {
    display: inline-block; margin-top: 8px; color: #8a7f70;
    font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-bridal.sm-snowbird.sm-bridal-tbd { padding: 56px 0; }
}
@media (max-width: 767px) {
    .sm-bridal .sm-team-panel { grid-template-columns: 1fr; row-gap: 24px; padding: 24px; }
    .bakery .vc_row.sm-bridal.sm-snowbird.sm-bridal-tbd { padding: 40px 0; }
}


/* === Page: christmas-spectacular === 2026-09-09 === */
/* The Christmas "Spectacular!" (page 2712) — page-only overrides, scope `sm-xspec`.
   Page overrides of a row are COMPOUND (`.sm-xspec.sm-5050`, no space) — gotcha 15.

   THIS PAGE IS A LONG READ ON PURPOSE. It is the designer's written room-by-room
   tour, ten rooms and roughly 3,000 words, and it is the EXPERIENCE half of the
   Christmas content — B2 Christmas Tours (2721) is the TRANSACTION half. So the
   whole block below is really typography: a readable measure, clear room breaks,
   and alternating bands so ten consecutive prose rows do not read as one wall. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the designer's own Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358.
   Only the three Weddings children have bespoke Level 2 art; everything else
   shares this. No baked-in darkening, so the row also carries `sm-hero-scrim`
   and the gradient layer below — see that modifier in _global.add.css. */
.bakery .vc_row.sm-xspec.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours — alternate every room so the breaks are unmistakable ---
   QA row 14 made each room TWO rows, and both carry the same `sm-room-odd` /
   `-even` band, so a room is one continuous colour across its pair.
   NB the farewell rule is scoped to `.sm-farewell`, not to `.sm-5050`: the rooms
   are 50/50 rows now too, and a bare `.sm-5050` background would land after the
   band rules at equal specificity and repaint all ten of them cream-deep. */
.bakery .vc_row.sm-xspec.sm-room-even { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-xspec.sm-room-odd,
.bakery .vc_row.sm-xspec.sm-snowbird.sm-welcome { background: var(--sm-cream); }
.bakery .vc_row.sm-xspec.sm-5050.sm-farewell,
.bakery .vc_row.sm-xspec.sm-snowbird.sm-farewell-b { background: var(--sm-cream-deep); }

/* --- row rhythm ----------------------------------------------------------
   The rooms are a SEQUENCE, not ten separate sections, so they run on a tighter
   half-seam (24) than the rest of the build's 40 — at 40 the page would gain
   200px of dead air across ten rooms and the tour would stop reading as
   continuous. The welcome keeps the standard 40 opener.
   Since QA row 14 a room is TWO rows, so there are two seams to keep apart: 8+8
   = 16 WITHIN a room, against 24+24 = 48 BETWEEN one room and the next. A room
   with a single paragraph has no second row (`sm-room-solo`) and therefore keeps
   the full bottom seam on itself. The farewell pair works the same way at 40. */
.bakery .vc_row.sm-xspec.sm-snowbird.sm-welcome { padding: 72px 0 40px; }
.bakery .vc_row.sm-xspec.sm-room-a { padding: 24px 0 8px; }
.bakery .vc_row.sm-xspec.sm-room-b { padding: 8px 0 24px; }
.bakery .vc_row.sm-xspec.sm-room-a.sm-room-solo { padding: 24px 0; }
.bakery .vc_row.sm-xspec.sm-5050.sm-farewell { padding: 40px 0 8px; }
.bakery .vc_row.sm-xspec.sm-snowbird.sm-farewell-b { padding: 8px 0 40px; }

/* --- the written tour -----------------------------------------------------
   QA row 14: "make sure the margins/padding line up with the 50 50 row". The
   860px centred measure is what the prose rows used when they were the whole
   page; a room's continuation row now has to start exactly where the 50/50's
   text column above it starts, which is the track edge. `.sm-prose-flush` drops
   the measure and the centring for precisely those rows. The `.sm-prose` default
   is kept for the welcome row, which is still a centred block. */
.sm-xspec .sm-prose { max-width: 860px; margin: 0 auto; }
body #content .sm-xspec .sm-prose-flush {
    max-width: none; margin: 0; text-align: left;
}
/* The room copy beside the photograph is no longer inside `.sm-prose`, so the
   tour's type has to reach it directly or the two halves of one room would be
   set differently. */
body #content .sm-xspec.sm-room .sm-5050-text p { font-size: 16px; line-height: 30px; }
body #content .sm-xspec.sm-room .sm-5050-text > .vc_column-inner,
body #content .sm-xspec.sm-farewell .sm-5050-text > .vc_column-inner { padding-top: 0; }
/* The photograph should sit with the copy, not tower over a half-length column. */
.bakery .vc_row.sm-xspec.sm-5050 > .container { align-items: start; }
.bakery .vc_row.sm-xspec.sm-5050 .sm-5050-media img { aspect-ratio: 4 / 3; }

/* ONE TRACK FOR THE WHOLE PAGE (QA row 14, "margins/padding line up").
   The library `.sm-5050` is a marketing row: its container is uncapped (left
   edge at 58 on a 1440 viewport) and its text column is `max-width:560px` with
   `margin-left:auto` and 40px of padding, so the copy hugs the centre fold and
   starts at 167. The continuation row under it is a `.sm-snowbird`, whose
   container IS capped at 1188 and starts at 126. Two different tracks, 41px
   apart, which is exactly the misalignment the designer boxed.
   Here the 50/50s join the 1188 track and give up the centre-hugging inset, so
   every row on the page — 50/50, continuation, welcome — shares one edge. The
   64px gap replaces the 2x40px of column padding that used to separate the
   halves. Page-scoped: the other twelve pages using this row want the comped
   marketing geometry, which is why the library keeps it. */
.bakery .vc_row.sm-xspec.sm-5050 > .container { max-width: 1188px; gap: 64px; }
/* Spelled through `.container > .vc_column_container` to match the weight the
   library rule now carries -- it was raised to beat the `.sm-row` vertical reset,
   and this page-level override has to stay above it or the rooms fall off the one
   track this row exists to hold. */
.bakery .vc_row.sm-xspec.sm-5050 > .container > .vc_column_container.sm-5050-text > .vc_column-inner,
.bakery .vc_row.sm-xspec.sm-5050 > .container > .vc_column_container.sm-5050-media > .vc_column-inner {
    max-width: none; margin-left: 0; padding: 0;
}
@media (max-width: 767px) {
    /* stacked, the library already zeroes the max-width and adds its own 32px
       column gap, so the row gap here would double it. */
    .bakery .vc_row.sm-xspec.sm-5050 > .container { gap: 0; }
}
body #content .sm-xspec .sm-prose h2 { text-align: center; margin: 0 0 10px; }
/* Each room's title is "Room - Theme" and wants to read as a heading, not a
   paragraph: the live page sets these as plain text, which is a Squarespace
   limitation, not a design intent. */
/* NB the compound scope below is a FIX, not a style choice: this rule was
   written with a space and so never matched anything. `pagelib.row()` puts the
   page scope on the ROW element beside the row class. Found by
   `scratchpad/scope-audit.py`. */
body #content .sm-xspec.sm-room h3 {
    font-size: 24px; line-height: 32px; margin: 0 0 20px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(37,28,18,.14);
}
body #content .sm-xspec .sm-prose p { font-size: 16px; line-height: 30px; }
body #content .sm-xspec .sm-byline {
    text-align: center; font-style: italic; color: #6b6053; margin: 0 0 28px;
}
body #content .sm-xspec .sm-signoff { margin-top: 26px; font-style: italic; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-xspec.sm-snowbird.sm-welcome { padding: 56px 0 32px; }
    .bakery .vc_row.sm-xspec.sm-5050.sm-farewell { padding: 32px 0 8px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-xspec.sm-room-a { padding: 20px 0 6px; }
    .bakery .vc_row.sm-xspec.sm-room-b { padding: 6px 0 20px; }
    .bakery .vc_row.sm-xspec.sm-room-a.sm-room-solo { padding: 20px 0; }
    .bakery .vc_row.sm-xspec.sm-5050.sm-farewell { padding: 24px 0 8px; }
    .bakery .vc_row.sm-xspec.sm-snowbird.sm-farewell-b { padding: 8px 0 24px; }
    body #content .sm-xspec .sm-prose p { font-size: 15px; line-height: 28px; }
}
/* --- ornament divider band colour (fixed 2026-09-14) ----------------------
   The shared library paints `.sm-ornament-row` with `--sm-cream`
   (`_global.add.css:499`). That is right where the divider ENDS a cream band
   before the cream-deep `.sm-explore` row begins, which is the common case.
   Here the ornament sits between two CREAM-DEEP rows, so the library default
   rendered a visibly lighter stripe across the page. Band colours are page
   business (see the B2 note in `_global.add.css`), so it is corrected here
   rather than by changing the library default, which 12 other pages rely on.
   Audit: `scratchpad/ornament-audit.js` measures every ornament row against
   both neighbours and flags any that matches neither. */
.bakery .vc_row.sm-xspec.sm-ornament-row { background: var(--sm-cream-deep); }


/* === Page: murder-mysteries === 2026-09-09 === */
/* Murder Mysteries (page 2713) — page-only overrides, scope `sm-murder`.
   Page overrides of a row are COMPOUND (`.sm-murder.sm-6633`, no space) — gotcha 15.

   TWO THINGS MAKE THIS PAGE THE ODD ONE OUT:
   1. it is the ONLY Level 2 page on the build that uses `.sm-hero-jumbo` (594)
      instead of `.sm-hero-page` (358) — recorded in the Phase D source map from
      the start, because the page opens on scene-setting fiction;
   2. it is the FIRST AND ONLY use of `.sm-cta-murder`, which has been
      CSS-ready and unused in the library since Phase B3. */

/* --- hero (JUMBO, 1440x594) ----------------------------------------------
   No bespoke Level 2 art exists for this page, so it takes the shared default
   (2690) like the rest of the Events tree. That artwork is cut at 358, so at
   594 it is being stretched — acceptable for an edge-to-edge texture with no
   focal subject, but it is the one page where a real hero export would help
   most. Flagged for the designer. */
.bakery .vc_row.sm-murder.sm-hero-jumbo {
    background-image: linear-gradient(rgba(37,28,18,.52), rgba(37,28,18,.52)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}
/* The jumbo hero's H1 is capped at 520px in the library, which suits a short
   board headline. This page's h1 is the live page's long section heading, so it
   needs the room the sub page hero would have given it. */
body #content .sm-murder.sm-hero-jumbo h1 { max-width: 860px; }
body #content .sm-murder.sm-hero-jumbo .sm-hero-sub { max-width: 700px; }

/* --- band colours --------------------------------------------------------- */
/* QA row 16: the opening scene moved off `.sm-spotlight` onto the 33/66 row, so
   the dark band the spotlight painted for free has to be painted here — along
   with the light-on-dark text colours the library only gave `.sm-spotlight`. */
.bakery .vc_row.sm-murder.sm-3366.sm-scene { background: var(--sm-dark); }
body #content .sm-murder.sm-scene h2 { color: var(--sm-cream) !important; }
body #content .sm-murder.sm-scene p  { color: #d9d2c6 !important; }

.bakery .vc_row.sm-murder.sm-6633,
.bakery .vc_row.sm-murder.sm-snowbird.sm-about-mansion { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-murder.sm-snowbird.sm-why,
.bakery .vc_row.sm-murder.sm-snowbird.sm-hosting { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 -----------
   The scene row used to be the full-bleed spotlight, whose 80px inner padding
   the next row absorbed by dropping to a 16px top. QA row 17: that only ever
   held under the spotlight's TEXT column — under its IMAGE column there was no
   padding at all, so the 66/33 heading sat 16px below the poster. The scene is
   an ordinary padded row now (QA row 16), so this one is back on the half-seam. */
.bakery .vc_row.sm-murder.sm-3366.sm-scene { padding: 56px 0; }
.bakery .vc_row.sm-murder.sm-6633 { padding: 40px 0; }
.bakery .vc_row.sm-murder.sm-snowbird { padding: 40px 0; }
.bakery .vc_row.sm-murder.sm-snowbird.sm-hosting { padding: 40px 0 56px; }

.sm-murder .sm-prose { max-width: 900px; margin: 0 auto; }
body #content .sm-murder .sm-prose h2 { text-align: center; margin: 0 0 24px; }

/* --- the opening scene, in the dark 33/66 row ----------------------------
   Six short live blocks meant to land as separate beats, under the scene-setting
   line that is now the row's h2. The last three are one line each and carry the
   reveal, so they get size and spacing rather than running on as body copy. */
body #content .sm-murder.sm-scene p { font-size: 16px; line-height: 28px; margin: 0 0 16px; }
/* The scene-setting line was a paragraph dressed up as a heading; it is a real
   h2 now (QA row 16), so it takes the heading's own scale rather than the
   bumped-paragraph one it used to get from `p:first-child`. */
body #content .sm-murder.sm-scene h2 {
    font-size: 26px; line-height: 34px; letter-spacing: .04em; margin: 0 0 20px;
}
/* QA row 16 "make the image smaller and add padding around it": the poster is a
   portrait crop that was bleeding the full height of the old row. Inset in the
   440 column, capped so it cannot tower over six short beats again. */
.bakery .vc_row.sm-murder.sm-3366.sm-scene > .container { align-items: center; }
.bakery .vc_row.sm-murder .sm-scene-media > .vc_column-inner { padding: 16px 24px; }
.bakery .vc_row.sm-murder .sm-scene-media img {
    display: block; width: 100%; max-width: 390px; margin: 0 auto;
    height: auto; aspect-ratio: auto;
}
body #content .sm-murder.sm-scene p:nth-last-child(-n+3) {
    font-size: 18px; line-height: 28px; color: var(--sm-cream) !important; margin-bottom: 10px;
}
body #content .sm-murder.sm-scene p:last-child { margin-bottom: 0; font-style: italic; }

/* The live page prints its stock-photo credit in body text; it may be a
   contractual requirement, so it ships — quietly. */
body #content .sm-murder .sm-credit { font-size: 13px; color: #8a7f70; margin-top: 26px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-murder.sm-3366.sm-scene { padding: 40px 0; }
    .bakery .vc_row.sm-murder.sm-6633 { padding: 32px 0; }
    .bakery .vc_row.sm-murder.sm-snowbird { padding: 32px 0; }
    .bakery .vc_row.sm-murder.sm-snowbird.sm-hosting { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    body #content .sm-murder.sm-hero-jumbo h1 { max-width: none; }
    /* stacked, the poster leads the copy — it is the scene-setter. The 16px top
       here was the same spotlight compensation removed at the desktop width. */
    .bakery .vc_row.sm-murder.sm-3366.sm-scene { padding: 32px 0; }
    .bakery .vc_row.sm-murder .sm-scene-media > .vc_column-inner { padding: 0 0 20px; }
    .bakery .vc_row.sm-murder.sm-6633 { padding: 24px 0; }
    .bakery .vc_row.sm-murder.sm-snowbird { padding: 24px 0; }
    .bakery .vc_row.sm-murder.sm-snowbird.sm-hosting { padding: 24px 0 40px; }
}


/* === Page: corporate-events === 2026-09-09 === */
/* Corporate Events (page 2714) — page-only overrides, scope `sm-corp`.
   Page overrides of a row are COMPOUND (`.sm-corp.sm-2x`, no space) — gotcha 15. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, `default-header-bg.png` — the designer's own Level 2 default
   header background, delivered in `00-global/` at exactly this row's 1440x358.
   Only the three Weddings children have bespoke Level 2 art; everything else
   shares this. No baked-in darkening, so the row also carries `sm-hero-scrim`
   and the gradient layer below — see that modifier in _global.add.css. */
.bakery .vc_row.sm-corp.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-corp.sm-3366,
.bakery .vc_row.sm-corp.sm-2x { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-corp.sm-6633,
.bakery .vc_row.sm-corp.sm-snowbird.sm-book { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-corp.sm-3366 { padding: 56px 0 40px; }
.bakery .vc_row.sm-corp.sm-snowbird { padding: 40px 0; }
.bakery .vc_row.sm-corp.sm-6633 { padding: 40px 0; }
.bakery .vc_row.sm-corp.sm-2x { padding: 40px 0; }
.bakery .vc_row.sm-corp.sm-snowbird.sm-book { padding: 40px 0 56px; }

.sm-corp .sm-prose { max-width: 900px; margin: 0 auto; }
body #content .sm-corp .sm-prose h2 { text-align: center; margin: 0 0 24px; }

/* The 33/66 opener pairs a tall hat still life with two short paragraphs. */
.bakery .vc_row.sm-corp.sm-3366 > .container { align-items: center; }

/* The 2x row holds two REAL sections with multi-line headings, so the library's
   fixed 80px heading block is released — at these lengths it clips rather than
   aligns, and both headings run to two lines anyway. */
body #content .sm-corp.sm-2x h2 { min-height: 0; font-size: 26px; line-height: 34px; }

body #content .sm-corp .sm-credit { font-size: 13px; color: #8a7f70; margin-top: 26px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-corp.sm-3366 { padding: 40px 0 32px; }
    .bakery .vc_row.sm-corp.sm-snowbird,
    .bakery .vc_row.sm-corp.sm-6633,
    .bakery .vc_row.sm-corp.sm-2x { padding: 32px 0; }
    .bakery .vc_row.sm-corp.sm-snowbird.sm-book { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-corp.sm-3366,
    .bakery .vc_row.sm-corp.sm-snowbird,
    .bakery .vc_row.sm-corp.sm-6633,
    .bakery .vc_row.sm-corp.sm-2x { padding: 24px 0; }
    .bakery .vc_row.sm-corp.sm-snowbird.sm-book { padding: 24px 0 40px; }
}


/* === Page: parties === 2026-09-09 === */
/* Parties (page 2715) — page-only overrides, scope `sm-parties`.
   Page overrides of a row are COMPOUND (`.sm-parties.sm-6633`, no space) — gotcha 15.

   This is the SUBSTANTIAL Events child: it carries the consolidated live private
   events page plus all of /private-dining-deland-fl. The other four Events
   children (baby-showers, celebration-of-life, birthday-parties,
   anniversary-parties) each take one section of the same source and are THIN by
   necessity — see events-children.css and the builder docstrings. */

/* --- hero (sub page hero, 1440x358) --------------------------------------
   Media **2690**, the designer's own Level 2 default header. Only the three
   Weddings children have bespoke art; everything else shares this. No baked-in
   darkening, hence `sm-hero-scrim` plus the gradient layer. */
.bakery .vc_row.sm-parties.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours ---------------------------------------------------------
   QA rows 18/19/20 changed three row TYPES, so the band list moves with them:
   takeaways is a 50/50 now, the celebrations list is a new 50/50, and the
   private-dining h3 pair is a new 2x. The alternation is unchanged — the sheet
   explicitly asked to keep the existing background on the 2x row. */
.bakery .vc_row.sm-parties.sm-5050.sm-takeaways,
.bakery .vc_row.sm-parties.sm-3366 { background: var(--sm-cream-deep); }
.bakery .vc_row.sm-parties.sm-6633,
.bakery .vc_row.sm-parties.sm-5050.sm-celebrations,
.bakery .vc_row.sm-parties.sm-2x.sm-dining-2x,
.bakery .vc_row.sm-parties.sm-snowbird.sm-dining { background: var(--sm-cream); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-parties.sm-snowbird { padding: 72px 0 40px; }
.bakery .vc_row.sm-parties.sm-5050.sm-takeaways { padding: 40px 0; }
.bakery .vc_row.sm-parties.sm-6633 { padding: 40px 0; }
.bakery .vc_row.sm-parties.sm-5050.sm-celebrations { padding: 40px 0; }
/* the intro and the 2x below it are ONE section, so the join between them is a
   32/32 in-section seam rather than the page's 40/40 between-section one. */
.bakery .vc_row.sm-parties.sm-snowbird.sm-dining { padding: 40px 0 32px; }
.bakery .vc_row.sm-parties.sm-2x.sm-dining-2x { padding: 32px 0 40px; }
.bakery .vc_row.sm-parties.sm-3366 { padding: 40px 0; }
.bakery .vc_row.sm-parties.sm-snowbird.sm-learnmore-row { padding: 40px 0 56px; }

body #content .sm-parties .sm-intro-lede { max-width: 1000px; }
.sm-parties .sm-prose { max-width: 900px; margin: 0 auto; }
/* QA row 20 centres the private-dining intro above the new 2x row. */
body #content .sm-parties .sm-prose-centred,
body #content .sm-parties .sm-prose-centred p { text-align: center; }
body #content .sm-parties .sm-prose h2 { text-align: center; margin: 0 0 24px; }
body #content .sm-parties .sm-prose h3 { font-size: 22px; line-height: 30px; margin: 34px 0 16px; }

/* The Key Takeaways block is a summary card, not body prose — the live page sets
   it apart at the top and it should read that way here too. QA row 18 moved it
   into a 50/50 beside an image, so the card is now the text COLUMN: it keeps the
   white ground and the radius, loses the centred measure it no longer needs. */
/* Needs the `.bakery .vc_row` prefix, not just the compound page scope: the
   library's own rule for this column outweighed it (it is spelled through
   `.container > .vc_column_container` to clear the `.sm-row` vertical reset, so
   it carries seven), and this rule carried four -- the card's 36px was
   silently losing to the library padding and the white card was rendering with
   zero top and bottom. Compounding the scope was necessary but not sufficient —
   the weight had to match too. */
.bakery .vc_row.sm-parties.sm-takeaways > .container > .vc_column_container.sm-5050-text > .vc_column-inner {
    background: #fff; border-radius: var(--sm-radius); padding: 36px 40px;
}
body #content .sm-parties.sm-takeaways h2 { font-size: 22px; line-height: 30px; margin: 0 0 18px; }
body #content .sm-parties.sm-takeaways .sm-list { margin-bottom: 0; }
/* Both new 50/50s pair a text column against a placeholder image, so centre the
   pair — the image is the shorter element and top-aligning leaves a hole. */
.bakery .vc_row.sm-parties.sm-5050 > .container { align-items: center; }

/* QA row 20: the h3 pair in the 2x row are the column headings now, so they take
   the 2x row's heading treatment rather than the in-prose h3 step-down. The
   library gives `.sm-2x` headings a min-height so both paragraphs start level;
   these two headings are two and one line, which is exactly that case. */
body #content .sm-parties.sm-dining-2x h3 {
    font-size: 24px; line-height: 32px; margin: 0 0 16px; min-height: 64px;
}

/* The list of occasion types is ten one-word items, which as a single column is
   a long thin ladder. Two columns keeps it compact beside the 604px text track. */
body #content .sm-parties ul.sm-list-2col {
    columns: 2; column-gap: 32px; margin: 0 0 26px;
}
body #content .sm-parties ul.sm-list-2col li { break-inside: avoid; margin-bottom: 10px; }

.bakery .vc_row.sm-parties.sm-3366 > .container { align-items: center; }
body #content .sm-parties .sm-credit { font-size: 13px; color: #8a7f70; margin-top: 26px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-parties.sm-snowbird { padding: 56px 0 32px; }
    .bakery .vc_row.sm-parties.sm-5050.sm-takeaways,
    .bakery .vc_row.sm-parties.sm-5050.sm-celebrations,
    .bakery .vc_row.sm-parties.sm-6633,
    .bakery .vc_row.sm-parties.sm-snowbird.sm-dining,
    .bakery .vc_row.sm-parties.sm-2x.sm-dining-2x,
    .bakery .vc_row.sm-parties.sm-3366 { padding: 32px 0; }
    .bakery .vc_row.sm-parties.sm-snowbird.sm-learnmore-row { padding: 32px 0 40px; }
    /* min-height levelled two heading lines against one; stacked there is no
       second column to level against, so it only adds a gap. */
    body #content .sm-parties.sm-dining-2x h3 { min-height: 0; }
}
@media (max-width: 767px) {
    body #content .sm-parties ul.sm-list-2col { columns: 1; }
    .bakery .vc_row.sm-parties.sm-takeaways > .container > .vc_column_container.sm-5050-text > .vc_column-inner { padding: 26px 24px; }
    .bakery .vc_row.sm-parties.sm-5050.sm-takeaways,
    .bakery .vc_row.sm-parties.sm-5050.sm-celebrations,
    .bakery .vc_row.sm-parties.sm-6633,
    .bakery .vc_row.sm-parties.sm-snowbird.sm-dining,
    .bakery .vc_row.sm-parties.sm-2x.sm-dining-2x,
    .bakery .vc_row.sm-parties.sm-3366 { padding: 24px 0; }
    .bakery .vc_row.sm-parties.sm-snowbird.sm-learnmore-row { padding: 24px 0 40px; }
}


/* === Page: events-children === 2026-09-09 === */
/* The four THIN Events children — ONE CSS block for four pages:
     baby-showers 2716 (`sm-baby`) · celebration-of-life 2717 (`sm-col`)
     birthday-parties 2718 (`sm-bday`) · anniversary-parties 2719 (`sm-anniv`)

   They are structurally identical — hero, one assigned live section, a
   placeholder panel, then the standard Level 2 tail — so they share one block
   rather than four copies that drift apart. Every rule below is scoped to all
   four page classes; nothing here leaks to another page.

   **THESE FOUR PAGES ARE NOT FINISHED AND THE STYLING SAYS SO.** None of them has
   a live source; all four are linked from ONE consolidated page that is also
   parties 2715's source. The documented fallback was applied — split by section,
   each child gets a DIFFERENT section so no prose is duplicated, invent no body
   copy, flag every thin page. The placeholder panel is that flag. See
   `pages/build-events-children.py` for the full reasoning and the split table. */

/* --- hero (sub page hero, 1440x358) — shared default 2690 ----------------- */
.bakery .vc_row.sm-baby.sm-hero-page,
.bakery .vc_row.sm-col.sm-hero-page,
.bakery .vc_row.sm-bday.sm-hero-page,
.bakery .vc_row.sm-anniv.sm-hero-page {
    background-image: linear-gradient(rgba(37,28,18,.42), rgba(37,28,18,.42)),
                      url('/wp-content/uploads/2026/09/default-header-bg.png');
}

/* --- band colours --------------------------------------------------------- */
.bakery .vc_row.sm-baby.sm-6633,
.bakery .vc_row.sm-col.sm-6633,
.bakery .vc_row.sm-bday.sm-6633,
.bakery .vc_row.sm-anniv.sm-6633 { background: var(--sm-cream); }
.bakery .vc_row.sm-baby.sm-thin-tbd,
.bakery .vc_row.sm-col.sm-thin-tbd,
.bakery .vc_row.sm-bday.sm-thin-tbd,
.bakery .vc_row.sm-anniv.sm-thin-tbd { background: var(--sm-cream-deep); }

/* --- row rhythm — the 40px half-seam, so every join lands at 80 ----------- */
.bakery .vc_row.sm-baby.sm-6633,
.bakery .vc_row.sm-col.sm-6633,
.bakery .vc_row.sm-bday.sm-6633,
.bakery .vc_row.sm-anniv.sm-6633 { padding: 72px 0 40px; }
.bakery .vc_row.sm-baby.sm-thin-tbd,
.bakery .vc_row.sm-col.sm-thin-tbd,
.bakery .vc_row.sm-bday.sm-thin-tbd,
.bakery .vc_row.sm-anniv.sm-thin-tbd { padding: 40px 0 56px; }

/* --- the placeholder panel (house pattern — see meet-the-team.css) --------
   Real photo, dashed outline, greyscaled and dimmed, a [PLACEHOLDER] label, and
   a muted "Coming Soon" that is a span and NOT a link. The one addition here is
   a REAL link out to /events/parties/, because that is where the live site
   actually sends people for these occasions — a dead end would be worse. */
.sm-baby .sm-team-panel, .sm-col .sm-team-panel,
.sm-bday .sm-team-panel, .sm-anniv .sm-team-panel {
    max-width: 940px; margin: 0 auto; display: grid;
    grid-template-columns: 380fr 520fr; column-gap: 48px; align-items: center;
    padding: 32px; border-radius: var(--sm-radius); background: var(--sm-cream);
}
.sm-baby .sm-team-panel.sm-card-tbd, .sm-col .sm-team-panel.sm-card-tbd,
.sm-bday .sm-team-panel.sm-card-tbd, .sm-anniv .sm-team-panel.sm-card-tbd {
    outline: 1px dashed rgba(37,28,18,.35);
}
.sm-baby .sm-team-media img, .sm-col .sm-team-media img,
.sm-bday .sm-team-media img, .sm-anniv .sm-team-media img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--sm-radius); filter: grayscale(1); opacity: .55;
}
body #content .sm-baby .sm-tbd-label, body #content .sm-col .sm-tbd-label,
body #content .sm-bday .sm-tbd-label, body #content .sm-anniv .sm-tbd-label {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: #8a7f70; margin: 0 0 10px;
}
body #content .sm-baby .sm-team-body h2, body #content .sm-col .sm-team-body h2,
body #content .sm-bday .sm-team-body h2, body #content .sm-anniv .sm-team-body h2 {
    font-size: 26px; line-height: 34px; margin: 0 0 16px;
}
body #content .sm-baby .sm-team-body p, body #content .sm-col .sm-team-body p,
body #content .sm-bday .sm-team-body p, body #content .sm-anniv .sm-team-body p {
    font-size: 15px; line-height: 28px;
}
.sm-baby .sm-learnmore-tbd, .sm-col .sm-learnmore-tbd,
.sm-bday .sm-learnmore-tbd, .sm-anniv .sm-learnmore-tbd {
    display: inline-block; margin-top: 4px; color: #8a7f70;
    font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-baby.sm-6633, .bakery .vc_row.sm-col.sm-6633,
    .bakery .vc_row.sm-bday.sm-6633, .bakery .vc_row.sm-anniv.sm-6633 { padding: 56px 0 32px; }
    .bakery .vc_row.sm-baby.sm-thin-tbd, .bakery .vc_row.sm-col.sm-thin-tbd,
    .bakery .vc_row.sm-bday.sm-thin-tbd, .bakery .vc_row.sm-anniv.sm-thin-tbd { padding: 32px 0 40px; }
}
@media (max-width: 767px) {
    .sm-baby .sm-team-panel, .sm-col .sm-team-panel,
    .sm-bday .sm-team-panel, .sm-anniv .sm-team-panel {
        grid-template-columns: 1fr; row-gap: 24px; padding: 24px;
    }
    .bakery .vc_row.sm-baby.sm-6633, .bakery .vc_row.sm-col.sm-6633,
    .bakery .vc_row.sm-bday.sm-6633, .bakery .vc_row.sm-anniv.sm-6633 { padding: 40px 0 24px; }
    .bakery .vc_row.sm-baby.sm-thin-tbd, .bakery .vc_row.sm-col.sm-thin-tbd,
    .bakery .vc_row.sm-bday.sm-thin-tbd, .bakery .vc_row.sm-anniv.sm-thin-tbd { padding: 24px 0 40px; }
}
/* --- ornament divider band colour (fixed 2026-09-14) ----------------------
   The shared library paints `.sm-ornament-row` with `--sm-cream`
   (`_global.add.css:499`). That is right where the divider ENDS a cream band
   before the cream-deep `.sm-explore` row begins, which is the common case.
   Here the ornament sits between two CREAM-DEEP rows, so the library default
   rendered a visibly lighter stripe across the page. Band colours are page
   business (see the B2 note in `_global.add.css`), so it is corrected here
   rather than by changing the library default, which 12 other pages rely on.
   Audit: `scratchpad/ornament-audit.js` measures every ornament row against
   both neighbours and flags any that matches neither. */
.bakery .vc_row.sm-baby.sm-ornament-row,
.bakery .vc_row.sm-col.sm-ornament-row,
.bakery .vc_row.sm-bday.sm-ornament-row,
.bakery .vc_row.sm-anniv.sm-ornament-row { background: var(--sm-cream-deep); }


/* === Page: utility-pages === 2026-09-09 === */
/* The three E1 utility pages — ONE block for privacy-policy 1617, thank-you 1615
   and accessibility 1627. Every row on all three carries `sm-utility` plus a
   per-page class (`sm-thankyou` / `sm-a11y`), so shared rules hang
   off `sm-utility` and the few per-page ones off the specific class.
   Page overrides of a row are COMPOUND (`.sm-utility.sm-hero-short`, no space).

   These pages replaced agency boilerplate that had lost the global 80px row
   padding when `wpbakery_row_padding` went to 0 (a known casualty list in the
   homepage open items). They now carry their own rhythm like every other page. */

/* --- hero (short hero, 1440x181) -----------------------------------------
   Media **2975**, the neutral darkened band cut for the single-post hero —
   which is precisely what `.sm-hero-short` was built for, so all three reuse it
   directly. It DOES have its darkening baked in, unlike the Level 2 headers, so
   no `sm-hero-scrim` here. */
.bakery .vc_row.sm-utility.sm-hero-short {
    background-image: url('/wp-content/uploads/2026/09/single-post-hero-short.jpg');
}

/* --- the prose row -------------------------------------------------------- */
.bakery .vc_row.sm-utility.sm-snowbird.sm-utility-prose {
    background: var(--sm-cream); padding: 64px 0 88px;
}
.sm-utility .sm-prose { max-width: 860px; margin: 0 auto; }
body #content .sm-utility .sm-prose p { font-size: 15px; line-height: 28px; }
body #content .sm-utility .sm-prose h3 {
    font-size: 17px; line-height: 25px; letter-spacing: .06em; margin: 34px 0 12px;
}
body #content .sm-utility .sm-prose a { color: var(--sm-green) !important; font-weight: 600; }
body #content .sm-utility .sm-prose .sm-lede { margin-bottom: 8px; }

/* --- privacy policy 1617: NOT STYLED HERE, AND NOT AN OVERSIGHT -----------
   That page is owned by a CUSTOM THEME TEMPLATE, `themes/vds/privacy.php`, which
   hard-codes a complete, already-tailored privacy policy. Its page payload is an
   empty disabled row and must stay that way, so it never carries `sm-utility` and
   nothing in this block reaches it.
   OPEN FOR E2: the template's output is raw theme markup — no hero, no page CSS,
   and the theme's grey `.default-header` band above it — so it renders unstyled
   next to the rest of the build. Fixing that means styling `privacy.php`'s markup
   or reworking the template, which is a template job, not a page-block job. */

/* --- thank you: a short confirmation page, centred ------------------------ */
.sm-thankyou .sm-thanks-inner { max-width: 620px; text-align: center; }
body #content .sm-thankyou .sm-thanks-inner p { text-align: center; }
body #content .sm-thankyou .sm-thanks-contact { margin-top: 18px; font-size: 16px; }
.sm-thankyou .sm-thanks-back { margin-top: 30px; }
.bakery .vc_row.sm-utility.sm-thankyou.sm-utility-prose { padding: 72px 0 96px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 979px) {
    .bakery .vc_row.sm-utility.sm-snowbird.sm-utility-prose { padding: 48px 0 64px; }
    .bakery .vc_row.sm-utility.sm-thankyou.sm-utility-prose { padding: 56px 0 72px; }
}
@media (max-width: 767px) {
    .bakery .vc_row.sm-utility.sm-snowbird.sm-utility-prose { padding: 36px 0 48px; }
    .bakery .vc_row.sm-utility.sm-thankyou.sm-utility-prose { padding: 40px 0 56px; }
}


/* === Page: dev-overrides === 2026-09-09 === */
/* Dev-authored overrides, taken from the live custom.css on 2026-09-14.
   The dev appended these by hand at the END of the served file, so they are kept
   as the LAST block here to preserve exactly that cascade position — folding them
   into `_global.add.css` would move them ahead of every page block and change
   which rule wins. Anything the dev adds to the tail of the live file belongs in
   this file; pull the server copy and diff before every publish. */

@media (max-width: 979px) {
    .top-widget .span6.left {
        width: 100% !important;
    }
    .sm-spotlight-text {
        padding-bottom: 40px;
        padding-top: 40px;
    }
}

@media (max-width: 480px) {
    .sm-hero-inner .sm-hero-badge {
        margin-bottom: 3px;
        padding: 4px 7px;
        font-size: 9px;
        width: 100%;
    }
    body #content .sm-hero h1 {
        margin-bottom: 10px;
        text-align: center;
    }
    body #content .sm-hero .sm-hero-sub {
        text-align: center;
        line-height: 22px;
        margin: 0 0 120px;
        font-size: 14px;
    }
    .sm-hero-btns {
        text-align: center;
    }
    .sm-hero-inner {
        padding: 16px 0;
    }
    .bakery .vc_row.sm-hero {
        min-height: unset;
    }
    p.sm-hero-rating {
        display: none;
    }
}

/* TranslatePress - Language Switcher - CL */

nav.trp-language-switcher {
    top: 10px !important;
    padding: 0px;
    right: 10px;
}
body.logged-in nav.trp-language-switcher {
    top: 42px !important;
}

/* GTranslate - CL */

div.gt_switcher_wrapper {
	z-index: 99999999 !important;
    right: 10px !important;
    top: 3px !important;
}
body.logged-in div.gt_switcher_wrapper {
    top: 35px !important;
}

@media (max-width: 979px) {
	nav.trp-language-switcher {
		right: 12px;
	}
	div.gt_switcher_wrapper {
		top: unset !important;
		bottom: 12px;
	}
	body.logged-in div.gt_switcher_wrapper {
		top: unset !important;
	}	
}

div.gt_switcher_wrapper .gt_switcher {
    border-radius: 10px;
    font-size: 10px;
    width: 110px;
}
.gt_switcher .gt_selected a,
div.gt_switcher_wrapper .gt_switcher .gt_option a {
	padding: 0px 12px !important;
    border: none !important;
	width: auto !important;
}
div.gt_switcher_wrapper .gt_switcher .gt_option {
	width: auto !important;
}
div.gt_switcher_wrapper .gt_switcher a img {
	height: auto !important;
    width: 20px !important;
    position: relative;
    top: -1px;
}
div.gt_switcher_wrapper .gt_switcher .gt_selected a:after {
    background-size: 9px;
	height: 30px;
}
div.gt_switcher_wrapper .gt_switcher .gt_selected a.open:after {
    transform: rotate(90deg);
}

/* WP Carousel Masonry Gallery Rows - made for /weddings/wedding-galleries -CL */

#content .bakery .wpb_row.pt0,
#content .bakery .wpb_row .wpb_column.pt0 {
	padding-top: 0;
}
#content .bakery .wpb_row.pb0,
#content .bakery .wpb_row .wpb_column.pb0 {
	padding-bottom: 0;
}
.bakery .masonry-gallery {
    padding: 60px 0 30px 0;
}
.bakery .masonry-gallery .container {
	max-width: 1820px;
	width: 97.5%;
}
a.wcp-light-box figure {
	background: #000;
}
button.fancybox-button,
button.fancybox-button div.wpcp-fancybox-nav-arrow > i::before {
	transition: all 0.3s ease-in-out;
}
button.fancybox-button:hover div.wpcp-fancybox-nav-arrow > i::before {
	transition: all 0.3s ease-in-out;
	color: #FFFFFF;
}

/* Addt'l Respinsive -CL */

@media (max-width: 979px) {
	.sm-cta-bar-inner {
		gap: 10px;
	}
}

@media (max-width: 900px) {
	footer#footer.site-footer {
		text-align: center;
	}
}