/* Skyway homepage SEO restructure - PREVIEW CSS (v2).
   Additive only. The service bands, cards, container and buttons are the LIVE site's own classes
   (.home-services, .services-container, .services-content.services-dark, .cs-container, .cs-button-6),
   so this file only adds: the mirror, the cascade, the logo carousel, and the sections the live page lacks.

   Palette = brand files in ~/Downloads/Skyway Branding Assets: navy #060c30, blue #3c6cfc, amber #f6a81e.
   The theme's own values differ slightly (#181a31 / #3c72e7 / #f3b13d); this :root override makes the
   preview follow the brand files. Fonts stay Jost / Baskervville. */
:root{--primary:#3c6cfc;--primaryDark:#060c30;--secondary:#f6a81e;--buttonHoverColor:#2f58e0;--sw-link:#2347c8;--sw-ground:#f9f9fa}

h2,h3{text-wrap:balance}
.sw-sec-head p,.sw-where-copy p,.sw-band-lead,.sw-faq details p,.sw-when-grid p{text-wrap:pretty;max-width:65ch}
.sw-center{text-align:center}

/* ---- logos: live .services-zero ground, two counter-scrolling rows ---- */
.sw-logos{padding-bottom:clamp(3rem,5vw,4.5rem);overflow:hidden}
.sw-marquee{margin-top:2.5rem;display:grid;gap:1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sw-track{display:flex;gap:1rem;list-style:none;margin:0;padding:0;width:max-content;animation:sw-left 90s linear infinite}
.sw-track--b{animation-name:sw-right;animation-duration:100s}
.sw-marquee:hover .sw-track{animation-play-state:paused}
.sw-track li{flex:none;width:clamp(11rem,16vw,15rem)}
.sw-track a{display:block;border-radius:.5rem;box-shadow:0 2px 10px rgba(6,12,48,.1);overflow:hidden;background:#fff;transition:box-shadow .2s}
.sw-track a:hover,.sw-track a:focus-visible{box-shadow:0 8px 24px rgba(6,12,48,.22)}
.sw-track img{display:block;width:100%;height:auto}
@keyframes sw-left{to{transform:translateX(-50%)}}
@keyframes sw-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---- service bands (live classes) + mirror + cascade ---- */
.sw-band-lead{margin:1.25rem 0 0;font-size:1.2rem;line-height:1.5;color:#fff}
.services-three .sw-band-lead{color:var(--primaryDark)}
.sw-band-lead a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.sw-band-lead a:hover,.sw-band-lead a:focus-visible{text-decoration-thickness:2px}
.sw-hub{display:inline-block;margin-top:1.25rem;font-weight:600;font-size:1.1rem;color:#fff;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.1rem}
.services-three .sw-hub{color:var(--primaryDark)}
.sw-hub:hover{opacity:.8}
.services-three .services-subtitle{color:var(--primaryDark)}
.sw-band a.services-content{display:block;text-decoration:none}
@media(min-width:48rem){.services-flip .services-container{flex-direction:row-reverse}}
@media(min-width:64rem){
  .sw-band .services-col-2>a:nth-of-type(odd){margin-right:3.5rem}
  .sw-band .services-col-2>a:nth-of-type(even){margin-left:3.5rem}
  .services-flip .services-col-2>a:nth-of-type(odd){margin-right:0;margin-left:3.5rem}
  .services-flip .services-col-2>a:nth-of-type(even){margin-left:0;margin-right:3.5rem}
}

/* ---- shared section scaffolding ---- */
.sw-when,.sw-why,.sw-faq,.sw-where{padding:var(--sectionPadding)}
.sw-sec-head{max-width:52rem;margin:0 auto 2.5rem;text-align:center}
.sw-sec-head h2,.sw-where-copy h2{margin:0 0 1rem;color:var(--headerColor)}
.sw-sec-head p{margin:0 auto}

/* ---- when: staggered cards, no numerals ---- */
.sw-when{background:var(--sw-ground)}
.sw-when-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.sw-when-grid li{background:#fff;border-radius:.5rem;padding:1.75rem;box-shadow:0 4px 18px rgba(6,12,48,.08);display:flex;flex-direction:column}
.sw-when-grid li:nth-child(3n+2){transform:translateY(1.25rem)}
.sw-when-grid h3{margin:0 0 .75rem;font-family:var(--bodyFont);font-size:1.4rem;line-height:1.25;font-weight:700;letter-spacing:-.005em;color:var(--primaryDark)}   /* the problem statement: Jost Bold (a real weight), navy, the strongest text in the card */
.sw-when-grid p{margin:0 0 1rem;flex:1}
.sw-when-grid a{font-weight:600;text-decoration:none;color:var(--sw-link)}
.sw-when-grid a:hover{text-decoration:underline}

/* ---- where: Florida map bleeding in from the right ---- */
.sw-where{position:relative;background:#fff;overflow:hidden}
.sw-map{position:absolute;inset:0 0 0 38%;background:url(fl-map.jpg) 30% 50%/cover no-repeat;opacity:.85}
.sw-map::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.55) 35%,rgba(255,255,255,0) 70%)}
.sw-pin{position:absolute;left:var(--pin-x);top:var(--pin-y);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 6px rgba(60,108,252,.25),0 0 0 14px rgba(60,108,252,.12)}
.sw-where-in{position:relative}
.sw-where-copy{max-width:34rem}
.sw-where-copy .cs-button-6{margin-left:0}
.sw-areas{list-style:none;margin:1.5rem 0 .5rem;padding:0;display:grid;gap:1rem}
.sw-areas li{display:grid;grid-template-columns:1.1rem 1fr;column-gap:.6rem}
.sw-areas li::before{content:"";grid-row:1/span 2;width:.6rem;height:.6rem;margin-top:.5rem;border-radius:50%;background:var(--secondary)}
.sw-areas strong{color:var(--primaryDark)}

/* ---- why + team + reviews ---- */
.sw-why{background:var(--sw-ground)}
.sw-why-grid{list-style:none;margin:0 0 4rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2rem}
.sw-why-grid li{padding-top:1rem;border-top:2px solid var(--primary)}
.sw-why-grid h3{margin:.5rem 0}
.sw-why-grid p{margin:0}
.sw-people{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:3rem;align-items:start}
.sw-team-wrap h3{font-size:1.75rem;line-height:1.2;margin:0 0 1.5rem}
.sw-team-wrap .cs-button-6{margin-left:0;margin-top:1.75rem}
.sw-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 1rem}
.sw-team li{display:grid;gap:.15rem;font-size:.95rem}
.sw-team img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 18%;border-radius:.5rem;margin-bottom:.4rem}
.sw-team span{font-size:.85rem;line-height:1.3;color:#4a4b57}
.sw-wall{display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:34rem;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.sw-wall-col{display:flex;flex-direction:column;gap:1rem;animation:sw-up 70s linear infinite}
.sw-wall-col--b{animation-name:sw-down;animation-duration:80s}
.sw-wall:hover .sw-wall-col{animation-play-state:paused}
.sw-rev{margin:0;padding:1.25rem;background:#fff;border-radius:.5rem;box-shadow:0 4px 18px rgba(6,12,48,.09)}
.sw-rev blockquote{margin:0 0 1rem;font-size:.97rem;line-height:1.5}
.sw-rev figcaption{display:flex;align-items:center;gap:.7rem;font-size:.85rem;line-height:1.3}
.sw-rev figcaption strong{display:block}
.sw-rev img{width:44px;height:44px;border-radius:50%;object-fit:cover}
@keyframes sw-up{to{transform:translateY(-50%)}}
@keyframes sw-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* ---- faq ---- */
.sw-faq{background:#fff}
.sw-faq-list{max-width:52rem;margin:0 auto;display:grid;gap:.75rem}
.sw-faq details{border:1px solid #dfe3ee;border-radius:.5rem;padding:1.1rem 1.4rem;background:#fff}
.sw-faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.sw-faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--sw-link)}
.sw-faq details[open] summary::after{content:"\2212"}
.sw-faq details p{margin:.8rem 0 0}
.sw-faq details a{color:var(--sw-link);text-decoration:underline;text-underline-offset:.2em}

@media(max-width:63.9375rem){
  .sw-when-grid{grid-template-columns:1fr 1fr}.sw-when-grid li:nth-child(3n+2){transform:none}
  .sw-why-grid{grid-template-columns:1fr 1fr}
  .sw-people{grid-template-columns:1fr}
  .sw-map{inset:0;opacity:.35}
}
@media(max-width:47.9375rem){
  .services-flip .services-container{flex-direction:column}
}
@media(max-width:40rem){
  .sw-when-grid,.sw-why-grid{grid-template-columns:1fr}
  .sw-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-wall{grid-template-columns:1fr;height:30rem}.sw-wall-col--b{display:none}
}
@media(prefers-reduced-motion:reduce){.sw-track,.sw-wall-col{animation:none}.sw-marquee{overflow-x:auto}.sw-wall{overflow-y:auto}}

/* =====================  STICKY FIX  =====================
   The theme sets overflow-x:hidden on <body>, which makes it a scroll container and silently turns
   position:sticky OFF everywhere (the live site's own sticky band headings do not stick either).
   (core.css sets it with !important on both html and body, so this override needs !important too.)
   overflow-x:clip hides the same horizontal overflow without creating a scroll container.
   The WHOLE text block (heading + lead + links + CTA) sticks, not just the heading, so the empty
   column beside the cascading cards stays filled while you scroll. */
html,body,html body.page,html body.home{overflow-x:clip!important;overflow-y:visible!important}
/* the theme also makes every .services-col-1 h2 sticky by itself; with sticky now working that made the
   heading overlap its own paragraph on phones, so the h2 is static at every width and the block sticks instead */
.sw-band .services-col-1 h2{position:static;top:auto}
@media(min-width:48rem){
  .sw-sticky{position:sticky;top:5.5rem}
  .sw-band .services-col-1 h2{margin-top:0}
}

/* =====================  CTAs  =====================
   Wording is only what Skyway already uses: Contact, View All, the phone number from the contact page,
   "Contact us for a free SEO Audit" (live SEO card), "Let's Build Something That Works" (About). */
.sw-cta-pair{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.sw-cta-pair .cs-button-6{margin:0;min-width:13.5rem;justify-content:space-between}   /* identical dimensions in a pair */
.sw-center-pair{display:flex;justify-content:center}
.sw-center-pair .sw-cta-pair{justify-content:center;margin-top:3rem}
.sw-hero-cta{margin-top:1.75rem}
.sw-band-cta .cs-button-6{margin:1.75rem 0 0;min-width:13.5rem;justify-content:space-between}
.sw-audit{margin:1.25rem 0 0}
.sw-audit a{font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:.2em}
.services-three .sw-audit a{color:var(--primaryDark)}
.sw-hours{margin:1rem 0 0;font-size:.95rem;color:#4a4b57}

/* the default blue button vanishes on the blue band, so each band gets a contrasting fill */
.services-two .cs-button-6{background:#fff;color:var(--primaryDark)!important;--buttonHoverColor:#dfe7ff}
.services-two .cs-button-6 .cs-icon path{fill:var(--primaryDark)!important}
.services-three .cs-button-6{background:var(--primaryDark);color:#fff!important;--buttonHoverColor:var(--primary)}

/* closing band */
.sw-cta{background:var(--primaryDark);color:#fff;padding:var(--sectionPadding)}
.sw-cta-in{text-align:center}
.sw-cta h2{color:#fff;margin:0 0 1rem}
.sw-cta p{margin:0 auto;max-width:44rem;font-size:1.2rem;line-height:1.5}
.sw-cta .sw-cta-pair{justify-content:center;margin-top:2rem}
.sw-cta .sw-cta-pair .cs-button-6:last-child{background:#fff;color:var(--primaryDark)!important;--buttonHoverColor:#dfe7ff}
.sw-cta .sw-cta-pair .cs-button-6:last-child .cs-icon path{fill:var(--primaryDark)!important}
.sw-cta-meta{margin-top:1.75rem!important;font-size:.95rem!important;opacity:.85}
.sw-cta-meta a{color:#fff;text-decoration:underline;text-underline-offset:.2em}

/* mobile contact bar + back to top (both appear once the hero has scrolled away) */
.sw-bar{display:none}
.sw-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:0;border-radius:.35rem;background:var(--primaryDark);color:#fff;font:600 .95rem/1 var(--bodyFont);cursor:pointer;box-shadow:0 6px 20px rgba(6,12,48,.3);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.sw-top.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.sw-top:hover{background:var(--primary)}
.sw-top:focus-visible,.sw-bar a:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}
@media(max-width:47.9375rem){
  body{padding-bottom:4.25rem}
  .sw-bar{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:89;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom)) 4.5rem;background:#fff;box-shadow:0 -6px 20px rgba(6,12,48,.15);transform:translateY(100%);transition:transform .25s}
  .sw-bar.is-on{transform:none}
  .sw-bar-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:2.9rem;border-radius:.35rem;font-weight:600;text-decoration:none;color:var(--primaryDark);border:2px solid var(--primaryDark);box-sizing:border-box}
  .sw-bar-btn--solid{background:var(--primary);border-color:var(--primary);color:#fff}
  .sw-top{bottom:4.9rem;right:.9rem;padding:.75rem}
  .sw-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.sw-top,.sw-bar{transition:none}}

/* hero: the theme sizes every link in .hero-caption at 20px / 1.5em with !important, which shrank the
   CTA pair to 30px tall and made the two buttons unequal. Restore the live .cs-button-6 dimensions. */
.hero-caption .sw-cta-pair a.cs-button-6{font-size:1rem!important;line-height:2.875rem!important;min-width:13.5rem;box-sizing:border-box;margin:0;color:#fff}
.hero-caption .sw-cta-pair{margin-top:1.75rem}

/* =====================  CARD HOVER READABILITY  =====================
   The theme's own hover turns a dark card #1E348E (or navy on the amber band) and its link-hover color
   leaks into the card text: paragraph text fell to 1.37:1 and the heading to 2.45:1, so the card became
   unreadable the moment you pointed at it (same bug on the live site today). Pin the text colors in EVERY
   state. Keyboard focus gets the same treatment as hover. */
.sw-band a.services-content,
.sw-band a.services-content:hover,
.sw-band a.services-content:focus-visible,
.sw-band a.services-content p{color:#fff}
.sw-band a.services-content:focus-visible{background-color:#1E348E;outline:3px solid var(--secondary);outline-offset:2px}
.services-three a.services-content:focus-visible{background-color:var(--primaryDark)}
.sw-band.services-one a.services-content:hover h3,
.sw-band.services-two a.services-content:hover h3,
.sw-band.services-one a.services-content:focus-visible h3,
.sw-band.services-two a.services-content:focus-visible h3{color:#fff}
.sw-band.services-three a.services-content:hover h3,
.sw-band.services-three a.services-content:focus-visible h3{color:var(--secondary)}

/* =====================  BUTTONS: roomier, truly centered  =====================
   The live .cs-button-6 is 46px tall with zero vertical padding (line-height does all the work), which read
   as pinched. Give every CTA in the new sections real vertical padding and flex-center the label and arrow. */
.sw-cta-pair .cs-button-6,.sw-band-cta .cs-button-6,.sw-center .cs-button-6,.sw-where .cs-button-6,.sw-team-wrap .cs-button-6,.sw-logos .cs-button-6,
.hero-caption .sw-cta-pair a.cs-button-6{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:3.5rem;padding:.95rem 1.75rem;font-size:1.05rem!important;line-height:1.2!important;min-width:14.5rem}
.sw-cta-pair .cs-button-6 .cs-icon,.sw-band-cta .cs-button-6 .cs-icon,.sw-center .cs-button-6 .cs-icon{flex:none;display:block}
.sw-cta-pair{gap:1.25rem;margin-top:2.25rem}
.sw-band-cta .cs-button-6{margin-top:2.25rem}
.sw-bar-btn{min-height:3.25rem!important}
@media(max-width:47.9375rem){
  .sw-cta-pair{flex-direction:column;align-items:stretch}
  .sw-cta-pair .cs-button-6{min-width:0;width:100%}
  .sw-center-pair .sw-cta-pair,.sw-cta .sw-cta-pair{align-items:stretch}
}


/* =====================  v4 fixes  ===================== */
/* Web band: the theme's hover (#1E348E) is a mid-blue sitting on the brand-blue band, so the card's edges
   bleed into the background. A deep navy hover stands clearly off the blue (and off the near-black rest state). */
.sw-band.services-two a.services-content:hover,
.sw-band.services-two a.services-content:focus-visible{background-color:#0a1558;box-shadow:0 14px 30px rgba(3,4,19,.45)}

/* the longer label ("Let's have some fun"): equal-width pairs sized by the widest member, not a fixed minimum */
.sw-cta-pair{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;flex-wrap:nowrap}
.sw-cta-pair .cs-button-6,.hero-caption .sw-cta-pair a.cs-button-6{min-width:0;white-space:nowrap}
.sw-center-pair{text-align:center}
.sw-center-pair .sw-cta-pair{justify-content:center}
.sw-bar-btn{white-space:nowrap}
@media(max-width:47.9375rem){
  .sw-cta-pair{display:grid;grid-auto-flow:row;grid-auto-columns:auto;width:100%}
  .sw-bar-btn--solid{flex:1.55 1 0}
  .sw-bar-btn{font-size:.95rem;padding:0 .5rem}
}

/* =====================  v5: breathing room  =====================
   Logos: the theme's .home-services.services-zero{padding-bottom:1rem} (two classes) beat my one-class rule, leaving
   the View All button ~16px above the next band. Bands: the kicker sat ~40px over the first card and cards were
   24px apart. */
.home-services.sw-logos{padding-bottom:clamp(4.5rem,8vw,7rem)}
.sw-logos .sw-center .cs-button-6{margin-top:3.25rem}
.sw-band .services-subtitle{margin:0 0 clamp(2.75rem,4vw,4rem)}
.sw-band .services-content+.services-content{margin-top:2rem}
.sw-band .services-container{padding-top:clamp(3.5rem,5vw,6rem);padding-bottom:clamp(3.5rem,5vw,6rem)}

/* =====================  v6: longer intros  ===================== */
.sw-logos .services-copy p{max-width:52rem;margin-left:auto;margin-right:auto;text-wrap:pretty}
.sw-where-copy p+p{margin-top:1rem}
.sw-where-copy{max-width:38rem}
.sw-band-lead{font-size:1.1rem;line-height:1.55}
.sw-strip{padding:1.5rem 1rem}

/* =====================  v7: vertical breathing room + centering  =====================
   "When": the middle column is nudged down 1.25rem for the stagger, which ate most of the gap above the CTA
   pair (it sat ~36px under the card). Hub strip: thin and close to the labels. */
.sw-when .sw-center-pair .sw-cta-pair{margin-top:5rem}
.sw-why .sw-center-pair .sw-cta-pair{margin-top:4rem}

/* =====================  v8: CTA strip under the hero (replaces the service-icon row)  =====================
   Info on the left, one CTA on the right, everything vertically centered. */
.sw-strip-band{background:var(--sw-ground);position:relative;z-index:2}
.sw-strip-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding-top:1.75rem;padding-bottom:1.75rem;flex-wrap:wrap}
.sw-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2.5rem}
.sw-strip a,.sw-strip-hours{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;line-height:1.3;color:var(--primaryDark);text-decoration:none}
.sw-strip svg{color:var(--primary);flex:none}
.sw-strip a:hover span{color:var(--sw-link);text-decoration:underline;text-underline-offset:.2em}
.sw-strip-in .cs-button-6{margin:0;min-height:3.5rem;padding:.95rem 1.75rem;font-size:1.05rem!important;line-height:1.2!important;gap:1.5rem;display:inline-flex;align-items:center;white-space:nowrap}
@media(max-width:47.9375rem){
  .sw-strip-in{flex-direction:column;align-items:stretch;text-align:center}
  .sw-strip{flex-direction:column;align-items:center}
  .sw-strip-in .cs-button-6{justify-content:space-between}
}
/* "when": the pair sits well clear of the staggered cards and is truly centered */
.sw-when .sw-center-pair{display:flex;justify-content:center}
.sw-when .sw-center-pair .sw-cta-pair{margin-top:5rem}

/* =====================  v9  =====================
   1. Every card shows a real CTA so it reads as a clickable box, not loose text.
   2. CTA rows are vertically centered in their space (equal gap above and below).
   3. The phone number now reads "Call 727.317.6826". */
.sw-band a.services-content{display:flex;flex-direction:column;align-items:flex-start}
.sw-read{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.5rem;min-height:2.75rem;padding:.5rem 1.15rem;border-radius:.35rem;background:var(--primary);color:#fff;font-weight:600;font-size:1rem;line-height:1.2;transition:background-color .2s}
.sw-read .cs-icon{width:1.25rem;height:auto;flex:none}
.sw-read .cs-icon path{fill:#fff}
.services-three .sw-read{background:var(--secondary);color:var(--primaryDark)}
.services-three .sw-read .cs-icon path{fill:var(--primaryDark)}
.sw-band a.services-content:hover .sw-read,.sw-band a.services-content:focus-visible .sw-read{background:#fff;color:var(--primaryDark)}
.sw-band a.services-content:hover .sw-read .cs-icon path,.sw-band a.services-content:focus-visible .sw-read .cs-icon path{fill:var(--primaryDark)}
/* the .sw-read label sits inside an <a>, so keep the card-wide white text rule from fighting it */
.sw-band a.services-content .sw-read{color:#fff}
.services-three a.services-content .sw-read{color:var(--primaryDark)}
.sw-band a.services-content:hover .sw-read,.sw-band a.services-content:focus-visible .sw-read{color:var(--primaryDark)}

/* View All under the logos: equal space above and below */
.home-services.sw-logos{padding-bottom:4.5rem}
.sw-logos .sw-center .cs-button-6{margin-top:4.5rem}
/* "when": equal space above and below the pair (the middle column is nudged down 1.25rem) */
.sw-when{padding-bottom:5.5rem}
.sw-when .sw-center-pair .sw-cta-pair{margin-top:6.75rem}
/* "why": same */
.sw-why{padding-bottom:5rem}
.sw-why .sw-center-pair .sw-cta-pair{margin-top:5rem}

/* =====================  v10: single mobile sticky CTA  =====================
   "Call Now and Then Schedule a Consultation" -> the fun form. One button, full width, label may wrap to two lines. */
@media(max-width:47.9375rem){
  .sw-bar{padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom)) 4.5rem}
  .sw-bar-single{flex:1 1 auto;width:100%;min-height:3.5rem!important;padding:.5rem 1rem;text-align:center;line-height:1.2;font-size:1rem;white-space:normal!important;text-wrap:balance}
  body{padding-bottom:5.25rem}
  .sw-top{bottom:5.75rem}
}

/* =====================  v11: lead-in question to the left of the Click for Fun buttons  ===================== */
.sw-cta-line{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:2.25rem}
.sw-cta-ask{font-family:var(--headerFont);font-size:1.5rem;line-height:1.2;color:inherit;font-weight:700}
.sw-band .sw-cta-line{margin-top:2.25rem}
.sw-band .sw-cta-line .cs-button-6,.sw-where .sw-cta-line .cs-button-6{margin:0}
.sw-band-cta .sw-cta-line .cs-button-6{margin-top:0}
.sw-where .sw-cta-ask{color:var(--primaryDark)}
.services-one .sw-cta-ask{color:#fff}
@media(max-width:47.9375rem){
  .sw-cta-line{flex-direction:column;align-items:stretch;gap:.9rem}
  .sw-cta-line .cs-button-6{width:100%;box-sizing:border-box}
}

/* =====================  v12: real photos (2024-11-21 Skyway shoot)  =====================
   Every <img> carries width/height so nothing shifts while it loads. No hover effects on images. */
.sw-photo{margin:0 0 clamp(1.75rem,3vw,2.75rem)}
.sw-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:.5rem;box-shadow:0 14px 34px rgba(3,4,19,.35)}
.sw-band .sw-photo+a.services-content{margin-top:0}

/* where: round sign photo sits over the lower right of the map */
.sw-where-photo{position:absolute;right:2rem;bottom:-1rem;width:min(21rem,30vw);margin:0;z-index:2}
.sw-where-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.5rem;box-shadow:0 14px 34px rgba(6,12,48,.3);border:.4rem solid #fff;box-sizing:border-box}
.sw-where-in{min-height:24rem}

/* why: team banner */
.sw-wide-photo{margin:0 0 4rem}
.sw-wide-photo img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:50% 38%;border-radius:.5rem;box-shadow:0 10px 30px rgba(6,12,48,.15)}

/* faq: photo beside the list */
.sw-faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.sw-faq-photo{margin:0;position:sticky;top:6rem}
.sw-faq-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:30% 50%;border-radius:.5rem;box-shadow:0 10px 30px rgba(6,12,48,.15)}
.sw-faq-grid .sw-faq-list{max-width:none;margin:0}

/* closing band: office photo under a heavy navy wash so the text stays readable */
.sw-cta{background:linear-gradient(rgba(6,12,48,.9),rgba(6,12,48,.9)),var(--cta-bg) center/cover no-repeat}

@media(max-width:63.9375rem){
  .sw-where-photo{position:static;width:min(24rem,100%);margin:2rem 0 0}
  .sw-where-in{min-height:0}
  .sw-faq-grid{grid-template-columns:1fr}
  .sw-faq-photo{position:static}.sw-faq-photo img{aspect-ratio:16/9}
}
@media(max-width:47.9375rem){.sw-wide-photo img{aspect-ratio:4/3}}

/* =====================  v13: photos live in the TEXT column; CTAs without arrows  ===================== */
.sw-band .services-col-2>.sw-photo{display:none}
.sw-photo--text{margin:2rem 0 0}
.sw-photo--text img{aspect-ratio:2.3/1;box-shadow:0 14px 34px rgba(3,4,19,.35)}
.cs-button-6.sw-noarrow{justify-content:center;gap:0}
.sw-cta-pair .cs-button-6.sw-noarrow,.sw-strip-in .cs-button-6.sw-noarrow,.sw-cta-line .cs-button-6.sw-noarrow{justify-content:center}
/* the text block is now taller (heading + paragraph + CTA + photo). On short screens a pinned block that tall would hide its
   own bottom, so let it scroll normally there. */
/* v55: sticky stays on at any window height (the block fits a 700px window) */

/* v13b: shorter crop so the pinned block (heading + paragraph + CTA + photo) fits a ~900px window */
.sw-photo--text{margin:1.5rem 0 0}
.sw-photo--text img{aspect-ratio:3/1;object-position:50% 38%}


/* v14: photo sits between the heading and the paragraph */
.sw-photo--text{margin:1.5rem 0 0}
.sw-photo--text img{aspect-ratio:2.6/1;object-position:50% 55%}
.sw-sticky .sw-photo--text+.sw-band-lead{margin-top:1.5rem}
/* the lead-in question inherited the page's dark body color, which was hard to read on the blue band */
.services-one .sw-cta-ask,.services-two .sw-cta-ask{color:#fff}
.services-three .sw-cta-ask{color:var(--primaryDark)}

/* v16: only two photos remain: the FAQ image and the closing band's office background */
.sw-faq-photo img{object-position:38% 50%}

/* =====================  v17: "See Details" is a text link with an arrow, not a button  =====================
   Doug: it does not need a button; text plus the arrow reads clearly enough as a CTA. */
.sw-band a.services-content .sw-read,
.sw-band a.services-content:hover .sw-read,
.sw-band a.services-content:focus-visible .sw-read{background:none!important;padding:0;min-height:0;border-radius:0;margin-top:1.25rem;gap:.5rem;font-weight:700;color:#8aa8ff}
.sw-band.services-three a.services-content .sw-read,
.sw-band.services-three a.services-content:hover .sw-read,
.sw-band.services-three a.services-content:focus-visible .sw-read{color:var(--secondary)}
.sw-read .cs-icon{width:1.2rem}
.sw-band a.services-content .sw-read .cs-icon path,
.sw-band a.services-content:hover .sw-read .cs-icon path{fill:currentColor}
.sw-band a.services-content:hover .sw-read,.sw-band a.services-content:focus-visible .sw-read{text-decoration:underline;text-underline-offset:.25em}
.sw-band.services-one a.services-content:hover .sw-read,.sw-band.services-two a.services-content:hover .sw-read,
.sw-band.services-one a.services-content:focus-visible .sw-read,.sw-band.services-two a.services-content:focus-visible .sw-read{color:#fff}

/* v18: FAQ photo is now the small team in the glass conference room; keep the whole group in the portrait crop */
.sw-faq-photo img{object-position:52% 50%}

/* v21: the "where" section is just the button (the lead-in belongs to the design band) */
.sw-where-cta{margin-top:2rem}
.sw-where-cta .cs-button-6{margin:0;min-height:3.5rem;padding:.95rem 1.75rem;font-size:1.05rem!important;line-height:1.2!important;min-width:14.5rem}

/* =====================  v26: CTA above the fold  =====================
   The live hero is 90vh tall, which pushed the CTA strip below the fold on every desktop size. Crop the hero so the
   strip, and its button, land inside the first screen. 200px = fixed header (~85px) + strip (~100px) + breathing room;
   between 1024 and 1279px the strip wraps to two rows, so it needs ~90px more. The team stays in frame because the
   live background-position-y (67%) is kept. Phones and tablets already show the strip in the first screen. */
@media(min-width:64rem){
  #home-hero{height:calc(100vh - 200px);height:calc(100svh - 200px);min-height:24rem}
}
@media(min-width:64rem) and (max-width:79.9375rem){
  #home-hero{height:calc(100vh - 290px);height:calc(100svh - 290px)}
}

/* v26b: the lead-in questions are Jost, not Baskervville */
.sw-cta-ask{font-family:var(--bodyFont);font-weight:600;font-size:1.3rem;letter-spacing:0}

/* v26c: keep the strip on ONE row so the hero crop math holds. Tighter gaps everywhere; below 1280px the hours line drops
   (the phone and address stay). */
.sw-strip{gap:.75rem 1.75rem}
@media(min-width:64rem) and (max-width:79.9375rem){
  #home-hero{height:calc(100vh - 200px);height:calc(100svh - 200px)}
  .sw-strip-hours{display:none}
}

/* v27: Doug asked to remove "Scroll down with your mind... Just kidding..." and its arrow from the hero.
   Hidden (not deleted) because the live hero's fun-mode script toggles classes around this block. On the live site this is
   a one-line removal in the homepage content. */
#home-hero .hero-sub-container{display:none!important}

/* v29: lean "why" section: three still quotes instead of the team grid + auto-scrolling review wall */
.sw-why--lean .sw-why-grid{margin-bottom:3rem}
.sw-quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.sw-quotes li{display:flex}
.sw-quotes .sw-rev{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:1.5rem}
.sw-quotes .sw-rev blockquote{font-size:1.05rem;line-height:1.55;margin:0 0 1.25rem}
.sw-why--lean .sw-center{margin-top:2.5rem}
@media(max-width:63.9375rem){.sw-quotes{grid-template-columns:1fr}}

/* =====================  v3 (audit trims)  =====================
   All additive and scoped to new classes, so v1 and v2 render exactly as before. */
/* logos: ONE row in the HTML; the loop copy is made by script and hidden from crawlers/screen readers; Pause button */
.sw-marquee--js{overflow-x:auto}
.sw-marquee--js .sw-track{animation:none}
.sw-marquee--js.is-looping{overflow:hidden}
.sw-marquee--js.is-looping .sw-track{animation:sw-left 110s linear infinite}
.sw-marquee--js.is-paused .sw-track{animation-play-state:paused!important}
.sw-logo-copy{display:block;border-radius:.5rem;box-shadow:0 2px 10px rgba(6,12,48,.1);overflow:hidden;background:#fff}
.sw-logo-copy img{display:block;width:100%;height:auto}
.sw-logos-actions{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}
.sw-pause{margin-top:4.5rem;min-height:3.5rem;padding:0 1.5rem;border:2px solid var(--primaryDark);border-radius:.35rem;background:transparent;color:var(--primaryDark);font:600 1rem/1 var(--bodyFont);cursor:pointer}
.sw-pause:hover,.sw-pause:focus-visible{background:var(--primaryDark);color:#fff}

/* when: a light two-column list, not six boxes */
.sw-when-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem}
.sw-when-list li{background:none;box-shadow:none;border-radius:0;padding:1.5rem 0;border-bottom:1px solid #dfe3ee;transform:none}
.sw-when-list li:nth-child(3n+2){transform:none}
.sw-when-list li:nth-last-child(-n+2){border-bottom:0}
.sw-when .sw-center-pair .sw-cta-pair{margin-top:4rem}
@media(max-width:63.9375rem){.sw-when-list{grid-template-columns:1fr}.sw-when-list li:nth-last-child(2){border-bottom:1px solid #dfe3ee}}

/* bands on phones: two cards, the rest behind "See All" (content stays in the page) */
.sw-more{display:none}
@media(max-width:47.9375rem){
  .sw-band .sw-card-extra{display:none}
  .sw-band.is-open .sw-card-extra{display:flex}
  .sw-more{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;margin-top:1rem;padding:0 1.75rem;border:2px solid currentColor;border-radius:.35rem;background:transparent;font:600 1rem/1 var(--bodyFont);cursor:pointer}
  .services-one .sw-more,.services-two .sw-more{color:#fff}
  .services-three .sw-more{color:var(--primaryDark)}
  .sw-band.is-open .sw-more{display:none}
}
@media(prefers-reduced-motion:reduce){.sw-marquee--js.is-looping .sw-track{animation:none}}

/* v3 fix: the card rule `.sw-band a.services-content{display:flex}` out-ranked `.sw-card-extra{display:none}`, so phones still showed every card */
@media(max-width:47.9375rem){
  .sw-band a.services-content.sw-card-extra{display:none}
  .sw-band.is-open a.services-content.sw-card-extra{display:flex}
}

/* =====================  v30: mobile sticky bar like Doug's reference landing page  =====================
   Two equal buttons (outlined "Call" + solid "Schedule Now") and a small round back-to-top arrow floating above the bar. */
@media(max-width:47.9375rem){
  .sw-bar{gap:.6rem}
  .sw-bar-btn{flex:1 1 0;min-height:3.25rem!important;padding:0 .75rem;font-size:1rem;white-space:nowrap!important}
  .sw-bar-call{background:#fff;color:var(--primaryDark);border:2px solid var(--primaryDark)}
  .sw-bar-btn--solid{background:var(--primary);border:2px solid var(--primary);color:#fff}
  body{padding-bottom:5rem}
  .sw-top{width:2.75rem;height:2.75rem;padding:0;border-radius:50%;justify-content:center;gap:0;bottom:5rem;right:.9rem}
}

/* v31: "when" as an accordion, styled like the FAQ so the page has one consistent pattern */
.sw-when-acc{max-width:52rem;margin:0 auto;display:grid;gap:.75rem}
.sw-when-acc details{border:1px solid #dfe3ee;border-radius:.5rem;padding:1.1rem 1.4rem;background:#fff}
.sw-when-acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sw-when-acc summary::-webkit-details-marker{display:none}
.sw-when-acc summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--sw-link);flex:none}
.sw-when-acc details[open] summary::after{content:"\2212"}
.sw-when-acc summary h3{margin:0;font-family:var(--bodyFont);font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--primaryDark)}
.sw-when-acc details p{margin:.8rem 0 .6rem;max-width:65ch}
.sw-when-acc details a{font-weight:600;color:var(--sw-link);text-decoration:none}
.sw-when-acc details a:hover{text-decoration:underline}
.sw-when-acc summary:focus-visible{outline:3px solid var(--secondary);outline-offset:4px;border-radius:.25rem}

/* v32: the "when" accordion rows zigzag a little (the old boxes were staggered; a straight stack felt too tidy).
   Desktop only, and modest, so it reads as loose rather than messy. */
@media(min-width:48rem){
  .sw-when-acc{max-width:60rem;gap:.85rem}
  .sw-when-acc details:nth-child(odd){margin-right:clamp(0px,7vw,6.5rem)}
  .sw-when-acc details:nth-child(even){margin-left:clamp(0px,7vw,6.5rem)}
  .sw-when-acc details:nth-child(3n){margin-left:clamp(0px,3vw,2.5rem);margin-right:clamp(0px,3vw,2.5rem)}
  .sw-when-acc details{box-shadow:0 4px 18px rgba(6,12,48,.07);border-color:transparent}
}

/* =====================  v33: the "when" items as sticky notes spread across a table  =====================
   Replaces the straight/zigzag stack. Each note is still a <details> (one open at a time, keyboard friendly); the open one straightens and lifts. */
.sw-when-acc{max-width:76rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem 1.75rem;align-items:start;padding:1rem 0 3.5rem}
.sw-when-acc details{position:relative;border:0;border-radius:.2rem;padding:1.5rem 1.5rem 1.4rem;margin:0;box-shadow:0 12px 26px rgba(6,12,48,.15),0 2px 4px rgba(6,12,48,.08);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.sw-when-acc details::before{content:"";position:absolute;top:-.7rem;left:50%;width:4.5rem;height:1.35rem;margin-left:-2.25rem;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(6,12,48,.15);transform:rotate(-3deg)}
.sw-when-acc details:nth-child(1){transform:rotate(-2.2deg) translateY(.5rem);background:#fff3d1}
.sw-when-acc details:nth-child(2){transform:rotate(1.7deg) translateY(2.25rem);background:#e4ecff}
.sw-when-acc details:nth-child(3){transform:rotate(-1.2deg) translateY(-.4rem);background:#fff}
.sw-when-acc details:nth-child(4){transform:rotate(2.3deg) translateY(1.25rem);background:#e4ecff}
.sw-when-acc details:nth-child(5){transform:rotate(-1.8deg) translateY(2.6rem);background:#fff}
.sw-when-acc details:nth-child(6){transform:rotate(1.3deg) translateY(.6rem);background:#fff3d1}
.sw-when-acc details:nth-child(even)::before{transform:rotate(2.5deg)}
.sw-when-acc details:hover{box-shadow:0 16px 32px rgba(6,12,48,.2),0 2px 4px rgba(6,12,48,.08)}
.sw-when-acc details[open]{z-index:1}   /* every note starts open and keeps its tilt; the +/- still folds one away */
.sw-when-acc summary h3{font-size:1.15rem;line-height:1.3}
.sw-when-acc details p{margin:.75rem 0 .5rem}
@media(max-width:63.9375rem){.sw-when-acc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:47.9375rem){
  .sw-when-acc{grid-template-columns:1fr;gap:1.5rem;padding-bottom:2rem}
  .sw-when-acc details:nth-child(n){transform:rotate(-1deg) translateY(0)}
  .sw-when-acc details:nth-child(even){transform:rotate(1deg) translateY(0)}
}
@media(prefers-reduced-motion:reduce){.sw-when-acc details{transition:none}}

/* v34: testimonials carousel (manual: arrows, swipe, arrow keys; no auto-advance so the section stays calm) */
.sw-carousel{position:relative}
.sw-car-track{list-style:none;margin:0;padding:.5rem .25rem 1.25rem;display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sw-car-track::-webkit-scrollbar{display:none}
.sw-car-track:focus-visible{outline:3px solid var(--secondary);outline-offset:4px;border-radius:.5rem}
.sw-car-slide{flex:0 0 calc((100% - 2.5rem)/3);scroll-snap-align:start;display:flex}
.sw-car-slide .sw-rev{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:1.5rem}
.sw-car-slide .sw-rev blockquote{font-size:1.05rem;line-height:1.55;margin:0 0 1.25rem}
.sw-car-ctrl{display:flex;justify-content:center;gap:.75rem;margin-top:.5rem}
.sw-car-ctrl button{width:3rem;height:3rem;border-radius:50%;border:2px solid var(--primaryDark);background:#fff;color:var(--primaryDark);font-size:1.25rem;line-height:1;cursor:pointer}
.sw-car-ctrl button:disabled{opacity:.35;cursor:default}
.sw-car-ctrl button:hover:not(:disabled),.sw-car-ctrl button:focus-visible:not(:disabled){background:var(--primaryDark);color:#fff}
@media(max-width:63.9375rem){.sw-car-slide{flex-basis:calc((100% - 1.25rem)/2)}}
@media(max-width:47.9375rem){.sw-car-slide{flex-basis:88%}}
@media(prefers-reduced-motion:reduce){.sw-car-track{scroll-behavior:auto}}

/* =====================  v35: the sticky notes react to the cursor  =====================
   Each note keeps its own tilt and drop (--r, --y). On hover/focus it lifts, straightens a little, the tape sways and the corner peels. */
.sw-when-acc details:nth-child(1){--r:-2.2deg;--y:.5rem}
.sw-when-acc details:nth-child(2){--r:1.7deg;--y:2.25rem}
.sw-when-acc details:nth-child(3){--r:-1.2deg;--y:-.4rem}
.sw-when-acc details:nth-child(4){--r:2.3deg;--y:1.25rem}
.sw-when-acc details:nth-child(5){--r:-1.8deg;--y:2.6rem}
.sw-when-acc details:nth-child(6){--r:1.3deg;--y:.6rem}
.sw-when-acc details:nth-child(7){--r:-2deg;--y:1.5rem;grid-column:2;background:#fff3d1}
.sw-when-acc details:nth-child(n){transform:rotate(var(--r)) translateY(var(--y));transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.sw-when-acc details:nth-child(n):hover,.sw-when-acc details:nth-child(n):focus-within{transform:rotate(calc(var(--r) * -.35)) translateY(calc(var(--y) - .7rem)) scale(1.035);z-index:5;box-shadow:0 24px 44px rgba(6,12,48,.25),0 3px 6px rgba(6,12,48,.1)}
.sw-when-acc details::before{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sw-when-acc details:hover::before{transform:rotate(3deg) translateY(-2px)}
.sw-when-acc details::after{content:"";position:absolute;right:0;bottom:0;width:1rem;height:1rem;background:linear-gradient(135deg,transparent 50%,rgba(6,12,48,.13) 50%);transition:width .3s,height .3s}
.sw-when-acc details:hover::after{width:2.4rem;height:2.4rem}
@media(max-width:63.9375rem){.sw-when-acc details:nth-child(7){grid-column:auto}}
@media(max-width:47.9375rem){
  .sw-when-acc details:nth-child(n){--y:0}
  .sw-when-acc details:nth-child(odd){--r:-1deg}
  .sw-when-acc details:nth-child(even){--r:1deg}
}
@media(prefers-reduced-motion:reduce){.sw-when-acc details:nth-child(n):hover,.sw-when-acc details:nth-child(n):focus-within{transform:rotate(var(--r)) translateY(var(--y))}.sw-when-acc details::before,.sw-when-acc details::after{transition:none}}

/* v36: intro tagline above the certification logos, with room around it (the live hero caption forces 20px / margin 0 on every <p> and <a>) */
.hero-caption p.sw-dream{margin:1.9rem 0 1.6rem!important;font-family:var(--headerFont);font-size:clamp(1.55rem,1.4vw + 1rem,2.1rem)!important;line-height:1.2!important;color:var(--headerColor)}
.hero-caption .sw-certs{margin-top:.25rem}
.hero-caption .sw-certs img{display:block;max-width:100%;height:auto}

/* v37: the sticky notes overlap like a real pile. Note 7 lies across the corners of notes 1 and 2; a hovered or focused note comes to the front. */
.sw-when-acc{gap:1.1rem .6rem;padding-top:2rem}
.sw-when-acc details:nth-child(n){position:relative;z-index:1;transform:rotate(var(--r)) translate(var(--x,0),var(--y))}
.sw-when-acc details:nth-child(n):hover,.sw-when-acc details:nth-child(n):focus-within{transform:rotate(calc(var(--r) * -.35)) translate(var(--x,0),calc(var(--y) - .7rem)) scale(1.035);z-index:6}
@media(min-width:64rem){
  .sw-when-acc details:nth-child(1){grid-column:1;grid-row:1;--r:-2.2deg;--x:0rem;--y:.5rem}
  .sw-when-acc details:nth-child(2){grid-column:2;grid-row:1;--r:1.7deg;--x:-.9rem;--y:2rem}
  .sw-when-acc details:nth-child(3){grid-column:3;grid-row:1;--r:-1.2deg;--x:-1.1rem;--y:-.3rem}
  .sw-when-acc details:nth-child(4){grid-column:1;grid-row:2;--r:2.3deg;--x:.7rem;--y:-.5rem}
  .sw-when-acc details:nth-child(5){grid-column:2;grid-row:2;--r:-1.8deg;--x:-.8rem;--y:.2rem}
  .sw-when-acc details:nth-child(6){grid-column:3;grid-row:2;--r:1.3deg;--x:-.3rem;--y:-.6rem}
  /* note 7 shares cell (1,1) with note 1 and is pushed right/down so it straddles notes 1 and 2 */
  .sw-when-acc details:nth-child(7){grid-column:1;grid-row:1;justify-self:start;align-self:start;width:76%;z-index:3;--r:-2.6deg;--x:62%;--y:calc(48% + 1.2rem)}
}
@media(max-width:63.9375rem){.sw-when-acc details:nth-child(n){grid-column:auto;grid-row:auto;width:auto;--x:0rem}}

/* v38: logo rows drift in opposite directions again; a little more air around the intro tagline */
.sw-marquee--js.is-looping .sw-track--a{animation:sw-left 120s linear infinite}
.sw-marquee--js.is-looping .sw-track--b{animation:sw-right 135s linear infinite}
.sw-marquee--js.is-paused .sw-track{animation-play-state:paused!important}
.hero-caption p.sw-dream{margin:2.25rem 0 2rem!important}
@media(prefers-reduced-motion:reduce){.sw-marquee--js.is-looping .sw-track--a,.sw-marquee--js.is-looping .sw-track--b{animation:none}}

/* v39: tagline is the paragraph's last sentence; certifications get room below it. Notes: spread out so every one is legible. */
.hero-caption .sw-certs{margin-top:2.25rem}
@media(min-width:64rem){
  .sw-when-acc{gap:3rem 2rem;padding:2rem 0 4rem}
  .sw-when-acc details:nth-child(2){--x:0rem;--y:1.5rem}
  .sw-when-acc details:nth-child(3){--x:0rem}
  .sw-when-acc details:nth-child(4){--x:0rem;--y:.2rem}
  .sw-when-acc details:nth-child(5){--x:0rem;--y:1.4rem}
  .sw-when-acc details:nth-child(6){--x:0rem}
  /* note 7: own spot in row 3, tucked a little under the bottom edge of note 5 */
  .sw-when-acc details:nth-child(7){grid-column:2;grid-row:3;justify-self:stretch;width:auto;align-self:start;--r:-2deg;--x:0rem;--y:-1.2rem}
}

/* v40: the St. Petersburg map dot is a buoy: it bobs gently and sends out a ripple */
.sw-pin{animation:sw-bob 3.2s ease-in-out infinite}
.sw-pin::before,.sw-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--primary);opacity:0;animation:sw-ripple 2.8s ease-out infinite}
.sw-pin::after{animation-delay:1.4s}
@keyframes sw-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes sw-ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(4.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.sw-pin,.sw-pin::before,.sw-pin::after{animation:none}}

/* v41: eighth note (branding). Row 3 holds notes 7 and 8 at opposite ends so the pile stays loose. */
@media(min-width:64rem){
  .sw-when-acc details:nth-child(7){grid-column:1;grid-row:3;--y:.4rem}
  .sw-when-acc details:nth-child(8){grid-column:3;grid-row:3;--r:1.8deg;--x:0rem;--y:-.6rem;background:#e4ecff}
}
.sw-when-acc details:nth-child(8){--r:1.8deg;--y:0;background:#e4ecff}

/* v42: the buoy opens a Google Maps popup on hover / focus / tap */
button.sw-pin{padding:0;border:0;cursor:pointer;background:var(--primary)}
.sw-where-in{pointer-events:none}.sw-where-copy{pointer-events:auto}
.sw-pop{position:absolute;bottom:calc(100% + 1.1rem);left:50%;width:320px;height:220px;margin-left:-160px;border-radius:.5rem;overflow:hidden;background:#e8eaf0;box-shadow:0 18px 40px rgba(6,12,48,.3);border:.3rem solid #fff;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:6;animation:none;cursor:default}
.sw-pop::after{content:"";position:absolute;left:50%;bottom:-.7rem;width:1rem;height:1rem;margin-left:-.5rem;background:#fff;transform:rotate(45deg)}
.sw-pop iframe{display:block;width:100%;height:100%;border:0}
.sw-pin:hover .sw-pop,.sw-pin:focus-visible .sw-pop,.sw-pin.is-open .sw-pop{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.sw-pin:focus-visible{outline:3px solid var(--secondary);outline-offset:6px}
/* the popup must not bob or ripple with the buoy */
.sw-pin:hover,.sw-pin:focus-visible,.sw-pin.is-open{animation-play-state:paused}
@media(max-width:47.9375rem){.sw-pop{width:min(280px,70vw);margin-left:calc(min(280px,70vw)/-2)}}

/* v43: nine notes (row 3 = notes 7, 8, 9) */
@media(min-width:64rem){
  .sw-when-acc details:nth-child(7){grid-column:1;grid-row:3}
  .sw-when-acc details:nth-child(8){grid-column:2;grid-row:3;--r:1.8deg;--x:0rem;--y:.8rem}
  .sw-when-acc details:nth-child(9){grid-column:3;grid-row:3;--r:-1.5deg;--x:0rem;--y:-.2rem;background:#fff}
}
.sw-when-acc details:nth-child(9){--r:-1.5deg;--y:0;background:#fff}

/* =====================  v44: closing band redesigned as a split  =====================
   Left: the real conference-room photo, unwashed and at full strength. Right: a brand-blue panel with room to breathe. */
.sw-cta{background:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:30rem;margin-bottom:0}
.sw-cta-photo{position:relative;min-height:20rem}
.sw-cta-photo .sw-cta-fig{position:absolute;inset:0;margin:0}
.sw-cta-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;border-radius:0;box-shadow:none;aspect-ratio:auto}
.sw-cta-body{background:var(--primary);color:#fff;padding:clamp(3rem,6vw,6rem) clamp(2rem,6vw,6rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left}
.sw-cta-body h2{color:#fff;margin:0 0 1.5rem;line-height:1.1}
.sw-cta-body p{margin:0;max-width:30rem;font-size:1.2rem;line-height:1.6;color:#fff}
.sw-cta-body .sw-cta-pair{margin-top:2.75rem;justify-content:flex-start}
.sw-cta-body .sw-cta-pair .cs-button-6:first-child{background:var(--primaryDark);color:#fff;--buttonHoverColor:#000}
.sw-cta-body .sw-cta-pair .cs-button-6:last-child{background:#fff;color:var(--primaryDark)!important;--buttonHoverColor:#dfe7ff}
.sw-cta-body .sw-cta-pair .cs-button-6:last-child .cs-icon path{fill:var(--primaryDark)!important}
@media(max-width:63.9375rem){
  .sw-cta{grid-template-columns:1fr}
  .sw-cta-photo{min-height:0;aspect-ratio:3/2}
  .sw-cta-body .sw-cta-pair{width:100%}
}
/* FAQ photo is the logo-on-glass shot now; frame the bridge and the people */
.sw-faq-photo img{object-position:50% 60%}

/* =====================  v45: one footer  =====================
   Closing CTA split on top, then logo/address + Company + Services columns, then the theme's own copyright bar. */
.sw-footer .sw-cta{margin:0}
.sw-foot-main{background:#fff;padding:clamp(3rem,5vw,4.5rem) 2rem 0}
.sw-foot-grid{max-width:80rem;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:2.5rem clamp(2rem,6vw,6rem)}
.sw-foot-brand img{display:block;max-width:100%;height:auto;margin-bottom:1.5rem}
.sw-foot-brand p{margin:0 0 1.1rem;line-height:1.6}
.sw-foot-brand a,.sw-foot-col a{color:var(--bodyTextColor);text-decoration:none}
.sw-foot-brand a:hover,.sw-foot-col a:hover{color:var(--sw-link);text-decoration:underline;text-underline-offset:.2em}
.sw-foot-hours{color:#4a4b57;font-size:.95rem}
.sw-foot-col h3{margin:0 0 1rem;font-family:var(--headerFont);font-weight:400;font-size:1.35rem;color:var(--headerColor)}
.sw-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.sw-foot-col li a{display:inline-block;padding:.35rem 0;font-size:1.02rem}
.sw-footer .footer-bottom{margin-top:3.5rem}
@media(max-width:47.9375rem){.sw-foot-grid{grid-template-columns:1fr 1fr}.sw-foot-brand{grid-column:1/-1}}

/* v46: lone CTA under the projects carousel */
.sw-slider-cta{background:#fff;text-align:center;padding:0 0 clamp(3.5rem,6vw,5.5rem);margin-top:0;position:relative;z-index:2}
.sw-slider-cta .cs-button-6{margin:0;min-height:3.5rem;padding:.95rem 2.25rem;font-size:1.05rem!important;line-height:1.2!important;min-width:14.5rem;justify-content:center}

/* v47: Schedule Now + Call pair under the carousel, centered and clear of the slides */
.sw-slider-cta .sw-cta-pair{justify-content:center;margin-top:0}

/* v48: "or" between Schedule Now and Call under the carousel */
.sw-slider-cta .sw-cta-pair{display:flex;align-items:center;justify-content:center;gap:1.1rem}
.sw-or{font-family:var(--headerFont);font-size:1.4rem;color:var(--primaryDark);line-height:1}
@media(max-width:47.9375rem){.sw-slider-cta .sw-cta-pair{flex-direction:column;align-items:stretch}.sw-or{text-align:center}}

/* =====================  v49: MOBILE pass  =====================
   1. The accessibility widget (third-party floating button, bottom-left) is lifted ABOVE the sticky CTA bar instead of sitting under it.
   2. "Schedule Now" is white in every state.
   3. Headings, spacing, notes, FAQ and logos tightened so the page is ~30% shorter on phones. */
@media(max-width:47.9375rem){
  [class*="FloatingButton__FloatingButtonContainer"]{bottom:5.4rem!important;left:.9rem!important}
  .sw-bar{padding-left:.75rem}
  .sw-bar-btn--solid,.sw-bar-btn--solid:visited,.sw-bar-btn--solid:hover,.sw-bar-btn--solid:focus{color:#fff!important}

  /* the theme forces 48px / 51px on every h2; on a 390px screen that is 6 lines */
  .home-services h2,.sw-band h2,.sw-sec-head h2,.sw-where-copy h2,.sw-cta-body h2,.sw-logos h2.border-text{font-size:clamp(1.7rem,7.4vw,2.05rem)!important;line-height:1.14!important}
  .sw-band .services-container{padding-top:2.75rem;padding-bottom:2.75rem;gap:1.75rem}
  .sw-band-lead{font-size:1.02rem;margin-top:1rem}
  .sw-band .services-content{padding:1.35rem}
  .sw-when,.sw-where,.sw-why,.sw-faq{padding-top:3.25rem;padding-bottom:3.25rem}
  .sw-sec-head{margin-bottom:1.75rem}

  /* logos: smaller tiles, Pause sits beside View All instead of under it */
  .sw-track li{width:9.5rem}
  .sw-logos-actions{gap:.75rem;flex-wrap:nowrap}
  .sw-logos-actions .cs-button-6{min-width:0;flex:1 1 auto;padding-left:1rem;padding-right:1rem}
  .sw-pause{margin-top:4.5rem;min-height:3.5rem;padding:0 1.1rem}

  /* notes: start closed on phones (home.js), compact rows, no tape */
  .sw-when-acc{gap:.9rem;padding:.5rem 0 1rem}
  .sw-when-acc details:nth-child(n){padding:1rem 1.15rem}
  .sw-when-acc details::before{display:none}
  .sw-when-acc summary h3{font-size:1.05rem}

  /* why: the four points sit two-up */
  .sw-why-grid{grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:2rem}
  .sw-why-grid h3{font-size:1.05rem}
  .sw-why-grid p{font-size:.95rem}

  /* faq: the photo is decoration, so drop it on phones */
  .sw-faq-photo{display:none}
  .sw-faq-grid{grid-template-columns:1fr}

  /* closing + footer */
  .sw-cta-photo{aspect-ratio:16/9}
  .sw-cta-body{padding:2.5rem 1.5rem}
  .sw-foot-main{padding:2.5rem 1.25rem 0}
}

/* v50: touch targets (44px) for the strip address, note links and the map buoy; looser line-height so inline links are easier to hit */
@media(max-width:47.9375rem){
  .sw-strip a,.sw-strip-hours{min-height:2.75rem}
  .sw-when-acc details a{display:inline-flex;align-items:center;min-height:2.75rem}
  button.sw-pin{width:44px;height:44px;margin:-22px 0 0 -22px;border:9px solid transparent;background-clip:content-box;box-sizing:border-box}
  .sw-band-lead,.sw-faq details p,.sw-where-copy p{line-height:1.7}
}

/* v51: mobile: the band button is separated from the first card (it was flush against it and, in two bands, the same dark color) */
@media(max-width:47.9375rem){
  .sw-band .sw-band-cta{padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid currentColor;border-bottom-color:rgba(255,255,255,.28)}
  .services-three .sw-band-cta{border-bottom-color:rgba(6,12,48,.28)}
  .sw-band .sw-cta-line{gap:.7rem}
  .sw-band .sw-cta-line .cs-button-6{width:auto;min-width:11rem;align-self:flex-start}
  .services-three .sw-cta-line .cs-button-6{box-shadow:0 0 0 2px #fff inset}
}

/* =====================  v4: pre-launch CRO fixes  ===================== */
/* 3. contrast: CTA fill and the blue band go from #3c6cfc (4.43:1 with white) to a deeper brand blue (5+:1) */
:root{--cta:#2f5ae6;--cta-hover:#2347c8}
.cs-button-6,.sw-bar-btn--solid,.sw-nav-cta{--buttonHoverColor:var(--cta-hover)}
.cs-button-6{background-color:var(--cta)}
.sw-bar-btn--solid{background:var(--cta);border-color:var(--cta)}
.home-services.services-two,.sw-cta-body{background-color:#3562f0}
.services-two .cs-button-6{background:#fff}
.sw-cta-body .sw-cta-pair .cs-button-6:first-child{background:var(--primaryDark)}

/* 1. centered hero headline; "(in St. Pete)" is set in Baskervville Italic */
.sw-hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:9rem 2rem 3.5rem;text-align:center;color:#fff;background:linear-gradient(to top,rgba(6,12,48,.8) 0%,rgba(6,12,48,.55) 52%,rgba(6,12,48,0) 100%);pointer-events:none}
.sw-hero-copy h1{margin:0 auto .9rem;max-width:58rem;font-family:var(--headerFont);font-weight:400;font-size:clamp(1.9rem,3.7vw,3.5rem);line-height:1.1;color:#fff;letter-spacing:0;text-wrap:balance}
.sw-hero-copy h1 .hl{color:#ffd37a}
.sw-hero-copy h1 .sw-stpete{font-family:'Baskervville',serif;font-style:italic;font-weight:400;font-size:.82em;color:#fff;opacity:.95;white-space:nowrap}
.sw-hero-kw{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 0;font-size:clamp(1rem,1.3vw,1.25rem);font-weight:500}
.sw-hero-kw li{display:inline-flex;align-items:center}
.sw-hero-kw li+li::before{content:"";width:5px;height:5px;margin:0 1rem;border-radius:50%;background:var(--secondary)}
.sw-intro-h{font-size:clamp(2rem,3.2vw,3.1rem)}
@media(max-width:63.9375rem){
  .sw-hero-copy{position:static;background:var(--primaryDark);padding:1.6rem 1.25rem 1.7rem}
  .sw-hero-copy h1{font-size:clamp(1.65rem,7vw,2.1rem)}
  .sw-hero-kw{font-size:.98rem}
  .sw-hero-kw li+li::before{margin:0 .6rem}
}

/* 2. header CTA (desktop only): real action next to the gag button */
#cs-navigation .sw-nav-cta{display:none!important}
@media(min-width:64rem){
  #cs-navigation .sw-nav-cta{display:inline-flex!important;align-items:center;justify-content:center;white-space:nowrap;height:2.5rem;line-height:1!important;background:transparent;color:var(--primaryDark)!important;border:2px solid var(--primaryDark);box-sizing:border-box;width:auto!important;min-width:0!important;max-width:none!important;font-size:15px!important;margin:0 .6rem 0 2.25rem;padding:0 1.1rem;float:none;flex:0 0 auto;align-self:center}
  #cs-navigation .sw-nav-cta:hover{background:var(--primaryDark);color:#fff!important}
  #cs-navigation .sw-nav-cta:before{display:none}
}

/* 4. proof early: one pull quote under the logos */
.sw-proof{background:#fff;padding:clamp(2.5rem,5vw,4rem) 0}
.sw-proof-fig{margin:0 auto;max-width:48rem;text-align:center}
.sw-proof-fig blockquote{margin:0 0 1.25rem;font-family:var(--headerFont);font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.35;color:var(--headerColor)}
.sw-proof-fig figcaption{display:inline-flex;align-items:center;gap:.8rem;text-align:left;font-size:.95rem;line-height:1.3}
.sw-proof-fig figcaption strong{display:block}
.sw-proof-fig img{width:52px;height:52px;border-radius:50%;object-fit:cover}

/* strip is back: crop the hero so the strip and its button sit inside the first screen (header 86px + strip ~127px) */
@media(min-width:64rem){#home-hero{height:calc(100vh - 200px);height:calc(100svh - 200px);min-height:24rem}}

/* nav label is longer now; keep it on one line */
#cs-navigation .cs-li-link{white-space:nowrap}
.sw-why--lean .sw-sec-head{margin-bottom:2.5rem}

/* ===== v56: more white space. One generous rhythm for every section; type gets room to breathe. ===== */
:root { --sw-gap-section: clamp(4.5rem, 9vw, 8.5rem); --sw-gap-head: clamp(2.25rem, 4.5vw, 4rem); }
#home-hero-content, .sw-when, .sw-where, .sw-why, .sw-faq { padding-top: var(--sw-gap-section); padding-bottom: var(--sw-gap-section); }
.home-services.sw-logos { padding-top: var(--sw-gap-section); padding-bottom: var(--sw-gap-section); }
.sw-proof { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.home-services.sw-band { padding-top: var(--sw-gap-section); padding-bottom: var(--sw-gap-section); }
.home-slider { padding-top: var(--sw-gap-section); }
.sw-slider-cta { padding-top: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.sw-sec-head { margin-bottom: var(--sw-gap-head); }
.sw-sec-head p, .services-zero .services-copy p { margin-top: 1.25rem; }
/* type: looser leading and clear gaps between heading, copy and buttons */
#home-hero-content .hero-caption p, .sw-band-lead, .sw-sec-head p, .sw-why p, .sw-where p, .sw-faq p { line-height: 1.75; }
.sw-band-lead { margin-top: 1.5rem; margin-bottom: 0; }
#home-hero-content .cs-title { margin-bottom: 1.75rem; }
#home-hero-content .sw-certs { margin: 2.5rem 0 0; }
#home-hero-content .sw-hero-cta { margin-top: 2.75rem; }
.sw-band-cta { margin-top: 2.25rem; }
.sw-cta-pair { margin-top: 2.5rem; }
.sw-marquee { margin-top: 3.5rem; row-gap: 1.5rem; }
.sw-logos-actions { margin-top: 3rem; }
/* cards, notes and grids get more air between them */
.sw-band .services-col-2 > a.services-content { margin-bottom: 1.75rem; }
.sw-when-grid { gap: 2rem 1.75rem; }
.sw-why-grid { gap: 2.5rem 2.5rem; margin-bottom: 5rem; }
.sw-people { gap: 4.5rem; }
.sw-team { gap: 2rem 1.5rem; }
.sw-faq-list { gap: 1.25rem; }
.sw-faq details { padding-top: .35rem; padding-bottom: .35rem; }
@media only screen and (max-width: 47.9375rem) {
	:root { --sw-gap-section: 4rem; --sw-gap-head: 2.25rem; }
	.sw-strip-in { padding-top: 2rem; padding-bottom: 2.5rem; }
	#home-hero-content .sw-certs { margin-top: 2rem; }
	.sw-cta-pair { margin-top: 2.25rem; }
	.sw-marquee { margin-top: 2.5rem; }
	.sw-band .services-col-2 { margin-top: 2.5rem; }
	.sw-why-grid { gap: 2rem; margin-bottom: 3.5rem; }
	.sw-people { gap: 3rem; }
}

/* ===== v57: on phones the photo is followed straight by one CTA button, then the H1; name/address/phone are desktop-only ===== */
@media only screen and (max-width: 47.9375rem) {
	.sw-strip-band .sw-strip { display: none; }
	.sw-strip-band .sw-strip-in { display: block; padding: 1.5rem 1.5rem 1.75rem; }
	.sw-strip-band .cs-button-6 { display: flex; width: 100%; max-width: 26rem; margin: 0 auto; justify-content: center; }
}

/* ===== v60: phones. Projects become a swipeable strip (the 3D drum showed one slide in a grey box); the map buoy is desktop-only ===== */
@media only screen and (max-width: 47.9375rem) {
	.sw-map .sw-pin { display: none !important; }
	.home-slider { padding-bottom: 2rem; }
	.home-slider .slider-title { margin-bottom: 1.25rem; }
	.home-slider .slider-title h2 { font-size: 2rem; line-height: 1.15; }
	.home-slider .carousel-container { perspective: none !important; height: auto !important; overflow: visible !important; margin: 0; }
	.home-slider .carousel { position: static !important; transform: none !important; transform-style: flat !important; animation: none !important; display: flex !important; gap: 1rem; width: auto !important; height: auto !important; margin: 0 -1.5rem; padding: .5rem 1.5rem 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1.5rem; -webkit-overflow-scrolling: touch; }
	.home-slider .slide { position: static !important; transform: none !important; flex: 0 0 84%; width: auto !important; height: auto !important; margin: 0 !important; scroll-snap-align: center; }
	.home-slider .slide a { display: block; }
	.home-slider .slide img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .5rem; box-shadow: 0 10px 26px rgba(6, 12, 48, .22); }
}

/* ===== v61: more room between the Trusted-by copy and the scrolling logos ===== */
.sw-logos .sw-marquee { margin-top: clamp(3.75rem, 6vw, 5.5rem); }