html { scroll-behavior: smooth; }

/* =========================================================
   Studio Galea — Additional CSS (CLEAN)
   Palette: light champagne / taupe
   Fonts: Inter + Libre Baskerville
========================================================= */

/* ---------- Palette + type ---------- */
:root{
  --sg-cream:#FAF2EB;
  --sg-ink:#1C1A18;
  --sg-muted:#6D655C;
  --sg-line:#E9E4DD;

  --sg-card-bg: rgba(255,255,255,.72);
  --sg-card-radius: 22px;

  --sg-price:#B07A3A;

  --sg-serif: "Libre Baskerville", Georgia, serif;
  --sg-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* shared left nudge used by CTA band + contact form card */
  --sg-indent: 18px;
}

@media (max-width: 520px){
  :root{ --sg-indent: 0px; }
}

/* ---------- Footer tweaks ---------- */
#footer{ font-size: 17px; }
#footer a:not(.sg-sticky-cta){ margin-right: 24px; }

/* ---------- Gallery tweaks ---------- */
.subgallerylinks{ display:none; }

/* ---------- Base page feel (HOME + Standard marketing pages) ---------- */
#homePage,
#standardPage{
  background: var(--sg-cream) !important;
}

/* Headings */
#homePage .text h1,
#homePage .text h2,
#homePage .text h3,
#standardPage .text h1,
#standardPage .text h2,
#standardPage .text h3{
  color: var(--sg-ink) !important;
  letter-spacing: -0.02em !important;
}

/* Body text */
#homePage .text p,
#homePage .text li,
#standardPage .text p,
#standardPage .text li{
  color: var(--sg-muted) !important;
  font-family: var(--sg-sans) !important;
}

/* Paragraph sizing (let Page Designer override if needed) */
#homePage .text p,
#standardPage .text p{
  font-size: 16px;
  line-height: 1.6;
}

/* =========================================================
   Universal “Card” styling for Page Designer column elements
========================================================= */
#homePage .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"]) .concol:not(.srty) .ea.ba.ptc,
#standardPage .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"]) .concol:not(.srty) .ea.ba.ptc{
  background: var(--sg-card-bg) !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: 18px !important;
  padding: 18px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Remove extra top padding wrapper */
#homePage .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"]) .concol:not(.srty) .colpad > .position-relative,
#standardPage .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"]) .concol:not(.srty) .colpad > .position-relative{
  padding-top: 0 !important;
}

/* Let Page Designer control paragraph sizing inside cards */
#homePage .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"]) .concol:not(.srty) .ea.ba.ptc p,
#standardPage .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"]) .concol:not(.srty) .ea.ba.ptc p{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* =========================================================
   COLLECTION CARDS (Styled photo+text columns “columphotos…”)
========================================================= */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty{
  background: var(--sg-card-bg) !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: var(--sg-card-radius) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.05) !important;
  text-align: inherit;
  padding: 22px;
}

/* Neutralise inner backgrounds/borders */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty .colpad,
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty .ea.ba.ptc,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty .colpad,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty .ea.ba.ptc{
  background: transparent !important;
  border: 0 !important;
}

/* Rounded photo area */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto{
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 18px;
}

#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty img.pf-image,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty img.pf-image{
  display:block;
  width:100%;
  height:auto;
}

/* Card headings */
#homePage .concol.srty h1,
#homePage .concol.srty h2,
#homePage .concol.srty h3,
#standardPage .concol.srty h1,
#standardPage .concol.srty h2,
#standardPage .concol.srty h3{
  font-family: var(--sg-serif) !important;
  line-height: 1.08 !important;
  margin: 6px 0 10px !important;
}

#homePage .concol.srty h2,
#standardPage .concol.srty h2{ font-size: 44px !important; }

@media (max-width: 980px){
  #homePage .concol.srty h2,
  #standardPage .concol.srty h2{ font-size: 38px !important; }
}
@media (max-width: 520px){
  #homePage .concol.srty h2,
  #standardPage .concol.srty h2{ font-size: 34px !important; }
}

/* Card body text */
#homePage .concol.srty .txt p,
#standardPage .concol.srty .txt p{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* =========================================================
   Hours Widget styling (inserted via token)
========================================================= */
.sg-hour-widget{ margin: 22px 0 18px; display:block; }
.sg-hour-widget .sg-hour-box{
  border: 1px solid var(--sg-line);
  background: rgba(255,255,255,.60);
  border-radius: 18px;
  padding: 16px 14px;
  text-align:center;
}
.sg-hour-widget .sg-price{
  font-family: var(--sg-serif);
  font-weight: 700;
  color: var(--sg-price);
  font-size: 38px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.sg-hour-widget .sg-hour-title{
  font-size: 14px;
  color: var(--sg-muted);
  margin-bottom: 10px;
}
.sg-hour-widget .sg-stepper{
  display:inline-flex;
  align-items:center;
  gap: 12px;
}
.sg-hour-widget .sg-hours{
  min-width: 92px;
  font-weight: 700;
  font-size: 14px;
  color: var(--sg-muted);
}
.sg-hour-widget .sg-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
  transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sg-hour-widget .sg-btn:hover:not([disabled]){ transform: translateY(-1px); }
.sg-hour-widget .sg-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

#homePage .sg-hour-widget button.sg-btn,
#standardPage .sg-hour-widget button.sg-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  background: var(--sg-ink) !important;
  border: 1px solid var(--sg-ink) !important;
  color: var(--sg-cream) !important;
  background-image:none !important;
  box-shadow:none !important;
}
#homePage .sg-hour-widget button.sg-btn.sg-btn-dec,
#standardPage .sg-hour-widget button.sg-btn.sg-btn-dec{
  background:#7B746D !important;
  border-color:#7B746D !important;
  color:#FFF !important;
}
#homePage .sg-hour-widget button.sg-btn:hover:not([disabled]),
#standardPage .sg-hour-widget button.sg-btn:hover:not([disabled]){
  background:#26231F !important;
  border-color:#26231F !important;
}
#homePage .sg-hour-widget button.sg-btn::before,
#homePage .sg-hour-widget button.sg-btn::after,
#standardPage .sg-hour-widget button.sg-btn::before,
#standardPage .sg-hour-widget button.sg-btn::after{
  content:none !important;
  display:none !important;
}

/* =========================================================
   Sticky CTA — unified (desktop + mobile)
   - Desktop now black like mobile
   - Letter spacing matches your CTA buttons
   - Keeps show/hide via .is-visible (JS)
========================================================= */
.sg-sticky-cta{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 2147483647;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Match your main CTA button feel */
  padding: 16px 18px;
  border-radius: 999px;

  background: var(--sg-ink);
  border: 1px solid var(--sg-ink);
  color: var(--sg-cream) !important;

  font-family: var(--sg-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none !important;

  /* hidden until JS toggles .is-visible */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;

  box-sizing: border-box !important; /* prevents mobile cut-off issues */
}

.sg-sticky-cta.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sg-sticky-cta:hover{
  background: #26231F;
  border-color: #26231F;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* Page Designer safety */
html.sg-editdesign .sg-sticky-cta{ display: none !important; }

/* Mobile: full-width bar */
@media (max-width: 520px){
  .sg-sticky-cta{
    left: auto;                 /* <-- stop full-width stretch */
    right: 12px;                /* keep it tucked to the right */
    width: auto;                /* size to text */
    max-width: calc(100% - 24px);
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
/* Desktop: lift sticky CTA above Sytist “Scroll to top” bubble */
@media (min-width: 521px){
  .sg-sticky-cta{
    bottom: calc(34px + env(safe-area-inset-bottom)) !important; /* tweak 74px up/down */
  }
}




/* =========================================================
   Studio Galea — Buttons (global standardisation for your custom CTAs)
========================================================= */
.sg-btn-row, .sg-hero-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  margin-top:18px !important;
}
.sg-btn-row a, .sg-hero-actions a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;
  font-family: Inter, sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  line-height:1 !important;
  text-decoration:none !important;
  border:1px solid transparent !important;

  padding: 16px 18px !important;
  box-sizing:border-box !important;
  white-space: nowrap !important;
}
.sg-btn-row a:nth-of-type(1), .sg-hero-actions a:nth-of-type(1){
  background:#1C1A18 !important;
  border-color:#1C1A18 !important;
  color:#FAF2EB !important;
}
.sg-btn-row a:nth-of-type(2), .sg-hero-actions a:nth-of-type(2){
  background:transparent !important;
  border-color:#D0C8BE !important;
  color:#1C1A18 !important;
}
.sg-btn-row a:nth-of-type(2):hover,
.sg-hero-actions a:nth-of-type(2):hover{
  border-color: #B7AC9F !important;
  background: rgba(255,255,255,.55) !important;
}
@media (max-width:480px){
  .sg-btn-row a, .sg-hero-actions a{ width:100% !important; white-space: normal !important; }
}

/* =========================================================
   Studio Galea — FAQ (details.sg-faq)
========================================================= */
#homePage details.sg-faq,
#standardPage details.sg-faq{
  max-width: 1100px !important;
  width: calc(100% - var(--sg-indent, 0px)) !important;
  margin: 0 auto 12px var(--sg-indent, 0px) !important;

  display: block !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: 18px !important;
  background: var(--sg-card-bg) !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
#homePage details.sg-faq:hover,
#standardPage details.sg-faq:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  background: rgba(255,255,255,.80) !important;
}
#homePage details.sg-faq[open],
#standardPage details.sg-faq[open]{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(176,122,58,.35) !important;
}

/* Question line */
#homePage details.sg-faq summary,
#standardPage details.sg-faq summary{
  cursor: pointer !important;
  font-weight: 600 !important;
  list-style: none !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;

  line-height: 1.4 !important;
  color: var(--sg-ink) !important;
}
#homePage details.sg-faq summary::-webkit-details-marker,
#standardPage details.sg-faq summary::-webkit-details-marker{ display:none !important; }

#homePage details.sg-faq summary:after,
#standardPage details.sg-faq summary:after{
  content: "+" !important;
  margin-left: auto !important;
  color: rgba(28,26,24,.55) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
#homePage details.sg-faq[open] summary:after,
#standardPage details.sg-faq[open] summary:after{ content: "–" !important; }

/* Answer */
#homePage details.sg-faq .sg-answer,
#standardPage details.sg-faq .sg-answer{
  margin: 10px 0 0 0 !important;
  line-height: 1.6 !important;
  color: rgba(28,26,24,.70) !important;
  font-size: 14px !important;
  max-width: 80ch !important;
}

/* FAQ indent (desktop) + reset on mobile */
#homePage details.sg-faq,
#standardPage details.sg-faq{
  margin-left: var(--sg-indent) !important;
  margin-right: auto !important;
}
/* Mobile: full width, no indent */
@media (max-width: 520px){
  #homePage details.sg-faq,
  #standardPage details.sg-faq{
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
   Studio Galea — CTA Band (table.sg-cta-band)
========================================================= */
#homePage table.sg-cta-band,
#standardPage table.sg-cta-band{
  max-width: 1100px !important;
  margin: 0 auto 14px var(--sg-indent) !important;

  width: calc(100% - var(--sg-indent)) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  border: 1px solid rgba(28,26,24,.10) !important;
  border-radius: var(--sg-card-radius) !important;

  background:
    radial-gradient(900px 320px at 18% 45%, rgba(201,183,159,.45), rgba(0,0,0,0)),
    linear-gradient(90deg, rgba(239,232,219,.80), rgba(255,255,255,.70)) !important;

  box-shadow: 0 18px 50px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}
#homePage table.sg-cta-band td,
#standardPage table.sg-cta-band td{
  padding: 22px 26px !important;
  vertical-align: middle !important;
}
#homePage table.sg-cta-band td.sg-cta-right,
#standardPage table.sg-cta-band td.sg-cta-right{
  white-space: nowrap !important;
  text-align: right !important;
}

#homePage table.sg-cta-band .sg-cta-title,
#standardPage table.sg-cta-band .sg-cta-title{
  font-family: var(--sg-serif) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  color: var(--sg-ink) !important;
  margin: 0 0 8px 0 !important;
}
#homePage table.sg-cta-band .sg-cta-sub,
#standardPage table.sg-cta-band .sg-cta-sub{
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: rgba(28,26,24,.55) !important;
  max-width: 72ch !important;
}

/* CTA band buttons */
#homePage table.sg-cta-band a.sg-btn,
#standardPage table.sg-cta-band a.sg-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 22px !important;
  border-radius: 999px !important;

  font-family: var(--sg-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  text-decoration: none !important;
  border: 1px solid transparent !important;
  margin-left: 12px !important;
  box-sizing:border-box !important;
}
#homePage table.sg-cta-band a.sg-btn-primary,
#standardPage table.sg-cta-band a.sg-btn-primary{
  background: linear-gradient(180deg, #1C1A18, #0F0E0D) !important;
  border-color: #1C1A18 !important;
  color: #FAF2EB !important;
}
#homePage table.sg-cta-band a.sg-btn-outline,
#standardPage table.sg-cta-band a.sg-btn-outline{
  background: rgba(255,255,255,.65) !important;
  border-color: rgba(28,26,24,.14) !important;
  color: #1C1A18 !important;
}

/* Mobile: stack CTA band */
@media (max-width: 720px){
  #homePage table.sg-cta-band,
  #homePage table.sg-cta-band tbody,
  #homePage table.sg-cta-band tr,
  #homePage table.sg-cta-band td,
  #standardPage table.sg-cta-band,
  #standardPage table.sg-cta-band tbody,
  #standardPage table.sg-cta-band tr,
  #standardPage table.sg-cta-band td{
    display: block !important;
    width: 100% !important;
    box-sizing:border-box !important;
  }

  #homePage table.sg-cta-band td.sg-cta-right,
  #standardPage table.sg-cta-band td.sg-cta-right{
    white-space: normal !important;
    text-align: left !important;
    padding-top: 0 !important;
  }

  #homePage table.sg-cta-band a.sg-btn,
  #standardPage table.sg-cta-band a.sg-btn{
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    white-space: normal !important;
  }
}

/* =========================================================
   CONTACT FORM — card style + FORCE LEFT ALIGN (Sytist inline override)
========================================================= */

/* The flex row Sytist uses to centre things */
#homePage .contentrow[data-content-type="form"] .dyncontent.fullrow.flex.flexrow,
#standardPage .contentrow[data-content-type="form"] .dyncontent.fullrow.flex.flexrow{
  justify-content: flex-start !important;
}

/* The element that is actually centred via inline: #contact-form-3 (etc) */
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"]{
  /* override inline margin:auto + max-width */
  margin-left: var(--sg-indent) !important;
  margin-right: auto !important;
  max-width: 900px !important;
  width: calc(100% - var(--sg-indent)) !important;

  /* card look */
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--sg-line) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.06) !important;

  box-sizing: border-box !important;
  text-align: left !important;
}

/* There is often another inner wrapper also centred */
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] > .flex.flexrow,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] > .flex.flexrow{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important; /* kills inner margin:auto */
  justify-content: flex-start !important;
}

/* Mobile: remove indent, keep card full width */
@media (max-width: 520px){
  #homePage .contentrow[data-content-type="form"] div[id^="contact-form-"],
  #standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"]{
    margin-left: 0 !important;
    width: 100% !important;
    padding: 18px !important;
  }
}

/* Tighter spacing between fields */
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] .formcol1,
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] .formcol2,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] .formcol1,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] .formcol2{
  margin-bottom: 12px !important;
}

/* Inputs */
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="text"],
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="email"],
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="tel"],
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="date"],
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] select,
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] textarea,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="text"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="email"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="tel"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="date"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] select,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] textarea{
  width: 100% !important;
  border: 1px solid rgba(28,26,24,.12) !important;
  border-radius: 14px !important;
  padding: 14px 14px !important;
  background: rgba(255,255,255,.82) !important;
  box-sizing: border-box !important;
  font-family: var(--sg-sans) !important;
  font-size: 14px !important;
  color: var(--sg-ink) !important;
}

/* Secondary style submit button (keeps primary CTA as Check Your Date) */
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="submit"],
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] button[type="submit"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="submit"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] button[type="submit"]{
  -webkit-appearance:none !important;
  appearance:none !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink) !important;

  border-radius: 999px !important;
  padding: 14px 22px !important;

  font-family: var(--sg-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
}
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="submit"]:hover,
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"] button[type="submit"]:hover,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] input[type="submit"]:hover,
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"] button[type="submit"]:hover{
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(28,26,24,.22) !important;
}

/* =========================================================
   FIX: Contact form still centering (targets your inspect)
   - overrides inline margin:auto on <form> and #contact-form-3
   - aligns the whole form block to the same left edge as your CTA band
========================================================= */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  .dyncontent.fullrow.flex.flexrow.maxwidth800{
  justify-content: flex-start !important;
  margin-left: var(--sg-indent, 0px) !important;
  margin-right: auto !important;

  /* optional: match your desired width */
  max-width: 900px !important;
  width: calc(100% - var(--sg-indent, 18px)) !important;

  box-sizing: border-box !important;
}

/* This is the inline style centering it: <form style="margin:auto;"> */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  form[id^="rand-"]{
  margin: 0 !important;
  width: 100% !important;
}

/* This also has inline margin:auto in your inspect: #contact-form-3 */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"]{
  margin: 0 !important;
  max-width: none !important;
}

/* Mobile: no indent */
@media (max-width: 520px){
  :where(#homePage,#standardPage)
    .contentrow[data-content-type="form"]
    .dyncontent.fullrow.flex.flexrow.maxwidth800{
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   SG Forms (Sytist) — GLOBAL (HOME + STANDARD)
   Tight spacing + 2-col on tablet + muted labels + better submit hover
========================================================= */

/* Field layout container */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] .flex.flexrow{
  display: flex !important;
  flex-wrap: wrap !important;

  column-gap: 26px !important;
  row-gap: 12px !important;

  align-items: flex-start !important;
}

/* Two-column field blocks */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] .formcol2{
  flex: 0 0 calc(50% - 13px) !important;
  max-width: calc(50% - 13px) !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Full-width blocks (message + submit row etc.) */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(.formcol1,.formcol11){
  flex: 0 0 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Remove extra wrapper spacing */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] .formcolinner{
  margin: 0 !important;
  padding: 0 !important;
}

/* Labels */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] .pc.bold{
  margin: 0 0 5px 0 !important;
  line-height: 1.2 !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 600 !important;

  color: var(--sg-muted, #6D655C) !important;
  opacity: .95 !important;
}

:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] .pc{
  margin: 0 !important;
  padding: 0 !important;
}

/* Inputs */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea
  ){
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 11px 14px !important;
  min-height: 42px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(28,26,24,.10) !important;
  background: rgba(255,255,255,.85) !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;

  color: var(--sg-ink, #1C1A18) !important;
  box-shadow: none !important;

  margin: 0 !important;
}

:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] textarea{
  min-height: 150px !important;
  resize: vertical !important;
}

/* Focus */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(input,select,textarea):focus{
  outline: none !important;
  border-color: rgba(176,122,58,.40) !important;
  box-shadow: 0 0 0 3px rgba(176,122,58,.18) !important;
}

/* Submit button (secondary style) */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(button[type="submit"], input[type="submit"]){
  -webkit-appearance: none !important;
  appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 22px !important;
  min-height: 46px !important;
  border-radius: 999px !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.16) !important;
  color: var(--sg-ink, #1C1A18) !important;

  cursor: pointer !important;

  transition: transform 140ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}

:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(button[type="submit"], input[type="submit"]):hover{
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(28,26,24,.28) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.12) !important;
  transform: translateY(-2px) !important;
}

:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(button[type="submit"], input[type="submit"]):active{
  transform: translateY(0px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
}

:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(button[type="submit"], input[type="submit"]):focus,
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"] :is(button[type="submit"], input[type="submit"]):focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(176,122,58,.22), 0 14px 30px rgba(0,0,0,.10) !important;
}

/* Mobile: stack only on small phones (keeps 2-col on tablet) */
@media (max-width: 520px){
  :where(#homePage,#standardPage)
    .contentrow[data-content-type="form"]
    div[id^="contact-form-"] .flex.flexrow{
    column-gap: 0 !important;
    row-gap: 10px !important;
  }

  :where(#homePage,#standardPage)
    .contentrow[data-content-type="form"]
    div[id^="contact-form-"] .formcol2{
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  :where(#homePage,#standardPage)
    .contentrow[data-content-type="form"]
    div[id^="contact-form-"] :is(button[type="submit"], input[type="submit"]){
    width: 100% !important;
  }
}

/* =========================================================
   Sytist form: validation / error banner — make it legible
========================================================= */
:where(#homePage,#standardPage) [id^="contact-form-"] :is(
  .error, .errorbox, .formerror, .contacterror,
  [id*="error"], [id*="-error"], [id*="error-"]
){
  background: rgba(176,122,58,.18) !important;
  border: 1px solid rgba(176,122,58,.45) !important;
  color: var(--sg-ink, #1C1A18) !important;

  padding: 12px 14px !important;
  border-radius: 12px !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;

  text-align: left !important;
  box-sizing: border-box !important;
}

:where(#homePage,#standardPage) [id^="contact-form-"] :is(
  .error, .errorbox, .formerror, .contacterror,
  [id*="error"], [id*="-error"], [id*="error-"]
) ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

:where(#homePage,#standardPage) [id^="contact-form-"] :is(
  .error, .errorbox, .formerror, .contacterror,
  [id*="error"], [id*="-error"], [id*="error-"]
) li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

:where(#homePage,#standardPage) [id^="contact-form-"] :is(
  .error, .errorbox, .formerror, .contacterror,
  [id*="error"], [id*="-error"], [id*="error-"]
) a{
  color: var(--sg-ink, #1C1A18) !important;
  text-decoration: underline !important;
}

/* =========================================================
   FORM ERROR: remove the left bullet dot + tidy spacing
========================================================= */
:where(#homePage,#standardPage) .dynformfull [id^="contact-form-"] ul,
:where(#homePage,#standardPage) .dynformfull .formerrors,
:where(#homePage,#standardPage) .dynformfull .formerror,
:where(#homePage,#standardPage) .dynformfull .errorlist{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

:where(#homePage,#standardPage) .dynformfull [id^="contact-form-"] li,
:where(#homePage,#standardPage) .dynformfull .formerrors li,
:where(#homePage,#standardPage) .dynformfull .formerror li,
:where(#homePage,#standardPage) .dynformfull .errorlist li{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

:where(#homePage,#standardPage) .dynformfull [id^="contact-form-"] li::before,
:where(#homePage,#standardPage) .dynformfull .formerrors li::before,
:where(#homePage,#standardPage) .dynformfull .formerror li::before,
:where(#homePage,#standardPage) .dynformfull .errorlist li::before{
  content: none !important;
  display: none !important;
}

:where(#homePage,#standardPage) .dynformfull [id^="contact-form-"] li::marker,
:where(#homePage,#standardPage) .dynformfull .formerrors li::marker,
:where(#homePage,#standardPage) .dynformfull .formerror li::marker,
:where(#homePage,#standardPage) .dynformfull .errorlist li::marker{
  content: "" !important;
}

/* =========================================================
   SG Featured Logos — Responsive without desktop wrapping
   - Desktop: single row, controlled height
   - Tablet/mobile/landscape: wraps safely (no right-side gap)
========================================================= */

/* Base (desktop-first) */
#pageContentContainer #homePage #contentcontainer table#sg-featured-logos,
#pageContentContainer #standardPage #contentcontainer table#sg-featured-logos{
  --sg-logo-h: 78px;      /* DESKTOP logo height (adjust) */
  --sg-logo-h-m: 70px;    /* MOBILE logo height (adjust) */

  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px 0 0 0 !important;
  border: 0 !important;
}

/* Keep desktop in ONE row */
#pageContentContainer #homePage #contentcontainer table#sg-featured-logos,
#pageContentContainer #homePage #contentcontainer table#sg-featured-logos tbody,
#pageContentContainer #homePage #contentcontainer table#sg-featured-logos tr,
#pageContentContainer #standardPage #contentcontainer table#sg-featured-logos,
#pageContentContainer #standardPage #contentcontainer table#sg-featured-logos tbody,
#pageContentContainer #standardPage #contentcontainer table#sg-featured-logos tr{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;

  width: auto !important;
  max-width: 100% !important;

  flex-wrap: nowrap !important; /* <-- key: no wrapping on desktop */
}

/* Cells don’t stretch on desktop */
#pageContentContainer #homePage #contentcontainer table#sg-featured-logos td,
#pageContentContainer #standardPage #contentcontainer table#sg-featured-logos td{
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  justify-content: center !important;

  flex: 0 0 auto !important;     /* <-- key: don’t grow */
  max-width: none !important;
}

/* Images */
#pageContentContainer #homePage #contentcontainer table#sg-featured-logos img,
#pageContentContainer #standardPage #contentcontainer table#sg-featured-logos img{
  height: var(--sg-logo-h) !important;
  max-height: var(--sg-logo-h) !important;

  width: auto !important;
  max-width: 100% !important; /* allows shrink if needed */
  display: block !important;
  object-fit: contain !important;

  filter: none !important;
  opacity: 1 !important;
}

/* Tablet + mobile landscape: allow safe wrapping to avoid overflow */
@media (max-width: 900px){
  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos{
    width: 100% !important;
  }

  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos tbody,
  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos tr,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos tbody,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos tr{
    width: 100% !important;
    flex-wrap: wrap !important;      /* wrap only below 900px */
  }

  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos td,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos td{
    flex: 1 1 320px !important;      /* two-up when room, wraps when not */
    max-width: 100% !important;
  }
}

/* Small phones: stack (your original behaviour) */
@media (max-width: 520px){
  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos tbody,
  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos tr,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos tbody,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos tr{
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos img,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos img{
    height: var(--sg-logo-h-m) !important;
    max-height: var(--sg-logo-h-m) !important;
  }
}

/* Mobile landscape: slightly smaller to prevent last-pixel overflow */
@media (max-height: 520px) and (orientation: landscape){
  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos{
    --sg-logo-h: 70px;
    --sg-logo-h-m: 62px;
  }
}
/* =========================================================
   FIX: Mobile stacked logos huge vertical gaps
   (reset flex-basis when flex-direction becomes column)
========================================================= */
@media (max-width: 520px){
  #pageContentContainer #homePage #contentcontainer table#sg-featured-logos td,
  #pageContentContainer #standardPage #contentcontainer table#sg-featured-logos td{
    flex: 0 0 auto !important;     /* <-- kills 320px flex-basis height */
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   SG Photo Booth Add-On — Sytist-safe (no div/span required)
========================================================= */

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon{
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 22px 0 0 0 !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon tbody,
#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon tr{
  display: flex !important;
  gap: 22px !important;
  align-items: stretch !important; /* equal height */
  width: 100% !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td{
  padding: 0 !important;
  border: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* LEFT: image panel */
#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:first-child{
  min-height: 360px !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer img#sg-pb-photo{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* RIGHT: white card panel */
#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:last-child{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--sg-line) !important;
  padding: 22px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Card heading + text */
#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:last-child h3{
  margin: 0 !important;
  font-family: var(--sg-serif) !important;
  color: var(--sg-ink) !important;
  line-height: 1.15 !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:last-child p{
  margin: 0 !important;
  color: var(--sg-muted) !important;
  line-height: 1.6 !important;
}

/* Pills list */
#pageContentContainer :where(#homePage,#standardPage) #contentcontainer ul#sg-pb-tags{
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer ul#sg-pb-tags li{
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  background: rgba(255,255,255,.55) !important;
  color: rgba(28,26,24,.70) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Button pinned to bottom */
#pageContentContainer :where(#homePage,#standardPage) #contentcontainer p#sg-pb-card-actions{
  margin-top: auto !important;
  padding-top: 8px !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer a#sg-pb-explore{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px 18px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink) !important;

  font-family: var(--sg-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;

  text-decoration: none !important;
  white-space: nowrap !important;
}

#pageContentContainer :where(#homePage,#standardPage) #contentcontainer a#sg-pb-explore:hover{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(28,26,24,.26) !important;
}

/* Mobile: stack */
@media (max-width: 720px){
  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon tbody,
  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon tr{
    flex-direction: column !important;
    gap: 14px !important;
  }

  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:first-child{
    height: 260px !important;
    min-height: 260px !important;
  }

  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer a#sg-pb-explore{
    width: auto !important; /* keep pill-sized */
  }
}
/* =========================================================
   FIX: Photo Booth Add-On (right text column) clipping on mobile
   (scoped ONLY to #sg-pb-addon)
========================================================= */
@media (max-width: 720px){

  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td{
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Keep image clipped, never clip text */
  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:first-child{
    overflow: hidden !important;
  }
  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon td:last-child{
    overflow: visible !important;
  }

  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon tbody,
  #pageContentContainer :where(#homePage,#standardPage) #contentcontainer table#sg-pb-addon tr{
    height: auto !important;
  }
}


/* =========================================================
   Recent tweak: equal heights + button pinned to bottom
   (does NOT rely on page wrappers / edit class)
========================================================= */
:where(#homePage,#standardPage) .sg-col-inner{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;      /* works when columns equal-height */
  min-height: 220px;           /* fallback so buttons align nicely */
}
:where(#homePage,#standardPage) .sg-col-inner a.sg-col-btn{
  margin-top:auto !important;
  align-self:flex-start !important; /* keeps pill-sized */
}

/* Optional: hard cap description to keep rows identical (uncomment if needed) */
/*
:where(#homePage,#standardPage) .sg-col-desc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}
*/
/* LOVE NOTES: button under cards, right aligned */
:where(#homePage,#standardPage) .sg-reviews-bottom{
  margin: 18px 0 0 0 !important;
  text-align: right !important;
}

/* Mobile: left align (or change to center if you prefer) */
@media (max-width: 520px){
  :where(#homePage,#standardPage) .sg-reviews-bottom{
    text-align: left !important;
  }
}

/* Reuse your existing pill style */
:where(#homePage,#standardPage) a.sg-reviews-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px 18px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink) !important;

  font-family: var(--sg-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

:where(#homePage,#standardPage) a.sg-reviews-btn:hover{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(28,26,24,.26) !important;
}
/* =========================================================
   LOVE NOTES — Bottom "Read More Reviews" button
========================================================= */

/* Container */
:where(#homePage,#standardPage) .sg-reviews-bottom{
  /* kill default <p> spacing */
  margin: 0 !important;
  padding: 0 !important;

  /* right align reliably (beats text-align quirks) */
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  /* pull it up closer to the review cards */
  margin-top: -32px !important;   /* tweak: -12 to -32 */
}

/* If this ever ends up inside a list, kill markers */
:where(#homePage,#standardPage) .sg-reviews-bottom{
  list-style: none !important;
}
:where(#homePage,#standardPage) .sg-reviews-bottom::marker{
  content: "" !important;
}

/* Button */
:where(#homePage,#standardPage) a.sg-reviews-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px 18px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink) !important;

  font-family: var(--sg-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

:where(#homePage,#standardPage) a.sg-reviews-btn:hover{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(28,26,24,.26) !important;
}

/* Mobile: keep right aligned (or swap to center if you prefer) */
@media (max-width: 520px){
  :where(#homePage,#standardPage) .sg-reviews-bottom{
    justify-content: center !important; /* change to center if you want */
    margin-top: -16px !important;         /* slightly less pull-up on mobile */
  }
}
/* =========================================================
   INCLUDED section — Sytist-safe (table based)
   Only affects markup wrapped in .sg-included
========================================================= */
:where(#homePage,#standardPage) .sg-included{
  font-family: var(--sg-sans) !important;
  color: var(--sg-ink) !important;
}

:where(#homePage,#standardPage) .sg-included,
:where(#homePage,#standardPage) .sg-included *{
  box-sizing: border-box;
}

:where(#homePage,#standardPage) .sg-included p{
  margin: 0 !important;
}

/* Column heading */
:where(#homePage,#standardPage) .sg-included .sg-inc-head{
  margin: 2px 0 16px 0 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  color: var(--sg-ink) !important;
}

/* Mini-cards (tables) */
:where(#homePage,#standardPage) table.sg-inc-item{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(28,26,24,.12) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.55) !important;
  margin: 0 0 18px 0 !important;
}

:where(#homePage,#standardPage) table.sg-inc-item td{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Title + desc inside each mini-card */
:where(#homePage,#standardPage) td.sg-inc-title{
  padding: 18px 20px 6px 20px !important;
  font-weight: 700 !important;
  font-size: 16.5px !important;
  line-height: 1.25 !important;
  color: var(--sg-ink) !important;
}

:where(#homePage,#standardPage) td.sg-inc-desc{
  padding: 0 20px 18px 20px !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--sg-muted) !important;
}

/* =========================================================
   INCLUDED section — Mobile tidy (COMPLETE + SAFE)
========================================================= */
@media (max-width: 740px){
  :where(#homePage,#standardPage) .sg-included .sg-inc-head{
    font-size: 16px !important;
    margin: 2px 0 12px 0 !important;
  }
  :where(#homePage,#standardPage) table.sg-inc-item{
    margin-bottom: 14px !important;
  }
  :where(#homePage,#standardPage) td.sg-inc-title{
    padding: 16px 16px 6px 16px !important;
    font-size: 16px !important;
  }
  :where(#homePage,#standardPage) td.sg-inc-desc{
    padding: 0 16px 16px 16px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   SG About section — Sytist-safe (table based)
   Only affects markup using table.sg-about
========================================================= */

:where(#homePage,#standardPage) table.sg-about{
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  width: calc(100% - var(--sg-indent, 0px)) !important;
  max-width: 1100px !important;

  margin: 0 auto 18px var(--sg-indent, 0px) !important;
  box-sizing: border-box !important;
}

:where(#homePage,#standardPage) table.sg-about td{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Card */
:where(#homePage,#standardPage) .sg-about-card{
  background: var(--sg-card-bg, rgba(255,255,255,.72)) !important;
  border: 1px solid var(--sg-line, #E9E4DD) !important;
  border-radius: var(--sg-card-radius, 22px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.06) !important;

  padding: 28px 28px 24px !important;
  box-sizing: border-box !important;
}

/* Kicker */
:where(#homePage,#standardPage) .sg-about-kicker{
  margin: 0 0 10px 0 !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;

  color: rgba(28,26,24,.55) !important;
}

/* Headline */
:where(#homePage,#standardPage) .sg-about-head{
  margin: 0 0 12px 0 !important;

  font-family: var(--sg-serif, "Libre Baskerville", Georgia, serif) !important;
  color: var(--sg-ink, #1C1A18) !important;

  font-size: 40px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

/* Copy */
:where(#homePage,#standardPage) .sg-about-copy{
  margin: 0 0 12px 0 !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;

  color: rgba(28,26,24,.62) !important;
  max-width: 78ch !important;
}

/* =========================================================
   Legacy bullet list (if you still use .sg-about-points anywhere)
   CHANGE: ? -> ?  (or delete this whole block if unused)
========================================================= */

:where(#homePage,#standardPage) .sg-about-points{
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 14px !important;
}

:where(#homePage,#standardPage) .sg-about-points li{
  margin: 0 !important;
  padding: 12px 14px 12px 40px !important;

  border: 1px solid rgba(28,26,24,.10) !important;
  background: rgba(255,255,255,.55) !important;
  border-radius: 16px !important;

  color: rgba(28,26,24,.65) !important;
  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;

  position: relative !important;
  box-sizing: border-box !important;
}

:where(#homePage,#standardPage) .sg-about-points li::before{
  content: "?" !important; /* was "?" */
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;

  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(28,26,24,.06) !important;
  border: 1px solid rgba(28,26,24,.10) !important;
  color: rgba(28,26,24,.55) !important;

  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* =========================================================
   ABOUT pills + button (tight spacing, Sytist-safe)
   Preferred system: table.sg-about-bullets + .sg-about-icon
========================================================= */

#pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets{
  width: 100% !important;
  margin: 14px 0 0 0 !important;

  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 14px 12px !important;  /* controls row + column gaps */
  table-layout: fixed !important;
}

#pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets td{
  padding: 0 !important;                 /* kills Sytist default td padding */
  border: 0 !important;
  vertical-align: top !important;
  width: 50% !important;
}

/* the pill itself */
#pageContentContainer :where(#homePage,#standardPage) .sg-about-pill{
  margin: 0 !important;                  /* kills <p> default margins */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 14px !important;
  border-radius: 16px !important;

  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(28,26,24,.10) !important;

  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

/* CHANGE: icon bubble styling (your requested “subtle bubble”) */
#pageContentContainer :where(#homePage,#standardPage) .sg-about-icon{
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(28,26,24,.06) !important;
  border: 1px solid rgba(28,26,24,.10) !important;
  color: rgba(28,26,24,.55) !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  flex: 0 0 auto !important;
}

#pageContentContainer :where(#homePage,#standardPage) .sg-about-text{
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(28,26,24,.70) !important;
}

/* Button alignment: right desktop, centered mobile */
#pageContentContainer :where(#homePage,#standardPage) .sg-about-actions{
  margin: 10px 0 0 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

#pageContentContainer :where(#homePage,#standardPage) .sg-about-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 18px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: #1C1A18 !important;

  text-decoration: none !important;
  white-space: nowrap !important;
}

#pageContentContainer :where(#homePage,#standardPage) .sg-about-btn:hover{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(28,26,24,.26) !important;
}

/* Mobile */
@media (max-width: 740px){
  :where(#homePage,#standardPage) table.sg-about{
    width: 100% !important;
    margin-left: 0 !important;
  }

  :where(#homePage,#standardPage) .sg-about-card{
    padding: 20px !important;
  }

  :where(#homePage,#standardPage) .sg-about-head{
    font-size: 32px !important;
  }

  :where(#homePage,#standardPage) .sg-about-copy{
    font-size: 15.5px !important;
  }

  :where(#homePage,#standardPage) .sg-about-points{
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: stack pills + center button */
@media (max-width: 720px){
  #pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets,
  #pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets tbody,
  #pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets tr,
  #pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets td{
    display: block !important;
    width: 100% !important;
  }

  #pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets{
    border-spacing: 0 !important;
  }

  #pageContentContainer :where(#homePage,#standardPage) table.sg-about-bullets td{
    margin: 0 0 10px 0 !important;
  }

  #pageContentContainer :where(#homePage,#standardPage) .sg-about-actions{
    justify-content: center !important;
    margin-top: 12px !important;
  }
}
/* =========================================================
   CONTACT FORM — make it fill the available width (kills 3/4 gap)
========================================================= */

/* 1) The outer row wrapper that often caps width (e.g. maxwidth800) */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  .dyncontent.fullrow.flex.flexrow{
  max-width: none !important;
  width: 100% !important;
}

/* If Sytist uses a specific width cap class, nuke it too */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  .maxwidth800{
  max-width: none !important;
  width: 100% !important;
}

/* 2) The actual form card wrapper */
#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"]{
  max-width: none !important; /* remove 800/900 cap */
  width: calc(100% - var(--sg-indent, 0px)) !important; /* fill, respecting indent */
}

/* Mobile: no indent, full width */
@media (max-width: 520px){
  #homePage .contentrow[data-content-type="form"] div[id^="contact-form-"],
  #standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"]{
    width: 100% !important;
  }
}
/* =========================================================
   CONTACT FORM — remove left indent (flush align)
========================================================= */

#homePage .contentrow[data-content-type="form"] div[id^="contact-form-"],
#standardPage .contentrow[data-content-type="form"] div[id^="contact-form-"]{
  margin-left: 0 !important;      /* kill left indent */
  margin-right: 0 !important;
  width: 100% !important;         /* fill container */
}

/* (Optional) if the outer wrapper is also adding a left margin */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  .dyncontent.fullrow.flex.flexrow{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   Page Designer safety
========================================================= */
html.sg-editdesign .sg-sticky-cta{
  display: none !important;
}
html.sg-editdesign .sg-hour-widget{
  display: none !important;
}

/* =========================================================
   KILL: Redactor / Page Designer “?” selection marker
========================================================= */
span.redactor-selection-marker,
[id^="selection-marker-"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   MOBILE: restore spacing between stacked Page Designer columns (GLOBAL)
   (simple margin-based fallback)
========================================================= */
@media (max-width: 520px){
  :where(#homePage,#standardPage)
    .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"])
    .conrow > .concol{
    margin: 0 0 22px 0 !important; /* gap between stacked cards */
  }

  :where(#homePage,#standardPage)
    .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"])
    .conrow > .concol:last-child{
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   MOBILE: restore gaps between stacked Page Designer columns
   (scoped to Page Designer column rows only)
========================================================= */
@media (max-width: 520px){

  :where(#homePage,#standardPage)
    .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"])
    .conrow{
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important; /* adjust gap here */
  }

  :where(#homePage,#standardPage)
    .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"])
    .concol{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important; /* gap handles spacing */
  }

  /* Fallback if some sections don't use .conrow as expected */
  :where(#homePage,#standardPage)
    .contentrow:is([data-edit-class*="columns"],[data-edit-class^="colum"])
    .concol + .concol{
    margin-top: 22px !important;
  }
}











/* =========================================================
   CONTACT FORM — submit alignment
   Desktop: LEFT
   Mobile: CENTRE
========================================================= */

/* 1) Force the submit ROW to be left-aligned on desktop */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"]
  :is(.formcol1,.formcol11,.formcol12,.formbuttons,.dynformbuttons,.formsubmit){
  text-align: left !important;
  justify-content: flex-start !important; /* if it’s a flex wrapper */
}

/* 2) Force the actual button to sit left (even if parent tries to centre) */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"]
  :is(input[type="submit"], button[type="submit"]){
  float: left !important;   /* very reliable against centered wrappers */
  clear: both !important;
}

/* 3) Mobile: centre again */
@media (max-width: 520px){
  :where(#homePage,#standardPage)
    .contentrow[data-content-type="form"]
    div[id^="contact-form-"]
    :is(.formcol1,.formcol11,.formcol12,.formbuttons,.dynformbuttons,.formsubmit){
    text-align: center !important;
    justify-content: center !important;
  }

  :where(#homePage,#standardPage)
    .contentrow[data-content-type="form"]
    div[id^="contact-form-"]
    :is(input[type="submit"], button[type="submit"]){
    float: none !important;
    clear: none !important;
    display: inline-flex !important; /* keeps it “pill sized” */
  }
}
/* =========================================================
   CONTACT FORM — soften card background (less bright)
========================================================= */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"]{
  /* warmer + softer than bright white */
  background: linear-gradient(
      180deg,
      rgba(255,255,255,.66),
      rgba(250,242,235,.58)
    ) !important;

  border-color: rgba(28,26,24,.10) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.04) !important;
}

/* Keep fields readable (slightly brighter than the card) */
:where(#homePage,#standardPage)
  .contentrow[data-content-type="form"]
  div[id^="contact-form-"]
  :is(input[type="text"],input[type="email"],input[type="tel"],input[type="date"],select,textarea){
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(28,26,24,.12) !important;
}
/* FAQ: turn the two links into pill buttons */
:where(#homePage,#standardPage) details.sg-faq .sg-faq-actions{
  margin-top: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

:where(#homePage,#standardPage) details.sg-faq a.sg-faq-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 16px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink, #1C1A18) !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;

  text-decoration: none !important;
  white-space: nowrap !important;
}

:where(#homePage,#standardPage) details.sg-faq a.sg-faq-btn-primary{
  background: linear-gradient(180deg, #1C1A18, #0F0E0D) !important;
  border-color: #1C1A18 !important;
  color: var(--sg-cream, #FAF2EB) !important;
}

:where(#homePage,#standardPage) details.sg-faq a.sg-faq-btn-outline:hover{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(28,26,24,.26) !important;
}

@media (max-width: 520px){
  :where(#homePage,#standardPage) details.sg-faq .sg-faq-actions a{
    width: 100% !important;
  }
}
/* =========================================================
   FAQ — full width band, then centered to 1100px
   (works even when FAQ sits inside a narrow Page Designer column)
========================================================= */

#pageContentContainer :where(#homePage,#standardPage) .sg-faq-wide{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* break out of parent width */
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#pageContentContainer :where(#homePage,#standardPage) .sg-faq-inner{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-left: var(--sg-indent, 0px) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure each FAQ card fills the inner band */
#pageContentContainer :where(#homePage,#standardPage) .sg-faq-inner details.sg-faq{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile: no indent */
@media (max-width: 520px){
  #pageContentContainer :where(#homePage,#standardPage) .sg-faq-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* =========================================================
   ABOUT button — match standard CTA text (slightly smaller + bolder)
========================================================= */
#pageContentContainer :where(#homePage,#standardPage) a.sg-about-btn{
  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 13px !important;     /* slightly smaller */
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}
/* =========================================================
   Hide the MENU label next to the hamburger (mobile only)
========================================================= */
@media (max-width: 900px){

  /* Common “menu label” elements */
  .menu-label,
  .menu-text,
  .nav-label,
  .hamburger-label,
  .mobile-menu-label,
  .toggle-label,
  .menutext{
    display: none !important;
  }

  /* If the theme adds MENU via a pseudo-element */
  .menu-toggle::after,
  .nav-toggle::after,
  .hamburger::after,
  .navbar-toggle::after{
    content: "" !important;
    display: none !important;
  }
}
/* =========================================================
   Studio Galea — Featured Weddings (no div wrapper needed)
========================================================= */
#pageContentContainer :where(#homePage,#standardPage){
  --sg-fw-max: 1100px;
  --sg-fw-gap: 26px; /* 18 tight ? 30 airy */
}

/* Tables reset + sizing */
#pageContentContainer :where(#homePage,#standardPage) table#sg-featured-weddings-grid,
#pageContentContainer :where(#homePage,#standardPage) table#sg-fw-more{
  width: 100% !important;
  max-width: var(--sg-fw-max) !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
#pageContentContainer :where(#homePage,#standardPage) table#sg-featured-weddings-grid td,
#pageContentContainer :where(#homePage,#standardPage) table#sg-fw-more td{
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Flex grid (tbody/tr) */
#pageContentContainer :where(#homePage,#standardPage) table#sg-featured-weddings-grid tbody,
#pageContentContainer :where(#homePage,#standardPage) table#sg-featured-weddings-grid tr,
#pageContentContainer :where(#homePage,#standardPage) table#sg-fw-more tbody,
#pageContentContainer :where(#homePage,#standardPage) table#sg-fw-more tr{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--sg-fw-gap) !important;
  width: 100% !important;
}

/* 3-up feel on desktop */
#pageContentContainer :where(#homePage,#standardPage) table#sg-featured-weddings-grid td,
#pageContentContainer :where(#homePage,#standardPage) table#sg-fw-more td{
  flex: 1 1 calc((100% - (2 * var(--sg-fw-gap))) / 3) !important;
  min-width: 260px !important;
  max-width: 100% !important;
}

/* Card */
#pageContentContainer :where(#homePage,#standardPage) a.sg-fw-card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;

  background: var(--sg-card-bg, rgba(255,255,255,.72)) !important;
  border: 1px solid var(--sg-line, #E9E4DD) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.06) !important;

  text-decoration: none !important;
  color: inherit !important;
}

/* Image */
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-photo{
  display: block !important;
  height: 220px !important;
  background: rgba(0,0,0,.03) !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Body */
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-meta{
  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-size: 12.5px !important;
  color: rgba(28,26,24,.55) !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-title{
  font-family: var(--sg-serif, "Libre Baskerville", Georgia, serif) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  color: var(--sg-ink, #1C1A18) !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-blurb{
  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  color: rgba(28,26,24,.62) !important;
  line-height: 1.6 !important;
}

/* Tags (fix run-on) */
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 2px !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-tag{
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  background: rgba(255,255,255,.55) !important;
  color: rgba(28,26,24,.70) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Card button */
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-btn{
  margin-top: auto !important;
  align-self: flex-start !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 18px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink, #1C1A18) !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Toggle button row spacing */
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-bottom{
  margin: 22px 0 22px 0 !important; /* space top + bottom */
  padding: 0 !important;

  display: flex !important;
  justify-content: flex-end !important; /* right desktop */
  align-items: center !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-fw-secondary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px 18px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(28,26,24,.14) !important;
  color: var(--sg-ink, #1C1A18) !important;

  font-family: var(--sg-sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

/* Mobile tweaks */
@media (max-width: 520px){
  #pageContentContainer :where(#homePage,#standardPage) .sg-fw-bottom{
    justify-content: center !important;
  }
  #pageContentContainer :where(#homePage,#standardPage) .sg-fw-photo{
    height: 200px !important;
  }
}
/* =========================================================
   LOVE NOTES — pull "Read More Reviews" up tight like Featured Weddings
========================================================= */
#pageContentContainer :where(#homePage,#standardPage) .sg-reviews-bottom{
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: flex-end !important;  /* right on desktop */
  align-items: center !important;

  margin-top: -24px !important;         /* <<< tweak: -12 to -34 */
  list-style: none !important;
}
#pageContentContainer :where(#homePage,#standardPage) .sg-reviews-bottom::marker{ content:"" !important; }

@media (max-width: 520px){
  #pageContentContainer :where(#homePage,#standardPage) .sg-reviews-bottom{
    justify-content: center !important;  /* center on mobile */
    margin-top: -16px !important;        /* slightly less pull-up */
  }
}
/* =========================================================
   SG — columphotos cards: full-bleed image + square bottom corners
   (matches Featured Weddings card behaviour)
========================================================= */

/* 1) Make the card full-bleed (no padding on the outer card) */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty{
  padding: 0 !important; /* overrides your current 22px */
}

/* 2) Full-bleed photo: remove spacing + force it to the edges */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto{
  margin: 0 !important;                 /* no gap under image */
  overflow: hidden !important;

  /* TOP corners rounded, BOTTOM corners square */
  border-radius: var(--sg-card-radius) var(--sg-card-radius) 0 0 !important;
}

/* 3) Ensure the image itself can’t add rounding */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty img.pf-image,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty img.pf-image{
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 4) Add padding back ONLY to the text area */
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty .txt,
#homePage .contentrow[data-edit-class^="columphotos"] .concol.srty .textpadding,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty .txt,
#standardPage .contentrow[data-edit-class^="columphotos"] .concol.srty .textpadding{
  padding: 18px 22px 22px !important;
  box-sizing: border-box !important;
}
/* =========================================================
   SG — Tighten spacing inside photo cards (without locking padding)
========================================================= */

/* Keep: removes top/bottom margin bloat inside the text */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  :is(.txt, .textpadding, .txtpadding) > :first-child{
  margin-top: 0 !important;
}
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  :is(.txt, .textpadding, .txtpadding) > :last-child{
  margin-bottom: 0 !important;
}

/* Keep: removes the “photo ? text” gap (margin/padding under photo wrappers) */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto{
  margin-bottom: 0 !important;
}
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  :is(.eib, .ratiophoto, .photocontainerbg){
  padding-bottom: 0 !important;
}
/* =========================================================
   SG — columphotos cards: full-bleed image + square bottom photo
   AND let Page Designer control text padding
========================================================= */

#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty{
  /* card stays rounded */
  border-radius: var(--sg-card-radius, 22px) !important;
  overflow: hidden !important;

  /* IMPORTANT: remove outer padding so photo can hit edges */
  padding: 0 !important;
}

/* kill any “gap” under the photo wrapper */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto{
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important; /* stop rounding bottom corners */
  overflow: hidden !important;
}

/* the actual Sytist photo wrapper you found */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  .photocontainerbg.photodiv.photofit{
  border-radius: 0 !important;

  /* rounded TOP only, square bottom */
  -webkit-clip-path: inset(0 0 0 0 round var(--sg-card-radius,22px) var(--sg-card-radius,22px) 0 0);
  clip-path: inset(0 0 0 0 round var(--sg-card-radius,22px) var(--sg-card-radius,22px) 0 0);

  overflow: hidden !important;
}

/* ensure the image itself never re-adds rounding */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty img.pf-image{
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* tidy default text block margins (without forcing padding) */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  :is(.txt, .textpadding, .txtpadding) > :first-child{
  margin-top: 0 !important;
}
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  :is(.txt, .textpadding, .txtpadding) > :last-child{
  margin-bottom: 0 !important;
}
/* =========================================================
   SG — FIX: restore Sytist ratio-photo height (photos disappeared)
========================================================= */

/* Never kill the ratio box padding — it creates the photo height */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty .ratiophoto{
  padding: revert !important;       /* restores Sytist’s ratio padding */
  margin: 0 !important;             /* removes the gap below the photo */
  border-radius: 0 !important;      /* stop bottom rounding if any */
  overflow: hidden !important;
}

/* Keep the “square bottom” photo masking on the actual photo wrapper */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty
  .photocontainerbg.photodiv.photofit{
  border-radius: 0 !important;
  -webkit-clip-path: inset(0 0 0 0 round var(--sg-card-radius,22px) var(--sg-card-radius,22px) 0 0);
  clip-path: inset(0 0 0 0 round var(--sg-card-radius,22px) var(--sg-card-radius,22px) 0 0);
  overflow: hidden !important;
}

/* Images: fill nicely */
#pageContentContainer :where(#homePage,#standardPage)
  .contentrow[data-edit-class^="columphotos"] .concol.srty img.pf-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}