/* ==========================================================================
   SIRRONA METHODOLOGY — MASTER STYLESHEET
   Southern Outback Structures · sos-hello-child
   Single source of all custom CSS. Ported from Phase 2 WPCode snippets 01-04.
   Typekit (bto3riu) is enqueued in functions.php, not @import-ed here.
   ========================================================================== */

/* ====== 01 · TOKENS & DOM BREAKERS ====== */
:root {
    --brand-black:   #000000;
    --brand-green:   #9AC943;
    --charcoal:      #1A1B1E;
    --alabaster:     #F4F5F4;
    --white:         #FFFFFF;
    --font-display: 'futura-pt', 'Futura PT', Futura, 'Century Gothic', sans-serif;
    --font-body:    'acumin-pro', 'Acumin Pro', Helvetica, Arial, sans-serif;
    --container-max: 1280px;
    --gutter:        clamp(24px, 5vw, 64px);
    --radius-sharp:  0px;
    --radius-soft:   2px;
    --ease:          cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:        250ms;
    --t-base:        450ms;
    --t-slow:        850ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Legacy section/column breakers retained. Container (.e-con) equivalents to be
   verified against live DOM when sections are built (Elementor 4.x). */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--container-max) !important; }
.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0px !important; }
.elementor-widget { margin-bottom: 0px !important; }
img, video, iframe, input, select, textarea, .elementor-widget-wrap, .bento-cell { border-radius: var(--radius-soft) !important; }

/* ====== 02 · TYPOGRAPHY & BASE ====== */
body {
    background-color: var(--brand-black);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: inherit;
    margin-bottom: 0.75em;
}

h1, .sos-sirrona-h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2, .sos-sirrona-h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h3, .sos-sirrona-h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
h4, .sos-sirrona-h4 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }

p, .sos-sirrona-body {
    font-family: var(--font-body);
    line-height: 1.8;
    max-width: 68ch;
    margin-bottom: 1.5em;
    color: rgba(255, 255, 255, 0.85);
}
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: opacity var(--t-fast) var(--ease); }
a:hover { opacity: 0.8; }
ul, ol { list-style: none; }

.sos-sirrona-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(0.625rem, 0.9vw, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.sos-sirrona-eyebrow.green    { color: var(--brand-green); }
.sos-sirrona-eyebrow.charcoal { color: var(--charcoal); }
.sos-sirrona-eyebrow.white    { color: rgba(255, 255, 255, 0.7); }

/* ====== 03 · STRUCTURAL CLASSES ====== */
.sos-sirrona-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.sos-sirrona-section-pad { padding: 128px 0; }
.sos-sirrona-section-pad-sm { padding: 64px 0; }

.sos-sirrona-section-rule {
    display: block;
    width: 50px;
    height: 2px;
    background: var(--brand-green);
    margin-bottom: 32px;
    border: 0;
}

.sos-sirrona-section-head {
    max-width: 900px;
    margin: 0 auto 96px;
    text-align: center;
}
.sos-sirrona-section-head .sos-sirrona-section-rule { margin-left: auto; margin-right: auto; }

.bg-black { background: var(--brand-black); color: var(--white); }
.bg-charcoal { background: var(--charcoal); color: var(--white); }
.bg-alabaster { background: var(--alabaster); color: var(--charcoal); }
.bg-white { background: var(--white); color: var(--charcoal); }

.bg-alabaster h1, .bg-alabaster h2, .bg-alabaster h3, .bg-alabaster h4,
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4 { color: var(--charcoal); }
.bg-alabaster p, .bg-white p { color: rgba(10, 10, 10, 0.85); }

.text-center { text-align: center; }
.hide-desktop { display: none; }

@media (max-width: 1024px) {
    .hide-mobile { display: none !important; }
    .hide-desktop { display: block; }
}
@media (max-width: 768px) {
    .sos-sirrona-section-pad { padding: 96px 0; }
    .sos-sirrona-section-pad-sm { padding: 48px 0; }
}

/* ====== 04 · UI COMPONENTS & HEADER ====== */
.sos-sirrona-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display, "futura-pt", sans-serif); font-size: clamp(0.625rem, 0.9vw, 0.6875rem);
    font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: var(--radius-sharp, 0px); border: 2px solid transparent;
    padding: 15px 32px; cursor: pointer; white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sos-sirrona-btn .btn-arrow { transition: transform 0.3s ease; }
.sos-sirrona-btn:hover .btn-arrow { transform: translateX(4px); }
.sos-sirrona-btn-primary { background: #9AC943; border-color: #9AC943; color: #1A1B1E; }
.sos-sirrona-btn-primary:hover { background: #1A1B1E; border-color: #1A1B1E; color: #F4F5F4; }
.sos-sirrona-btn-ghost { background: transparent; border-color: #9AC943; color: #F4F5F4; }
.sos-sirrona-btn-ghost:hover { background: #9AC943; color: #1A1B1E; }

/* Elementor containing-block trap resets (header). Theme Builder headers still
   get wrapped in containers that can create transform/contain contexts and break
   position:fixed. These resets neutralize that. */
[data-elementor-type="header"],
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .e-con-inner,
[data-elementor-type="header"] .elementor-container,
[data-elementor-type="header"] .elementor-column,
[data-elementor-type="header"] .elementor-column > .elementor-element-populated,
[data-elementor-type="header"] .elementor-widget-wrap,
[data-elementor-type="header"] .elementor-widget,
[data-elementor-type="header"] .elementor-widget-html,
[data-elementor-type="header"] .elementor-widget-container,
.elementor-element.sos-header-shell,
.elementor-element.sos-header-shell .e-con-inner,
.elementor-element.sos-header-shell .elementor-widget,
.elementor-element.sos-header-shell .elementor-widget-html,
.elementor-element.sos-header-shell .elementor-widget-container {
    position: static !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    contain: none !important;
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

html, body { transform: none !important; filter: none !important; perspective: none !important; }
body.sos-mobile-nav-open { overflow: hidden !important; }
body > #mobile-nav { position: fixed !important; z-index: 99999 !important; }

#topbar {
    position: relative !important;
    z-index: 100 !important;
    background-color: #1A1B1E !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    height: 40px !important;
    display: block !important;
    width: 100% !important;
}

.topbar-inner {
    display: flex !important;
    width: 100% !important;
    max-width: 1400px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 clamp(24px, 5vw, 64px) !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.topbar-contact {
    display: flex; gap: 20px; font-family: "futura-pt", sans-serif;
    font-size: 11px; letter-spacing: 0.15em; font-weight: 600; text-transform: uppercase;
}
.topbar-contact a { color: rgba(255,255,255,0.7); transition: color 0.3s; }
.topbar-contact a:hover { color: #9AC943; }

.topbar-social { display: flex; gap: 12px; align-items: center; }
.topbar-social a { color: rgba(255,255,255,0.5); transition: color 0.3s; display: inline-flex; }
.topbar-social a:hover { color: #9AC943; }

#site-header {
    position: absolute !important;
    top: 40px !important; left: 0 !important; width: 100% !important;
    background: transparent !important; z-index: 99 !important;
}

.header-inner {
    display: flex !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px clamp(24px, 5vw, 64px) !important;
}

#site-header.scrolled {
    position: fixed !important; top: 0 !important; background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(154, 201, 67, 0.2) !important; animation: slideDown 0.4s ease forwards !important;
}

@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.header-logo { display: inline-flex !important; max-width: 220px !important; width: 220px !important; flex-shrink: 0 !important; }
.header-logo img { width: 100% !important; height: auto !important; display: block !important; }

.header-nav { display: flex; align-items: center; }
.sos-nav-list { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.sos-nav-list > li { position: relative; }
.sos-nav-list a { font-family: "futura-pt", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); padding: 10px 0; transition: color 0.3s; }
.sos-nav-list a:hover { color: #9AC943; }

.sos-nav-list .sub-menu { position: absolute; top: 100%; left: -20px; background: #1A1B1E; min-width: 200px; padding: 15px 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; border-top: 3px solid #9AC943; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.sos-nav-list > li:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sos-nav-list .sub-menu a { padding: 10px 20px; display: block; }
.sos-nav-list .sub-menu a:hover { background: rgba(255,255,255,0.05); }

.hamburger { display: none !important; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 10px; }
.ham-line { width: 30px; height: 2px; background: #F4F5F4; transition: 0.3s; display: block; }

#mobile-nav {
    position: fixed !important; top: 0 !important; right: -100% !important;
    width: 100vw !important; height: 100vh !important; background-color: #1A1B1E !important;
    z-index: 999999 !important; transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
    display: flex !important; flex-direction: column !important; padding: 40px clamp(24px, 5vw, 64px) !important;
    visibility: visible !important;
}

#mobile-nav.open { right: 0 !important; }
/* NOTE: mobile-nav-bg image path is a placeholder from the prior build and will be
   reconciled after image migration (Prompt 3). */
.mobile-nav-bg { position: absolute; inset: 0; background: radial-gradient(130% 90% at 85% 8%, rgba(154,201,67,0.10), transparent 55%), #1A1B1E; opacity: 1; z-index: -1; }
.mobile-nav-close { position: absolute; top: 30px; right: 30px; background: none; border: none; cursor: pointer; z-index: 2; padding: 10px; }
.mobile-nav-logo { width: 180px; margin-bottom: 40px; display: block; z-index: 2; position: relative; }
.mobile-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; z-index: 2; position: relative; }
.mobile-nav-list a { font-family: "futura-pt", sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; color: #F4F5F4; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.mobile-nav-list .sub-menu { list-style: none; padding-left: 20px; display: none; margin-top: 15px; }
.mobile-nav-list .sub-menu.open { display: flex; flex-direction: column; gap: 15px; }
.mobile-nav-list .sub-menu a { font-size: 16px; color: rgba(255,255,255,0.7); border: none; padding: 0; }
.mobile-nav-footer { margin-top: auto; z-index: 2; position: relative; display: flex; flex-direction: column; gap: 10px; }
.mobile-nav-footer .phone { font-family: "futura-pt", sans-serif; font-size: 28px; font-weight: 700; color: #9AC943; }
.mobile-nav-footer .email { font-family: sans-serif; font-size: 14px; color: #9AC943; text-transform: lowercase; }

@media (max-width: 1024px) {
    #topbar { display: none !important; }
    .header-nav { display: none !important; }
    .header-cta { display: none !important; }
    .hamburger { display: flex !important; }
    #site-header { position: fixed !important; top: 0 !important; background: #1A1B1E !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
    .header-inner { padding: 20px 24px !important; }
    .header-logo { max-width: 180px !important; width: 180px !important; }
}

/* ====== 05 · FOOTER ====== */
#footer { background: var(--brand-black); color: var(--white); padding-top: 96px; }
.footer-grid {
    width: 100%; max-width: var(--container-max); margin: 0 auto;
    padding: 0 var(--gutter) 64px;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 40ch; margin-top: 4px; }
.footer-brand img { display: block; }
.footer-col-title {
    display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-green); margin-bottom: 20px;
}
.footer-list li { margin-bottom: 12px; }
.footer-list li, .footer-list a { font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color 0.3s; }
.footer-list a:hover { color: var(--brand-green); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom-inner {
    width: 100%; max-width: var(--container-max); margin: 0 auto;
    padding: 28px var(--gutter); display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: space-between; align-items: center;
}
.footer-copyright, .footer-credit { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin: 0; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 0.8rem; color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-legal a:hover { color: var(--brand-green); }
.footer-credit a { color: rgba(255,255,255,0.55); }
.footer-credit a:hover { color: var(--brand-green); }
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ====== 06 · HERO (native container bg-slideshow + classed widgets) ====== */
/* The container itself is the hero. Elementor renders bg slideshow slides as
   .elementor-background-slideshow__slide__image inside .elementor-background-slideshow.
   We drive Ken Burns on those via JS (sirrona.js initHero), exact concept motion. */
.sos-hero-con {
    position: relative;
    min-height: max(940px, 100vh);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.sos-hero-con .elementor-background-slideshow,
.sos-hero-con .elementor-background-slideshow__slide,
.sos-hero-con .elementor-background-slideshow__slide__image {
    position: absolute; inset: 0; width: 100%; height: 100%;
}
.sos-hero-con .elementor-background-slideshow__slide__image {
    background-size: cover !important;
    background-position: center !important;
    will-change: transform;
}
/* OUR JS drives slide visibility: Elementor's swiper-fade leaves the active slide
   at inline opacity:0, so we override with !important and toggle .sos-slide-on. */
/* !important on the transition too — Elementor's Swiper-fade writes an inline
   transition-duration:0ms on each slide, which would turn our crossfade into a hard
   cut. Forcing it here keeps the 1.2s opacity crossfade we drive via .sos-slide-on. */
.sos-hero-con .elementor-background-slideshow__slide { opacity: 0 !important; transition-property: opacity !important; transition-duration: 1.2s !important; transition-timing-function: var(--ease); }
.sos-hero-con .elementor-background-slideshow__slide.sos-slide-on { opacity: 1 !important; }
/* JS adds .sos-kb-active to the visible slide image for the pan-zoom */
.sos-hero-con .elementor-background-slideshow__slide__image.sos-kb-active {
    animation: sosKenBurns 7400ms linear forwards;
}
@keyframes sosKenBurns {
    from { transform: scale(1.0) translate(0,0); }
    to   { transform: scale(1.12) translate(-1.5%,-1.5%); }
}
/* content lives in an inner BOXED container (.sos-hero-content) — a full-width
   container emits no .e-con-inner, so content must be nested to get a max-width
   wrapper and to sit above the overlays (z-index 5 > overlay z-index 2). */
.sos-hero-content { position: relative; z-index: 5; width: 100%; }
.sos-hero-content > .e-con-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter) clamp(80px,12vh,160px); align-items: flex-start; }
/* overlays via pseudo-elements on the hero container (darken the slides, not content) */
/* Scrim: PROTECT the lower-left content corner + a bottom band so white text stays
   legible over bright slides, without muddying the whole photo. ::before is a soft
   lower-left pool; ::after is the bottom content scrim plus a faint top vignette so
   the header/nav stays readable too. The center-right of the image breathes. */
.sos-hero-con::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 130% at 16% 92%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.30) 34%, transparent 60%); }
.sos-hero-con::after  { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 24%, transparent 52%),
    linear-gradient(to bottom, rgba(0,0,0,0.34) 0%, transparent 18%); }

/* classed native widgets */
.sos-hero-eyebrow .elementor-heading-title { color: var(--brand-green) !important; font-family: var(--font-display); font-size: clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1.5rem; }
.sos-hero-h1 .elementor-heading-title { font-family: var(--font-display); font-weight:700; text-transform:uppercase; line-height:0.95; letter-spacing:-0.02em; font-size:clamp(2.75rem,7vw,5.5rem); color:var(--white) !important; margin:0 0 1.5rem; }
.sos-hero-rule { width:60px; height:2px; background:var(--brand-green); margin:0 0 1.75rem; }
.sos-hero-subhead .elementor-widget-container { max-width:56ch; color:rgba(255,255,255,0.9); font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.7; margin:0 0 2.5rem; }
.sos-hero-subhead p { color: rgba(255,255,255,0.9) !important; margin:0; }
.sos-hero-ctas { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.sos-hero-ctas .elementor-button { border-radius:0 !important; font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:15px 32px; border:2px solid transparent; transition:all .3s ease; }
.sos-hero-ctas .sos-cta-primary .elementor-button { background:var(--brand-green); border-color:var(--brand-green); color:var(--charcoal); }
.sos-hero-ctas .sos-cta-primary .elementor-button:hover { background:var(--charcoal); border-color:var(--charcoal); color:var(--alabaster); }
.sos-hero-ctas .sos-cta-ghost .elementor-button { background:transparent; border-color:var(--brand-green); color:var(--alabaster); }
.sos-hero-ctas .sos-cta-ghost .elementor-button:hover { background:var(--brand-green); color:var(--charcoal); }
.sos-hero-seal { display:flex; align-items:center; gap:12px; margin-top:2.5rem; opacity:0.9; }
.sos-hero-seal img { max-width:54px; height:auto; }
.sos-hero-seal .sos-hero-seal-label { font-family:var(--font-display); font-size:0.625rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
/* entrance reveal: JS adds .sos-hero-in to container after load */
.sos-hero-con .sos-hero-anim { opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.sos-hero-con.sos-hero-in .sos-hero-anim { opacity:1; transform:translateY(0); }
.sos-hero-con.sos-hero-in .sos-hero-anim.d1 { transition-delay:.15s; }
.sos-hero-con.sos-hero-in .sos-hero-anim.d2 { transition-delay:.30s; }
.sos-hero-con.sos-hero-in .sos-hero-anim.d3 { transition-delay:.45s; }
.sos-hero-con.sos-hero-in .sos-hero-anim.d4 { transition-delay:.60s; }
.sos-hero-con.sos-hero-in .sos-hero-anim.d5 { transition-delay:.75s; }
/* progress bars */
.sos-slide-progress { position:absolute; bottom:clamp(40px,6vh,72px); right:var(--gutter); z-index:6; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:46vw; }
.sos-slide-progress .sos-progress-line { width:22px; height:2px; background:rgba(255,255,255,0.22); overflow:hidden; }
/* JS (initHero) OWNS the fill: it sets transform + animation-duration === HOLD.
   Styled unconditionally (not only under .active) so already-played bars can sit
   full at scaleX(1) while upcoming ones sit empty at scaleX(0). */
.sos-slide-progress .sos-progress-line-fill { display:block; width:100%; height:100%; background:var(--brand-green); transform-origin:left; transform:scaleX(0); }
@keyframes sosProgress { from{transform:scaleX(0);} to{transform:scaleX(1);} }
/* scroll cue (restored) */
.sos-scroll-cue { position:absolute; bottom:clamp(28px,4vh,40px); left:50%; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.8); }
.sos-scroll-cue .sos-scroll-label { font-family:var(--font-display); font-size:0.6rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; }
.sos-scroll-cue .sos-scroll-arrow { animation:sosBob 2s var(--ease) infinite; }
@keyframes sosBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
@media (max-width:768px){ .sos-slide-progress{display:none;} .sos-scroll-cue{display:none;} }

/* ====== 07 · CREDIBILITY BAR ====== */
.sos-cred-band { background: var(--alabaster); }
.sos-cred-band > .e-con-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 64px var(--gutter); /* polish: cred 72->64 (concept) */
    display: flex;
    /* Elementor 4.x containers default to flex-direction:column (via --flex-direction);
       force row so the 4 stat columns sit side-by-side. */
    flex-direction: row !important;
    align-items: center;
    gap: 32px;
    /* Elementor forces --flex-wrap:nowrap on .e-con-inner; override so columns wrap below desktop. */
    flex-wrap: wrap !important;
}
.sos-cred-col {
    /* !important beats Elementor's per-element ".elementor-element-credcN{width:25%}"
       (equal specificity but later in the cascade), which otherwise forces 288px cols
       that overflow + wrap. flex-basis:0 makes all four share the row equally. */
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    text-align: center;
    border-left: 1px solid rgba(26,27,30,0.12);
    padding: 8px 24px;
}
.sos-cred-col:first-child { border-left: 0; }
.sos-cred-col .sos-cred-num .elementor-heading-title {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--charcoal);
    line-height: 0.95;
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0;
    letter-spacing: -0.02em;
}
.sos-cred-col .sos-cred-num.is-text .elementor-heading-title { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.sos-cred-col .sos-cred-label .elementor-heading-title {
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: none;
    color: rgba(26,27,30,0.65);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-top: 12px;
    line-height: 1.4;
}
/* flex-shrink must be 0 below desktop, else all 4 columns shrink to fit one row
   instead of wrapping. basis 42% -> 2-up; basis 100% -> 1-up. */
@media (max-width: 1024px) {
    .sos-cred-band > .e-con-inner { gap: 24px; padding: 48px var(--gutter); }
    .sos-cred-col { flex: 1 0 42% !important; width: auto !important; border-left: 0; }
}
@media (max-width: 540px) {
    .sos-cred-col { flex: 1 0 100% !important; }
    .sos-cred-col + .sos-cred-col { border-top: 1px solid rgba(26,27,30,0.12); padding-top: 24px; }
}

/* ====== 08 · SERVICES BENTO ====== */
.sos-bento-section { background: var(--white); }
.sos-bento-head { max-width: 900px; margin: 0 auto; text-align: center; padding: 96px var(--gutter) 64px; } /* polish: top 112->96 */
.sos-bento-head .sos-bento-eyebrow .elementor-heading-title { color: var(--charcoal); font-family: var(--font-display); font-size: clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-bento-head .sos-bento-h2 .elementor-heading-title { color: var(--charcoal); font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1; letter-spacing:-0.02em; margin:0 0 1.25rem; }
.sos-bento-head .sos-bento-intro p { color: rgba(26,27,30,0.7); max-width:62ch; margin:0 auto; }
.sos-bento-rule { width:50px; height:2px; background:var(--brand-green); margin:0 auto 28px !important; }

.sos-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, minmax(260px, 38vh)) !important;
    gap: 12px !important;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--gutter) 112px;
}
.sos-bento-cell {
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    background-size: cover !important;
    background-position: center !important;
    cursor: pointer;
}
.sos-bento-cell::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 55%, transparent 100%); z-index:1; transition:background .4s var(--ease); }
.sos-bento-cell:hover::after { background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.1) 100%); }
.sos-bento-cell-1 { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; }
.sos-bento-cell-2 { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
.sos-bento-cell-3 { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
.sos-bento-cell-4 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
.sos-bento-cell-5 { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }
.sos-bento-cell > .e-con-inner { position:relative; z-index:2; width:100%; padding:32px !important; }
.sos-bento-cell .sos-bento-cell-eyebrow .elementor-heading-title { color: var(--brand-green); font-family:var(--font-display); font-size:0.625rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; margin:0 0 0.5rem; }
.sos-bento-cell .sos-bento-cell-title .elementor-heading-title { color: var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,1.6vw,1.5rem); line-height:1.05; letter-spacing:-0.01em; margin:0 0 0.75rem; }
.sos-bento-cell .sos-bento-arrow .elementor-heading-title { color: rgba(255,255,255,0.85); font-family:var(--font-display); font-size:0.6875rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin:0; transition:color .3s; }
.sos-bento-cell:hover .sos-bento-arrow .elementor-heading-title { color: var(--brand-green); }
@media (max-width: 1024px) {
    .sos-bento-grid { grid-template-columns: repeat(2,1fr) !important; grid-template-rows:auto !important; }
    .sos-bento-cell-1 { grid-column:1/3 !important; grid-row:auto !important; min-height:340px !important; }
    .sos-bento-cell-2,.sos-bento-cell-3,.sos-bento-cell-4,.sos-bento-cell-5 { grid-column:auto !important; grid-row:auto !important; min-height:280px !important; }
}
@media (max-width: 600px) {
    .sos-bento-grid { grid-template-columns:1fr !important; }
    .sos-bento-cell { grid-column:1/2 !important; min-height:260px !important; }
}

/* ====== 09 · COMMERCE ====== */
.sos-commerce-section { background: var(--charcoal); }
.sos-commerce-head { max-width:900px; margin:0 auto; text-align:center; padding:96px var(--gutter) 56px; } /* polish: top 112->96 */
.sos-commerce-head .sos-commerce-eyebrow .elementor-heading-title { color:var(--brand-green); font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-commerce-head .sos-commerce-h2 .elementor-heading-title { color:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1; margin:0; letter-spacing:-0.02em; }
.sos-commerce-rule { width:50px; height:2px; background:var(--brand-green); margin:0 auto 28px !important; }
.sos-commerce-grid { display:grid !important; grid-template-columns:2fr 1fr 1fr !important; gap:12px !important; max-width:1480px; margin:0 auto; padding:0 var(--gutter) 112px; }
.sos-commerce-finance { background:var(--brand-green) !important; display:flex !important; flex-direction:column !important; justify-content:center !important; padding:48px !important; min-height:340px !important; }
.sos-commerce-finance .sos-fin-eyebrow .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-size:0.625rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; margin:0 0 .75rem; }
.sos-commerce-finance .sos-fin-title .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1; margin:0 0 1rem; }
.sos-commerce-finance .sos-fin-body p { color:rgba(26,27,30,0.82); max-width:46ch; margin:0 0 1.5rem; }
.sos-commerce-finance .elementor-button { border-radius:0 !important; background:var(--charcoal); color:var(--alabaster); font-family:var(--font-display); font-size:0.6875rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:15px 32px; border:2px solid var(--charcoal); transition:all .3s; }
.sos-commerce-finance .elementor-button:hover { background:transparent; color:var(--charcoal); }
.sos-commerce-card { position:relative !important; overflow:hidden !important; display:flex !important; align-items:flex-end !important; min-height:340px !important; background-size:cover !important; background-position:center !important; cursor:pointer; }
.sos-commerce-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); z-index:1; transition:background .4s var(--ease); }
.sos-commerce-card:hover::after { background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.1) 100%); }
.sos-commerce-card > .e-con-inner { position:relative; z-index:2; padding:32px !important; }
.sos-commerce-card .sos-card-eyebrow .elementor-heading-title { color:var(--brand-green); font-family:var(--font-display); font-size:0.625rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; margin:0 0 .5rem; }
.sos-commerce-card .sos-card-title .elementor-heading-title { color:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.05; margin:0 0 .75rem; }
.sos-commerce-card .sos-card-arrow .elementor-heading-title { color:rgba(255,255,255,0.85); font-family:var(--font-display); font-size:0.6875rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin:0; transition:color .3s; }
.sos-commerce-card:hover .sos-card-arrow .elementor-heading-title { color:var(--brand-green); }
@media (max-width:1024px){ .sos-commerce-grid{ grid-template-columns:1fr 1fr !important; } .sos-commerce-finance{ grid-column:1/3 !important; } }
@media (max-width:600px){ .sos-commerce-grid{ grid-template-columns:1fr !important; } .sos-commerce-finance{ grid-column:1/2 !important; } }

/* ====== 10 · ABOUT ====== */
.sos-about-section { background: var(--white); }
.sos-about-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 !important; max-width:1480px; margin:0 auto; align-items:stretch; }
.sos-about-media { position:relative !important; min-height:560px !important; overflow:hidden !important; background-size:cover !important; background-position:center !important; cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important; }
.sos-about-media::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.28); z-index:1; transition:background .4s; }
.sos-about-media:hover::after { background:rgba(0,0,0,0.42); }
.sos-about-play { position:relative; z-index:2; width:84px; height:84px; border-radius:50% !important; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background .35s; }
.sos-about-media:hover .sos-about-play { transform:scale(1.08); background:var(--brand-green); }
.sos-about-play svg { margin-left:5px; }
.sos-about-watch { position:absolute; bottom:32px; left:32px; z-index:2; font-family:var(--font-display); font-size:0.6875rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--white); }
.sos-about-text { background:var(--alabaster); padding:clamp(56px,7vw,96px) clamp(40px,5vw,80px) !important; display:flex !important; flex-direction:column !important; justify-content:center !important; }
.sos-about-text .sos-about-eyebrow .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-about-text .sos-about-h2 .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2rem,3.5vw,3rem); line-height:1; letter-spacing:-0.02em; margin:0 0 1.25rem; }
.sos-about-rule { width:50px; height:2px; background:var(--brand-green); margin:0 0 28px !important; }
.sos-about-text .sos-about-body p { color:rgba(26,27,30,0.78); margin:0 0 1.25rem; }
.sos-about-text .elementor-button { border-radius:0 !important; background:transparent; border:2px solid var(--charcoal); color:var(--charcoal); font-family:var(--font-display); font-size:0.6875rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:15px 32px; margin-top:1rem; transition:all .3s; }
.sos-about-text .elementor-button:hover { background:var(--charcoal); color:var(--alabaster); }
@media (max-width:1024px){ .sos-about-grid{ grid-template-columns:1fr !important; } .sos-about-media{ min-height:380px !important; } }

/* ====== 11 · GALLERY ====== */
.sos-gallery-section { background: var(--brand-black); }
.sos-gallery-head { max-width:900px; margin:0 auto; text-align:center; padding:96px var(--gutter) 56px; } /* polish: top 112->96 */
.sos-gallery-head .sos-gallery-eyebrow .elementor-heading-title { color:var(--brand-green); font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-gallery-head .sos-gallery-h2 .elementor-heading-title { color:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1; letter-spacing:-0.02em; margin:0 0 1.25rem; }
.sos-gallery-head .sos-gallery-intro p { color:rgba(255,255,255,0.7); max-width:60ch; margin:0 auto; }
.sos-gallery-rule { width:50px; height:2px; background:var(--brand-green); margin:0 auto 28px !important; }
.sos-gallery-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:10px !important; max-width:1480px; margin:0 auto; padding:0 var(--gutter) 80px; }
.sos-gallery-cell { position:relative !important; min-height:240px !important; overflow:hidden !important; background-size:cover !important; background-position:center !important; opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.sos-gallery-cell.revealed { opacity:1; transform:translateY(0); }
.sos-gallery-cell::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.1); transition:background .4s; }
.sos-gallery-cell:hover::after { background:rgba(0,0,0,0.35); }
.sos-gallery-cell img.sos-gallery-imgtag { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:1024px){ .sos-gallery-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:700px){ .sos-gallery-grid{ grid-template-columns:repeat(2,1fr) !important; } .sos-gallery-cell{ min-height:180px !important; } }

/* ====== 12 · TESTIMONIALS ====== */
.sos-testi-section { background: var(--alabaster); padding:96px 0 80px; } /* polish: 112/112 -> 96 top / 80 btm (concept) */
.sos-testi-head { max-width:900px; margin:0 auto 56px; text-align:center; padding:0 var(--gutter); }
.sos-testi-head .sos-testi-eyebrow .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-testi-head .sos-testi-h2 .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1; margin:0; letter-spacing:-0.02em; }
.sos-testi-rule { width:50px; height:2px; background:var(--brand-green); margin:0 auto 28px !important; }
.sos-testi-stage { max-width:1280px; margin:0 auto; padding:0 var(--gutter); position:relative; }
.sos-testi-group { display:none; grid-template-columns:repeat(3,1fr); gap:24px; }
.sos-testi-group.active { display:grid; animation:sosTestiFade .9s var(--ease); }
@keyframes sosTestiFade { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.sos-testi-card { background:var(--white); padding:40px 32px; border-top:3px solid var(--brand-green); display:flex; flex-direction:column; }
/* Target the inner text elements: heading widgets (header_size=p) render
   <p class="elementor-heading-title"> and the quote is a <p>, both of which the
   global `p{color:white}` (section 02) would otherwise color white on the white card. */
.sos-testi-stars { margin-bottom:18px; }
.sos-testi-stars .elementor-heading-title { color:var(--brand-green) !important; letter-spacing:3px; font-size:0.95rem; margin:0; }
.sos-testi-quote { margin:0 0 24px; flex:1; }
.sos-testi-quote p { color:rgba(26,27,30,0.86) !important; font-size:0.98rem; line-height:1.7; margin:0; max-width:none; }
.sos-testi-name .elementor-heading-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--charcoal) !important; font-size:0.95rem; margin:0; line-height:1.3; }
.sos-testi-loc { margin-top:2px; }
.sos-testi-loc .elementor-heading-title { color:rgba(26,27,30,0.55) !important; font-size:0.8rem; margin:0; font-family:var(--font-body); font-weight:400; text-transform:none; }
.sos-testi-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:40px; }
.sos-testi-nav { background:none; border:0; cursor:pointer; font-size:1.4rem; color:var(--charcoal); padding:4px 10px; line-height:1; transition:color .3s; }
.sos-testi-nav:hover { color:var(--brand-green); }
.sos-testi-dot { width:9px; height:9px; border-radius:50%; border:1px solid rgba(26,27,30,0.4); background:transparent; cursor:pointer; padding:0; transition:all .3s; }
.sos-testi-dot.active { background:var(--brand-green); border-color:var(--brand-green); }
@media (max-width:900px){ .sos-testi-group.active{ grid-template-columns:1fr; } .sos-testi-card:nth-child(n+2){ display:none; } }

/* ====== 13 · PROCESS ====== */
.sos-process-section { background: var(--brand-black); }
.sos-process-head { max-width:900px; margin:0 auto; text-align:center; padding:96px var(--gutter) 64px; } /* polish: top 112->96 */
.sos-process-head .sos-process-eyebrow .elementor-heading-title { color:rgba(255,255,255,0.7); font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-process-head .sos-process-h2 .elementor-heading-title { color:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1; letter-spacing:-0.02em; margin:0 0 1.25rem; }
.sos-process-head .sos-process-intro p { color:rgba(255,255,255,0.7); max-width:60ch; margin:0 auto; }
.sos-process-rule { width:50px; height:2px; background:var(--brand-green); margin:0 auto 28px !important; }
.sos-process-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:32px !important; max-width:1280px; margin:0 auto; padding:0 var(--gutter) 112px; }
.sos-process-step { padding:0 !important; }
.sos-process-step .sos-step-num .elementor-heading-title { color:var(--brand-green); font-family:var(--font-display); font-weight:700; font-size:clamp(2.5rem,4vw,3.6rem); line-height:1; margin:0 0 1rem; letter-spacing:-0.02em; }
.sos-process-step .sos-step-title .elementor-heading-title { color:var(--white); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.1; margin:0 0 0.75rem; }
.sos-process-step .sos-step-body p { color:rgba(255,255,255,0.7); font-size:0.95rem; line-height:1.65; margin:0; }
@media (max-width:1024px){ .sos-process-grid{ grid-template-columns:repeat(2,1fr) !important; gap:40px !important; } }
@media (max-width:600px){ .sos-process-grid{ grid-template-columns:1fr !important; } }

/* ====== 14 · LEARN TEASE ====== */
.sos-learn-section { background: var(--alabaster); }
.sos-learn-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:clamp(40px,6vw,96px) !important; max-width:1280px; margin:0 auto; padding:96px var(--gutter) 112px; align-items:center; } /* polish: top 112->96 (top only) */
.sos-learn-left .sos-learn-h2 .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2rem,3.5vw,3rem); line-height:1.02; letter-spacing:-0.02em; margin:0; }
.sos-learn-right .sos-learn-eyebrow .elementor-heading-title { color:var(--charcoal); font-family:var(--font-display); font-size:clamp(0.625rem,0.9vw,0.6875rem); font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-learn-right .sos-learn-body p { color:rgba(26,27,30,0.78); margin:0 0 1.25rem; }
.sos-learn-right .elementor-button { border-radius:0 !important; background:transparent; border:2px solid var(--charcoal); color:var(--charcoal); font-family:var(--font-display); font-size:0.6875rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:15px 32px; margin-top:0.5rem; transition:all .3s; }
.sos-learn-right .elementor-button:hover { background:var(--charcoal); color:var(--alabaster); }
@media (max-width:900px){ .sos-learn-grid{ grid-template-columns:1fr !important; gap:32px !important; } }

/* >>> SOS CONTACT 1B START */
/* CONTACT SECTION ---------------------------------------------------------- */
.sos-contact-section{
  position:relative;
  /* darkest pavilion candidate by measured luminance (mean 29.7) — evening string-lit pavilion, att id 123.
     Root-relative so it survives domain change on deploy (CSS files aren't touched by DB search-replace). */
  --sos-contact-bg:url('/wp-content/uploads/2026/06/custom-cedar-pavilion-tongue-groove-ceiling-string-lighting-outdoor-living-greenville.avif');
  padding:96px 0; /* polish: 150/150 -> 96/96 (concept; biggest outlier) */
  background-color:var(--brand-black);
  background-image:linear-gradient(rgba(10,11,14,.86),rgba(0,0,0,.92)), var(--sos-contact-bg, none);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* Boxed container: Elementor wraps children in .e-con-inner, so the grid lives there
   (mirrors .sos-cred-band > .e-con-inner). Putting grid on .sos-contact-grid would only
   see the single .e-con-inner as its item and stack the columns. */
.sos-contact-grid > .e-con-inner{
  max-width:var(--container-max); margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(48px,6vw,88px); align-items:start;
}
.sos-contact-info .sos-sirrona-eyebrow.white{color:rgba(255,255,255,.7);}
.sos-contact-h2{color:var(--white)!important; margin-bottom:24px;}
.sos-contact-info .sos-sirrona-section-rule{margin-bottom:28px;}
.sos-contact-lead p{color:rgba(255,255,255,.78); line-height:1.8; max-width:46ch; margin:0 0 32px;}
.sos-contact-detail{display:flex; flex-direction:column; gap:6px; margin:0 0 20px;}
.sos-contact-detail a{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; text-transform:uppercase; color:var(--white);}
.sos-contact-detail a:first-child{font-size:clamp(1.5rem,2.6vw,2rem); color:var(--brand-green);}
.sos-contact-detail a:last-child{font-size:1rem; font-family:var(--font-body); text-transform:lowercase; font-weight:400; color:var(--brand-green); letter-spacing:0;}
.sos-contact-area{color:rgba(255,255,255,.5)!important; font-size:.9rem; margin:0;}

/* FORM --------------------------------------------------------------------- */
.sos-contact-form .elementor-form-fields-wrapper{display:flex; flex-wrap:wrap; gap:18px;}
.sos-contact-form .elementor-field-group{margin:0!important; padding:0!important;}
.sos-contact-form .elementor-field-group.elementor-col-50{flex:0 0 calc(50% - 9px); max-width:calc(50% - 9px);}
.sos-contact-form .elementor-field-group.elementor-col-100{flex:0 0 100%; max-width:100%;}
.sos-contact-form .elementor-field-textual,
.sos-contact-form .elementor-field-group textarea,
.sos-contact-form .elementor-field-group select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--white);
  background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-soft); padding:16px 18px; line-height:1.4;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.sos-contact-form textarea{min-height:120px; resize:vertical;}
.sos-contact-form .elementor-field-textual::placeholder,
.sos-contact-form textarea::placeholder{color:rgba(255,255,255,.45);}
.sos-contact-form .elementor-select-wrapper{position:relative;}
.sos-contact-form .elementor-select-wrapper select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;}
.sos-contact-form .elementor-select-wrapper::after{
  content:""; position:absolute; right:18px; top:50%; width:8px; height:8px;
  border-right:2px solid rgba(255,255,255,.5); border-bottom:2px solid rgba(255,255,255,.5);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;}
.sos-contact-form select option{color:#1A1B1E;}
.sos-contact-form .elementor-field-textual:focus,
.sos-contact-form textarea:focus,
.sos-contact-form select:focus{outline:none; border-color:var(--brand-green); background:rgba(255,255,255,.08)!important;}
.sos-contact-form .elementor-field-label{display:none!important;}
.sos-contact-form .elementor-button{
  width:100%; justify-content:center; font-family:var(--font-display); font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; border:2px solid var(--brand-green); border-radius:0;
  background:var(--brand-green); color:var(--charcoal); padding:17px 32px; margin-top:4px; cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.sos-contact-form .elementor-button:hover{background:var(--charcoal); border-color:var(--charcoal); color:var(--alabaster);}
.sos-contact-form .elementor-message{font-family:var(--font-body); color:var(--white); margin-top:14px;}
.sos-contact-form .elementor-message.elementor-message-success{color:var(--brand-green);}

@media (max-width:900px){
  .sos-contact-grid > .e-con-inner{grid-template-columns:1fr; gap:48px;}
}
@media (max-width:520px){
  .sos-contact-form .elementor-field-group.elementor-col-50{flex:0 0 100%; max-width:100%;}
}
/* <<< SOS CONTACT 1B END */

/* >>> SOS INTERIOR HERO START */
/* INTERIOR HERO (saved template "Interior Hero") -------------------------- */
/* ~560px tall, full-bleed bg (set as Elementor background_image input, client-editable),
   dark gradient scrim, content in lower-third left-aligned, sharp corners, no shadow. */
/* Elementor containers default to flex-direction:column, so bottom-align is justify-content (main axis),
   NOT align-items (which is the horizontal cross-axis here). Force both for deterministic lower-third content. */
.sos-interior-hero{ position:relative; min-height:560px; display:flex; flex-direction:column !important;
  justify-content:flex-end !important; align-items:stretch; overflow:hidden; }
.sos-interior-hero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.2) 100%); }
.sos-interior-hero > .sos-interior-inner{ position:relative; z-index:2; width:100%;
  max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter) clamp(48px,7vh,88px); }
.sos-interior-eyebrow .elementor-heading-title{ color:var(--brand-green); font-family:var(--font-display);
  font-size:clamp(.625rem,.9vw,.6875rem); font-weight:700; letter-spacing:.25em; text-transform:uppercase; margin:0 0 1rem; }
.sos-interior-h1 .elementor-heading-title{ color:var(--white); font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:clamp(2.5rem,5.5vw,4.25rem); line-height:.98; letter-spacing:-.02em; margin:0; }
.sos-interior-crumb{ margin-top:1.25rem; }
.sos-interior-crumb, .sos-interior-crumb p{ font-family:var(--font-body); font-size:.8125rem; letter-spacing:.04em;
  color:rgba(255,255,255,.6); margin:0; }
.sos-interior-crumb a{ color:rgba(255,255,255,.85); }
.sos-interior-crumb a:hover{ color:var(--brand-green); }
/* sharp corners + no shadow override the global radius rule */
.sos-interior-hero, .sos-interior-hero *{ border-radius:0 !important; box-shadow:none !important; }
@media (max-width:768px){ .sos-interior-hero{ min-height:440px; } }
/* <<< SOS INTERIOR HERO END */

/* >>> SOS POLISH START */
/* Homepage polish pass — interior header + eyebrow contrast pills.
   Section-padding tweaks (Item 3) are edited in place in their own sections
   above (so the responsive media-query overrides stay intact); they are not
   duplicated here. This block is idempotent: re-applying replaces it wholesale. */

/* ITEM 1 · INTERIOR HEADER — solid black header on every non-home page.
   Home keeps its transparent overlay header (base #site-header rule, untouched).
   PASS 12.2 FIX: the prior `position:fixed; top:0` pinned the header to the very
   top, so the 114px logo started at y=20 — inside the 40px topbar zone — and the
   topbar (z:100 > header z:99) clipped "Southern". Interior now INHERITS the base
   position (absolute; top:40px, below the topbar) and only overrides the bg to
   solid black; the base `#site-header.scrolled` rule still handles sticky-on-scroll
   (this selector's bg #000 also wins there, keeping it solid when scrolled). */
body:not(.home) #site-header {
    background: #000 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ITEM 2 · EYEBROW CONTRAST PILLS — dark scrim pill behind eyebrows that sit
   over photography, so small uppercase text stays legible on the lightest frame.
   Sharp corners (2px, brand rule), semi-opaque dark bg, inline-block hugs the
   text. Existing eyebrow text color is left untouched (set elsewhere). Scoped to
   the three confirmed photo-backed eyebrows only — never the solid-bg section
   eyebrows (.sos-bento-eyebrow, commerce, about, gallery, testi, process, learn). */
.sos-bento-grid .sos-bento-cell-eyebrow .elementor-heading-title,
.sos-hero-content .sos-hero-eyebrow .elementor-heading-title,
.sos-contact-section .sos-sirrona-eyebrow.white .elementor-heading-title {
    display: inline-block;
    background: rgba(0,0,0,0.55);
    padding: 6px 12px;
    border-radius: 2px;
}
/* <<< SOS POLISH END */

/* >>> SOS FIX PASS START */
/* Homepage fix pass — match the approved concept
   (06-approved_concept/concept/index.html). Concept wins on every divergence.
   Pairs with sirrona.js (hero H1 line-breaks, cedar seal, marquee ticker,
   scroll-to-top). This block is idempotent: re-applying replaces it wholesale. */

/* ── ITEM 1+2 · HERO content lower-third + H1 three-line break ──────────────
   Concept #hero-content: justify-content:flex-end, padding-bottom clamp(80,13vh,150).
   Build .sos-hero-con is already flex-end; match the bottom rhythm exactly and
   force the H1 to wrap to "Built For / The Way / You Live." (max-width 14ch; the
   explicit <br>s are injected in JS). Concept hero-rule = 80px × 3px. */
.sos-hero-content > .e-con-inner { padding-bottom: clamp(80px, 13vh, 150px) !important; }
.sos-hero-h1 .elementor-heading-title { max-width: 14ch; line-height: 0.95; margin: 0 0 28px; }
.sos-hero-rule { width: 80px !important; height: 3px !important; margin: 0 0 28px !important; }

/* ── ITEM 4 · HERO eyebrow pill — bump opacity so green reads on bright slides.
   Concept uses rgba(0,0,0,.42)+blur; build pill at .55 wasn't reading → .65 + blur
   + concept padding (7px 16px). Overrides the SOS POLISH pill for the hero only. */
.sos-hero-content .sos-hero-eyebrow .elementor-heading-title {
    background: rgba(0,0,0,0.65) !important;
    padding: 7px 16px !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ── ITEM 8 · BENTO cell eyebrow pills — bump to .65 so the green reads on the
   bright "How-To Guide" sky cell. Overrides the SOS POLISH pill (.55) for cells. */
.sos-bento-grid .sos-bento-cell-eyebrow .elementor-heading-title {
    background: rgba(0,0,0,0.65) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ── ITEM 6 · Centered section-head eyebrows must be CENTERED (were left).
   Build heads are flex columns; the eyebrow heading-title carries a stray
   max-width (~449px) + zero auto-margins, so centered text rendered left-of-centre.
   Force full width + auto margins so the centered text actually centers. */
.sos-bento-head .sos-bento-eyebrow .elementor-heading-title,
.sos-commerce-head .sos-commerce-eyebrow .elementor-heading-title,
.sos-gallery-head .sos-gallery-eyebrow .elementor-heading-title,
.sos-process-head .sos-process-eyebrow .elementor-heading-title,
.sos-testi-head .sos-testi-eyebrow .elementor-heading-title {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* ── ITEM 7 · Green rule under centered heads is too long (renders full 772px).
   Concept .section-rule = 60px × 3px, centered. The Elementor divider separator
   defaults to width:100%; out-specify it to 60px centered and neutralize the
   widget's own full-width green bar. Centered heads only (about/contact rules
   stay left-aligned, as in concept). */
.sos-bento-rule, .sos-commerce-rule, .sos-gallery-rule, .sos-process-rule, .sos-testi-rule {
    background: transparent !important;
    height: auto !important;
}
.sos-bento-rule .elementor-divider, .sos-commerce-rule .elementor-divider,
.sos-gallery-rule .elementor-divider, .sos-process-rule .elementor-divider,
.sos-testi-rule .elementor-divider { justify-content: center !important; }
.sos-bento-rule .elementor-divider-separator, .sos-commerce-rule .elementor-divider-separator,
.sos-gallery-rule .elementor-divider-separator, .sos-process-rule .elementor-divider-separator,
.sos-testi-rule .elementor-divider-separator {
    width: 60px !important;
    margin: 0 auto !important;
    border-top: 3px solid var(--brand-green) !important;
}

/* ── ITEM 3 · HERO cedar certification seal (injected by JS into hero content).
   Matches concept .hero-cedar-seal: dark frosted pill, cedar mark + tiny label.
   Overrides the build's older plain .sos-hero-seal styling. */
.sos-hero-seal {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 10px 18px;
    background: rgba(0,0,0,0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 2px;
    align-self: flex-start;
    opacity: 1;
}
.sos-hero-seal img { height: 28px !important; width: auto !important; max-width: none !important; opacity: 0.82; display: block; }
.sos-hero-seal .sos-hero-seal-label {
    font-family: var(--font-display);
    font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0;
}

/* ── ITEM 5 · MARQUEE TICKER (injected by JS between credibility and bento).
   Matches concept .ticker-wrap / .ticker / .ticker-track. ════════════════════
   ┌─────────────────────────────────────────────────────────────────────────┐
   │ TICKER ON/OFF — this is the ONE place to flip it. Default = ON (`block`). │
   │ To hide the ticker, change `block` to `none` on the .sos-ticker-wrap line │
   │ below. (CSS-only — no flush needed.) A body class `sos-ticker-off` also   │
   │ hides it, for PHP/JS-driven toggling.                                     │
   └─────────────────────────────────────────────────────────────────────────┘ */
.sos-ticker-wrap {
    display: block;                 /* ← flip to `none` to turn the ticker OFF */
    width: 100%; overflow: hidden;
    background: var(--brand-black);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 14px 0;
}
body.sos-ticker-off .sos-ticker-wrap { display: none !important; }
.sos-ticker { display: flex; width: max-content; animation: sosTicker 38s linear infinite; }
.sos-ticker-track { display: flex; align-items: center; white-space: nowrap; }
.sos-ticker-track span {
    font-family: var(--font-display); font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.48); padding: 0 32px;
}
.sos-ticker-track .sos-ticker-dot {
    width: 4px; height: 4px; background: var(--brand-green);
    border-radius: 50%; padding: 0; flex-shrink: 0;
}
@keyframes sosTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sos-ticker { animation: none; } }

/* ── ITEM 9 · SCROLL-TO-TOP button (injected by JS, sitewide). Matches concept
   #stt-btn: fixed bottom-right, brand green, sharp 2px corners, appears on scroll. */
#sos-stt-btn {
    position: fixed; bottom: 28px; right: 28px; z-index: 150;
    width: 48px; height: 48px;
    background: var(--brand-green); color: var(--brand-black);
    border: none; border-radius: 2px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity 380ms ease, transform 220ms ease, background 220ms ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
#sos-stt-btn.visible { opacity: 1; pointer-events: auto; }
#sos-stt-btn:hover { background: var(--white); transform: translateY(-4px); }
/* <<< SOS FIX PASS END */

/* >>> SOS PASS2 START */
/* Homepage pass 2 — de-JS hero, editor visibility, commerce/gallery/process to
   concept. Pairs with real widgets now added to 270 _elementor_data (seal, ticker,
   gallery CTA, commerce imagery). Idempotent block. Concept = source of truth. */

/* ── ITEM 3 · Hero first slide paints at rest (editor + pre-JS). The custom
   slideshow only paints once sirrona.js adds .sos-slide-on; in the Elementor
   editor that JS never runs, so the hero read empty. Give .sos-hero-con a static
   fallback bg = slide 1; live, the active slideshow slide (opacity:1) covers it,
   so cycling is unaffected. */
.sos-hero-con {
    background-image: url('/wp-content/uploads/2026/06/cedar-pool-cabana-privacy-wall-greenville-sc.jpg');
    background-size: cover;
    background-position: center;
    background-color: var(--brand-black);
}

/* ── ITEM 1 · Cedar seal is now a real Image widget inside a .sos-hero-seal
   container (added to 270). Keep the concept frosted-pill look; the FIX-PASS
   .sos-hero-seal rules still apply. Ensure the Elementor image widget sizing
   matches (28px tall mark). */
.sos-hero-seal .elementor-widget-image { width: auto; }
.sos-hero-seal .elementor-widget-image img { height: 28px !important; width: auto !important; max-width: none !important; opacity: 0.82; }
.sos-hero-seal .elementor-image { line-height: 0; }

/* ── ITEM 2 · Ticker toggle note. The ticker is now a real Elementor element
   (.sos-ticker-wrap, HTML widget) between credibility and bento. Primary on/off
   is Elementor → Advanced → Responsive/visibility on that element. The CSS line
   below is a secondary kill-switch (flip block↔none) and body.sos-ticker-off
   still hides it. Styling/animation continue from the SOS FIX PASS block. */

/* ── ITEM 5 · Commerce "Start Your Build" → concept ───────────────────────────
   Finance card: green, ROW layout (content left ~55%, tilted PLCC card right),
   "Apply Now". */
.sos-commerce-finance {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px;
    border: 1px solid rgba(154,201,67,0.14);
}
.sos-commerce-finance:hover { border-color: var(--brand-green); }
.sos-fin-content { max-width: 55%; }
.sos-fin-img { max-width: 40%; flex-shrink: 0; }
.sos-fin-img .elementor-widget-container, .sos-fin-img .elementor-image { line-height: 0; }
.sos-fin-img img {
    width: 100%; border-radius: 4px;
    transform: rotate(-4deg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    transition: transform 600ms cubic-bezier(0.16,1,0.3,1);
}
.sos-commerce-finance:hover .sos-fin-img img { transform: rotate(0deg) scale(1.05); }
/* Method + brochure → WHITE cards with the financing graphic contained + light
   gradient content (concept .bento-cell--process/--brochure). Overrides the
   FIX-PASS/base dark-photo .sos-commerce-card treatment for these two. */
.sos-commerce-card {
    background-color: #fff !important;
    background-size: 82% !important;
    background-position: center 10% !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(0,0,0,0.06);
    transition: border-color 380ms;
}
.sos-commerce-card:hover { border-color: var(--brand-green); }
.sos-commerce-card::after {
    background: linear-gradient(to top, #ffffff 25%, rgba(255,255,255,0.95) 55%, rgba(255,255,255,0) 100%) !important;
}
.sos-commerce-card:hover::after {
    background: linear-gradient(to top, #ffffff 28%, rgba(255,255,255,0.96) 58%, rgba(255,255,255,0) 100%) !important;
}
.sos-commerce-card > .e-con-inner {
    background: linear-gradient(to top, #ffffff 25%, rgba(255,255,255,0.92) 60%, rgba(255,255,255,0) 100%);
    margin-top: 60px;
}
.sos-commerce-card .sos-card-eyebrow .elementor-heading-title { color: var(--charcoal) !important; }
.sos-commerce-card .sos-card-title .elementor-heading-title { color: var(--brand-black) !important; }
.sos-commerce-card .sos-card-arrow .elementor-heading-title { color: var(--brand-green) !important; opacity: 0.7; }
.sos-commerce-card:hover .sos-card-arrow .elementor-heading-title { opacity: 1; color: var(--brand-green) !important; }
@media (max-width: 1024px) {
    .sos-commerce-finance { flex-direction: column !important; text-align: center; }
    .sos-fin-content { max-width: 100%; margin-bottom: 24px; }
    .sos-fin-img { max-width: 200px; margin: 0 auto; }
}

/* ── ITEM 6 · Gallery "View the Full Portfolio" CTA (concept .gallery-cta),
   added as a real button widget after the grid. */
.sos-gallery-cta { text-align: center; padding: 0 var(--gutter) 96px; margin-top: 8px; }
.sos-gallery-cta .elementor-button {
    border-radius: 0 !important; background: transparent;
    border: 2px solid var(--brand-green); color: var(--alabaster);
    font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 32px;
    transition: all 0.3s ease;
}
.sos-gallery-cta .elementor-button:hover { background: var(--brand-green); color: var(--charcoal); }

/* ── ITEM 7 · Process → B&W cedar-ceiling bg (concept uses the cedar tongue-and-
   groove ceiling, grayscale, edge-to-edge as a section layer). Dark theme kept.
   NOTE (pass 3): grid is BOXED at concept --container (1280px) — pass 2 had
   widened it full, which was wrong; reverted here to match concept. */
.sos-process-section { position: relative; overflow: hidden; }
.sos-process-section::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url('/wp-content/uploads/2026/06/custom-cedar-outdoor-pavilion-exposed-beams-tongue-and-groove-ceiling-upstate-sc.avif');
    background-size: cover; background-position: center 30%;
    opacity: 0.16; filter: grayscale(100%) contrast(1.15);
}
.sos-process-section > * { position: relative; z-index: 1; }
.sos-process-grid { max-width: 1280px !important; }  /* pass 3: boxed to concept --container */

/* <<< SOS PASS2 END */

/* >>> SOS PASS3 START */
/* Homepage pass 3 — concept-match fixes. Concept = source of truth. Idempotent. */

/* ── ITEM 1 · Credibility band → DARK (concept #credibility: black bg, GREEN
   numbers, white/muted labels, green left-accent + subtle white dividers).
   Overrides the build's light alabaster treatment. */
.sos-cred-band { background: var(--brand-black) !important; }
.sos-cred-col {
    text-align: left !important;
    border-left: 3px solid var(--brand-green) !important;
    border-right: 1px solid rgba(255,255,255,0.10);
    padding: 8px 32px !important;
}
.sos-cred-col:last-child { border-right: 0; }
.sos-cred-col .sos-cred-num .elementor-heading-title { color: var(--brand-green) !important; }
.sos-cred-col .sos-cred-label .elementor-heading-title { color: rgba(255,255,255,0.72) !important; }
@media (max-width: 1024px) {
    .sos-cred-col { border-right: 0; }
}
@media (max-width: 540px) {
    .sos-cred-col + .sos-cred-col { border-top: 1px solid rgba(255,255,255,0.10); }
}

/* ── ITEM 3 · Commerce card content anchoring → BOTTOM-LEFT (per instruction).
   The content sub-containers were stretching to full card height, so the
   eyebrow/headline/CTA floated at the TOP. Push them to the bottom-left on all
   three cards (finance + method + brochure). */
.sos-commerce-card > .e-con-inner,
.sos-commerce-finance .sos-fin-content {
    display: flex !important; flex-direction: column !important;
    justify-content: flex-end !important; align-items: flex-start !important;
}

/* ── ITEM 4 · About → true full-width 50/50 split, edge to edge (concept
   .about-grid has no max-width). Build boxed it at 1480; remove the cap. */
.sos-about-grid { max-width: none !important; margin: 0 !important; }
.sos-about-media { min-height: 680px !important; }
@media (max-width: 1024px) { .sos-about-media { min-height: 420px !important; } }

/* ── ITEM 2 · Hero visible in the Elementor EDITOR. Root cause: the hero uses a
   custom slideshow whose slides are forced `opacity:0 !important` by the build,
   and ONLY sirrona.js reveals one (.sos-slide-on). The editor never runs that JS,
   so every slide stays transparent and the hero reads empty. Pass-2's container
   fallback bg was covered/overridden inside the editor preview. Fix: scope to
   Elementor's editor body class and reveal the FIRST slide (image too) at rest —
   this NEVER affects the live front-end (no .elementor-editor-active there), so
   the live slideshow keeps cycling untouched. */
.elementor-editor-active .sos-hero-con .elementor-background-slideshow__slide:first-child,
.elementor-editor-active .sos-hero-con .elementor-background-slideshow__slide:first-child .elementor-background-slideshow__slide__image {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Belt-and-suspenders: in the editor, also keep the container fallback paint with
   max specificity so it shows even if slides haven't been built yet by the editor. */
.elementor-editor-active .sos-hero-con {
    background-image: url('/wp-content/uploads/2026/06/cedar-pool-cabana-privacy-wall-greenville-sc.jpg') !important;
    background-size: cover !important; background-position: center !important;
}
/* <<< SOS PASS3 END */

/* >>> SOS PASS4 START */
/* Homepage pass 4 — bento services grid, commerce row, process section → concept
   (06-approved_concept). Concept .bento-*/.process-* names DON'T exist on the live
   build (native Elementor → .sos-*); concept treatment mapped onto live classes.
   Idempotent block. */

/* ════ FIX 1 · BENTO SERVICES — all 5 cells push content BOTTOM-LEFT ════
   Concept .bento-content: position:absolute; bottom:0; left:0; padding:28px 32px 36px;
   eyebrow/h3 margin-bottom:10px. Live cells are flex; force column + justify-end so
   content sits bottom-left uniformly (cells 1-3 were top, 4-5 mid). */
.sos-bento-cell {
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
}
.sos-bento-cell > .e-con-inner {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: flex-end !important;
    text-align: left !important; width: 100% !important;
    padding: 28px 32px 36px !important;   /* concept .bento-content */
}
.sos-bento-cell .sos-bento-cell-eyebrow .elementor-heading-title { margin: 0 0 10px !important; }
.sos-bento-cell .sos-bento-cell-title .elementor-heading-title { margin: 0 0 10px !important; }
.sos-bento-cell .sos-bento-arrow .elementor-heading-title { margin: 0 !important; }
/* concept cell scrim stops */
.sos-bento-cell::after {
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.08) 100%) !important;
}

/* ════ FIX 2 · COMMERCE ROW → concept ════ */
/* 2a — finance card: GREEN → dark. NOTE: concept .bento-cell--finance is solid
   `background: var(--charcoal)` (no gradient exists in concept CSS); per the
   instruction's "black→charcoal, darker at bottom" I use a charcoal→near-black
   vertical gradient. */
.sos-commerce-finance {
    background: linear-gradient(180deg, var(--charcoal) 0%, #0a0b0e 100%) !important;
    border: 1px solid rgba(154,201,67,0.14) !important;
    align-items: center !important;
}
.sos-commerce-finance:hover { border-color: var(--brand-green) !important; }
/* finance copy now on a DARK card → light text (concept .bento-finance-content) */
.sos-commerce-finance .sos-fin-eyebrow .elementor-heading-title { color: var(--brand-green) !important; }
.sos-commerce-finance .sos-fin-title .elementor-heading-title { color: var(--white) !important; }
.sos-commerce-finance .sos-fin-body p { color: rgba(255,255,255,0.72) !important; }
/* 2c — widen copy column so paragraphs breathe (concept content 55%, p max-width:none) */
.sos-commerce-finance .sos-fin-content {
    flex: 0 1 55% !important; max-width: 55% !important;
    justify-content: center !important;   /* concept align-items:center on card */
}
.sos-commerce-finance .sos-fin-body p { max-width: none !important; }
/* 2b — PLCC image: shrink to ~42% (concept 40%), lower-right, tilt + shadow kept.
   Elementor's .elementor-widget-image max-width:100% was beating the old 40%; force
   the flex basis here. */
.sos-commerce-finance .sos-fin-img {
    flex: 0 0 42% !important; max-width: 42% !important; align-self: flex-end !important;
}
.sos-commerce-finance .sos-fin-img img {
    width: 100% !important; height: auto !important; max-width: 100% !important;
    border-radius: 4px; transform: rotate(-4deg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    transition: transform 600ms cubic-bezier(0.16,1,0.3,1);
}
.sos-commerce-finance:hover .sos-fin-img img { transform: rotate(0deg) scale(1.05); }
/* 2d — APPLY NOW: solid green, dark text (concept btn-primary on dark card) */
.sos-commerce-finance .elementor-button {
    background: var(--brand-green) !important; color: var(--charcoal) !important;
    border: 2px solid var(--brand-green) !important;
}
.sos-commerce-finance .elementor-button:hover {
    background: transparent !important; color: var(--brand-green) !important;
}
/* 2e — Method + Catalog: KILL the heavy fade-to-white veil. Image crisp across the
   top; ONE clean white band at the bottom (concept .bento-cell--process .bento-content). */
.sos-commerce-card::after { background: transparent !important; }
.sos-commerce-card:hover::after { background: transparent !important; }
.sos-commerce-card { flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; }
.sos-commerce-card > .e-con-inner {
    width: 100% !important;
    background: linear-gradient(to top, rgba(255,255,255,1) 25%, rgba(255,255,255,0.95) 55%, rgba(255,255,255,0) 100%) !important;
    padding: 80px 28px 28px !important;   /* concept .bento-content band */
}

/* ════ FIX 3 · PROCESS — full section flip dark → LIGHT (concept #process) ════ */
/* 3a — light alabaster bg + faint grayscale cedar-ceiling + top green hairline */
.sos-process-section { background: var(--alabaster) !important; }
.sos-process-section::after {
    opacity: 0.12 !important;            /* concept #process::after */
    background-position: center 30% !important;
    filter: grayscale(100%) contrast(1.15) !important;
}
.sos-process-section::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 1;
    background: linear-gradient(to right, transparent, var(--brand-green), transparent);
    opacity: 0.35; pointer-events: none;
}
/* 3b — text on light bg: head + steps dark, body muted (beat global white) */
.sos-process-head .sos-process-eyebrow .elementor-heading-title { color: var(--charcoal) !important; }
.sos-process-head .sos-process-h2 .elementor-heading-title { color: var(--brand-black) !important; }
.sos-process-head .sos-process-intro p { color: rgba(26,27,30,0.70) !important; }
.sos-process-step .sos-step-title .elementor-heading-title { color: var(--brand-black) !important; font-size: 1rem !important; margin: 0 0 12px !important; }
.sos-process-step .sos-step-body p { color: var(--charcoal) !important; opacity: 0.85; font-size: 0.875rem !important; line-height: 1.7 !important; }
/* 3c — numbers: big translucent green watermark (concept .process-num) */
.sos-process-step .sos-step-num .elementor-heading-title {
    color: var(--brand-green) !important; opacity: 0.40 !important;
    font-size: clamp(4rem, 7vw, 6.5rem) !important; line-height: 1 !important; margin: 0 0 18px !important;
}
/* 3d — faint vertical dividers between the 4 columns (concept .process-step border-right) */
.sos-process-grid { gap: 0 !important; }
.sos-process-step { padding: 40px 32px !important; border-right: 1px solid rgba(0,0,0,0.08) !important; }
.sos-process-step:last-child { border-right: 0 !important; }
@media (max-width: 1024px) { .sos-process-step { border-right: 0 !important; padding: 32px var(--gutter) !important; } }
/* <<< SOS PASS4 END */

/* >>> SOS PASS5A START */
/* PART A — EDITOR VISIBILITY for reveal/entrance content. In the Elementor editor
   sirrona.js never runs, so every entrance/reveal element stays at its resting
   opacity:0 (+translateY) and reads invisible (hero eyebrow/H1/rule/subhead/CTAs/
   seal, gallery cells). Force the resting-VISIBLE state, scoped STRICTLY to
   body.elementor-editor-active — the live front-end has no such class, so its base
   opacity:0 rules and JS-driven reveals stay 100% intact and animated.
   Reveal/entrance selectors found in sirrona.css (step-2 audit):
     · .sos-hero-con .sos-hero-anim   (line 396: opacity:0; translateY(20px)) — hero content
     · .sos-gallery-cell              (line 574: opacity:0; translateY(24px))
     · .sos-sirrona-reveal / .reveal  (sirrona.js IntersectionObserver targets)
   Hero slide-1 image reveal is already handled by the pass-3 .elementor-editor-active
   rule above — intentionally NOT duplicated here. */
body.elementor-editor-active .sos-hero-con .sos-hero-anim,
body.elementor-editor-active .sos-gallery-cell,
body.elementor-editor-active .sos-sirrona-reveal,
body.elementor-editor-active .reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}
/* <<< SOS PASS5A END */

/* >>> SOS PASS6 START */
/* PART B — native Elementor Pro Gallery widget (.sos-gallery-widget) styled to
   concept #gallery / .gallery-cell. Rendered classes verified on the live page:
   .elementor-gallery__container (grid), .e-gallery-item (anchor), .e-gallery-image
   (bg-image), .elementor-gallery-item__overlay. Captions omitted (build had none;
   Elementor caption source = attachment meta → would pollute SEO). */
.sos-gallery-widget { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--gutter); }
.sos-gallery-widget .elementor-gallery__container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;   /* concept .gallery-grid */
    gap: 6px !important;
}
/* items — 4/3 aspect, crisp, hover zoom (concept .gallery-cell / img) */
.sos-gallery-widget .e-gallery-item {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 2px; display: block; background: #111;
}
.sos-gallery-widget .e-gallery-image {
    width: 100%; height: 100%; background-size: cover; background-position: center;
    transition: transform 600ms cubic-bezier(0.16,1,0.3,1);
}
.sos-gallery-widget .e-gallery-item:hover .e-gallery-image { transform: scale(1.05); }
/* hover scrim overlay (concept .gallery-cell-overlay) */
.sos-gallery-widget .elementor-gallery-item__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 55%) !important;
    opacity: 0; transition: opacity 380ms ease;
}
.sos-gallery-widget .e-gallery-item:hover .elementor-gallery-item__overlay { opacity: 1; }
/* green underline grow on hover (concept .gallery-cell::after) */
.sos-gallery-widget .e-gallery-item::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 3px;
    background: var(--brand-green); transition: width 400ms cubic-bezier(0.16,1,0.3,1); z-index: 3;
}
.sos-gallery-widget .e-gallery-item:hover::after { width: 100%; }
/* per-cell STAGGER reveal — base hidden, .revealed shows; nth-child reproduces
   concept reveal-d1/d2/d3 cadence (0.08s steps) across the 3 columns. */
.sos-gallery-widget .e-gallery-item {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.sos-gallery-widget.revealed .e-gallery-item { opacity: 1; transform: none; }
.sos-gallery-widget.revealed .e-gallery-item:nth-child(3n+1) { transition-delay: .08s; }
.sos-gallery-widget.revealed .e-gallery-item:nth-child(3n+2) { transition-delay: .16s; }
.sos-gallery-widget.revealed .e-gallery-item:nth-child(3n+3) { transition-delay: .24s; }
@media (max-width: 900px) { .sos-gallery-widget .elementor-gallery__container { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 600px) { .sos-gallery-widget .elementor-gallery__container { grid-template-columns: 1fr !important; } }
/* editor-scoped: items visible at rest in the Elementor editor (sirrona.js absent) */
body.elementor-editor-active .sos-gallery-widget .e-gallery-item {
    opacity: 1 !important; transform: none !important;
}
/* <<< SOS PASS6 END */

/* >>> SOS PASS7 START */
/* PASS 7 — contact fields legibility + footer separator (contact section moved to
   footer 269). Idempotent. */

/* STEP 1 · CONTACT FORM FIELD LEGIBILITY on the dark contact bg. Real rendered
   field class (verified on live page) = .elementor-field-textual (inputs/select/
   textarea) inside .sos-contact-form. Concept's own values (border .12 / placeholder
   .32) read too faint over the build's darker pavilion bg, so lifted to STEP-1's
   legibility minimums. !important to beat Elementor Pro's per-field 0,5,0 rules. */
.sos-contact-form .elementor-field-textual,
.sos-contact-form .elementor-field-group select,
.sos-contact-form textarea {
    background: rgba(255,255,255,0.08) !important;   /* concept range 0.06–0.10 */
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: #F4F5F4 !important;
}
.sos-contact-form .elementor-field-textual::placeholder,
.sos-contact-form textarea::placeholder { color: rgba(255,255,255,0.58) !important; }
.sos-contact-form .elementor-field-textual:focus,
.sos-contact-form textarea:focus,
.sos-contact-form .elementor-field-group select:focus {
    border-color: #9AC943 !important;                /* brand green focus */
    background: rgba(255,255,255,0.12) !important;
    outline: none !important;
}
.sos-contact-form select option { color: #1A1B1E; }

/* STEP 3 · GREEN SEPARATOR between the (now footer-hosted) contact section and the
   footer-columns block. Real rendered shell class = .sos-footer-shell (footer
   template 269; contact section sits ABOVE it). Thin 2px brand-green architectural
   full-width rule at the footer shell's top edge. */
.sos-footer-shell { border-top: 2px solid #9AC943; }
/* <<< SOS PASS7 END */

/* >>> SOS PASS8 START */
/* PASS 8 — interior page primitive + Pergolas proof page. Reuses the
   .sos-interior-hero primitive (275) + cred/gallery/process treatments; adds
   intent, alternating split rows, and CTA-tease. Idempotent. */

/* ===== INTERIOR HERO (enhanced primitive) ===== */
/* 62vh, 2px green bottom border, DUAL scrim (vertical + left), breadcrumb green
   separators, lede + optional meta row. Overrides the base SOS INTERIOR HERO. */
.sos-interior-hero { min-height: 62vh !important; border-bottom: 2px solid var(--brand-green); }
.sos-interior-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.15) 45%, transparent 70%); }
.sos-interior-hero .sos-interior-crumb { margin: 0 0 1.1rem; }
.sos-interior-crumb .sep { color: var(--brand-green); margin: 0 0.55rem; }
.sos-interior-lede { margin-top: 1.25rem; }
.sos-interior-lede p { color: rgba(255,255,255,0.84); font-family: var(--font-body);
    font-size: clamp(1rem,1.3vw,1.15rem); line-height: 1.6; max-width: 56ch; margin: 0; }
.sos-interior-meta { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,64px); margin-top: 2rem; }
.sos-interior-fig .sos-fig-num .elementor-heading-title { color: var(--brand-green); font-family: var(--font-display);
    font-weight: 700; font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1; margin: 0; letter-spacing: -0.02em; }
.sos-interior-fig .sos-fig-label .elementor-heading-title { color: rgba(255,255,255,0.7); font-family: var(--font-body);
    font-size: 0.8125rem; letter-spacing: 0.04em; margin: 6px 0 0; text-transform: none; font-weight: 400; }
@media (max-width:768px){ .sos-interior-hero{ min-height: 52vh !important; } }

/* ===== INTENT STATEMENT ===== */
.sos-intent-section { background: var(--white); padding: clamp(72px,9vw,120px) 0; }
.sos-intent-inner { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.sos-intent-eyebrow .elementor-heading-title { color: var(--charcoal); font-family: var(--font-display);
    font-size: clamp(0.625rem,0.9vw,0.6875rem); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; margin: 0 0 1rem; }
.sos-intent-rule { width: 60px; height: 3px; background: var(--brand-green); margin: 0 auto 28px !important; }
.sos-intent-rule .elementor-divider-separator { width: 60px !important; margin: 0 auto !important; border-top: 3px solid var(--brand-green) !important; }
.sos-intent-rule { background: transparent !important; }
.sos-intent-h2 .elementor-heading-title { color: var(--brand-black); font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; font-size: clamp(2rem,3.6vw,3rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 1.25rem; }
.sos-intent-lede p { color: rgba(26,27,30,0.72); font-size: clamp(1rem,1.3vw,1.15rem); line-height: 1.75; margin: 0 auto; max-width: 64ch; }

/* ===== ALTERNATING SPLIT ROWS ===== */
.sos-split-section { padding: clamp(64px,8vw,108px) 0; background: var(--white); }
.sos-split-section.sos-split-alabaster { background: var(--alabaster); }
.sos-split-grid { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,80px); align-items: center; }
.sos-split-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background-size: cover;
    background-position: center; border-radius: 2px; }
.sos-split-tag { position: absolute; left: 0; bottom: 24px; z-index: 2; background: var(--brand-green);
    color: var(--charcoal); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 16px; }
.sos-split-copy .sos-split-eyebrow .elementor-heading-title { color: var(--charcoal); font-family: var(--font-display);
    font-size: clamp(0.625rem,0.9vw,0.6875rem); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; margin: 0 0 1rem; }
.sos-split-copy .sos-split-h2 .elementor-heading-title { color: var(--brand-black); font-family: var(--font-display);
    font-weight: 700; text-transform: uppercase; font-size: clamp(1.75rem,3vw,2.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.25rem; }
.sos-split-copy .sos-split-body p { color: rgba(26,27,30,0.74); font-size: 1rem; line-height: 1.8; margin: 0 0 1.5rem; max-width: 52ch; }
.sos-split-checklist ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.sos-split-checklist li { position: relative; padding-left: 28px; margin-bottom: 12px; color: rgba(26,27,30,0.82); font-size: 0.95rem; line-height: 1.5; }
.sos-split-checklist li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
    border-left: 2px solid var(--brand-green); border-bottom: 2px solid var(--brand-green); transform: rotate(-45deg); }
.sos-split-copy .elementor-button { border-radius: 0 !important; background: transparent; border: 2px solid var(--charcoal);
    color: var(--charcoal); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 32px; transition: all 0.3s ease; }
.sos-split-copy .elementor-button:hover { background: var(--charcoal); color: var(--alabaster); }
/* FLIP row B: copy left / media right via DOM order; on mobile media always first */
@media (max-width:860px){ .sos-split-grid { grid-template-columns: 1fr; } .sos-split-media { aspect-ratio: 16/10; }
    .sos-split-grid .sos-split-media { order: -1; } }

/* ===== CTA TEASE (closing bridge into footer-contact) ===== */
.sos-cta-tease { background: var(--brand-black); padding: clamp(72px,9vw,120px) 0; text-align: center; }
.sos-cta-tease-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.sos-cta-tease .sos-cta-eyebrow .elementor-heading-title { color: var(--brand-green); font-family: var(--font-display);
    font-size: clamp(0.625rem,0.9vw,0.6875rem); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; margin: 0 0 1rem; }
.sos-cta-tease .sos-cta-h2 .elementor-heading-title { color: var(--white); font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; font-size: clamp(2rem,3.6vw,3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 2rem; }
.sos-cta-tease .elementor-button { border-radius: 0 !important; background: var(--brand-green); border: 2px solid var(--brand-green);
    color: var(--charcoal); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 36px; transition: all 0.3s ease; }
.sos-cta-tease .elementor-button:hover { background: transparent; color: var(--brand-green); }
/* <<< SOS PASS8 END */

/* >>> SOS PASS11 START */
/* PASS 11 — interior hero header-clearance + tighter interior rhythm. Idempotent.
   Touches ONLY interior classes (.sos-interior-hero, .sos-intent-section,
   .sos-split-section) — never the locked shared sections or homepage classes. */

/* FIX 2 · HERO TITLE CLIPPING. The interior fixed header (#site-header, ~155px
   bottom desktop / ~120px mobile) was covering the hero content because the content
   sat TOP-anchored (the inner stretched to fill, so justify-content:flex-end didn't
   take). Bottom-anchor the content with margin-top:auto AND reserve top header
   clearance so the H1 never tucks under the header at any width. */
/* The inner container fills the hero (flex), so bottom-anchor the CONTENT within
   the inner (justify-content:flex-end), and reserve top header-clearance so the
   H1 never tucks under the fixed header at any width. */
.sos-interior-hero > .sos-interior-inner { justify-content: flex-end !important; }
.sos-interior-hero { padding-top: clamp(96px, 12vh, 140px) !important; }
@media (max-width: 1024px) { .sos-interior-hero { padding-top: 120px !important; } }
/* The meta row was stacking vertically (Elementor containers default to
   flex-direction:column), which ballooned the hero height. Force the 3 figures
   into a row so the hero stays compact and the content clumps at the bottom. */
.sos-interior-meta { flex-direction: row !important; align-items: flex-start !important;
    flex: 0 0 auto !important; min-height: 0 !important; }
.sos-interior-meta > .sos-interior-fig { flex: 0 0 auto !important; width: auto !important; min-height: 0 !important; }
@media (max-width: 560px) { .sos-interior-meta { flex-wrap: wrap; gap: 20px 32px; } }

/* FIX 3 · TIGHTEN INTERIOR DEAD SPACE. Trim the oversized intent + split padding
   toward the mockup's tighter rhythm (conservative, ~25-30%). Shared sections
   (process/spec/gallery/footer-contact) untouched. */
.sos-intent-section { padding: clamp(56px, 6vw, 88px) 0 !important; }   /* was clamp(72,9vw,120) */
.sos-split-section  { padding: clamp(48px, 5.5vw, 80px) 0 !important; } /* was clamp(64,8vw,108) */
/* <<< SOS PASS11 END */

/* >>> SOS PASS12 START */
/* PASS 12 — interior standards lock + hero rebuild + trust band. Idempotent. */

/* ════ PART 1.1 · EYEBROW FOLLOWS HEADLINE ALIGNMENT (permanent) ════
   Centered section heads → centered eyebrow; left heads (split copy) → left. */
.sos-intent-eyebrow .elementor-heading-title,
.sos-cta-eyebrow .elementor-heading-title,
.sos-gallery-head .sos-gallery-eyebrow .elementor-heading-title,
.sos-process-head .sos-process-eyebrow .elementor-heading-title {
    text-align: center !important; max-width: none !important;
    margin-left: auto !important; margin-right: auto !important;
}
.sos-split-copy .sos-split-eyebrow .elementor-heading-title { text-align: left !important; margin-left: 0 !important; }

/* ════ PART 1.2 · DIVIDER RULE CONSISTENCY (permanent) ════
   Green rule on every centered head; the CTA tease was missing one — render it via
   a pseudo so it matches the divider widgets used on intent/gallery/process. Split
   copy carries NO rule (none present; nothing to remove). */
.sos-cta-tease .sos-cta-eyebrow .elementor-heading-title::after {
    content: ""; display: block; width: 60px; height: 3px; background: var(--brand-green);
    margin: 24px auto 0;
}

/* ════ PART 1.3 · CUSTOM CIRCLE-CHECK (.sos-check) ════
   Brand green ring + check as an inline SVG data-URI. Replaces the dash on every
   interior checklist. Reusable on the trust band too. */
.sos-check, .sos-split-checklist li::before {
    content: ""; display: inline-block; width: 18px; height: 18px; flex: 0 0 18px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%239AC943' stroke-width='2'/%3E%3Cpath d='M6 10.5l2.5 2.5 5-5.5' fill='none' stroke='%239AC943' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; background-position: center;
}
.sos-split-checklist li { position: relative; padding-left: 30px; }
.sos-split-checklist li::before { position: absolute; left: 0; top: 2px; border: 0 !important; transform: none !important; }

/* ════ PART 2 · INTERIOR HERO REBUILD ════ */
/* Height: shorter than home, fits a 13" Air (~720 usable) without clipping. */
.sos-interior-hero { min-height: clamp(520px, 60vh, 640px) !important; }
@media (max-width: 768px) { .sos-interior-hero { min-height: 56vh !important; } }
/* SLIDESHOW image layer (driven by sirrona.js initInteriorHeroes, slower than home) */
.sos-interior-hero .elementor-background-slideshow,
.sos-interior-hero .elementor-background-slideshow__slide,
.sos-interior-hero .elementor-background-slideshow__slide__image { position: absolute; inset: 0; width: 100%; height: 100%; }
.sos-interior-hero .elementor-background-slideshow__slide__image { background-size: cover !important; background-position: center !important; will-change: transform; }
.sos-interior-hero .elementor-background-slideshow__slide { opacity: 0 !important; transition: opacity 1.3s var(--ease); z-index: 0; }
.sos-interior-hero .elementor-background-slideshow__slide.sos-slide-on { opacity: 1 !important; }
/* TITLE ROW: H1 left + breadcrumb pill inline-right, baseline aligned */
.sos-interior-titlerow { display: flex; flex-direction: row !important; justify-content: space-between !important;
    align-items: flex-end !important; gap: clamp(16px, 3vw, 40px); width: 100% !important; flex-wrap: nowrap; }
/* H1 widget must size to its (capped) text so the breadcrumb sits inline-right,
   not get pushed below by Elementor's default 100%-wide widget. */
.sos-interior-titlerow > .sos-interior-h1 { flex: 0 1 auto !important; width: auto !important; max-width: clamp(20ch, 60vw, 830px) !important; min-width: 0; }
.sos-interior-h1 .elementor-heading-title { max-width: clamp(20ch, 60vw, 830px); }
.sos-interior-titlerow > .sos-interior-crumb { flex: 0 0 auto; }
/* BREADCRUMB pill (home-style: ALL CAPS dark pill, green futura, green seps), right */
.sos-interior-crumb { margin: 0 !important; flex: 0 0 auto; align-self: center; }
.sos-interior-crumb, .sos-interior-crumb p, .sos-interior-crumb a, .sos-interior-crumb span {
    font-family: var(--font-display) !important; text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.625rem !important; font-weight: 700; }
.sos-interior-crumb { background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 7px 14px; border-radius: 2px; display: inline-flex; align-items: center; }
.sos-interior-crumb a { color: var(--brand-green) !important; }
.sos-interior-crumb span { color: rgba(255,255,255,0.78) !important; }
.sos-interior-crumb .sep { color: var(--brand-green) !important; margin: 0 0.5rem; }
@media (max-width: 860px) { .sos-interior-titlerow { flex-direction: column !important; align-items: flex-start !important; } }
/* CEDAR SEAL (required furniture) — reuse home .sos-hero-seal styling, already defined */
.sos-interior-hero .sos-hero-seal { margin-top: 22px; }
/* SLIDE PROGRESS (required furniture) — homepage pattern, shown on all interior heroes */
.sos-interior-progress { position: absolute; bottom: clamp(20px, 4vh, 40px); right: var(--gutter); z-index: 6; display: flex; gap: 8px; }
.sos-interior-progress .sos-progress-line { width: 26px; height: 2px; background: rgba(255,255,255,0.25); overflow: hidden; }
.sos-interior-progress .sos-progress-line.active .sos-progress-line-fill { display: block; height: 100%; background: var(--brand-green); transform-origin: left; animation: sosProgress 7500ms linear forwards; }
/* SCROLL CUE (required furniture) */
.sos-interior-scrollcue { position: absolute; bottom: clamp(16px, 3vh, 28px); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,0.8); pointer-events: none; }
.sos-interior-scrollcue .lbl { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.sos-interior-scrollcue .arr { animation: sosBob 2s var(--ease) infinite; }
@media (max-width: 768px) { .sos-interior-progress, .sos-interior-scrollcue { display: none; } }

/* ════ PART 3 · TRUST BAND (below hero, own section) ════ */
.sos-trust-band { background: var(--charcoal); border-bottom: 1px solid rgba(255,255,255,0.07); }
.sos-trust-band > .e-con-inner, .sos-trust-inner { max-width: var(--container-max); margin: 0 auto; padding: 18px var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.sos-trust-label .elementor-heading-title { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-green); margin: 0; white-space: nowrap; }
.sos-trust-items { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 28px); }
.sos-trust-items .sos-trust-item { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.85);
    font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.02em; }
.sos-trust-items .sos-check { width: 16px; height: 16px; flex: 0 0 16px; }

/* EDITOR VISIBILITY — reveal interior slideshow slide 1 + new furniture in-editor */
body.elementor-editor-active .sos-interior-hero .elementor-background-slideshow__slide:first-child,
body.elementor-editor-active .sos-interior-hero .elementor-background-slideshow__slide:first-child .elementor-background-slideshow__slide__image {
    opacity: 1 !important; visibility: visible !important;
}
/* <<< SOS PASS12 END */

/* >>> SOS PASS12.1 START */
/* PASS 12.1 — interior hero + trust band refinement. CSS-only (no data writes).
   Reviewed against live Pavilions. Overrides PASS12 (later cascade + specificity).
   Scope: interior heroes (330/332/333/334/276) + template 331. Homepage hero
   (.sos-hero-con / .sos-hero-seal NOT inside .sos-interior-hero) is untouched. */

/* ── FIX 4 · CONSTRAIN HERO + TRUST CONTENT TO HEADER CONTAINER WIDTH ──
   Header content box = max-width 1400px + gutter clamp(24px,5vw,64px) (see #site-header).
   Interior inner + trust inner were capped at --container-max (1280px), sitting ~60px
   inboard of the header logo. Match 1400px so the content left edge aligns with the
   header logo left edge (measured: 144px → 84px at 1440, = header logo edge). Background
   /slideshow stays full-bleed (it's on .sos-interior-hero, not the inner). */
.sos-interior-hero > .sos-interior-inner { max-width: var(--container-max) !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
.sos-trust-band > .e-con-inner, .sos-trust-inner { max-width: 1400px !important; }

/* ── FIX 2 · HEADLINE TOP CLEARANCE ──
   Bump hero content top clearance below the fixed header. Content is bottom-anchored
   (flex-end), so this is a top floor; with the breadcrumb now above the H1 + a larger
   seal, the extra clearance keeps the H1 off the header. Verified non-clipping at 1440
   and on a 13" Air (~720 usable). */
.sos-interior-hero { padding-top: clamp(120px, 15vh, 180px) !important; }
@media (max-width: 1024px) { .sos-interior-hero { padding-top: 124px !important; } }

/* ── FIX 3 · BREADCRUMB ABOVE H1 (reverses PASS12 inline-right) ──
   Title row becomes a left-aligned column; the breadcrumb (DOM child #2) is reordered
   above the H1 via order:-1. Pill styling (ALL-CAPS, dark pill, green futura, green
   separators) is inherited from PASS12 unchanged. */
.sos-interior-titlerow { flex-direction: column !important; justify-content: flex-end !important;
    align-items: flex-start !important; flex-wrap: nowrap !important; gap: 0 !important; }
.sos-interior-titlerow > .sos-interior-crumb { order: -1; align-self: flex-start !important; margin: 0 0 1.15rem !important; }
.sos-interior-titlerow > .sos-interior-h1 { max-width: clamp(20ch, 72vw, 900px) !important; }
.sos-interior-h1 .elementor-heading-title { max-width: clamp(20ch, 72vw, 900px); margin: 0 !important; }

/* ── FIX 1 · CEDAR SEAL: left-aligned under the lede, larger, no frosted pill ──
   The interior seal is a column flex inside .sos-interior-inner; PASS12 left the home
   frosted-pill styling (align-items:center → horizontally centered). Left-align it,
   drop the pill so the larger seal reads as a clean stamp, and size the mark to
   clamp(140px,11vw,200px). Label sits left-aligned beneath. Home seal unaffected. */
.sos-interior-hero .sos-hero-seal {
    align-items: flex-start !important; align-self: flex-start !important;
    background: none !important; border: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 0 !important; gap: 10px !important;
    margin-top: clamp(22px, 3vh, 34px) !important;
}
.sos-interior-hero .sos-hero-seal img,
.sos-interior-hero .sos-hero-seal .elementor-widget-image img {
    width: clamp(140px, 11vw, 200px) !important; height: auto !important;
    max-width: none !important; opacity: 0.95 !important;
}
.sos-interior-hero .sos-hero-seal .sos-hero-seal-label {
    font-size: 0.6rem !important; letter-spacing: 0.2em !important;
    color: rgba(255,255,255,0.6) !important; text-align: left !important;
}

/* ── FIX 5 · TRUST BAND RESTYLE (credential row) ──
   Choices: (1) SEPARATOR — a single low-opacity vertical hairline divides the leading
   label from the credential cluster; the items themselves use a GENEROUS GAP rather
   than per-item hairlines (per-item hairlines leave a hanging line at wrap/stack
   boundaries; gap stays clean and fully responsive). (2) LABEL — anchored with a short
   green rule beneath it + stronger eyebrow tracking so it leads the row. Bigger 24px
   checks, futura display item text, more vertical band height. */
.sos-trust-band { background: var(--charcoal); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sos-trust-band > .e-con-inner, .sos-trust-inner {
    flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important;
    padding: clamp(28px, 4.5vh, 46px) var(--gutter) !important;
    align-items: center !important; gap: clamp(22px, 3vw, 48px) !important; }
.sos-trust-label .elementor-heading-title {
    font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.24em !important;
    color: var(--brand-green) !important; white-space: nowrap; margin: 0 !important;
    padding-right: clamp(20px, 2.6vw, 36px); border-right: 1px solid rgba(255,255,255,0.16); }
.sos-trust-label .elementor-heading-title::after {
    content: ""; display: block; width: 34px; height: 2px; background: var(--brand-green); margin-top: 11px; }
.sos-trust-items { gap: clamp(22px, 2.8vw, 50px) !important; }
.sos-trust-items .sos-trust-item {
    gap: 12px !important; color: rgba(255,255,255,0.92) !important;
    font-family: var(--font-display) !important; font-size: 0.875rem !important;
    font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase; }
.sos-trust-items .sos-check { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
@media (max-width: 768px) {
    .sos-trust-band > .e-con-inner, .sos-trust-inner { flex-direction: column; align-items: flex-start !important; gap: 20px !important; }
    .sos-trust-label .elementor-heading-title { border-right: none; padding-right: 0; }
    .sos-trust-items { gap: 16px 30px !important; }
}
/* <<< SOS PASS12.1 END */

/* >>> SOS PASS12.2 START */
/* PASS 12.2 — header clip fixed above (interior #site-header). Here: seal size,
   cert label centering, trust-bar refinement. CSS-only. Overrides PASS12.1. */

/* ── FIX 1 · CEDAR SEAL SIZE — height-based ~55px (was width clamp 140-200, too big).
   Height clamp(48px,4vh,64px) ≈ 55px on a 13" Air; width follows the mark's aspect
   ratio. Stays left-aligned under the lede. Home seal untouched. */
.sos-interior-hero .sos-hero-seal img,
.sos-interior-hero .sos-hero-seal .elementor-widget-image img {
    height: clamp(48px, 4vh, 64px) !important; width: auto !important; max-width: none !important;
}
/* ── FIX 2 · "CERTIFIED MATERIAL" label centered UNDER the mark.
   The seal container is e-con-full (100% wide), so align-items:center alone re-centers
   the mark across the whole hero. Shrink the container to fit-content so it hugs the
   mark and sits left under the lede (align-self:flex-start), while align-items:center
   centers the label beneath the mark. */
.sos-interior-hero .sos-hero-seal { align-items: center !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; }
.sos-interior-hero .sos-hero-seal .sos-hero-seal-label { text-align: center !important; }

/* ── FIX 3 · TRUST BAR REFINEMENT ──
   Label: larger, forced TWO lines ("WHAT SETS / US APART" via max-width wrap), green
   rule REMOVED, hairline separator REMOVED. Distribution: label leads left, the 4
   check items spread EVENLY across the full remaining container width (items flex:1 +
   space-between) for even rhythm rather than a left cluster. */
.sos-trust-label .elementor-heading-title {
    font-size: 1rem !important; line-height: 1.12 !important; letter-spacing: 0.16em !important;
    white-space: normal !important; max-width: 7em !important;
    padding-right: 0 !important; border-right: none !important; }
.sos-trust-label .elementor-heading-title::after { content: none !important; display: none !important; }
.sos-trust-band > .e-con-inner, .sos-trust-inner {
    justify-content: flex-start !important; gap: clamp(24px, 3vw, 56px) !important; }
.sos-trust-label { flex: 0 0 auto !important; }
.sos-trust-items {
    flex: 1 1 auto !important; justify-content: space-between !important;
    gap: 14px clamp(16px, 2vw, 32px) !important; }
@media (max-width: 768px) {
    .sos-trust-items { flex: 1 1 100% !important; flex-direction: column !important;
        justify-content: flex-start !important; align-items: flex-start !important; gap: 14px !important; }
}
/* <<< SOS PASS12.2 END */

/* >>> SOS PASS12.3 START */
/* PASS 12.3 — durable hero clearance, trust reveal-on-scroll, hero entrance motion.
   CSS-only (+ sirrona.js: .sos-ihero-in on load, .sos-trust-band added to reveal
   observer). Overrides earlier passes. Verified in a REAL (headful) browser. */

/* ════ FIX 1 · DURABLE HERO CLEARANCE ════
   The breadcrumb tucked behind the header because the header grew (taller logo) and
   the fixed padding-top no longer cleared it. ROOT FIX: clearance DERIVES from the
   rendered header height via --sos-header-h, and content is TOP-anchored below the
   header (flex-start) so the breadcrumb sits a fixed gap under the header REGARDLESS
   of content height, hero height, or viewport — it cannot tuck back under.
   The hero auto-grows to fit breadcrumb+H1+lede+seal (no clipping). Lower-third gives
   way to "content anchored below header"; the scroll cue/image fill the lower area.

   MEASURED 2026-06-09 in a real browser (Pavilions):
     desktop  topbar 40px + #site-header 155px → header bottom 195px; hero starts at 40
              (below topbar) so #site-header overlays the hero by its own 155px.
     ≤1024px  topbar hidden, #site-header ~120px at top:0.
   --sos-header-h = the #site-header height that overlays the hero.
   ⚠ IF THE HEADER HEIGHT CHANGES (logo size, nav, padding), UPDATE --sos-header-h. */
.sos-interior-hero {
    --sos-header-h: 155px;
    justify-content: flex-start !important;
    padding-top: calc(var(--sos-header-h) + 42px) !important;   /* header overlay + ~42px breathing gap */
}
.sos-interior-hero > .sos-interior-inner { justify-content: flex-start !important; }
@media (max-width: 1024px) {
    .sos-interior-hero { --sos-header-h: 120px; padding-top: calc(var(--sos-header-h) + 28px) !important; }
}
/* gentle H1 line-height tighten so the 2-line headline reads as one tight block */
.sos-interior-h1 .elementor-heading-title { line-height: 0.98 !important; }

/* ════ FIX 2 · TRUST BAR → REVEAL ON SCROLL + tweaks ════
   Hidden at rest; sirrona.js IntersectionObserver adds .revealed (fade-up). It is
   NOT shown on initial load (sits below the hero); animates in as the user scrolls. */
.sos-trust-band { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.sos-trust-band.revealed { opacity: 1; transform: none; }
/* "WHAT SETS US APART" +2-3px (1rem → 1.15rem); stays two lines via the 7em wrap */
.sos-trust-label .elementor-heading-title { font-size: 1.15rem !important; }
/* light grey vertical separator before each check item (~60% row height); hidden on mobile stack */
.sos-trust-items .sos-trust-item { position: relative; padding-left: clamp(20px, 2.2vw, 34px); }
.sos-trust-items .sos-trust-item::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 24px; background: rgba(255,255,255,0.18); }

/* ════ FIX 3 · HERO ENTRANCE MOTION (front-end) ════
   Staggered fade-up: breadcrumb → H1 → lede → seal (gentle ease, ~110ms steps),
   driven by .sos-ihero-in (sirrona.js adds it on load). Slideshow Ken Burns drift is
   ALREADY present (sosKenBurns 8200ms in initInteriorHeroes) and slideshow timing is
   locked — NOT re-touched. Scroll-cue bob already present (sosBob). */
.sos-interior-hero .sos-interior-crumb,
.sos-interior-hero .sos-interior-h1,
.sos-interior-hero .sos-interior-lede,
.sos-interior-hero .sos-hero-seal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .85s var(--ease), transform .85s var(--ease); }
.sos-interior-hero.sos-ihero-in .sos-interior-crumb { opacity: 1; transform: none; transition-delay: .10s; }
.sos-interior-hero.sos-ihero-in .sos-interior-h1    { opacity: 1; transform: none; transition-delay: .21s; }
.sos-interior-hero.sos-ihero-in .sos-interior-lede  { opacity: 1; transform: none; transition-delay: .33s; }
.sos-interior-hero.sos-ihero-in .sos-hero-seal      { opacity: 1; transform: none; transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
    .sos-interior-hero .sos-interior-crumb, .sos-interior-hero .sos-interior-h1,
    .sos-interior-hero .sos-interior-lede, .sos-interior-hero .sos-hero-seal,
    .sos-trust-band { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* refined breadcrumb-link hover: green + underline-grow */
.sos-interior-crumb a { position: relative; transition: color .3s var(--ease); }
.sos-interior-crumb a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
    background: var(--brand-green); transition: width .35s var(--ease); }
.sos-interior-crumb a:hover { color: var(--brand-green) !important; }
.sos-interior-crumb a:hover::after { width: 100%; }

/* ════ EDITOR VISIBILITY — keep new entrance/reveal elements visible in-editor ════ */
body.elementor-editor-active .sos-interior-hero .sos-interior-crumb,
body.elementor-editor-active .sos-interior-hero .sos-interior-h1,
body.elementor-editor-active .sos-interior-hero .sos-interior-lede,
body.elementor-editor-active .sos-interior-hero .sos-hero-seal,
body.elementor-editor-active .sos-trust-band {
    opacity: 1 !important; transform: none !important; visibility: visible !important; }
@media (max-width: 768px) { .sos-trust-items .sos-trust-item::before { display: none; } .sos-trust-items .sos-trust-item { padding-left: 0; } }
/* <<< SOS PASS12.3 END */

/* >>> SOS USE-CASE BENTO START */
/* PASS 13 — interior use-case bento (Pergolas 330 proof). REUSES the homepage bento
   classes for layout/asymmetric grid/scrim-deepen hover/eyebrow pills/responsive
   collapse — all inherited from .sos-bento-* (lines ~475-521, 760-835, 1087-1108).
   Below are ONLY interior-specific additions, scoped to body:not(.home) so the
   homepage bento is untouched. NOTE: like the homepage bento, cells use a
   background-image with scrim-deepen on hover (no image scale — that is the gallery
   widget's behavior); matching homepage faithfully rather than diverging. */

/* interior vertical rhythm (tighter than the homepage bento's 96/64 + 112) */
body:not(.home) .sos-bento-head { padding: clamp(56px, 7vh, 72px) var(--gutter) clamp(32px, 4vh, 44px); }
body:not(.home) .sos-bento-grid { padding: 0 var(--gutter) clamp(56px, 7vh, 80px); }

/* scroll reveal — staggered cell fade-up (mirrors the gallery reveal cadence).
   JS observes .sos-bento-grid → adds .revealed. Scoped to interior so homepage
   cells (no hidden state) are unaffected even though they share the class. */
body:not(.home) .sos-bento-grid .sos-bento-cell {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
body:not(.home) .sos-bento-grid.revealed .sos-bento-cell { opacity: 1; transform: none; }
body:not(.home) .sos-bento-grid.revealed .sos-bento-cell-1 { transition-delay: .04s; }
body:not(.home) .sos-bento-grid.revealed .sos-bento-cell-2 { transition-delay: .12s; }
body:not(.home) .sos-bento-grid.revealed .sos-bento-cell-3 { transition-delay: .20s; }
body:not(.home) .sos-bento-grid.revealed .sos-bento-cell-4 { transition-delay: .28s; }
body:not(.home) .sos-bento-grid.revealed .sos-bento-cell-5 { transition-delay: .36s; }

/* refined arrow nudge on hover (homepage stays color-only; interior adds a gentle slide) */
body:not(.home) .sos-bento-cell .sos-bento-arrow .elementor-heading-title { transition: color .3s var(--ease), transform .3s var(--ease); }
body:not(.home) .sos-bento-cell:hover .sos-bento-arrow .elementor-heading-title { transform: translateX(5px); }

/* WHOLE-CELL CLICK → #contact. This Elementor build does not render a container
   link overlay, so the arrow heading carries a real <a href="#contact"> and its
   ::after is expanded to cover the whole cell (cell is position:relative). Keeps the
   link accessible/crawlable while making the entire card clickable. */
body:not(.home) .sos-bento-cell .sos-bento-arrow a { color: inherit; text-decoration: none; }
body:not(.home) .sos-bento-cell .sos-bento-arrow a::after { content: ""; position: absolute; inset: 0; z-index: 4; }

/* editor visibility — reveal cells at rest in the Elementor editor */
body.elementor-editor-active .sos-bento-grid .sos-bento-cell { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    body:not(.home) .sos-bento-grid .sos-bento-cell { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* <<< SOS USE-CASE BENTO END */

/* >>> SOS PASS16 START */
/* PASS 16 — FAQ accordion + policy pages. Reuses interior section rhythm; brand-styles
   the Elementor accordion and gives policy pages a slim title band + readable prose. */

/* FAQ accordion — brand it (sharp corners, futura titles, green active/icon) */
.sos-faq-wrap { max-width: 920px; margin: 0 auto; }
/* >>> SOS FAQ DARK-BAR RESTYLE 2026-06-24 ===============================
   Replaces the earlier white-card-on-black treatment with dark transparent
   bars on the black .sos-gallery-section: hairline separators, sharp corners,
   white questions, muted-grey +/- icons, GREEN hover + GREEN open state
   (green spine on the open title + answer), lifted answer surface.
   Scoped body.page-id-339 .sos-faq-accordion so it cannot leak to any other
   accordion site-wide. Section bg is dark (#000), so white text is readable.
   ====================================================================== */
.sos-faq-alt { border-top: 1px solid rgba(255,255,255,0.08); }
/* transparent bars, hairline between items, sharp corners */
body.page-id-339 .sos-faq-accordion .elementor-accordion-item { border: 0 !important; border-top: 1px solid rgba(255,255,255,0.12) !important; border-radius: 0 !important; margin-bottom: 0; background: transparent !important; overflow: hidden; }
body.page-id-339 .sos-faq-accordion .elementor-accordion-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
/* closed question: futura, white, transparent green-ready left spine (no layout jump on open) */
body.page-id-339 .sos-faq-accordion .elementor-tab-title { font-family: var(--font-display) !important; font-weight: 700; text-transform: none; letter-spacing: 0.01em; color: rgba(255,255,255,0.9) !important; background: transparent !important; padding: 24px 28px !important; border: 0 !important; border-left: 2px solid transparent !important; font-size: clamp(1rem, 1.3vw, 1.125rem); transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
body.page-id-339 .sos-faq-accordion .elementor-accordion-title { color: inherit !important; transition: color var(--t-base) var(--ease); }
/* +/- icon muted grey */
body.page-id-339 .sos-faq-accordion .elementor-accordion-icon,
body.page-id-339 .sos-faq-accordion .elementor-accordion-icon svg { color: rgba(255,255,255,0.45) !important; fill: rgba(255,255,255,0.45) !important; transition: color var(--t-base) var(--ease), fill var(--t-base) var(--ease); }
/* hover: question + icon green */
body.page-id-339 .sos-faq-accordion .elementor-tab-title:hover,
body.page-id-339 .sos-faq-accordion .elementor-tab-title:hover .elementor-accordion-title { color: var(--brand-green) !important; }
body.page-id-339 .sos-faq-accordion .elementor-tab-title:hover .elementor-accordion-icon,
body.page-id-339 .sos-faq-accordion .elementor-tab-title:hover .elementor-accordion-icon svg { color: var(--brand-green) !important; fill: var(--brand-green) !important; }
/* OPEN item: green question + icon, green left spine, lifted surface */
body.page-id-339 .sos-faq-accordion .elementor-tab-title.elementor-active,
body.page-id-339 .sos-faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--brand-green) !important; }
body.page-id-339 .sos-faq-accordion .elementor-tab-title.elementor-active { background: rgba(255,255,255,0.03) !important; border-left-color: var(--brand-green) !important; }
body.page-id-339 .sos-faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
body.page-id-339 .sos-faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg { color: var(--brand-green) !important; fill: var(--brand-green) !important; }
/* answer panel: acumin, soft white, lifted surface, green spine, green underlined links */
body.page-id-339 .sos-faq-accordion .elementor-tab-content { background: rgba(255,255,255,0.03) !important; border: 0 !important; border-left: 2px solid var(--brand-green) !important; color: rgba(255,255,255,0.8) !important; font-family: var(--font-body) !important; line-height: 1.8 !important; padding: 4px 28px 28px !important; }
body.page-id-339 .sos-faq-accordion .elementor-tab-content p { margin: 0; color: rgba(255,255,255,0.8) !important; }
body.page-id-339 .sos-faq-accordion .elementor-tab-content a { color: var(--brand-green) !important; text-decoration: underline !important; }
/* <<< SOS FAQ DARK-BAR RESTYLE END ===================================== */

/* Policy pages — slim dark title band + readable prose column */
.sos-policy-head { background: var(--brand-black); padding: clamp(120px, 15vh, 170px) var(--gutter) clamp(36px, 5vh, 56px); }
.sos-policy-h1 .elementor-heading-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--white); font-size: clamp(2rem, 4vw, 3rem); max-width: 1400px; margin: 0 auto; line-height: 1.02; }
.sos-policy-section { background: var(--white); padding: clamp(48px, 7vh, 80px) var(--gutter); }
.sos-policy-prose { max-width: 760px; margin: 0 auto; }
.sos-policy-prose h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--charcoal); font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 2.25rem 0 0.6rem; }
.sos-policy-prose h3 { font-family: var(--font-display); font-weight: 700; color: var(--charcoal); font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
.sos-policy-prose p, .sos-policy-prose li { font-family: var(--font-body); color: rgba(26,27,30,0.8); line-height: 1.75; }
.sos-policy-prose ul, .sos-policy-prose ol { padding-left: 1.4rem; margin: 0.4rem 0 1rem; }
.sos-policy-prose li { margin-bottom: 0.4rem; }
.sos-policy-prose em { color: rgba(26,27,30,0.5); font-size: 0.92em; }
.sos-policy-prose a { color: var(--brand-green); }
/* <<< SOS PASS16 END */

/* >>> SOS PASS17 START */
/* PASS 17 — Contact footer fix. Footer 269 renders site-wide again (condition reverted to
   include/general); on the Contact page (341) we hide ONLY the footer's duplicate contact
   section so the branded footer shell/copyright/legal stay. Scoped to .elementor-location-footer
   so the page's own fuller form (in the page body) is untouched. */
body.page-id-341 .elementor-location-footer .sos-contact-section { display: none !important; }
/* <<< SOS PASS17 END */


/* >>> SOS CTA LEDE START */
/* PASS M — CTA lede readability on the black .sos-cta-tease section. The text-editor
   lede was inheriting the dark body color and disappearing on the black background;
   force light text and brand-green links scoped to the lede only. */
.sos-cta-tease .sos-cta-lede,
.sos-cta-tease .sos-cta-lede p { color: rgba(255,255,255,.82); font-family: var(--font-body); line-height: 1.75; }
.sos-cta-tease .sos-cta-lede { max-width: 680px; margin: 0 auto 1.5rem; }
.sos-cta-tease .sos-cta-lede a { color: var(--brand-green, #9AC943); text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); }
.sos-cta-tease .sos-cta-lede a:hover { color: var(--white, #fff); }
/* <<< SOS CTA LEDE END */

/* >>> SOS IMAGE PROTECTION START */
/* PASS — gallery lightbox watermark + casual-save deterrent. Watermark <img> is
   positioned by sirrona.js from the displayed lightbox image's bounding box.
   Deterrent only (screenshots/devtools still work); stops casual save/drag. */
.sos-lightbox-wm {
  position: fixed; z-index: 100000; display: none; height: auto;
  pointer-events: none; opacity: 0.55; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.sos-img-toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 100001;
  transform: translateX(-50%) translateY(12px);
  max-width: min(90vw, 420px); text-align: center;
  background: var(--brand-black, #1A1B1E); color: rgba(255,255,255,0.92);
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.4;
  padding: 12px 18px; border-top: 2px solid var(--brand-green, #9AC943);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease;
}
.sos-img-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* drag/select block on gallery thumbs (bg-image divs + any img) + lightbox image */
.sos-gallery-widget img, .sos-gallery-widget .e-gallery-image, .elementor-lightbox img {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none; -webkit-touch-callout: none;
}
/* <<< SOS IMAGE PROTECTION END */

/* >>> SOS GRID LOADMORE START */
/* Portfolio/cap galleries: force a straight CSS grid over the Pro-gallery engine,
   tasteful hover, and a Load-More button (JS-injected) reusing the site button.
   NB: does NOT touch the SOS IMAGE PROTECTION user-select/drag/watermark rules. */
.sos-grid-loadmore .elementor-gallery__container {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  height: auto !important;            /* defeat the Pro engine's absolute height */
}
.sos-grid-loadmore .e-gallery-item {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
  margin: 0 !important;
  aspect-ratio: 3 / 2;                /* equal-height cells */
  overflow: hidden;
  display: block;
}
.sos-grid-loadmore .e-gallery-item .e-gallery-image,
.sos-grid-loadmore .e-gallery-item .elementor-gallery-item__image {
  width: 100% !important; height: 100% !important;
  background-size: cover !important; background-position: center center !important;
  transition: transform .3s ease;
}
/* tasteful hover: zoom + dark overlay fade + thin SOS-green frame */
.sos-grid-loadmore .e-gallery-item::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 0 solid var(--brand-green, #9AC943);
  background: rgba(26,27,30,0); transition: background .3s ease, border-width .3s ease;
}
.sos-grid-loadmore .e-gallery-item:hover .e-gallery-image,
.sos-grid-loadmore .e-gallery-item:hover .elementor-gallery-item__image { transform: scale(1.04); }
.sos-grid-loadmore .e-gallery-item:hover::after { background: rgba(26,27,30,0.18); border-width: 2px; }
/* JS load-more reveal animation */
.sos-grid-loadmore .e-gallery-item.sos-revealing { animation: sosFadeIn .35s ease forwards; }
@keyframes sosFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* responsive column steps */
@media (max-width: 1200px) { .sos-grid-loadmore .elementor-gallery__container { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px)  { .sos-grid-loadmore .elementor-gallery__container { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px)  { .sos-grid-loadmore .elementor-gallery__container { grid-template-columns: repeat(2, 1fr) !important; } }
/* Load More button (JS-injected) — reuses .sos-sirrona-btn .sos-sirrona-btn-primary */
.sos-loadmore-wrap { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin: 36px 0 8px; }
.sos-loadmore-btn { background: var(--brand-green, #9AC943); border-color: var(--brand-green, #9AC943); color: var(--charcoal, #1A1B1E); }
.sos-loadmore-btn:hover { background: var(--charcoal, #1A1B1E); border-color: var(--charcoal, #1A1B1E); color: var(--alabaster, #F4F5F4); }
/* <<< SOS GRID LOADMORE END */

/* >>> SOS SPLIT TAG FIX START */
/* The split-tag badge is position:absolute (bottom:24px left:0) but was anchoring to
   its own ~0-height html-widget host (.sos-split-media-taghost / -th, which render
   position:relative), so it floated ABOVE the image instead of overlaying its
   bottom-left. Make the host fill the media box so the tag lands on the image. */
.sos-split-media-taghost,
.sos-split-media-th { position: absolute !important; inset: 0 !important; margin: 0 !important; pointer-events: none; z-index: 2; }
.sos-split-media-taghost .sos-split-tag,
.sos-split-media-th .sos-split-tag { pointer-events: auto; }
/* <<< SOS SPLIT TAG FIX END */

/* >>> SOS PASS4 — HERO ENGINE 1.6.0 (shared-clock slideshow + art direction) >>> */

/* (5) prefers-reduced-motion: no Ken Burns (JS skips it; belt-and-suspenders here),
   soft crossfade instead of the 1.2s ease, progress bars fill statically (JS sets
   scaleX without animating). */
@media (prefers-reduced-motion: reduce) {
  .sos-hero-con .elementor-background-slideshow__slide { transition-property: opacity !important; transition-duration: .3s !important; transition-timing-function: linear !important; }
  .sos-hero-con .elementor-background-slideshow__slide__image { animation: none !important; }
}

/* ── (8) ULTRAWIDE / UPPER BREAKPOINTS — the file previously had ZERO min-width
   rules, which is why >1440 read as a stretched wall. Keep min-height:max(940px,100vh)
   (no height cap); instead grow the CONTAINED lower-left column + type so the hero
   reads intentional on big monitors instead of small-in-a-void. Content stays in a
   centered max-width column (margin:0 auto) and hugs its left edge = contained
   lower-left, never stranded at the far screen edge. */
@media (min-width: 1441px) {
  .sos-hero-content > .e-con-inner { max-width: 1320px; }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(5.5rem, 5.6vw, 6.5rem); }
}
@media (min-width: 1920px) {
  .sos-hero-content > .e-con-inner { max-width: 1440px; padding-bottom: clamp(110px, 12vh, 180px) !important; }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(6.5rem, 4.9vw, 6.9rem); max-width: 15ch; }
  .sos-hero-subhead .elementor-widget-container { font-size: 1.3rem; max-width: 60ch; }
}
/* ≥2200 (32" 2560px monitor): modest scale-up, still contained lower-left */
@media (min-width: 2200px) {
  .sos-hero-content > .e-con-inner { max-width: 1560px; }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(6.9rem, 4.2vw, 8rem); }
  .sos-hero-subhead .elementor-widget-container { font-size: 1.4rem; }
  .sos-slide-progress .sos-progress-line { width: 28px; }
}

/* ── (9) RESPONSIVE RE-WEIGHTING — compose at each width; never clip text. ── */
/* Tablet landscape ~1024 */
@media (max-width: 1024px) {
  .sos-hero-con { min-height: 88vh; }
  .sos-hero-content > .e-con-inner { padding-bottom: clamp(64px, 9vh, 110px) !important; }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(2.75rem, 6.2vw, 4rem); max-width: 16ch; }
  .sos-hero-subhead .elementor-widget-container { font-size: 1.05rem; max-width: 52ch; }
}
/* Tablet portrait ~768 (progress strip already hidden ≤768 — kept hidden) */
@media (max-width: 768px) {
  .sos-hero-con { min-height: 84vh; }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(2.5rem, 7.4vw, 3.4rem); }
  .sos-hero-ctas { gap: 12px; }
}
/* Mobile ~390: tight stack, full-width thumb-reachable CTAs, H1 can't overflow */
@media (max-width: 540px) {
  .sos-hero-con { min-height: 92vh; }
  .sos-hero-content > .e-con-inner { padding-bottom: clamp(48px, 9vh, 80px) !important; }
  .sos-hero-eyebrow .elementor-heading-title { font-size: 0.625rem; letter-spacing: 0.2em; margin: 0 0 1rem; }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(2.2rem, 10vw, 3rem); max-width: 18ch; line-height: 0.98; margin: 0 0 22px; }
  .sos-hero-rule { margin: 0 0 22px !important; }
  .sos-hero-subhead .elementor-widget-container { font-size: 1rem; max-width: 100%; margin: 0 0 2rem; }
  .sos-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .sos-hero-ctas > * { width: 100%; }
  .sos-hero-ctas .elementor-button { width: 100%; display: flex; justify-content: center; padding: 16px 24px; }
  .sos-hero-seal { margin-top: 1.75rem; }
}
/* <<< SOS PASS4 END <<< */

/* >>> SOS MOBILE FIX 20260611 START */
/* PART A — hero on short/LANDSCAPE viewports. The bottom-anchored (.sos-hero-con
   justify-content:flex-end) content stack overflowed its TOP under the fixed
   #site-header on short heights, hiding the d1 eyebrow (and H1) behind the header.
   On landscape/short heights, top-anchor the content with header clearance so the
   eyebrow is always visible below the header; shrink/allow the H1 to wrap to fit.
   Height/orientation-based so it catches mobile-landscape regardless of the
   540/768/1024 width tiers (and never touches desktop/ultrawide: height > 640). */
@media (max-width: 1024px) and (orientation: landscape) {
  .sos-hero-con { min-height: 100vh; justify-content: flex-start !important; }
  .sos-hero-content > .e-con-inner {
    padding-top: clamp(132px, 26vh, 156px) !important;
    padding-bottom: clamp(24px, 6vh, 44px) !important;
  }
  .sos-hero-h1 .elementor-heading-title { font-size: clamp(1.7rem, 6.4vh, 2.6rem) !important; max-width: 26ch; margin: 0 0 16px; }
  .sos-hero-eyebrow .elementor-heading-title { margin: 0 0 0.9rem; }
  .sos-hero-rule { margin: 0 0 14px !important; }
  .sos-hero-subhead .elementor-widget-container { margin: 0 0 1.25rem; }
  .sos-hero-seal { margin-top: 1rem; }
}

/* PART B — iPad-portrait / tablet home hero seal. The .sos-hero-seal is a
   full-width e-con container forced to inline-flex; at <=1024 the frosted pill was
   too tight and left-clipped the "CERTIFIED MATERIAL" label. Pin to fit-content,
   no-wrap label, visible overflow so the pill hugs mark+label without clipping. */
@media (max-width: 1024px) {
  .sos-hero-content .sos-hero-seal {
    display: inline-flex !important;
    width: -moz-fit-content !important; width: fit-content !important;
    max-width: 100% !important; align-self: flex-start !important;
    overflow: visible !important; flex-wrap: nowrap !important;
  }
  .sos-hero-content .sos-hero-seal .sos-hero-seal-label { white-space: nowrap !important; }
}

/* PART C — commerce finance block (.sos-commerce-finance "Luxury Built Within
   Reach"). Later UNSCOPED !important rules (sos-fin-content max-width:55%,
   sos-fin-img max-width:42% align-self:flex-end) were overriding the tablet stack,
   so on mobile/tablet the copy was cramped-centered and the PLCC card floated and
   overlapped. Force a clean vertical stack: full-width centered copy, then the card
   centered and capped to a sane size. Placed last so source order wins. */
@media (max-width: 1024px) {
  .sos-commerce-finance {
    flex-direction: column !important; align-items: center !important;
    text-align: center !important; gap: 24px !important;
    padding: 44px var(--gutter) !important;
  }
  .sos-commerce-finance .sos-fin-content { flex: 1 1 auto !important; max-width: 100% !important; margin: 0 !important; }
  .sos-commerce-finance .sos-fin-body p { margin-left: auto !important; margin-right: auto !important; max-width: 60ch !important; }
  .sos-commerce-finance .sos-fin-img {
    flex: 0 0 auto !important; max-width: min(260px, 64%) !important;
    align-self: center !important; margin: 4px auto 0 !important;
  }
  .sos-commerce-finance .sos-fin-img img { transform: rotate(-3deg) !important; }
}
@media (max-width: 600px) {
  .sos-commerce-finance { padding: 32px var(--gutter) !important; }
  .sos-commerce-finance .sos-fin-img { max-width: 72% !important; }
}
/* <<< SOS MOBILE FIX 20260611 END */

/* >>> SOS FLYOUT FOOTER 20260611 START */
/* Mobile flyout footer: social row + Schedule CTA + tappable phone/email.
   Reuses .sos-sirrona-btn-primary + the existing .mobile-nav-footer .phone/.email. */
#mobile-nav { overflow-y: auto !important; }
.mobile-nav-footer { gap: 0 !important; padding-top: 28px; }
.mobile-nav-social { display: flex; gap: 14px; margin-bottom: 26px; }
.mobile-nav-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 2px; color: rgba(255,255,255,0.82);
  transition: background .25s ease, border-color .25s ease, color .25s ease; }
.mobile-nav-social a:hover, .mobile-nav-social a:active {
  background: var(--brand-green, #9AC943); border-color: var(--brand-green, #9AC943); color: var(--charcoal, #1A1B1E); }
.mobile-nav-social svg { width: 18px; height: 18px; }
.mobile-nav-cta { display: flex !important; justify-content: center; width: 100%; margin-bottom: 24px;
  padding: 16px 24px !important; font-size: 0.8125rem; }
.mobile-nav-contact { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav-contact .phone { font-family: var(--font-display, "futura-pt", sans-serif); font-size: 28px; font-weight: 700;
  color: var(--brand-green, #9AC943); text-decoration: none; line-height: 1; }
.mobile-nav-contact .email { font-family: sans-serif; font-size: 14px; color: rgba(255,255,255,0.7); text-decoration: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .mobile-nav-logo { width: 140px; margin-bottom: 20px; }
  .mobile-nav-list a { font-size: 18px; padding-bottom: 10px; }
  .mobile-nav-list { gap: 12px; }
  .mobile-nav-footer { padding-top: 18px; }
  .mobile-nav-contact .phone { font-size: 22px; }
}
/* <<< SOS FLYOUT FOOTER 20260611 END */

/* ===== SOS reCAPTCHA DISCLAIMER — added 2026-06-24 ======================
   Small muted disclaimer under BOTH Elementor Pro forms:
     - footer form  (post 269, widget 4355191)
     - contact form (post 341, widget p162l)
   Background check (2026-06-24): BOTH forms sit on DARK backgrounds —
     269: .sos-contact-section = var(--brand-black) + dark gradient.
     341: .sos-contact-section + Elementor ::before overlay
          (background-color: soscharcoal #1A1B1E @ --overlay-opacity:0.9)
          over the cedar privacy-slat image -> effectively ~90% charcoal.
   So the light-grey-on-dark rule below is correct for BOTH instances;
   no dark-text variant needed.
   ======================================================================= */
.sos-recaptcha-disclaimer,
.sos-recaptcha-disclaimer p {
    font-family: var(--font-body, Arial, sans-serif);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin-top: 12px;
    margin-bottom: 0;
    color: rgba(255,255,255,0.55);
}
.sos-recaptcha-disclaimer a {
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}
/* ===== END SOS reCAPTCHA DISCLAIMER ==================================== */

/* >>> SOS TOPBAR CONTACT ICONS 2026-06-24 (rev: CSS mask) ============
   Custom phone + envelope SVGs (media lib 1234/1235) rendered via CSS mask
   so they inherit the topbar link colour (white, hover -> brand green) and
   stay one consistent colour regardless of the files' baked-in greens.
   Root-relative mask URLs survive the launch domain flip.
   NOTE: #topbar is display:none at <=1024 (mobile contact lives in the
   flyout footer .mobile-nav-contact with its own tappable tel:/mailto:
   links), so an "icons-only on mobile" topbar rule would never apply. */
.topbar-contact a.topbar-phone,
.topbar-contact a.topbar-email { display: inline-flex; align-items: center; gap: 7px; }
.topbar-contact .topbar-ico {
    display: inline-block; height: 14px; flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.topbar-contact .topbar-phone .topbar-ico { width: 9px; -webkit-mask-image: url(/wp-content/uploads/2026/06/sos-phone-icon.svg); mask-image: url(/wp-content/uploads/2026/06/sos-phone-icon.svg); }
.topbar-contact .topbar-email .topbar-ico { width: 14px; -webkit-mask-image: url(/wp-content/uploads/2026/06/sos-email-icon.svg); mask-image: url(/wp-content/uploads/2026/06/sos-email-icon.svg); }
/* <<< SOS TOPBAR CONTACT ICONS END =================================== */

/* >>> SOS FOOTER SOCIAL ICONS 2026-06-24 ============================
   5-icon social row in the footer brand column (footer is dark #000):
   FB / IG / X / LinkedIn / YouTube, reusing the header social SVG markup.
   Muted white icons, green hover (matches .topbar-social treatment). */
.footer-social { display: flex; gap: 14px; align-items: center; margin-top: 20px; }
.footer-social a { color: rgba(255,255,255,0.5); transition: color 0.3s; display: inline-flex; }
.footer-social a:hover { color: #9AC943; }
/* <<< SOS FOOTER SOCIAL ICONS END =================================== */

/* SOS reCAPTCHA badge hide — start */
/* Badge hidden site-wide; it floats bottom-right and collides with the back-to-top
   button. The legally-required disclaimer text is already present under BOTH forms
   (widgets 2095e07 / ddd38a2), so this is compliant. visibility:hidden (NOT
   display:none) so the reCAPTCHA v3 script still loads and scores. */
.grecaptcha-badge { visibility: hidden !important; }
/* SOS reCAPTCHA badge hide — end */

/* SOS custom hamburger — start */
/* Stacked-plank trigger: three descending-width lines (top 100% / mid ~70% / bottom ~45%)
   evoking stacked timber, animating to a centered X on open. Open state keys off
   #mobile-nav-trigger[aria-expanded="true"] (sirrona.js sets aria-expanded). Button
   markup, IDs, aria, and JS hooks are unchanged — CSS only. Lines sit in a flex column
   (.hamburger gap:5px), so centers are 7px apart -> translateY ±7px forms the X on the
   middle line; both X arms set to width:30px (left-aligned, same centre) for symmetry. */
.ham-line { width: 30px; height: 2px; background: #F4F5F4; display: block; transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease), width var(--t-base) var(--ease); }
.ham-line-1 { width: 30px; }
.ham-line-2 { width: 21px; }
.ham-line-3 { width: 13px; }
#mobile-nav-trigger[aria-expanded="true"] .ham-line-1 { transform: translateY(7px) rotate(45deg); }
#mobile-nav-trigger[aria-expanded="true"] .ham-line-2 { opacity: 0; }
#mobile-nav-trigger[aria-expanded="true"] .ham-line-3 { width: 30px; transform: translateY(-7px) rotate(-45deg); }
/* SOS custom hamburger — end */

/* SOS centered-subhead fix — start */
/* ROOT CAUSE: the global `p { max-width: 68ch }` rule (no auto side-margins) is
   correct for LEFT-aligned body copy, but it left-pins any paragraph inside a
   CENTERED block, so centered subheads render off-centre (text centres inside a
   left-pinned 68ch box). Fix = centre the capped block ONLY in centered contexts.
   Scoped to centered containers, so intentionally left-aligned paragraphs (which
   keep their own explicit margins / are outside these contexts) are unaffected.
   Specificity (0,1,1) beats bare-class margins like .sosx-sub{margin:0}, so no
   !important needed. */
.text-center p,
.sos-sirrona-section-head p,
.sos-bento-head p,
.sos-commerce-head p,
.sos-gallery-head p,
.sos-process-head p,
.sos-testi-head p,
.sos-intent-inner p,
.sos-cta-tease p,
.sosx-head p { margin-left: auto; margin-right: auto; }
/* SOS centered-subhead fix — end */

/* >>> SOS PROCESS MOBILE FIX 2026-06-25 — start (CSS-only, mobile-scoped; desktop untouched) */
/* FIX 1 — kill the mobile scroll FLASH. Cause: the cedar overlay on
   .sos-process-section::after uses `filter: grayscale(100%) contrast(1.15)`; a CSS
   filter on this tall absolutely-positioned layer re-rasterizes per scroll frame on
   mobile, so the section flickers in-view scrolling up or down. Drop the filter on
   touch widths (a plain background-image composites with the scroll = no repaint).
   Desktop (>768px) keeps the grayscale look. Section stays alabaster (it is a LIGHT
   section, not dark — so no bg-color mask needed). */
@media (max-width: 768px) {
  .sos-process-section::after { filter: none !important; opacity: 0.10 !important; }
}

/* FIX 2 + 3 — phone (<=600px = the existing 1-column layout): number beside title,
   body full-width below; tighten vertical spacing so the section reads tight. */
@media (max-width: 600px) {
  /* number + title share row 1; body wraps to row 2 (flex-wrap on the step) */
  .sos-process-step { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 14px !important; padding: 18px var(--gutter) !important; }
  .sos-process-step > .sos-step-num   { width: auto !important; flex: 0 0 auto !important; }
  .sos-process-step > .sos-step-title { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
  .sos-process-step > .sos-step-body  { width: 100% !important; flex: 0 0 100% !important; margin-top: 6px !important; }
  /* scale the big watermark number down to sit inline beside the h3 */
  .sos-process-step .sos-step-num .elementor-heading-title { font-size: 2rem !important; opacity: 0.55 !important; margin: 0 !important; line-height: 1 !important; }
  .sos-process-step .sos-step-title .elementor-heading-title { margin: 0 !important; }
  /* tighten section spacing (was head 96/64, grid bottom 112, step 32) */
  .sos-process-head { padding: 52px var(--gutter) 24px !important; }
  .sos-process-grid { padding-bottom: 48px !important; }
}
/* <<< SOS PROCESS MOBILE FIX — end */

/* >>> SOS footer mobile relayout 2026-06-25 — start */
/* (Breadcrumb wrap rule REVERTED 2026-06-25 — Aaron preferred the prior single-line
   breadcrumb over the two-line wrap; .sos-interior-crumb is back to its default nowrap.) */
/* FOOTER — Legal is a REAL .footer-grid column (markup in widget f00ter02). Desktop =
   brand 2fr + four 1fr link columns (Structures / Company / Service Area / Legal). */
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
/* Phones: columns two-up, brand spans the full top row (Legal beside Service Area). */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
}
/* <<< SOS footer mobile relayout — end */


/* >>> SOS mobile fixes 2026-06-25 (back-to-top clearance + homepage hero header clearance) — start */
/* FIX 4 — the fixed #sos-stt-btn (bottom:28 + 48px tall ~= 76px footprint, bottom-right)
   covered the footer credit/copyright on mobile. Reserve bottom clearance on the bottom bar
   so footer content never sits under the button. */
@media (max-width: 768px) {
  .footer-bottom-inner { padding-bottom: 84px; }
}
/* FIX 5 — HOMEPAGE hero only: the bottom-anchored (.sos-hero-con justify-content:flex-end)
   content stack overflowed its TOP under the fixed header on short PORTRAIT phones, hiding
   the eyebrow. Top-anchor with header clearance on portrait phones (mirrors the existing
   landscape PART A). Interior heroes (§12 #11) untouched; desktop/tablet untouched. */
@media (max-width: 767px) and (orientation: portrait) {
  .sos-hero-con { justify-content: flex-start !important; }
  .sos-hero-content > .e-con-inner { padding-top: calc(var(--sos-header-h, 120px) + 24px) !important; }
}
/* <<< SOS mobile fixes — end */
/* >>> SOS breadcrumb shrink-to-fit 2026-06-25 — start */
/* FIX 1c — after reverting the wrap, the single-line breadcrumb pill clipped ~24px on small
   phones (content 326 > pill 302 @390). Tighten letter-spacing + separator margins so it
   fits ONE line inside the dark pill (no wrap, no clip). Scoped to small phones only. */
@media (max-width: 480px) {
  .sos-interior-crumb,
  .sos-interior-crumb a,
  .sos-interior-crumb span { letter-spacing: 0.05em !important; }
  .sos-interior-crumb .sep { margin: 0 0.28rem !important; }
}
/* <<< SOS breadcrumb shrink-to-fit — end */