/* ============================================================
BRAND TOKENS — Positive Advantage Coaching v3
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&display=swap');
:root {
--c-primary: #97C760;
--c-primary-dark: #7EA751;
--c-accent: #5A7A35;
--c-primary-rgb: 151, 199, 96;
--c-primary-dark-rgb: 126, 167, 81;
--c-accent-rgb: 90, 122, 53;
--font-head: 'Poppins', sans-serif;
--font-body: 'Inter', sans-serif;
--c-ink: #1C1C1E;
--c-ink-2: #6B6C70;
--c-paper: #FFFFFF;
--c-tint: #F4F8F1;
--c-tint-2: #EAF3DC;
--c-tint-3: #DCF0C4;
--c-line: #E2E8DC;
--c-grey: #ADB0B5;
--c-light: #FFFFFF;
--c-white-rgb: 255, 255, 255;
--c-black-rgb: 0, 0, 0;
--btn-bg: var(--c-primary);
--btn-bg-hover: var(--c-primary-dark);
--btn-text: #FFFFFF;
--space-section: 40px;
--gap: 32px;
--r-xs: 4px;
--r-sm: 8px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 30px;
--r-pill: 500px;
--sh-0: 0 1px 4px rgba(0,0,0,.04);
--sh-1: 0 4px 20px rgba(0,0,0,.07);
--sh-2: 0 16px 48px rgba(0,0,0,.11);
--sh-3: 0 32px 80px rgba(0,0,0,.16);
--sh-glow: 0 0 0 6px rgba(var(--c-primary-rgb), .18);
--fs-hero: clamp(30px, 4.6vw, 56px);
--fs-h2: clamp(24px, 3.4vw, 42px);
--fs-h3: clamp(17px, 2.0vw, 23px);
--fs-body: 17px;
--fs-sm: 14.5px;
--fs-xs: 13px;
}
@media (max-width: 640px) {
:root { --space-section: 28px; --gap: 20px; }
}
/* ============================================================
BASE
============================================================ */
.is-wrapper h1,
.is-wrapper h2,
.is-wrapper h3,
.is-wrapper h4,
.is-wrapper h5 {
font-family: var(--font-head);
color: var(--c-ink);
line-height: 1.13;
margin: 0;
text-wrap: balance;
}
.is-wrapper h1 { font-weight: 800; font-size: var(--fs-hero); letter-spacing: -.025em; }
.is-wrapper h2 { font-weight: 700; font-size: var(--fs-h2); letter-spacing: -.02em; }
.is-wrapper h3 { font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.01em; }
.is-wrapper p, .is-wrapper li {
font-family: var(--font-body);
color: var(--c-ink-2);
font-size: var(--fs-body);
line-height: 1.72;
margin: 0;
}
.is-wrapper a { text-decoration: none; }
.is-wrapper a:not([class]) { color: var(--c-primary-dark); }
.is-wrapper img { max-width: 100%; display: block; }
/* ============================================================
MOSAIC
============================================================ */
.pac-mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
width: max-content;
}
.pac-mosaic span { width: 16px; height: 16px; border-radius: 3px; background: var(--c-line); }
.pac-mosaic span.g { background: var(--c-primary); }
.pac-mosaic span.gd { background: var(--c-primary-dark); }
.pac-mosaic span.t { background: var(--c-tint-3); }
.pac-mosaic span.gr { background: var(--c-grey); }
/* ============================================================
EYEBROW CHIP
============================================================ */
.pac-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 600;
font-size: 11.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--c-accent);
background: var(--c-tint-2);
padding: 6px 13px;
max-width: max-content;
border-radius: var(--r-pill);
border: 1px solid rgba(var(--c-primary-rgb), .25);
}
.pac-eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 2px;
background: #f9f9f9;
flex: none;
}
.pac-eyebrow--ondark {
color: rgba(var(--c-white-rgb), .92);
background: rgba(var(--c-primary-rgb), .18);
border-color: #f9f9f9;
}
.pac-eyebrow--ondark::before { background: #f9f9f9; }
/* ============================================================
BUTTONS
============================================================ */
.pac-btn {
display: inline-flex;
max-width: max-content;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 600;
font-size: 15.5px;
line-height: 1;
padding: 15px 28px;
border-radius: var(--r-md);
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
position: relative;
overflow: hidden;
transition:
background .2s ease,
color .2s ease,
border-color .2s ease,
transform .2s cubic-bezier(.2,.8,.3,1),
box-shadow .2s ease;
}
.pac-arr { transition: transform .2s ease; flex: none; }
.pac-btn:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.pac-btn:hover .pac-arr { transform: translateX(5px); }
.pac-btn--primary {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
color: var(--btn-text);
}
.pac-btn--primary:hover {
background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-accent) 100%);
color: var(--btn-text);
}
.pac-btn--primary::after {
content: none;
}
.pac-btn--primary:hover::after { content: none; }
.pac-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-sm);
color: var(--c-primary-dark);
transition: color .18s ease;
}
.pac-link:hover { color: var(--c-accent); }
.pac-link:hover .pac-arr { transform: translateX(5px); }
/* ============================================================
SECTION HELPERS
============================================================ */
.is-wrapper .pac-sec { padding: var(--space-section) 0; }
.is-wrapper .pac-sec--tint { background: var(--c-tint); }
.is-wrapper .pac-sec--tint2 { background: var(--c-tint-2); }
.is-wrapper .pac-sec--dark { background: var(--c-ink); }
.pac-sec-head { max-width: 760px; }
.pac-sec-head--center { margin: 0 auto; text-align: center; }
.pac-sec-head h2 { margin-top: 16px; }
/* ambient glow — must beat Webware's transparent default */
.is-wrapper .pac-sec--tint,
.is-wrapper .pac-sec--tint2 {
position: relative;
isolation: isolate;
overflow: hidden;
}
.is-wrapper .pac-sec--tint::after {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: 600px; height: 600px; border-radius: 50%;
top: -220px; right: -200px;
background: radial-gradient(circle, rgba(var(--c-primary-rgb), .18), transparent 68%);
}
.is-wrapper .pac-sec--tint2::after {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: 620px; height: 620px; border-radius: 50%;
bottom: -240px; left: -200px;
background: radial-gradient(circle, rgba(var(--c-primary-dark-rgb), .18), transparent 70%);
}
/* ============================================================
HERO BANNER (bnl-0)
============================================================ */
.bnl-0 .bn-overlay { display: none; }
.bnl-0 .pos-ab-ban { z-index: 3; }
.bnl-0 .bn-content {
max-width: 620px;
padding: 44px 40px 38px;
border-radius: var(--r-xl);
border-left: 6px solid var(--c-primary);
background: rgba(var(--c-black-rgb), .56);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.bnl-0 .bn-content .pac-eyebrow { margin-bottom: 18px; }
.bnl-0 .bn-content h1 {
color: var(--c-light);
font-size: clamp(26px, 3.8vw, 48px);
line-height: 1.12;
margin-bottom: 14px;
letter-spacing: -.025em;
}
.bnl-0 .bn-content p {
color: rgba(var(--c-white-rgb), .88);
font-size: 16.5px;
}
/* hero CTA buttons */
.pac-hero-cta {
display: flex;
flex-wrap: nowrap; /* keep both buttons on one line */
gap: 10px;
margin-top: 28px;
align-items: center;
}
.pac-hero-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 600;
font-size: 14.5px; /* slightly tighter to fit side-by-side */
padding: 13px 22px;
border-radius: var(--r-pill);
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
transition:
background .2s ease,
border-color .2s ease,
transform .2s cubic-bezier(.2,.8,.3,1),
box-shadow .2s ease,
color .2s ease;
}
.pac-hero-btn:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
/* — primary green button — */
.pac-hero-btn--primary {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
color: var(--btn-text);
}
.pac-hero-btn--primary:hover {
background: linear-gradient(135deg, var(--c-primary-dark), var(--c-accent));
color: var(--btn-text);
}
.pac-hero-btn--primary::after {
content: none;
}
.pac-hero-btn--primary:hover::after { content: none; }
/* — ghost outline button —
Must win over Webware theme's .button / .button--ghost with specificity. */
.bnl-0 .bn-content .pac-hero-btn--ghost,
.pac-hero-btn--ghost {
background: rgba(var(--c-white-rgb), .10) !important;
color: var(--c-light) !important;
border: 2px solid rgba(var(--c-white-rgb), .50) !important;
backdrop-filter: blur(4px);
box-shadow: none !important;
}
.bnl-0 .bn-content .pac-hero-btn--ghost:hover,
.pac-hero-btn--ghost:hover {
background: rgba(var(--c-white-rgb), .22) !important;
border-color: var(--c-light) !important;
color: var(--c-light) !important;
transform: translateY(-3px);
box-shadow: var(--sh-2) !important;
}
/* trust strip — single row, no wrapping */
.pac-hero-trust {
display: flex;
flex-wrap: nowrap; /* force single line */
align-items: center;
gap: 10px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(var(--c-white-rgb), .18);
overflow: hidden; /* clip rather than wrap on very narrow boxes */
}
.pac-hero-trust__item {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-head);
font-weight: 500;
font-size: 12px; /* tighter so all three fit on one line */
color: rgba(var(--c-white-rgb), .80);
white-space: nowrap;
letter-spacing: .01em;
flex-shrink: 0;
}
.pac-hero-trust__item svg { color: var(--c-primary); flex: none; }
.pac-hero-trust__sep {
display: block;
width: 1px;
height: 14px;
background: rgba(var(--c-white-rgb), .22);
flex-shrink: 0;
}
@media (max-width: 1023.5px) {
.bnl-0 .bn-content {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.pac-hero-trust { display: none; }
}
@media (max-width: 640px) {
.bnl-0 .bn-content { padding: 20px 18px 18px; border-left-width: 4px; }
.pac-hero-cta { flex-wrap: wrap; gap: 10px; }
.pac-hero-btn { font-size: 14px; padding: 12px 20px; }
}
/* ============================================================
INTRO SECTION
KEY FIX: pac-intro-row-a and pac-intro-row-b are separate
grid-x blocks; each renders exactly once. The loop bug was
caused by mixing different cell-count rows in one grid-x.
============================================================ */
.is-wrapper .pac-intro { padding: var(--space-section) 0; overflow: hidden; }
/* row spacing between the two sub-rows */
.pac-intro-row-a { padding-bottom: 0 !important; }
.pac-intro-row-b { padding-top: 40px !important; }
.pac-intro__left {
display: flex;
flex-direction: column;
gap: 18px;
padding-right: 24px;
}
.pac-intro__left .pac-mosaic { margin-bottom: 4px; }
/* h2 with animated underline */
.pac-intro__h2 {
margin-top: 16px;
padding-bottom: 28px;
position: relative;
}
.pac-intro__h2::after {
content: "";
position: absolute; bottom: 0; left: 0;
width: 56px; height: 5px;
border-radius: 3px;
background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
transition: width .4s ease;
}
.pac-intro__left:hover .pac-intro__h2::after { width: 96px; }
.pac-intro__copy p { font-size: 16.5px; line-height: 1.76; }
.pac-intro__copy p + p { margin-top: 18px; }
.pac-intro__copy .pac-link { margin-top: 28px; display: inline-flex; }
/* ── focus cards ── */
.pac-focus {
position: relative;
height: 100%;
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-xl);
padding: 36px 28px 28px;
overflow: hidden;
box-shadow: var(--sh-0);
transition:
transform .24s cubic-bezier(.2,.8,.3,1),
box-shadow .24s ease,
border-color .24s ease;
}
.pac-focus::before {
content: ""; position: absolute; left: 0; top: 0;
height: 4px; width: 0;
background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
border-radius: var(--r-xl) var(--r-xl) 0 0;
transition: width .35s ease;
}
.pac-focus:hover {
transform: translateY(-10px);
box-shadow: var(--sh-2);
border-color: transparent;
}
.pac-focus:hover::before { width: 100%; }
.pac-focus__num {
position: absolute; top: 14px; right: 20px;
font-family: var(--font-head); font-weight: 800;
font-size: 52px; line-height: 1;
color: var(--c-tint-3);
transition: color .24s ease;
user-select: none; pointer-events: none;
}
.pac-focus:hover .pac-focus__num { color: rgba(var(--c-primary-rgb), .22); }
.pac-focus__icon {
width: 54px; height: 54px;
border-radius: 14px;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .20);
display: grid; place-items: center;
margin-bottom: 22px;
color: var(--c-primary-dark);
box-shadow: var(--sh-0);
transition: background .24s ease, color .24s ease, transform .24s ease;
}
.pac-focus:hover .pac-focus__icon {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
color: var(--c-light);
border-color: transparent;
transform: scale(1.1) rotate(-4deg);
}
.pac-focus h3 { font-size: 19px; margin-bottom: 10px; }
.pac-focus p { font-size: var(--fs-sm); line-height: 1.65; }
.pac-focus__footer { margin-top: 22px; }
.pac-focus__tag {
display: inline-flex;
font-family: var(--font-head); font-weight: 600;
font-size: 11.5px; letter-spacing: .10em;
text-transform: uppercase;
color: var(--c-primary-dark);
background: var(--c-tint-2);
padding: 4px 12px;
border-radius: var(--r-pill);
border: 1px solid rgba(var(--c-primary-rgb), .22);
transition: background .2s ease, color .2s ease;
}
.pac-focus:hover .pac-focus__tag { background: rgba(var(--c-primary-rgb), .14); color: var(--c-accent); }
/* featured card */
.pac-focus--featured {
background: linear-gradient(160deg, var(--c-paper) 40%, var(--c-tint-2) 100%);
border-color: rgba(var(--c-primary-rgb), .35);
box-shadow: var(--sh-1);
}
.pac-focus--featured::before { width: 100%; }
.pac-focus--featured .pac-focus__tag {
background: var(--c-primary);
color: var(--c-light);
border-color: var(--c-primary);
}
@media (max-width: 1023px) {
.pac-intro__left { padding-right: 0; }
}
/* ============================================================
VALUE ROWS (pac-vrow)
============================================================ */
.is-wrapper .pac-vrow { padding: var(--space-section) 0; }
.pac-vrow__grid { align-items: center; }
/* default order — text first (left), media second (right) */
.pac-vrow__text { order: 1; }
.pac-vrow__media { order: 2; }
/* alt row — flip: media first (left), text second (right) */
.pac-vrow--alt .pac-vrow__media { order: 1; }
.pac-vrow--alt .pac-vrow__text { order: 2; }
.pac-vstep { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.pac-vnum {
font-family: var(--font-head); font-weight: 800; font-size: 17px;
color: var(--c-primary-dark);
width: 50px; height: 50px; border-radius: 13px;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .28);
display: grid; place-items: center;
flex: none; box-shadow: var(--sh-0);
}
.pac-vrow__text h2 { margin-top: 0; }
.pac-vrow__text p { margin-top: 20px; font-size: 16.5px; line-height: 1.76; }
.pac-vrow__text .pac-link { margin-top: 30px; display: inline-flex; }
.pac-vlist {
list-style: none; margin: 28px 0 0; padding: 0;
display: grid; gap: 12px;
}
.pac-vlist li {
display: flex; align-items: flex-start; gap: 13px;
font-family: var(--font-head); font-weight: 500;
font-size: 15.5px; color: var(--c-ink); line-height: 1.5;
}
.pac-ck {
width: 26px; height: 26px; border-radius: 8px;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .28);
display: grid; place-items: center;
flex: none; margin-top: 1px;
color: var(--c-primary-dark); box-shadow: var(--sh-0);
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pac-vlist li:hover .pac-ck {
background: var(--c-primary); color: var(--c-light);
border-color: var(--c-primary); transform: scale(1.1) rotate(-4deg);
}
/* ── media frame ── */
.pac-media-frame {
position: relative;
--mf-x: 26px; --mf-y: 26px;
--mos-l: auto; --mos-r: -18px;
--pill-l: -30px; --pill-r: auto;
}
.pac-vrow--alt .pac-media-frame {
--mf-x: -26px;
--mos-l: -18px; --mos-r: auto;
--pill-l: auto; --pill-r: -30px;
}
.pac-media-frame::before {
content: ""; position: absolute; inset: 0;
border-radius: var(--r-xl);
background: var(--c-tint-3);
transform: translate(var(--mf-x), var(--mf-y));
z-index: 0;
transition: transform .4s ease;
}
.pac-vrow__media:hover .pac-media-frame::before {
transform: translate(calc(var(--mf-x) * .6), calc(var(--mf-y) * .6));
}
.pac-media-thumb {
position: relative; z-index: 1;
border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3);
}
.pac-media-img {
display: block; width: 100%; height: 520px; object-fit: cover;
transition: transform .65s cubic-bezier(.2,.8,.3,1);
}
.pac-media-thumb:hover .pac-media-img { transform: scale(1.06); }
.pac-media-frame__mosaic {
position: absolute; z-index: 2;
top: -22px; left: var(--mos-l); right: var(--mos-r);
filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.pac-pill {
position: absolute; z-index: 3;
bottom: 30px; left: var(--pill-l); right: var(--pill-r);
display: inline-flex; align-items: center; gap: 11px;
background: var(--c-paper); border: 1px solid var(--c-line);
border-radius: var(--r-pill); box-shadow: var(--sh-2);
padding: 11px 20px 11px 11px;
font-family: var(--font-head); font-weight: 600; font-size: 14px;
color: var(--c-ink); white-space: nowrap;
animation: pac-pill-float 4.5s ease-in-out infinite;
}
.pac-pill__ic {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
display: grid; place-items: center;
flex: none; color: var(--c-light); box-shadow: var(--sh-1);
}
@media (max-width: 1023px) {
/* image always first on mobile — override all order values */
.pac-vrow__media,
.pac-vrow--alt .pac-vrow__media { order: 1; }
.pac-vrow__text,
.pac-vrow--alt .pac-vrow__text { order: 2; }
.pac-media-frame { --mf-x: 14px; --mf-y: 14px; --pill-l: 14px; --pill-r: auto; }
.pac-vrow--alt .pac-media-frame { --pill-l: 14px; --pill-r: auto; }
.pac-media-img { height: 380px; }
}
@media (max-width: 640px) {
.pac-media-img { height: 300px; }
.pac-pill { left: 12px; right: auto; bottom: 14px; font-size: 13px; padding: 9px 14px 9px 9px; }
.pac-pill__ic { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.pac-media-img { transition: none; }
.pac-media-thumb:hover .pac-media-img { transform: none; }
.pac-pill { animation: none; }
.pac-vrow__media:hover .pac-media-frame::before { transform: translate(var(--mf-x), var(--mf-y)); }
}
/* ============================================================
PROCESS STEPPER
============================================================ */
.is-wrapper .pac-process { overflow: hidden; }
.pac-steps {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--gap); position: relative; margin-top: 56px;
}
.pac-steps::before {
content: ""; position: absolute;
top: 44px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0;
background: repeating-linear-gradient(90deg, var(--c-primary) 0 10px, transparent 10px 20px);
opacity: .45;
}
.pac-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.pac-step__node {
position: relative;
width: 90px; height: 90px; border-radius: 50%;
background: var(--c-paper); border: 2px solid var(--c-line);
display: grid; place-items: center;
margin: 0 auto 28px; box-shadow: var(--sh-1);
color: var(--c-primary-dark);
transition:
background .24s ease,
border-color .24s ease,
transform .24s cubic-bezier(.2,.8,.3,1),
color .24s ease,
box-shadow .24s ease;
}
/* pulsing ring */
.pac-step__ring {
position: absolute; inset: -8px; border-radius: 50%;
border: 2px solid rgba(var(--c-primary-rgb), .0);
transition: border-color .24s ease, inset .24s ease;
}
.pac-step:hover .pac-step__ring { border-color: rgba(var(--c-primary-rgb), .35); inset: -10px; }
.pac-step:hover .pac-step__node {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
border-color: var(--c-primary);
transform: translateY(-8px) scale(1.06);
color: var(--c-light);
box-shadow: var(--sh-glow), var(--sh-2);
}
.pac-step__num {
position: absolute; top: -8px; right: -8px;
min-width: 30px; height: 30px; padding: 0 5px; border-radius: 50%;
background: var(--c-primary); color: var(--c-light);
font-family: var(--font-head); font-weight: 800; font-size: 12px;
display: grid; place-items: center;
border: 3px solid var(--c-tint); box-shadow: var(--sh-0);
transition: background .24s ease, transform .24s ease;
}
.pac-step:hover .pac-step__num { background: var(--c-accent); transform: scale(1.1); }
.pac-step h3 { font-size: 19px; margin-bottom: 10px; }
.pac-step p { font-size: var(--fs-sm); line-height: 1.66; }
.pac-process-cta { text-align: center; margin-top: 52px; }
@media (max-width: 1023px) {
.pac-steps { grid-template-columns: 1fr 1fr; gap: 44px 28px; }
.pac-steps::before { display: none; }
}
@media (max-width: 540px) { .pac-steps { grid-template-columns: 1fr; gap: 32px; } }
/* ============================================================
TESTIMONIALS
============================================================ */
.is-wrapper .pac-testi-sec { position: relative; isolation: isolate; overflow: hidden; }
.pac-testi-sec::after {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: 580px; height: 580px; border-radius: 50%;
bottom: -260px; left: -180px;
background: radial-gradient(circle, rgba(var(--c-primary-rgb), .14), transparent 70%);
}
.pac-testi-cell { margin-top: 34px; }
.pac-testi {
margin: 0; height: 100%;
position: relative;
background: var(--c-paper); border: 1px solid var(--c-line);
border-radius: var(--r-xl); padding: 40px 32px 32px;
overflow: hidden; box-shadow: var(--sh-1);
transition:
transform .24s cubic-bezier(.2,.8,.3,1),
box-shadow .24s ease,
border-color .24s ease;
}
.pac-testi::before {
content: ""; position: absolute; left: 0; top: 0;
height: 4px; width: 0;
background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
border-radius: var(--r-xl) var(--r-xl) 0 0;
transition: width .35s ease; z-index: 2;
}
.pac-testi:hover::before { width: 100%; }
.pac-testi::after {
content: "\201D";
position: absolute; top: -30px; right: 18px;
font-family: var(--font-head); font-weight: 800;
font-size: 170px; line-height: 1;
color: var(--c-tint-3); z-index: 0;
transition: color .24s ease;
pointer-events: none; user-select: none;
}
.pac-testi:hover {
transform: translateY(-10px) scale(1.016);
box-shadow: var(--sh-2);
border-color: transparent;
}
.pac-testi:hover::after { color: rgba(var(--c-primary-rgb), .18); }
.pac-stars {
position: relative; z-index: 1;
display: flex; gap: 3px; color: var(--c-primary); margin-bottom: 18px;
}
.pac-testi blockquote {
position: relative; z-index: 1;
margin: 0; font-family: var(--font-body);
font-weight: 500; font-size: 16.5px; line-height: 1.7; color: var(--c-ink);
}
.pac-testi figcaption {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 14px;
margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--c-line);
}
.pac-testi__av {
width: 50px; height: 50px; border-radius: 50%; flex: none;
background: linear-gradient(135deg, var(--c-tint-2), var(--c-tint-3));
box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .14);
display: grid; place-items: center;
font-family: var(--font-head); font-weight: 700;
font-size: 16px; color: var(--c-primary-dark);
transition: transform .24s ease, box-shadow .24s ease;
}
.pac-testi:hover .pac-testi__av {
transform: scale(1.1) rotate(-4deg);
box-shadow: 0 0 0 6px rgba(var(--c-primary-rgb), .24);
}
.pac-testi figcaption b {
display: block; font-family: var(--font-head);
font-weight: 600; font-size: 15.5px; color: var(--c-ink);
}
.pac-testi figcaption small {
display: block; font-size: 12.5px;
color: var(--c-grey); font-weight: 500; margin-top: 2px;
}
/* featured (centre) card */
.pac-testi--featured {
background: linear-gradient(155deg, var(--c-paper) 45%, var(--c-tint-2) 100%);
border-color: rgba(var(--c-primary-rgb), .40);
box-shadow: var(--sh-2);
transform: translateY(-6px);
}
.pac-testi--featured::before { width: 100%; }
.pac-testi--featured:hover { transform: translateY(-14px) scale(1.016); }
/* ============================================================
AREA BAND (dark bg)
============================================================ */
.is-wrapper .pac-areaband { position: relative; isolation: isolate; overflow: hidden; }
.pac-areaband::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(rgba(var(--c-white-rgb), .055) 1.5px, transparent 1.5px);
background-size: 26px 26px;
}
.pac-areaband::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: 580px; height: 580px; border-radius: 50%;
top: -220px; left: -210px;
background: radial-gradient(circle, rgba(var(--c-primary-rgb), .24), transparent 65%);
filter: blur(24px);
}
.pac-areaband .grid-x { position: relative; z-index: 1; }
.pac-areaband__left .pac-eyebrow { margin-bottom: 18px; }
.pac-areaband__left h2 { color: var(--c-light); margin-top: 0; }
.pac-areaband__left p { color: rgba(var(--c-white-rgb), .76); font-size: 17px; margin-top: 18px; }
.pac-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* shared chip base */
.pac-chip,
.pac-chips__plain {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-weight: 500; font-size: 14px;
color: rgba(var(--c-white-rgb), .88);
background: rgba(var(--c-white-rgb), .07);
border: 1px solid rgba(var(--c-white-rgb), .16);
padding: 8px 16px; border-radius: var(--r-pill);
text-decoration: none;
}
.pac-chip::before,
.pac-chips__plain::before {
content: ""; width: 7px; height: 7px; border-radius: 2px;
background: var(--c-primary); flex: none;
}
/* linked chips — arrow + hover lift */
.pac-chip {
transition:
background .2s ease,
border-color .2s ease,
transform .2s ease,
color .2s ease;
}
.pac-chip::after {
content: none;
display: none;
}
.pac-chip:hover {
background: rgba(var(--c-primary-rgb), .22);
border-color: rgba(var(--c-primary-rgb), .55);
color: var(--c-light);
transform: translateY(-3px);
}
.pac-chip:hover::after {
content: none;
}
/* non-linked chip — static, no hover */
.pac-chips__plain { cursor: default; opacity: .70; }
.pac-areaband__right { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.pac-mapmosaic {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 8px; width: 100%;
border-radius: var(--r-md); overflow: hidden; padding: 2px;
}
.pac-mapmosaic span {
aspect-ratio: 1; border-radius: 4px;
background: rgba(var(--c-white-rgb), .07);
animation: pac-mm-breathe 3.8s ease-in-out infinite;
}
.pac-mapmosaic span.p85 { background: rgba(var(--c-primary-rgb), .85); }
.pac-mapmosaic span.p70 { background: rgba(var(--c-primary-rgb), .70); }
.pac-mapmosaic span.p60 { background: rgba(var(--c-primary-rgb), .60); }
.pac-mapmosaic span.p55 { background: rgba(var(--c-primary-rgb), .55); }
.pac-mapmosaic span.p45 { background: rgba(var(--c-primary-rgb), .45); }
.pac-mapmosaic span.p40 { background: rgba(var(--c-primary-rgb), .40); }
.pac-mapmosaic span.p35 { background: rgba(var(--c-primary-rgb), .35); }
.pac-mapmosaic span.pd70 { background: rgba(var(--c-primary-dark-rgb), .70); }
.pac-mapmosaic span.pd65 { background: rgba(var(--c-primary-dark-rgb), .65); }
.pac-mapmosaic span.pd50 { background: rgba(var(--c-primary-dark-rgb), .50); }
.pac-mapmosaic span.pd40 { background: rgba(var(--c-primary-dark-rgb), .40); }
.pac-mapmosaic span:nth-child(6n+1) { animation-delay: .00s; }
.pac-mapmosaic span:nth-child(6n+2) { animation-delay: .20s; }
.pac-mapmosaic span:nth-child(6n+3) { animation-delay: .40s; }
.pac-mapmosaic span:nth-child(6n+4) { animation-delay: .60s; }
.pac-mapmosaic span:nth-child(6n+5) { animation-delay: .80s; }
.pac-mapmosaic span:nth-child(6n) { animation-delay: 1.00s; }
@media (prefers-reduced-motion: reduce) { .pac-mapmosaic span { animation: none; } }
/* ============================================================
NEWSLETTER CARD
============================================================ */
/* ============================================================
NEWSLETTER — compact 2-col strip
============================================================ */
.pac-newsletter { overflow: hidden; }
.pac-news {
position: relative;
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
overflow: hidden;
padding: 40px 48px;
/* 2-col: left text | right CTA */
display: flex;
align-items: center;
gap: 40px;
}
/* ambient glow */
.pac-news::before {
content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
background:
radial-gradient(circle at 10% 50%, rgba(var(--c-primary-rgb), .16), transparent 42%),
radial-gradient(circle at 90% 50%, rgba(var(--c-primary-dark-rgb), .12), transparent 44%);
}
/* dot pattern */
.pac-news::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(var(--c-primary-rgb), .07) 1.5px, transparent 1.5px);
background-size: 26px 26px;
mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 80%);
}
/* corner mosaics */
.pac-news .pac-mosaic { position: absolute; opacity: .35; }
.pac-news__m1 { top: 18px; left: 24px; }
.pac-news__m2 { bottom: 18px; right: 24px; }
/* left: icon + text */
.pac-news__left {
display: flex;
align-items: flex-start;
gap: 20px;
flex: 1;
min-width: 0;
}
.pac-news__icon {
display: flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 14px; flex: none;
background: linear-gradient(135deg, var(--c-tint-2), var(--c-tint-3));
border: 1.5px solid rgba(var(--c-primary-rgb), .28);
color: var(--c-primary-dark); box-shadow: var(--sh-0);
transition: transform .24s ease, box-shadow .24s ease;
}
.pac-news:hover .pac-news__icon { transform: scale(1.08) rotate(-6deg); box-shadow: var(--sh-glow); }
.pac-news__text { min-width: 0; }
.pac-news__text .pac-eyebrow { margin-bottom: 10px; }
.pac-news__text h2 {
font-size: clamp(18px, 2.2vw, 26px);
line-height: 1.25;
margin: 0 0 8px;
}
.pac-news__text p {
font-size: 15.5px;
line-height: 1.65;
margin: 0;
max-width: 520px;
}
/* right: CTA block */
.pac-news__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
flex: none;
text-align: right;
}
.pac-news__cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; padding: 14px 26px;
border-radius: var(--r-pill);
white-space: nowrap;
}
.pac-news__note {
font-size: 12.5px;
color: var(--c-grey);
font-family: var(--font-body);
}
/* responsive — stack on tablet/mobile */
@media (max-width: 1023px) {
.pac-news {
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding: 36px 32px;
}
.pac-news__right { align-items: flex-start; text-align: left; }
}
@media (max-width: 639px) {
.pac-news { padding: 28px 20px; }
.pac-news__icon { width: 44px; height: 44px; }
.pac-news__text h2 { font-size: 18px; }
}
/* ============================================================
KEYFRAMES
============================================================ */
@keyframes pac-pill-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes pac-mm-breathe {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.88); }
}
@keyframes pac-rise {
from { opacity: 0; transform: translateY(36px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pac-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-32px, 26px) scale(1.15); }
}
@keyframes pac-step-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--c-primary-rgb), .45); }
70% { box-shadow: 0 0 0 14px rgba(var(--c-primary-rgb), .0); }
100%{ box-shadow: 0 0 0 0 rgba(var(--c-primary-rgb), .0); }
}
@media (prefers-reduced-motion: no-preference) {
.is-wrapper .pac-sec--tint::after { animation: pac-drift 16s ease-in-out infinite; }
.is-wrapper .pac-sec--tint2::after { animation: pac-drift 20s ease-in-out infinite reverse; }
.pac-areaband::after { animation: pac-drift 18s ease-in-out infinite; }
.pac-intro__left .pac-mosaic { animation: pac-pill-float 7s ease-in-out infinite; }
.pac-step:hover .pac-step__node { animation: pac-step-pulse .8s ease-out; }
@supports (animation-timeline: view()) {
.pac-reveal {
animation: pac-rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 58%;
}
}
}
/* ============================================================
ABOUT PAGE — additional components
(pac-stmt-*, pac-mission-*, pac-irene-*, pac-underline,
pac-testimonials, pac-reveal scroll classes)
============================================================ */
/* ── Buttons ── */
.pac-btn{
display:inline-flex; max-width:max-content; align-items:center; gap:10px; font-family:var(--font-head);
font-weight:600; font-size:16px; line-height:1; cursor:pointer;
padding:15px 26px; border-radius:var(--r-sm); border:2px solid transparent;
transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
text-decoration:none; white-space:nowrap; position:relative; overflow:hidden;
}
.pac-arr{ transition:transform .16s ease; }
.pac-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.pac-btn:hover .pac-arr{ transform:translateX(4px); }
.pac-btn--primary{ background:linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); color:var(--btn-text); }
.pac-btn--primary:hover{ background:linear-gradient(135deg, var(--c-primary-dark), var(--c-accent)); color:var(--btn-text); }
.pac-btn--primary::after{
content:none;
}
.pac-btn--primary:hover::after{ content:none; }
.pac-btn--secondary{ background:transparent; color:var(--c-primary-dark); border-color:var(--c-primary); }
.pac-btn--secondary:hover{ background:var(--c-primary); color:var(--c-light); border-color:var(--c-primary); }
/* ghost for use on dark hero overlay */
.pac-btn--ghost-hero{
background:rgba(255,255,255,.12); color:var(--c-light);
border-color:rgba(255,255,255,.45); backdrop-filter:blur(4px);
}
.pac-btn--ghost-hero:hover{ background:rgba(255,255,255,.22); border-color:var(--c-light); color:var(--c-light); }
/* ── Link ── */
.pac-link{
display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head);
font-weight:600; color:var(--c-primary-dark); font-size:16px;
}
.pac-link .pac-arr{ transition:transform .16s ease; }
.pac-link:hover{ color:var(--c-accent); }
.pac-link:hover .pac-arr{ transform:translateX(4px); }
.pac-cta-row{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
/* ================================================================
BANNER HERO (bnl-0)
================================================================ */
.bnl-0 .bn-overlay{ display:none; }
.bnl-0 .pos-ab-ban{ z-index:3; }
.bnl-0 .bn-content{
max-width:600px; text-align:left; margin-left:0; margin-right:auto;
padding:38px 36px 34px; border-radius:var(--r-lg);
border-left:5px solid var(--c-primary);
background:rgba(var(--c-black-rgb),.58); backdrop-filter:blur(6px); color:var(--c-light);
}
.bnl-0 .bn-content .pac-eyebrow{ margin-bottom:16px; }
.bnl-0 .bn-content h1{
color:var(--c-light); font-family:var(--font-head); font-weight:800; font-size:var(--fs-h2);
line-height:1.13; letter-spacing:-.4px; margin-bottom:14px; text-wrap:balance;
}
.bnl-0 .bn-content h2,.bnl-0 .bn-content h3,.bnl-0 .bn-content h4{ color:var(--c-light); }
.bnl-0 .bn-content p{
color:rgba(255,255,255,.9); font-family:var(--font-body);
font-size:17px; line-height:1.65; margin-bottom:6px;
}
.bnl-0 .bn-content .pac-cta-row{ margin-top:28px; }
@media all and (max-width:1023.5px){
.bnl-0 .bn-content{ background:var(--c-ink); backdrop-filter:none; }
.bnl-0 .bn-content h1,.bnl-0 .bn-content p{ color:var(--c-light); }
.bnl-0 .bn-content p{ color:rgba(255,255,255,.85); }
}
/* ================================================================
OPENING STATEMENT (redesigned split layout)
================================================================ */
.pac-stmt-left{ display:flex; flex-direction:column; gap:32px; }
.pac-stmt-left .pac-mosaic{ margin-bottom:4px; }
/* stat pills */
.pac-stmt-pills{ display:flex; flex-direction:column; gap:14px; }
.pac-stmt-pill{
display:flex; align-items:center; gap:18px; padding:20px 22px;
background:var(--c-paper); border:1px solid var(--c-line); border-radius:var(--r-md);
box-shadow:var(--shadow-1);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pac-stmt-pill:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--c-primary); }
.pac-stmt-pill__num{
font-family:var(--font-head); font-weight:800; font-size:32px; color:var(--c-primary-dark); line-height:1;
}
.pac-stmt-pill__num span{ font-size:22px; color:var(--c-primary); }
.pac-stmt-pill__lbl{ font-family:var(--font-head); font-weight:500; font-size:14.5px; color:var(--c-ink-2); }
/* editorial copy */
.pac-stmt-right{ padding-left:20px; }
.pac-stmt-rule{ width:64px; height:5px; border-radius:3px; background:var(--c-primary); margin-bottom:28px; }
.pac-statement__lead{
font-family:var(--font-head); font-weight:500;
font-size:clamp(20px,2.3vw,26px); line-height:1.5; color:var(--c-ink); margin-bottom:22px;
}
.pac-stmt-right p:not(.pac-statement__lead){ font-size:17px; line-height:1.75; color:var(--c-ink-2); }
.pac-stmt-right p + p{ margin-top:18px; }
@media all and (max-width:1024px){
.pac-stmt-left{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
.pac-stmt-pills{ flex-direction:row; flex-wrap:wrap; gap:12px; }
.pac-stmt-right{ padding-left:0; margin-top:32px; }
}
@media all and (max-width:640px){
.pac-stmt-pill{ flex:1 1 calc(50% - 8px); }
}
/* ================================================================
OUR MISSION (dark band — enhanced)
================================================================ */
.is-wrapper .pac-mission{ position:relative; isolation:isolate; overflow:hidden; text-align:center; }
.pac-mission::before{
content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(760px,92%);
aspect-ratio:1; transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(151,199,96,.20), transparent 60%);
filter:blur(28px); pointer-events:none;
}
.pac-mission::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.05) 1.4px, transparent 1.4px);
background-size:26px 26px;
}
.pac-mission h2{ color:var(--c-light); }
.pac-mission__deco{
color:rgba(151,199,96,.55); margin:0 auto 20px;
display:flex; justify-content:center;
}
.pac-mission__line{ width:64px; height:5px; border-radius:3px; background:var(--c-primary); margin:22px auto 0; }
.pac-mission p{
max-width:780px; margin:28px auto 0;
font-family:var(--font-head); font-weight:300;
font-size:clamp(20px,2.6vw,28px); line-height:1.5;
color:rgba(255,255,255,.90);
}
/* floating name card on image */
.pac-irene-card{
position:absolute; z-index:3; bottom:24px; left:-26px;
display:flex; align-items:center; gap:14px;
background:var(--c-paper); border:1px solid var(--c-line);
border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:14px 20px;
}
.pac-irene-card__av{
width:48px; height:48px; border-radius:50%; flex:none;
background:linear-gradient(135deg,var(--c-tint-2),var(--c-tint-3));
display:grid; place-items:center; font-family:var(--font-head); font-weight:700;
font-size:15px; color:var(--c-primary-dark);
box-shadow:0 0 0 4px rgba(151,199,96,.15);
}
.pac-irene-card strong{ display:block; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--c-ink); }
.pac-irene-card small{ display:block; font-size:12.5px; color:var(--c-grey); margin-top:2px; }
/* the SVG signature underline */
.pac-underline{ display:block; width:190px; max-width:60%; height:auto; color:var(--c-primary); margin:10px 0 22px; }
/* values chips */
.pac-irene-values{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pac-irene-values span{
display:inline-flex; align-items:center; gap:7px;
font-family:var(--font-head); font-weight:500; font-size:14px; color:var(--c-ink);
background:var(--c-paper); border:1px solid var(--c-line);
padding:8px 14px; border-radius:var(--r-pill); box-shadow:var(--shadow-1);
transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.pac-irene-values span:hover{ background:var(--c-tint-2); border-color:var(--c-primary); transform:translateY(-2px); }
.pac-irene-values span svg{ color:var(--c-primary); flex:none; }
@media all and (max-width:1024px){
/* image always first on mobile */
.pac-vrow__media,
.pac-vrow--alt .pac-vrow__media { order: 1; }
.pac-vrow__text,
.pac-vrow--alt .pac-vrow__text { order: 2; }
.pac-media-frame{ --mf-x:12px; --mf-y:12px; --pill-l:12px; --pill-r:auto; }
.pac-irene-card{ left:12px; bottom:14px; }
}
@media all and (max-width:640px){
.pac-media-img{ height:320px; }
.pac-irene-card{ display:none; }/* too cramped on mobile */
}
/* ================================================================
/* newsletter block 2 removed — consolidated above */
/* ================================================================
AMBIENT GLOWS — tint sections
================================================================ */
.is-wrapper .pac-sec--tint,
.is-wrapper .pac-sec--tint2,
.pac-testimonials{ position:relative; isolation:isolate; overflow:hidden; }
.is-wrapper .pac-sec--tint::after{
content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%;
top:-180px; right:-150px; pointer-events:none;
background:radial-gradient(circle, rgba(151,199,96,.22), transparent 68%);
}
.is-wrapper .pac-sec--tint2::after{
content:""; position:absolute; z-index:-1; width:560px; height:560px; border-radius:50%;
bottom:-220px; left:-170px; pointer-events:none;
background:radial-gradient(circle, rgba(126,167,81,.22), transparent 70%);
}
.pac-testimonials::after{
content:""; position:absolute; z-index:-1; width:560px; height:560px; border-radius:50%;
bottom:-240px; left:-160px; pointer-events:none;
background:radial-gradient(circle, rgba(151,199,96,.16), transparent 70%);
}
/* ================================================================
ANIMATIONS & MOTION
================================================================ */
@keyframes pac-rise{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pac-in-left{ from{ opacity:0; transform:translateX(-44px); } to{ opacity:1; transform:translateX(0); } }
@keyframes pac-in-right{ from{ opacity:0; transform:translateX(44px); } to{ opacity:1; transform:translateX(0); } }
@keyframes pac-line{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
@keyframes pac-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes pac-glow-c{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.85; } 50%{ transform:translate(-50%,-50%) scale(1.16); opacity:1; } }
@keyframes pac-pop{ from{ opacity:0; transform:translateY(28px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes pac-drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-28px,22px) scale(1.12); } }
@keyframes pac-draw{ from{ stroke-dashoffset:210; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: no-preference){
.is-wrapper .pac-sec--tint::after{ animation:pac-drift 15s ease-in-out infinite; }
.is-wrapper .pac-sec--tint2::after{ animation:pac-drift 19s ease-in-out infinite; }
.pac-testimonials::after{ animation:pac-drift 17s ease-in-out infinite reverse; }
.pac-mission::before{ animation:pac-glow-c 11s ease-in-out infinite; }
@supports (animation-timeline: view()){
.pac-reveal{ animation:pac-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 58%; }
.pac-reveal--left{ animation-name:pac-in-left; }
.pac-reveal--right{ animation-name:pac-in-right; }
.pac-pop{ animation:pac-pop linear both; animation-timeline:view(); }
.pac-rv1{ animation-range:entry 0% entry 52%; }
.pac-rv2{ animation-range:entry 8% entry 60%; }
.pac-rv3{ animation-range:entry 16% entry 68%; }
.pac-mission__line{ animation:pac-line linear both; animation-timeline:view(); animation-range:entry 12% entry 56%; transform-origin:center; }
.pac-underline path{ stroke-dasharray:210; }
.pac-reveal .pac-underline path{ animation:pac-draw linear both; animation-timeline:view(); animation-range:entry 12% entry 48%; }
}
}
@media (prefers-reduced-motion: reduce){
.pac-media-img{ transition:none; }
.pac-media-thumb:hover .pac-media-img{ transform:none; }
}
/* ── irene bio page-specific link (inherits pac-link base) ── */
.pac-irene-link{ display:inline-flex; align-items:center; gap:8px; margin-top:28px; }
/* ============================================================
SERVICES PAGE — pac-svc-* components
============================================================ */
/* ── grid ── */
.pac-svc-grid {
margin-top: 52px;
align-items: stretch;
}
.pac-svc-cell { display: flex; margin-top: 28px; }
/* ── base card ── */
.pac-svc-card {
display: flex;
flex-direction: column;
width: 100%;
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-xl);
overflow: hidden;
text-decoration: none;
box-shadow: var(--sh-1);
position: relative;
transition:
transform .26s cubic-bezier(.2,.8,.3,1),
box-shadow .26s ease,
border-color .26s ease;
}
.pac-svc-card::before {
content: "";
position: absolute; left: 0; top: 0;
height: 4px; width: 0;
background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
border-radius: var(--r-xl) var(--r-xl) 0 0;
transition: width .38s ease;
z-index: 2;
}
.pac-svc-card:hover {
transform: translateY(-8px);
box-shadow: var(--sh-3);
border-color: rgba(var(--c-primary-rgb), .30);
}
.pac-svc-card:hover::before { width: 100%; }
/* ── image block ── */
.pac-svc-media {
position: relative;
overflow: hidden;
flex: none;
}
.pac-svc-img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
transition: transform .65s cubic-bezier(.2,.8,.3,1);
}
.pac-svc-card:hover .pac-svc-img { transform: scale(1.06); }
/* number badge */
.pac-svc-num {
position: absolute; bottom: 12px; left: 16px;
font-family: var(--font-head); font-weight: 800;
font-size: 50px; line-height: 1;
color: rgba(var(--c-white-rgb), .22);
user-select: none; pointer-events: none;
transition: color .26s ease;
}
.pac-svc-card:hover .pac-svc-num { color: rgba(var(--c-white-rgb), .38); }
/* category tag */
.pac-svc-tag {
position: absolute; top: 13px; right: 13px;
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-head); font-weight: 600;
font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
color: var(--c-light);
background: rgba(var(--c-black-rgb), .42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 5px 11px; border-radius: var(--r-pill);
border: 1px solid rgba(var(--c-white-rgb), .18);
transition: background .26s ease, border-color .26s ease;
}
.pac-svc-tag::before {
content: "";
width: 5px; height: 5px; border-radius: 2px;
background: var(--c-primary); flex: none;
}
.pac-svc-card:hover .pac-svc-tag {
background: rgba(var(--c-primary-rgb), .75);
border-color: var(--c-primary);
}
.pac-svc-tag--feat {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
border-color: transparent;
}
.pac-svc-tag--feat::before { background: var(--c-light); }
/* ── text body ── */
.pac-svc-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 24px 24px 22px;
gap: 8px;
}
.pac-svc-body h3 {
font-size: 19px;
line-height: 1.25;
margin: 0;
color: var(--c-ink);
transition: color .2s ease;
}
.pac-svc-card:hover .pac-svc-body h3 { color: var(--c-primary-dark); }
.pac-svc-body p {
font-size: var(--fs-sm);
line-height: 1.68;
color: var(--c-ink-2);
margin: 0;
}
/* CTA arrow */
.pac-svc-cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 8px;
font-family: var(--font-head); font-weight: 600;
font-size: 13px; letter-spacing: .04em;
color: var(--c-primary-dark);
transition: color .2s ease, gap .2s ease;
}
.pac-svc-cta svg { transition: transform .2s ease; flex: none; }
.pac-svc-card:hover .pac-svc-cta { color: var(--c-accent); gap: 10px; }
.pac-svc-card:hover .pac-svc-cta svg { transform: translateX(4px); }
/* wide card removed — all cards uniform */
/* ── responsive ── */
@media (max-width: 1024px) {
.pac-svc-grid { margin-top: 32px; }
.pac-svc-cell { margin-top: 20px; }
}
@media (max-width: 639px) {
.pac-svc-img { height: 200px; }
.pac-svc-body { padding: 20px 18px 18px; }
.pac-svc-body h3 { font-size: 17px; }
}
/* ============================================================
EXECUTIVE LEADERSHIP COACHING PAGE — pac-elc-* components
============================================================ */
/* ── section backgrounds ── */
.is-wrapper .pac-sec--paper { background: var(--c-paper); padding: var(--space-section) 0; }
/* explicit white bg for pac-vrow (overrides any inherited transparent) */
.is-wrapper .pac-vrow--white { background: var(--c-paper); }
/* separator line between benefits (tint) and first zigzag (white) */
.is-wrapper .pac-elc-benefits {
border-bottom: 2px solid var(--c-line);
}
/* ═══════════════════════════════
INTRO SECTION
═══════════════════════════════ */
.pac-elc-intro__text {
display: flex;
flex-direction: column;
gap: 20px;
padding-right: 40px;
}
.pac-elc-intro__text .pac-eyebrow { margin-bottom: 4px; }
.pac-elc-intro__text p { font-size: 16.5px; line-height: 1.76; }
.pac-elc-intro__text .pac-btn { margin-top: 8px; align-self: flex-start; }
/* aside card */
.pac-elc-aside-card {
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-xl);
padding: 36px 32px;
box-shadow: var(--sh-1);
position: relative;
overflow: hidden;
}
.pac-elc-aside-card::before {
content: ""; position: absolute; left: 0; top: 0;
width: 5px; height: 100%;
background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark));
border-radius: var(--r-xl) 0 0 var(--r-xl);
}
.pac-elc-aside-card__icon {
width: 52px; height: 52px; border-radius: 14px;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .22);
display: grid; place-items: center;
color: var(--c-primary-dark);
margin-bottom: 18px; box-shadow: var(--sh-0);
}
.pac-elc-aside-card h3 { font-size: 18px; margin-bottom: 18px; }
/* shared check list (intro + check items) */
.pac-elc-check-list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px;
}
.pac-elc-check-list li {
display: flex; align-items: flex-start; gap: 12px;
font-family: var(--font-body); font-size: 15px;
color: var(--c-ink); line-height: 1.5;
}
.pac-elc-check-list .pac-ck { margin-top: 2px; flex: none; }
@media (max-width: 1023px) {
.pac-elc-intro__text { padding-right: 0; }
.pac-elc-intro__aside { margin-top: 32px; }
}
/* ═══════════════════════════════
BENEFIT CARDS
═══════════════════════════════ */
.pac-elc-ben-grid { margin-top: 44px; }
.pac-elc-ben-cell { margin-top: 24px; display: flex; }
.pac-elc-ben-card {
display: flex; gap: 20px; align-items: flex-start;
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-xl);
padding: 30px 26px;
box-shadow: var(--sh-0);
width: 100%;
transition:
transform .24s cubic-bezier(.2,.8,.3,1),
box-shadow .24s ease,
border-color .24s ease;
position: relative; overflow: hidden;
}
.pac-elc-ben-card::before {
content: ""; position: absolute; left: 0; top: 0;
height: 3px; width: 0;
background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark));
border-radius: var(--r-xl) var(--r-xl) 0 0;
transition: width .35s ease;
}
.pac-elc-ben-card:hover {
transform: translateY(-6px);
box-shadow: var(--sh-2);
border-color: rgba(var(--c-primary-rgb), .28);
}
.pac-elc-ben-card:hover::before { width: 100%; }
.pac-elc-ben-card__icon {
width: 50px; height: 50px; border-radius: 13px; flex: none;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .20);
display: grid; place-items: center;
color: var(--c-primary-dark); box-shadow: var(--sh-0);
transition: background .24s ease, color .24s ease, transform .24s ease;
}
.pac-elc-ben-card:hover .pac-elc-ben-card__icon {
background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
color: var(--c-light); border-color: transparent;
transform: scale(1.1) rotate(-4deg);
}
.pac-elc-ben-card__body h3 { font-size: 18px; margin-bottom: 10px; }
.pac-elc-ben-card__body p { font-size: var(--fs-sm); line-height: 1.68; }
@media (max-width: 639px) {
.pac-elc-ben-card { flex-direction: column; gap: 14px; padding: 22px 18px; }
}
/* ═══════════════════════════════
DETAIL SECTIONS (split layout)
═══════════════════════════════ */
.pac-elc-detail__text {
display: flex;
flex-direction: column;
gap: 16px;
}
.pac-elc-detail__text .pac-eyebrow { margin-bottom: 4px; }
.pac-elc-detail__text h2 { margin: 0; }
.pac-elc-detail__text p { font-size: 16.5px; line-height: 1.76; }
/* feature list with green check icons */
.pac-elc-feat-list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0;
}
.pac-elc-feat-list li {
display: flex; align-items: flex-start; gap: 14px;
font-family: var(--font-body); font-size: 15.5px;
color: var(--c-ink); line-height: 1.55;
padding: 14px 0;
border-bottom: 1px solid var(--c-line);
transition: background .18s ease, padding-left .18s ease;
}
.pac-elc-feat-list li:first-child { border-top: 1px solid var(--c-line); }
.pac-elc-feat-list li:hover { padding-left: 6px; }
.pac-elc-feat-list__ic {
width: 28px; height: 28px; border-radius: 8px; flex: none;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .22);
display: grid; place-items: center;
color: var(--c-primary-dark); margin-top: 1px;
box-shadow: var(--sh-0);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pac-elc-feat-list li:hover .pac-elc-feat-list__ic {
background: var(--c-primary); color: var(--c-light);
border-color: var(--c-primary); transform: scale(1.1) rotate(-4deg);
}
/* media column inside detail sections */
.pac-elc-detail__media-col {
display: flex;
align-items: center;
}
/* section 4: list below image+text on a full-width row */
.pac-elc-detail__list-row { margin-top: 32px; }
/* pill on right side of frame (flipped sections) */
.pac-pill--right {
left: auto;
right: var(--pill-l, -30px);
}
/* flip the offset shadow for alt sections */
.pac-media-frame--flip {
--mf-x: -26px;
--mos-l: -18px; --mos-r: auto;
--pill-l: auto; --pill-r: -30px;
}
/* horizontal list variant (3 cols on desktop) */
.pac-elc-feat-list--row {
grid-template-columns: repeat(3, 1fr);
gap: 0 16px;
}
@media (max-width: 1023px) {
.pac-elc-feat-list--row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
.pac-elc-feat-list--row { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
.pac-elc-detail__list { margin-top: 32px; }
.pac-elc-detail__media-col { margin-top: 28px; }
.pac-elc-detail--alt .pac-elc-detail__media-col { order: -1; margin-top: 0; margin-bottom: 28px; }
.pac-elc-detail--alt .pac-elc-detail__text { order: 2; margin-top: 0; }
.pac-media-frame--flip { --mf-x: 14px; }
.pac-pill--right { right: 14px; left: auto; }
}
/* ═══════════════════════════════
FAQ ACCORDION — premium card style
═══════════════════════════════ */
/* section wrapper */
.is-wrapper .pac-elc-faq { background: var(--c-tint); }
/* ── left panel ── */
.pac-elc-faq__left {
display: flex;
flex-direction: column;
gap: 20px;
padding-right: 52px;
position: sticky;
top: 32px;
}
.pac-elc-faq__left .pac-eyebrow { margin-bottom: 4px; }
.pac-elc-faq__left h2 { margin: 0; line-height: 1.2; }
.pac-elc-faq__left > p { font-size: 15.5px; line-height: 1.75; }
/* stat badges on left panel */
.pac-faq-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
.pac-faq-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: 16px 20px;
flex: 1 1 120px;
box-shadow: var(--sh-0);
transition: transform .2s ease, box-shadow .2s ease;
}
.pac-faq-stat:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
.pac-faq-stat__num {
font-family: var(--font-head); font-weight: 800;
font-size: 28px; color: var(--c-primary-dark);
line-height: 1;
}
.pac-faq-stat__lbl {
font-family: var(--font-body); font-size: 12.5px;
color: var(--c-ink-2); margin-top: 4px; line-height: 1.3;
}
/* ── accordion list ── */
.pac-elc-faq__right { display: flex; flex-direction: column; gap: 12px; }
.pac-elc-faq-item {
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-0);
transition:
border-color .22s ease,
box-shadow .22s ease,
transform .22s ease;
}
.pac-elc-faq-item:hover {
border-color: rgba(var(--c-primary-rgb), .30);
box-shadow: var(--sh-1);
transform: translateY(-2px);
}
.pac-elc-faq-item--open {
border-color: rgba(var(--c-primary-rgb), .45);
box-shadow: var(--sh-2);
transform: translateY(-2px);
}
/* question row */
.pac-elc-faq-item__q {
width: 100%;
display: flex; align-items: center; gap: 16px;
background: transparent; border: none; cursor: pointer;
padding: 20px 22px;
text-align: left; line-height: 1.4;
transition: background .22s ease;
}
.pac-elc-faq-item--open .pac-elc-faq-item__q {
background: rgba(var(--c-primary-rgb), .06);
}
/* number badge */
.pac-elc-faq-item__num {
width: 36px; height: 36px; border-radius: 10px; flex: none;
background: var(--c-tint-2);
border: 1.5px solid rgba(var(--c-primary-rgb), .22);
display: grid; place-items: center;
font-family: var(--font-head); font-weight: 700;
font-size: 13px; color: var(--c-primary-dark);
transition: background .22s ease, color .22s ease, border-color .22s ease;
flex-shrink: 0;
}
.pac-elc-faq-item--open .pac-elc-faq-item__num,
.pac-elc-faq-item:hover .pac-elc-faq-item__num {
background: var(--c-primary);
color: var(--c-light);
border-color: var(--c-primary);
}
/* question text */
.pac-elc-faq-item__q-text {
flex: 1;
font-family: var(--font-head); font-weight: 600;
font-size: 15.5px; color: var(--c-ink);
transition: color .18s ease;
}
.pac-elc-faq-item:hover .pac-elc-faq-item__q-text,
.pac-elc-faq-item--open .pac-elc-faq-item__q-text { color: var(--c-primary-dark); }
/* chevron */
.pac-elc-faq-item__chevron {
flex: none; color: var(--c-grey);
transition: transform .28s cubic-bezier(.2,.8,.3,1), color .18s ease;
}
.pac-elc-faq-item--open .pac-elc-faq-item__chevron {
transform: rotate(180deg); color: var(--c-primary-dark);
}
/* answer panel */
.pac-elc-faq-item__a {
max-height: 0; overflow: hidden;
transition: max-height .38s cubic-bezier(.2,.8,.3,1);
}
.pac-elc-faq-item--open .pac-elc-faq-item__a { max-height: 400px; }
.pac-elc-faq-item__a-inner {
padding: 0 22px 22px 74px; /* aligns with text, past the num badge */
border-top: 1px solid rgba(var(--c-primary-rgb), .12);
padding-top: 16px;
}
.pac-elc-faq-item__a-inner p {
font-size: 15.5px; line-height: 1.75;
color: var(--c-ink-2); margin: 0;
}
@media (max-width: 1023px) {
.pac-elc-faq__left { padding-right: 0; margin-bottom: 36px; position: static; }
.pac-elc-faq-item__a-inner { padding-left: 22px; }
}
@media (max-width: 639px) {
.pac-elc-faq-item__q { padding: 16px 16px; }
.pac-elc-faq-item__a-inner { padding: 12px 16px 16px; }
}
/* ============================================================
COACHING PROCESS FAQ PAGE (pac-faqp-*)
============================================================ */
/* center the accordion column */
.pac-faqp-wrap {
margin-left: auto;
margin-right: auto;
}
/* ── Accordion item ── */
.pac-faqp__item {
border: 1.5px solid var(--c-line);
border-radius: var(--r-md);
margin-bottom: 10px;
overflow: hidden;
background: var(--c-paper);
transition: box-shadow .22s, border-color .22s;
}
.pac-faqp__item:last-child { margin-bottom: 0; }
.pac-faqp__item:hover { box-shadow: var(--sh-1); }
.pac-faqp__item--open {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),.10), var(--sh-1);
}
/* question button */
.pac-faqp__q {
width: 100%;
display: flex !important;
align-items: center !important;
gap: 14px;
padding: 20px 22px;
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
text-align: left;
font-size: 0;
-webkit-appearance: none;
appearance: none;
transition: background .16s;
}
.pac-faqp__q:hover,
.pac-faqp__item--open .pac-faqp__q { background: var(--c-tint); }
/* number badge */
.pac-faqp__q-num {
display: grid !important;
place-items: center;
flex: none;
min-width: 34px;
height: 26px;
font-family: var(--font-head);
font-weight: 800;
font-size: 12px;
letter-spacing: .05em;
color: var(--c-primary-dark);
background: var(--c-tint-2);
border-radius: var(--r-xs);
transition: background .18s, color .18s;
}
.pac-faqp__item--open .pac-faqp__q-num {
background: var(--c-primary);
color: #fff;
}
/* question text */
.pac-faqp__q-text {
flex: 1;
font-family: var(--font-head);
font-weight: 600;
font-size: 15px !important;
line-height: 1.42;
color: var(--c-ink);
}
/* chevron */
.pac-faqp__chevron {
flex: none;
display: block;
color: var(--c-grey);
transition: transform .28s cubic-bezier(.4,0,.2,1), color .18s;
}
.pac-faqp__item--open .pac-faqp__chevron {
transform: rotate(180deg);
color: var(--c-primary-dark);
}
/* answer panel */
.pac-faqp__a {
max-height: 0;
overflow: hidden;
transition: max-height .36s cubic-bezier(.4,0,.2,1);
}
.pac-faqp__item--open .pac-faqp__a { max-height: 400px; }
.pac-faqp__a-inner {
padding: 4px 22px 22px 70px;
border-top: 1px solid var(--c-line);
}
.pac-faqp__a-inner p {
font-size: 15px !important;
line-height: 1.78;
color: var(--c-ink-2);
margin: 0 !important;
}
/* below-accordion CTA row */
.pac-faqp-cta-row {
margin-top: 32px;
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.pac-faqp-cta-row p {
margin-bottom: 24px !important;
font-size: 16px;
color: var(--c-ink-2);
line-height: 1.72;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.pac-faqp__q { padding: 14px 16px; gap: 10px; }
.pac-faqp__q-num { min-width: 28px; height: 22px; font-size: 10px; }
.pac-faqp__q-text { font-size: 14px !important; }
.pac-faqp__a-inner { padding: 4px 14px 18px 14px; }
.pac-faqp__a-inner p{ font-size: 14px !important; }
}
/* ============================================================
SERVICE AREAS PAGE (pac-sa-*)
============================================================ */
/* ── Intro text column ── */
.pac-sa-intro__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
.pac-sa-intro__text p + p { margin-top: -6px; }
/* ── Who-we-serve 2x2 grid ── */
.pac-sa-who-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
height: 100%;
align-content: center;
}
.pac-sa-who-card {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--c-paper);
border-radius: var(--r-md);
padding: 22px 18px;
border: 1.5px solid var(--c-line);
transition: box-shadow .2s, border-color .2s, transform .2s;
}
.pac-sa-who-card:hover {
box-shadow: var(--sh-1);
border-color: var(--c-primary);
transform: translateY(-2px);
}
.pac-sa-who-card__icon {
flex: none;
width: 40px; height: 40px;
border-radius: var(--r-sm);
background: var(--c-tint-2);
display: grid; place-items: center;
color: var(--c-primary-dark);
transition: background .2s;
}
.pac-sa-who-card:hover .pac-sa-who-card__icon { background: var(--c-tint-3); }
.pac-sa-who-card__content h3 {
font-size: 15px !important;
font-weight: 700;
color: var(--c-ink);
margin: 0 0 5px !important;
line-height: 1.3;
}
.pac-sa-who-card__content p {
font-size: 13.5px !important;
line-height: 1.55;
color: var(--c-ink-2);
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1023px) {
.pac-sa-who-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.pac-sa-who-grid { grid-template-columns: 1fr; }
.pac-sa-who-card { padding: 16px 14px; }
}
/* ============================================================
VANCOUVER PAGE (pac-van-*)
============================================================ */
/* ── Intro ── */
.pac-van-intro__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
.pac-van-intro__text p + p { margin-top: -4px; }
/* ── Why Choose Us ── */
.pac-van-why__left {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.pac-van-why__left p {
margin: 0 !important;
}
/* feature list */
.pac-van-feat-list {
list-style: none;
margin: 0 !important;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.pac-van-feat-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--c-line);
}
.pac-van-feat-item:first-child { border-top: 1px solid var(--c-line); }
.pac-van-feat-item__ic {
flex: none;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--c-primary);
display: grid; place-items: center;
color: #fff;
margin-top: 2px;
}
.pac-van-feat-item p {
font-size: 15.5px !important;
line-height: 1.65;
color: var(--c-ink-2);
margin: 0 !important;
}
/* ── Responsive ── */
@media (max-width: 1023px) {
.pac-van-why__left { margin-bottom: 32px; }
}
@media (max-width: 640px) {
.pac-van-feat-item { gap: 12px; padding: 14px 0; }
.pac-van-feat-item__ic { width: 22px; height: 22px; }
.pac-van-feat-item p { font-size: 14.5px !important; }
}
/* ============================================================
TEXT CTA LINK (pac-cta-link) — reusable, underlined arrow link
============================================================ */
.pac-cta-link {
display: inline-flex;
max-width: max-content;
align-items: center;
gap: 12px;
font-family: var(--font-head);
font-weight: 600;
font-size: 15.5px;
line-height: 1.35;
letter-spacing: .1px;
color: var(--c-primary-dark);
text-decoration: none;
transition: color .25s ease;
}
/* label with animated wipe underline */
.pac-cta-link .pac-cta-text {
position: relative;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px;
padding-bottom: 3px;
transition: background-size .3s cubic-bezier(.4,0,.2,1);
}
.pac-cta-link:hover { color: var(--c-accent); }
.pac-cta-link:hover .pac-cta-text { background-size: 100% 2px; }
/* circular arrow chip — removed for site-wide no-arrow consistency */
.pac-cta-link .pac-arr {
display: none;
}
.pac-cta-link:hover .pac-arr { display: none; }
/* on-dark variant */
.is-light-text .pac-cta-link,
.pac-cta-link--ondark { color: #fff; }
.is-light-text .pac-cta-link:hover,
.pac-cta-link--ondark:hover { color: #fff; }
/* ============================================================
BLOG LISTING PAGE (new-blog-page-type)
============================================================ */
.is-wrapper .new-blog-page-type { background: var(--c-paper); }
.new-blog-page-type .main-blog-widget { padding-top: var(--space-section); }
/* ---- Search bar ---- */
.new-blog-page-type .blog-search-container { margin-bottom: 34px; margin-top: 34px; }
.new-blog-page-type .blog-search-container .position-relative { position: relative; max-width: 560px; }
.new-blog-page-type #search-input-blog {
width: 100%;
height: 56px;
margin: 0;
padding: 0 20px 0 52px;
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--c-ink);
background: var(--c-tint);
border: 1.5px solid var(--c-line);
border-radius: var(--r-pill);
box-shadow: none;
-webkit-appearance: none;
appearance: none;
transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.new-blog-page-type #search-input-blog::placeholder { color: var(--c-grey); }
.new-blog-page-type #search-input-blog:focus {
outline: 0;
background: var(--c-paper);
border-color: var(--c-primary);
box-shadow: var(--sh-glow);
}
.new-blog-page-type .blog-search-button {
position: absolute;
top: 50%;
left: 18px;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
line-height: 0;
}
.new-blog-page-type .blog-search-button svg { width: 18px; height: 18px; }
.new-blog-page-type .blog-search-button svg path { fill: var(--c-grey); transition: fill .25s ease; }
.new-blog-page-type .blog-search-button:hover svg path { fill: var(--c-primary); }
/* ---- Section heading inside blog (Categories) ---- */
.new-blog-page-type .filter-h2 {
font-family: var(--font-head);
font-size: 19px;
font-weight: 600;
color: var(--c-ink);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--c-line);
position: relative;
}
.new-blog-page-type .filter-h2::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 46px;
height: 2px;
background: var(--c-primary);
}
/* ---- Category pills ---- */
.new-blog-page-type .ps-blog-category {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.new-blog-page-type .ps-blog-category li { margin: 0; display: inline-block; }
.new-blog-page-type .ps-blog-category li a {
display: inline-block;
padding: 7px 16px;
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 500;
line-height: 1.2;
color: var(--c-ink-2);
background: var(--c-tint);
border: 1.5px solid var(--c-line);
border-radius: var(--r-pill);
text-decoration: none;
transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}
.new-blog-page-type .ps-blog-category li a:hover {
color: var(--c-light);
background: var(--c-primary);
border-color: var(--c-primary);
transform: translateY(-2px);
}
.new-blog-page-type .ps-blog-category li.active a,
.new-blog-page-type .ps-blog-category li a.all-blogs {
color: var(--c-light);
background: var(--c-accent);
border-color: var(--c-accent);
}
.new-blog-page-type .ps-blog-category li.active a:hover,
.new-blog-page-type .ps-blog-category li a.all-blogs:hover {
background: var(--c-primary);
border-color: var(--c-primary);
}
/* mobile categories block spacing */
.new-blog-page-type .articles-filter-container.hide-for-large { margin-bottom: 34px; }
/* ---- Articles column ---- */
.new-blog-page-type .blog-ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.new-blog-page-type .blog-li { margin: 0; }
.new-blog-page-type .blog-li .row,
.new-blog-page-type .blog-li .blog-article {
display: block;
width: 100%;
margin: 0;
padding: 0;
max-width: none;
}
/* card surface */
.new-blog-page-type .blog-article {
background: var(--c-paper);
border: 1.5px solid var(--c-line);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.new-blog-page-type .blog-li:hover .blog-article {
transform: translateY(-4px);
box-shadow: var(--sh-2);
border-color: rgba(var(--c-primary-rgb), .45);
}
/* article image */
.new-blog-page-type .ps-article-img {
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 8;
background: var(--c-tint);
}
.new-blog-page-type .ps-article-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.new-blog-page-type .blog-li:hover .ps-article-img img { transform: scale(1.05); }
/* inner padding wrapper — image + text share the same card,
so pad the text nodes via a common inset */
.new-blog-page-type .article-category,
.new-blog-page-type .article-title,
.new-blog-page-type .article-body,
.new-blog-page-type .blog-article > p.pb-0 { padding-left: 28px; padding-right: 28px; }
.new-blog-page-type .article-category { padding-top: 26px; }
.new-blog-page-type .blog-article > p.pb-0 { padding-bottom: 28px; }
/* categories line */
.new-blog-page-type .article-category {
margin: 0 0 12px;
font-family: var(--font-body);
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--c-grey);
}
.new-blog-page-type .article-category .categories_text {
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-primary-dark);
}
.new-blog-page-type .article-category a {
color: var(--c-ink-2);
text-decoration: none;
text-transform: capitalize;
transition: color .2s ease;
}
.new-blog-page-type .article-category a:hover { color: var(--c-primary); }
/* title */
.new-blog-page-type .article-title {
margin: 0 0 12px;
font-family: var(--font-head);
font-size: clamp(21px, 2.2vw, 27px);
font-weight: 600;
line-height: 1.32;
}
.new-blog-page-type .article-title a {
color: var(--c-ink);
text-decoration: none;
background-image: linear-gradient(var(--c-primary), var(--c-primary));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px;
transition: color .25s ease, background-size .35s ease;
}
.new-blog-page-type .article-title a:hover {
color: var(--c-primary-dark);
background-size: 100% 2px;
}
/* excerpt */
.new-blog-page-type .article-body,
.new-blog-page-type .article-body p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.7;
color: var(--c-ink-2);
}
.new-blog-page-type .article-body { margin: 0 0 18px; }
.new-blog-page-type .article-body p { margin: 0; }
/* read more */
.new-blog-page-type .blog-article > p.pb-0 { margin: 0; }
.new-blog-page-type .blog-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-primary-dark);
text-decoration: none;
transition: color .25s ease, gap .25s ease;
}
.new-blog-page-type .blog-read-more::after {
content: none;
display: none;
}
.new-blog-page-type .blog-read-more:hover {
color: var(--c-accent);
}
.new-blog-page-type .blog-read-more:hover::after { content: none; }
/* ---- Sidebar ---- */
.new-blog-page-type .blog-sidebar { margin: 0; }
.new-blog-page-type .blog-sidebar .articles-filter-container {
background: var(--c-tint);
border: 1.5px solid var(--c-line);
border-radius: var(--r-md);
padding: 26px 24px;
}
@media (min-width: 1025px) {
.new-blog-page-type .blog-sidebar .articles-filter-container {
position: sticky;
top: 24px;
}
}
/* ---- Pagination ---- */
.new-blog-page-type .ps-pagination-bar {
margin-top: 36px;
text-align: center;
}
.new-blog-page-type .ps-pagination-bar p { margin: 0; }
.new-blog-page-type .ps-pagination-bar span,
.new-blog-page-type .ps-pagination-bar a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
margin: 0 4px;
padding: 0 12px;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-ink-2);
background: var(--c-tint);
border: 1.5px solid var(--c-line);
border-radius: var(--r-sm);
text-decoration: none;
transition: color .22s ease, background .22s ease, border-color .22s ease;
}
.new-blog-page-type .ps-pagination-bar a:hover {
color: var(--c-light);
background: var(--c-primary);
border-color: var(--c-primary);
}
.new-blog-page-type .ps-pagination-bar .current {
color: var(--c-light);
background: var(--c-accent);
border-color: var(--c-accent);
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.new-blog-page-type .blog-articles { margin-bottom: 34px; }
}
@media (max-width: 640px) {
.new-blog-page-type #search-input-blog { height: 50px; padding-left: 46px; }
.new-blog-page-type .article-category,
.new-blog-page-type .article-title,
.new-blog-page-type .article-body,
.new-blog-page-type .blog-article > p.pb-0 { padding-left: 20px; padding-right: 20px; }
.new-blog-page-type .article-category { padding-top: 22px; }
.new-blog-page-type .blog-article > p.pb-0 { padding-bottom: 22px; }
}
/* ============================================================
SINGLE ARTICLE PAGE (article-page-type)
scoped to .article-page-type so it overrides the listing
.article-body / .article-title rules where they overlap
============================================================ */
.is-wrapper .article-page-type { background: var(--c-paper); }
/* ---- Post title (hero heading) ---- */
.article-page-type .blog-article-content > .article-title {
margin: 0 0 26px;
padding: 0;
font-family: var(--font-head);
font-size: clamp(30px, 4vw, 50px);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--c-ink);
text-wrap: balance;
}
/* ---- Hero media ---- */
.article-page-type .ps-article-img {
margin: 0;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--c-tint);
box-shadow: var(--sh-1);
}
.article-page-type .ps-article-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* ---- Author / meta block ---- */
.article-page-type .blog-author {
margin: 0;
padding: 26px 28px;
background: var(--c-tint);
border: 1.5px solid var(--c-line);
border-left: 4px solid var(--c-primary);
border-radius: var(--r-md);
}
.article-page-type .blog-author .lab-ul {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: 1.7;
color: var(--c-ink-2);
}
.article-page-type .blog-author .lab-ul > li { margin: 0 0 6px; }
.article-page-type .blog-author .author_name {
display: block;
font-family: var(--font-head);
font-size: 17px;
font-weight: 600;
color: var(--c-ink);
}
.article-page-type .blog-author .pubdate {
display: inline-block;
margin-bottom: 6px;
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--c-grey);
}
/* category links in the meta block */
.article-page-type .blog-author .lab-ul a {
color: var(--c-primary-dark);
text-decoration: none;
text-transform: capitalize;
font-weight: 500;
transition: color .2s ease;
}
.article-page-type .blog-author .lab-ul a:hover { color: var(--c-accent); }
/* ---- Long-form body (rte) ---- */
.article-page-type .article-body.rte {
margin: 44px 0 0;
max-width: 100%;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.8;
color: var(--c-ink-2);
padding: 0;
}
.article-page-type .article-body.rte > p {
margin: 0 0 22px;
font-size: 18px;
line-height: 1.8;
color: var(--c-ink-2);
}
/* lead paragraph */
.article-page-type .article-body.rte > p:first-of-type {
font-size: 21px;
line-height: 1.7;
color: var(--c-ink);
}
.article-page-type .article-body.rte h2 {
margin: 46px 0 16px;
font-family: var(--font-head);
font-size: clamp(25px, 2.8vw, 32px);
font-weight: 700;
line-height: 1.3;
color: var(--c-ink);
letter-spacing: -0.01em;
}
.article-page-type .article-body.rte h3 {
margin: 36px 0 14px;
font-family: var(--font-head);
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 600;
line-height: 1.35;
color: var(--c-ink);
}
.article-page-type .article-body.rte h2 + p,
.article-page-type .article-body.rte h3 + p { margin-top: 0; }
/* body links */
.article-page-type .article-body.rte a {
color: var(--c-primary-dark);
font-weight: 600;
text-decoration: none;
background-image: linear-gradient(var(--c-primary), var(--c-primary));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 1.5px;
transition: color .2s ease, background-size .25s ease;
}
.article-page-type .article-body.rte a:hover {
color: var(--c-accent);
background-size: 100% 2px;
}
.article-page-type .article-body.rte strong { color: var(--c-ink); font-weight: 700; }
/* lists */
.article-page-type .article-body.rte ul,
.article-page-type .article-body.rte ol {
margin: 0 0 24px;
padding: 22px 26px 22px 26px;
background: var(--c-tint);
border-radius: var(--r-md);
list-style: none;
}
.article-page-type .article-body.rte ol { counter-reset: pac-ol; }
.article-page-type .article-body.rte li {
position: relative;
margin: 0 0 12px;
padding-left: 30px;
font-size: 17px;
line-height: 1.7;
color: var(--c-ink-2);
}
.article-page-type .article-body.rte li:last-child { margin-bottom: 0; }
/* bullet marker */
.article-page-type .article-body.rte ul li::before {
content: "";
position: absolute;
left: 4px;
top: 11px;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--c-primary);
transform: rotate(45deg);
}
/* numbered marker */
.article-page-type .article-body.rte ol li {
counter-increment: pac-ol;
padding-left: 38px;
}
.article-page-type .article-body.rte ol li::before {
content: counter(pac-ol);
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
color: var(--c-light);
background: var(--c-primary);
border-radius: 50%;
}
.article-page-type .article-body.rte li strong { color: var(--c-ink); }
/* ---- Recent Posts sidebar ---- */
.article-page-type .blog-sidebar { margin-top: 30px; }
.article-page-type .blog-sidebar-widget {
margin-top: 24px;
padding-top: 40px;
border-top: 1.5px solid var(--c-line);
}
.article-page-type .blog-sidebar-h2 {
margin: 0 0 26px;
font-family: var(--font-head);
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--c-ink);
}
.article-page-type .ps-blog-recent-posts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.article-page-type .ps-blog-recent-posts > li { margin: 0; }
.article-page-type .ps-blog-recent-posts .row,
.article-page-type .ps-blog-recent-posts .blog-article {
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.article-page-type .ps-blog-recent-posts .blog-article {
height: 100%;
background: var(--c-paper);
border: 1.5px solid var(--c-line);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.article-page-type .ps-blog-recent-posts > li:hover .blog-article {
transform: translateY(-4px);
box-shadow: var(--sh-2);
border-color: rgba(var(--c-primary-rgb), .45);
}
.article-page-type .ps-blog-recent-posts .ps-article-img {
margin: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
aspect-ratio: 16 / 8;
}
.article-page-type .ps-blog-recent-posts .ps-article-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.article-page-type .ps-blog-recent-posts > li:hover .ps-article-img img { transform: scale(1.05); }
/* inset text */
.article-page-type .ps-blog-recent-posts .article-category,
.article-page-type .ps-blog-recent-posts .article-title,
.article-page-type .ps-blog-recent-posts .item-body,
.article-page-type .ps-blog-recent-posts .blog-article > p.pb-0 { padding-left: 24px; padding-right: 24px; }
.article-page-type .ps-blog-recent-posts .article-category { padding-top: 24px; }
.article-page-type .ps-blog-recent-posts .blog-article > p.pb-0 { padding-bottom: 24px; }
/* category line */
.article-page-type .ps-blog-recent-posts .article-category {
margin: 0 0 10px;
font-family: var(--font-body);
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--c-grey);
}
.article-page-type .ps-blog-recent-posts .article-category .categories_text {
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-primary-dark);
}
.article-page-type .ps-blog-recent-posts .article-category a {
color: var(--c-ink-2);
text-decoration: none;
text-transform: capitalize;
transition: color .2s ease;
}
.article-page-type .ps-blog-recent-posts .article-category a:hover { color: var(--c-primary); }
/* title */
.article-page-type .ps-blog-recent-posts .article-title {
margin: 0 0 12px;
font-family: var(--font-head);
font-size: clamp(19px, 2vw, 23px);
font-weight: 600;
line-height: 1.34;
}
.article-page-type .ps-blog-recent-posts .article-title a {
color: var(--c-ink);
text-decoration: none;
background-image: linear-gradient(var(--c-primary), var(--c-primary));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px;
transition: color .25s ease, background-size .35s ease;
}
.article-page-type .ps-blog-recent-posts .article-title a:hover {
color: var(--c-primary-dark);
background-size: 100% 2px;
}
/* excerpt */
.article-page-type .ps-blog-recent-posts .item-body,
.article-page-type .ps-blog-recent-posts .item-body p {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.7;
color: var(--c-ink-2);
}
.article-page-type .ps-blog-recent-posts .item-body { margin: 0 0 18px; }
/* read more */
.article-page-type .ps-blog-recent-posts .blog-article > p.pb-0 { margin: 0; }
.article-page-type .ps-blog-recent-posts .blog-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-primary-dark);
text-decoration: none;
transition: color .25s ease, gap .25s ease;
}
.article-page-type .ps-blog-recent-posts .blog-read-more::after {
content: none;
display: none;
}
.article-page-type .ps-blog-recent-posts .blog-read-more:hover { color: var(--c-accent); }
.article-page-type .ps-blog-recent-posts .blog-read-more:hover::after { content: none; }
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.article-page-type .blog-author { margin-top: 20px; }
}
@media (max-width: 768px) {
.article-page-type .ps-blog-recent-posts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.article-page-type .article-body.rte { font-size: 17px; }
.article-page-type .article-body.rte > p,
.article-page-type .article-body.rte > p:first-of-type { font-size: 17px; }
.article-page-type .article-body.rte ul,
.article-page-type .article-body.rte ol { padding: 18px 18px 18px 20px; }
.article-page-type .ps-blog-recent-posts .article-category,
.article-page-type .ps-blog-recent-posts .article-title,
.article-page-type .ps-blog-recent-posts .item-body,
.article-page-type .ps-blog-recent-posts .blog-article > p.pb-0 { padding-left: 20px; padding-right: 20px; }
}
/* ============================================================
CONTACT PAGE
============================================================ */
/* ---- Green hero band (no banner image) ---- */
.is-wrapper .pac-greenhero {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
position: relative;
overflow: hidden;
}
/* soft decorative glow */
.pac-greenhero::before {
content: "";
position: absolute;
top: -30%;
right: -10%;
width: 520px;
height: 520px;
border-radius: 50%;
background: rgba(var(--c-white-rgb), .10);
pointer-events: none;
}
.pac-greenhero::after {
content: "";
position: absolute;
bottom: -40%;
left: -8%;
width: 420px;
height: 420px;
border-radius: 50%;
background: rgba(var(--c-black-rgb), .06);
pointer-events: none;
}
.pac-greenhero__inner {
position: relative;
z-index: 1;
max-width: 760px;
padding: 22px 0;
}
.pac-greenhero__inner .pac-eyebrow { margin-bottom: 16px; }
.pac-greenhero__inner h1 {
margin: 0 0 18px;
color: var(--c-light);
}
.pac-greenhero__inner p {
margin: 0;
font-family: var(--font-body);
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.7;
color: rgba(var(--c-white-rgb), .92);
max-width: 640px;
}
.is-wrapper .pac-contact {
background:
radial-gradient(circle at 85% 12%, rgba(var(--c-primary-rgb), .10), transparent 42%),
radial-gradient(circle at 8% 90%, rgba(var(--c-accent-rgb), .08), transparent 40%),
var(--c-tint);
}
/* ---- Contact information ---- */
.pac-contact__intro { display: flex; flex-direction: column; }
.pac-contact__intro .pac-eyebrow { margin-bottom: 14px; }
.pac-contact__intro h2 { margin: 0 0 16px; }
.pac-contact__intro > p {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.75;
color: var(--c-ink-2);
}
.pac-contact__formslot:empty { display: none; }
.pac-contact__formslot { margin-top: 26px; }
/* ---- Top heading row (live DOM: first grid-x > cell large-12 holding
the "Send A Message" h2 + intro p). Style it as a centered, premium
section header so the page leads with intent. ---- */
.pac-contact > .is-boxes .grid-x:first-child .cell.large-12 {
text-align: center;
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-bottom: 18px;
}
.pac-contact > .is-boxes .grid-x:first-child .cell.large-12 h2 {
font-family: var(--font-head);
font-size: var(--fs-h2);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--c-ink);
margin: 0 0 16px;
text-wrap: balance;
position: relative;
padding-bottom: 22px;
}
/* hairline accent under the heading */
.pac-contact > .is-boxes .grid-x:first-child .cell.large-12 h2::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 56px;
height: 3px;
border-radius: 500px;
background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.pac-contact > .is-boxes .grid-x:first-child .cell.large-12 p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.75;
color: var(--c-ink-2);
margin: 0;
text-wrap: pretty;
}
/* detail cards — premium editorial: tinted surface, filled glow icon,
accent spine, faint index numeral (CSS counter, no HTML change) */
.pac-contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
counter-reset: paccard;
}
.pac-contact-item {
counter-increment: paccard;
position: relative;
display: flex;
align-items: center;
gap: 22px;
margin: 0;
padding: 30px 34px 30px 36px;
background:
linear-gradient(135deg, var(--c-paper) 0%, var(--c-paper) 55%, var(--c-tint) 100%);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
box-shadow:
0 1px 2px rgba(var(--c-black-rgb), .04),
0 18px 40px -28px rgba(var(--c-accent-rgb), .35);
overflow: hidden;
isolation: isolate;
transition:
transform .45s cubic-bezier(.2,.7,.2,1),
box-shadow .45s ease,
border-color .45s ease;
}
/* always-on accent spine (left) that saturates + grows on hover */
.pac-contact-item::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 4px;
border-radius: 0 4px 4px 0;
background: linear-gradient(var(--c-primary), var(--c-accent));
opacity: .35;
transition:
opacity .45s ease,
top .45s cubic-bezier(.2,.7,.2,1),
bottom .45s cubic-bezier(.2,.7,.2,1),
width .45s ease;
}
/* faint oversized index numeral, watermark style */
.pac-contact-item::after {
content: "0" counter(paccard);
position: absolute;
z-index: -1;
right: 22px;
bottom: 6px;
font-family: var(--font-head);
font-size: 78px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(var(--c-primary-rgb), .07);
transition: color .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
/* soft corner wash that fades in */
.pac-contact-item__glow {
position: absolute;
z-index: -1;
top: -45%;
right: -20%;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--c-primary-rgb), .18), transparent 70%);
opacity: 0;
transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.pac-contact-item:hover {
transform: translateY(-5px);
box-shadow:
0 2px 4px rgba(var(--c-black-rgb), .05),
0 30px 60px -30px rgba(var(--c-accent-rgb), .55);
border-color: rgba(var(--c-primary-rgb), .4);
}
.pac-contact-item:hover::before {
opacity: 1;
top: 0;
bottom: 0;
width: 5px;
}
.pac-contact-item:hover::after {
color: rgba(var(--c-primary-rgb), .12);
transform: translateY(-2px);
}
.pac-contact-item:hover .pac-contact-item__glow {
opacity: 1;
transform: translate(-16px, 18px) scale(1.12);
}
/* filled gradient icon chip with a soft glow ring (premium by default) */
.pac-contact-item__ic {
position: relative;
flex-shrink: 0;
width: 62px;
height: 62px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-light);
background: linear-gradient(140deg, var(--c-primary), var(--c-accent));
border: none;
border-radius: 18px;
box-shadow:
0 10px 22px -8px rgba(var(--c-primary-dark-rgb), .55),
inset 0 1px 0 rgba(var(--c-white-rgb), .35);
transition:
transform .45s cubic-bezier(.2,.7,.2,1),
box-shadow .45s ease,
border-radius .45s cubic-bezier(.2,.7,.2,1);
}
/* faint outer ring around the chip */
.pac-contact-item__ic::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 22px;
border: 1.5px solid rgba(var(--c-primary-rgb), .22);
opacity: 0;
transform: scale(.9);
transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.pac-contact-item__ic svg {
position: relative;
z-index: 1;
width: 22px;
height: 22px;
}
.pac-contact-item:hover .pac-contact-item__ic {
transform: translateY(-2px) rotate(-4deg) scale(1.06);
border-radius: 50%;
box-shadow:
0 16px 30px -8px rgba(var(--c-primary-dark-rgb), .6),
inset 0 1px 0 rgba(var(--c-white-rgb), .4);
}
.pac-contact-item:hover .pac-contact-item__ic::before {
opacity: 1;
transform: scale(1);
border-radius: 50%;
}
.pac-contact-item__body { flex: 1; min-width: 0; }
/* label with a small leading tick */
.pac-contact-item__label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-primary-dark);
}
.pac-contact-item__label::before {
content: "";
width: 16px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
flex-shrink: 0;
}
.pac-contact-item__body p {
margin: 0;
font-family: var(--font-head);
font-size: 19px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--c-ink);
word-break: break-word;
}
.pac-contact-item__body a {
color: var(--c-ink);
text-decoration: none;
background-image: linear-gradient(var(--c-primary), var(--c-primary));
background-size: 0% 1.5px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: color .25s ease, background-size .35s cubic-bezier(.2,.7,.2,1);
}
.pac-contact-item__body a:hover {
color: var(--c-primary-dark);
background-size: 100% 1.5px;
}
/* ---- Map — premium framed + floating glass card ---- */
.is-wrapper .pac-map-sec {
background:
radial-gradient(circle at 12% 15%, rgba(var(--c-primary-rgb), .10), transparent 45%),
var(--c-tint);
}
.pac-map-wrap {
position: relative;
padding: 10px;
background: linear-gradient(140deg, rgba(var(--c-primary-rgb), .35), rgba(var(--c-accent-rgb), .18));
border-radius: calc(var(--r-xl) + 10px);
box-shadow: var(--sh-glow), var(--sh-3);
}
.pac-map {
position: relative;
width: 100%;
line-height: 0;
border-radius: var(--r-xl);
overflow: hidden;
border: 1.5px solid rgba(var(--c-white-rgb), .6);
}
.pac-map iframe {
display: block;
width: 100%;
height: 520px;
border: 0;
filter: saturate(1.05);
}
/* floating glass card */
.pac-map-card {
position: absolute;
z-index: 2;
left: 44px;
bottom: 44px;
width: min(340px, calc(100% - 88px));
padding: 28px 30px;
background: linear-gradient(155deg, rgba(var(--c-white-rgb), .82), rgba(var(--c-white-rgb), .62));
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1.5px solid rgba(var(--c-white-rgb), .8);
border-radius: var(--r-lg);
box-shadow: 0 24px 60px rgba(var(--c-black-rgb), .22);
}
.pac-map-card__ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
color: var(--c-light);
background: linear-gradient(140deg, var(--c-primary), var(--c-accent));
border-radius: var(--r-md);
box-shadow: 0 8px 20px rgba(var(--c-primary-rgb), .4);
}
.pac-map-card__label {
display: block;
margin-bottom: 8px;
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-primary-dark);
}
.pac-map-card__addr {
margin: 0 0 16px;
font-family: var(--font-head);
font-size: 19px;
font-weight: 600;
line-height: 1.45;
color: var(--c-ink);
}
.pac-map-card__link {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-primary-dark);
text-decoration: none;
transition: color .25s ease, gap .25s ease;
}
.pac-map-card__link .pac-arr { transition: transform .25s ease; }
.pac-map-card__link:hover { color: var(--c-accent); gap: 12px; }
.pac-map-card__link:hover .pac-arr { transform: translateX(3px); }
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.pac-contact__cards { margin-top: 30px; }
}
@media (max-width: 768px) {
.pac-map-card {
position: static;
width: 100%;
margin-top: 12px;
box-shadow: var(--sh-1);
}
.pac-map-wrap { padding: 8px; }
}
@media (max-width: 640px) {
.pac-contact-item { padding: 24px 24px 24px 26px; gap: 16px; }
.pac-contact-item__ic { width: 54px; height: 54px; border-radius: 16px; }
.pac-contact-item__ic svg { width: 20px; height: 20px; }
.pac-contact-item::after { font-size: 60px; right: 16px; }
.pac-contact-item__body p { font-size: 17px; }
.pac-map iframe { height: 360px; }
.pac-map-card { padding: 22px; }
}
/* ============================================================
HEADER · SIDENAV · FOOTER (luxe)
Appended — uses the canonical :root tokens above.
No @import / :root here on purpose: brand values stay single-source.
============================================================ */
/* === HEADER LUXE === */
/* Targets the existing new-header-6 markup. No HTML changes required. */
/* --- Outer header shell --- */
header#header.new-header-6 {
background: var(--c-tint);
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-tint);
box-shadow: 0 6px 28px rgba(var(--c-black-rgb), 0.08);
border-bottom: 1px solid rgba(var(--c-black-rgb), 0.08);
}
/* Hairline accent at top edge — green band */
header#header.new-header-6::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
var(--c-accent) 0%,
var(--c-primary) 50%,
var(--c-accent) 100%);
opacity: 0.85;
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;
}
header#header.new-header-6 .text-logo {
font-family: var(--font-head);
font-style: italic;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-primary-dark);
line-height: 1;
background: linear-gradient(135deg,
#FFFFFF 0%,
var(--c-primary) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
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) {
/* --- Contact section (Email + Phone + Button) --- */
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;
}
/* Email and phone contact blocks */
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-primary-rgb), 0.06);
transform: translateY(-1px);
}
/* Icon circle */
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-2);
color: var(--c-primary);
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-primary);
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;
}
/* Text part */
header#header.new-header-6 .menu a.head-contact-links .text-part {
text-align: left;
line-height: 1.2;
}
header#header.new-header-6 .menu a.head-contact-links .text-part .heading {
font-family: var(--font-head);
font-style: italic;
font-size: 12px;
color: var(--c-primary);
padding-bottom: 3px !important;
font-weight: 500;
letter-spacing: 0.02em;
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: 500;
color: var(--c-ink);
line-height: 1.2;
letter-spacing: 0.01em;
}
/* Divider between contact blocks */
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 --- */
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: 600 !important;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 14px 26px !important;
border-radius: 4px !important;
border: none !important;
box-shadow: 0 4px 16px rgba(var(--c-primary-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: none;
display: none;
}
header#header.new-header-6 .contact-section.menu .button:hover {
background: var(--btn-bg-hover) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--c-primary-dark-rgb), 0.40) !important;
}
header#header.new-header-6 .contact-section.menu .button:hover::after {
content: none;
}
/* --- Menu container (nav bar) --- */
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: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-ink);
padding: 16px 18px !important;
position: relative;
transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Animated underline indicator — uses ::before so it doesn't conflict
with the chevron arrow ::after used on parent items (Services). */
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-primary);
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:hover > a:not(.button)::before,
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);
}
/* Active / hover link color — override the existing .new-header rule
that sets light text on active span, which is invisible on a light
header. Use primary green for clear visibility. */
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-primary);
background: transparent !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-primary);
}
/* Submenu chevron — uses ::after (separate from underline ::before).
Vertical centering via margin-top (not transform) so rotate doesn't
conflict with translate. Every property forced with !important to
win against Foundation base + theme rules. */
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: 8px !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;
}
/* Give parent items extra right padding so chevron doesn't crowd the text */
header#header.new-header-6 .dropdown.menu.level-1 > li.is-dropdown-submenu-parent > a:not(.button) {
padding-right: 32px !important;
}
/* Chevron rotates up + shifts to primary green on hover/active */
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 */
header#header.new-header-6 .dropdown.menu li ul.submenu {
background: var(--c-ink) !important;
min-width: 220px;
padding: 10px 0 !important;
border-radius: 6px !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-primary) !important;
background: rgba(var(--c-white-rgb), 0.06) !important;
padding-left: 28px !important;
}
/* Active submenu item — current page indicator inside the dropdown */
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-primary) !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-primary) !important;
}
/* Small dot indicator on the left of active submenu item */
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-primary);
pointer-events: none;
}
}
/* === MOBILE / TABLET (1023.5px and below) === */
@media screen and (max-width: 63.9375em) {
header#header.new-header-6 {
background: var(--c-tint);
}
header#header.new-header-6 .custom-grid-container {
padding-top: 14px !important;
padding-bottom: 14px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Mobile header row — relative parent so hamburger can absolute-position */
header#header.new-header-6 .custom-grid-container {
position: relative;
}
/* Logo — centered on mobile, takes full width so true page-center */
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 button — absolute on right, vertically centered */
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-primary);
border-color: var(--c-primary);
}
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;
}
/* Mobile bottom CTA strip — contains TWO .mobile-contact-button-section
siblings: first holds the phone link (.head-contact-links), second
holds the "Book a session" .button. Each gets distinct treatment. */
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: transparent;
border-top: 1px solid rgba(var(--c-black-rgb), 0.08);
}
/* === Phone CTA row (first .mobile-contact-button-section) === */
/* Detected by presence of .head-contact-links inside */
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-tint);
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-primary-rgb), 0.06);
}
/* Icon circle on phone row */
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-2);
color: var(--c-primary);
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;
}
/* Text block on phone row */
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-head);
font-style: italic;
font-size: 11px;
color: var(--c-primary);
padding-bottom: 2px !important;
font-weight: 500;
letter-spacing: 0.02em;
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: 500;
color: var(--c-ink);
line-height: 1.2;
letter-spacing: 0.01em;
}
/* === Book a session row (second .mobile-contact-button-section) === */
/* Detected by presence of .button inside.
Arrow uses ::after (not background-image) so it sits adjacent to
the text via flex gap — keeps text+arrow visually paired. */
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: 600 !important;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 18px 24px !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
width: 100%;
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);
}
/* Arrow next to text */
header#header.new-header-6 .mobile-contact-button-section .button::after {
content: none;
display: none;
}
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;
}
header#header.new-header-6 .mobile-contact-button-section .button:hover::after,
header#header.new-header-6 .mobile-contact-button-section .button:focus::after {
content: none;
}
}
/* === SMALL MOBILE (640px and below) — refinements === */
@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;
}
}
/* === Reduced motion === */
@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 LUXE — Mobile off-canvas drawer === */
/* Matches the desktop navigation aesthetic: uppercase tracked Inter,
ink default, primary-green hover/active, animated left-edge accent
bar, accordion chevron on parent items. */
aside.sidenav {
background: var(--c-tint) !important;
box-shadow: -8px 0 32px rgba(var(--c-black-rgb), 0.14);
padding: 0 !important;
}
/* Subtle top accent strip — premium drawer feel */
aside.sidenav::before {
content: "";
display: block;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--c-primary) 30%,
var(--c-accent) 50%,
var(--c-primary) 70%,
transparent 100%);
}
/* Top eyebrow — small brand cue inside the drawer */
aside.sidenav .menu.accordion-menu {
background: transparent !important;
margin: 0 !important;
padding: 0 0 !important;
border: none !important;
}
/* Top-level list items — clean separators between items */
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;
}
/* Top-level link styling — matches desktop nav */
aside.sidenav .menu.accordion-menu > li > a:not(.button) {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !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);
}
/* Top-level link text (span inside) — inherit color */
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 (only on top-level items) */
aside.sidenav .menu.accordion-menu > li > a:not(.button)::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 20px;
background: var(--c-primary);
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;
}
/* Hover / active / current-page states */
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-primary) !important;
background: rgba(var(--c-primary-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-primary) !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 for parent items (Services) */
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;
}
/* Chevron rotates + turns primary green on hover / when expanded */
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;
}
/* === Submenu (nested) styling === */
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;
}
/* Submenu links — refined, less prominent than top-level */
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);
}
/* Reset the padding-left-1 utility on submenu spans */
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-primary) !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-primary) !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
aside.sidenav,
aside.sidenav *,
aside.sidenav *::before,
aside.sidenav *::after {
transition: none !important;
animation: none !important;
}
}
/* ===========================================================
FOOTER LUXE
Charcoal background, Poppins column headings in soft light-green,
primary-green underline accents, white body text, hover micro-interactions,
circular social icons, premium contact section.
=========================================================== */
#footer {
background: var(--c-ink) !important;
color: rgba(var(--c-white-rgb), 0.82);
position: relative;
padding: 0 !important;
overflow: hidden;
}
/* Top gradient hairline accent — premium divider from page content */
#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 background texture — radial gradient for depth */
#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-primary-rgb), 0.06) 0%,
transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Internal hairlines — make them thin white-tinted lines */
#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;
}
/* Main footer content grid */
#footer .footer2 {
padding: 64px 0 36px !important;
position: relative;
z-index: 1;
}
#footer .grid-x.footer2 > .cell {
margin-bottom: 32px;
}
/* Reset Foundation's border-bottom-small (we control borders) */
#footer .border-bottom-small {
border-bottom: none !important;
}
/* === Column containers === */
#footer .column-container {
text-align: left;
padding: 0 12px;
}
/* === Column headings (h4) — Poppins, soft light-green === */
#footer h4 {
font-family: var(--font-head);
font-style: italic;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--c-tint-3);
margin: 0 0 22px 0 !important;
padding-bottom: 14px;
position: relative;
line-height: 1.2;
}
/* Green hairline under each heading */
#footer h4::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 1.5px;
background: var(--c-primary);
border-radius: 1px;
}
/* === Generic lists === */
#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 — navigation list === */
#footer .links-section ul li a {
color: rgba(var(--c-white-rgb), 0.72);
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.5;
padding: 7px 0 7px 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);
}
/* Link hover: clean color change, no arrow */
#footer .links-section ul li a::before {
content: none;
display: none;
}
#footer .links-section ul li a:hover,
#footer .links-section ul li.active > a {
color: var(--c-primary);
}
#footer .links-section ul li a:hover::before,
#footer .links-section ul li.active > a::before {
content: none;
}
/* === Social media icons — clean natural display === */
#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;
}
/* Icon image — natural form, no filter, sized appropriately */
#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);
}
/* Font-based icons (FontAwesome etc.) — keep clean styling */
#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-primary);
}
/* === Newsletter Subscribe button — ghost style on dark === */
#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: 600 !important;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 17px 7px !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center;
gap: 12px;
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: none;
display: none;
}
#footer .newsletter-section .button:hover,
#footer .newsletter-section .button:focus {
background-color: var(--btn-bg-hover) !important;
border-color: var(--btn-bg-hover) !important;
color: var(--btn-text) !important;
box-shadow: none !important;
}
#footer .newsletter-section .button:hover::after,
#footer .newsletter-section .button:focus::after {
content: none;
}
/* === 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 on address */
#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-primary);
}
#footer .contact-section a:hover .actual-address::before,
#footer .contact-section a:hover .address-container::before {
transform: translateY(-3px);
}
/* Phone & email wrappers — block-level flex */
#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 */
#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 */
#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);
}
/* Animated underline on contact links */
#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-primary) !important;
}
#footer .contact-section a.footer-phone:hover::after,
#footer .contact-section a.footer-email:hover::after {
transform: scaleX(1);
}
/* Spacer utility used between sections */
#footer .spacer.height-20 {
height: 20px;
width: 100%;
}
/* === Copyright section (bottom) === */
#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;
}
/* Bottom copyright row — symmetric top/bottom padding */
#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-primary);
}
#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 (≤1023.5px) === */
@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: 20px;
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 refinements */
@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: 18px;
}
#footer .copyright {
font-size: 11px;
padding: 0 16px;
}
}
/* Footer reduced motion */
@media (prefers-reduced-motion: reduce) {
#footer *,
#footer *::before,
#footer *::after {
transition: none !important;
animation: none !important;
}
}
/* ============================================================
CONTACT FORM (Webware template-3 — ww-form-container-3)
Scoped under .pac-contact so it inherits the contact page.
Targets the platform's baked-in classes as-is (cpc-ct-form-*,
iti__*, recaptcha-block, *_wrap, submit_wrap).
============================================================ */
/* --- Form shell / card --- */
.pac-contact .pac-contact__formslot { width: 100%; }
/* The form cell in the live DOM carries Webware classes
(column is-overlay-content) + a nested grid-container > grid-x >
cell.medium-12 + a .spacer.height-40. Normalize all of that so the
form card simply fills its large-6 column with no stray padding. */
.pac-contact .is-overlay-content.cell.large-6 {
position: relative;
padding: 0;
}
.pac-contact [data-module="form-module"] > .grid-container,
.pac-contact [data-module="form-module"] .grid-x.align-center,
.pac-contact [data-module="form-module"] .cell.medium-12 {
padding: 0;
margin: 0;
max-width: 100%;
width: 100%;
}
/* Drop the platform spacer that pushes the form below the cards. */
.pac-contact [data-module="form-module"] .spacer.height-40 {
display: none;
}
.pac-contact .ww-form-container-3 {
width: 100%;
}
.pac-contact .ww-form-container-3 form {
background: var(--c-paper);
border: 1.5px solid var(--c-line);
border-radius: var(--r-lg);
padding: clamp(28px, 4vw, 44px);
box-shadow: var(--sh-1);
position: relative;
overflow: hidden;
}
/* Accent rail down the left edge of the form card */
.pac-contact .ww-form-container-3 form::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
border-radius: var(--r-lg) 0 0 var(--r-lg);
}
/* --- Form heading + subtext --- */
.pac-contact .cpc-ct-form-h2 {
font-family: var(--font-head);
font-size: var(--fs-h3);
font-weight: 600;
color: var(--c-ink);
line-height: 1.2;
margin: 0 0 8px 0;
text-wrap: balance;
}
.pac-contact .cpc-ct-form-sub {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--c-ink-2);
line-height: 1.6;
margin: 0 0 28px 0;
max-width: 46ch;
}
/* --- Field layout: 2-column grid so First + Last name share one row.
The live Webware DOM nests each field in a chain of UNCLASSED s
between