/* ================================================================
   responsive.css v4 — SDB+D mobile layer, HOMEPAGE ONLY
   10-photo Ken Burns rotation, 9s per photo (90s cycle).
   Pure CSS, no JavaScript. Desktop/tablet (768px+) unaffected.

   v4 FIX: v3 shipped corrupted animation delays (duplicates plus
   three dead windows) which let the base image show through between
   slides. Delays are now generated as an exact arithmetic sequence,
   and each slide HOLDS at full opacity until the next has finished
   fading in on top of it — so the base is never exposed mid-cycle.
   ================================================================ */

@media only screen and (max-width: 767px) {
    .sdb-welcome{padding-top:60px;}  /* WELCOME breathing room under the hero on mobile: settled gap was 0px (the fu entrance's translateY(30px) masked it in naive measurements); desktop rhythm ~79px */

    /* ---- Hero stage ---- */
    .slider_bg {
        top: 0 !important;
        height: 55vw !important;
        max-height: 280px;
        background: url(../images/slider_1.jpg) center center / cover no-repeat !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .slider_bg .slider,
    .slider_bg #nav,
    .slider_bg .banner { display: none !important; }

    /* ---- Ken Burns layers ---- */
    .kb { display: block !important; position: absolute; top:0; right:0; bottom:0; left:0; }
    .kb-s {
        position: absolute; top:0; right:0; bottom:0; left:0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        animation-duration: 90s, 90s;
        -webkit-animation-duration: 90s, 90s;
        animation-timing-function: linear, linear;
        -webkit-animation-timing-function: linear, linear;
        animation-iteration-count: infinite, infinite;
        -webkit-animation-iteration-count: infinite, infinite;
        animation-fill-mode: both, both;
        -webkit-animation-fill-mode: both, both;
        will-change: opacity, transform;
    }
    .kb-s1  { background-image: url(../images/slider_1.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 0s, 0s; }
    .kb-s2  { background-image: url(../images/slider_2.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 9s, 9s; }
    .kb-s3  { background-image: url(../images/slider_3.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 18s, 18s; }
    .kb-s4  { background-image: url(../images/slider_4.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 27s, 27s; }
    .kb-s5  { background-image: url(../images/slider_5.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 36s, 36s; }
    .kb-s6  { background-image: url(../images/slider_6.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 45s, 45s; }
    .kb-s7  { background-image: url(../images/slider_7.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 54s, 54s; }
    .kb-s8  { background-image: url(../images/slider_8.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 63s, 63s; }
    .kb-s9  { background-image: url(../images/slider_9.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 72s, 72s; }
    .kb-s10 { background-image: url(../images/slider_10.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 81s, 81s; }

    /* Fade in over 2.0% (1.8s), hold through the NEXT slide's
       fade-in (10.0% + 2.0%), then fade out while fully covered. */
    @keyframes kbFade {
        0%      { opacity: 0; }
        2.0%   { opacity: 1; }
        12.0%  { opacity: 1; }
        14.0%  { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes kbZoomIn {
        0%      { transform: scale(1)    translateX(0); }
        14.0%  { transform: scale(1.12) translateX(-2%); }
        100%    { transform: scale(1.12) translateX(-2%); }
    }
    @keyframes kbZoomOut {
        0%      { transform: scale(1.12) translateX(2%); }
        14.0%  { transform: scale(1)    translateX(0); }
        100%    { transform: scale(1)    translateX(0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .kb-s { animation-name: kbFade; transform: none; }
    }

    /* ---- Close the old slider's spacing gap ---- */
    #page1 #content { padding-top: 24px !important; }

    /* ---- Fluid widths for modern phones ---- */
    .main { width: 94% !important; }
    .container_12 { width: 100% !important; }
    .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3,
    .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6,
    .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9,
    .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
        width: 100% !important;
    }
    #content img, footer img { max-width: 100%; height: auto; }

    /* ================= new homepage lead block ================= */
    /* Template pushed content 230px down to clear the tall slider.
       With the short mobile hero that becomes dead space. */
    /* Template pins the header to 755px for the old 604px desktop
       slider; on a phone that leaves ~140px of dead space below the
       short hero. Let the header size to its contents instead. */
    #page1 header { height: auto !important; }
    #page1 #content { padding-top: 0 !important; }
    #page1 .bg-1 > div { padding-top: 0 !important; }

    /* reveal the mobile-only blocks — flex containers keep flex */
    .sdb-lead, .sdb-ba-wrap { display:block !important; }
    .sdb-nums, .sdb-phases { display:flex !important; }
    .sdb-lead { padding: 20px 18px 2px; }
    .sdb-tag { color:#fff; font-size:19px; line-height:1.42; margin:0 0 9px; }
    .sdb-tag span { color:#C5A55A; }
    .sdb-sub { color:#c9c6bf; font-size:13px; line-height:1.62; margin:0; }

    .sdb-nums { display:flex; margin:18px 0 0; border-top:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a; }
    .sdb-nums div { flex:1; text-align:center; padding:16px 4px; border-right:1px solid #4a4a4a; }
    .sdb-nums div:last-child { border-right:0; }
    .sdb-nums b { display:block; color:#D9BC72; font-size:30px; font-weight:700; line-height:1.15;
                  letter-spacing:.5px; }
    .sdb-nums span { display:block; color:#b3afa7; font-size:11px; margin-top:5px;
                     letter-spacing:.7px; text-transform:uppercase; }

    .sdb-phases { display:flex; align-items:center; justify-content:space-between; padding:15px 18px 4px; }
    .sdb-phases span { color:#e6e3dc; font-size:11.5px; letter-spacing:.7px; }
    .sdb-phases i { color:#C5A55A; font-style:normal; font-size:15px; }

    /* ================= raw land to finished home ================= */
    .sdb-ba-wrap { padding:20px 18px 6px; }
    .sdb-ba-h { color:#fff; font-size:14px; margin:0 0 9px; letter-spacing:.3px; }
    .sdb-ba { position:relative; width:100%; overflow:hidden; border-radius:4px;
              cursor:ew-resize; -webkit-user-select:none; user-select:none;
              touch-action:pan-y; line-height:0; }
    .sdb-ba img { display:block; width:100%; height:auto; }
    /* soft blend: the "after" image dissolves across a band that
       travels with the line, instead of a hard cut */
    .sdb-ba .sdb-ba-a { position:absolute; top:0; left:0;
                        -webkit-mask-image:linear-gradient(to right, transparent 43%, #000 57%);
                        mask-image:linear-gradient(to right, transparent 43%, #000 57%); }
    /* gold haze marking where the change is happening */
    .sdb-ba-glow { position:absolute; top:-10%; bottom:-10%; left:50%; width:64px;
                   transform:translateX(-50%); pointer-events:none;
                   background:radial-gradient(ellipse at center,
                       rgba(197,165,90,.55) 0%, rgba(197,165,90,.18) 45%, transparent 72%);
                   -webkit-filter:blur(9px); filter:blur(9px); }
    /* residential / commercial tabs */
    .sdb-tabs { display:flex; margin:0 0 10px; border-bottom:1px solid #3d3d3d; }
    .sdb-tab { flex:1; text-align:center; padding:9px 4px; font-size:11px; letter-spacing:.7px;
               color:#8a8a8a; background:none; border:0; border-bottom:2px solid transparent;
               margin-bottom:-1px; font-family:inherit; cursor:pointer; -webkit-appearance:none; }
    .sdb-tab.sdb-on { color:#C5A55A; border-bottom-color:#C5A55A; }
    /* S3: 4 tabs must fit one row at 320px */
    @media (max-width: 359px) {
        .sdb-tab { font-size:10px; letter-spacing:.4px; padding:9px 2px; }
    }
    .sdb-ba-line { position:absolute; top:0; bottom:0; width:2px; background:#C5A55A; left:50%; }
    .sdb-ba-knb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                  width:30px; height:30px; border-radius:50%; background:#C5A55A; color:#1a1a1a;
                  font-size:13px; line-height:30px; text-align:center; }
    .sdb-ba-tag { position:absolute; bottom:9px; font-size:9.5px; letter-spacing:1.1px; font-style:normal;
                  font-weight:700; line-height:1.2; color:#fff; background:rgba(0,0,0,.58);
                  padding:4px 9px; border-radius:3px; }
    .sdb-ba-l { left:9px; } .sdb-ba-r { right:9px; }
    .sdb-ba-n { color:#8a8a8a; font-size:11px; margin:8px 0 0; }
    /* below-grade link styled as a button: centred, 52px tap target,
       filled gold arrow circle. Arrow drifts to signal it navigates. */
    .sdb-bg-link { position:relative; display:flex; align-items:center; justify-content:center;
                   min-height:52px; margin:10px 0 2px; padding:12px 54px 12px 16px;
                   border:1px solid #6a5a33; border-radius:4px;
                   color:#D9BC72 !important; font-size:13px; font-weight:600; letter-spacing:.3px;
                   line-height:1.35; text-align:center; text-decoration:none;
                   background:rgba(197,165,90,.07); -webkit-tap-highlight-color:rgba(197,165,90,.2); }
    .sdb-bg-knb { position:absolute; right:11px; top:50%; transform:translateY(-50%);
                  width:30px; height:30px; border-radius:50%; background:#D9BC72;
                  color:#1f1a10; font-size:15px; line-height:30px; text-align:center;
                  font-weight:700; }
    .sdb-bg-knb > span { display:inline-block; animation:sdbNudge 2.2s ease-in-out infinite;-webkit-animation:sdbNudge 2.2s ease-in-out infinite; }
    @keyframes sdbNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
    /* sheen: a soft gold highlight crossing the bar, then a long rest */
    .sdb-bg-link { overflow:hidden; }
    .sdb-bg-sheen { position:absolute; top:0; bottom:0; left:0; width:110px; pointer-events:none;
                    background:linear-gradient(90deg, transparent, rgba(217,188,114,.26), transparent);
                    transform:skewX(-14deg) translateX(-160px);
                    animation:sdbSheen 5.5s ease-in-out infinite;-webkit-animation:sdbSheen 5.5s ease-in-out infinite;
                    -webkit-animation:sdbSheen 5.5s ease-in-out infinite;-webkit-animation:sdbSheen 5.5s ease-in-out infinite; }
@-webkit-keyframes kbFade {
        0%      { opacity: 0; }
        2.0%   { opacity: 1; }
        12.0%  { opacity: 1; }
        14.0%  { opacity: 0; }
        100%    { opacity: 0; }
    }
    @-webkit-keyframes kbZoomIn {
        0%      { -webkit-transform: scale(1)    translateX(0); }
        14.0%  { -webkit-transform: scale(1.12) translateX(-2%); }
        100%    { -webkit-transform: scale(1.12) translateX(-2%); }
    }
    @-webkit-keyframes kbZoomOut {
        0%      { -webkit-transform: scale(1.12) translateX(2%); }
        14.0%  { -webkit-transform: scale(1)    translateX(0); }
        100%    { -webkit-transform: scale(1)    translateX(0); }
    }
    @-webkit-keyframes sdbNudge { 0%,100%{-webkit-transform:translateX(0)} 50%{-webkit-transform:translateX(4px)} }
    @-webkit-keyframes sdbSheen {
        0%   { -webkit-transform:skewX(-14deg) translateX(-160px); }
        38%  { -webkit-transform:skewX(-14deg) translateX(430px); }
        100% { -webkit-transform:skewX(-14deg) translateX(430px); }
    }

    @keyframes sdbSheen {
        0%   { transform:skewX(-14deg) translateX(-160px); }
        38%  { transform:skewX(-14deg) translateX(430px); }
        100% { transform:skewX(-14deg) translateX(430px); }
    }
    @media (prefers-reduced-motion: reduce){ .sdb-bg-knb > span, .sdb-bg-sheen { animation:none; } .sdb-bg-sheen{ display:none; } }

    /* ================= fade-up on scroll (mobile only) =================
       Sections start 30px low and transparent, then rise into place
       over 1s as they enter the viewport. The .fu-ready class is added
       by script only after IntersectionObserver is confirmed working,
       so if JS fails nothing is ever hidden. */
    .fu-ready .fu { opacity:0; transform:translateY(30px);
                    transition:opacity 1.8s cubic-bezier(.16,.62,.28,1),
                               transform 1.8s cubic-bezier(.16,.62,.28,1);
                    -webkit-transition:opacity 1.8s cubic-bezier(.16,.62,.28,1),
                               -webkit-transform 1.8s cubic-bezier(.16,.62,.28,1); }
    .fu-ready .fu.fu-in { opacity:1; transform:none; -webkit-transform:none; }

    /* Category tiles enter from alternating sides rather than straight up.
       Scoped to .homepage so the footer columns keep the plain fade. */
    .fu-ready .homepage .grid_3.fu:nth-of-type(odd)  { transform:translateX(-90px); -webkit-transform:translateX(-90px); }
    .fu-ready .homepage .grid_3.fu:nth-of-type(even) { transform:translateX(90px);  -webkit-transform:translateX(90px); }
    .fu-ready .homepage .grid_3.fu.fu-in { transform:none !important; -webkit-transform:none !important; }
    /* a translated tile must not widen the page */
    .homepage, .bg-1, #content { overflow-x:hidden; }
    @media (prefers-reduced-motion: reduce) {
        .fu-ready .fu { opacity:1 !important; transform:none !important; transition:none !important; }
    }

    /* ================= gold accents on the existing orange ================= */
    .slider_bg { border-bottom:2px solid #C5A55A !important; }
    /* MORE buttons: table-cell + a border let the box stretch wider
       than tall. Force a square box that includes the border. */
    .button-2 { display:inline-block !important; box-sizing:border-box !important;
                width:88px !important; height:88px !important;
                line-height:84px !important; padding:0 !important;
                border-radius:50% !important; border:2px solid #C5A55A !important;
                text-align:center; vertical-align:middle; }
    .homepage h3 { border-bottom:1px solid #C5A55A; display:inline-block; padding-bottom:4px; }
    /* Each tile opens with an empty spacer <h3>; the rule above was drawing a
       stray gold dash on it. Collapse it. */
    .homepage .aligncenter h3:first-child { border-bottom:0 !important; display:block !important;
                                            height:0; margin:0 !important; padding:0 !important;
                                            overflow:hidden; }
    /* Asymmetric spacing so each category title reads as belonging to the image
       below it, not to the MORE button above it. */
    .homepage .grid_3 { margin-top:56px !important; }
    /* first tile keeps the same gap so it clears the below-grade button */
    .homepage .aligncenter h3 { margin-bottom:8px !important; }

    /* ---- Category tiles: pin to original size ----
       The template's mobile rule (figure img{width:100%}) sized the
       circles against the old 260px column; the fluid column let
       them balloon. Pin to the template's own 250px and center. */
    .homepage .grid_3 .aligncenter { max-width: 250px; margin: 0 auto; }
    .homepage .grid_3 figure img,
    .aligncenter figure img { width: 250px !important; height: auto; }
    /* Center the orange MORE button under each circle (template
       left-padded it against the old fixed column) */
    .homepage .button2_wr {
        padding-left: 0 !important;
        width: 88px;
        margin: -44px auto 0 !important;
        position: relative;
    }
}

@media only screen and (max-width: 479px) {
    .main { width: 94% !important; }
    .container_12,
    .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3,
    .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6,
    .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9,
    .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
        width: 100% !important;
    }
}

/* ============================================================
   DESKTOP HOMEPAGE BLOCKS — >=768px (added 2026-08-01)
   Reveals the existing mobile-first homepage sections on
   desktop/tablet. No rules here touch <768px, the hero (.slider),
   the Ken Burns block (.kb), tiles, or any other page.
   ============================================================ */
@media only screen and (min-width: 768px) {

  .sdb-lead, .sdb-ba-wrap { display: block !important; }
  .sdb-nums, .sdb-phases { display: -webkit-flex !important; display: flex !important; }

  .sdb-lead { text-align: center; padding: 26px 0 4px; }
  .sdb-lead:before { content: ""; display: block; width: 13px; height: 13px;
    border-right: 2px solid #C5A55A; border-bottom: 2px solid #C5A55A;
    margin: 0 auto 16px; opacity: .85;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
    -webkit-animation: sdbCue 2.4s ease-in-out infinite; animation: sdbCue 2.4s ease-in-out infinite; }
  @-webkit-keyframes sdbCue { 0%,100% { -webkit-transform: translateY(0) rotate(45deg); } 50% { -webkit-transform: translateY(6px) rotate(45deg); } }
  @keyframes sdbCue { 0%,100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
  .sdb-ba-h:before { content: ""; display: block; width: 56px; height: 1px;
    background: rgba(197,165,90,.55); margin: 0 auto 16px; }
  .sdb-tag { font: 300 34px/1.35 Georgia, "Times New Roman", serif; color: #cfccc5; letter-spacing: .2px; }
  .sdb-tag span { color: #C5A55A; font-style: italic; }
  .sdb-sub { margin-top: 10px; font: 400 15px/1.6 Arial, sans-serif; color: #8a8a8a; letter-spacing: .6px; }

  .sdb-nums { -webkit-justify-content: center; justify-content: center; padding: 18px 0 2px; }
  .sdb-nums > div { margin: 0 45px; }
  .sdb-nums > div { text-align: center; }
  .sdb-nums b { display: block; font: 700 40px/1 Georgia, serif; color: #C5A55A; }
  .sdb-nums span { display: block; margin-top: 6px; font: 400 12px/1 Arial, sans-serif; color: #8a8a8a; letter-spacing: 2px; text-transform: uppercase; }

  .sdb-phases { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 14px 0 20px; font: 700 15px/1 Arial, sans-serif; color: #b3afa7; letter-spacing: 3px; }
  .sdb-phases i { color: #C5A55A; font-style: normal; font-size: 22px; }
  .sdb-phases span, .sdb-phases i { margin: 0 11px; }

  .sdb-ba-wrap { width: 96vw; max-width: 2000px; margin: 0 auto 10px; text-align: center; }
  .sdb-ba-h { font: 300 24px/1.3 Georgia, serif; color: #cfccc5; margin-bottom: 12px; }
  .sdb-tabs { margin-bottom: 10px; }
  .sdb-tab { background: none; border: 1px solid #6a6a6a; color: #b3afa7; font: 700 12px/1 Arial, sans-serif; letter-spacing: 2px; padding: 10px 26px; cursor: pointer; }
  .sdb-tab.sdb-on { background: #C5A55A; border-color: #C5A55A; color: #fff; }
  .sdb-ba { position: relative; width: 100%; height: 0; padding-bottom: 34.54%; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.35); }
  .sdb-ba img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
  .sdb-ba-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,.85); }
  .sdb-ba-glow { position: absolute; top: 0; bottom: 0; left: 50%; width: 26px; margin-left: -13px; background: -webkit-radial-gradient(center, ellipse, rgba(197,165,90,.55), rgba(197,165,90,0) 70%); background: radial-gradient(ellipse at center, rgba(197,165,90,.55), rgba(197,165,90,0) 70%); }
  .sdb-ba-knb { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: #C5A55A; color: #fff; font-size: 19px; }
  .sdb-ba-tag { position: absolute; bottom: 16px; font: 700 13px/1 Arial, sans-serif; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); font-style: normal; }
  .sdb-ba-l { left: 22px; }
  .sdb-ba-r { right: 22px; }
  .sdb-ba-n { margin-top: 12px; font: 400 13px/1 Arial, sans-serif; color: #8a8a8a; letter-spacing: .5px; }

  .sdb-bg-link { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 760px; max-width: 92vw; margin: 26px auto 44px; padding: 0 66px 0 30px; height: 64px; line-height: 64px; background: #1f1f1f; color: #e6e3dc; font: 700 15px/64px Arial, sans-serif; letter-spacing: 1px; text-align: center; overflow: hidden; }
  .sdb-bg-knb { position: absolute; right: 12px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #C5A55A; }
  .sdb-bg-knb span { display: block; line-height: 40px; color: #fff; font-size: 18px; }
  .sdb-bg-sheen { display: none; }
}

/* resources footer column is desktop-only for now (C9: mobile pixel-invariant) */
@media only screen and (max-width: 767px) { .sdb-res-col { display: none !important; } }

/* 768-995px: the template positions content assuming a 490px hero, but the tms
   slider renders 604px (inline height, not overridable) and bleeds ~131px over
   the flow. Pre-existing for years, previously hidden by empty padding. Clear it. */
@media only screen and (min-width: 768px) and (max-width: 995px) {
  .sdb-lead { padding-top: 165px; }
}
/* Respect reduced motion for the new cue */
@media (prefers-reduced-motion: reduce) {
  .sdb-lead:before { -webkit-animation: none !important; animation: none !important; }
}

/* CTA hover (desktop): one-pass gold sheen + 2px lift/shadow + arrow -> MORE-button orange */
@media only screen and (min-width: 768px) {
  .sdb-bg-link { -webkit-transition: -webkit-transform .25s ease, box-shadow .25s ease;
                 transition: transform .25s ease, box-shadow .25s ease; }
  .sdb-bg-knb  { -webkit-transition: background .25s ease; transition: background .25s ease; }
  .sdb-bg-link:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px);
                       box-shadow: 0 8px 22px rgba(0,0,0,.5); }
  .sdb-bg-link:hover .sdb-bg-knb { background: #e04c29; }
  .sdb-bg-link:hover .sdb-bg-sheen { display: block; position: absolute; top: 0; bottom: 0;
    width: 120px; left: -15%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(197,165,90,.35) 50%, rgba(255,255,255,0) 100%);
    -webkit-animation: sdbSheen .55s ease-out forwards; animation: sdbSheen .55s ease-out forwards; }
  @-webkit-keyframes sdbSheen { from { left: -15%; } to { left: 110%; } }
  @keyframes sdbSheen { from { left: -15%; } to { left: 110%; } }
}
/* Reduced motion: keep the color cue, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .sdb-bg-link:hover { -webkit-transform: none !important; transform: none !important; }
  .sdb-bg-link:hover .sdb-bg-sheen { display: none !important;
    -webkit-animation: none !important; animation: none !important; }
}

/* second caption line (e.g. FULL PERMIT under FINISHED SPACE), all widths */
.sdb-ba-sub { display: block; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; opacity: 1; margin-top: 2px; }
.sdb-ba-sub:empty { display: none !important; }

/* Desktop/tablet: gold ring on the tile MORE buttons, matching mobile.
   NOTE: desktop .button-2 is display:table-cell, where a real border sits
   outside the box and distorts the circle (HANDOFF gotcha). box-shadow
   draws the ring without affecting layout at all. */
@media only screen and (min-width: 768px) {
  .button-2 { box-shadow: inset 0 0 0 2px #C5A55A; }
}

/* Mobile below-grade CTA restyled to match the desktop bar (solid dark,
   light text, gold knob) while keeping the mobile arrow-nudge animation. */
@media only screen and (max-width: 767px) {
  .sdb-bg-link { background: #1f1f1f !important; border: 0 !important; border-radius: 0 !important;
                 color: #e6e3dc !important; font-weight: 700 !important; letter-spacing: 1px !important; }
  .sdb-bg-knb { background: #C5A55A !important; color: #fff !important; }
}

/* ============================================================
   FOUNDER FIGURE — MOBILE (silhouette-wrapped in the WHY US column)
   S3 = static rest state below. The S4 scroll driver animates INTO
   this state; prefers-reduced-motion and no-JS fall back to exactly
   this (the figure simply sits at rest). Desktop figure is a separate
   build and is hidden at >=768 for now.
   ============================================================ */
/* Desktop founder: SEPARATE element parented directly to .bg-1>div, which
   sits ABOVE .wrapper's overflow-x:hidden — so the container cannot clip him.
   (The mobile figure must stay inside the article for shape-outside; on
   desktop the article is position:relative, so anything inside it clips.)
   left is content-relative: 50% + 250px = the why-us column's right edge
   + 20px gap at ANY viewport width. Feet bottom-anchored so he stays
   grounded while height scales. Stepped heights are the fallback for
   browsers without min(); min() refines where supported. Hidden below
   1024 (mobile uses the in-article silhouette figure instead). */
#content img.sdb-founder-d { display: none; }
@media only screen and (min-width: 1024px) {
  .bg-1 > div { position: relative; }
  #content img.sdb-founder-d {
    display: block;
    position: absolute;
    left: calc(50% + 250px);
    bottom: 127px;
    height: 380px;
    height: min(620px, calc((50vw - 310px) * 1.63));
    width: auto;
    z-index: 3;
    pointer-events: none;
    -webkit-filter: drop-shadow(0 18px 30px rgba(0,0,0,.26));
            filter: drop-shadow(0 18px 30px rgba(0,0,0,.26));
  }
}
@media only screen and (min-width: 1200px) {
  #content img.sdb-founder-d {
    height: 540px;
    height: min(620px, calc((50vw - 310px) * 1.63));
  }
}
@media only screen and (min-width: 1440px) {
  #content img.sdb-founder-d {
    height: 620px;
    height: min(620px, calc((50vw - 310px) * 1.63));
  }
}
@media only screen and (min-width: 768px) {
  #content img.sdb-founder-m { display: none; }
}
@media only screen and (max-width: 767px) {
  /* band clips the intentional right-edge crop AND contains the S4
     horizontal sweep so neither can spawn a horizontal scrollbar */
  .bg-1 { overflow: hidden; }
  /* selector must out-specify the template's #content img {height:auto}
     and .homepage .grid_3 img {width:100%} */
  #content img.sdb-founder-m {
    float: right;
    height: 280px;
    width: auto;
    margin: 2px -20px 6px 0;                 /* slight grounded right-edge crop */
    shape-outside: url(../images/jon-cutout-m.png);
    shape-margin: 10px;                       /* text hugs the silhouette */
    position: relative;
    z-index: 2;                               /* above the band's crosshatch background */
    pointer-events: none;
    -webkit-filter: drop-shadow(0 10px 14px rgba(0,0,0,.30));
            filter: drop-shadow(0 10px 14px rgba(0,0,0,.30));
  }
}

/* ===== three-phase cascade (sdb-phase) ===== */
.sdb-phase{overflow:visible;}   /* release wrapper clearfix clip: ring overhangs figure by 7.5px; row text is always taller than the 63px float, so containment is unaffected */
.sdb-phase figure.img-indent-l{position:relative;margin-left:8px;}  /* clears the outer grid wrapper's clip for the 7.5px ring overhang */
.sdb-phase figure.img-indent-l img{display:block;}
.sdb-ring{position:absolute;left:50%;top:50%;margin-left:-39px;margin-top:-39px;width:78px;height:78px;pointer-events:none;}
.sdb-thread{position:absolute;width:3px;background:#C8A24B;border-radius:2px;pointer-events:none;}
@media (prefers-reduced-motion: no-preference){
  .sdb-js .sdb-phase{opacity:0;transform:translateY(18px);}
  .sdb-js .sdb-thread{transform:scaleY(0);transform-origin:top;}
  .sdb-run .sdb-phase{opacity:1;transform:none;
    transition:opacity .38s ease-out,transform .38s cubic-bezier(.22,.9,.35,1);}
  .sdb-run .sdb-phase:nth-of-type(1){transition-delay:0s;}
  .sdb-run .sdb-phase:nth-of-type(2){transition-delay:1s;}
  .sdb-run .sdb-phase:nth-of-type(3){transition-delay:2.05s;}
  .sdb-run .sdb-phase .sdb-ring circle{transition:stroke-dashoffset .56s cubic-bezier(.4,0,.3,1);stroke-dashoffset:0;}
  .sdb-run .sdb-phase:nth-of-type(1) .sdb-ring circle{transition-delay:.25s;}
  .sdb-run .sdb-phase:nth-of-type(2) .sdb-ring circle{transition-delay:1.3s;}
  .sdb-run .sdb-phase:nth-of-type(3) .sdb-ring circle{transition-delay:2.35s;}
  .sdb-run .sdb-thread{transform:scaleY(1);transition:transform .42s cubic-bezier(.4,0,.3,1);}
  .sdb-run .sdb-th1{transition-delay:.7s;}
  .sdb-run .sdb-th2{transition-delay:1.75s;}
}
@media (prefers-reduced-motion: reduce){
  .sdb-ring circle{stroke-dashoffset:0;}
}