/* =================================================================
CREATING PATHWAYS 2 SUCCEED — CUSTOM LAYER
Append this BELOW the existing platform site.css (Foundation + utilities).
Prefix: cps- | Fonts: Fraunces (head) + Nunito Sans (body)
Palette: terracotta (primary/CTA) + sage green (bands/footer) + warm cream
Change colors/fonts in the TOKENS block = whole site reskins.
================================================================= */
/* ---------- BRAND TOKENS — single source of truth ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
:root{
/* brand */
--c-primary:#43803F; /* fern green — CTAs, accents, hero */
--c-primary-dark:#356633; /* fern green hover */
--c-accent:#5E8C57; /* sage green — section bands, footer */
--c-accent-dark:#4B7345; /* sage hover */
--c-accent-on-dark:var(--c-sun); /* light mint for accent TEXT on dark (AA) */
--c-amber:#6FA862; /* mid leaf green (stars, gradient mid) */
--c-sun:#A7D3A0; /* light mint (on-dark accent text / glows) */
--c-heart:#4C8A4E; /* heart motif = leaf green */
--c-terracotta:var(--c-primary);
--c-sage:var(--c-accent);
/* surfaces + ink (warm neutrals) */
--c-ink:#2B2622;
--c-ink-2:#5B554E;
--c-paper:#ffffff;
--c-cream:#F4F8F1; /* soft green-white sections */
--c-tint:#F4F8F1;
--c-tint-2:#E8F0E5;
--c-line:#DDE7D8;
--c-dark:#2F5A3C; /* deep sage band (process / cta) */
--c-dark-2:#214330;
--c-dark-rgb:47,90,60; /* forest channels (hero panel) */
--c-dark-2-rgb:33,67,48;
--c-dark-lite:#3A6B45; /* lighter green for lively band gradient */
--c-light:#ffffff;
/* rgb channels — for rgba() across components */
--c-primary-rgb:67,128,63;
--c-star:var(--c-primary); /* rating stars; set #F5A623 for classic gold */ /* fern green */
--c-primary-dark-rgb:53,102,51;
--c-accent-rgb:94,140,87; /* sage */
--c-accent-dark-rgb:75,115,69;
--c-black-rgb:0,0,0;
--c-white-rgb:255,255,255;
--c-cream-rgb:244,248,241; /* glass header rgba */
--c-sun-rgb:167,211,160; /* mint channel (on-dark glows) */
/* fonts */
--font-script:'Kaushan Script','Segoe Script',cursive;
--font-head:'Fraunces','Georgia','Times New Roman',serif;
--font-body:'Nunito Sans',system-ui,-apple-system,Segoe UI,sans-serif;
/* gradients — terracotta glow */
--grad-sunset:linear-gradient(100deg,var(--c-sun) 0%,var(--c-primary) 58%,var(--c-primary-dark) 100%);
--grad-warm:linear-gradient(135deg,var(--c-amber) 0%,var(--c-primary) 100%);
/* GLOBAL BUTTON — ghost pill (matches live site) */
--btn-bg:var(--c-paper);
--btn-text:var(--c-primary);
--btn-border:var(--c-primary);
--btn-bg-hover:var(--c-primary);
--btn-text-hover:var(--c-light);
/* rhythm */
--space-section:90px;
--gap:30px;
/* radius + shadow */
--r-sm:6px;
--r-md:14px;
--r-field:12px;
--r-lg:22px;
--r-pill:500px;
--c-error:#cf4a3c;
--shadow-1:0 1px 2px rgba(43,38,34,.05),0 4px 14px rgba(43,38,34,.06);
--shadow-2:0 10px 28px rgba(43,38,34,.10),0 30px 60px rgba(43,38,34,.12);
--shadow-soft:0 6px 22px rgba(43,38,34,.08);
--shadow-lift:0 22px 52px rgba(43,38,34,.16),0 8px 18px rgba(43,38,34,.10);
/* type scale */
--fs-h1:clamp(30px,4.5vw,48px);
--fs-h2:clamp(28px,4vw,42px);
--fs-h3:clamp(20px,2.4vw,26px);
--fs-h4:clamp(18px,1.6vw,21px);
--fs-body:17px;
--fs-lead:clamp(18px,1.4vw,21px);
}
@media all and (max-width:640px){
:root{ --space-section:56px; --gap:18px; }
}
/* =================================================================
GLOBAL DESIGN SYSTEM — typography
================================================================= */
.is-wrapper .banner-main-heading,
.is-wrapper .section-main-heading,
.is-wrapper .section-sub-heading,
.is-wrapper .content-heading,
.is-wrapper .content-sub-heading,
.is-wrapper .small-heading{
font-family:var(--font-head);
color:var(--c-ink);
font-weight:700;
line-height:1.18;
letter-spacing:0;
text-wrap:balance;
margin:0;
}
/* base-element fallback (any heading/text without a system class) */
.is-wrapper h1,.is-wrapper h2,.is-wrapper h3,.is-wrapper h4,.is-wrapper h5{
font-family:var(--font-head); color:var(--c-ink); text-wrap:balance;
}
.is-wrapper p,.is-wrapper li{ font-family:var(--font-body); color:var(--c-ink-2); }
.is-wrapper .banner-main-heading{ font-size:var(--fs-h1); line-height:1.08; }
.is-wrapper .section-main-heading{ font-size:var(--fs-h2); }
.is-wrapper .section-sub-heading{ font-size:var(--fs-h3); }
.is-wrapper .content-heading{ font-size:var(--fs-h4); font-weight:600; font-family:var(--font-body); letter-spacing:0; line-height:1.3; }
.is-wrapper .content-sub-heading{ font-size:18px; font-weight:600; font-family:var(--font-body); letter-spacing:0; line-height:1.35; }
.is-wrapper .small-heading{ font-size:15px; font-weight:700; font-family:var(--font-body); letter-spacing:.02em; line-height:1.4; }
.is-wrapper .section-description,
.is-wrapper .content-text,
.is-wrapper .small-text,
.is-wrapper .caption-text{
font-family:var(--font-body);
color:var(--c-ink-2);
margin:0;
}
.is-wrapper .section-description{ font-size:var(--fs-lead); line-height:1.65; }
.is-wrapper .content-text{ font-size:var(--fs-body); line-height:1.7; }
.is-wrapper .small-text{ font-size:15px; line-height:1.6; }
.is-wrapper .caption-text{ font-size:13px; line-height:1.5; letter-spacing:.01em; color:var(--c-ink-2); }
.is-wrapper .highlight-text{ color:var(--c-accent); font-style:italic; }
/* light-on-dark helpers for green sections */
.is-wrapper .cps-on-dark .banner-main-heading,
.is-wrapper .cps-on-dark .section-main-heading,
.is-wrapper .cps-on-dark .section-sub-heading,
.is-wrapper .cps-on-dark .content-heading,
.is-wrapper .cps-on-dark .content-sub-heading,
.is-wrapper .cps-on-dark .small-heading{ color:#fff; }
.is-wrapper .cps-on-dark .section-description,
.is-wrapper .cps-on-dark .content-text,
.is-wrapper .cps-on-dark .small-text{ color:rgba(255,255,255,.82); }
/* eyebrow / label chip */
.is-wrapper .cps-eyebrow{
display:inline-flex;
align-items:center;
gap:9px;
font-family:var(--font-body);
font-size:12.5px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--c-primary-dark);
}
.is-wrapper .cps-eyebrow::before{
content:"";
width:16px;
height:16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a5a0a' stroke-opacity='.95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 12 12)' d='M10.9 20.4C7.9 18.2 3.7 14.8 3.5 10.7 3.3 7.8 5.5 5.7 8 6c1.7.2 3 1.4 3.8 3 .7-1.7 2.1-3 3.9-3.1 2.5-.1 4.5 2 4.3 4.9-.2 3.3-3.6 6.3-6.5 8.5'/%3E") center / contain no-repeat;
}
.is-wrapper .cps-eyebrow.is-center{ justify-content:center; }
.is-wrapper .cps-on-dark .cps-eyebrow{ color:var(--c-primary); }
.is-wrapper .cps-on-dark .cps-eyebrow::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e3f' stroke-opacity='.95' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 12 12)' d='M10.9 20.4C7.9 18.2 3.7 14.8 3.5 10.7 3.3 7.8 5.5 5.7 8 6c1.7.2 3 1.4 3.8 3 .7-1.7 2.1-3 3.9-3.1 2.5-.1 4.5 2 4.3 4.9-.2 3.3-3.6 6.3-6.5 8.5'/%3E") center / contain no-repeat; }
/* =================================================================
GLOBAL DESIGN SYSTEM — buttons (class-based only: .web-*-btn)
GHOST PILL system — ek hi button + ek hi hover sab jagah
================================================================= */
.is-wrapper .web-primary-btn,
.is-wrapper .web-secondary-btn,
.is-wrapper .web-text-btn,
.is-wrapper .web-btn-white,
.is-wrapper .web-btn-ghost,
.is-wrapper .web-btn-ghost-light{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
font-family:var(--font-body);
font-size:15px;
font-weight:700;
letter-spacing:.04em;
line-height:1;
padding:13px 34px;
min-height:48px;
border-radius:var(--r-pill);
border:2px solid transparent;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
transition:all .18s ease;
}
/* UNIFIED hover = color-fill swap — identical feel across every button type */
.is-wrapper .web-primary-btn:focus-visible,
.is-wrapper .web-secondary-btn:focus-visible,
.is-wrapper .web-text-btn:focus-visible,
.is-wrapper .web-btn-white:focus-visible,
.is-wrapper .web-btn-ghost:focus-visible,
.is-wrapper .web-btn-ghost-light:focus-visible,
.is-wrapper .web-cta-link:focus-visible{
outline:3px solid var(--c-primary);
outline-offset:3px;
}
/* arrow micro-nudge shared by buttons + cta links */
.is-wrapper .cps-ar{ transition:transform .18s ease; }
.is-wrapper .web-primary-btn:hover .cps-ar,
.is-wrapper .web-secondary-btn:hover .cps-ar,
.is-wrapper .web-text-btn:hover .cps-ar,
.is-wrapper .web-btn-white:hover .cps-ar,
.is-wrapper .web-btn-ghost:hover .cps-ar,
.is-wrapper .web-btn-ghost-light:hover .cps-ar,
.is-wrapper .web-cta-link:hover .cps-ar{ transform:translateX(5px); }
/* PRIMARY — white pill, terracotta text/border -> fills terracotta */
.is-wrapper .web-primary-btn{
background:var(--btn-bg);
color:var(--btn-text);
border-color:var(--btn-border);
}
.is-wrapper .web-primary-btn:hover{
background:var(--btn-bg-hover);
color:var(--btn-text-hover);
border-color:var(--btn-bg-hover);
}
/* SECONDARY — transparent, sage border -> fills sage */
.is-wrapper .web-secondary-btn{
background:transparent;
color:var(--c-accent);
border-color:var(--c-accent);
}
.is-wrapper .web-secondary-btn:hover{
background:var(--c-accent);
color:var(--c-light);
border-color:var(--c-accent);
}
/* TEXT — minimal, terracotta -> soft cream fill */
.is-wrapper .web-text-btn{
background:transparent;
color:var(--c-primary);
padding-left:12px;
padding-right:12px;
}
.is-wrapper .web-text-btn:hover{
background:var(--c-tint-2);
color:var(--c-primary-dark);
}
/* button modifiers */
.is-wrapper .web-btn-lg{ padding:16px 40px; font-size:16px; min-height:54px; }
/* WHITE — for dark/terracotta panels: solid white -> ghost-white inversion */
.is-wrapper .web-btn-white{
background:#fff;
color:var(--c-primary);
border-color:#fff;
}
.is-wrapper .web-btn-white:hover{
background:transparent;
color:#fff;
border-color:#fff;
}
/* GHOST on dark — white outline -> fills white */
.is-wrapper .web-btn-ghost-light{
background:transparent;
color:#fff;
border-color:rgba(255,255,255,.55);
}
.is-wrapper .web-btn-ghost-light:hover{
background:#fff;
color:var(--c-primary);
border-color:#fff;
}
/* GHOST on hero scrim — same fill behaviour */
.is-wrapper .web-btn-ghost{
background:rgba(255,255,255,.08);
color:#fff;
border-color:rgba(255,255,255,.6);
}
.is-wrapper .web-btn-ghost:hover{
background:#fff;
color:var(--c-primary);
border-color:#fff;
}
/* CTA LINK system — terracotta underline, soft fade hover */
.is-wrapper .web-cta-link{
display:inline-flex;
align-items:center;
gap:9px;
font-family:var(--font-body);
font-size:15px;
font-weight:700;
letter-spacing:.02em;
color:var(--c-primary);
text-decoration:none;
padding-bottom:2px;
border-bottom:2px solid var(--c-primary);
transition:opacity .18s ease;
}
.is-wrapper .web-cta-link:hover{ opacity:.7; }
.is-wrapper .cps-on-dark .web-cta-link{ color:#fff; border-bottom-color:#fff; }
.is-wrapper .cps-on-dark .web-cta-link:hover{ opacity:.75; }
/* =================================================================
SECTION BACKGROUNDS — wrapper-scoped (never on locked classes)
================================================================= */
.is-wrapper > .cps-bg-paper{ background:var(--c-paper); }
.is-wrapper > .cps-bg-cream{ background:var(--c-cream); }
.is-wrapper > .cps-bg-dark{ background:var(--c-dark); }
/* =================================================================
HERO
================================================================= */
.is-wrapper .main-banner-sec .bn-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(180deg,rgba(44,43,32,.34) 0%,rgba(44,43,32,.18) 40%,rgba(44,43,32,.82) 100%),
linear-gradient(90deg,rgba(44,43,32,.58) 0%,rgba(44,43,32,.06) 64%),
radial-gradient(120% 82% at 82% 10%,rgba(var(--c-primary-rgb),.22) 0%,rgba(var(--c-primary-rgb),0) 56%);
}
.is-wrapper .main-banner-sec .bn-content{ z-index:2; }
.is-wrapper .cps-hero-img{ width:100%; height:100%; object-fit:cover; display:block; min-height:680px; }
@media all and (max-width:640px){
.is-wrapper .cps-hero-img{ min-height:560px; }
}
.is-wrapper .cps-hero-copy{
max-width:760px;
padding:0;
animation:cpsRise .8s cubic-bezier(.2,.7,.3,1) both;
}
.is-wrapper .cps-hero-copy .cps-eyebrow{ color:#fff; }
.is-wrapper .cps-hero-copy .cps-eyebrow::before{ background:var(--c-primary); }
.is-wrapper .banner-main-heading{ color:#fff; margin-top:20px; text-shadow:0 2px 24px rgba(18,12,8,.35); }
/* hero highlight — script accent (echoes the logo wordmark + heart) */
.is-wrapper .cps-hl{
font-family:var(--font-script);
font-style:normal;
font-weight:400;
color:var(--c-primary);
position:relative;
display:inline-block;
vertical-align:baseline;
font-size:1.16em;
line-height:1;
padding:0 .04em .14em;
text-shadow:0 2px 20px rgba(var(--c-primary-rgb),.28);
}
.is-wrapper .cps-hl::after{ /* hand-painted coral swash */
content:"";
position:absolute;
left:1%; right:1%; bottom:.01em;
height:.15em;
border-radius:50%;
background:var(--grad-sunset);
transform:scaleX(0);
transform-origin:left center;
}
html.user-logged-out .cps-hl::after{ animation:cpsSwash 1s cubic-bezier(.2,.7,.3,1) .55s both; }
@keyframes cpsSwash{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.is-wrapper .cps-hero-lead{
color:rgba(255,255,255,.92);
font-family:var(--font-body);
font-size:var(--fs-lead);
line-height:1.6;
max-width:600px;
margin:22px 0 0;
text-shadow:0 1px 14px rgba(18,12,8,.3);
}
.is-wrapper .cps-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.is-wrapper .cps-hero-trust{ display:flex; align-items:center; gap:26px; margin-top:46px; flex-wrap:wrap; }
.is-wrapper .cps-stat{ display:flex; flex-direction:column; gap:3px; }
.is-wrapper .cps-stat b{ font-family:var(--font-head); font-size:21px; font-weight:600; color:#fff; }
.is-wrapper .cps-stat span{ font-family:var(--font-body); font-size:13.5px; color:rgba(255,255,255,.74); }
.is-wrapper .cps-vr{ width:1px; height:42px; background:rgba(255,255,255,.28); }
@media all and (max-width:640px){
.is-wrapper .cps-hero-copy{ padding:96px 0 56px; }
.is-wrapper .cps-hero-cta{ flex-direction:column; align-items:stretch; }
.is-wrapper .cps-hero-trust{ gap:16px; }
.is-wrapper .cps-vr{ display:none; }
.is-wrapper .cps-stat{ flex:1 1 44%; }
}
@keyframes cpsRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
/* =================================================================
INTRO / ABOUT — editorial split
================================================================= */
.is-wrapper .cps-intro-head .section-main-heading{ margin-top:16px; }
.is-wrapper .cps-sig{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.is-wrapper .cps-sig-mark{
width:48px; height:48px; border-radius:var(--r-pill);
background:var(--c-tint);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-head); font-size:22px; font-weight:600; color:var(--c-accent);
}
.is-wrapper .cps-sig .cps-nm{ font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--c-ink); line-height:1.2; }
.is-wrapper .cps-sig .cps-rl{ font-family:var(--font-body); font-size:13.5px; color:var(--c-ink-2); }
.is-wrapper .cps-intro-lead{ padding-left:26px; border-left:3px solid var(--c-primary); }
@media all and (max-width:1023px){
.is-wrapper .cps-intro-lead{ padding-left:0; border-left:0; margin-top:18px; }
}
/* =================================================================
PILLARS — alternating image + text
================================================================= */
.is-wrapper .cps-pillar-intro{ text-align:center; max-width:780px; margin:0 auto; }
.is-wrapper .cps-pillar-intro .section-main-heading{ margin-top:16px; }
.is-wrapper .cps-pillar-copy .cps-eyebrow{ margin-bottom:14px; }
.is-wrapper .cps-pillar-copy .section-main-heading{ font-size:clamp(26px,2.9vw,38px); }
.is-wrapper .cps-pillar-copy .content-text{ margin-top:16px; }
/* reversed layout on desktop (DOM stays copy-first for clean mobile) */
@media all and (min-width:1024px){
.is-wrapper .cps-pillar-sec--rev .cps-pillar-copy-cell{ order:2; }
.is-wrapper .cps-pillar-sec--rev .cps-pillar-media-cell{ order:1; }
}
/* checklist */
.is-wrapper .cps-checks{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px 22px; }
.is-wrapper .cps-checks li{
display:flex; align-items:flex-start; gap:11px;
font-family:var(--font-body); font-size:15px; line-height:1.45; color:var(--c-ink);
}
.is-wrapper .cps-ck{
flex:0 0 auto;
width:21px; height:21px; margin-top:1px;
border-radius:var(--r-pill);
background:var(--c-accent);
color:#fff;
display:flex; align-items:center; justify-content:center;
}
@media all and (max-width:560px){ .is-wrapper .cps-checks{ grid-template-columns:1fr; } }
/* media frame + floating tag */
.is-wrapper .cps-pillar-frame{
position:relative;
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--shadow-soft);
}
.is-wrapper .cps-pillar-frame .cps-frame-img{
width:100%;
aspect-ratio:5/4;
object-fit:cover;
display:block;
border-radius:var(--r-lg);
transition:transform .65s cubic-bezier(.2,.7,.3,1);
}
.is-wrapper .cps-pillar-frame:hover .cps-frame-img{ transform:scale(1.045); }
.is-wrapper .cps-pillar-tag{
position:absolute;
display:flex; align-items:center; gap:13px;
max-width:280px;
padding:16px 18px;
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-2);
}
.is-wrapper .cps-pillar-tag .cps-ic{
flex:0 0 auto;
width:42px; height:42px; border-radius:var(--r-pill);
background:rgba(var(--c-primary-rgb),.10); color:var(--c-primary);
display:flex; align-items:center; justify-content:center;
}
.is-wrapper .cps-pillar-tag b{ display:block; font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--c-ink); line-height:1.2; }
.is-wrapper .cps-pillar-tag span{ display:block; font-family:var(--font-body); font-size:12.5px; color:var(--c-ink-2); margin-top:3px; line-height:1.35; }
.is-wrapper .cps-tag-br{ right:-16px; bottom:-22px; }
.is-wrapper .cps-tag-bl{ left:-16px; bottom:-22px; }
.is-wrapper .cps-tag-tr{ right:-16px; top:-22px; }
@media all and (max-width:1023px){
.is-wrapper .cps-pillar-frame{ margin-bottom:36px; }
.is-wrapper .cps-pillar-tag{ left:50%; right:auto; transform:translateX(-50%); bottom:-26px; top:auto; width:max-content; max-width:88%; }
.is-wrapper .cps-tag-tr{ top:auto; bottom:-26px; }
}
/* =================================================================
PROCESS — deep green, numbered cards
================================================================= */
.is-wrapper .cps-process-head{ text-align:center; max-width:740px; margin:0 auto; }
.is-wrapper .cps-process-head .section-main-heading{ margin-top:16px; }
.is-wrapper .cps-process-head .section-description{ margin-top:16px; }
.is-wrapper .cps-step{
position:relative;
height:100%;
padding:30px 26px 28px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-md);
transition:transform .25s ease,background-color .25s ease,border-color .25s ease;
}
.is-wrapper .cps-step:hover{ transform:translateY(-5px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.is-wrapper .cps-step-num{
width:46px; height:46px; border-radius:var(--r-pill);
background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%); color:#fff;
box-shadow:0 8px 22px rgba(var(--c-primary-rgb),.34);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-head); font-size:21px; font-weight:600;
margin-bottom:18px;
}
.is-wrapper .cps-step .content-heading{ color:#fff; margin-bottom:8px; }
.is-wrapper .cps-step .small-text{ color:rgba(255,255,255,.78); }
.is-wrapper .cps-process-cta{ text-align:center; margin-top:18px; }
/* =================================================================
WHY — text + icon card grid
================================================================= */
.is-wrapper .cps-why-head .section-main-heading{ margin-top:16px; font-size:clamp(28px,3vw,40px); }
.is-wrapper .cps-why-head .content-text{ margin-top:18px; }
.is-wrapper .cps-why-head .web-cta-link{ margin-top:28px; }
.is-wrapper .cps-why-card{
height:100%;
padding:28px 24px;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
transition:transform .25s ease,box-shadow .25s ease;
}
.is-wrapper .cps-why-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.is-wrapper .cps-why-card .cps-ic{
width:50px; height:50px; border-radius:14px;
background:rgba(var(--c-primary-rgb),.10); color:var(--c-primary);
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
}
.is-wrapper .cps-why-card b{ display:block; font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--c-ink); line-height:1.25; margin-bottom:8px; }
.is-wrapper .cps-why-card .small-text{ color:var(--c-ink-2); }
/* =================================================================
TRUST — testimonial carousel
================================================================= */
.is-wrapper .cps-trust-head .section-main-heading{ margin-top:16px; font-size:clamp(27px,2.9vw,38px); }
.is-wrapper .cps-trust-head .content-text{ margin-top:16px; }
.is-wrapper .cps-trust-points{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px 22px; }
.is-wrapper .cps-trust-points li{ display:flex; align-items:center; gap:11px; font-family:var(--font-body); font-size:15px; color:var(--c-ink); }
.is-wrapper .cps-carousel{ position:relative; }
.is-wrapper .cps-slides{ position:relative; }
.is-wrapper .cps-slide{ display:none; }
.is-wrapper .cps-slide.is-active{ display:block; animation:cpsFade .45s ease both; }
@keyframes cpsFade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.is-wrapper .cps-quote-card{
position:relative;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-soft);
padding:38px 36px 32px;
min-height:300px;
}
.is-wrapper .cps-stars{ display:flex; gap:4px; color:var(--c-amber); }
.is-wrapper .cps-qm{ font-family:var(--font-head); font-size:78px; line-height:1; color:var(--c-tint); position:absolute; right:30px; top:18px; }
.is-wrapper .cps-quote-card p{ position:relative; font-family:var(--font-head); font-size:21px; line-height:1.5; color:var(--c-ink); margin:18px 0 0; font-weight:400; }
.is-wrapper .cps-by{ display:flex; align-items:center; gap:13px; margin-top:24px; padding-top:22px; border-top:1px solid var(--c-line); }
.is-wrapper .cps-av{ width:46px; height:46px; border-radius:var(--r-pill); background:linear-gradient(135deg,var(--c-accent),var(--c-accent-dark)); flex:0 0 auto; }
.is-wrapper .cps-by b{ display:block; font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--c-ink); }
.is-wrapper .cps-by span{ display:block; font-family:var(--font-body); font-size:12.5px; color:var(--c-ink-2); margin-top:2px; }
.is-wrapper .cps-tcontrols{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.is-wrapper .cps-tdots{ display:flex; gap:9px; }
.is-wrapper .cps-tdots .tdot{
width:9px; height:9px; padding:0; border:0; border-radius:var(--r-pill);
background:var(--c-line); cursor:pointer; transition:all .2s ease;
}
.is-wrapper .cps-tdots .tdot.active{ width:26px; background:var(--c-accent); }
.is-wrapper .cps-tarrows{ display:flex; gap:10px; }
.is-wrapper .cps-tarrows .tarrow{
width:44px; height:44px; padding:0;
border:1px solid var(--c-line); border-radius:var(--r-pill);
background:var(--c-paper); color:var(--c-ink);
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .2s ease;
}
.is-wrapper .cps-tarrows .tarrow:hover{ background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
/* =================================================================
EDU + FAQ
================================================================= */
.is-wrapper .cps-edu-head .section-main-heading{ margin-top:16px; font-size:clamp(27px,2.9vw,38px); }
.is-wrapper .cps-edu-head .content-text{ margin-top:16px; }
.is-wrapper .cps-edu-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.is-wrapper .cps-edu-list li{ display:flex; align-items:flex-start; gap:14px; }
.is-wrapper .cps-edu-list .cps-ic{
flex:0 0 auto; width:44px; height:44px; border-radius:13px;
background:rgba(var(--c-primary-rgb),.10); border:1px solid transparent; color:var(--c-primary);
display:flex; align-items:center; justify-content:center;
}
.is-wrapper .cps-edu-list b{ display:block; font-family:var(--font-body); font-size:16px; font-weight:700; color:var(--c-ink); }
.is-wrapper .cps-edu-list span{ display:block; font-family:var(--font-body); font-size:14px; color:var(--c-ink-2); margin-top:2px; }
.is-wrapper .cps-edu-head .web-cta-link{ margin-top:28px; }
/* FAQ accordion — refined */
.is-wrapper .cps-faq{ display:flex; flex-direction:column; gap:14px; }
.is-wrapper .cps-faq-item{
position:relative;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
overflow:hidden;
transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.is-wrapper .cps-faq-item:hover{ border-color:#d8cfbd; }
.is-wrapper .cps-faq-item.open{
border-color:var(--c-accent);
box-shadow: inset 3px 0 0 var(--c-accent), var(--shadow-1);
}
.is-wrapper .cps-faq-q{
width:100%; text-align:left;
display:flex; align-items:center; justify-content:space-between; gap:18px;
padding:21px 24px;
font-family:var(--font-head); font-size:18px; font-weight:600; line-height:1.4; color:var(--c-ink);
background:transparent; border:0; cursor:pointer;
transition:color .2s ease, padding .28s cubic-bezier(.4,0,.2,1);
}
.is-wrapper .cps-faq-q:hover{ color:var(--c-accent-dark); }
.is-wrapper .cps-faq-item.open .cps-faq-q{ color:var(--c-accent-dark); padding-bottom:15px; box-shadow:none; }
.is-wrapper .cps-faq-q:focus-visible{
outline:none;
box-shadow: inset 0 0 0 2px var(--c-primary);
border-radius:var(--r-md);
}
.is-wrapper .cps-faq-q .pl{
flex:0 0 auto; width:30px; height:30px; border-radius:var(--r-pill);
background:var(--c-tint); color:var(--c-accent);
display:flex; align-items:center; justify-content:center;
transition:transform .3s cubic-bezier(.34,1.25,.5,1), background-color .25s ease, color .25s ease;
}
.is-wrapper .cps-faq-q:hover .pl{ background:#eee6d4; }
.is-wrapper .cps-faq-item.open .cps-faq-q .pl{ transform:rotate(135deg); background:var(--c-accent); color:#fff; }
.is-wrapper .cps-faq-a{ max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.4,0,.2,1); }
.is-wrapper .cps-faq-a p{
font-family:var(--font-body); font-size:15px; line-height:1.72; color:var(--c-ink-2);
margin:0; padding:16px 24px 24px; border-top:1px solid var(--c-line);
}
/* =================================================================
SERVICE AREA — centered band + location chips
================================================================= */
.is-wrapper > .cps-bg-tint,
.is-wrapper .cps-bg-tint{ background:var(--c-tint); padding:var(--space-section) 0; }
.is-wrapper .cps-area{ max-width:820px; margin:0 auto; text-align:center; }
.is-wrapper .cps-area .section-main-heading{ margin-top:16px; }
.is-wrapper .cps-area-lead{ max-width:700px; margin:18px auto 0; }
.is-wrapper .cps-area-list{
list-style:none; margin:38px 0 0; padding:0;
display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.is-wrapper .cps-area-chip{
display:inline-flex; align-items:center; gap:10px;
padding:13px 24px;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-pill);
font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--c-ink);
text-decoration:none;
transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.is-wrapper a.cps-area-chip:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.is-wrapper .cps-area-chip i{
color:var(--c-accent); font-size:15px;
transition:color .2s ease, transform .2s ease;
}
.is-wrapper .cps-area-chip:hover{
transform:translateY(-3px); box-shadow:var(--shadow-2);
border-color:var(--c-accent); color:var(--c-accent-dark);
}
.is-wrapper .cps-area-chip:hover i{ color:var(--c-primary); transform:scale(1.12); }
.is-wrapper .cps-area-chip--more{
background:transparent; border:1px dashed #c9bfa8; color:var(--c-ink-2); font-weight:500;
}
.is-wrapper .cps-area-chip--more:hover{
transform:none; box-shadow:none; border-color:var(--c-accent); color:var(--c-accent-dark);
}
@media all and (max-width:640px){
.is-wrapper .cps-area-list{ gap:10px; }
.is-wrapper .cps-area-chip{ padding:11px 18px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
.is-wrapper .cps-area-chip,
.is-wrapper .cps-area-chip i{ transition:none; }
}
/* =================================================================
INSURANCES — logo slider with prev/next + CTA + note
================================================================= */
.is-wrapper .cps-ins-head{ max-width:680px; margin:0 auto; text-align:center; }
.is-wrapper .cps-ins-head .section-main-heading{ margin-top:16px; }
.is-wrapper .cps-ins-lead{ margin-top:14px; }
.is-wrapper .cps-ins-slider{ display:flex; align-items:center; gap:16px; margin-top:44px; }
.is-wrapper .cps-ins-viewport{ position:relative; flex:1 1 auto; min-width:0; }
.is-wrapper .cps-ins-viewport::before,
.is-wrapper .cps-ins-viewport::after{
content:""; position:absolute; top:0; bottom:0; width:52px; z-index:2; pointer-events:none;
}
.is-wrapper .cps-ins-viewport::before{ left:0; background:linear-gradient(90deg,var(--c-paper),transparent); }
.is-wrapper .cps-ins-viewport::after{ right:0; background:linear-gradient(270deg,var(--c-paper),transparent); }
.is-wrapper .cps-ins-track{
display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
padding:6px 2px 10px; scroll-snap-type:x proximity;
scrollbar-width:none; -ms-overflow-style:none;
}
.is-wrapper .cps-ins-track::-webkit-scrollbar{ display:none; }
.is-wrapper .cps-ins-chip{
flex:0 0 auto; width:160px; height:94px; scroll-snap-align:start;
display:flex; align-items:center; justify-content:center;
padding:18px 22px;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.is-wrapper .cps-ins-chip img{
max-width:100%; max-height:50px; width:auto; height:auto; object-fit:contain;
font-size:13px; color:var(--c-ink-2); text-align:center; /* graceful alt-text fallback before logos upload */
filter:grayscale(100%); opacity:.7;
transition:filter .25s ease, opacity .25s ease;
}
.is-wrapper .cps-ins-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--c-accent); }
.is-wrapper .cps-ins-chip:hover img{ filter:none; opacity:1; }
.is-wrapper .cps-ins-arrow{
flex:0 0 auto; width:46px; height:46px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
background:var(--c-paper); border:1.5px solid var(--c-line); color:var(--c-accent);
cursor:pointer; padding:0;
transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease;
}
.is-wrapper .cps-ins-arrow i{ font-size:16px; }
.is-wrapper .cps-ins-arrow:hover:not(:disabled){ background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.is-wrapper .cps-ins-arrow:active:not(:disabled){ transform:scale(.93); }
.is-wrapper .cps-ins-arrow:disabled{ opacity:.32; cursor:default; }
.is-wrapper .cps-ins-actions{ text-align:center; margin-top:38px; }
.is-wrapper .cps-ins-note{
text-align:center; margin:18px auto 0; max-width:560px;
font-family:var(--font-body); font-size:15px; color:var(--c-ink-2);
}
.is-wrapper .cps-ins-note b{ color:var(--c-ink); font-weight:700; }
@media all and (max-width:640px){
.is-wrapper .cps-ins-slider{ gap:8px; margin-top:34px; }
.is-wrapper .cps-ins-viewport::before,
.is-wrapper .cps-ins-viewport::after{ width:28px; }
.is-wrapper .cps-ins-chip{ width:136px; height:84px; padding:14px 18px; }
.is-wrapper .cps-ins-chip img{ max-height:42px; }
.is-wrapper .cps-ins-arrow{ width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce){
.is-wrapper .cps-ins-track{ scroll-behavior:auto; }
.is-wrapper .cps-ins-chip,
.is-wrapper .cps-ins-chip img,
.is-wrapper .cps-ins-arrow{ transition:none; }
}
/* =================================================================
FLOATING HEARTS — reusable decorative motif (contact / any warm band)
Wrap a section's content cell in .cps-contact-shell, then drop the
.cps-hearts layer in as its FIRST child. Hearts are decorative only
(aria-hidden, pointer-events:none) and always sit behind content.
Color = var(--c-heart); add .is-coral for coral, .is-sticker for a
white-edged "sticker" heart. Each heart's --r/--d/--delay vary the tilt
+ float so the scatter never looks mechanical.
================================================================= */
.is-wrapper .cps-contact-shell{ position:relative; }
.is-wrapper .cps-contact-shell > *{ position:relative; z-index:1; }
.is-wrapper .cps-hearts{
position:absolute; inset:0; z-index:0;
overflow:hidden; pointer-events:none;
}
.is-wrapper .cps-heart{
position:absolute; line-height:1; color:var(--c-heart);
transform:rotate(var(--r,0deg));
filter:drop-shadow(0 6px 12px rgba(38,28,20,.18));
animation:cpsHeartFloat var(--d,7s) ease-in-out var(--delay,0s) infinite;
will-change:transform;
}
.is-wrapper .cps-heart.is-coral{ color:var(--c-primary); }
.is-wrapper .cps-heart.is-sticker{ -webkit-text-stroke:3px #fff; paint-order:stroke fill; }
@keyframes cpsHeartFloat{
0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
50% { transform:translateY(-13px) rotate(var(--r,0deg)); }
}
/* left-edge cluster */
.is-wrapper .cps-heart.hh1 { top:5%; left:2%; font-size:34px; opacity:.92; --r:-15deg; --d:6.5s; --delay:0s; }
.is-wrapper .cps-heart.hh2 { top:20%; left:7%; font-size:20px; opacity:.7; --r:10deg; --d:7.5s; --delay:.6s; }
.is-wrapper .cps-heart.hh3 { top:40%; left:1%; font-size:26px; opacity:.85; --r:-8deg; --d:8s; --delay:1.1s; }
.is-wrapper .cps-heart.hh4 { top:62%; left:6%; font-size:18px; opacity:.6; --r:16deg; --d:7s; --delay:.3s; }
.is-wrapper .cps-heart.hh5 { top:80%; left:3%; font-size:30px; opacity:.9; --r:-12deg; --d:6.8s; --delay:.9s; }
/* top-center accents */
.is-wrapper .cps-heart.hh6 { top:2%; left:34%; font-size:22px; opacity:.8; --r:-18deg; --d:7.2s; --delay:.4s; }
.is-wrapper .cps-heart.hh7 { top:1%; left:52%; font-size:16px; opacity:.65; --r:12deg; --d:8.2s; --delay:1.4s; }
/* right-edge cluster */
.is-wrapper .cps-heart.hh8 { top:8%; right:3%; font-size:32px; opacity:.92; --r:14deg; --d:6.6s; --delay:.2s; }
.is-wrapper .cps-heart.hh9 { top:24%; right:8%; font-size:18px; opacity:.7; --r:-10deg; --d:7.6s; --delay:1s; }
.is-wrapper .cps-heart.hh10{ top:46%; right:2%; font-size:24px; opacity:.85; --r:8deg; --d:8s; --delay:.5s; }
.is-wrapper .cps-heart.hh11{ top:68%; right:7%; font-size:20px; opacity:.65; --r:-16deg; --d:7.1s; --delay:1.2s; }
.is-wrapper .cps-heart.hh12{ top:84%; right:3%; font-size:30px; opacity:.9; --r:12deg; --d:6.9s; --delay:.7s; }
/* sticker (white-edged) accents */
.is-wrapper .cps-heart.hh13{ top:12%; right:30%; font-size:26px; opacity:1; --r:-10deg; --d:7.4s; --delay:.8s; }
.is-wrapper .cps-heart.hh14{ top:78%; left:32%; font-size:22px; opacity:1; --r:14deg; --d:7.8s; --delay:.2s; }
@media all and (max-width:640px){
.is-wrapper .cps-heart{ font-size:15px !important; filter:none; }
.is-wrapper .cps-heart.hh6,
.is-wrapper .cps-heart.hh7,
.is-wrapper .cps-heart.hh10,
.is-wrapper .cps-heart.hh13,
.is-wrapper .cps-heart.hh14{ display:none; }
}
@media (prefers-reduced-motion:reduce){
.is-wrapper .cps-heart{ animation:none; }
}
/* =================================================================
BIG CTA — deep green
================================================================= */
.is-wrapper .cps-cta-wrap{ text-align:center; max-width:760px; margin:0 auto; }
.is-wrapper .cps-cta-wrap .section-main-heading{ color:#fff; font-size:clamp(30px,3.6vw,48px); }
.is-wrapper .cps-cta-wrap .section-description{ color:rgba(255,255,255,.85); margin-top:18px; }
.is-wrapper .cps-cta-btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
/* =================================================================
ACCESSIBILITY / MOTION
================================================================= */
@media (prefers-reduced-motion:reduce){
.is-wrapper *,
.is-wrapper *::before,
.is-wrapper *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* =================================================================
BUILDER / EDIT MODE FALLBACK
Webware adds user-logged-out on only on the LIVE site.
In the builder that class is absent and cps-interactions.js no-ops,
so reveal JS-collapsed content here to keep it editable.
(Live site = user-logged-out = unaffected; JS controls these.)
================================================================= */
html:not(.user-logged-out) .cps-faq-a{ max-height:none; }
html:not(.user-logged-out) .cps-slide{ display:block; }
/* =================================================================
CENTERED STACK LAYOUT (Trust · Edu · Newsletter)
Full-width sections whose head + list are centered.
================================================================= */
.is-wrapper .cps-stack-center{ max-width:940px; margin:0 auto; text-align:center; }
.is-wrapper .cps-stack-center .section-main-heading{ margin-left:auto; margin-right:auto; }
.is-wrapper .cps-stack-center .content-text,
.is-wrapper .cps-stack-center .section-description{ max-width:760px; margin-left:auto; margin-right:auto; }
/* Trust points -> centered wrapping chips */
.is-wrapper .cps-stack-center .cps-trust-points{
display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px;
}
.is-wrapper .cps-stack-center .cps-trust-points li{
background:var(--c-paper); border:1px solid var(--c-line); border-radius:var(--r-pill);
padding:11px 22px; box-shadow:var(--shadow-soft);
}
/* Edu list -> centered wrapping pill cards */
.is-wrapper .cps-stack-center .cps-edu-list{
flex-direction:row; flex-wrap:wrap; justify-content:center;
gap:16px; max-width:880px; margin-left:auto; margin-right:auto;
}
.is-wrapper .cps-stack-center .cps-edu-list li{
align-items:center; background:var(--c-paper); border:1px solid var(--c-line);
border-radius:var(--r-pill); padding:10px 24px 10px 10px; box-shadow:var(--shadow-soft);
}
@media all and (max-width:560px){
.is-wrapper .cps-stack-center .cps-edu-list li{ width:100%; }
}
/* (newsletter styles moved to the FEATURED CONVERSION PANEL block, end of file) */
/* Why card is now title-only (description removed) — trim trailing gap */
.is-wrapper .cps-why-card b{ margin-bottom:0; }
/* =================================================================
SCROLL REVEAL + MICRO-INTERACTIONS
Live site only (html.user-logged-out) AND only when motion is OK.
Builder (no user-logged-out) and reduced-motion users never get
hidden content; cps-interactions.js adds .is-in on scroll.
================================================================= */
@media (prefers-reduced-motion:no-preference){
html.user-logged-out [data-cps-reveal]{
opacity:0;
transform:translateY(26px);
transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
will-change:opacity,transform;
}
html.user-logged-out [data-cps-reveal].is-in{ opacity:1; transform:none; }
/* gentle lift for the centered chip/pill rows (Trust · Edu) */
.is-wrapper .cps-stack-center .cps-trust-points li,
.is-wrapper .cps-stack-center .cps-edu-list li{
transition:transform .25s ease, box-shadow .25s ease;
}
.is-wrapper .cps-stack-center .cps-trust-points li:hover,
.is-wrapper .cps-stack-center .cps-edu-list li:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-2);
}
}
/* =================================================================
CPS — HEADER + SIDENAV + FOOTER (merged)
Reskinned from a proven new-header-6 / sidenav / footer system to CPS
brand tokens. Surface-aware: pine accents on the cream header + cream
sidenav (light), coral accents on the charcoal dropdown + charcoal footer
(dark) so nothing goes invisible. Targets existing platform markup —
no HTML changes. SVG data-uri strokes are hardcoded (vars can't reach
inside a data-uri): chevrons on cream = ink/pine, footer icons = coral.
================================================================= */
/* === HEADER === */
header#header.new-header-6 {
background: var(--c-cream);
border-bottom: 1px solid rgba(var(--c-black-rgb), 0.08);
position: relative;
z-index: 99;
transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6.is-stuck {
background: var(--c-cream);
box-shadow: 0 6px 28px rgba(var(--c-black-rgb), 0.07);
border-bottom: 1px solid rgba(var(--c-black-rgb), 0.06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
header#header.new-header-6.is-stuck {
background: rgba(var(--c-cream-rgb), 0.78);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
backdrop-filter: blur(18px) saturate(1.5);
}
}
/* Hairline accent at top edge — coral -> pine -> coral */
header#header.new-header-6::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
var(--c-primary) 0%,
var(--c-accent) 50%,
var(--c-primary) 100%);
opacity: 0.9;
z-index: 2;
}
/* --- Logo / Text logo --- */
header#header.new-header-6 .logo-container {
padding: 4px 0;
}
header#header.new-header-6 .logo-container a {
display: inline-block;
transition: opacity 0.3s ease;
}
header#header.new-header-6 .logo-container a:hover {
opacity: 0.78;
}
/* Solid pine wordmark (fallback when no image logo) — brand head font */
header#header.new-header-6 .text-logo {
font-family: var(--font-head);
font-style: normal;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--c-accent-dark);
line-height: 1;
transition: letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6 .logo-container a:hover .text-logo {
letter-spacing: 0.005em;
}
header#header.new-header-6 .logo-container img {
max-height: 170px;
width: auto;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6 .logo-container a:hover img {
transform: scale(1.03);
}
/* === DESKTOP (1024px and up) === */
@media screen and (min-width: 64em) {
header#header.new-header-6 .contact-section.menu {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-end;
}
header#header.new-header-6 .contact-section.menu > li {
margin: 0;
}
header#header.new-header-6 .menu a.head-contact-links {
display: flex !important;
align-items: center;
gap: 12px;
padding: 10px 18px !important;
border-radius: 10px;
background: transparent;
transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
header#header.new-header-6 .menu a.head-contact-links:hover {
background: rgba(var(--c-accent-rgb), 0.06);
transform: translateY(-1px);
}
/* Icon circle — pale meadow tile + pine glyph; pine fill + white on hover */
header#header.new-header-6 .menu a.head-contact-links .icon-part {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
background: var(--c-tint);
color: var(--c-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 0;
transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6 .menu a.head-contact-links:hover .icon-part {
background: var(--c-accent);
color: var(--c-light);
transform: rotate(-8deg) scale(1.08);
}
header#header.new-header-6 .menu a.head-contact-links .icon-part i {
color: inherit;
font-size: 16px;
}
header#header.new-header-6 .menu a.head-contact-links .text-part {
text-align: left;
line-height: 1.2;
}
/* Micro-eyebrow ("Call Us"/"Email") — Nunito uppercase tracked coral */
header#header.new-header-6 .menu a.head-contact-links .text-part .heading {
font-family: var(--font-body);
font-style: normal;
font-size: 11px;
color: var(--c-primary-dark);
padding-bottom: 3px !important;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
}
header#header.new-header-6 .menu a.head-contact-links .text-part .below-text {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--c-ink);
line-height: 1.2;
letter-spacing: 0.01em;
}
header#header.new-header-6 .contact-section.menu > li:nth-child(2) {
position: relative;
}
header#header.new-header-6 .contact-section.menu > li:nth-child(2)::before {
content: "";
position: absolute;
left: -4px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 32px;
background: rgba(var(--c-black-rgb), 0.12);
}
/* --- Primary CTA button — pine solid + white + arrow --- */
header#header.new-header-6 .contact-section.menu > li.padding-left-1 {
padding-left: 16px !important;
}
header#header.new-header-6 .contact-section.menu .button {
display: inline-flex !important;
align-items: center;
gap: 10px;
background: var(--btn-bg) !important;
color: var(--btn-text) !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 13px 28px !important;
border-radius: var(--r-pill) !important;
border: none !important;
box-shadow: 0 4px 16px rgba(var(--c-accent-dark-rgb), 0.28);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
position: relative;
overflow: hidden;
margin-bottom: 0;
}
header#header.new-header-6 .contact-section.menu .button::after {
content: "→";
font-size: 14px;
line-height: 1;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6 .contact-section.menu .button:hover {
background: var(--btn-bg-hover) !important;
transform: translateY(-2px);
color:#fff !important;
box-shadow: 0 8px 24px rgba(var(--c-accent-dark-rgb), 0.40) !important;
}
header#header.new-header-6 .contact-section.menu .button:hover::after {
transform: translateX(5px);
}
header#header.new-header-6 .menu-container {
border-top: 1px solid rgba(var(--c-black-rgb), 0.08) !important;
margin-top: 18px !important;
padding-top: 6px !important;
}
/* --- Main navigation --- */
header#header.new-header-6 .dropdown.menu.level-1 {
gap: 4px;
}
header#header.new-header-6 .dropdown.menu.level-1 > li {
position: relative;
}
header#header.new-header-6 .dropdown.menu.level-1 > li > a:not(.button) {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-ink);
padding: 14px 7px !important;
border-radius: var(--r-pill);
position: relative;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Animated underline — pine (light surface) */
header#header.new-header-6 .dropdown.menu.level-1 > li > a:not(.button)::before {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 8px;
height: 1.5px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
header#header.new-header-6 .dropdown.menu.level-1 > li.active > a:not(.button)::before,
header#header.new-header-6 .dropdown.menu.level-1 > li.is-active > a:not(.button)::before {
transform: scaleX(1);
}
header#header.new-header-6 .dropdown.menu.level-1 > li:hover > a:not(.button),
header#header.new-header-6 .dropdown.menu.level-1 > li.active > a:not(.button),
header#header.new-header-6 .dropdown.menu.level-1 > li.is-active > a:not(.button) {
color: var(--c-accent);
background: rgba(var(--c-accent-rgb), 0.07) !important;
}
header#header.new-header-6 .dropdown.menu.level-1 > li:hover > a:not(.button) span,
header#header.new-header-6 .dropdown.menu.level-1 > li.active > a:not(.button) span,
header#header.new-header-6 .dropdown.menu.level-1 > li.is-active > a:not(.button) span {
color: var(--c-accent);
}
/* Submenu chevron — ink on cream, pine on hover */
header#header.new-header-6 .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: auto !important;
right: 16px !important;
top: 50% !important;
bottom: auto !important;
width: 10px !important;
height: 6px !important;
margin: -3px 0 0 !important;
padding: 0 !important;
transform: rotate(0deg);
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
background-color: transparent !important;
border: none !important;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background-image 0.3s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 1;
}
header#header.new-header-6 .dropdown.menu.level-1 > li.is-dropdown-submenu-parent > a:not(.button) {
padding-right: 32px !important;
}
header#header.new-header-6 .dropdown.menu > li.is-dropdown-submenu-parent:hover > a::after,
header#header.new-header-6 .dropdown.menu > li.is-dropdown-submenu-parent.is-active > a::after,
header#header.new-header-6 .dropdown.menu > li.is-dropdown-submenu-parent.active > a::after {
transform: rotate(180deg) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Submenu dropdown — DARK (charcoal) -> CORAL accents */
header#header.new-header-6 .dropdown.menu li ul.submenu {
background: var(--c-ink) !important;
min-width: 220px;
padding: 12px 0 !important;
border-radius: var(--r-md) !important;
box-shadow: 0 16px 40px rgba(var(--c-black-rgb), 0.18),
0 4px 12px rgba(var(--c-black-rgb), 0.08);
border: none !important;
margin-top: 6px;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
header#header.new-header-6 .dropdown.menu li.is-active > ul.submenu,
header#header.new-header-6 .dropdown.menu li:hover > ul.submenu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
header#header.new-header-6 .dropdown.menu li ul.submenu li a:not(.button) {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
color: var(--c-light);
padding: 10px 22px !important;
position: relative;
transition: all 0.25s ease;
line-height: 1.5;
}
header#header.new-header-6 .dropdown.menu li ul.submenu li a:not(.button):hover {
color: var(--c-accent-on-dark) !important;
background: rgba(var(--c-white-rgb), 0.06) !important;
padding-left: 28px !important;
}
header#header.new-header-6 .dropdown.menu li ul.submenu li.active > a:not(.button),
header#header.new-header-6 .dropdown.menu li ul.submenu li.is-active > a:not(.button) {
color: var(--c-accent-on-dark) !important;
background: rgba(var(--c-primary-rgb), 0.12) !important;
padding-left: 32px !important;
font-weight: 500;
}
header#header.new-header-6 .dropdown.menu li ul.submenu li.active > a:not(.button) span,
header#header.new-header-6 .dropdown.menu li ul.submenu li.is-active > a:not(.button) span {
color: var(--c-accent-on-dark) !important;
}
header#header.new-header-6 .dropdown.menu li ul.submenu li.active > a:not(.button)::before,
header#header.new-header-6 .dropdown.menu li ul.submenu li.is-active > a:not(.button)::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-accent-on-dark);
pointer-events: none;
}
}
/* === MOBILE / TABLET (1023.5px and below) === */
@media screen and (max-width: 63.9375em) {
header#header.new-header-6 {
background: var(--c-cream);
}
header#header.new-header-6 .custom-grid-container {
padding-top: 14px !important;
padding-bottom: 14px !important;
padding-left: 16px !important;
padding-right: 16px !important;
position: relative;
}
header#header.new-header-6 .logo-container {
text-align: center !important;
width: 100%;
flex: 1 1 100%;
margin: 0 auto;
padding-left: 56px !important;
padding-right: 56px !important;
}
header#header.new-header-6 .logo-container a {
display: inline-block;
}
header#header.new-header-6 .text-logo {
font-size: 28px !important;
}
header#header.new-header-6 .logo-container img {
max-height: 170px;
display: inline-block;
}
/* Hamburger — pine fill + white icon on press (cream surface) */
header#header.new-header-6 .sidenav-container {
background-color: transparent;
color: var(--c-ink);
height: 44px;
width: 44px;
text-align: center;
border-radius: 50%;
padding-top: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--c-black-rgb), 0.12);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
z-index: 3;
}
header#header.new-header-6 .sidenav-container:hover,
header#header.new-header-6 .sidenav-container:active {
background-color: var(--c-accent);
border-color: var(--c-accent);
}
header#header.new-header-6 .sidenav-container:hover .openMenu i,
header#header.new-header-6 .sidenav-container:active .openMenu i {
color: var(--c-light);
}
header#header.new-header-6 .sidenav-container .openMenu {
background: transparent;
padding: 0;
margin: 0;
box-shadow: none;
}
header#header.new-header-6 .sidenav-container .openMenu:hover,
header#header.new-header-6 .sidenav-container .openMenu:focus,
header#header.new-header-6 .sidenav-container .openMenu:active {
box-shadow: none;
background: transparent;
}
header#header.new-header-6 .sidenav-container .openMenu i {
color: var(--c-ink);
font-size: 20px;
line-height: 1;
transition: color 0.3s ease;
}
header#header.new-header-6 .sidenav-container i.fa-bars.icon {
color: inherit;
}
header#header.new-header-6 .mobile-contact-button-section {
padding:10px 0;
margin: 0;
line-height: normal;
text-align: center;
display: flex;
justify-content: center;
align-items: stretch;
min-height: 0;
background: var(--c-cream);
border-top: 1px solid rgba(var(--c-black-rgb), 0.08);
}
/* Phone CTA row */
header#header.new-header-6 .mobile-contact-button-section .head-contact-links {
display: flex !important;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 20px !important;
width: 100%;
background: var(--c-cream);
color: var(--c-ink);
text-align: left;
transition: background 0.3s ease;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links:hover,
header#header.new-header-6 .mobile-contact-button-section .head-contact-links:active {
background: rgba(var(--c-accent-rgb), 0.06);
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .icon-part {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 50%;
background: var(--c-tint);
color: var(--c-accent);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 14px;
flex-shrink: 0;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .icon-part i {
color: inherit;
font-size: 14px;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .text-part {
text-align: left;
line-height: 1.2;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .text-part .heading {
font-family: var(--font-body);
font-style: normal;
font-size: 10px;
color: var(--c-primary-dark);
padding-bottom: 2px !important;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .text-part .below-text {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--c-ink);
line-height: 1.2;
letter-spacing: 0.01em;
}
/* Book-a-session row — pine solid CTA */
header#header.new-header-6 .mobile-contact-button-section .button {
background-color: var(--btn-bg) !important;
background-image: none !important;
color: var(--btn-text) !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 18px 24px !important;
border-radius: 50px !important;
box-shadow: none !important;
margin: 0 !important;
width: auto;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 12px;
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6 .mobile-contact-button-section .button::after {
content: "→";
font-size: 16px;
font-weight: 400;
line-height: 1;
display: inline-block;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
header#header.new-header-6 .mobile-contact-button-section .button:hover,
header#header.new-header-6 .mobile-contact-button-section .button:focus {
background-color: var(--btn-bg-hover) !important;
box-shadow: none !important;
gap: 16px;
}
header#header.new-header-6 .mobile-contact-button-section .button:hover::after,
header#header.new-header-6 .mobile-contact-button-section .button:focus::after {
transform: translateX(2px);
}
}
/* === SMALL MOBILE (640px and below) === */
@media screen and (max-width: 39.9375em) {
header#header.new-header-6 .custom-grid-container {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
header#header.new-header-6 .text-logo {
font-size: 24px !important;
}
header#header.new-header-6 .logo-container {
padding-left: 50px !important;
padding-right: 50px !important;
}
header#header.new-header-6 .logo-container img {
max-height: 170px;
}
header#header.new-header-6 .sidenav-container {
height: 40px;
width: 40px;
right: 12px;
}
header#header.new-header-6 .sidenav-container .openMenu i {
font-size: 18px;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links {
padding: 12px 18px !important;
gap: 10px;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .icon-part {
width: 34px;
height: 34px;
min-width: 34px;
font-size: 12px;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .text-part .heading {
font-size: 10px;
}
header#header.new-header-6 .mobile-contact-button-section .head-contact-links .text-part .below-text {
font-size: 13px;
}
header#header.new-header-6 .mobile-contact-button-section .button {
padding: 16px 20px !important;
font-size: 11px !important;
letter-spacing: 0.16em;
}
}
@media (prefers-reduced-motion: reduce) {
header#header.new-header-6,
header#header.new-header-6 *,
header#header.new-header-6 *::before,
header#header.new-header-6 *::after {
transition: none !important;
animation: none !important;
}
}
/* === SIDENAV — Mobile off-canvas drawer (cream surface -> PINE accents) === */
aside.sidenav {
background: var(--c-paper) !important;
box-shadow: -8px 0 32px rgba(var(--c-black-rgb), 0.14);
padding: 0 !important;
}
/* Top accent strip — pine + coral on cream */
aside.sidenav::before {
content: "";
display: block;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--c-accent) 30%,
var(--c-primary) 50%,
var(--c-accent) 70%,
transparent 100%);
}
aside.sidenav .menu.accordion-menu {
background: transparent !important;
margin: 0 !important;
padding: 0 0 !important;
border: none !important;
}
aside.sidenav .menu.accordion-menu > li {
background: transparent !important;
border-bottom: 1px solid rgba(var(--c-black-rgb), 0.06) !important;
margin: 0 !important;
}
aside.sidenav .menu.accordion-menu > li:last-child {
border-bottom: 0 !important;
}
aside.sidenav .menu.accordion-menu > li > a:not(.button) {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
color: var(--c-ink) !important;
background: transparent !important;
padding: 20px 28px 20px 32px !important;
position: relative;
display: block;
line-height: 1;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
aside.sidenav .menu.accordion-menu > li > a:not(.button) span {
color: inherit !important;
background: transparent !important;
padding-left: 0 !important;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Animated left-edge accent bar — pine */
aside.sidenav .menu.accordion-menu > li > a:not(.button)::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 20px;
background: var(--c-accent);
transform: translateY(-50%) scaleY(0);
transform-origin: center center;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
border-radius: 0 2px 2px 0;
pointer-events: none;
}
aside.sidenav .menu.accordion-menu > li:hover > a:not(.button),
aside.sidenav .menu.accordion-menu > li.active > a:not(.button),
aside.sidenav .menu.accordion-menu > li.is-active > a:not(.button) {
color: var(--c-accent) !important;
background: rgba(var(--c-accent-rgb), 0.05) !important;
padding-left: 40px !important;
}
aside.sidenav .menu.accordion-menu > li:hover > a:not(.button) span,
aside.sidenav .menu.accordion-menu > li.active > a:not(.button) span,
aside.sidenav .menu.accordion-menu > li.is-active > a:not(.button) span {
color: var(--c-accent) !important;
}
aside.sidenav .menu.accordion-menu > li:hover > a:not(.button)::before,
aside.sidenav .menu.accordion-menu > li.active > a:not(.button)::before,
aside.sidenav .menu.accordion-menu > li.is-active > a:not(.button)::before {
transform: translateY(-50%) scaleY(1);
}
/* Accordion chevron — ink on cream, pine when expanded */
aside.sidenav .menu.accordion-menu li.is-accordion-submenu-parent > a::after,
aside.sidenav .menu.accordion-menu li.has-submenu > a::after {
content: "" !important;
display: block !important;
position: absolute !important;
right: 24px !important;
top: 50% !important;
bottom: auto !important;
left: auto !important;
width: 12px !important;
height: 8px !important;
margin: -4px 0 0 !important;
padding: 0 !important;
transform: rotate(0deg);
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
background-color: transparent !important;
border: none !important;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background-image 0.3s ease;
pointer-events: none;
z-index: 1;
}
aside.sidenav .menu.accordion-menu li.is-accordion-submenu-parent:hover > a::after,
aside.sidenav .menu.accordion-menu li.is-accordion-submenu-parent.is-active > a::after,
aside.sidenav .menu.accordion-menu li.has-submenu.is-active > a::after,
aside.sidenav .menu.accordion-menu li.has-submenu[aria-expanded="true"] > a::after {
transform: rotate(180deg) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Nested submenu — still on cream, pine accents */
aside.sidenav .menu.accordion-menu .is-accordion-submenu,
aside.sidenav .menu.accordion-menu ul.submenu {
background: rgba(var(--c-black-rgb), 0.03) !important;
padding: 6px 0 !important;
margin: 0 !important;
border-top: 1px solid rgba(var(--c-black-rgb), 0.06);
list-style: none;
}
aside.sidenav .menu.accordion-menu .is-accordion-submenu li,
aside.sidenav .menu.accordion-menu ul.submenu li {
border-bottom: none !important;
background: transparent !important;
}
aside.sidenav .menu.accordion-menu .is-accordion-submenu .is-submenu-item > a,
aside.sidenav .menu.accordion-menu ul.submenu li > a {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
color: rgba(var(--c-black-rgb), 0.72) !important;
background: transparent !important;
padding: 11px 28px 11px 48px !important;
line-height: 1.4;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
aside.sidenav .menu.accordion-menu .is-accordion-submenu .is-submenu-item > a span.padding-left-1,
aside.sidenav .menu.accordion-menu ul.submenu li > a span {
color: inherit !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
aside.sidenav .menu.accordion-menu .is-accordion-submenu .is-submenu-item > a:hover,
aside.sidenav .menu.accordion-menu .is-accordion-submenu .is-submenu-item.active > a,
aside.sidenav .menu.accordion-menu ul.submenu li > a:hover,
aside.sidenav .menu.accordion-menu ul.submenu li.active > a {
color: var(--c-accent) !important;
background: transparent !important;
padding-left: 54px !important;
}
aside.sidenav .menu.accordion-menu .is-accordion-submenu .is-submenu-item > a:hover span,
aside.sidenav .menu.accordion-menu .is-accordion-submenu .is-submenu-item.active > a span,
aside.sidenav .menu.accordion-menu ul.submenu li > a:hover span,
aside.sidenav .menu.accordion-menu ul.submenu li.active > a span {
color: var(--c-accent) !important;
}
@media (prefers-reduced-motion: reduce) {
aside.sidenav,
aside.sidenav *,
aside.sidenav *::before,
aside.sidenav *::after {
transition: none !important;
animation: none !important;
}
}
/* ===========================================================================
FOOTER (charcoal #footer -> CORAL accents; cream headings)
=========================================================================== */
#footer {
background: var(--c-ink) !important;
color: rgba(var(--c-white-rgb), 0.82);
position: relative;
padding: 0 !important;
overflow: hidden;
}
/* Top hairline — coral (visible + warm on dark) */
#footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--c-primary-rgb), 0.4) 20%,
var(--c-primary) 50%,
rgba(var(--c-primary-rgb), 0.4) 80%,
transparent 100%);
z-index: 2;
pointer-events: none;
}
/* Subtle pine depth glow */
#footer::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 100%;
background: radial-gradient(ellipse at top,
rgba(var(--c-accent-rgb), 0.10) 0%,
transparent 60%);
pointer-events: none;
z-index: 0;
}
#footer hr {
border: none !important;
border-top: 1px solid rgba(var(--c-white-rgb), 0.08) !important;
margin: 0 !important;
background: transparent !important;
height: 1px;
}
#footer .footer2 {
padding: 80px 0 40px !important;
position: relative;
z-index: 1;
}
#footer .grid-x.footer2 > .cell {
margin-bottom: 32px;
}
#footer .border-bottom-small {
border-bottom: none !important;
}
#footer .column-container {
text-align: left;
padding: 0 12px;
}
/* Column headings — head font, warm cream, coral underline */
#footer h4 {
font-family: var(--font-body);
font-style: normal;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(var(--c-white-rgb), 0.92);
margin: 0 0 24px 0 !important;
padding-bottom: 14px;
position: relative;
line-height: 1.2;
}
#footer h4::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--c-primary);
border-radius: 2px;
}
#footer .column-container ul.no-bullet,
#footer .footer2 ul.no-bullet {
list-style: none;
margin: 0;
padding: 0;
}
#footer .footer2 ul li {
margin: 0;
padding: 0;
border: none;
background: transparent;
list-style: none;
}
/* Links section — coral hover */
#footer .links-section ul li a {
color: rgba(var(--c-white-rgb), 0.70);
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.5;
padding: 8px 0 8px 0;
display: inline-block;
text-decoration: none;
position: relative;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .links-section ul li a::before {
content: "→";
position: absolute;
left: -2px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
color: var(--c-accent-on-dark);
font-size: 13px;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
#footer .links-section ul li a:hover,
#footer .links-section ul li.active > a {
color: var(--c-accent-on-dark);
padding-left: 18px;
}
#footer .links-section ul li a:hover::before,
#footer .links-section ul li.active > a::before {
opacity: 1;
left: 0;
}
/* Social icons — natural form, coral on font-icon hover */
#footer .media-section ul.social-media-icons {
display: flex !important;
flex-wrap: wrap;
gap: 14px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
align-items: center;
}
#footer .media-section ul.social-media-icons li,
#footer .media-section ul.social-media-icons li.menu-text {
margin: 0 !important;
padding: 0 !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
list-style: none !important;
display: inline-flex;
line-height: 1;
}
#footer .media-section ul.social-media-icons li::before,
#footer .media-section ul.social-media-icons li::after {
display: none !important;
content: none !important;
}
#footer .media-section ul.social-media-icons li a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
height: auto !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
padding: 4px !important;
margin: 0 !important;
box-shadow: none !important;
color: inherit !important;
text-decoration: none;
line-height: 0;
overflow: visible !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .media-section ul.social-media-icons li a::before,
#footer .media-section ul.social-media-icons li a::after {
display: none !important;
content: none !important;
}
#footer .media-section ul.social-media-icons li a:hover,
#footer .media-section ul.social-media-icons li a:focus {
transform: translateY(-3px);
background: none !important;
box-shadow: none !important;
}
#footer .media-section ul.social-media-icons li a img {
width: 32px !important;
height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: contain;
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
filter: none !important;
opacity: 0.88;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .media-section ul.social-media-icons li a:hover img,
#footer .media-section ul.social-media-icons li a:focus img {
opacity: 1;
transform: scale(1.08);
}
#footer .media-section ul.social-media-icons li a i,
#footer .media-section ul.social-media-icons li a svg {
font-size: 22px;
color: rgba(var(--c-white-rgb), 0.78);
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .media-section ul.social-media-icons li a:hover i,
#footer .media-section ul.social-media-icons li a:focus i,
#footer .media-section ul.social-media-icons li a:hover svg,
#footer .media-section ul.social-media-icons li a:focus svg {
color: var(--c-accent-on-dark);
}
/* Newsletter button — ghost on dark; coral-dark fill + white text on hover (AA) */
#footer .newsletter-section .column-container span {
display: block;
margin-top: 6px;
}
#footer .newsletter-section .button,
#footer .newsletter-section a.button {
background-color: transparent !important;
background-image: none !important;
color: var(--c-light) !important;
border: 1px solid rgba(var(--c-white-rgb), 0.28) !important;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 14px 26px !important;
border-radius: var(--r-pill) !important;
box-shadow: none !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 12px;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .newsletter-section .button::after {
content: "→";
font-size: 14px;
line-height: 1;
display: inline-block;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .newsletter-section .button:hover,
#footer .newsletter-section .button:focus {
background-color: var(--c-primary-dark) !important;
border-color: var(--c-primary-dark) !important;
color: var(--c-light) !important;
gap: 16px;
box-shadow: none !important;
}
#footer .newsletter-section .button:hover::after,
#footer .newsletter-section .button:focus::after {
transform: translateX(2px);
}
@media all and (max-width: 640px) {
#footer .newsletter-section .button,
#footer .newsletter-section a.button {
font-size: 10px !important;
letter-spacing: 0.14em;
padding: 13px 20px !important;
}
}
/* Contact section */
#footer .contact-section a {
text-decoration: none;
color: inherit;
}
#footer .contact-section .actual-address,
#footer .contact-section .address-container {
display: flex;
align-items: flex-start;
gap: 14px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: rgba(var(--c-white-rgb), 0.82);
margin: 0 0 16px 0;
text-align: left;
max-width: 100%;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Location pin icon — coral stroke */
#footer .contact-section .actual-address::before,
#footer .contact-section .address-container::before {
content: "";
display: block;
flex-shrink: 0;
width: 16px;
height: 18px;
margin-top: 4px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .contact-section a:hover .actual-address,
#footer .contact-section a:hover .address-container {
color: var(--c-accent-on-dark);
}
#footer .contact-section a:hover .actual-address::before,
#footer .contact-section a:hover .address-container::before {
transform: translateY(-3px);
}
#footer .contact-section .contact-number,
#footer .contact-section .contact-email {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0;
line-height: 1;
}
/* Phone icon — coral stroke */
#footer .contact-section .contact-number::before {
content: "";
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .contact-section .contact-number:hover::before {
transform: rotate(-12deg) scale(1.1);
}
/* Email icon — coral stroke */
#footer .contact-section .contact-email::before {
content: "";
display: block;
flex-shrink: 0;
width: 16px;
height: 13px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .contact-section .contact-email:hover::before {
transform: translateY(-2px) scale(1.05);
}
#footer .contact-section a.footer-phone,
#footer .contact-section a.footer-email {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--c-light) !important;
text-decoration: none;
display: inline-block;
padding: 4px 0;
position: relative;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .contact-section a.footer-phone::after,
#footer .contact-section a.footer-email::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--c-primary);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .contact-section a.footer-phone:hover,
#footer .contact-section a.footer-email:hover {
color: var(--c-accent-on-dark) !important;
}
#footer .contact-section a.footer-phone:hover::after,
#footer .contact-section a.footer-email:hover::after {
transform: scaleX(1);
}
#footer .spacer.height-20 {
height: 20px;
width: 100%;
}
/* Copyright */
#footer .copyright {
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
color: rgba(var(--c-white-rgb), 0.55);
margin: 0 !important;
line-height: 1.6;
}
#footer .grid-x.footer2:has(.copyright) {
padding: 14px 0 !important;
}
#footer .grid-x.footer2:has(.copyright) > .cell.padding-top-1 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#footer .grid-x.footer2:has(.copyright) > .cell {
margin-bottom: 16px !important;
margin-top: 16px !important;
}
#footer .copyright a {
color: rgba(var(--c-white-rgb), 0.78);
text-decoration: none;
font-weight: 500;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#footer .copyright a:hover {
color: var(--c-accent-on-dark);
}
#footer .copyright span#ps-copyrightyear-js {
color: rgba(var(--c-white-rgb), 0.78);
}
#footer .copyright span.show-for-large {
color: rgba(var(--c-white-rgb), 0.32);
margin: 0 4px;
}
/* Footer — Mobile / Tablet */
@media screen and (max-width: 63.9375em) {
#footer .footer2 {
padding: 48px 0 24px !important;
}
#footer .grid-x.footer2 > .cell {
margin-bottom: 36px;
text-align: center;
}
#footer .grid-x.footer2:has(.copyright) {
padding: 12px 0 !important;
}
#footer .grid-x.footer2:has(.copyright) > .cell {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
#footer .column-container {
text-align: center;
padding: 0 16px;
}
#footer h4 {
font-size: 12px;
margin-bottom: 18px !important;
}
#footer h4::after {
left: 50%;
transform: translateX(-50%);
}
#footer .media-section ul.social-media-icons {
justify-content: center;
}
#footer .links-section ul li a:hover,
#footer .links-section ul li.active > a {
padding-left: 0;
}
#footer .links-section ul li a::before {
display: none;
}
#footer .contact-section .actual-address,
#footer .contact-section .address-container,
#footer .contact-section .contact-number,
#footer .contact-section .contact-email {
justify-content: center;
}
#footer .contact-section a.footer-phone::after,
#footer .contact-section a.footer-email::after {
left: 50%;
transform: translateX(-50%) scaleX(0);
}
#footer .contact-section a.footer-phone:hover::after,
#footer .contact-section a.footer-email:hover::after {
transform: translateX(-50%) scaleX(1);
}
}
/* Footer — Small mobile */
@media screen and (max-width: 39.9375em) {
#footer .footer2 {
padding: 36px 0 20px !important;
}
#footer .grid-x.footer2 > .cell {
margin-bottom: 30px;
}
#footer h4 {
font-size: 12px;
}
#footer .copyright {
font-size: 11px;
padding: 0 16px;
}
}
@media (prefers-reduced-motion: reduce) {
#footer *,
#footer *::before,
#footer *::after {
transition: none !important;
animation: none !important;
}
}
/* =================================================================
CPS — PREMIUM POLISH LAYER (modern pass)
Motion, depth + micro-interactions on our own cps-/web- classes.
All animation lives inside prefers-reduced-motion:no-preference.
================================================================= */
/* ---------- smooth anchor scrolling ---------- */
@media (prefers-reduced-motion:no-preference){
html{ scroll-behavior:smooth; }
}
/* ---------- richer reveal: soft blur-up + grid stagger ---------- */
@media (prefers-reduced-motion:no-preference){
html.user-logged-out [data-cps-reveal]{
transform:translateY(34px);
filter:blur(6px);
transition:opacity .85s cubic-bezier(.2,.7,.3,1),
transform .85s cubic-bezier(.2,.7,.3,1),
filter .85s cubic-bezier(.2,.7,.3,1);
will-change:opacity,transform,filter;
}
html.user-logged-out [data-cps-reveal].is-in{ filter:blur(0); }
/* stagger siblings inside any grid row */
html.user-logged-out .grid-x > [data-cps-reveal]:nth-child(2),
html.user-logged-out .grid-x > .cell:nth-child(2) [data-cps-reveal]:first-child{ transition-delay:.1s; }
html.user-logged-out .grid-x > [data-cps-reveal]:nth-child(3),
html.user-logged-out .grid-x > .cell:nth-child(3) [data-cps-reveal]:first-child{ transition-delay:.2s; }
html.user-logged-out .grid-x > [data-cps-reveal]:nth-child(4),
html.user-logged-out .grid-x > .cell:nth-child(4) [data-cps-reveal]:first-child{ transition-delay:.3s; }
html.user-logged-out .grid-x > [data-cps-reveal]:nth-child(5),
html.user-logged-out .grid-x > .cell:nth-child(5) [data-cps-reveal]:first-child{ transition-delay:.4s; }
html.user-logged-out .grid-x > [data-cps-reveal]:nth-child(6),
html.user-logged-out .grid-x > .cell:nth-child(6) [data-cps-reveal]:first-child{ transition-delay:.5s; }
}
/* ---------- unified card system: lift + ring + icon life ---------- */
.is-wrapper .cps-why-card,
.is-wrapper .cps-step{
transition:transform .45s cubic-bezier(.16,1,.3,1),
box-shadow .45s cubic-bezier(.16,1,.3,1),
border-color .45s cubic-bezier(.16,1,.3,1);
}
.is-wrapper .cps-why-card:hover,
.is-wrapper .cps-step:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-2);
border-color:rgba(var(--c-accent-rgb),.22);
}
.is-wrapper .cps-ic{
transition:transform .45s cubic-bezier(.16,1,.3,1),
background .45s cubic-bezier(.16,1,.3,1),
color .45s cubic-bezier(.16,1,.3,1);
}
.is-wrapper .cps-why-card:hover .cps-ic,
.is-wrapper .cps-step:hover .cps-ic{
transform:rotate(-7deg) scale(1.1);
background:var(--c-accent);
color:#fff;
}
.is-wrapper .cps-step:hover .cps-step-num{ color:var(--c-accent-on-dark); }
.is-wrapper .cps-step-num{ transition:color .4s ease; }
/* pillar imagery — gentle parallax-feel zoom inside the frame */
.is-wrapper .cps-pillar-frame{ overflow:hidden; }
.is-wrapper .cps-frame-img{
transition:transform 1.1s cubic-bezier(.16,1,.3,1);
will-change:transform;
}
.is-wrapper .cps-pillar-frame:hover .cps-frame-img{ transform:scale(1.045); }
/* checklist micro-interaction — slide + tick pop */
.is-wrapper .cps-checks li{
transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.is-wrapper .cps-checks li:hover{ transform:translateX(6px); }
.is-wrapper .cps-ck{ transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease; }
.is-wrapper .cps-checks li:hover .cps-ck{
transform:scale(1.18);
background:var(--c-accent);
color:#fff;
}
/* chips (service area + insurances) — lively hover */
.is-wrapper .cps-area-chip,
.is-wrapper .cps-ins-chip{
transition:transform .35s cubic-bezier(.16,1,.3,1),
box-shadow .35s cubic-bezier(.16,1,.3,1),
border-color .35s ease, background .35s ease;
}
.is-wrapper .cps-area-chip:hover,
.is-wrapper .cps-ins-chip:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-soft);
border-color:rgba(var(--c-accent-rgb),.3);
}
/* ---------- buttons: unified press feedback (ALL variants, identical) ---------- */
.is-wrapper .web-primary-btn:active,
.is-wrapper .web-secondary-btn:active,
.is-wrapper .web-text-btn:active,
.is-wrapper .web-btn-white:active,
.is-wrapper .web-btn-ghost:active,
.is-wrapper .web-btn-ghost-light:active{ transform:translateY(0) scale(.98); }
/* ---------- dark bands (process + big CTA): layered amber/teal glow ---------- */
.is-wrapper > .cps-bg-dark{ position:relative; overflow:hidden; background:radial-gradient(86% 78% at 6% 0%, rgba(var(--c-sun-rgb),.24) 0%, rgba(var(--c-sun-rgb),0) 50%),radial-gradient(110% 92% at 92% -8%, rgba(var(--c-primary-rgb),.26) 0%, rgba(var(--c-primary-rgb),0) 54%),radial-gradient(120% 100% at 0% 114%, rgba(var(--c-accent-rgb),.46) 0%, rgba(var(--c-accent-rgb),0) 62%),linear-gradient(150deg, var(--c-dark-lite) 0%, var(--c-dark) 48%, var(--c-dark-2) 100%); }
@media (prefers-reduced-motion:no-preference){
.is-wrapper > .cps-bg-dark::before{
content:"";
position:absolute;
top:-180px; right:-140px;
width:520px; height:520px;
border-radius:50%;
background:radial-gradient(circle, rgba(var(--c-primary-rgb),.14) 0%, rgba(var(--c-primary-rgb),0) 65%);
animation:cpsFloat 12s ease-in-out infinite alternate;
pointer-events:none;
}
.is-wrapper > .cps-bg-dark::after{
content:"";
position:absolute;
bottom:-220px; left:-160px;
width:620px; height:620px;
border-radius:50%;
background:radial-gradient(circle, rgba(var(--c-white-rgb),.05) 0%, rgba(var(--c-white-rgb),0) 62%);
animation:cpsFloat 16s ease-in-out infinite alternate-reverse;
pointer-events:none;
}
@keyframes cpsFloat{
from{ transform:translate(0,0) scale(1); }
to{ transform:translate(-46px,34px) scale(1.08); }
}
}
.is-wrapper > .cps-bg-dark .is-container{ position:relative; z-index:1; }
/* light sections — whisper-soft top sheen for section separation */
.is-wrapper > .cps-bg-cream{ background:radial-gradient(90% 60% at 50% 0%, rgba(var(--c-accent-rgb),.045) 0%, rgba(var(--c-accent-rgb),0) 55%),var(--c-cream); }
.is-wrapper > .cps-bg-tint,
.is-wrapper .cps-bg-tint{
background:
radial-gradient(90% 60% at 50% 0%, rgba(var(--c-white-rgb),.7) 0%, rgba(var(--c-white-rgb),0) 60%),
var(--c-tint);
}
/* soft glowing heart + leaf emblems in section backgrounds (CSS-only, clipped to box, behind content) */
.is-wrapper > .cps-bg-tint{ background:radial-gradient(90% 60% at 50% 0%, rgba(var(--c-white-rgb),.7) 0%, rgba(var(--c-white-rgb),0) 60%),var(--c-tint); }
.is-wrapper > .cps-bg-paper{ background:var(--c-paper); }
@media all and (max-width:640px){
.is-wrapper > .cps-bg-cream,
}
/* ---------- big CTA: conversion focus ---------- */
.is-wrapper .cps-cta-wrap .section-main-heading{ font-size:clamp(32px,4vw,54px); letter-spacing:-0.01em; }
.is-wrapper .cps-cta-btns{ margin-top:40px; gap:16px; }
/* ---------- premium card padding + radius polish ---------- */
.is-wrapper .cps-why-card{ padding:38px 32px; border-radius:var(--r-lg); }
.is-wrapper .cps-step{ border-radius:var(--r-lg); }
/* ---------- typography refinements ---------- */
.is-wrapper .section-main-heading{ letter-spacing:-0.015em; }
.is-wrapper .section-description{ line-height:1.75; }
.is-wrapper .content-text{ line-height:1.75; }
/* hero script — extra glow lift for the amber accent on photography */
.is-wrapper .cps-hl{
text-shadow:0 2px 8px rgba(var(--c-black-rgb),.35),
0 4px 28px rgba(var(--c-primary-rgb),.4);
}
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
}
/* =================================================================
CPS — NEWSLETTER: "SUNRISE LETTER" SPLIT CARD (CSS-only redesign)
Targets the ORIGINAL markup — zero HTML changes.
Split (home): terracotta feature panel (script kicker, sun-arc
rings, leaf texture) + clean white form side.
Solo (inner pages, .cps-news-solo): light centered card variant
so the global terracotta button works untouched.
Hearts decor spans hidden via CSS (aria-hidden decor).
Button skin = 100% global (layout context only).
================================================================= */
.is-wrapper .cps-news{
display:block;
border-radius:var(--r-lg);
overflow:hidden;
background:#fff;
border:1px solid var(--c-line);
box-shadow:var(--shadow-2);
position:relative;
}
.is-wrapper .cps-news .cps-hearts-soft{ display:none; }
.is-wrapper .cps-news-inner{
display:grid;
grid-template-columns:auto;
align-items:center;
text-align:center;
}
/* ---- feature side (terracotta) = .cps-news-copy ---- */
.is-wrapper .cps-news-copy{
position:relative;
padding:clamp(40px,4.5vw,68px) clamp(28px,4vw,60px);
background:
radial-gradient(120% 110% at 100% 0%, rgba(var(--c-sun-rgb),.34) 0%, rgba(var(--c-sun-rgb),0) 55%),
linear-gradient(152deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
color:#fff;
}
.is-wrapper .cps-news-copy::before{ /* concentric sun arcs, top-right */
content:"";
position:absolute; top:-190px; right:-190px;
width:520px; height:520px;
border-radius:50%;
background:repeating-radial-gradient(circle at center,
rgba(var(--c-white-rgb),.10) 0 1.5px,
transparent 1.5px 46px);
pointer-events:none;
}
.is-wrapper .cps-news-copy > *{ position:relative; z-index:1; }
/* eyebrow -> handwritten script kicker */
.is-wrapper .cps-news .cps-eyebrow{
display:block;
font-family:var(--font-script);
font-size:clamp(22px,2.2vw,28px);
font-weight:400;
line-height:1;
text-transform:none;
letter-spacing:0;
color:var(--c-cream);
transform:rotate(-2deg);
transform-origin:left bottom;
}
.is-wrapper .cps-news .cps-eyebrow::before,
.is-wrapper .cps-news .cps-eyebrow::after{ display:none; }
.is-wrapper .cps-news .section-main-heading{
color:#fff;
font-size:clamp(27px,2.9vw,40px);
line-height:1.16;
letter-spacing:-.01em;
margin-top:14px;
text-wrap:balance;
}
.is-wrapper .cps-news .section-description{
color:rgba(var(--c-white-rgb),.93);
margin-top:14px;
margin-bottom:14px;
}
/* benefits — soft white pills */
.is-wrapper .cps-news-benefits{
list-style:none;
margin:26px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
.is-wrapper .cps-news-benefits li{
display:inline-flex;
align-items:center;
gap:11px;
align-self:flex-start;
padding:9px 18px 9px 10px;
border-radius:var(--r-pill);
background:rgba(var(--c-white-rgb),.14);
border:1px solid rgba(var(--c-white-rgb),.20);
font-family:var(--font-body);
font-weight:700;
font-size:15px;
color:#fff;
transition:background .3s ease, transform .3s ease;
}
.is-wrapper .cps-news-benefits li:hover{
background:rgba(var(--c-white-rgb),.22);
transform:translateX(4px);
}
.is-wrapper .cps-news-benefits .cps-ck{
width:26px; height:26px;
background:#fff;
color:var(--c-primary);
box-shadow:0 4px 10px rgba(0,0,0,.14);
}
/* ---- form side (white) ---- */
.is-wrapper .cps-news-form{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
padding:clamp(36px,4.5vw,64px) clamp(26px,4vw,58px);
background:
radial-gradient(90% 70% at 100% 100%, rgba(var(--c-cream-rgb),.85) 0%, rgba(var(--c-cream-rgb),0) 60%),
#fff;
}
.is-wrapper .cps-news-form::before{ /* terracotta accent rule */
content:"";
display:block;
width:52px; height:4px;
border-radius:var(--r-pill);
background:var(--grad-sunset);
margin-bottom:22px;
}
.is-wrapper .cps-news-form input[type="text"],
.is-wrapper .cps-news-form input[type="email"],
.is-wrapper .cps-news-form input[type="tel"]{
width:100%;
height:56px;
margin:0 0 14px;
padding:0 18px;
border:1px solid var(--c-line);
border-radius:var(--r-sm);
background:rgba(var(--c-cream-rgb),.55);
font-family:var(--font-body);
font-size:16px;
color:var(--c-ink);
box-shadow:none;
transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.is-wrapper .cps-news-form input[type="text"]:hover,
.is-wrapper .cps-news-form input[type="email"]:hover,
.is-wrapper .cps-news-form input[type="tel"]:hover{
border-color:rgba(var(--c-primary-rgb),.45);
}
.is-wrapper .cps-news-form input[type="text"]:focus,
.is-wrapper .cps-news-form input[type="email"]:focus,
.is-wrapper .cps-news-form input[type="tel"]:focus{
outline:none;
border-color:var(--c-primary);
background:#fff;
box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.14);
}
.is-wrapper .cps-news-form input::placeholder{ color:var(--c-ink-2); opacity:.75; }
/* CTA — global button, layout context only */
.is-wrapper .cps-news-form .web-primary-btn{
width:100%;
margin-top:4px;
}
.is-wrapper .cps-news-privacy{
margin:14px 0 0;
font-family:var(--font-body);
font-size:13px;
letter-spacing:.02em;
color:var(--c-ink-2);
text-align:center;
}
/* =================== SOLO VARIANT (inner pages) ===================
.cps-news-solo — light centered card: white/cream, terracotta
sun arcs, ink headings (overrides cps-on-dark), standard button. */
.is-wrapper .cps-news-solo{
padding:clamp(40px,4.5vw,64px) clamp(26px,4vw,60px);
background:
radial-gradient(90% 70% at 100% 0%, rgba(var(--c-cream-rgb),.9) 0%, rgba(var(--c-cream-rgb),0) 60%),
#fff;
}
.is-wrapper .cps-news-solo::before{ /* terracotta sun arcs */
content:"";
position:absolute; top:-190px; right:-190px;
width:520px; height:520px;
border-radius:50%;
background:repeating-radial-gradient(circle at center,
rgba(var(--c-primary-rgb),.10) 0 1.5px,
transparent 1.5px 46px);
pointer-events:none;
}
.is-wrapper .cps-news-solo .cps-news-inner{
display:block;
max-width:720px;
margin:0 auto;
text-align:center;
position:relative;
z-index:1;
}
.is-wrapper .cps-news-solo .cps-news-copy{ padding:0; background:none; color:var(--c-ink); }
.is-wrapper .cps-news-solo .cps-news-copy::before,
.is-wrapper .cps-news-solo .cps-news-copy::after{ display:none; }
.is-wrapper .cps-news-solo .section-main-heading{ color:var(--c-ink); }
.is-wrapper .cps-news-solo .section-description{
color:var(--c-ink-2);
max-width:60ch;
margin-left:auto; margin-right:auto;
}
.is-wrapper .cps-news-solo .cps-news-form{
background:none;
padding:0;
margin-top:26px;
display:block;
}
.is-wrapper .cps-news-solo .cps-news-form::before{ margin:0 auto 22px; }
.is-wrapper .cps-news-solo .cps-news-form .web-primary-btn{ width:auto; min-width:260px; }
/* ---- responsive ---- */
@media all and (max-width:1023px){
.is-wrapper .cps-news-inner{ grid-template-columns:1fr; }
}
@media all and (max-width:640px){
.is-wrapper .cps-news{ border-radius:var(--r-md); }
.is-wrapper .cps-news-copy{ padding:36px 22px; }
.is-wrapper .cps-news-form{ padding:30px 20px 34px; }
.is-wrapper .cps-news-copy::before,
.is-wrapper .cps-news-solo::before{ top:-240px; right:-240px; }
.is-wrapper .cps-news-solo{ padding:36px 22px 38px; }
.is-wrapper .cps-news-solo .cps-news-form .web-primary-btn{ width:100%; min-width:0; }
}
/* =================================================================
CPS — HEART MOTIF LAYER (soft floating outline hearts)
Decorative only: aria-hidden spans, pointer-events:none, behind
content. Opacity ceiling .16 — accents, never focal points.
================================================================= */
.is-wrapper .cps-hearts-soft{
position:absolute; inset:0; z-index:0;
pointer-events:none;
}
.is-wrapper .cps-heart-o{
position:absolute; display:block;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 12 12)' d='M10.9 20.4C7.9 18.2 3.7 14.8 3.5 10.7 3.3 7.8 5.5 5.7 8 6c1.7.2 3 1.4 3.8 3 .7-1.7 2.1-3 3.9-3.1 2.5-.1 4.5 2 4.3 4.9-.2 3.3-3.6 6.3-6.5 8.5'/%3E%3C/svg%3E") center / contain no-repeat;
transform:rotate(var(--r,0deg));
}
@media (prefers-reduced-motion:no-preference){
.is-wrapper .cps-heart-o{
animation:cpsHeartFloat var(--d,15s) ease-in-out var(--delay,0s) infinite;
}
}
.is-wrapper .cps-heart-o.ho1{ top:9%; right:5%; width:54px; height:54px; opacity:.15; --r:-14deg; --d:16s; }
.is-wrapper .cps-heart-o.ho2{ bottom:12%; left:3%; width:34px; height:34px; opacity:.12; --r:10deg; --d:14s; --delay:2s; }
.is-wrapper .cps-heart-o.ho3{ top:48%; right:38%; width:26px; height:26px; opacity:.11; --r:-6deg; --d:18s; --delay:4s; }
.is-wrapper .cps-heart-o.ho4{ top:4%; left:9%; width:40px; height:40px; opacity:.14; --r:12deg; --d:15s; --delay:1s; }
.is-wrapper .cps-heart-o.ho5{ bottom:6%; right:11%; width:48px; height:48px; opacity:.15; --r:-10deg; --d:17s; --delay:3s; }
/* big CTA: hearts breathe slightly beyond the narrow text column */
.is-wrapper .cps-cta-wrap{ position:relative; z-index:0; }
.is-wrapper .cps-cta-wrap > *{ position:relative; z-index:1; }
.is-wrapper .cps-cta-wrap > .cps-hearts-soft{ position:absolute; z-index:0; inset:-26px -70px; }
@media all and (max-width:640px){
.is-wrapper .cps-cta-wrap > .cps-hearts-soft{ inset:0; }
.is-wrapper .cps-heart-o{ display:none; }
.is-wrapper .cps-heart-o.ho1,
.is-wrapper .cps-heart-o.ho5{ display:block; width:32px; height:32px; }
}
/* =================================================================
CPS — REFINEMENT PASS (restrained luxury)
Overrides below win the cascade. Goal: quieter motion, rationed
ornament, editorial typography — premium over playful.
================================================================= */
/* hero accent: script -> head-font accent (editorial, trustworthy) */
.is-wrapper .cps-hl{
font-family:var(--font-head);
font-style:normal;
font-weight:700;
font-size:1.02em;
padding:0;
color:var(--c-amber);
text-shadow:0 2px 12px rgba(var(--c-black-rgb),.35);
}
.is-wrapper .cps-hl::after{ content:none; }
/* tighter editorial headings */
.is-wrapper .banner-main-heading{ letter-spacing:-0.01em; }
.is-wrapper .section-main-heading{ letter-spacing:-0.01em; }
/* motion: calm + intentional */
@media (prefers-reduced-motion:no-preference){
html.user-logged-out [data-cps-reveal]{
transform:translateY(18px);
filter:none;
transition:opacity .7s cubic-bezier(.2,.7,.3,1),
transform .7s cubic-bezier(.2,.7,.3,1);
will-change:opacity,transform;
}
}
.is-wrapper .cps-why-card:hover,
.is-wrapper .cps-step:hover{ transform:translateY(-4px); }
.is-wrapper .cps-why-card:hover .cps-ic,
.is-wrapper .cps-step:hover .cps-ic{ transform:scale(1.05); }
.is-wrapper .cps-checks li:hover{ transform:translateX(3px); }
.is-wrapper .cps-checks li:hover .cps-ck{ transform:none; }
.is-wrapper .cps-pillar-frame:hover .cps-frame-img{ transform:scale(1.02); }
/* dark bands: static ambient glow (no drifting orbs) */
.is-wrapper > .cps-bg-dark::before,
.is-wrapper > .cps-bg-dark::after{ animation:none; opacity:.75; }
/* =================================================================
CPS — LOGO HEART LANGUAGE
The logo's heart is a hand-drawn, open brushstroke perched above
the wordmark. Same mark now anchors the site: every eyebrow leads
with it, and the big CTA carries it as a signature above the
headline — one consistent gesture, never confetti.
================================================================= */
.is-wrapper .cps-cta-wrap::before{
content:"";
display:block;
width:42px; height:42px;
margin:0 auto 16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5b15c' stroke-opacity='.92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 12 12)' d='M10.9 20.4C7.9 18.2 3.7 14.8 3.5 10.7 3.3 7.8 5.5 5.7 8 6c1.7.2 3 1.4 3.8 3 .7-1.7 2.1-3 3.9-3.1 2.5-.1 4.5 2 4.3 4.9-.2 3.3-3.6 6.3-6.5 8.5'/%3E") center / contain no-repeat;
}
@media all and (max-width:640px){
.is-wrapper .cps-cta-wrap::before{ width:34px; height:34px; margin-bottom:12px; }
}
/* =================================================================
CPS — WOVEN HEART SYSTEM (refined integration)
One mark, four quiet registers: fleuron dividers, contextual
iconography, hover micro-interactions, whisper textures.
Nothing oversized, nothing repeated for its own sake.
================================================================= */
/* fleuron divider — hairline · heart · hairline (Trust + Edu heads) */
.is-wrapper .cps-trust-head::before,
.is-wrapper .cps-edu-head::before,
.is-wrapper .cps-svc-fleuron::before{
content:"";
display:block;
width:170px; height:16px;
margin:0 auto 22px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7f53' stroke-opacity='.85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 12 12)' d='M10.9 20.4C7.9 18.2 3.7 14.8 3.5 10.7 3.3 7.8 5.5 5.7 8 6c1.7.2 3 1.4 3.8 3 .7-1.7 2.1-3 3.9-3.1 2.5-.1 4.5 2 4.3 4.9-.2 3.3-3.6 6.3-6.5 8.5'/%3E") center / 15px 15px no-repeat,
linear-gradient(var(--c-line), var(--c-line)) left center / 64px 1px no-repeat,
linear-gradient(var(--c-line), var(--c-line)) right center / 64px 1px no-repeat;
}
/* values cards — heart surfaces only on intent (hover micro-interaction) */
.is-wrapper .cps-why-card,
.is-wrapper .cps-svc-card{ position:relative; }
.is-wrapper .cps-why-card::after,
.is-wrapper .cps-svc-card::after{
content:"";
position:absolute;
top:14px; right:14px;
width:15px; height:15px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e3f' stroke-opacity='1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-8 12 12)' d='M10.9 20.4C7.9 18.2 3.7 14.8 3.5 10.7 3.3 7.8 5.5 5.7 8 6c1.7.2 3 1.4 3.8 3 .7-1.7 2.1-3 3.9-3.1 2.5-.1 4.5 2 4.3 4.9-.2 3.3-3.6 6.3-6.5 8.5'/%3E") center / contain no-repeat;
opacity:0;
transform:translateY(4px);
transition:opacity .35s ease, transform .35s ease;
pointer-events:none;
}
.is-wrapper .cps-why-card:hover::after,
.is-wrapper .cps-svc-card:hover::after{ opacity:.55; transform:translateY(0); }
/* CTA mark — punctuation, not graphic */
.is-wrapper .cps-cta-wrap::before{ width:28px; height:28px; margin-bottom:14px; opacity:.9; }
@media all and (max-width:640px){
.is-wrapper .cps-cta-wrap::before{ width:24px; height:24px; }
}
/* retire the floating-heart scatter (markup-safe) */
.is-wrapper .cps-hearts-soft{ display:none; }
/* =================================================================
CPS — SERVICES PAGE
Editorial service index (numbered cards), dark support band with
glass checklist, and a centered newsletter variant. Inherits the
woven heart system (fleuron intro, card hover hearts, textures).
================================================================= */
/* ---------- service index cards (image-led) ---------- */
.is-wrapper .cps-svc-cell{ display:flex; }
.is-wrapper .cps-svc-card{
display:flex;
flex-direction:column;
width:100%;
height:100%;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
overflow:hidden;
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.is-wrapper .cps-svc-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-2);
border-color:rgba(var(--c-accent-rgb),.28);
}
.is-wrapper .cps-svc-media{
position:relative;
overflow:hidden;
aspect-ratio:16/9;
background:var(--c-tint);
}
.is-wrapper .cps-svc-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}
.is-wrapper .cps-svc-card:hover .cps-svc-media img{ transform:scale(1.05); }
.is-wrapper .cps-svc-num{
position:absolute;
top:14px; left:14px;
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:var(--r-pill);
background:rgba(255,255,255,.86);
border:1px solid rgba(255,255,255,.6);
font-family:var(--font-head);
font-style:normal;
font-weight:700;
font-size:14px;
letter-spacing:.14em;
color:var(--c-primary-dark);
transition:color .35s ease;
}
@supports (backdrop-filter:blur(8px)){
.is-wrapper .cps-svc-num{ background:rgba(255,255,255,.62); backdrop-filter:blur(8px); }
}
.is-wrapper .cps-svc-card:hover .cps-svc-num{ color:var(--c-accent); }
.is-wrapper .cps-svc-body{
display:flex;
flex-direction:column;
flex:1;
padding:clamp(24px,2.6vw,32px) clamp(24px,2.8vw,34px) clamp(28px,3vw,36px);
}
.is-wrapper .cps-svc-title{
font-size:clamp(20px,2.1vw,23px);
line-height:1.25;
margin:0;
padding-bottom:16px;
position:relative;
}
.is-wrapper .cps-svc-title::after{
content:"";
position:absolute;
left:0; bottom:0;
width:30px; height:2px;
border-radius:2px;
background:var(--c-primary);
transition:width .35s ease;
}
.is-wrapper .cps-svc-card:hover .cps-svc-title::after{ width:54px; }
.is-wrapper .cps-svc-body .content-text{ margin:14px 0 0; }
/* hover heart sits on the card body (photo stays clean) */
.is-wrapper .cps-svc-card::after{ top:auto; right:20px; bottom:20px; }
/* ---------- support band ---------- */
.is-wrapper .cps-sup-row{ align-items:center; }
.is-wrapper .cps-sup-copy .section-description{ margin-bottom:0; }
.is-wrapper .cps-sup-card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-md);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
padding:clamp(26px,3vw,38px);
}
@supports (backdrop-filter:blur(10px)){
.is-wrapper .cps-sup-card{ background:rgba(255,255,255,.05); backdrop-filter:blur(10px); }
}
.is-wrapper .cps-sup-card .cps-checks{ margin:0; }
/* Sup-card as prose panel (e.g. Service Areas approach band) */
.is-wrapper .cps-sup-card > p{
margin:0 0 1.1em;
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.75;
color:rgba(255,255,255,.85);
}
.is-wrapper .cps-sup-card > p:last-child{ margin-bottom:0; }
.is-wrapper .cps-sup-card .cps-checks li{ color:rgba(255,255,255,.92); }
@media all and (max-width:1023px){
.is-wrapper .cps-sup-copy{ text-align:center; margin-bottom:6px; }
}
@media all and (max-width:640px){
.is-wrapper .cps-news-solo .web-primary-btn{ width:100%; min-width:0; }
}
/* =================================================================
CPS — ABOUT PAGE
Quiet editorial story block, paper checklist cards, experience
mini-cards. Reuses pillar splits, dark support band, fleuron and
trust heart-points from the existing system.
================================================================= */
/* story — centered, respectful editorial */
.is-wrapper .cps-story-wrap{
max-width:760px;
margin:0 auto;
text-align:center;
}
.is-wrapper .cps-story-wrap .section-description{ margin-bottom:0; }
.is-wrapper .cps-story-grid{
list-style:none;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
max-width:860px;
margin:34px auto 0;
padding:0;
}
.is-wrapper .cps-story-chip{
display:flex;
align-items:flex-start;
gap:12px;
background:var(--c-tint);
border:1px solid var(--c-line);
border-radius:var(--r-sm);
padding:16px 18px;
font-family:var(--font-body);
font-size:15.5px;
line-height:1.5;
color:var(--c-ink);
}
.is-wrapper .cps-story-chip .cps-ck{ flex:0 0 auto; margin-top:2px; }
/* paper checklist card (light sections) */
.is-wrapper .cps-abt-card{
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
padding:clamp(26px,3vw,38px);
}
.is-wrapper .cps-abt-card .cps-checks{ margin:0; }
/* experience mini-cards */
.is-wrapper .cps-exp-card{
display:flex;
align-items:flex-start;
gap:12px;
height:100%;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
padding:22px 20px;
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.is-wrapper .cps-exp-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-2);
border-color:rgba(var(--c-accent-rgb),.28);
}
.is-wrapper .cps-exp-card .cps-ck{ flex:0 0 auto; margin-top:2px; }
.is-wrapper .cps-exp-label{
font-family:var(--font-body);
font-weight:700;
font-size:15.5px;
line-height:1.45;
color:var(--c-ink);
}
/* expect CTA spacing */
.is-wrapper .cps-abt-cta{ margin-top:24px; }
@media all and (max-width:1023px){
.is-wrapper .cps-story-grid{ grid-template-columns:1fr; }
}
/* =================================================================
CPS — SERVICE DETAIL: GETTING-STARTED PATH
Numbered step list on light card — the page's "pathway" moment.
Reusable across all service detail pages.
================================================================= */
.is-wrapper .cps-start-card{
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
padding:clamp(10px,1.4vw,18px) clamp(22px,2.8vw,34px);
}
.is-wrapper .cps-start-list{
list-style:none;
margin:0;
padding:0;
}
.is-wrapper .cps-start-step{
display:flex;
align-items:center;
gap:clamp(16px,2vw,24px);
padding:clamp(16px,2vw,20px) 0;
border-bottom:1px solid var(--c-line);
}
.is-wrapper .cps-start-step:last-child{ border-bottom:0; }
.is-wrapper .cps-start-num{
flex:0 0 auto;
font-family:var(--font-head);
font-style:normal;
font-weight:700;
font-size:clamp(20px,2.2vw,24px);
letter-spacing:.08em;
color:var(--c-primary-dark);
min-width:2.2em;
}
.is-wrapper .cps-start-label{
font-family:var(--font-body);
font-weight:700;
font-size:16.5px;
line-height:1.45;
color:var(--c-ink);
}
.is-wrapper .cps-start-step:hover .cps-start-num{ color:var(--c-accent); }
@media all and (max-width:1023px){
.is-wrapper .cps-start-card{ margin-top:10px; }
}
/* ---- frame-fill: image stretches to match sibling card height (Sun City why-band) ---- */
.is-wrapper .cps-frame-fill{height:100%;}
.is-wrapper .cps-frame-fill .cps-frame-img{height:100%;aspect-ratio:auto;min-height:340px;}
@media all and (max-width:1023px){
.is-wrapper .cps-frame-fill{height:auto;}
.is-wrapper .cps-frame-fill .cps-frame-img{aspect-ratio:16/10;min-height:0;height:auto;}
}
/* ---- checks single-column modifier (why-band tall lists) ---- */
.is-wrapper .cps-checks.cps-checks--single{grid-template-columns:1fr;}
/* ---- FAQ page: sticky category header (ghost number + heading) ---- */
.is-wrapper .cps-faq-cat{position:sticky;top:96px;}
.is-wrapper .cps-faq-cat-num{
display:block;
font-family:var(--font-head);
font-size:clamp(48px,6vw,72px);
line-height:1;
color:var(--c-accent);
opacity:.16;
margin-bottom:10px;
}
.is-wrapper .cps-faq-cat .section-main-heading{
margin-bottom:0;
font-size:clamp(24px,2.6vw,32px);
line-height:1.25;
overflow-wrap:break-word;
}
@media all and (max-width:1023px){
.is-wrapper .cps-faq-cat{position:static;margin-bottom:6px;}
.is-wrapper .cps-faq-cat-num{font-size:44px;margin-bottom:6px;}
}
/* ================================================================
CONTACT PAGE — info cards, form shell, page polish (cps-)
================================================================ */
/* --- Contact info cards (Phone / Email / Service Area) --- */
.is-wrapper .cps-cinfo-cell{ display:flex; }
.is-wrapper .cps-cinfo-card{
position:relative; flex:1; display:flex; flex-direction:column; align-items:center;
gap:16px; text-align:center; background:var(--c-paper);
border:1px solid var(--c-line); border-radius:var(--r-lg);
padding:38px 28px 34px; box-shadow:var(--shadow-1); overflow:hidden;
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.is-wrapper .cps-cinfo-card::before{
content:""; position:absolute; left:0; top:0; right:0; height:4px;
background:linear-gradient(90deg,var(--c-accent) 0%,var(--c-primary) 100%);
transform:scaleX(0); transform-origin:left; transition:transform .45s ease;
}
.is-wrapper .cps-cinfo-card::after{
content:""; position:absolute; right:-46px; bottom:-46px; width:140px; height:140px;
border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(var(--c-accent-rgb),.07), transparent 70%);
pointer-events:none;
}
.is-wrapper .cps-cinfo-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:transparent; }
.is-wrapper .cps-cinfo-card:hover::before{ transform:scaleX(1); }
.is-wrapper .cps-cinfo-ic{
width:62px; height:62px; border-radius:50%; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--c-accent) 0%,var(--c-dark) 100%);
color:#fff; font-size:21px; box-shadow:0 12px 26px rgba(var(--c-accent-rgb),.28);
transition:transform .35s ease;
}
.is-wrapper .cps-cinfo-card:hover .cps-cinfo-ic{ transform:scale(1.08) rotate(-4deg); }
.is-wrapper .cps-cinfo-label{
margin:0; font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--c-ink-2);
}
.is-wrapper .cps-cinfo-label strong{ display:block; margin-bottom:4px; font-weight:800; font-size:17px; color:var(--c-ink); letter-spacing:.01em; }
/* --- Consultation checklist card accent on this page --- */
.is-wrapper .cps-consult-card{ position:relative; overflow:hidden; }
.is-wrapper .cps-consult-card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
background:linear-gradient(180deg,var(--c-accent) 0%,var(--c-primary) 100%);
}
@media all and (max-width:1023px){
.is-wrapper .cps-cinfo-card{ padding:30px 22px 28px; }
}
/* FIX: theme's .is-light-text *{color:#fff} was painting button arrows white
on white buttons — force button inner content to inherit the button color */
.is-wrapper .is-light-text .web-primary-btn *,
.is-wrapper .is-light-text .web-secondary-btn *,
.is-wrapper .is-light-text .web-text-btn *,
.is-wrapper .is-light-text .web-btn-white *,
.is-wrapper .is-light-text .web-btn-ghost *,
.is-wrapper .is-light-text .web-btn-ghost-light *,
.is-wrapper .cps-on-dark .web-primary-btn *,
.is-wrapper .cps-on-dark .web-secondary-btn *,
.is-wrapper .cps-on-dark .web-text-btn *,
.is-wrapper .cps-on-dark .web-btn-white *,
.is-wrapper .cps-on-dark .web-btn-ghost *,
.is-wrapper .cps-on-dark .web-btn-ghost-light *{ color:inherit; }
/* contact info card links — quiet, brand hover */
.is-wrapper .cps-cinfo-label a{
color:inherit; text-decoration:none;
border-bottom:1.5px solid transparent;
transition:color .2s ease,border-color .2s ease;
overflow-wrap:anywhere;
}
.is-wrapper .cps-cinfo-label a:hover{ color:var(--c-accent); border-bottom-color:var(--c-accent); }
/* =================================================================
BLOG HERO — Webware blog page-types render OUTSIDE .is-wrapper,
so the standard hero rules are mirrored here scoped to
.main-banner-sec.cps-hero-sec (same look as every other page).
================================================================= */
.main-banner-sec.cps-hero-sec{ overflow:hidden; }
.main-banner-sec.cps-hero-sec .bn-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(180deg,rgba(44,43,32,.34) 0%,rgba(44,43,32,.18) 40%,rgba(44,43,32,.82) 100%),
linear-gradient(90deg,rgba(44,43,32,.58) 0%,rgba(44,43,32,.06) 64%),
radial-gradient(120% 82% at 82% 10%,rgba(var(--c-primary-rgb),.22) 0%,rgba(var(--c-primary-rgb),0) 56%);
}
.main-banner-sec.cps-hero-sec .bn-content{ z-index:2; }
.main-banner-sec.cps-hero-sec .cps-hero-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
min-height:680px;
}
.main-banner-sec.cps-hero-sec picture{ display:block; line-height:0; }
.main-banner-sec.cps-hero-sec .cps-hero-copy{
max-width:760px;
padding:0;
animation:cpsRise .8s cubic-bezier(.2,.7,.3,1) both;
}
.main-banner-sec.cps-hero-sec .banner-main-heading{
font-family:var(--font-head);
font-size:var(--fs-h1);
font-weight:500;
line-height:1.1;
letter-spacing:-.01em;
text-wrap:balance;
margin:20px 0 0;
color:#fff;
text-shadow:0 2px 24px rgba(18,12,8,.35);
}
@media all and (max-width:640px){
.main-banner-sec.cps-hero-sec .cps-hero-img{ min-height:560px; }
.main-banner-sec.cps-hero-sec .cps-hero-copy{ padding:96px 0 56px; }
}
/* =================================================================
BLOG LISTING PAGE — .new-blog-page-type renders OUTSIDE .is-wrapper.
Premium CPS reskin of the Webware blog index: search, category
chips, article cards, sidebar, pagination.
================================================================= */
.new-blog-page-type{ background:var(--c-cream); }
/* ---- search bar ---- */
.new-blog-page-type .blog-search-container{ margin-top:56px; }
.new-blog-page-type .blog-search-container .position-relative{ max-width:680px; }
.new-blog-page-type .blog-search-container #search-input-blog{
height:60px;
margin:0;
padding:8px 26px 8px 58px;
border:2px solid var(--c-line);
border-radius:var(--r-pill);
background:var(--c-paper);
font-family:var(--font-body);
font-size:16px;
color:var(--c-ink);
box-shadow:var(--shadow-1);
transition:border-color .25s ease, box-shadow .25s ease;
}
.new-blog-page-type .blog-search-container #search-input-blog::placeholder{ color:var(--c-ink-2); opacity:.7; }
.new-blog-page-type .blog-search-container #search-input-blog:focus{
outline:none;
border-color:var(--c-accent);
box-shadow:0 0 0 4px rgba(var(--c-accent-rgb),.12), var(--shadow-1);
}
.new-blog-page-type .blog-search-container .blog-search-button{
top:50%;
left:24px;
transform:translateY(-50%);
padding:0;
background:transparent;
cursor:pointer;
}
.new-blog-page-type .blog-search-container .blog-search-button svg path{ fill:var(--c-accent); }
.new-blog-page-type .blog-search-container .blog-search-button:hover{ box-shadow:none; }
.new-blog-page-type .blog-search-container .blog-search-button:hover svg path{ fill:var(--c-primary-dark); }
/* ---- layout rhythm ---- */
.new-blog-page-type .blog-articles,
.new-blog-page-type .blog-sidebar{ margin-top:56px; }
/* ---- category chips ---- */
.new-blog-page-type .ps-blog-category{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0;
}
.new-blog-page-type .ps-blog-category li{ display:inline-block; margin:0; width:auto; }
.new-blog-page-type .ps-blog-category li a{
display:inline-flex;
align-items:center;
margin:0;
padding:9px 18px;
border:1.5px solid var(--c-line);
border-radius:var(--r-pill);
background:var(--c-paper);
font-family:var(--font-body);
font-size:13.5px !important; /* theme forces .9em !important */
font-weight:700;
line-height:1.2;
color:var(--c-ink-2);
text-decoration:none;
transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.new-blog-page-type .ps-blog-category li a:hover{
color:var(--c-accent-dark);
border-color:var(--c-accent);
background:var(--c-tint);
transform:translateY(-2px);
box-shadow:var(--shadow-1);
}
.new-blog-page-type .ps-blog-category li.active a{
background:var(--c-accent);
border-color:var(--c-accent);
border-radius:var(--r-pill);
color:#fff;
padding:9px 20px;
}
.new-blog-page-type .ps-blog-category li.active a:hover{
background:var(--c-accent-dark);
border-color:var(--c-accent-dark);
color:#fff;
}
/* ---- sidebar panel ---- */
.new-blog-page-type .blog-sidebar .articles-filter-container{
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
padding:30px 28px 32px;
position:sticky;
top:110px;
}
.new-blog-page-type .filter-h2{
font-family:var(--font-head);
font-size:24px;
font-weight:500;
letter-spacing:-.01em;
line-height:1.2;
color:var(--c-ink);
margin:0 0 18px;
}
/* ---- article cards ---- */
.new-blog-page-type .blog-ul{ gap:36px; margin:0; }
.new-blog-page-type .blog-ul .blog-li{ margin:0; }
.new-blog-page-type .blog-li .row{ margin:0; }
.new-blog-page-type .blog-article{
float:none;
width:100%;
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
padding:30px 34px 34px;
transition:transform .35s ease, box-shadow .35s ease;
}
.new-blog-page-type .blog-article:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-2);
}
.new-blog-page-type .ps-article-img{
margin:-30px -34px 26px;
border-radius:var(--r-lg) var(--r-lg) 0 0;
overflow:hidden;
}
.new-blog-page-type .ps-article-img img{
width:100%;
aspect-ratio:2/1;
object-fit:cover;
display:block;
transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.new-blog-page-type .blog-article:hover .ps-article-img img{ transform:scale(1.045); }
/* ---- card meta (categories line) ---- */
.new-blog-page-type .article-category{
margin:0 0 6px;
font-family:var(--font-body);
line-height:1.9;
}
.new-blog-page-type .article-category span{ font-size:13px; color:var(--c-ink-2); }
.new-blog-page-type .article-category .categories_text{
font-size:11.5px;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--c-primary-dark);
margin-right:4px;
}
.new-blog-page-type .article-category a{
color:var(--c-accent);
font-weight:700;
text-decoration:none;
transition:color .2s ease;
text-transform:capitalize;
}
.new-blog-page-type .article-category a:hover{ color:var(--c-accent-dark); text-decoration:underline; }
/* ---- card title ---- */
.new-blog-page-type .blog-ul h2.article-title{ margin:10px 0 14px; padding:0; }
.new-blog-page-type .blog-ul h2.article-title a{
font-family:var(--font-head);
font-size:clamp(24px,2.6vw,30px);
font-weight:500;
line-height:1.22;
letter-spacing:-.01em;
color:var(--c-ink);
text-decoration:none;
text-wrap:balance;
transition:color .25s ease;
}
.new-blog-page-type .blog-ul h2.article-title a:hover{ color:var(--c-accent); }
/* ---- excerpt ---- */
.new-blog-page-type .article-body,
.new-blog-page-type .article-body p{
font-family:var(--font-body);
font-size:16px;
line-height:1.7;
color:var(--c-ink-2);
}
.new-blog-page-type .article-body p{ margin:0; }
/* ---- read more ---- */
.new-blog-page-type .blog-article p.pb-0{ margin:20px 0 0; padding:0; }
.new-blog-page-type .blog-read-more{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-body);
font-size:13.5px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--c-accent);
text-decoration:none;
transition:color .25s ease;
}
.new-blog-page-type .blog-read-more::after{
content:"\2192";
font-size:16px;
line-height:1;
transition:transform .25s ease;
}
.new-blog-page-type .blog-read-more:hover{ color:var(--c-accent-dark); }
.new-blog-page-type .blog-read-more:hover::after{ transform:translateX(5px); }
/* ---- pagination ---- */
.new-blog-page-type .ps-pagination-bar span{
background:var(--c-paper);
border:1.5px solid var(--c-line);
border-radius:var(--r-sm);
font-family:var(--font-body);
font-weight:700;
color:var(--c-ink-2);
transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.new-blog-page-type .ps-pagination-bar span a{ color:inherit; text-decoration:none; }
.new-blog-page-type .ps-pagination-bar span:hover{
border-color:var(--c-accent);
color:var(--c-accent-dark);
background:var(--c-tint);
}
.new-blog-page-type .ps-pagination-bar span.current{
background:var(--c-accent);
border-color:var(--c-accent);
color:#fff;
}
/* ---- mobile / tablet ---- */
@media screen and (max-width:1023px){
.new-blog-page-type .articles-filter-container{ margin-top:48px; }
.new-blog-page-type .articles-filter-container.hide-for-large{
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
padding:24px 22px 26px;
}
.new-blog-page-type .articles-filter-container.hide-for-large .ps-blog-category{
max-height:none;
padding:0;
overflow:visible;
}
.new-blog-page-type .articles-filter-container.hide-for-large .ps-blog-category li a{
width:auto;
border:1.5px solid var(--c-line);
border-bottom:1.5px solid var(--c-line);
border-radius:var(--r-pill);
padding:9px 18px;
text-align:left;
background:var(--c-paper);
color:var(--c-ink-2);
}
.new-blog-page-type .blog-sidebar{ margin-top:40px; }
.new-blog-page-type .blog-sidebar .articles-filter-container{ position:static; }
}
@media all and (max-width:640px){
.new-blog-page-type .blog-search-container{ margin-top:40px; }
.new-blog-page-type .blog-search-container #search-input-blog{ height:54px; font-size:15px; }
.new-blog-page-type .blog-articles{ margin-top:40px; }
.new-blog-page-type .blog-ul{ gap:26px; }
.new-blog-page-type .blog-article{ padding:24px 22px 26px; }
.new-blog-page-type .ps-article-img{ margin:-24px -22px 22px; }
.new-blog-page-type .blog-ul h2.article-title a{ font-size:23px; }
}
/* =================================================================
BLOG ARTICLE DETAIL PAGE — .article-page-type (outside .is-wrapper).
Premium long-form reading experience: title, meta card, hero image,
rich-text body, Recent Posts grid.
================================================================= */
/* ---- page title ---- */
.new-blog-page-type.article-page-type h1.article-title{
font-family:var(--font-head);
font-size:48px;
font-weight:500;
line-height:1.12;
letter-spacing:-.015em;
color:var(--c-ink);
max-width:100%;
margin:10px 0 38px;
padding:0 0 22px;
position:relative;
}
.new-blog-page-type.article-page-type h1.article-title::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:64px;
height:4px;
border-radius:var(--r-pill);
background:var(--grad-sunset);
}
/* ---- lead image (p.ps-article-img — NOT the card div) ---- */
.new-blog-page-type.article-page-type p.ps-article-img{
margin:0;
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--shadow-2);
}
.new-blog-page-type.article-page-type p.ps-article-img img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
display:block;
transition:none;
}
/* ---- author / meta card ---- */
.new-blog-page-type .blog-author{
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
padding:26px 28px 28px;
}
.new-blog-page-type .blog-author .lab-ul{
list-style:none;
display:block;
margin:0;
padding:0;
font-family:var(--font-body);
font-size:13px;
line-height:1.9;
color:var(--c-ink-2);
}
.new-blog-page-type .blog-author .lab-ul li{ display:block; margin:0 0 8px; }
.new-blog-page-type .blog-author .author_name{
font-family:var(--font-body);
font-size:15.5px;
font-weight:800;
color:var(--c-ink);
}
.new-blog-page-type .blog-author .pubdate{
font-family:var(--font-body);
font-size:13.5px;
font-weight:600;
letter-spacing:.03em;
color:var(--c-ink-2);
}
.new-blog-page-type .blog-author .lab-ul span{ font-size:13px; color:var(--c-ink-2); }
.new-blog-page-type .blog-author .lab-ul a{
color:var(--c-accent);
font-weight:700;
text-decoration:none;
text-transform:capitalize;
transition:color .2s ease;
}
.new-blog-page-type .blog-author .lab-ul a:hover{ color:var(--c-accent-dark); text-decoration:underline; }
/* ---- article body (rich text) ---- */
.new-blog-page-type.article-page-type .article-body{
margin:48px auto 0;
max-width:100%;
float:none;
}
.new-blog-page-type.article-page-type .article-body h2{
font-family:var(--font-head);
font-size:32px;
font-weight:500;
line-height:1.2;
letter-spacing:-.01em;
color:var(--c-ink);
margin:54px 0 18px;
}
.new-blog-page-type.article-page-type .article-body h2:first-child{ margin-top:0; }
.new-blog-page-type.article-page-type .article-body p{
font-family:var(--font-body);
font-size:17px;
line-height:1.85;
color:var(--c-ink-2);
margin:0 0 20px;
}
.new-blog-page-type.article-page-type .article-body p strong,
.new-blog-page-type.article-page-type .article-body li strong{
color:var(--c-ink);
font-weight:800;
}
.new-blog-page-type.article-page-type .article-body a{
color:var(--c-accent);
font-weight:700;
text-decoration:underline;
text-decoration-thickness:1.5px;
text-underline-offset:3px;
transition:color .2s ease;
}
.new-blog-page-type.article-page-type .article-body a:hover{ color:var(--c-accent-dark); }
.new-blog-page-type.article-page-type .article-body ul{
list-style:none;
margin:6px 0 28px;
padding:0;
}
.new-blog-page-type.article-page-type .article-body ul li{
position:relative;
padding-left:30px;
margin:0 0 13px;
font-family:var(--font-body);
font-size:16.5px;
line-height:1.75;
color:var(--c-ink-2);
}
.new-blog-page-type.article-page-type .article-body ul li::before{
content:"";
position:absolute;
left:2px;
top:.58em;
width:9px;
height:9px;
border-radius:50%;
background:var(--grad-sunset);
}
/* ---- Recent Posts ---- */
.new-blog-page-type .blog-sidebar-h2{
font-family:var(--font-head);
font-size:clamp(26px,3.2vw,34px);
font-weight:500;
line-height:1.15;
letter-spacing:-.01em;
color:var(--c-ink);
margin:72px 0 30px;
padding:0 0 18px;
position:relative;
}
.new-blog-page-type .blog-sidebar-h2::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:56px;
height:4px;
border-radius:var(--r-pill);
background:var(--grad-sunset);
}
.new-blog-page-type .ps-blog-recent-posts{ margin:0; }
.new-blog-page-type .ps-blog-recent-posts .blog-li{ margin:0; }
.new-blog-page-type .ps-blog-recent-posts .blog-article{ padding:24px 24px 26px; }
.new-blog-page-type .ps-blog-recent-posts .ps-article-img{ margin:-24px -24px 20px; }
.new-blog-page-type .ps-blog-recent-posts h2.article-title{ margin:8px 0 12px; padding:0; }
.new-blog-page-type .ps-blog-recent-posts h2.article-title a{
font-family:var(--font-head);
font-size:21px;
font-weight:500;
line-height:1.28;
letter-spacing:-.01em;
color:var(--c-ink);
text-decoration:none;
text-wrap:balance;
transition:color .25s ease;
}
.new-blog-page-type .ps-blog-recent-posts h2.article-title a:hover{ color:var(--c-accent); }
.new-blog-page-type .item-body,
.new-blog-page-type .item-body p{
font-family:var(--font-body);
font-size:15.5px;
line-height:1.7;
color:var(--c-ink-2);
}
.new-blog-page-type .item-body p{ margin:0; }
/* ---- responsive ---- */
@media screen and (max-width:1023px){
.new-blog-page-type .blog-author{ margin-top:26px; }
.new-blog-page-type .ps-blog-recent-posts{ width:100%; }
}
@media all and (max-width:640px){
.new-blog-page-type.article-page-type h1.article-title{ margin:0 0 28px; padding-bottom:18px; }
.new-blog-page-type.article-page-type .article-body{ margin-top:36px; }
.new-blog-page-type.article-page-type .article-body h2{ margin:42px 0 14px; }
.new-blog-page-type .blog-sidebar-h2{ margin:56px 0 24px; }
}
/* ============================================================
INSURANCE & COVERAGE PAGE — full insurer grid (cps-insgrid)
Pillar copy, steps card, checks & CTA reuse existing blocks.
============================================================ */
.is-wrapper .cps-insgrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:calc(var(--gap) - 8px);
margin-top:46px;
}
.is-wrapper .cps-insgrid-card{
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-1);
padding:22px 18px 18px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.is-wrapper .cps-insgrid-card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-2);
border-color:rgba(var(--c-accent-rgb),.35);
}
.is-wrapper .cps-insgrid-logo{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:62px;
margin-bottom:12px;
line-height:0;
}
.is-wrapper .cps-insgrid-logo img{
max-width:100%;
max-height:56px;
width:auto;
height:auto;
object-fit:contain;
filter:grayscale(1);
opacity:.78;
transition:filter .3s ease, opacity .3s ease;
}
.is-wrapper .cps-insgrid-card:hover .cps-insgrid-logo img{
filter:none;
opacity:1;
}
.is-wrapper .cps-insgrid-name{
font-family:var(--font-body);
font-size:14px;
font-weight:700;
line-height:1.4;
color:var(--c-ink);
margin:0;
text-wrap:balance;
}
@media all and (max-width:1023px){
.is-wrapper .cps-insgrid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); margin-top:36px; }
}
@media all and (max-width:640px){
.is-wrapper .cps-insgrid{ grid-template-columns:repeat(2,1fr); gap:14px; margin-top:30px; }
.is-wrapper .cps-insgrid-card{ padding:18px 12px 14px; }
.is-wrapper .cps-insgrid-logo{ height:52px; margin-bottom:10px; }
.is-wrapper .cps-insgrid-logo img{ max-height:46px; }
.is-wrapper .cps-insgrid-name{ font-size:13px; }
}
/* =================================================================
CPS — SUNRISE LETTER LANGUAGE (site-wide pass)
The newsletter's design language applied to every section —
CSS-only on existing classes, appended last so it wins cleanly.
Motifs: handwritten script kickers, sun-arc rings, leaf texture,
chip-style checklists with sunset medallions, gradient numerals.
Buttons untouched (global system).
================================================================= */
/* ---------- 1) EYEBROWS -> handwritten script kickers ---------- */
.is-wrapper .cps-eyebrow{
display:inline-block;
font-family:var(--font-script);
font-size:clamp(20px,2vw,26px);
font-weight:400;
line-height:1;
letter-spacing:0;
text-transform:none;
color:var(--c-primary);
transform:rotate(-2deg);
transform-origin:left bottom;
}
.is-wrapper .cps-eyebrow::before,
.is-wrapper .cps-eyebrow::after,
.is-wrapper .cps-on-dark .cps-eyebrow::before{ display:none; }
.is-wrapper .cps-eyebrow.is-center{ transform-origin:center bottom; }
.is-wrapper .cps-on-dark .cps-eyebrow{ color:var(--c-cream); }
.is-wrapper .cps-hero-copy .cps-eyebrow{ color:var(--c-cream); }
/* ---------- 2) CHECKLISTS -> sunrise chips ---------- */
.is-wrapper .cps-checks li{
align-items:center;
padding:9px 18px 9px 10px;
border-radius:var(--r-pill);
background:#fff;
border:1px solid var(--c-line);
box-shadow:var(--shadow-1);
font-weight:700;
transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease;
}
.is-wrapper .cps-checks li:hover{
transform:translateX(4px);
border-color:rgba(var(--c-primary-rgb),.45);
}
.is-wrapper .cps-checks .cps-ck{
width:26px; height:26px; margin-top:0;
background:var(--grad-sunset);
color:#fff;
box-shadow:0 4px 10px rgba(var(--c-primary-rgb),.30);
}
.is-wrapper .cps-checks li:hover .cps-ck{
background:var(--grad-sunset);
color:#fff;
transform:scale(1.12);
}
/* chips on dark surfaces -> newsletter glass pills */
.is-wrapper .cps-on-dark .cps-checks li,
.is-wrapper .cps-sup-card .cps-checks li{
background:rgba(var(--c-white-rgb),.14);
border:1px solid rgba(var(--c-white-rgb),.20);
box-shadow:none;
color:#fff;
}
.is-wrapper .cps-on-dark .cps-checks li:hover,
.is-wrapper .cps-sup-card .cps-checks li:hover{
background:rgba(var(--c-white-rgb),.22);
border-color:rgba(var(--c-white-rgb),.30);
}
.is-wrapper .cps-on-dark .cps-checks .cps-ck,
.is-wrapper .cps-sup-card .cps-checks .cps-ck{
background:#fff;
color:var(--c-primary);
box-shadow:0 4px 10px rgba(0,0,0,.14);
}
.is-wrapper .cps-on-dark .cps-checks li:hover .cps-ck,
.is-wrapper .cps-sup-card .cps-checks li:hover .cps-ck{
background:#fff;
color:var(--c-primary);
}
/* ---------- 3) DARK BANDS -> sun arcs + leaf texture ---------- */
.is-wrapper > .cps-bg-dark::before{
content:"";
position:absolute;
top:-190px; right:-190px;
width:520px; height:520px;
border-radius:50%;
background:
repeating-radial-gradient(circle at center,
rgba(var(--c-white-rgb),.07) 0 1.5px,
transparent 1.5px 46px),
radial-gradient(circle, rgba(var(--c-primary-rgb),.12) 0%, rgba(var(--c-primary-rgb),0) 65%);
animation:none;
opacity:1;
pointer-events:none;
}
.is-wrapper > .cps-bg-dark::after{
content:"";
position:absolute;
inset:0;
width:auto; height:auto;
border-radius:0;
background:radial-gradient(620px 620px at -160px 110%, rgba(var(--c-accent-rgb),.30) 0%, rgba(var(--c-accent-rgb),0) 65%);
animation:none;
opacity:1;
pointer-events:none;
}
/* ---------- 4) START CARD -> sunrise panel ---------- */
.is-wrapper .cps-start-card{
position:relative;
overflow:hidden;
background:
radial-gradient(90% 70% at 100% 0%, rgba(var(--c-cream-rgb),.9) 0%, rgba(var(--c-cream-rgb),0) 60%),
var(--c-paper);
}
.is-wrapper .cps-start-card::before{
content:"";
position:absolute; top:-190px; right:-190px;
width:460px; height:460px;
border-radius:50%;
background:repeating-radial-gradient(circle at center,
rgba(var(--c-primary-rgb),.08) 0 1.5px,
transparent 1.5px 46px);
pointer-events:none;
}
.is-wrapper .cps-start-card > *{ position:relative; z-index:1; }
.is-wrapper .cps-start-num{
background:var(--grad-sunset);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.is-wrapper .cps-start-step:hover .cps-start-num{
-webkit-text-fill-color:transparent;
filter:brightness(1.08);
}
/* ---------- 5) SUP CARDS (dark glass) -> white sun arcs ---------- */
.is-wrapper .cps-sup-card{
position:relative;
overflow:hidden;
}
.is-wrapper .cps-sup-card::before{
content:"";
position:absolute; top:-200px; right:-200px;
width:460px; height:460px;
border-radius:50%;
background:repeating-radial-gradient(circle at center,
rgba(var(--c-white-rgb),.07) 0 1.5px,
transparent 1.5px 46px);
pointer-events:none;
}
.is-wrapper .cps-sup-card > *{ position:relative; z-index:1; }
/* ---------- responsive ---------- */
@media all and (max-width:640px){
.is-wrapper .cps-eyebrow{ font-size:20px; }
.is-wrapper > .cps-bg-dark::before,
.is-wrapper .cps-start-card::before,
.is-wrapper .cps-sup-card::before{ top:-240px; right:-240px; }
}
/* =================================================================
CPS — WOW PASS (premium depth, motion & cohesion polish)
Appended last = cascade authority. Pure CSS, locked wrappers untouched.
================================================================= */
/* ---------- global premium touches ---------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
.is-wrapper ::selection{ background:rgba(var(--c-primary-rgb),.22); color:var(--c-ink); }
.is-wrapper *{ -webkit-tap-highlight-color:rgba(var(--c-primary-rgb),.18); }
/* slim warm scrollbar (desktop) */
@media (min-width:1025px){
html{ scrollbar-width:thin; scrollbar-color:rgba(var(--c-primary-rgb),.55) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--c-tint-2); }
::-webkit-scrollbar-thumb{
background:linear-gradient(var(--c-primary),var(--c-primary-dark));
border-radius:500px; border:3px solid var(--c-tint-2);
}
::-webkit-scrollbar-thumb:hover{ background:var(--c-primary-dark); }
}
/* sharper, on-brand focus ring everywhere interactive */
.is-wrapper a:focus-visible,
.is-wrapper button:focus-visible{
outline:3px solid var(--c-primary);
outline-offset:3px;
border-radius:var(--r-sm);
}
/* ---------- HERO — cinematic slow zoom + richer depth ---------- */
.is-wrapper .main-banner-sec{ overflow:hidden; }
.is-wrapper .cps-hero-img{
transform-origin:62% 38%;
animation:cpsKenBurns 22s ease-in-out both;
will-change:transform;
}
@media (prefers-reduced-motion: reduce){
.is-wrapper .cps-hero-img{ animation:none; }
}
@keyframes cpsKenBurns{
0% { transform:scale(1.0); }
100% { transform:scale(1.09); }
}
/* deeper, more cinematic scrim (legibility + drama) + soft top vignette */
.is-wrapper .main-banner-sec .bn-overlay,
.is-wrapper .main-banner-sec.cps-hero-sec .bn-overlay{
background:
radial-gradient(140% 120% at 50% -10%, rgba(43,38,34,.30) 0%, rgba(43,38,34,0) 42%),
linear-gradient(180deg, rgba(43,38,34,.42) 0%, rgba(43,38,34,.16) 38%, rgba(43,38,34,.86) 100%),
linear-gradient(90deg, rgba(43,38,34,.60) 0%, rgba(43,38,34,.04) 66%),
radial-gradient(120% 82% at 84% 8%, rgba(var(--c-primary-rgb),.28) 0%, rgba(var(--c-primary-rgb),0) 56%);
}
.is-wrapper .banner-main-heading{ text-shadow:0 2px 30px rgba(18,12,8,.42); }
/* ---------- UNIFIED PREMIUM CARD HOVER (cohesive across grid tiles) ---------- */
.is-wrapper .cps-why-card,
.is-wrapper .cps-svc-card,
.is-wrapper .cps-exp-card,
.is-wrapper .cps-cinfo-card,
.is-wrapper .cps-insgrid-card{
transition:transform .42s cubic-bezier(.2,.7,.3,1),
box-shadow .42s cubic-bezier(.2,.7,.3,1),
border-color .3s ease;
will-change:transform;
}
.is-wrapper .cps-why-card:hover,
.is-wrapper .cps-svc-card:hover,
.is-wrapper .cps-exp-card:hover,
.is-wrapper .cps-cinfo-card:hover,
.is-wrapper .cps-insgrid-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lift),0 0 0 1px rgba(var(--c-primary-rgb),.16);
border-color:rgba(var(--c-primary-rgb),.22);
}
/* ---------- card imagery — warm overlay + smoother zoom ---------- */
.is-wrapper .cps-svc-media,
.is-wrapper .cps-frame-img{ position:relative; overflow:hidden; }
.is-wrapper .cps-svc-media img,
.is-wrapper .cps-pillar-frame .cps-frame-img{
transition:transform .7s cubic-bezier(.2,.7,.3,1);
will-change:transform;
}
.is-wrapper .cps-svc-media::after,
.is-wrapper .cps-frame-img::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(165deg, rgba(var(--c-primary-rgb),.34) 0%, rgba(var(--c-primary-rgb),0) 46%, rgba(var(--c-accent-rgb),.20) 100%);
opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.is-wrapper .cps-svc-card:hover .cps-svc-media img,
.is-wrapper .cps-pillar-frame:hover .cps-frame-img{ transform:scale(1.07); }
.is-wrapper .cps-svc-card:hover .cps-svc-media::after,
.is-wrapper .cps-pillar-frame:hover .cps-frame-img::after{ opacity:1; }
/* ---------- marquee CTA sheen — subtle Apple-style light sweep ---------- */
.is-wrapper .web-primary-btn,
.is-wrapper .web-btn-white{ position:relative; overflow:hidden; isolation:isolate; }
.is-wrapper .web-primary-btn::after,
.is-wrapper .web-btn-white::after{
content:"";
position:absolute; top:0; left:-130%;
width:55%; height:100%;
background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
transform:skewX(-18deg);
transition:left .6s cubic-bezier(.2,.7,.3,1);
pointer-events:none; z-index:-1;
}
.is-wrapper .web-primary-btn:hover::after,
.is-wrapper .web-btn-white:hover::after{ left:135%; }
@media (prefers-reduced-motion: reduce){
.is-wrapper .web-primary-btn::after,
.is-wrapper .web-btn-white::after{ display:none; }
}
.is-wrapper .web-primary-btn > *,
.is-wrapper .web-btn-white > *{ position:relative; z-index:1; }
/* ---------- chips — unify hover depth with card system ---------- */
.is-wrapper .cps-ins-chip:hover,
.is-wrapper .cps-insgrid-card:hover{ box-shadow:var(--shadow-lift),0 0 0 1px rgba(var(--c-primary-rgb),.16); }
/* ---------- script accent gets a soft hand-drawn glow ---------- */
.is-wrapper .cps-hl{ text-shadow:0 2px 18px rgba(var(--c-primary-rgb),.32); }
/* ---------- snappier, springier reveal motion site-wide ---------- */
@media (min-width:1px){
html.user-logged-out [data-cps-reveal]{
transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1), filter .7s ease;
}
}
/* ============================================================
SECTION SPACING — +50px top/bottom on every non-hero section
(hero/main-banner-sec excluded). Scoped to the cps-bg-* class
that every content section carries; locked wrappers untouched.
============================================================ */
.is-wrapper > [class*="cps-bg-"]{
padding-top:50px;
padding-bottom:50px;
}
/* ============================================================
HERO — LEGIBILITY PASS (over bright photography)
Stronger left+bottom scrim, bolder 700 headline, light-mint
accent + crisp shadows. CSS-only; locked wrappers untouched.
============================================================ */
.is-wrapper .main-banner-sec .bn-overlay,
.is-wrapper .main-banner-sec.cps-hero-sec .bn-overlay,
.main-banner-sec.cps-hero-sec .bn-overlay{
background:
linear-gradient(90deg,
rgba(var(--c-black-rgb),.82) 0%,
rgba(var(--c-black-rgb),.66) 26%,
rgba(var(--c-black-rgb),.38) 46%,
rgba(var(--c-black-rgb),.10) 62%,
rgba(var(--c-black-rgb),0) 78%),
linear-gradient(180deg,
rgba(var(--c-black-rgb),.30) 0%,
rgba(var(--c-black-rgb),.16) 34%,
rgba(var(--c-black-rgb),.40) 66%,
rgba(var(--c-black-rgb),.80) 100%),
radial-gradient(120% 82% at 86% 6%,
rgba(var(--c-primary-rgb),.22) 0%,
rgba(var(--c-primary-rgb),0) 56%);
}
/* bolder, crisper headline (kills the 500-weight hero override) */
.is-wrapper .main-banner-sec.cps-hero-sec .banner-main-heading,
.main-banner-sec.cps-hero-sec .banner-main-heading{
font-weight:700;
text-shadow:0 2px 10px rgba(var(--c-black-rgb),.55),
0 6px 34px rgba(var(--c-black-rgb),.42);
}
/* accent line -> light mint so it pops on the dark scrim */
.is-wrapper .cps-hl,
.main-banner-sec.cps-hero-sec .cps-hl{
color:var(--c-amber);
text-shadow:0 2px 10px rgba(var(--c-black-rgb),.55),
0 4px 22px rgba(var(--c-accent-rgb),.35);
}
/* lead — full white + a touch more weight */
.is-wrapper .cps-hero-lead,
.main-banner-sec.cps-hero-sec .cps-hero-lead{
color:#fff;
font-weight:500;
text-shadow:0 1px 10px rgba(var(--c-black-rgb),.50);
}
/* ============================================================
HERO — CONTAINED PANEL OVERLAY (frosted dark-green card)
Photo breathes; copy sits inside a rounded glass panel with a
left accent bar. Supersedes the full-bleed scrim. CSS-only.
============================================================ */
/* lighter, even vignette so the photo stays visible AROUND the panel */
.is-wrapper .main-banner-sec .bn-overlay,
.is-wrapper .main-banner-sec.cps-hero-sec .bn-overlay,
.main-banner-sec.cps-hero-sec .bn-overlay{
background: rgba(var(--c-black-rgb),.56);
}
/* the glass panel */
.is-wrapper .main-banner-sec.cps-hero-sec .cps-hero-copy,
.main-banner-sec.cps-hero-sec .cps-hero-copy{
max-width:700px;
margin:48px 0;
padding:15px 30px 30px;
background:rgba(var(--c-black-rgb),.5);
border:1px solid rgba(var(--c-white-rgb),.18);
border-radius:24px;
box-shadow:0 30px 80px rgba(var(--c-black-rgb),.42), inset 0 1px 0 rgba(var(--c-white-rgb),.22);
position:relative;
overflow:hidden;
}
/* left accent bar — green gradient (mint -> fern) */
.is-wrapper .main-banner-sec.cps-hero-sec .cps-hero-copy::before{
content:"";
position:absolute; left:0; top:0; bottom:0; width:5px;
background:var(--grad-sunset);
}
/* crisper type on the solid panel (lighter shadows) */
.is-wrapper .main-banner-sec.cps-hero-sec .banner-main-heading{
font-weight:700;
text-shadow:0 1px 2px rgba(var(--c-black-rgb),.35);
}
.is-wrapper .cps-hl,
.main-banner-sec.cps-hero-sec .cps-hl{
color:var(--c-amber);
text-shadow:0 1px 12px rgba(var(--c-accent-rgb),.30);
}
.is-wrapper .cps-hero-lead,
.main-banner-sec.cps-hero-sec .cps-hero-lead{
color:#fff;
text-shadow:none;
}
@media all and (max-width:640px){
.is-wrapper .main-banner-sec.cps-hero-sec .cps-hero-copy{
padding:28px 22px; border-radius:16px; margin:30px 0; max-width:100%;
}
}
/* glass sheen + legibility for the more-transparent hero panel */
.is-wrapper .main-banner-sec.cps-hero-sec .cps-hero-copy::after{
content:""; position:absolute; inset:0; border-radius:inherit;
pointer-events:none; z-index:0;
background:
linear-gradient(180deg, rgba(var(--c-white-rgb),.12) 0%, rgba(var(--c-white-rgb),0) 24%),
radial-gradient(120% 78% at 16% 2%, rgba(var(--c-sun-rgb),.12) 0%, rgba(var(--c-sun-rgb),0) 46%);
}
.is-wrapper .main-banner-sec.cps-hero-sec .cps-hero-copy > *{ position:relative; z-index:1; }
.is-wrapper .main-banner-sec.cps-hero-sec .banner-main-heading{
text-shadow:0 1px 3px rgba(var(--c-black-rgb),.45), 0 2px 20px rgba(var(--c-black-rgb),.32);
}
.is-wrapper .cps-hl,
.main-banner-sec.cps-hero-sec .cps-hl{
text-shadow:0 1px 10px rgba(var(--c-black-rgb),.42), 0 3px 20px rgba(var(--c-accent-rgb),.30);
}
.is-wrapper .cps-hero-lead,
.main-banner-sec.cps-hero-sec .cps-hero-lead{
text-shadow:0 1px 8px rgba(var(--c-black-rgb),.42);
}
/* ============================================================
WEBWARE FORMS — global form design-system
Applies to every .ww-form-container form (contact, lead-magnet, etc.)
Token-driven; submit matches global primary button + unified hover.
============================================================ */
.is-wrapper .ww-form-container{
max-width:680px;
margin:0 auto;
padding:clamp(26px,4vw,44px);
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
font-family:var(--font-body);
}
.is-wrapper .ww-form-container .hide{ display:none; }
.ww-form-container form {
position: relative;
max-width:680px;
margin:0 auto;
padding:clamp(26px,4vw,44px);
background:var(--c-paper);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
font-family:var(--font-body);
overflow: hidden;
isolation: isolate;
}
/* fieldset + legend (acts as a section sub-heading) */
.is-wrapper .ww-form-container fieldset,
.is-wrapper .ww-form-container .fieldset{ border:0; margin:0; padding:0; min-width:0; }
.is-wrapper .ww-form-container legend{
display:block; width:100%;
font-family:var(--font-head);
font-size:clamp(20px,2.4vw,24px); font-weight:600; line-height:1.2;
color:var(--c-ink);
margin:0 0 24px; padding:0 0 12px;
border-bottom:1px solid var(--c-line);
position:relative;
}
.is-wrapper .ww-form-container legend::after{
content:""; position:absolute; left:0; bottom:-1px;
width:48px; height:2px; background:var(--c-primary);
}
/* field rows (any *_wrap container) */
.is-wrapper .ww-form-container [class*="_wrap"]{ margin:0 0 18px; position:relative; }
/* override theme width:310px on field wraps so they fill their grid cell/column */
.is-wrapper .ww-form-container form fieldset > div{ width:auto; }
/* labels */
.is-wrapper .ww-form-container label{
display:block;
font-family:var(--font-body);
font-size:14px; font-weight:600; line-height:1.3; letter-spacing:.01em;
color:var(--c-ink);
margin:0 0 7px;
}
.is-wrapper .ww-form-container .required{ color:var(--c-primary); margin-left:3px; font-weight:700; }
/* fields */
.is-wrapper .ww-form-container input[type="text"],.ww-form-container form input[type="text"],
.is-wrapper .ww-form-container input[type="email"],.ww-form-container form input[type="email"],
.is-wrapper .ww-form-container input[type="tel"],
.is-wrapper .ww-form-container input[type="password"],
.is-wrapper .ww-form-container input[type="number"],
.is-wrapper .ww-form-container input[type="url"],
.is-wrapper .ww-form-container input[type="date"],
.is-wrapper .ww-form-container textarea,
.is-wrapper .ww-form-container select{
width:100%; box-sizing:border-box;
font-family:var(--font-body); font-size:16px; line-height:1.5;
color:var(--c-ink);
background:var(--c-tint);
border:1.5px solid var(--c-line) !important;
border-radius:var(--r-field) !important;
padding:13px 16px; min-height:50px; margin:0;
box-shadow:none;
transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.is-wrapper .ww-form-container textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.is-wrapper .ww-form-container select{
appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
/* background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B554E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");*/
background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
}
.is-wrapper .ww-form-container input::placeholder,
.is-wrapper .ww-form-container textarea::placeholder{ color:var(--c-ink-2); opacity:.7; }
/* focus */
.is-wrapper .ww-form-container input[type="text"]:focus,
.is-wrapper .ww-form-container input[type="email"]:focus,
.is-wrapper .ww-form-container input[type="tel"]:focus,
.is-wrapper .ww-form-container input[type="password"]:focus,
.is-wrapper .ww-form-container input[type="number"]:focus,
.is-wrapper .ww-form-container input[type="url"]:focus,
.is-wrapper .ww-form-container input[type="date"]:focus,
.is-wrapper .ww-form-container textarea:focus,
.is-wrapper .ww-form-container select:focus{
outline:none;
background:var(--c-paper);
border-color:var(--c-primary);
box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.16);
}
/* invalid */
.is-wrapper .ww-form-container input.error,
.is-wrapper .ww-form-container textarea.error,
.is-wrapper .ww-form-container [aria-invalid="true"]{ border-color:var(--c-error); background:var(--c-paper); }
.is-wrapper .ww-form-container input.error:focus,
.is-wrapper .ww-form-container textarea.error:focus,
.is-wrapper .ww-form-container [aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(207,74,60,.16); }
/* autofill — keep brand bg, no yellow */
.is-wrapper .ww-form-container input:-webkit-autofill{
-webkit-text-fill-color:var(--c-ink);
-webkit-box-shadow:0 0 0 1000px var(--c-tint) inset;
transition:background-color 9999s ease-in-out 0s;
}
/* error messages + phone valid badge */
.is-wrapper .ww-form-container .error{
display:block; color:var(--c-error);
font-size:13px; line-height:1.4; font-weight:600; margin:6px 0 0;
}
.is-wrapper .ww-form-container .error:empty{ display:none; margin:0; }
.is-wrapper .ww-form-container [id$="_valid"]{ display:inline-block; font-size:13px; font-weight:600; margin:0 0 6px; }
/* intl-tel phone fills width */
.is-wrapper .ww-form-container .iti{ display:block; width:100%; }
/* reCAPTCHA block is NOT a field */
.is-wrapper .ww-form-container .recaptcha-block{ border:0; background:transparent; padding:0; min-height:0; box-shadow:none; }
.is-wrapper .ww-form-container .captcha_wrap{ margin-bottom:0; }
/* submit area — override base div.form-container{width:310px} */
.is-wrapper .ww-form-container .form-container{ width:100%; max-width:100%; margin:0; }
.is-wrapper .ww-form-container .submit_wrap{ margin:0; }
/* SUBMIT — identical look + hover as global primary button */
.is-wrapper .ww-form-container input[type="submit"],.ww-form-container form input[type="submit"], .ww-form-container form .button.input, .ww-form-container form input.button,
.is-wrapper .ww-form-container button[type="submit"],
.is-wrapper .ww-form-container .button.input{
display:inline-block; width:auto;
font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.04em; line-height:1;
text-align:center;
padding:15px 40px; min-height:50px;
border-radius:var(--r-pill);
border:2px solid var(--btn-border);
background:var(--btn-bg); color:var(--btn-text);
cursor:pointer; -webkit-appearance:none; appearance:none; box-shadow:none;
transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.is-wrapper .ww-form-container input[type="submit"]:hover,.ww-form-container form input[type="submit"]:hover, .ww-form-container form .button.input:hover,
.is-wrapper .ww-form-container button[type="submit"]:hover,
.is-wrapper .ww-form-container .button.input:hover{
background:var(--btn-bg-hover); color:var(--btn-text-hover); border-color:var(--btn-bg-hover);
}
.is-wrapper .ww-form-container input[type="submit"]:focus-visible,
.is-wrapper .ww-form-container button[type="submit"]:focus-visible,
.is-wrapper .ww-form-container .button.input:focus-visible{ outline:3px solid var(--c-primary); outline-offset:3px; }
.is-wrapper .ww-form-container input[type="submit"]:active,.ww-form-container form input[type="submit"]:active, .ww-form-container form .button.input:active,
.is-wrapper .ww-form-container button[type="submit"]:active,
.is-wrapper .ww-form-container .button.input:active{ transform:translateY(1px); }
/* responsive */
@media all and (max-width:640px){
.is-wrapper .ww-form-container{ border-radius:var(--r-md); }
.is-wrapper .ww-form-container input[type="submit"],
.is-wrapper .ww-form-container button[type="submit"],
.is-wrapper .ww-form-container .button.input{ width:100%; }
}
/* form fixes — left-align (override inherited center) + intl-tel flag clearance */
.is-wrapper .ww-form-container,
.is-wrapper .ww-form-container legend,
.is-wrapper .ww-form-container label,
.is-wrapper .ww-form-container .submit_wrap{ text-align:left; }
.is-wrapper .ww-form-container .iti{ position:relative; width:100%; }
.is-wrapper .ww-form-container .iti input[type="tel"],
.is-wrapper .ww-form-container .iti input.input{ padding-left:52px; }
/* ---- 2-column field layout (desktop) ---- */
@media all and (min-width:641px){
.is-wrapper .ww-form-container .fieldset{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:20px;
row-gap:18px;
align-items:start;
}
.is-wrapper .ww-form-container .fieldset > legend{ grid-column:1 / -1; margin-bottom:6px; }
.is-wrapper .ww-form-container .fieldset > [class*="_wrap"]{ margin:0; }
/* full-width row for the textarea field — explicit class (reliable, no :has dependency) */
.is-wrapper .ww-form-container .fieldset > .field_33643_wrap{ grid-column:1 / -1; }
/* generic fallback for any other form's textarea (modern browsers) */
.is-wrapper .ww-form-container .fieldset > [class*="_wrap"]:has(textarea){ grid-column:1 / -1; }
}
/* ============================================================
LEAD-MAGNET FORM — full form design-system (matches the
contact form). This blog lead-magnet renders OUTSIDE
.is-wrapper, so the base ".is-wrapper .ww-form-container"
rules never reach it. We rebuild the whole system scoped
under a doubled id (#lead-magnet-form#lead-magnet-form) so it
is ancestor-independent AND outranks the theme's single-id
#lead-magnet-form rules in any stylesheet load order.
============================================================ */
/* card */
#lead-magnet-form#lead-magnet-form .ww-form-container{
max-width:680px; margin:0 auto;
background:var(--c-paper); border:1px solid var(--c-line);
border-radius:var(--r-lg); box-shadow:var(--shadow-1);
padding:clamp(26px,4vw,44px); text-align:left;
}
#lead-magnet-form#lead-magnet-form form{ width:100%; margin:0; }
/* heading + intro (sit inside the card, modest sizes) */
#lead-magnet-form#lead-magnet-form .ww-form-container .section-main-heading{
margin:0 0 12px; font-family:var(--font-head); color:var(--c-ink);
font-size:var(--fs-h3); line-height:1.25;
}
#lead-magnet-form#lead-magnet-form .ww-form-container .section-description{
margin:0 0 22px; font-family:var(--font-body); color:var(--c-ink-2);
font-size:16px; line-height:1.6;
}
/* labels */
#lead-magnet-form#lead-magnet-form .ww-form-container label{
display:block; font-family:var(--font-body);
font-size:14px; font-weight:600; color:var(--c-ink);
margin:0 0 7px; text-align:left;
}
#lead-magnet-form#lead-magnet-form .ww-form-container label .required{ color:var(--c-primary); margin-left:3px; }
/* fields */
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="text"],
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="email"],
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="tel"],
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="password"],
#lead-magnet-form#lead-magnet-form .ww-form-container select,
#lead-magnet-form#lead-magnet-form .ww-form-container textarea{
width:100%; height:auto; min-height:50px; box-sizing:border-box;
background:var(--c-tint); border:1.5px solid var(--c-line);
border-radius:var(--r-field); padding:13px 16px;
font-family:var(--font-body); font-size:16px; color:var(--c-ink);
margin:0 0 18px; box-shadow:none;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#lead-magnet-form#lead-magnet-form .ww-form-container textarea{ min-height:140px; resize:vertical; }
#lead-magnet-form#lead-magnet-form .ww-form-container input::placeholder,
#lead-magnet-form#lead-magnet-form .ww-form-container textarea::placeholder{ color:var(--c-ink-2); opacity:.7; }
/* focus */
#lead-magnet-form#lead-magnet-form .ww-form-container input:focus,
#lead-magnet-form#lead-magnet-form .ww-form-container textarea:focus,
#lead-magnet-form#lead-magnet-form .ww-form-container select:focus{
outline:none; background:var(--c-paper);
border-color:var(--c-primary);
box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.16);
}
/* invalid */
#lead-magnet-form#lead-magnet-form .ww-form-container input.error,
#lead-magnet-form#lead-magnet-form .ww-form-container input[aria-invalid="true"]{
border-color:var(--c-error); box-shadow:0 0 0 3px rgba(207,74,60,.16);
}
/* error text */
#lead-magnet-form#lead-magnet-form .ww-form-container span.error{
display:block; color:var(--c-error); font-size:13px; font-weight:600;
margin:-10px 0 6px;
}
#lead-magnet-form#lead-magnet-form .ww-form-container span.error:empty{ display:none; }
/* captcha */
#lead-magnet-form#lead-magnet-form .ww-form-container .captcha_wrap{ margin-bottom:0; }
/* submit = global ghost-pill button */
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="submit"],
#lead-magnet-form#lead-magnet-form .ww-form-container .button.input{
display:inline-flex; align-items:center; justify-content:center;
width:auto; min-height:50px; padding:15px 40px;
font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.04em;
color:var(--c-primary); background:var(--c-paper);
border:2px solid var(--c-primary); border-radius:var(--r-pill);
cursor:pointer; box-shadow:none;
transition:all .18s ease;
}
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="submit"]:hover,
#lead-magnet-form#lead-magnet-form .ww-form-container .button.input:hover{
background:var(--c-primary); color:var(--c-light); border-color:var(--c-primary);
}
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="submit"]:active,
#lead-magnet-form#lead-magnet-form .ww-form-container .button.input:active{ transform:translateY(1px); }
#lead-magnet-form#lead-magnet-form .ww-form-container .submit_wrap{ margin:0; }
/* desktop: single column (stacked) — every field full-width */
@media all and (min-width:641px){
#lead-magnet-form#lead-magnet-form .ww-form-container .grid-x .cell.medium-12{
display:grid; grid-template-columns:1fr;
column-gap:20px; row-gap:18px; align-items:start;
}
#lead-magnet-form#lead-magnet-form .ww-form-container .first_name_wrap,
#lead-magnet-form#lead-magnet-form .ww-form-container .email_wrap{ margin:0; }
#lead-magnet-form#lead-magnet-form .ww-form-container .first_name_wrap input,
#lead-magnet-form#lead-magnet-form .ww-form-container .email_wrap input{ margin-bottom:0; }
#lead-magnet-form#lead-magnet-form .ww-form-container .captcha_wrap,
#lead-magnet-form#lead-magnet-form .ww-form-container .submit_wrap{ grid-column:1 / -1; }
}
/* mobile */
@media all and (max-width:640px){
#lead-magnet-form#lead-magnet-form .ww-form-container{ border-radius:var(--r-md); }
#lead-magnet-form#lead-magnet-form .ww-form-container input[type="submit"],
#lead-magnet-form#lead-magnet-form .ww-form-container .button.input{ width:100%; }
}
/* ============================================================
REVIEW PAGE — submission form + thank-you + reviews listing.
Token-driven, on-brand (CPS green). Scoped to review-specific
classes (no .is-wrapper dependency) so it applies whether or
not the review block sits inside the builder wrapper. The
theme base ships .rating-star (PNG sprite), #feedback{height},
.site-post/.google-post/.facebook-post and .review-text rules
— these selectors out-rank them and reset the sprite.
============================================================ */
/* --- form intro headings (h3 eyebrow, h2 title, lead p) --- */
.rating-experience-heading{
font-family:var(--font-body);
font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
color:var(--c-primary); margin:0 0 6px;
}
.is-wrapper .rating-experience-heading{ font-family:var(--font-body); color:var(--c-primary); }
.rating-experience-heading + h2{
font-family:var(--font-head); color:var(--c-ink);
font-size:var(--fs-h2); line-height:1.15; margin:0 0 12px; text-wrap:balance;
}
.rating-experience-heading + h2 + p{
font-family:var(--font-body); color:var(--c-ink-2);
font-size:17px; line-height:1.6; margin:0 auto; max-width:560px;
}
.review-feedback-form-text{
font-family:var(--font-body); color:var(--c-ink-2);
font-size:15px; margin:0 0 6px;
}
/* --- star rating: replace gold PNG sprite with on-brand FA stars --- */
.review-stars .rating-star{ display:inline-flex; align-items:center; gap:6px; }
.review-stars .rating-star span{
background:none !important; width:auto; height:auto; margin:0;
cursor:pointer; line-height:1; font-size:36px;
transition:transform .12s ease, color .12s ease;
}
.review-stars .rating-star span::before{
content:"\f005"; font-family:"Font Awesome 5 Pro"; font-weight:900;
color:var(--c-line);
}
.review-stars .rating-star span:hover{ transform:scale(1.08); }
.review-stars .rating-star span.hover::before,
.review-stars .rating-star span.clicked::before{ color:var(--c-star); }
.review-stars .rating-star .reset-stars{
float:none; width:auto; height:auto; line-height:1; font-size:18px;
color:var(--c-ink-2); margin-left:10px; transition:color .15s ease;
}
.review-stars .rating-star .reset-stars:hover{ color:var(--c-primary); }
/* --- form fields (name / email / feedback) --- */
.input-fields{ max-width:560px; margin:0 auto 16px; text-align:left; }
.input-field-label, .input-field-feedback{
display:block; font-family:var(--font-body);
font-size:14px; font-weight:600; color:var(--c-ink);
}
.input-field-label .required, .input-field-feedback .required{ color:var(--c-primary); margin-left:3px; }
.input-fields input[type="text"],
.input-fields input[type="email"],
.input-fields textarea{
display:block; width:100%; box-sizing:border-box; margin-top:7px; min-height:50px;
background:var(--c-tint); border:1.5px solid var(--c-line);
border-radius:var(--r-field); padding:13px 16px;
font-family:var(--font-body); font-size:16px; color:var(--c-ink); box-shadow:none;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input-fields textarea, #feedback{ height:auto; min-height:140px; resize:vertical; }
.input-fields input::placeholder, .input-fields textarea::placeholder{ color:var(--c-ink-2); opacity:.7; }
.input-fields input:focus, .input-fields textarea:focus{
outline:none; background:var(--c-paper); border-color:var(--c-primary);
box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.16);
}
/* --- captcha --- */
.review-captcha{ max-width:560px; margin:0 auto 8px; }
/* --- submit = global ghost-pill button --- */
.submit-review-form{ max-width:560px; margin:0 auto; text-align:left; }
.submit-review-form .button,
.submit-review-form input[type="submit"]{
display:inline-flex; align-items:center; justify-content:center;
width:auto; min-height:50px; padding:15px 40px;
font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.04em;
color:var(--c-primary); background:var(--c-paper);
border:2px solid var(--c-primary); border-radius:var(--r-pill);
cursor:pointer; box-shadow:none; transition:all .18s ease;
}
.submit-review-form .button:hover,
.submit-review-form input[type="submit"]:hover{
background:var(--c-primary); color:var(--c-light); border-color:var(--c-primary);
}
.submit-review-form .button:active,
.submit-review-form input[type="submit"]:active{ transform:translateY(1px); }
/* --- thank-you / positive feedback state --- */
.positive-feedback-services{ text-align:center; }
.positive-feedback-services h2{
font-family:var(--font-head); color:var(--c-ink);
font-size:var(--fs-h3); line-height:1.25; margin:0 0 10px; text-wrap:balance;
}
.positive-feedback-services .review-logo{ padding:14px; }
.positive-feedback-services .review-logo a{ display:inline-block; transition:transform .18s ease; }
.positive-feedback-services .review-logo a:hover{ transform:translateY(-4px); }
.positive-feedback-services .review-logo img{ max-height:64px; width:auto; }
/* --- reviews listing (premium cards) --- */
.reviews-form-container{ max-width:880px; margin-left:auto; margin-right:auto; }
.review-list-container{ margin-left:0; list-style:none; }
.review-list-container li{
margin:0 0 var(--gap); padding:26px 28px;
background:var(--c-paper); border:1px solid var(--c-line);
border-radius:var(--r-md); box-shadow:var(--shadow-1);
}
.review-list-container li .review-img img{ max-width:38px; height:auto; }
.review-list-container li .user-profile strong{
font-family:var(--font-head); color:var(--c-ink); font-size:17px;
}
.review-list-container li .star-ratings-css{ color:var(--c-star); font-size:15px; margin-top:4px; }
.review-list-container li .review-text{ text-align:left; margin:8px 0 0; }
.review-list-container li .review-text p{
font-family:var(--font-body); color:var(--c-ink-2); font-size:16px; line-height:1.6; margin:0;
}
.review-list-container li .review-date{
font-family:var(--font-body); color:var(--c-ink-2); font-size:13px;
text-align:right; white-space:nowrap;
}
/* --- pagination --- */
.reviews-form-container .pagination{ margin-top:30px; }
.reviews-form-container .pagination a,
.reviews-form-container .pagination span{
display:inline-block; min-width:40px; padding:8px 12px; margin:0 4px 6px;
font-family:var(--font-body); font-size:15px; text-align:center;
border:1px solid var(--c-line); border-radius:var(--r-sm);
color:var(--c-ink); transition:all .15s ease;
}
.reviews-form-container .pagination a:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.reviews-form-container .pagination .current,
.reviews-form-container .pagination .active{
background:var(--c-primary); border-color:var(--c-primary); color:var(--c-light);
}
/* --- mobile --- */
@media all and (max-width:640px){
.review-list-container li{ padding:20px; border-radius:var(--r-sm); }
.review-list-container li .review-date{ text-align:left; margin-top:6px; }
.submit-review-form .button,
.submit-review-form input[type="submit"]{ width:100%; }
}
@media all and (min-width:1024px){
.is-wrapper .main-banner-sec.cps-hero-sec .banner-main-heading {
font-size: 40px;
line-height: 45px;
}
#footer .column-container {
text-align: left;
padding: 0 0px;
}
#footer .contact-section a.footer-email {
font-family: var(--font-body);
font-size: 12px;
}
}
.fa-arrow-right:before {
content: "\f061";
color: #43803f !important;
}
p.color-white.footer-para.margin-bottom-0{
color: #fff !important;
}