/* ===================================================================
SHIELDWISE SECURITY — SHARED CITY PAGE STYLESHEET
File: /public/css/city-pages.css (load ONCE, site-wide)
-------------------------------------------------------------------
HOW IT WORKS
- This file holds ALL structure/layout for every city page.
- Class prefix is neutral: .cw- ("city-wise").
- Colors are driven by CSS variables on .cw-page, so each page can
re-theme with a tiny 6-line block (see the per-page snippet you
were given) without copying any layout.
- Fonts: Fraunces (display) + IBM Plex Sans (body). Load them once
in your (see USAGE note at bottom of this file).
=================================================================== */
.cw-page{
/* ---- DEFAULT THEME (ShieldWise navy/gold). Override per page. ---- */
--cw-ink:#0b1f33; /* body text */
--cw-deep:#0a2a43; /* hero gradient base */
--cw-deep-2:#0d3b54; /* hero gradient mid */
--cw-deep-3:#0e4a5e; /* hero gradient end */
--cw-brand:#0e7c86; /* secondary brand (links, step badges) */
--cw-brand-2:#17a8b0; /* brighter brand */
--cw-accent:#e8a33d; /* primary accent (buttons, bars) */
--cw-accent-soft:#f3c47a; /* lighter accent */
--cw-accent-ink:#241702; /* text on accent buttons */
--cw-accent-rgb:232,163,61;/* accent as rgb for shadows */
--cw-bg:#faf7f1; /* page background */
--cw-card:#ffffff;
--cw-line:#e7e1d4; /* borders */
--cw-muted:#566472;
--cw-note-bg:#fff6e8; /* emergency note bg */
--cw-note-line:#ecd09a;
--cw-note-ink:#8a5a14;
/* ---- tokens that rarely change ---- */
--cw-radius:16px;
--cw-shadow:0 1px 2px rgba(11,31,51,.04),0 8px 24px rgba(11,31,51,.06);
--cw-shadow-lift:0 6px 16px rgba(11,31,51,.10),0 18px 48px rgba(11,31,51,.12);
color:var(--cw-ink);
font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
font-size:17px;line-height:1.68;
background:var(--cw-bg);
}
.cw-page *{box-sizing:border-box}
.cw-wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.cw-page h1,.cw-page h2,.cw-page h3{
font-family:"Fraunces",Georgia,"Times New Roman",serif;
line-height:1.18;color:var(--cw-ink);margin:0 0 .5em;font-weight:600;letter-spacing:-.01em;
}
.cw-page h1{font-size:2.05rem;font-weight:700}
.cw-page h2{font-size:1.6rem}
.cw-page h3{font-size:1.16rem;font-weight:600}
.cw-page p{margin:0 0 1rem}
.cw-page a{color:var(--cw-brand)}
/* ---- kicker label ---- */
.cw-kicker{display:inline-block;font-family:"IBM Plex Sans",sans-serif;font-size:.78rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--cw-brand);margin-bottom:.6rem}
.cw-hero .cw-kicker{color:var(--cw-accent-soft)}
/* ===================== HERO ===================== */
.cw-hero{position:relative;overflow:hidden;color:#fff;padding:64px 0 56px;
background:
radial-gradient(120% 140% at 85% 0%, rgba(var(--cw-brand-rgb,23,168,176),.34) 0%, rgba(var(--cw-brand-rgb,23,168,176),0) 55%),
radial-gradient(100% 130% at 0% 100%, rgba(var(--cw-accent-rgb),.18) 0%, rgba(var(--cw-accent-rgb),0) 52%),
linear-gradient(135deg, var(--cw-deep) 0%, var(--cw-deep-2) 60%, var(--cw-deep-3) 100%);
}
.cw-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:4px 4px;opacity:.5}
.cw-hero .cw-wrap{position:relative;z-index:1}
.cw-hero h1{color:#fff;max-width:18ch;font-size:2.3rem}
.cw-hero .cw-sub{font-size:1.14rem;color:#dceaee;max-width:60ch;margin-bottom:1.5rem}
.cw-trust{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:#fff;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);padding:7px 15px;border-radius:999px;
margin-bottom:1.3rem;backdrop-filter:blur(4px)}
.cw-trust b{color:var(--cw-accent-soft)}
.cw-cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:1rem}
.cw-btn{display:inline-block;font-weight:700;text-decoration:none;padding:15px 26px;border-radius:12px;
font-size:1rem;text-align:center;transition:transform .15s ease,box-shadow .15s ease}
.cw-btn-primary{background:var(--cw-accent);color:var(--cw-accent-ink);box-shadow:0 6px 18px rgba(var(--cw-accent-rgb),.38)}
.cw-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--cw-accent-rgb),.5)}
.cw-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:2px solid rgba(255,255,255,.5)}
.cw-btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.cw-byline{font-size:.84rem;color:#a9c6cf;margin-top:.7rem}
/* credential strip */
.cw-strip{display:grid;grid-template-columns:1fr;gap:1px;background:var(--cw-line);border:1px solid var(--cw-line);
border-radius:var(--cw-radius);overflow:hidden;margin-top:34px}
.cw-strip div{background:var(--cw-card);padding:16px 18px}
.cw-strip .cw-n{font-family:"Fraunces",serif;font-size:1.35rem;font-weight:700;color:var(--cw-brand);display:block}
.cw-strip .cw-l{font-size:.86rem;color:var(--cw-muted)}
/* ===================== SECTIONS ===================== */
.cw-section{padding:46px 0;border-bottom:1px solid var(--cw-line)}
.cw-section--flush{border-bottom:none}
.cw-answer{background:linear-gradient(135deg,#fff,#fbfdfd);border:1px solid var(--cw-line);
border-left:5px solid var(--cw-accent);padding:20px 22px;border-radius:0 var(--cw-radius) var(--cw-radius) 0;
margin:0 0 10px;box-shadow:var(--cw-shadow)}
.cw-answer p{margin:0}
.cw-lead{font-size:1.07rem}
/* needs list */
.cw-needs{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.cw-needs li{background:var(--cw-card);border:1px solid var(--cw-line);border-radius:var(--cw-radius);
padding:18px 20px;box-shadow:var(--cw-shadow)}
.cw-needs strong{color:var(--cw-ink);font-weight:700}
/* service cards */
.cw-cards{display:grid;gap:18px;grid-template-columns:1fr;margin-top:10px}
.cw-card{position:relative;border:1px solid var(--cw-line);border-radius:var(--cw-radius);padding:22px;
background:var(--cw-card);display:flex;flex-direction:column;box-shadow:var(--cw-shadow);
transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}
.cw-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--cw-brand),var(--cw-brand-2));transform:scaleX(0);
transform-origin:left;transition:transform .25s ease}
.cw-card:hover{transform:translateY(-4px);box-shadow:var(--cw-shadow-lift)}
.cw-card:hover::before{transform:scaleX(1)}
.cw-card h3{margin-bottom:.35em}
.cw-card .cw-fit{font-size:.86rem;color:var(--cw-muted);margin:.2rem 0 .9rem}
.cw-card .cw-fit b{color:var(--cw-ink)}
.cw-card a.cw-link{margin-top:auto;font-weight:700;text-decoration:none;color:var(--cw-brand)}
.cw-card a.cw-link::after{content:" \2192";transition:margin .15s ease}
.cw-card a.cw-link:hover::after{margin-left:4px}
/* why-choose list */
.cw-why{list-style:none;padding:0;margin:0;display:grid;gap:11px;grid-template-columns:1fr}
.cw-why li{padding-left:30px;position:relative}
.cw-why li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;border-radius:4px;
background:linear-gradient(135deg,var(--cw-accent),var(--cw-accent-soft))}
/* tag pills */
.cw-tags{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:10px 0 0}
.cw-tags li{background:#fff;border:1px solid var(--cw-line);border-radius:999px;padding:7px 15px;
font-size:.9rem;color:var(--cw-ink)}
/* numbered steps */
.cw-steps{counter-reset:step;list-style:none;padding:0;margin:10px 0 0;display:grid;gap:14px}
.cw-steps li{position:relative;padding:15px 16px 15px 60px;background:var(--cw-card);border:1px solid var(--cw-line);
border-radius:var(--cw-radius);box-shadow:var(--cw-shadow)}
.cw-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:15px;top:15px;
width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--cw-brand),var(--cw-brand-2));
color:#fff;font-weight:700;font-family:"Fraunces",serif;display:grid;place-items:center}
/* emergency note */
.cw-note{background:var(--cw-note-bg);border:1px solid var(--cw-note-line);border-radius:var(--cw-radius);
padding:17px 19px;font-size:.97rem}
.cw-note strong{color:var(--cw-note-ink)}
/* FAQ */
.cw-faq details{border:1px solid var(--cw-line);border-radius:var(--cw-radius);margin-bottom:11px;
background:var(--cw-card);overflow:hidden;box-shadow:var(--cw-shadow)}
.cw-faq summary{cursor:pointer;font-weight:700;color:var(--cw-ink);padding:17px 19px;list-style:none;
font-family:"IBM Plex Sans",sans-serif}
.cw-faq summary::-webkit-details-marker{display:none}
.cw-faq summary::after{content:"+";float:right;font-size:1.35rem;line-height:1;color:var(--cw-accent)}
.cw-faq details[open] summary::after{content:"\2013"}
.cw-faq .cw-ans{padding:0 19px 17px}
.cw-faq .cw-ans p{margin:0}
/* final CTA */
.cw-finalcta{position:relative;overflow:hidden;color:#fff;border-radius:var(--cw-radius);padding:38px 28px;
text-align:center;margin-top:10px;
background:radial-gradient(110% 140% at 85% 0%, rgba(var(--cw-brand-rgb,23,168,176),.4) 0%, rgba(var(--cw-brand-rgb,23,168,176),0) 55%),
linear-gradient(135deg,var(--cw-deep),var(--cw-deep-3))}
.cw-finalcta h2{color:#fff}
.cw-finalcta p{color:#d4e6ea;max-width:64ch;margin:0 auto 1.3rem}
.cw-finalcta .cw-cta-row{justify-content:center}
.cw-nearby{font-size:.97rem;margin-top:24px}
.cw-nearby a{font-weight:600}
.cw-transparency{font-size:.86rem;color:var(--cw-muted);margin-top:15px}
/* ===================== LOAD ANIMATION ===================== */
@keyframes cw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cw-anim{opacity:0;animation:cw-rise .6s ease forwards}
.cw-hero .cw-trust{animation-delay:.05s}
.cw-hero h1{animation-delay:.14s}
.cw-hero .cw-sub{animation-delay:.24s}
.cw-hero .cw-cta-row{animation-delay:.34s}
.cw-hero .cw-byline{animation-delay:.42s}
.cw-hero .cw-strip{animation-delay:.5s}
@media (prefers-reduced-motion: reduce){
.cw-anim{animation:none;opacity:1}
.cw-btn,.cw-card{transition:none}
}
/* ===================== RESPONSIVE ===================== */
@media(min-width:680px){
.cw-page h1{font-size:2.5rem}
.cw-hero h1{font-size:3rem}
.cw-page h2{font-size:1.95rem}
.cw-cards{grid-template-columns:1fr 1fr}
.cw-why{grid-template-columns:1fr 1fr}
.cw-strip{grid-template-columns:repeat(4,1fr)}
.cw-hero{padding:84px 0 64px}
}
@media(min-width:960px){
.cw-cards{grid-template-columns:1fr 1fr 1fr}
}
/* ===================================================================
USAGE
1) Load fonts ONCE in your layout :
2) Load this file ONCE in your layout :
3) Each city page sets its theme with a tiny inline block (per-page
snippet provided separately), then uses .cw- classes only.
=================================================================== */
/* ===================================================================
FIGURE (optional inline image used by some pages)
=================================================================== */
.cw-figure{margin:0 0 8px;border-radius:var(--cw-radius);overflow:hidden;border:1px solid var(--cw-line)}
.cw-figure img{width:100%;height:auto;display:block}
/* ===================================================================
THEMES — add ONE of these classes to alongside .cw-page
e.g.
The default (no theme class) = warm teal + gold.
=================================================================== */
/* Inland Empire / SoCal-inland pages — classic ShieldWise navy + steel + gold.
Used by: Ontario, Corona, Fontana, San Bernardino, Hesperia, Chino, Murrieta, Temecula */
.cw-theme-ie{
--cw-deep:#003366; --cw-deep-2:#0a2a4a; --cw-deep-3:#06325c;
--cw-brand:#2f5e8c; --cw-brand-2:#3f78ad; --cw-brand-rgb:63,120,173;
--cw-accent:#c8a24a; --cw-accent-soft:#ddbf7e; --cw-accent-ink:#1a2330; --cw-accent-rgb:200,162,74;
}
/* San Diego — ocean teal + sunset gold */
.cw-theme-sandiego{
--cw-deep:#0a2a43; --cw-deep-2:#0d3b54; --cw-deep-3:#0e4a5e;
--cw-brand:#0e7c86; --cw-brand-2:#17a8b0; --cw-brand-rgb:23,168,176;
--cw-accent:#e8a33d; --cw-accent-soft:#f3c47a; --cw-accent-ink:#241702; --cw-accent-rgb:232,163,61;
}
/* Chula Vista — indigo + bay teal + sunset coral */
.cw-theme-chulavista{
--cw-ink:#14233a;
--cw-deep:#142a44; --cw-deep-2:#173a54; --cw-deep-3:#17455a;
--cw-brand:#1b6f7a; --cw-brand-2:#2a97a3; --cw-brand-rgb:42,151,163;
--cw-accent:#e2674a; --cw-accent-soft:#f0936f; --cw-accent-ink:#ffffff; --cw-accent-rgb:226,103,74;
--cw-bg:#faf6f2; --cw-line:#ece3d9;
--cw-note-bg:#fdeee8; --cw-note-line:#f0c3b2; --cw-note-ink:#a8462f;
}
/* OPTIONAL extra palettes — available if you ever want to visually
differentiate these cities (not applied by default). Swap the class
on to use one, e.g. class="cw-page cw-theme-fontana". */
.cw-theme-fontana{
--cw-deep:#0c2230; --cw-deep-2:#143341; --cw-deep-3:#1c4658;
--cw-brand:#2f6e7a; --cw-brand-2:#3f8e9a; --cw-brand-rgb:63,142,154;
--cw-accent:#d98a2b; --cw-accent-soft:#eaa94f; --cw-accent-ink:#231400; --cw-accent-rgb:217,138,43;
}
.cw-theme-hesperia{
--cw-deep:#1d2433; --cw-deep-2:#33384a; --cw-deep-3:#4a4233;
--cw-brand:#7a7d52; --cw-brand-2:#9aa067; --cw-brand-rgb:154,160,103;
--cw-accent:#d98c4a; --cw-accent-soft:#ecb079; --cw-accent-ink:#241402; --cw-accent-rgb:217,140,74;
--cw-bg:#f8f5ef;
}
.cw-theme-temecula{
--cw-deep:#2a1730; --cw-deep-2:#3c2143; --cw-deep-3:#4a2a3a;
--cw-brand:#8a5a7a; --cw-brand-2:#a6739a; --cw-brand-rgb:166,115,154;
--cw-accent:#c8a24a; --cw-accent-soft:#dcc079; --cw-accent-ink:#241a02; --cw-accent-rgb:200,162,74;
}
/* ===================================================================
v10.1 POLISH PACK (May 2026)
Adds visual contrast, mid-page banner, polished internal-links,
stronger cards/section rhythm. No header/footer/global overrides.
=================================================================== */
/* alternating section backgrounds for visual rhythm */
.cw-page .cw-section{position:relative}
.cw-page .cw-section:nth-of-type(even){background:#f4efe5}
.cw-page.cw-theme-sandiego .cw-section:nth-of-type(even),
.cw-page.cw-theme-chulavista .cw-section:nth-of-type(even){background:#f1ece2}
.cw-page .cw-section h2{position:relative;padding-bottom:14px;margin-bottom:18px}
.cw-page .cw-section h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;
border-radius:2px;background:linear-gradient(90deg,var(--cw-accent),var(--cw-accent-soft))}
/* stronger card visual */
.cw-card{border-top:3px solid transparent;background-image:
linear-gradient(var(--cw-card),var(--cw-card)),
linear-gradient(90deg,var(--cw-brand),var(--cw-accent));
background-origin:border-box;background-clip:padding-box,border-box}
.cw-card h3{display:flex;align-items:center;gap:10px}
.cw-card h3::before{content:"";width:34px;height:34px;border-radius:8px;flex:0 0 34px;
background:linear-gradient(135deg,var(--cw-brand),var(--cw-brand-2));
-webkit-mask:url("data:image/svg+xml;utf8,") center/60% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/60% no-repeat}
/* needs list — icon bullets */
.cw-needs li{padding-left:62px;position:relative}
.cw-needs li::before{content:"";position:absolute;left:18px;top:18px;width:28px;height:28px;border-radius:8px;
background:linear-gradient(135deg,var(--cw-accent),var(--cw-accent-soft));
-webkit-mask:url("data:image/svg+xml;utf8,") center/65% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/65% no-repeat}
/* ===================== MID-PAGE BANNER ===================== */
.cw-banner-wrap{padding:0;border-bottom:1px solid var(--cw-line)}
.cw-banner{position:relative;overflow:hidden;color:#fff;
background:
linear-gradient(135deg, rgba(10,30,55,.86) 0%, rgba(10,30,55,.78) 55%, rgba(10,30,55,.92) 100%),
url('/img/California_SecurityGuards.webp') center/cover no-repeat;
padding:60px 0}
.cw-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 80% at 85% 30%, rgba(var(--cw-accent-rgb),.25) 0%, transparent 60%)}
.cw-banner-inner{position:relative;z-index:1;max-width:880px}
.cw-banner-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--cw-accent-soft);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
padding:6px 14px;border-radius:999px;margin-bottom:1.1rem}
.cw-banner-title{font-family:"Fraunces",Georgia,serif;color:#fff;font-size:2rem;line-height:1.18;
font-weight:700;margin:0 0 1rem;letter-spacing:-.01em;max-width:24ch}
.cw-banner-sub{color:#d9e2ea;font-size:1.05rem;max-width:62ch;margin:0 0 1.3rem;line-height:1.6}
.cw-banner-tags{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:8px}
.cw-banner-tags li{font-size:.84rem;font-weight:600;color:#fff;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
padding:6px 13px;border-radius:999px;backdrop-filter:blur(4px)}
.cw-banner-tags li:nth-child(7){background:rgba(var(--cw-accent-rgb),.22);border-color:rgba(var(--cw-accent-rgb),.55);color:var(--cw-accent-soft)}
.cw-banner .cw-cta-row{margin:0}
.cw-btn-ghost-dark{background:rgba(255,255,255,.06);color:#fff;border:2px solid rgba(255,255,255,.55)}
.cw-btn-ghost-dark:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-2px);text-decoration:none}
@media(min-width:680px){.cw-banner{padding:80px 0}.cw-banner-title{font-size:2.6rem}}
/* ===================== INTERNAL LINKS POLISH ===================== */
/* targets the partial markup so it harmonises with the cw- theme */
.internal-links-section{background:#fbf8f1;padding:54px 0;border-top:1px solid var(--cw-line,#e7e1d4)}
.internal-links-section .container{max-width:1140px}
.internal-links-section .row{align-items:flex-start}
.internal-links-section .link-block{background:#fff;border:1px solid var(--cw-line,#e7e1d4);border-radius:16px;
padding:22px 22px 18px;box-shadow:0 1px 2px rgba(11,31,51,.04),0 6px 18px rgba(11,31,51,.05);
display:flex;flex-direction:column}
.internal-links-section .link-block-title{font-family:"Fraunces",Georgia,serif;font-size:1.12rem;
font-weight:700;color:#0b1f33;margin:0 0 14px;padding:0 0 12px;border-bottom:2px solid #f0e9d8;
display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.internal-links-section .link-block-title i{color:var(--cw-accent,#c8a24a);font-size:1.05rem;width:28px;height:28px;
display:inline-grid;place-items:center;background:rgba(var(--cw-accent-rgb,200,162,74),.12);border-radius:8px}
.internal-links-section .link-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 12px}
.internal-links-section .link-grid-3{grid-template-columns:1fr 1fr 1fr}
.internal-links-section .link-grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.internal-links-section .link-card{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:11px 14px;border:1px solid #ece4d2;border-radius:10px;background:#fffdf7;
color:#0b1f33;text-decoration:none;font-weight:500;font-size:.95rem;
transition:border-color .15s ease,background .15s ease,transform .15s ease}
.internal-links-section .link-card .link-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.internal-links-section .link-card i{color:var(--cw-accent,#c8a24a);font-size:.8rem;opacity:.7;transition:transform .15s ease,opacity .15s ease}
.internal-links-section .link-card:hover{border-color:var(--cw-accent,#c8a24a);background:#fff;
text-decoration:none;color:#0b1f33;transform:translateX(2px)}
.internal-links-section .link-card:hover i{opacity:1;transform:translateX(3px)}
.internal-links-section .view-all-link{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;
font-weight:700;font-size:.92rem;color:var(--cw-accent,#c8a24a);text-decoration:none}
.internal-links-section .view-all-link:hover{color:#1a3c6e;text-decoration:none}
.internal-links-section .view-all-link i{font-size:.78rem}
@media(max-width:680px){
.internal-links-section{padding:38px 0}
.internal-links-section .link-grid-3{grid-template-columns:1fr 1fr}
}
/* tighter, modern emergency note */
.cw-note{display:flex;gap:14px;align-items:flex-start}
.cw-note::before{content:"!";flex:0 0 36px;width:36px;height:36px;border-radius:50%;
background:var(--cw-accent);color:#fff;display:inline-grid;place-items:center;
font-family:"Fraunces",serif;font-weight:700;font-size:1.2rem;line-height:1}
/* final CTA polish */
.cw-finalcta{padding:46px 32px}
.cw-finalcta h2{font-size:1.9rem;margin-bottom:.6em}
.cw-finalcta h2::after{display:none}
@media(min-width:680px){.cw-finalcta{padding:60px 40px} .cw-finalcta h2{font-size:2.3rem}}
/* mobile spacing */
@media(max-width:679px){
.cw-section{padding:34px 0}
.cw-page h1{font-size:1.7rem}
.cw-hero h1{font-size:1.85rem}
.cw-page h2{font-size:1.4rem}
.cw-banner-title{font-size:1.6rem}
.cw-needs li{padding-left:54px}
.cw-needs li::before{left:14px;top:16px}
}
/* ===================================================================
EDITORIAL INTRO PANEL — sw-ed-*
Replaces the plain .cw-answer + paragraph intro on all city pages
=================================================================== */
.sw-ed-section{padding:60px 0;background:#f5f7fb;border-bottom:1px solid #e0e6ef}
.sw-ed-container{max-width:1120px;margin:0 auto;padding:0 22px}
.sw-ed-panel{position:relative;overflow:hidden;padding:50px 52px;border-radius:24px;
background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,255,255,.90)),
linear-gradient(135deg,#fff,#edf2f8);
border:1px solid rgba(21,32,51,.10);box-shadow:0 20px 60px rgba(21,32,51,.11)}
.sw-ed-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;
background:linear-gradient(180deg,#b8872f,#1b365d);border-radius:4px 0 0 4px}
.sw-ed-panel::after{content:"SW";position:absolute;right:-14px;bottom:-38px;
color:rgba(27,54,93,.04);font-size:170px;line-height:1;font-weight:900;
letter-spacing:-.08em;pointer-events:none;font-family:"Fraunces",serif}
.sw-ed-label{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
color:#1b365d;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sw-ed-label::before{content:"";width:30px;height:2px;background:#b8872f}
.sw-ed-title{max-width:870px;margin:0 0 24px;color:#0f1a2b;
font-size:clamp(26px,4vw,46px);line-height:1.04;letter-spacing:-.04em;font-weight:800;
font-family:"Fraunces",Georgia,serif}
.sw-ed-title span{color:#b8872f}
.sw-ed-copy{position:relative;z-index:1;max-width:940px}
.sw-ed-copy p{margin:0;color:#334158;font-size:1.05rem;line-height:1.78;letter-spacing:-.01em}
.sw-ed-copy p+p{margin-top:20px;padding-top:20px;border-top:1px solid rgba(21,32,51,.08)}
.sw-ed-copy strong{color:#0f1a2b;font-weight:800}
.sw-ed-copy .gold{color:#9b6c1f;font-weight:800}
.sw-ed-note{margin-top:26px;padding:18px 20px;border-radius:14px;
background:#f8f3ea;border:1px solid rgba(184,135,47,.28);
color:#3b2a10;font-size:.97rem;line-height:1.6}
.sw-ed-note strong{color:#1b365d}
@media(max-width:700px){
.sw-ed-section{padding:40px 0}
.sw-ed-panel{padding:30px 22px;border-radius:18px}
.sw-ed-panel::after{font-size:110px}
.sw-ed-copy p{font-size:.98rem}
}