/*
Theme Name:   CityWeb Pro
Theme URI:    https://cityweb-design.com/
Description:  CityWeb's design system for local service businesses. Child theme of
              Hello Elementor. Design tokens plus drop-on utility classes for hero
              slideshows, count-up stats, sticky service cards and corner notches.
              Scroll reveals (cw-fly-*) for any widget. Optional title
              banner for plain pages (Customizer > CityWeb Pro).
              Built to work with free Elementor and the CityWeb plugin suite —
              no Elementor Pro required.
Author:       CityWeb
Author URI:   https://cityweb-design.com/
Template:     hello-elementor
Version:      1.3.0
Text Domain:  cityweb-pro
*/

/* ============================================================
   1. TOKENS  — override these per client in Elementor > Site Settings
              or by re-declaring :root in Additional CSS
   ============================================================ */
:root{
  --cw-primary:#1b3a5f;        /* headings, footer, primary buttons */
  --cw-primary-d:#15304f;      /* hover */
  --cw-accent:#4a90e2;         /* eyebrows, icon circles */
  --cw-accent-lt:#6ba7ea;
  --cw-gold:#f5a623;           /* stars, ratings */
  --cw-ink:#1d2026;            /* body copy on light */
  --cw-muted:#5c6673;
  --cw-line:#e4e9f0;
  --cw-bg:#ffffff;
  --cw-bg-alt:#f4f7fb;
  --cw-surface:#ffffff;        /* 1.3.0 panels, cards, header tabs, menus */
  --cw-footer-text:#c3d2e2;    /* 1.3.0 footer body + links */
  --cw-footer-head:#ffffff;    /* 1.3.0 footer headings + link hover */
  --cw-banner-glow:rgba(74,144,226,.28); /* 1.3.0 plain-page banner */
  --cw-banner-text:#ffffff;
  --cw-banner-font:var(--cw-font);

  --cw-font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --cw-radius:22px;
  --cw-radius-lg:30px;
  --cw-wrap:1220px;

  /* 8px spacing scale */
  --cw-s1:8px; --cw-s2:16px; --cw-s3:24px; --cw-s4:32px;
  --cw-s5:48px; --cw-s6:64px; --cw-s7:96px;
}

/* ============================================================
   2. BASE
   ============================================================ */
body{
  font-family:var(--cw-font);
  font-size:16.5px;
  line-height:1.7;
  color:var(--cw-muted);
  background:var(--cw-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--cw-font);
  font-weight:800;
  color:var(--cw-primary);
  line-height:1.15;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.3rem,5.2vw,3.85rem)}
h2{font-size:clamp(1.9rem,3.9vw,3rem)}
h3{font-size:1.45rem}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--cw-accent);outline-offset:3px;border-radius:6px}
/* scrolling to an element (anchors, scrollIntoView) leaves room for the fixed header */
html{scroll-padding-top:112px}
@media(max-width:620px){html{scroll-padding-top:82px}}

/* Hello Elementor ships pink (#c36) links and buttons — map them to tokens */
a{color:var(--cw-accent)}
a:hover,a:active{color:var(--cw-primary)}
button,[type=button],[type=submit]{border-color:var(--cw-accent);color:var(--cw-accent)}
button:hover,button:focus,[type=button]:hover,[type=button]:focus,
[type=submit]:hover,[type=submit]:focus{background-color:var(--cw-accent);border-color:var(--cw-accent);color:#fff}

/* ============================================================
   3. BUTTONS  — add .cw-btn to an Elementor button, or use the
                 Elementor button and let these cascade
   ============================================================ */
.cw-btn,
.elementor-button{
  display:inline-flex;          /* must not be inline — a wrapped inline <a>
                                   draws its background once per line box */
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--cw-font);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border-radius:999px;
  padding:1.05rem 1.9rem;
  background:var(--cw-primary);
  color:#fff;
  border:2px solid var(--cw-primary);
  transition:background .16s,border-color .16s,color .16s;
}
.cw-btn svg{flex:none}
@media(max-width:620px){
  .cw-btn{font-size:.76rem;padding:.95rem 1.4rem;width:100%}
}
.cw-btn:hover,.elementor-button:hover{
  background:var(--cw-primary-d);border-color:var(--cw-primary-d);color:#fff;
}
.cw-btn--ghost{background:transparent;color:var(--cw-primary)}
.cw-btn--ghost:hover{background:var(--cw-primary);color:#fff}
.cw-btn--accent{background:var(--cw-accent);border-color:var(--cw-accent)}
.cw-btn--gold{background:var(--cw-gold);border-color:var(--cw-gold);color:var(--cw-ink)}

/* ============================================================
   4. EYEBROW  — small labelled kicker above a heading
                 <span class="cw-eyebrow">Our services</span>
   ============================================================ */
.cw-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:700;color:var(--cw-accent);
}
.cw-eyebrow::before{
  content:"";width:13px;height:13px;border-radius:50%;
  border:3px solid var(--cw-accent);flex:none;
}

/* ============================================================
   5. HERO SLIDESHOW
      Put 2–4 images in a container, give the CONTAINER the class
      cw-slides. Images crossfade with a slow zoom. No JS.
      Set the container to position:absolute, full bleed, behind content.
      Timing assumes 3 images; see cw-slides--2 / --4 below.
   ============================================================ */
.cw-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.cw-slides img,
.cw-slides .elementor-widget-image{
  position:absolute;inset:0;width:100%;height:100%;
}
.cw-slides img{
  object-fit:cover;opacity:0;
  filter:brightness(1.12) saturate(1.05);
}
/* 1.1.4 — the first slide shows straight away and holds still while the page loads;
   the other slides stay hidden (and, with loading="lazy", aren't downloaded) until
   cityweb.js adds .cw-run after the first scroll/tap or 6 seconds. Faster first paint,
   and PageSpeed no longer measures a page that never stops changing. */
.cw-slides img:first-of-type{opacity:1;z-index:3}
.cw-slides:not(.cw-run) img:not(:first-of-type){display:none}
.cw-slides.cw-run img{will-change:opacity,transform;animation:cwSlide 12s infinite}
/* Delays start the cycle mid-way through slide 1's visible phase so it doesn't blink. */
.cw-slides.cw-run img:nth-of-type(1){animation-delay:-1s;z-index:3}
.cw-slides.cw-run img:nth-of-type(2){animation-delay:3s;z-index:2}
.cw-slides.cw-run img:nth-of-type(3){animation-delay:7s;z-index:1}

.cw-slides--2.cw-run img{animation-duration:9s}
.cw-slides--2.cw-run img:nth-of-type(1){animation-delay:-.6s}
.cw-slides--2.cw-run img:nth-of-type(2){animation-delay:3.9s}
.cw-slides--4.cw-run img{animation-duration:16s}
.cw-slides--4.cw-run img:nth-of-type(2){animation-delay:3s}
.cw-slides--4.cw-run img:nth-of-type(3){animation-delay:7s}
.cw-slides--4.cw-run img:nth-of-type(4){animation-delay:11s;z-index:0}

@keyframes cwSlide{
  0%   {opacity:0;transform:scale(1.00)}
  3%   {opacity:1}
  36%  {opacity:1}
  44%  {opacity:0;transform:scale(1.10)}
  100% {opacity:0;transform:scale(1.10)}
}
/* reduced motion: keep the crossfade, drop the zoom */
@media (prefers-reduced-motion:reduce){
  .cw-slides.cw-run img{animation-name:cwSlideFade}
}
@keyframes cwSlideFade{
  0%{opacity:0}3%{opacity:1}36%{opacity:1}44%{opacity:0}100%{opacity:0}
}

/* Dark wash so white text stays readable over photography.
   Add cw-hero to the hero container. */
.cw-hero{position:relative;overflow:hidden;background:var(--cw-primary)}
.cw-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(11,24,42,.86) 0%,rgba(11,24,42,.62) 42%,
    rgba(11,24,42,.30) 72%,rgba(11,24,42,.22) 100%);
}
.cw-hero > .e-con-inner,
.cw-hero > .elementor-container{position:relative;z-index:2}
.cw-hero--inset{margin:0 18px;border-radius:var(--cw-radius-lg)}
@media(max-width:940px){.cw-hero--inset{margin:0 12px;border-radius:24px}}

/* ============================================================
   6. COUNT-UP STAT
      <span class="cw-count" data-count="4.9" data-decimals="1">0</span>
      Optional: data-duration (ms), data-suffix, data-prefix
   ============================================================ */
.cw-count{font-variant-numeric:tabular-nums}

/* ============================================================
   7. STICKY STACKING CARDS
      Add cw-stack to each card in a sequence. They stick at
      increasing offsets so later cards slide over earlier ones.
   ============================================================ */
.cw-stack{position:sticky}
.cw-stack:nth-of-type(1){top:100px}
.cw-stack:nth-of-type(2){top:200px}
.cw-stack:nth-of-type(3){top:300px}
.cw-stack:nth-of-type(4){top:400px}
.cw-stack:nth-of-type(5){top:500px}
@media(max-width:940px){
  .cw-stack:nth-of-type(1){top:86px}
  .cw-stack:nth-of-type(2){top:132px}
  .cw-stack:nth-of-type(3){top:178px}
  .cw-stack:nth-of-type(4){top:224px}
  .cw-stack:nth-of-type(5){top:270px}
}
/* sticky breaks inside an ancestor with overflow:hidden */
.cw-stack-parent{overflow:visible !important}

/* ============================================================
   8. CORNER NOTCHES
      White panel tucked into a corner of a dark hero.
   ============================================================ */
.cw-notch{background:var(--cw-surface);padding:18px 30px 18px 22px}
.cw-notch--tl{border-radius:0 var(--cw-radius-lg) var(--cw-radius-lg) 0}
.cw-notch--tr{border-radius:var(--cw-radius-lg) 0 0 var(--cw-radius-lg)}
.cw-notch--bl{position:absolute;left:0;bottom:0;z-index:4;
  border-radius:0 var(--cw-radius-lg) 0 var(--cw-radius-lg)}
.cw-notch--br{position:absolute;right:0;bottom:0;z-index:4;
  border-radius:var(--cw-radius-lg) 0 var(--cw-radius-lg) 0}
@media(max-width:620px){
  .cw-notch{padding:12px 20px 12px 14px}
  .cw-notch--bl,.cw-notch--br{border-radius:0 24px 0 24px}
}

/* ============================================================
   9. HEADER  — transparent over a hero, solid once scrolled.
      Easiest: Shortcode widget in the CityWeb Templates header:
      [cw_header menu="Menu" logo="URL" cta="Text" cta_url="/page/"]
      It renders the real WordPress menu (dropdowns included).
      Hand-written markup (.cw-nav > a) still works too.
      The theme JS adds .is-stuck past 40px of scroll.
   ============================================================ */
.cw-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  transition:background .2s ease,box-shadow .2s ease}
.cw-header.is-stuck{background:var(--cw-surface);box-shadow:0 1px 0 var(--cw-line)}
.cw-header-in{display:flex;align-items:stretch;gap:1rem;min-height:96px;padding-inline:18px}

/* logged-in admin bar must not cover the fixed header */
body.admin-bar .cw-header{top:32px}
@media(max-width:782px){body.admin-bar .cw-header{top:46px}}
/* phones: WP admin bar scrolls away below 600px — let the stuck header close the gap */
@media(max-width:600px){body.admin-bar .cw-header.is-stuck{top:0}}

/* spacer so pages without a hero don't slide under the fixed header.
   Give a hero that should sit BEHIND the header the class cw-hero--under. */
.cw-header-spacer{height:102px}
body:has(.cw-hero--under) .cw-header-spacer{display:none}

.cw-brand{display:flex;align-items:center;background:var(--cw-surface);border-radius:0 0 28px 0;
  padding:14px 30px 14px 22px;text-decoration:none;
  transition:border-radius .2s,padding .2s}
.cw-brand img{height:74px;width:auto;display:block;transition:height .2s}

.cw-navwrap{margin-left:auto;display:flex;align-items:center;gap:1.6rem;background:var(--cw-surface);
  border-radius:0 0 0 28px;padding:10px 22px 10px 34px;
  transition:border-radius .2s,padding .2s}

.cw-nav{display:flex;gap:1.9rem;align-items:center}
.cw-nav ul{list-style:none;margin:0;padding:0}
.cw-menu{display:flex;gap:1.9rem;align-items:center}
.cw-menu li{position:relative}
.cw-nav a{display:block;padding:.6rem 0;font-family:var(--cw-font);font-weight:700;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  color:var(--cw-ink)}
.cw-nav a:hover,
.cw-menu .current-menu-item>a,
.cw-menu .current-menu-ancestor>a{color:var(--cw-accent)}

/* dropdown caret */
.cw-menu>li.menu-item-has-children>a::after{content:"";display:inline-block;width:6px;
  height:6px;margin:0 0 3px 8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg)}

/* dropdown panels — hover and keyboard focus */
.cw-menu .sub-menu{position:absolute;top:100%;left:-18px;z-index:70;min-width:240px;
  background:var(--cw-surface);border-radius:14px;box-shadow:0 18px 40px rgba(11,24,42,.16);
  padding:.6rem 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s,transform .15s,visibility .15s}
.cw-menu li:hover>.sub-menu,
.cw-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.cw-menu .sub-menu a{padding:.55rem 1.3rem;font-size:.92rem;font-weight:600;
  text-transform:none;letter-spacing:0;white-space:nowrap}
.cw-menu .sub-menu a:hover{background:var(--cw-bg-alt)}
.cw-menu .sub-menu .sub-menu{top:-.6rem;left:100%}
.cw-menu .sub-menu .menu-item-has-children>a::after{content:"›";margin-left:.5rem}

.cw-btn--sm{padding:.85rem 1.5rem}
.cw-header .cw-btn{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  text-decoration:none}

.cw-header.is-stuck .cw-brand,
.cw-header.is-stuck .cw-navwrap{border-radius:0;padding-block:8px}
.cw-header.is-stuck .cw-brand img{height:52px}

@media(max-width:1280px){
  .cw-nav,.cw-menu{gap:1.25rem}
  .cw-nav a{font-size:.76rem}
}

/* mobile nav */
.cw-burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.cw-burger svg{fill:var(--cw-primary);display:block}
.cw-burger:hover,.cw-burger:focus,
.cw-sub-toggle:hover,.cw-sub-toggle:focus{background:none}
#cw-mnav{display:none}

@media(max-width:1080px){
  .cw-nav{display:none}
  .cw-header .cw-btn--sm{display:none}
  .cw-burger{display:block}
  .cw-navwrap{padding:6px 10px 6px 14px}
  #cw-mnav.open{display:block;background:var(--cw-surface);border-top:1px solid var(--cw-line);
    max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
  #cw-mnav ul{list-style:none;margin:0;padding:.5rem 0 1rem}
  #cw-mnav li{position:relative;border-bottom:1px solid var(--cw-line)}
  #cw-mnav li:has(> .cw-btn){border:0;padding:.9rem 22px 0}
  #cw-mnav a:not(.cw-btn){display:block;padding:.95rem 64px .95rem 22px;font-weight:700;
    font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
    color:var(--cw-ink)}
  #cw-mnav .sub-menu{display:none;padding:0;background:var(--cw-bg-alt)}
  #cw-mnav li.sub-open>.sub-menu{display:block}
  #cw-mnav .sub-menu li:last-child{border-bottom:0}
  #cw-mnav .sub-menu a:not(.cw-btn){padding-left:38px;text-transform:none;letter-spacing:0;
    font-weight:600}
  #cw-mnav .sub-menu .sub-menu a:not(.cw-btn){padding-left:54px}
  .cw-sub-toggle{position:absolute;top:4px;right:10px;width:44px;height:44px;padding:0;
    background:none;border:0;cursor:pointer;display:grid;place-items:center}
  .cw-sub-toggle::before{content:"";width:8px;height:8px;border-right:2px solid var(--cw-ink);
    border-bottom:2px solid var(--cw-ink);transform:rotate(45deg);margin-top:-4px;
    transition:transform .15s}
  li.sub-open>.cw-sub-toggle::before{transform:rotate(-135deg);margin-top:4px}
  .cw-mcta{padding:.9rem 22px 1.2rem}
  .cw-mcta .cw-btn{width:100%}
}
@media(max-width:620px){
  .cw-brand img{height:52px}
  .cw-brand{padding:10px 20px 10px 16px}
  .cw-header-spacer{height:72px}
}

/* ============================================================
   10. SERVICE AREA LINK LIST  — crawlable text, not a map image
   ============================================================ */
.cw-areas{columns:2;column-gap:2.2rem;list-style:none;padding:0;margin:1.4rem 0}
.cw-areas li{break-inside:avoid;padding:.4rem 0;border-bottom:1px solid var(--cw-line)}
.cw-areas a{text-decoration:none;font-weight:600;color:var(--cw-primary);font-size:.98rem}
.cw-areas a:hover{color:var(--cw-accent);text-decoration:underline}
@media(max-width:620px){.cw-areas{columns:1}}

/* ============================================================
   11. UTILITIES
   ============================================================ */
.cw-alt{background:var(--cw-bg-alt)}
.cw-card{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--cw-radius)}
.cw-stars{color:var(--cw-gold);letter-spacing:.1em}
.cw-tabnum{font-variant-numeric:tabular-nums}

/* ============================================================
   12. PAGE COMPONENTS
       Section markup lives in HTML widgets; all styling is here.
   ============================================================ */
.cw-sec{padding:90px 0}
.cw-sec--tight{padding:48px 0}
.cw-wrap{max-width:var(--cw-wrap);margin-inline:auto;padding-inline:22px}
.cw-center{text-align:center}
.cw-center p{margin-inline:auto}

/* --- hero interior --- */
.cw-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .65fr;
  gap:3.5rem;align-items:center;width:100%}
.cw-hero-grid h1{color:#fff;margin:0 0 .6rem}
.cw-lede{color:#cfdbe9;font-size:1.08rem;max-width:56ch;margin-bottom:2rem}
.cw-badges{display:flex;flex-wrap:wrap;gap:1.6rem;list-style:none;padding:0;margin:0 0 1.5rem}
.cw-badges li{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700;
  font-size:.79rem;letter-spacing:.09em;text-transform:uppercase}
.cw-badges svg{width:17px;height:17px;fill:var(--cw-accent-lt);flex:none}
.cw-hero .cw-btn{background:var(--cw-primary);border-color:rgba(255,255,255,.28)}
.cw-hero .cw-btn:hover{background:#fff;color:var(--cw-primary);border-color:#fff}

.cw-rcard{background:var(--cw-primary);border-radius:var(--cw-radius);padding:2rem;color:#fff;
  box-shadow:0 26px 60px rgba(0,0,0,.42)}
.cw-rcard .lbl{font-size:.82rem;color:#b8c9dd;line-height:1.5;margin:0 0 1.1rem}
.cw-rcard .quote{font-weight:700;font-size:1.02rem;color:#fff;line-height:1.5;margin:0}
.cw-rcard hr{border:0;border-top:1px solid rgba(255,255,255,.22);margin:1.4rem 0}
.cw-rcard .big{display:flex;align-items:baseline;gap:.35rem}
.cw-rcard .num{font-size:3.6rem;font-weight:800;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.cw-rcard .star{color:var(--cw-gold);font-size:1.3rem}
.cw-rcard .src{font-size:.85rem;color:#b8c9dd;margin:.5rem 0 0}

.cw-pillbar{position:absolute;left:0;bottom:0;z-index:4;background:var(--cw-surface);
  border-radius:0 30px 0 30px;padding:18px 30px 18px 22px}
.cw-pills{display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:0;list-style:none}
.cw-pills li{background:var(--cw-primary);color:#fff;font-size:.8rem;font-weight:700;
  padding:.55rem 1.2rem;border-radius:999px}

@media(max-width:940px){
  .cw-hero-grid{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:620px){
  .cw-sec{padding:56px 0}
  .cw-pillbar{padding:12px 20px 12px 14px;border-radius:0 24px 0 24px}
  .cw-pills li{font-size:.72rem;padding:.45rem .9rem}
  .cw-rcard{padding:1.5rem}
  .cw-rcard .num{font-size:2.8rem}
}

/* --- two column --- */
.cw-two{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media(max-width:940px){.cw-two{grid-template-columns:1fr;gap:2.5rem}}
.cw-figure{position:relative}
.cw-figure>img{border-radius:var(--cw-radius);width:100%;height:auto;display:block}
.cw-gbadge{position:absolute;left:12px;bottom:26px;background:var(--cw-primary);color:#fff;
  border-radius:20px;padding:1.2rem 1.5rem;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.26)}
.cw-gbadge .g{font-weight:800;font-size:1.5rem}
.cw-gbadge .s{color:var(--cw-gold);letter-spacing:.08em;font-size:.95rem}
.cw-gbadge .t{font-size:.78rem;color:#b8c9dd;margin-top:.2rem}
.cw-callout{background:var(--cw-bg-alt);border-radius:var(--cw-radius);padding:1.9rem 2rem;
  margin-top:1.8rem}
.cw-callout h3{margin-bottom:.35rem}
.cw-callout p{margin-bottom:1.2rem;font-size:.97rem}

/* --- reviews --- */
.cw-revhead{display:flex;align-items:center;justify-content:center;gap:2.5rem;
  flex-wrap:wrap;margin-bottom:2.2rem}
.cw-revhead .ex{font-weight:800;color:var(--cw-ink);font-size:1.15rem;letter-spacing:.04em}
.cw-revhead .st{color:var(--cw-gold);font-size:1.5rem;letter-spacing:.12em}
.cw-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:860px){.cw-revs{grid-template-columns:1fr}.cw-revhead{gap:.6rem;flex-direction:column}}
.cw-rev{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:18px;padding:1.6rem}
.cw-rev .who{font-weight:700;color:var(--cw-ink);font-size:1rem}
.cw-rev .when{font-size:.8rem;color:#98a2b0;margin-bottom:.5rem}
.cw-rev .st{color:var(--cw-gold);letter-spacing:.1em;margin-bottom:.55rem}
.cw-rev p{margin:0;font-size:.96rem}

/* --- service rows --- */
.cw-srow{display:grid;grid-template-columns:auto 1fr 1.1fr auto;gap:2rem;align-items:center;
  background:var(--cw-bg-alt);border-radius:var(--cw-radius);padding:1.6rem 2rem;
  margin-bottom:1.5rem}
.cw-srow.dark{background:var(--cw-primary)}
.cw-srow.dark h3,.cw-srow.dark .idx{color:#fff}
.cw-srow.dark p{color:#c3d2e2}
.cw-srow .idx{font-size:2.6rem;font-weight:800;color:var(--cw-primary);line-height:1;
  letter-spacing:-.04em}
.cw-srow>img{border-radius:16px;width:100%;aspect-ratio:3/2;object-fit:cover}
.cw-srow .body{max-width:46ch}
.cw-srow .body p{margin:0;font-size:.97rem}
.cw-sicon{width:40px;height:40px;object-fit:contain;margin-bottom:.6rem}
.cw-go{width:58px;height:58px;border-radius:50%;background:var(--cw-accent);display:grid;
  place-items:center;text-decoration:none;flex:none;transition:transform .16s}
.cw-go:hover{transform:translateX(4px)}
.cw-go svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4}
.cw-srow.dark .cw-go{background:#fff}
.cw-srow.dark .cw-go svg{stroke:var(--cw-primary)}
@media(max-width:940px){
  .cw-srow{grid-template-columns:auto 1fr;gap:1rem 1.1rem;padding:1.4rem}
  .cw-srow>img{grid-column:1/-1;order:2}
  .cw-srow .body{grid-column:1/-1;order:3;max-width:none}
  .cw-srow .idx{font-size:2rem;order:1}
  .cw-go{width:46px;height:46px;order:1;justify-self:end}
}

/* --- info strip --- */
.cw-info{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
@media(max-width:940px){.cw-info{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cw-info{grid-template-columns:1fr}}
.cw-icard{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:18px;
  padding:1.5rem 1.6rem;position:relative}
.cw-icard h3{font-size:1.02rem;margin-bottom:.4rem}
.cw-icard p{margin:0;font-size:.95rem;line-height:1.6}
.cw-icard a{text-decoration:none;color:var(--cw-muted)}
.cw-icard a:hover{color:var(--cw-primary)}
.cw-icard .ic{position:absolute;top:-16px;right:18px;width:44px;height:44px;border-radius:50%;
  background:var(--cw-accent);display:grid;place-items:center}
.cw-icard .ic svg{width:19px;height:19px;fill:#fff}

/* --- band --- */
.cw-band{background:var(--cw-bg-alt);border-radius:var(--cw-radius);padding:3rem 2.5rem;
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
@media(max-width:940px){.cw-band{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1.5rem}}
.cw-band h2{margin:0}
.cw-small{font-size:.92rem;color:var(--cw-muted)}

/* ============================================================
   13. FOOTER
       Markup: .cw-footer > .cw-wrap > .cw-fcols (4 cols) + .cw-legal
       Used by the CityWeb Templates footer template.
   ============================================================ */
.cw-footer{background:var(--cw-primary);color:var(--cw-footer-text);padding:76px 0 30px;font-size:.95rem}
.cw-footer h4{color:var(--cw-footer-head);font-size:1.12rem;font-weight:800;margin:0 0 1rem}
.cw-footer ul{list-style:none;padding:0;margin:0}
.cw-footer li{padding:.3rem 0;display:flex;gap:.6rem;align-items:flex-start}
.cw-footer a{color:var(--cw-footer-text);text-decoration:none}
.cw-footer a:hover{color:var(--cw-footer-head);text-decoration:underline}
/* links inside running text need more than color to stand out */
.cw-footer p a{text-decoration:underline;text-underline-offset:2px}
.cw-footer li svg{width:15px;height:15px;fill:var(--cw-accent-lt);flex:none;margin-top:.42rem}

/* four columns — brand column widest */
.cw-fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.5rem}
@media(max-width:940px){.cw-fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cw-fcols{grid-template-columns:1fr}}

.cw-fbrand img{height:78px;width:auto;margin-bottom:1rem;display:block}

.cw-social{display:flex;gap:.7rem;margin-top:.3rem}
.cw-social a{width:40px;height:40px;border-radius:50%;background:var(--cw-accent);
  display:grid;place-items:center}
.cw-social svg{width:17px;height:17px;fill:#fff}

.cw-legal{border-top:1px solid rgba(255,255,255,.16);margin-top:3rem;padding-top:1.3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.87rem}

/* ============================================================
   14. SCROLL REVEAL  (1.2.0)
       Add to any Elementor widget/container under Advanced > CSS Classes:
         cw-fly-down   slides in from above
         cw-fly-up     slides in from below
         cw-fly-left   slides in from the left
         cw-fly-right  slides in from the right
         cw-fade-in    fades in, no movement
       Optional: cw-delay-1 / -2 / -3 (0.15s steps) to stagger a row,
                 cw-fly-far for a longer drop (240px instead of 120px).
       Plays once, when the element scrolls into view.
       Never hides anything in the Elementor editor, for visitors who
       ask for reduced motion, or if the script fails to run (3s failsafe).
   ============================================================ */
.cw-js [class*="cw-fly-"],
.cw-js .cw-fade-in{
  --cw-fly:120px;
  opacity:0;
  transition:transform 1.05s cubic-bezier(.18,.9,.25,1.12),opacity .75s ease;
  transition-delay:var(--cw-delay,0s);
  will-change:transform,opacity}
.cw-js .cw-fly-far{--cw-fly:240px}
.cw-js .cw-fly-down{transform:translateY(calc(var(--cw-fly) * -1))}
.cw-js .cw-fly-up{transform:translateY(var(--cw-fly))}
.cw-js .cw-fly-left{transform:translateX(calc(var(--cw-fly) * -1))}
.cw-js .cw-fly-right{transform:translateX(var(--cw-fly))}
.cw-js .cw-in{opacity:1;transform:none}
.cw-delay-1{--cw-delay:.15s}
.cw-delay-2{--cw-delay:.3s}
.cw-delay-3{--cw-delay:.45s}

/* failsafe: script never ran -> show everything after 3s */
@keyframes cw-reveal-failsafe{to{opacity:1;transform:none}}
.cw-js:not(.cw-reveal-ready) [class*="cw-fly-"],
.cw-js:not(.cw-reveal-ready) .cw-fade-in{animation:cw-reveal-failsafe 0s 3s forwards}

/* never hidden while editing, or for reduced-motion visitors */
.elementor-editor-active [class*="cw-fly-"],
.elementor-editor-active .cw-fade-in{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .cw-js [class*="cw-fly-"],.cw-js .cw-fade-in{opacity:1;transform:none;transition:none}
}
/* stop sideways flyers from causing a horizontal scrollbar */
body:has(.cw-fly-left,.cw-fly-right){overflow-x:clip}


/* ============================================================
   15. PLAIN-PAGE TITLE BANNER  (1.3.0, opt-in)
       Customizer > CityWeb Pro > "Title banner on plain pages".
       Pages NOT built with Elementor (Privacy, Terms, Sitemap, 404…)
       get the page title in a hero-style banner that sits behind the
       fixed header, then the text in a reading column.
       Colors: --cw-primary, --cw-banner-glow, --cw-banner-text, --cw-banner-font.
   ============================================================ */
body.cw-has-page-banner{overflow-x:clip}
body.cw-has-page-banner .cw-header-spacer{display:none}
body.cw-has-page-banner .site-main{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
body.cw-has-page-banner .page-content{max-width:780px;margin:0 auto;padding:0 22px clamp(48px,7vw,88px);
  font-size:1.02rem;line-height:1.8}
.cw-page-banner{background:radial-gradient(ellipse at 75% 20%,var(--cw-banner-glow),transparent 55%),var(--cw-primary);
  margin:0 calc(50% - 50vw + 18px) clamp(36px,5vw,60px);border-radius:var(--cw-radius-lg);
  padding:calc(110px + clamp(28px,4vw,56px)) 0 clamp(36px,5vw,64px)}
.cw-page-banner-in{max-width:var(--cw-wrap);margin:0 auto;padding-inline:22px}
.page-content h1.cw-page-title{font-family:var(--cw-banner-font);font-weight:700;color:var(--cw-banner-text);
  font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.15;margin:0}
body.cw-has-page-banner .page-content a:not([class]){color:var(--cw-accent);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
body.cw-has-page-banner .page-content a:not([class]):hover{color:var(--cw-primary)}
@media(max-width:900px){
  .cw-page-banner{margin-inline:calc(50% - 50vw + 10px);border-radius:24px;padding-top:140px}
}

/* ============================================================
   16. CITYWEB SINGLE TEMPLATES  (1.3.0)
       Hello caps .site-main at 1140px on content not built with
       Elementor; CityWeb Single templates should run full width.
   ============================================================ */
body .site-main.cw-single{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}