/* ============================================================
BRAND TOKENS — MANDIE BARBER STUDIOS
Change colours / fonts here → the whole site reskins.
Prefix used across all components: mbs-
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;400;500&family=Parisienne&display=swap');
:root{
/* ---- brand ---- */
--c-primary:#6D6EC6;
--c-primary-dark:#5658B0;
--c-accent:#9FA0DD;
--c-accent-2:#B9BAF0;
--font-head:'Cormorant Garamond',serif;
--font-body:'Jost',sans-serif;
--font-script:'Parisienne',cursive;
/* ---- ink & surfaces ---- */
--c-ink:#16163A; /* deep indigo — headings + dark sections */
--c-ink-2:#4B4B5A; /* body copy on light */
--c-ink-3:#8A8A97; /* muted captions on light */
--c-paper:#FBF9F5; /* cream page background */
--c-tint:#ECEBF6; /* pale lavender section background */
--c-tint-2:#E7E6F2; /* image placeholder background */
--c-ink-deep:#0F0F26; /* deepest indigo */
/* ---- text ramp on dark ---- */
--c-on-dark:#C7C7D6;
--c-on-dark-2:#B4B4C6;
--c-on-dark-3:#E8E8F2;
--c-on-dark-4:#A9A9BD;
--c-on-dark-mute:#7F7F97;
--c-light:#fff;
--c-error:#c0392b;
--c-star:#C9A24E; /* warm gold — review rating stars */
/* ---- rgb triplets (for rgba alpha use — keeps components token-driven) ---- */
--c-ink-rgb:22,22,58;
--c-primary-rgb:109,110,198;
--c-accent-rgb:159,160,221;
--c-paper-rgb:251,249,245;
--c-white-rgb:255,255,255;
/* ---- buttons ---- */
--btn-bg:var(--c-ink);
--btn-text:#fff;
--btn-bg-hover:var(--c-primary);
/* ---- spacing / radius / shadow ---- */
--space-section:clamp(40px,8vw,70px);
--gap:clamp(16px,2vw,28px);
--r-btn:2px;
--r-sm:3px;
--r-md:4px;
--r-pill:500px;
--shadow-1:0 2px 10px rgba(var(--c-ink-rgb),.06);
--shadow-2:0 20px 50px rgba(var(--c-ink-rgb),.10);
/* ---- type scale ---- */
--fs-h1:clamp(2.9rem,4.6vw,4.9rem);
--fs-h2:clamp(2rem,3.7vw,3.4rem);
--fs-h2-lg:clamp(2.1rem,4vw,3.6rem);
--fs-h2-book:clamp(2.1rem,4.2vw,3.7rem);
--fs-h3:clamp(1.4rem,2.1vw,1.85rem);
--fs-body:1.06rem;
--fs-eyebrow:12.5px;
--track:.3em;
}
/* ---- base type binding on the Webware wrapper ---- */
.is-wrapper h1,.is-wrapper h2,.is-wrapper h3,.is-wrapper h4,.is-wrapper h5{
font-family:var(--font-head); color:var(--c-ink); text-wrap:balance;
}
.is-wrapper p,.is-wrapper li{ font-family:var(--font-body); color:var(--c-ink-2); }
/* ============================================================
SECTION SHELLS + HELPERS
Background/padding live on a section class (never on the
locked wrappers or on a Foundation cell).
============================================================ */
.is-wrapper .mbs-sec{ padding:var(--space-section) 0; }
.is-wrapper .mbs-tint{ background:var(--c-tint); }
.is-wrapper .mbs-dark{ background:var(--c-ink); }
.mbs-center{ text-align:center; }
/* ============================================================
TEXT COMPONENTS (sit directly inside Foundation cells)
============================================================ */
/* eyebrow / kicker */
.mbs-eyebrow{
display:block;
font-family:var(--font-body); font-weight:400;
font-size:var(--fs-eyebrow); letter-spacing:var(--track);
text-transform:uppercase; color:var(--c-primary); line-height:1.4; margin:0 0 14px;
}
.mbs-eyebrow--deep{ color:var(--c-primary-dark); }
.mbs-eyebrow--accent{ color:var(--c-accent); }
.mbs-eyebrow--wide{ letter-spacing:.36em; font-weight:500; }
/* headings — default vertical rhythm for cell-level flow */
.mbs-h1{ font-weight:500; font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.5px; }
.mbs-h2{ font-weight:500; font-size:var(--fs-h2); line-height:1.06; margin:0 0 26px; }
.mbs-h2--lg{ font-size:var(--fs-h2-lg); line-height:1.04; }
.mbs-h2--book{ font-size:var(--fs-h2-book); }
.mbs-h2--flush{ margin-bottom:0; }
.mbs-h3{ font-weight:500; font-size:var(--fs-h3); line-height:1.2; margin:0 0 12px; }
.mbs-em{ font-style:italic; color:var(--c-accent-2); }
/* body copy */
.mbs-p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-body); line-height:1.85; color:var(--c-ink-2); margin:0 0 26px; }
.mbs-p:last-child{ margin-bottom:0; }
.mbs-dark .mbs-p{ color:var(--c-on-dark); }
/* buttons */
.mbs-btn{
display:inline-block; text-decoration:none;
font-family:var(--font-body); font-size:13px; letter-spacing:.16em;
text-transform:uppercase; font-weight:500;
border-radius:var(--r-btn); padding:17px 38px;
transition:background .3s,color .3s,border-color .3s; cursor:pointer;
}
.mbs-btn--dark{ background:var(--c-ink); color:var(--c-light); }
.mbs-btn--dark:hover{ background:var(--c-primary); }
.mbs-btn--paper{ background:var(--c-paper); color:var(--c-ink); padding:18px 38px; }
.mbs-btn--paper:hover{ background:var(--c-primary); color:var(--c-light); }
.mbs-btn--accent{ background:var(--c-accent); color:var(--c-ink); }
.mbs-btn--accent:hover{ background:var(--c-paper); }
.mbs-btn--wide{ padding:18px 42px; }
.mbs-btn--xwide{ padding:19px 46px; letter-spacing:.18em; }
/* underlined hero link (on dark) */
.mbs-underline{
display:inline-block; text-decoration:none;
font-family:var(--font-body); font-size:13px; letter-spacing:.16em;
text-transform:uppercase; font-weight:500; color:var(--c-paper);
padding:17px 6px; border-bottom:1px solid rgba(var(--c-white-rgb),.55);
transition:border-color .3s;
}
.mbs-underline:hover{ border-color:var(--c-paper); }
/* inline text link with arrow (on light) */
.mbs-inline-link{
display:inline-flex; align-items:center; gap:10px; text-decoration:none;
font-family:var(--font-body); font-size:13px; letter-spacing:.16em;
text-transform:uppercase; font-weight:500; color:var(--c-ink);
border-bottom:1px solid var(--c-primary); padding-bottom:6px; transition:color .3s;
}
.mbs-inline-link:hover{ color:var(--c-primary); }
.mbs-inline-link .mbs-arrow{ font-family:serif; }
/* ============================================================
IMAGE PLACEHOLDER (inner div inside a cell — mirrors the
source's empty image slots; drop a real ![]()
inside later)
============================================================ */
.mbs-shot{
position:relative; display:flex; align-items:center; justify-content:center;
overflow:hidden; background:var(--c-tint-2); border-radius:var(--r-md);
}
.mbs-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.mbs-shot__ph{
font-family:var(--font-body); font-weight:400; font-size:11.5px;
letter-spacing:.2em; text-transform:uppercase; color:var(--c-primary-dark);
text-align:center; padding:0 18px; opacity:.75;
}
.mbs-shot::after{
content:""; position:absolute; inset:12px;
border:1px dashed rgba(var(--c-primary-rgb),.28); border-radius:inherit; pointer-events:none;
}
.mbs-shot.mbs-r3{ border-radius:var(--r-sm); }
.mbs-shot.mbs-r0{ border-radius:0; }
.mbs-shot.mbs-r0::after{ display:none; }
/* deliberate downward offset (gallery middle tile) */
.mbs-shot--drop{ margin-top:clamp(24px,5vw,64px); }
/* aspect ratios
.mbs-ar-3-4{ aspect-ratio:3/4; }
.mbs-ar-4-5{ aspect-ratio:4/5; }
.mbs-ar-5-4{ aspect-ratio:5/4; }
.mbs-ar-4-3{ aspect-ratio:4/3; }
*/
/* decorative offset frame around an image (wraps .mbs-shot inside the cell) */
.mbs-frame{ position:relative; }
.mbs-frame::before{
content:""; position:absolute; inset:-16px -16px 22px 22px;
border:1px solid rgba(var(--c-primary-rgb),.45); border-radius:var(--r-md); pointer-events:none;
}
/* ============================================================
PULL-QUOTE (figure inside a cell)
============================================================ */
.mbs-quote{ margin:0; border-left:2px solid var(--c-primary); padding:8px 0 8px 30px; }
.mbs-quote blockquote{
margin:0; font-family:var(--font-head); font-style:italic;
font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.45; color:var(--c-ink);
}
.mbs-quote figcaption{
margin-top:16px; font-family:var(--font-body); font-size:12px;
letter-spacing:.24em; text-transform:uppercase; color:var(--c-primary-dark);
}
.mbs-dark .mbs-quote blockquote{ color:var(--c-paper); }
.mbs-dark .mbs-quote figcaption{ color:var(--c-accent); }
/* dark-context heading colour flip */
.mbs-dark .mbs-h2,.mbs-dark .mbs-h3{ color:var(--c-paper); }
/* ============================================================
HERO BANNER — Webware banner chain, scoped under .bnl-0
Native hooks (bn-overlay / pos-ab-ban / bn-content /
banner-main-heading / .button) re-tokenised to Mandie's palette.
============================================================ */
.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:clamp(28px,3vw,44px); border-radius:var(--r-md);
background:rgba(var(--c-ink-rgb),.82); color:var(--c-light);
}
.bnl-0 .bn-content .mbs-eyebrow{ color:var(--c-accent); letter-spacing:.32em; margin:0 0 16px; }
.bnl-0 .bn-content h1.banner-main-heading{
font-family:var(--font-head); font-weight:500; color:var(--c-light);
font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:1.06; letter-spacing:-.4px;
margin:0 0 18px; text-wrap:balance;
}
.bnl-0 .bn-content h1 .mbs-em{ color:var(--c-accent-2); }
.bnl-0 .bn-content p{
font-family:var(--font-body); font-weight:300;
font-size:1.02rem; line-height:1.75; color:rgba(var(--c-white-rgb),.9); margin:0 0 22px;
}
.bnl-0 .bn-content p:last-child{ margin-bottom:0; }
.bnl-0 .bn-content .button{
display:inline-block; text-decoration:none;
font-family:var(--font-body); font-weight:500; font-size:13px;
letter-spacing:.16em; text-transform:uppercase;
background:var(--c-paper); color:var(--c-ink);
padding:16px 34px; border-radius:var(--r-btn); transition:background .3s,color .3s;
}
.bnl-0 .bn-content .button:hover{ background:var(--c-primary); color:var(--c-light); }
.bnl-0 .bn-content .mbs-bn-link{
text-decoration:none;
font-family:var(--font-body); font-weight:500; font-size:13px;
letter-spacing:.16em; text-transform:uppercase; color:var(--c-light);
border-bottom:1px solid rgba(var(--c-white-rgb),.55); padding-bottom:4px; transition:border-color .3s;
}
.bnl-0 .bn-content .mbs-bn-link:hover{ border-color:var(--c-light); }
/* ---- blog featured-image banner: reuses the .bnl-0 chain; crops any blog image to a banner band ---- */
.mbs-blog-banner__fig{ margin:0; }
.mbs-blog-banner__img{ display:block; width:100%; height:clamp(360px,44vw,660px); object-fit:cover; object-position:center; }
@media (max-width:1023.5px){
.bnl-0 .bn-content{ max-width:100%; width:100%; border-radius: 0; }
.bnl-0 .bn-content .mbs-bn-link{ display:block; margin-left:0; margin-top:14px; }
}
/* ============================================================
PORTRAITS (caption + centred head/cta via cells)
============================================================ */
.mbs-portraits__cap{
margin-top:14px; font-family:var(--font-body); font-size:11.5px;
letter-spacing:.22em; text-transform:uppercase; color:var(--c-ink-3); text-align:center;
}
/* ============================================================
PROCESS (dark) — sticky intro cell + numbered steps cell
Section carries the clip + watermark anchor.
============================================================ */
.mbs-process{ position:relative; overflow:hidden; }
.mbs-process__wm{
position:absolute; top:-40px; right:-20px;
font-family:var(--font-script); font-size:clamp(8rem,18vw,20rem); line-height:1;
color:rgba(var(--c-accent-rgb),.06); pointer-events:none; user-select:none; z-index:0;
}
.mbs-process__intro .mbs-p{ max-width:420px; color:var(--c-on-dark); font-size:1.05rem; margin:0 0 34px; }
@media (min-width:1024px){ .mbs-process__intro{ position:sticky; top:100px; } }
/* one numbered step (component: number rail + body) */
.mbs-step{ position:relative; z-index:1; display:flex; gap:clamp(20px,2.6vw,38px); padding:0 0 clamp(34px,4vw,48px); }
.mbs-step:last-child{ padding-bottom:0; }
.mbs-step__marker{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.mbs-step__num{ font-family:var(--font-head); font-style:italic; font-weight:600; font-size:clamp(2.6rem,4vw,3.6rem); line-height:1; color:var(--c-accent-2); }
.mbs-step__line{ flex:1; width:1px; margin-top:14px; background:linear-gradient(var(--c-primary),rgba(var(--c-primary-rgb),.15)); }
.mbs-step__body{ padding-top:6px; }
.mbs-step__body p{ font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.8; color:var(--c-on-dark-2); margin:0; }
/* ============================================================
INVESTMENT — collection cards (styled inner div per cell)
============================================================ */
.mbs-card{ height:100%; border:1px solid rgba(var(--c-ink-rgb),.12); border-radius:var(--r-md); padding:clamp(32px,3.4vw,48px); }
.mbs-card--dark{ background:var(--c-ink); border:none; }
.mbs-card__label{ font-family:var(--font-body); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--c-primary-dark); }
.mbs-card--dark .mbs-card__label{ color:var(--c-accent); }
.mbs-card__price{ font-family:var(--font-head); font-size:clamp(1.5rem,2vw,1.9rem); color:var(--c-ink); margin:16px 0 26px; }
.mbs-card__price span{ color:var(--c-primary); }
.mbs-card--dark .mbs-card__price{ color:var(--c-paper); }
.mbs-card--dark .mbs-card__price span{ color:var(--c-accent-2); }
.mbs-card__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.mbs-card__list li{ display:flex; gap:12px; font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.5; color:var(--c-ink-2); }
.mbs-card__list li .dash{ color:var(--c-primary); }
.mbs-card--dark .mbs-card__list li{ color:var(--c-on-dark); }
.mbs-card--dark .mbs-card__list li .dash{ color:var(--c-accent); }
.mbs-card__note{ font-family:var(--font-body); font-weight:300; font-style:italic; font-size:.92rem; line-height:1.65; color:var(--c-ink-3); margin:24px 0 0; }
/* ============================================================
BOOK CTA (centred cell)
============================================================ */
.mbs-book__lead{ font-family:var(--font-body); font-weight:300; font-size:1.08rem; line-height:1.85; color:var(--c-ink-2); max-width:680px; margin:0 auto 40px; }
.mbs-book__foot{ margin-top:clamp(40px,4.5vw,56px); display:flex; flex-direction:column; align-items:center; gap:16px; }
.mbs-book__phone{ font-family:var(--font-body); font-size:13px; letter-spacing:.05em; color:var(--c-ink-2); }
.mbs-book__phone a{ color:var(--c-primary-dark); text-decoration:none; font-weight:500; }
.mbs-book__hours{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 22px; font-family:var(--font-body); font-size:12.5px; letter-spacing:.04em; color:var(--c-ink); }
.mbs-book__hours b{ font-weight:500; }
.mbs-book__hours .sep{ opacity:.35; }
.mbs-book__hours .closed{ color:var(--c-ink-3); }
.mbs-book .mbs-h2{ margin:0 auto 24px; max-width:860px; }
/* ============================================================
FAQ — native details/summary accordion (items stack in cell)
============================================================ */
.mbs-faq__item{ border-top:1px solid rgba(var(--c-ink-rgb),.14); }
.mbs-faq__item:first-of-type{ margin-top:clamp(32px,4vw,48px); }
.mbs-faq__q{
width:100%; list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:28px 4px; text-align:left;
font-family:var(--font-head); font-weight:500; font-size:clamp(1.25rem,2vw,1.6rem);
color:var(--c-ink); line-height:1.3;
}
.mbs-faq__q::-webkit-details-marker{ display:none; }
.mbs-faq__sign{ flex-shrink:0; font-family:var(--font-body); font-weight:300; font-size:1.8rem; line-height:1; color:var(--c-primary); transition:transform .35s ease; }
.mbs-faq__item[open] .mbs-faq__sign{ transform:rotate(45deg); }
.mbs-faq__a p{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.85; color:var(--c-ink-2); margin:0; padding:0 4px 30px; max-width:760px; }
.mbs-faq__item[open] .mbs-faq__a{ animation:mbsReveal .45s ease; }
.mbs-faq__end{ border-top:1px solid rgba(var(--c-ink-rgb),.14); }
/* ============================================================
STUDIO STATEMENT + SERVICE AREAS (dark)
Section carries the clip + big "MB" watermark anchor.
============================================================ */
.mbs-areas{ position:relative; overflow:hidden; }
.mbs-areas__wm{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
font-family:var(--font-head); font-weight:700; font-size:clamp(20rem,42vw,44rem);
line-height:.8; color:rgba(var(--c-accent-rgb),.055); letter-spacing:-.04em;
pointer-events:none; user-select:none; white-space:nowrap; z-index:0;
}
.mbs-areas__cell{ position:relative; z-index:1; }
.mbs-areas__kicker{ display:block; font-family:var(--font-body); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--c-accent); margin-bottom:10px; }
.mbs-areas__script{ display:block; font-family:var(--font-script); font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; color:var(--c-accent-2); margin-bottom:26px; }
.mbs-areas__statement{ font-family:var(--font-head); font-weight:400; font-size:clamp(1.32rem,1.9vw,1.9rem); line-height:1.5; color:var(--c-on-dark-3); margin:0; }
.mbs-areas__statement .mbs-em{ color:var(--c-accent-2); }
.mbs-areas__sign{ display:flex; align-items:center; gap:18px; margin-top:clamp(28px,3vw,40px); }
.mbs-areas__sign-name{ font-family:var(--font-script); font-size:clamp(2.2rem,3vw,2.8rem); color:var(--c-accent); line-height:1; }
.mbs-areas__sign-rule{ width:38px; height:1px; background:rgba(var(--c-accent-rgb),.5); }
.mbs-areas__sign-role{ font-family:var(--font-body); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent); line-height:1.6; }
.mbs-areas__serve-label{ display:block; font-family:var(--font-body); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--c-accent); margin-bottom:clamp(24px,3vw,38px); }
.mbs-areas__cities{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(16px,2.6vw,40px); }
.mbs-areas__city{ font-family:var(--font-head); font-style:italic; font-size:clamp(1.7rem,3.4vw,2.8rem); color:var(--c-paper); line-height:1.1; text-decoration:none; transition:color .3s; }
a.mbs-areas__city:hover{ color:var(--c-accent-2); }
.mbs-areas__dot{ width:5px; height:5px; border-radius:50%; background:var(--c-primary); }
.mbs-areas__cta{ display:inline-block; margin-top:clamp(44px,5vw,64px); }
/* ============================================================
STATEMENT LINE (large standalone editorial sentence)
============================================================ */
.mbs-statement{ font-family:var(--font-head); font-weight:400; font-size:clamp(1.55rem,2.7vw,2.6rem); line-height:1.42; color:var(--c-ink); margin:0; text-wrap:balance; }
.mbs-dark .mbs-statement{ color:var(--c-on-dark-3); }
/* ============================================================
TESTIMONIAL CARD (styled inner figure inside a cell)
============================================================ */
.mbs-tcard{ height:100%; margin:0; display:flex; flex-direction:column; background:var(--c-paper); border:1px solid rgba(var(--c-ink-rgb),.12); border-radius:var(--r-md); padding:clamp(28px,3vw,40px); }
.mbs-tcard__quote{ margin:0; font-family:var(--font-head); font-style:italic; font-size:16px); line-height:1.5; color:var(--c-ink); }
.mbs-tcard figcaption{ margin-top:auto; padding-top:24px; }
.mbs-tcard__name{ display:block; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary-dark); }
.mbs-tcard__role{ display:block; margin-top:6px; font-family:var(--font-body); font-weight:300; font-size:12.5px; letter-spacing:.05em; color:var(--c-ink-3); }
/* ============================================================
SERVICE CARD (full-bleed image · padded body · link at bottom)
============================================================ */
.mbs-scard{ height:100%; display:flex; flex-direction:column; background:var(--c-paper); border:1px solid rgba(var(--c-ink-rgb),.12); border-radius:var(--r-md); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.mbs-scard:hover{ border-color:rgba(var(--c-primary-rgb),.4); box-shadow:var(--shadow-1); }
.mbs-scard .mbs-shot{ width:100%; }
.mbs-scard__body{ flex:1; display:flex; flex-direction:column; padding:clamp(26px,3vw,36px); }
.mbs-scard .mbs-h3{ margin:0 0 14px; }
.mbs-scard .mbs-p{ font-size:1rem; margin:0 0 26px; }
.mbs-scard .mbs-inline-link{ margin-top:auto; align-self:flex-start; }
/* ============================================================
FEATURE LIST (accent-dash bullet list)
============================================================ */
.mbs-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.mbs-list li{ position:relative; padding-left:26px; font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.6; color:var(--c-ink-2); }
.mbs-list li::before{ content:""; position:absolute; left:0; top:.65em; width:13px; height:1px; background:var(--c-primary); }
.mbs-dark .mbs-list li{ color:var(--c-on-dark); }
.mbs-dark .mbs-list li::before{ background:var(--c-accent); }
/* ---- policies page: editorial split (title column + body) ---- */
.mbs-policy__title{ font-size:clamp(1.55rem,2.4vw,2rem); line-height:1.16; overflow-wrap:normal; word-break:normal; hyphens:none; margin:0 0 20px; }
.mbs-policy__title::after{ content:""; display:block; width:46px; height:2px; background:var(--c-primary); margin:16px 0 0; }
.mbs-policy__body .mbs-list{ margin:0 0 26px; }
/* ============================================================
CARD ICON BADGE (FontAwesome 5 — soft tinted square)
============================================================ */
.mbs-card__icon{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; margin-bottom:22px; border-radius:var(--r-md); background:rgba(var(--c-primary-rgb),.10); color:var(--c-primary); font-size:22px; }
.mbs-card--dark .mbs-card__icon{ background:rgba(var(--c-accent-rgb),.16); color:var(--c-accent-2); }
/* ============================================================
CONTACT DETAILS (icon row: label + value)
============================================================ */
.mbs-contact{ display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-top:1px solid rgba(var(--c-ink-rgb),.12); }
.mbs-contact:first-of-type{ border-top:none; padding-top:0; }
.mbs-contact__icon{ flex-shrink:0; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-md); background:rgba(var(--c-primary-rgb),.10); color:var(--c-primary); font-size:18px; }
.mbs-contact__body{ padding-top:3px; }
.mbs-contact__label{ display:block; font-family:var(--font-body); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px; }
.mbs-contact__value{ font-family:var(--font-body); font-size:1.05rem; color:var(--c-ink); line-height:1.5; text-decoration:none; }
a.mbs-contact__value{ transition:color .3s; }
a.mbs-contact__value:hover{ color:var(--c-primary); }
.mbs-contact__hours{ display:flex; flex-direction:column; gap:6px; font-size:.97rem; }
.mbs-contact__hours b{ font-weight:500; color:var(--c-ink); }
.mbs-contact__hours .closed{ color:var(--c-ink-3); }
/* ============================================================
WEBWARE CONTACT FORM (scoped to .ww-form-container-3)
============================================================ */
.ww-form-container-3{ background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.10); border-radius:var(--r-md); padding:clamp(26px,3.4vw,46px); box-shadow:0 20px 50px rgba(var(--c-ink-rgb),.07); }
.ww-form-container-3 form{ margin:0; }
.ww-form-container-3 .hide{ display:none; }
/* fieldset reset + two-up name row */
.ww-form-container-3 .fieldset{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-wrap:wrap; gap:18px 20px; }
.ww-form-container-3 .first_name_wrap,
.ww-form-container-3 .last_name_wrap,
.ww-form-container-3 .email_wrap,
.ww-form-container-3 .phone_wrap,
.ww-form-container-3 .field_33815_wrap{ margin:0; }
.ww-form-container-3 .first_name_wrap,
.ww-form-container-3 .last_name_wrap{ flex:1 1 calc(50% - 10px); }
.ww-form-container-3 .email_wrap,
.ww-form-container-3 .phone_wrap,
.ww-form-container-3 .field_33815_wrap{ flex:1 1 100%; }
/* labels */
.ww-form-container-3 label{ display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); margin:0 0 8px; }
.ww-form-container-3 .required{ color:var(--c-primary); margin-left:3px; }
/* text inputs · phone · textarea */
.ww-form-container-3 input.input:not([type="submit"]),
.ww-form-container-3 textarea.input,
.ww-form-container-3 input.phone_number,
.ww-form-container-3 select{
width:100%; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.14); border-radius:var(--r-sm);
padding:9px 16px; transition:border-color .3s,background .3s,box-shadow .3s;
}
.ww-form-container-3 input.input:not([type="submit"]):focus,
.ww-form-container-3 textarea.input:focus,
.ww-form-container-3 input.phone_number:focus{
outline:none; border-color:var(--c-primary); background:var(--c-light);
box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14);
}
.ww-form-container-3 input.input::placeholder,
.ww-form-container-3 input.phone_number::placeholder{ color:var(--c-ink-3); }
.ww-form-container-3 textarea.input{ resize:vertical; min-height:140px; line-height:1.7; }
.ww-form-container-3 .iti{ display:block; width:100%; }
/* validation error text */
.ww-form-container-3 .error{ display:block; font-family:var(--font-body); font-size:.8rem; color:var(--c-error); margin-top:6px; }
/* captcha + submit block */
.ww-form-container-3 .form-container{ margin-top:24px; }
.ww-form-container-3 .captcha_wrap{ margin:0 0 22px; }
.ww-form-container-3 .recaptcha-block{ border:0; padding:0; background:none; }
.ww-form-container-3 .submit_wrap{ margin:0; }
/* submit — matches the site button language */
.ww-form-container-3 input[type="submit"].button{
display:inline-block; width:100%; cursor:pointer; border:0;
font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
color:var(--c-light); background:var(--c-primary); border-radius:var(--r-btn); padding:17px 38px;
transition:background .3s,transform .3s;
}
.ww-form-container-3 input[type="submit"].button:hover{ background:var(--c-primary-dark); }
.ww-form-container-3 input[type="submit"].button:active{ transform:translateY(1px); }
.ww-form-container-3 input[type="submit"].button:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
@media all and (max-width:640px){
.ww-form-container-3 .first_name_wrap,
.ww-form-container-3 .last_name_wrap{ flex-basis:100%; }
}
/* ============================================================
MAP EMBED (rounded, framed iframe)
============================================================ */
.mbs-map{ position:relative; width:100%; height:clamp(320px,42vw,460px); border-radius:var(--r-md); overflow:hidden; border:1px solid rgba(var(--c-ink-rgb),.12); }
.mbs-map iframe{ width:100%; height:100%; border:0; display:block; }
/* ============================================================
BLOG LISTING (scoped to .new-blog-page-type · Webware blog widget)
============================================================ */
.new-blog-page-type .main-blog-widget{ padding:clamp(44px,7vw,84px) 0 clamp(20px,3vw,40px); }
/* search */
.new-blog-page-type .position-relative{ position:relative; max-width:540px; }
.new-blog-page-type .search-input-blog{
width:100%; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.14); border-radius:var(--r-sm);
padding:14px 50px 14px 18px; transition:border-color .3s,background .3s,box-shadow .3s;
}
.new-blog-page-type .search-input-blog:focus{ outline:none; border-color:var(--c-primary); background:var(--c-light); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14); }
.new-blog-page-type .search-input-blog::placeholder{ color:var(--c-ink-3); }
.new-blog-page-type .blog-search-button{ position:absolute; top:50%; right:15px; transform:translateY(-50%); background:none; border:0; padding:0; line-height:0; cursor:pointer; color:var(--c-primary); transition:color .3s; }
.new-blog-page-type .blog-search-button:hover{ color:var(--c-primary-dark); }
.new-blog-page-type .blog-search-button svg{ display:block; }
.new-blog-page-type .blog-search-button svg path{ fill:currentColor; }
/* article column */
.new-blog-page-type .blog-articles{ padding-top:4px; }
.new-blog-page-type .blog-ul{ list-style:none; margin:0; padding:0; }
.new-blog-page-type .blog-li{ margin:0 0 40px; padding:0 0 35px; border-bottom:1px solid rgba(var(--c-ink-rgb),.12); }
.new-blog-page-type .blog-li:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0; }
.new-blog-page-type .blog-li .row{ max-width:none; margin:0; }
.new-blog-page-type .blog-li .blog-article{ float:none; width:100%; padding:0; }
/* card image */
.new-blog-page-type .ps-article-img img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-md); margin:0 0 22px; }
/* category meta */
.new-blog-page-type .article-category{ font-family:var(--font-body); font-size:.8rem; line-height:1.6; color:var(--c-ink-3); margin:0 0 12px; }
.new-blog-page-type .article-category .categories_text{ text-transform:uppercase; letter-spacing:.18em; color:var(--c-ink-3); }
.new-blog-page-type .article-category a{ color:var(--c-primary); text-decoration:none; transition:color .3s; }
.new-blog-page-type .article-category a:hover{ color:var(--c-primary-dark); text-decoration:underline; }
/* title */
.new-blog-page-type .article-title{ margin:0 0 14px; }
.new-blog-page-type .article-title a{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.14; letter-spacing:-.3px; color:var(--c-ink); text-decoration:none; text-wrap:balance; transition:color .3s; }
.new-blog-page-type .article-title a:hover{ color:var(--c-primary); }
/* excerpt */
.new-blog-page-type .article-body{ margin:0 0 18px; }
.new-blog-page-type .article-body p{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.75; color:var(--c-ink-2); margin:0; }
/* read more */
.new-blog-page-type .blog-read-more{ display:inline-block; font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-primary); text-decoration:none; border-bottom:1px solid rgba(var(--c-primary-rgb),.4); padding-bottom:3px; transition:color .3s,border-color .3s; }
.new-blog-page-type .blog-read-more:hover{ color:var(--c-primary-dark); border-color:var(--c-primary-dark); }
/* pagination */
.new-blog-page-type .ps-pagination-bar{ margin-top:clamp(30px,4vw,46px); }
.new-blog-page-type .ps-pagination-bar p{ margin:0; }
.new-blog-page-type .ps-pagination-bar a{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; margin:0 4px; font-family:var(--font-body); font-size:.95rem; color:var(--c-ink-2); text-decoration:none; border:1px solid rgba(var(--c-ink-rgb),.16); border-radius:var(--r-sm); transition:border-color .3s,color .3s,background .3s; }
.new-blog-page-type .ps-pagination-bar a:hover,
.new-blog-page-type .ps-pagination-bar a.active{ color:var(--c-light); background:var(--c-primary); border-color:var(--c-primary); }
/* categories filter (sidebar + mobile) */
.new-blog-page-type .filter-h2{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.5rem,2vw,1.85rem); color:var(--c-ink); margin:0 0 16px; }
.new-blog-page-type .ps-blog-category{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.new-blog-page-type .ps-blog-category li{ margin:0; padding:0; border:0; float:none; list-style:none; }
.new-blog-page-type .ps-blog-category li a{ display:inline-block; border:1px solid rgba(var(--c-ink-rgb),.20); border-radius:var(--r-pill); padding:9px 20px; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.04em; line-height:1.2; color:var(--c-ink-2); background:transparent; text-decoration:none; transition:color .3s,background .3s,border-color .3s; }
.new-blog-page-type .ps-blog-category li a:hover{ color:var(--c-light); background:var(--c-primary); border-color:var(--c-primary); }
.new-blog-page-type .ps-blog-category li.active a,
.new-blog-page-type .all-blogs.button{ color:var(--c-light); background:var(--c-primary); border-color:var(--c-primary); }
.new-blog-page-type .all-blogs.button{ text-transform:uppercase; letter-spacing:.1em; }
.new-blog-page-type .ps-blog-category li.active a:hover,
.new-blog-page-type .all-blogs.button:hover{ background:var(--c-primary-dark); border-color:var(--c-primary-dark); }
.new-blog-page-type .articles-filter-container.hide-for-large{ margin:0 0 clamp(30px,4vw,44px); }
@media all and (max-width:1023.5px){
.new-blog-page-type .blog-sidebar{ margin-top:clamp(40px,6vw,64px); }
}
/* ============================================================
BLOG ARTICLE (single post · scoped to .article-page-type;
Recent-Posts cards inherit the listing card styles above)
============================================================ */
/* post title */
.article-page-type .blog-article-content > .article-title{
font-family:var(--font-head); font-weight:500; font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.5px;
color:var(--c-ink); text-wrap:balance; max-width:900px; margin:0 0 clamp(26px,3vw,42px);
}
/* header row: featured image + author/meta */
.article-page-type .blog-article-content .ps-article-img{ margin:0; }
.article-page-type .blog-article-content .ps-article-img img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-md); margin:0; display:block; }
.article-page-type .blog-author{ background:var(--c-tint); border-radius:var(--r-md); padding:clamp(22px,2vw,30px); }
.article-page-type .blog-author .lab-ul{ list-style:none; margin:0; padding:0; font-family:var(--font-body); font-size:.92rem; line-height:1.7; color:var(--c-ink-2); }
.article-page-type .blog-author .lab-ul li{ margin:0 0 10px; }
.article-page-type .author_name{ display:block; font-family:var(--font-head); font-weight:500; font-size:1.3rem; color:var(--c-ink); }
.article-page-type .pubdate{ font-family:var(--font-body); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); }
.article-page-type .blog-author .lab-ul a{ color:var(--c-primary); text-decoration:none; transition:color .3s; }
.article-page-type .blog-author .lab-ul a:hover{ color:var(--c-primary-dark); text-decoration:underline; }
/* article prose */
.article-page-type .article-body{ max-width:768px; margin:clamp(32px,4vw,52px) 0 0; }
.article-page-type .article-body p{ font-family:var(--font-body); font-weight:300; font-size:1.12rem; line-height:1.85; color:var(--c-ink-2); margin:0 0 24px; }
.article-page-type .article-body p:last-child{ margin-bottom:0; }
.article-page-type .article-body h2{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1.16; color:var(--c-ink); text-wrap:balance; margin:clamp(38px,4vw,54px) 0 16px; }
.article-page-type .article-body h3{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.4rem,2vw,1.8rem); color:var(--c-ink); margin:30px 0 12px; }
.article-page-type .article-body a{ color:var(--c-primary); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color .3s; }
.article-page-type .article-body a:hover{ color:var(--c-primary-dark); }
.article-page-type .article-body ul,
.article-page-type .article-body ol{ margin:0 0 24px; padding-left:1.35em; }
.article-page-type .article-body li{ font-family:var(--font-body); font-weight:300; font-size:1.12rem; line-height:1.8; color:var(--c-ink-2); margin:0 0 8px; }
.article-page-type .article-body img{ max-width:100%; height:auto; border-radius:var(--r-md); margin:14px 0; display:block; }
.article-page-type .article-body blockquote{ margin:30px 0; padding:8px 0 8px 24px; border-left:3px solid var(--c-primary); font-family:var(--font-head); font-style:italic; font-size:clamp(1.3rem,1.8vw,1.55rem); line-height:1.5; color:var(--c-ink); }
/* recent posts (full-width band below the article, grid of cards) */
.article-page-type .blog-sidebar{ margin-top:clamp(48px,6vw,80px); padding-top:clamp(40px,5vw,60px); border-top:1px solid rgba(var(--c-ink-rgb),.14); }
.article-page-type .blog-sidebar-h2{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--c-ink); margin:0 0 clamp(28px,3vw,40px); }
.article-page-type .ps-blog-recent-posts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,2.5vw,40px); }
.article-page-type .ps-blog-recent-posts .blog-li{ margin:0; padding:0; border-bottom:0; }
.article-page-type .ps-blog-recent-posts .article-title a{ font-size:clamp(1.25rem,1.6vw,1.5rem); }
.article-page-type .ps-blog-recent-posts .item-body{ margin:0 0 16px; }
.article-page-type .ps-blog-recent-posts .item-body p{ font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.7; color:var(--c-ink-2); margin:0; }
@media all and (max-width:1023.5px){ .article-page-type .ps-blog-recent-posts{ grid-template-columns:repeat(2,1fr); } }
@media all and (max-width:640px){ .article-page-type .ps-blog-recent-posts{ grid-template-columns:1fr; } }
/* ============================================================
LEAD MAGNET FORM (blog opt-in · scoped to #lead-magnet-form;
intro uses .mbs-h2 / .mbs-p, styled elsewhere)
============================================================ */
#lead-magnet-form .ww-form-container{
max-width:650px; margin:0 auto;
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.08); border-radius:var(--r-md);
padding:clamp(30px,4vw,54px); box-shadow:0 20px 50px rgba(var(--c-ink-rgb),.06);
}
#lead-magnet-form form{ margin:0; width:100%; }
#lead-magnet-form .hide{ display:none; }
/* intro heading + copy — explicit styling (blog has no .is-wrapper, and a theme h2 rule outsizes bare .mbs-h2) */
#lead-magnet-form .ww-form-container .mbs-h2{
font-family:var(--font-head); font-weight:500; font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1.16;
letter-spacing:-.3px; color:var(--c-ink); text-wrap:balance; overflow-wrap:break-word; word-break:normal;
margin:0 0 16px;
}
#lead-magnet-form .ww-form-container .mbs-p{
font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.75; color:var(--c-ink-2); margin:0 0 16px;
}
#lead-magnet-form .ww-form-container .mbs-p:last-of-type{ margin-bottom:clamp(24px,3vw,34px); }
/* fields (Name + Email stacked, full width) */
#lead-magnet-form .first_name_wrap,
#lead-magnet-form .email_wrap{ margin:0 0 18px; }
#lead-magnet-form label{ display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); margin:0 0 8px; }
#lead-magnet-form .required{ color:var(--c-primary); margin-left:3px; }
#lead-magnet-form input.input:not([type="submit"]){
width:100%; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.16); border-radius:var(--r-sm);
padding:13px 16px; transition:border-color .3s,box-shadow .3s;
}
#lead-magnet-form input.input:not([type="submit"]):focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14); }
#lead-magnet-form input.input::placeholder{ color:var(--c-ink-3); }
/* validation error */
#lead-magnet-form .error{ display:block; font-family:var(--font-body); font-size:.8rem; color:var(--c-error); margin-top:6px; }
/* captcha + submit */
#lead-magnet-form .captcha_wrap{ margin:0 0 20px; }
#lead-magnet-form .recaptcha-block{ border:0; padding:0; background:none; }
#lead-magnet-form .submit_wrap{ margin:0; }
#lead-magnet-form input[type="submit"].button{
display:inline-block; width:100%; cursor:pointer; border:0;
font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
color:var(--c-light); background:var(--c-primary); border-radius:var(--r-btn); padding:16px 34px;
transition:background .3s,transform .3s;
}
#lead-magnet-form input[type="submit"].button:hover{ background:var(--c-primary-dark); }
#lead-magnet-form input[type="submit"].button:active{ transform:translateY(1px); }
#lead-magnet-form input[type="submit"].button:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
/* ============================================================
NEWSLETTER REGISTRATION (signup page · scoped to #newsletter-form)
============================================================ */
#newsletter-form{ padding:50px 0; }
#newsletter-form form{
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.08); border-radius:var(--r-md);
padding:clamp(30px,4vw,52px); box-shadow:0 20px 50px rgba(var(--c-ink-rgb),.06); max-width:560px; margin:0 auto;
}
#newsletter-form .hide{ display:none; }
/* intro text (Webware wrapper) + fieldset legend */
#newsletter-form document{ display:block; }
#newsletter-form document p{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.7; color:var(--c-ink-2); margin:0 0 clamp(20px,3vw,28px); }
#newsletter-form .fieldset{ border:0; margin:0; padding:0; min-width:0; }
#newsletter-form legend{ display:block; float:none; width:100%; padding:0; margin:0 0 20px; font-family:var(--font-head); font-weight:500; font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.2; color:var(--c-ink); }
/* fields */
#newsletter-form .first_name_wrap,
#newsletter-form .last_name_wrap,
#newsletter-form .email_wrap{ margin:0 0 18px; }
#newsletter-form label{ display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); margin:0 0 8px; }
#newsletter-form .required{ color:var(--c-primary); margin-left:3px; }
#newsletter-form input.input:not([type="submit"]):not([type="checkbox"]){
width:100%; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.16); border-radius:var(--r-sm);
padding:13px 16px; transition:border-color .3s,box-shadow .3s;
}
#newsletter-form input.input:not([type="submit"]):not([type="checkbox"]):focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14); }
/* opt-in checkbox */
#newsletter-form .form-container{ margin-top:4px; }
#newsletter-form .checkbox_wrap{ margin:0 0 20px; }
#newsletter-form .checkbox_wrap > p{ margin:0; }
#newsletter-form .checkbox_wrap .float-left{ float:none !important; }
#newsletter-form .checkbox_wrap label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-family:var(--font-body); font-weight:400; font-size:.95rem; letter-spacing:0; text-transform:none; line-height:1.5; color:var(--c-ink-2); margin:0; }
#newsletter-form input[type="checkbox"].input{ flex-shrink:0; width:18px; height:18px; margin:1px 0 0; accent-color:var(--c-primary); cursor:pointer; }
/* validation error */
#newsletter-form .error{ display:block; font-family:var(--font-body); font-size:.8rem; color:var(--c-error); margin-top:6px; }
/* captcha + submit */
#newsletter-form .captcha_wrap{ margin:0 0 20px; }
#newsletter-form .recaptcha-block{ border:0; padding:0; background:none; }
#newsletter-form .submit_wrap{ margin:0; }
#newsletter-form .submit_wrap > label{ display:none; }
#newsletter-form input[type="submit"].button{
display:inline-block; width:100%; cursor:pointer; border:0;
font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
color:var(--c-light); background:var(--c-primary); border-radius:var(--r-btn); padding:16px 34px;
transition:background .3s,transform .3s;
}
#newsletter-form input[type="submit"].button:hover{ background:var(--c-primary-dark); }
#newsletter-form input[type="submit"].button:active{ transform:translateY(1px); }
#newsletter-form input[type="submit"].button:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
/* force full-width, left-aligned layout (override Webware form column/width defaults) */
#newsletter-form .fieldset,
#newsletter-form .form-container,
#newsletter-form .first_name_wrap,
#newsletter-form .last_name_wrap,
#newsletter-form .email_wrap,
#newsletter-form .checkbox_wrap,
#newsletter-form .captcha_wrap,
#newsletter-form .submit_wrap{ width:100%; max-width:none; float:none; margin-left:0; margin-right:0; text-align:left; }
#newsletter-form input.input:not([type="submit"]):not([type="checkbox"]),
#newsletter-form input[type="submit"].button{ max-width:none; }
/* ============================================================
LOGIN (member login · scoped to .ps-login-page)
============================================================ */
.ps-login-page{ padding:50px 0; }
.ps-login-form-wrap{
max-width:520px; margin:0 auto;
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.08); border-radius:var(--r-md);
padding:clamp(30px,4vw,52px); box-shadow:0 20px 50px rgba(var(--c-ink-rgb),.06);
}
.ps-login-form-wrap h4{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.16; color:var(--c-ink); margin:0 0 clamp(22px,3vw,30px); }
.ps-login-form-wrap form.settings{ margin:0; }
/* labels + text fields */
.ps-login-page label{ display:block; font-family:var(--font-body); font-weight:500 !important; font-size:.72rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); margin:0 0 8px; }
.ps-login-page label .error,
.ps-login-page .error{ color:var(--c-error); }
.ps-login-page .ps-text{
width:100%; max-width:none; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.16); border-radius:var(--r-sm);
padding:13px 16px; transition:border-color .3s,box-shadow .3s;
}
.ps-login-page .ps-text:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14); }
/* password field + show/hide toggle */
.ps-login-page .password-container{ position:relative; }
.ps-login-page .password-container .ps-text{ padding-right:44px; }
.ps-login-page .toggle-password{ position:absolute; top:50%; transform:translateY(-50%); color:var(--c-ink-3); cursor:pointer; font-size:1rem; }
.ps-login-page .toggle-password:hover{ color:var(--c-primary); }
.ps-login-page .password-container + p{ font-family:var(--font-body); font-size:.82rem; color:var(--c-ink-3); margin:8px 0 0; }
/* login button */
/* primary submit — covers login + forgot-password submit buttons */
.ps-login-page input[type="submit"].button{
display:inline-block; width:100%; min-width:100%; cursor:pointer; border:0; margin-top:22px;
font-family:var(--font-body); font-weight:500 !important; font-size:13px !important; letter-spacing:.16em; text-transform:uppercase;
color:var(--c-light); background:var(--c-primary); border-radius:var(--r-btn); padding:16px 34px;
transition:background .3s,transform .3s;
}
.ps-login-page input[type="submit"].button:hover{ background:var(--c-primary-dark); }
.ps-login-page input[type="submit"].button:active{ transform:translateY(1px); }
/* forgot-password line + links */
.ps-login-form-wrap > p{ font-family:var(--font-body); font-size:.92rem; color:var(--c-ink-2); margin:20px 0 0; }
.ps-login-form-wrap a{ color:var(--c-primary); text-decoration:none; transition:color .3s; }
.ps-login-form-wrap a:hover{ color:var(--c-primary-dark); text-decoration:underline; }
/* separator */
.ps-login-page .ps-separator{ height:1px; background:rgba(var(--c-ink-rgb),.12); border:0; margin:clamp(24px,3vw,32px) 0; }
/* register / signup */
.ps-login-page .signup-container{ text-align:center; }
.ps-login-page .signup-container p{ font-family:var(--font-body); font-size:.95rem; color:var(--c-ink-2); margin:0 0 14px; }
.ps-login-page .ps-register-button{
display:inline-block; width:100%; min-width:100%; cursor:pointer;
font-family:var(--font-body); font-weight:500; font-size:13px !important; letter-spacing:.14em; text-transform:uppercase;
color:var(--c-ink); background:transparent; border:1px solid var(--c-ink); border-radius:var(--r-btn); padding:14px 34px;
transition:background .3s,color .3s,border-color .3s;
}
.ps-login-page .ps-register-button:hover{ background:var(--c-ink); color:var(--c-light); border-color:var(--c-ink); }
/* forgot password (reuses .ps-login-page label / .ps-text / submit rules) */
.ps-login-page .ps-forgot-password{
max-width:520px; margin:0 auto;
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.08); border-radius:var(--r-md);
padding:clamp(30px,4vw,52px); box-shadow:0 20px 50px rgba(var(--c-ink-rgb),.06);
}
.ps-login-page .forgot-password-title h4{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.16; color:var(--c-ink); margin:0 0 clamp(16px,2.2vw,22px); }
.ps-login-page .ps-forgot-password form.settings{ margin:0; }
.ps-login-page .ps-forgot-password form p{ font-family:var(--font-body); font-weight:300; font-size:1.02rem; line-height:1.7; color:var(--c-ink-2); margin:0 0 22px; }
/* ============================================================
REGISTER (member registration · scoped to #register-form)
============================================================ */
#register-form{ padding:50px 0; }
#register-form form{
max-width:600px; margin:0 auto;
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.08); border-radius:var(--r-md);
padding:clamp(30px,4vw,52px); box-shadow:0 20px 50px rgba(var(--c-ink-rgb),.06);
}
#register-form .hide{ display:none; }
/* intro (Webware ) + fieldset legend */
#register-form document{ display:block; }
#register-form document p{ font-family:var(--font-body); font-weight:300; font-size:1.05rem; line-height:1.7; color:var(--c-ink-2); margin:0 0 clamp(20px,3vw,28px); }
#register-form .fieldset{ border:0; margin:0; padding:0; min-width:0; width:100%; }
#register-form legend{ display:block; float:none; width:100%; padding:0; margin:0 0 20px; font-family:var(--font-head); font-weight:500; font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.2; color:var(--c-ink); }
/* field wraps (incl. password, confirm-password [class-less div], phone) — full width, left */
#register-form .first_name_wrap,
#register-form .last_name_wrap,
#register-form .email_wrap,
#register-form .password_wrap,
#register-form .phone_wrap,
#register-form .password_wrap + div{ width:100%; max-width:none; float:none; text-align:left; margin:0 0 18px; }
/* labels */
#register-form label{ display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); margin:0 0 8px; }
#register-form .required{ color:var(--c-primary); margin-left:3px; }
/* text / password / phone inputs */
#register-form input.input:not([type="submit"]):not([type="checkbox"]),
#register-form .phone_number{
width:100%; max-width:none; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.16); border-radius:var(--r-sm);
transition:border-color .3s,box-shadow .3s;
}
#register-form input.input:not([type="submit"]):not([type="checkbox"]):focus,
#register-form .phone_number:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14); }
#register-form .phone_number::placeholder{ color:var(--c-ink-3); }
#register-form .intl-tel-input{ display:block; width:100%; }
/* password show/hide */
#register-form .password-container{ position:relative; }
#register-form .password-container .input{ padding-right:44px !important; }
#register-form .toggle-password{ position:absolute; top:50%; transform:translateY(-50%); color:var(--c-ink-3); cursor:pointer; font-size:1rem; }
#register-form .toggle-password:hover{ color:var(--c-primary); }
/* validation error */
#register-form .error{ display:block; font-family:var(--font-body); font-size:.8rem; color:var(--c-error); margin-top:6px; }
/* opt-in checkbox */
#register-form .form-container{ margin-top:4px; text-align:left; }
#register-form .checkbox_wrap{ width:100%; float:none; margin:0 0 20px; }
#register-form .checkbox_wrap > p{ margin:0; }
#register-form .checkbox_wrap .float-left{ float:none !important; }
#register-form .checkbox_wrap label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-family:var(--font-body); font-weight:400; font-size:.95rem; letter-spacing:0; text-transform:none; line-height:1.5; color:var(--c-ink-2); margin:0; }
#register-form input[type="checkbox"].input{ flex-shrink:0; width:18px; height:18px; margin:1px 0 0; accent-color:var(--c-primary); cursor:pointer; }
/* captcha + submit */
#register-form .captcha_wrap{ width:100%; float:none; margin:0 0 20px; }
#register-form .recaptcha-block{ border:0; padding:0; background:none; }
#register-form .submit_wrap{ width:100%; float:none; margin:0; text-align:left; }
#register-form .submit_wrap > label{ display:none; }
#register-form input[type="submit"].button{
display:inline-block; width:100%; min-width:100%; cursor:pointer; border:0;
font-family:var(--font-body); font-weight:500 !important; font-size:13px !important; letter-spacing:.16em; text-transform:uppercase;
color:var(--c-light); background:var(--c-primary); border-radius:var(--r-btn); padding:16px 34px;
transition:background .3s,transform .3s;
}
#register-form input[type="submit"].button:hover{ background:var(--c-primary-dark); }
#register-form input[type="submit"].button:active{ transform:translateY(1px); }
#register-form input[type="submit"].button:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
/* ============================================================
SITE HEADER (Webware global chrome · scoped to #header)
Light/cream theme. Targets #header + specific classes/#mainNav
only — never the locked page wrappers. !important used to beat
the live Webware theme where it sets colors/backgrounds.
============================================================ */
#header.new-header{
background:var(--c-paper) !important;
border-bottom:1px solid rgba(var(--c-ink-rgb),.10);
}
/* ---- logo ---- */
#header .logo-container img{ height:130px; width:auto; display:block; }
@media screen and (max-width:1023.5px){
#header .logo-container img{ height:106px; width:auto; margin:0 auto; }
}
/* ---- top CTA row (phone + Contact Us) & mobile bars share these ---- */
#header .sitePhoneNumber{
font-family:var(--font-body); font-weight:500; font-size:15px; letter-spacing:.02em;
color:var(--c-ink) !important; text-decoration:none; transition:color .3s ease;
}
#header .sitePhoneNumber i{ color:var(--c-primary); }
#header .sitePhoneNumber:hover{ color:var(--c-primary) !important; }
#header .button{
display:inline-block; font-family:var(--font-body); font-weight:500; font-size:13px;
letter-spacing:.14em; text-transform:uppercase; line-height:1;
color:var(--c-light) !important; background:var(--c-primary) !important;
border:0; border-radius:var(--r-pill); padding:12px 26px; text-decoration:none;
transition:background .3s ease, transform .3s ease;
}
#header .button:hover{ background:var(--c-primary-dark) !important; transform:translateY(-1px); }
/* small breathing room between phone and CTA in the top row */
#header .logo-section .menu.justify-small-center > li{ display:flex; align-items:center; }
#header .logo-section .menu.justify-small-center > li + li{ margin-left:6px; }
/* ---- desktop nav: top-level links ---- */
#header #mainNav{ background:transparent; }
#header #mainNav > li{ margin:0; }
#header #mainNav > li > a{
position:relative; font-family:var(--font-body); font-weight:500; font-size:14.5px;
letter-spacing:.02em; color:var(--c-ink) !important; padding:14px 14px;
text-decoration:none; transition:color .3s ease;
}
#header #mainNav > li > a span{ color:inherit !important; }
#header #mainNav > li > a:hover{ color:var(--c-primary) !important; }
/* accent underline — TOP-LEVEL ONLY (direct child) so it can't bleed into
the .is-dropdown-submenu items; built on ::before so it never clashes
with the caret ::after */
#header #mainNav > li > a::before{
content:""; position:absolute; left:14px; right:14px; bottom:9px; height:1.5px;
background:var(--c-primary); transform:scaleX(0); transform-origin:left center;
transition:transform .3s ease;
}
#header #mainNav > li > a:hover::before{ transform:scaleX(1); }
/* current page (Webware tags the with .active) — held-open underline */
#header #mainNav > li.active > a{ color:var(--c-primary) !important; }
#header #mainNav > li.active > a::before{ transform:scaleX(1); }
/* ---- ONE caret on dropdown parents ----
Parents carry BOTH has-submenu (theme) + is-dropdown-submenu-parent
(Foundation); each tries to draw a caret on a different pseudo-element.
Force a single CSS-triangle on a::after, suppress the / ones. */
#header #mainNav > li.is-dropdown-submenu-parent > a{ padding-right:26px; }
#header #mainNav .is-dropdown-submenu-parent > a::after{
content:"" !important; position:absolute; right:10px; left:auto; top:50%; transform:translateY(-50%);
width:0; height:0; margin:0 !important;
border-left:4px solid transparent; border-right:4px solid transparent;
border-top:5px solid var(--c-ink-3);
transition:transform .3s ease, border-top-color .3s ease;
}
#header #mainNav .is-dropdown-submenu-parent > a > span::after,
#header #mainNav .is-dropdown-submenu-parent::after{
display:none !important; content:none !important; border:0 !important;
}
/* flip + tint when the panel is open */
#header #mainNav .is-dropdown-submenu-parent.is-active > a::after,
#header #mainNav .is-dropdown-submenu-parent[aria-expanded="true"] > a::after{
transform:translateY(-50%) rotate(180deg); border-top-color:var(--c-primary);
}
/* ---- dropdown panel (solid — never let it render transparent) ---- */
#header #mainNav .is-dropdown-submenu{
background:var(--c-light) !important;
border:1px solid rgba(var(--c-ink-rgb),.10);
border-radius:var(--r-sm);
box-shadow:0 18px 44px rgba(var(--c-ink-rgb),.14);
padding:8px 0; min-width:244px;
}
#header #mainNav .is-dropdown-submenu li{ margin:0; }
#header #mainNav .is-dropdown-submenu a{
font-family:var(--font-body); font-weight:400; font-size:14px; letter-spacing:.01em;
color:var(--c-ink-2) !important; padding:10px 20px; line-height:1.35;
text-decoration:none; transition:color .3s ease, background .3s ease;
}
#header #mainNav .is-dropdown-submenu a span{ color:inherit !important; }
#header #mainNav .is-dropdown-submenu a:hover{ color:var(--c-primary) !important; background:var(--c-tint); }
#header #mainNav .is-dropdown-submenu li.active > a{ color:var(--c-primary) !important; }
/* ---- mobile: hamburger + contact bars (below 1024px) ---- */
#header .sidenav-container{ background:transparent !important; }
#header .openMenu{ background:transparent; border:0; cursor:pointer; padding:6px 8px; }
#header .openMenu .fa-bars,
#header .openMenu .icon{ color:var(--c-primary); transition:color .3s ease; }
#header .openMenu:hover .fa-bars,
#header .openMenu:hover .icon{ color:var(--c-primary); }
#header .mobile-contact-number-section{ text-align:center; padding:0; }
#header .mobile-contact-button-section{ text-align:center; padding:0; }
/* ============================================================
MOBILE SLIDE-OUT MENU (#sidenav off-canvas · matches desktop nav)
Foundation accordion (expands in place via aria-expanded).
NOTE: no explicit width — a width override fights Foundation's
slide transform and lets the panel peek when closed.
============================================================ */
/* dim the page behind the open panel */
.js-off-canvas-overlay{ background:rgba(var(--c-ink-rgb),.45) !important; }
/* panel */
#sidenav{ background:var(--c-paper) !important; box-shadow:-14px 0 40px rgba(var(--c-ink-rgb),.16); padding:8px 0; }
#sidenav .accordion-menu{ background:transparent; }
#sidenav .accordion-menu > li{ border-bottom:1px solid rgba(var(--c-ink-rgb),.08); }
/* top-level links */
#sidenav .accordion-menu > li > a{
position:relative; font-family:var(--font-body); font-weight:500; font-size:15.5px;
letter-spacing:.02em; color:var(--c-ink) !important; background:transparent; padding:15px 22px;
text-decoration:none; transition:color .3s ease, background .3s ease;
}
#sidenav .accordion-menu > li > a span{ color:inherit !important; }
#sidenav .accordion-menu > li > a:hover{ color:var(--c-primary) !important; background:var(--c-tint); }
/* current page — primary text + accent left bar (vertical answer to the desktop underline) */
#sidenav .accordion-menu > li.active > a{ color:var(--c-primary) !important; }
#sidenav .accordion-menu > li.active > a::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c-primary);
}
/* nested accordion submenu — recessed lavender panel */
#sidenav .is-accordion-submenu{ background:var(--c-tint); }
#sidenav .is-accordion-submenu > li{ border-top:1px solid rgba(var(--c-ink-rgb),.06); }
#sidenav .is-accordion-submenu a{
font-family:var(--font-body); font-weight:400; font-size:14px; letter-spacing:.01em;
color:var(--c-ink-2) !important; background:transparent !important; padding:12px 22px; text-decoration:none;
transition:color .3s ease, background .3s ease;
}
#sidenav .is-accordion-submenu a span{ color:inherit !important; }
#sidenav .is-accordion-submenu a:hover{ color:var(--c-primary) !important; background:var(--c-tint-2); }
#sidenav .is-accordion-submenu li.active > a{ color:var(--c-primary) !important; }
/* ONE caret on accordion parents (suppress theme/foundation doubles), flips when expanded */
#sidenav .is-accordion-submenu-parent > a{ padding-right:40px; }
#sidenav .is-accordion-submenu-parent > a::after{
content:"" !important; position:absolute; right:22px; left:auto; top:50%; transform:translateY(-50%);
width:0; height:0; margin:0 !important;
border-left:4px solid transparent; border-right:4px solid transparent;
border-top:5px solid var(--c-ink-3);
transition:transform .3s ease, border-top-color .3s ease;
}
#sidenav .is-accordion-submenu-parent > a > span::after,
#sidenav .is-accordion-submenu-parent::after{ display:none !important; content:none !important; border:0 !important; }
#sidenav .is-accordion-submenu-parent[aria-expanded="true"] > a::after{
transform:translateY(-50%) rotate(180deg); border-top-color:var(--c-primary) !important;
}
/* ============================================================
TESTIMONIALS / REVIEWS (Webware reviews widget)
Submission form (#reviewform) + reviews list. Scoped to the
widget's own classes — never the locked page wrappers.
============================================================ */
/* ---------- submission form card ---------- */
#form{ margin-bottom:clamp(40px,6vw,72px); }
#form .reviews-form-container{
background:var(--c-tint); border:1px solid rgba(var(--c-ink-rgb),.06);
border-radius:var(--r-md); box-shadow:var(--shadow-1);
padding:clamp(28px,4vw,52px) clamp(22px,4vw,48px);
}
#reviewform .rating-experience-heading{
font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.34em;
text-transform:uppercase; color:var(--c-primary); margin:0 0 10px;
}
#reviewform h1.text-center{
font-family:var(--font-head); font-weight:600; font-size:clamp(2rem,4vw,3rem);
line-height:1.08; color:var(--c-ink); margin:0 0 14px;
}
#reviewform h1.text-center b{ font-weight:600; }
#reviewform .review-feedback-form-text,
#reviewform > p.text-center{
font-family:var(--font-body); font-weight:300; font-size:1.02rem; line-height:1.7;
color:var(--c-ink-2); margin:0 0 6px;
}
/* star input (glyphs drawn via FontAwesome — widget JS toggles the on-state) */
#reviewform .rating-star{ display:inline-flex; align-items:center; gap:8px; }
#reviewform .rating-star span{
cursor:pointer; font-size:32px; line-height:1; color:rgba(var(--c-ink-rgb),.16);
transition:color .2s ease, transform .2s ease;
}
#reviewform .rating-star span:hover{ transform:translateY(-1px); }
#reviewform .rating-star span:hover,
#reviewform .rating-star span.active,
#reviewform .rating-star span.selected,
#reviewform .rating-star span.on,
#reviewform .rating-star span.hover,
#reviewform .rating-star span.checked{ color:var(--c-star); }
#reviewform .reset-stars{ font-size:15px; color:var(--c-ink-3); cursor:pointer; margin-left:6px; transition:color .2s ease; }
#reviewform .reset-stars:hover{ color:var(--c-primary); }
/* fields */
#reviewform .input-fields{ margin:0 0 18px; text-align:left; }
#reviewform .input-field-label,
#reviewform .input-field-feedback{
display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem;
letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink); margin:0;
}
#reviewform .input-field-label .required{ color:var(--c-primary); margin-left:3px; }
#reviewform input.name,
#reviewform input.text,
#reviewform textarea.text{
width:100%; font-family:var(--font-body); font-weight:300; font-size:1rem; color:var(--c-ink);
background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.16); border-radius:var(--r-sm);
padding:13px 16px; margin-top:8px; transition:border-color .3s ease, box-shadow .3s ease;
}
#reviewform textarea.text{ min-height:130px; resize:vertical; }
#reviewform input.name:focus,
#reviewform input.text:focus,
#reviewform textarea.text:focus{
outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.14);
}
/* captcha + submit */
#reviewform .review-captcha{ margin:6px 0 20px; }
#reviewform input.button,
#reviewform #submitBtn{
display:inline-block; width:100%; font-family:var(--font-body); font-weight:500; font-size:13px;
letter-spacing:.16em; text-transform:uppercase; color:var(--c-light) !important; background:var(--c-primary);
border:0; border-radius:var(--r-pill); padding:15px 30px; cursor:pointer;
transition:background .3s ease, transform .2s ease;
}
#reviewform input.button:hover,
#reviewform #submitBtn:hover{ background:var(--c-primary-dark); transform:translateY(-1px); }
/* thank-you (post-submit) state */
.positive-feedback-services{ text-align:center; padding:clamp(20px,3vw,36px) 0; }
.positive-feedback-services h1{ font-family:var(--font-head); font-weight:600; font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--c-ink); margin:0 0 12px; }
.positive-feedback-services h2{ font-family:var(--font-body); font-weight:400; font-size:1.1rem; color:var(--c-ink-2); margin:0 0 22px; }
.review-logo a{ display:inline-block; transition:transform .2s ease, opacity .2s ease; }
.review-logo a:hover{ transform:translateY(-2px); opacity:.85; }
.review-logo img{ max-height:52px; width:auto; }
/* ---------- reviews list ---------- */
.reviews-form-container.margin-bottom-2 > p.padding-bottom-2,
.reviews-form-container.margin-bottom-2 > p.padding-bottom-2 strong{
font-family:var(--font-head); font-weight:600; font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--c-ink);
}
.review-list-container{ list-style:none; margin:8px 0 0; padding:0; }
.review-list-container > li{
background:var(--c-light); border:1px solid rgba(var(--c-ink-rgb),.07); border-radius:var(--r-md);
box-shadow:var(--shadow-1); padding:clamp(24px,3vw,38px); margin:0 0 22px;
transition:box-shadow .3s ease, transform .3s ease;
}
.review-list-container > li:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.review-list-container .review-img img{ height:30px; width:auto; }
.review-list-container .user-profile strong{
display:block; font-family:var(--font-head); font-weight:600; font-size:1.3rem; color:var(--c-ink); margin:0 0 6px;
}
.review-list-container .star-ratings-css{ margin:0 0 12px; line-height:0; }
.review-list-container .star-rating-icon{ width:17px; height:17px; margin-right:2px; fill:rgba(var(--c-ink-rgb),.16); }
.review-list-container .star-rating-icon.active{ fill:var(--c-star); }
.review-list-container .review-text p{
font-family:var(--font-body); font-weight:300; font-size:1.02rem; line-height:1.8; color:var(--c-ink-2); margin:0;
}
.review-list-container .review-text p:empty{ display:none; }
.review-list-container .review-date{
font-family:var(--font-body); font-weight:500; font-size:.72rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap;
}
/* pagination */
.reviews-form-container .pagination{ margin-top:14px; }
.reviews-form-container .pagination a,
.reviews-form-container .pagination span.current{
display:inline-block; min-width:38px; padding:8px 12px; margin:0 3px; border-radius:var(--r-sm);
font-family:var(--font-body); font-size:14px; text-decoration:none; color:var(--c-ink-2);
border:1px solid rgba(var(--c-ink-rgb),.12); transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.reviews-form-container .pagination a:hover{ color:var(--c-primary); border-color:var(--c-primary); }
.reviews-form-container .pagination span.current{ background:var(--c-primary); color:var(--c-light); border-color:var(--c-primary); }
/* ============================================================
FOOTER (Webware global chrome · scoped to #footer)
Deep-indigo footer to close the page. Logo badges are framed
in light chips — they're opaque JPGs, so they'd otherwise read
as white boxes on the dark ground.
============================================================ */
#footer{
background:var(--c-ink-deep); color:var(--c-on-dark);
padding:0; font-family:var(--font-body);
}
#footer hr{ border:0; border-top:1px solid rgba(var(--c-white-rgb),.12); }
#footer .border-bottom-small{ border-bottom:1px solid rgba(var(--c-white-rgb),.10); }
@media (min-width:1024px){ #footer .border-bottom-small{ border-bottom:0; } }
/* column headings */
#footer .footer2 h4{
font-family:var(--font-head); font-weight:600; font-size:1.35rem; letter-spacing:.01em;
color:var(--c-on-dark-3); margin:0 0 18px;
}
#footer .footer2 h4::after{ content:""; display:block; width:42px; height:2px; background:var(--c-accent); margin:12px auto 0; }
@media (min-width:1024px){ #footer .footer2 h4::after{ margin-left:0; } }
#footer .column-container{ padding-bottom:24px; }
/* links column */
#footer .links-section ul{ margin:0; padding:0; list-style:none; }
#footer .links-section li{ margin:0 0 10px; }
#footer .links-section li a{
font-size:14.5px; letter-spacing:.02em; color:var(--c-on-dark); text-decoration:none; transition:color .3s ease;
}
#footer .links-section li a:hover{ color:var(--c-accent-2); }
/* social icons (assumes the include outputs ) */
#footer .social-media-icons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0; padding:0; list-style:none; }
@media (min-width:1024px){ #footer .social-media-icons{ justify-content:flex-start; } }
#footer .social-media-icons li{ margin:0; }
#footer .social-media-icons a{
display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
border-radius:var(--r-pill); color:var(--c-on-dark); border:1px solid rgba(var(--c-white-rgb),.18);
font-size:17px; text-decoration:none; padding:0 !important;
transition:color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
#footer .social-media-icons a:hover{ color:var(--c-light); background:var(--c-primary); border-color:var(--c-primary); transform:translateY(-2px); }
#footer .social-media-icons a i,
#footer .social-media-icons a svg{ color:var(--c-on-dark) !important; fill:currentColor; }
#footer .social-media-icons a:hover i,
#footer .social-media-icons a:hover svg{ color:var(--c-light) !important; }
/* newsletter */
#footer .newsletter .button{
display:inline-block; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.14em;
text-transform:uppercase; color:var(--c-light) !important; background:var(--c-primary);
border:0; border-radius:var(--r-pill); padding:13px 26px; text-decoration:none;
transition:background .3s ease, transform .2s ease;
}
#footer .newsletter .button:hover{ background:var(--c-primary-dark); transform:translateY(-1px); }
/* contact */
#footer .contact-section a{ color:var(--c-on-dark); text-decoration:none; transition:color .3s ease; }
#footer .contact-section a:hover{ color:var(--c-accent-2); }
#footer .contact-section i{ color:var(--c-accent); font-size:14px; line-height:1; flex:0 0 auto; width:15px; text-align:center; }
#footer .actual-address{ display:flex; align-items:flex-start; gap:10px; justify-content:center; font-size:14.5px; line-height:1.7; color:var(--c-on-dark); margin:0 0 14px; }
#footer .actual-address i{ margin-top:.34em; }
#footer .address-container br{ display:inline !important; }
@media (min-width:1024px){ #footer .actual-address{ justify-content:flex-start; } }
#footer .contact-number,
#footer .contact-email{ margin:0 0 8px; }
#footer .footer-phone,
#footer .footer-email{ display:inline-flex; align-items:center; gap:9px; font-size:14px; letter-spacing:.02em; }
/* ---- logo strip (framed light chips for opaque JPG badges) ---- */
#footer .mbs-footer-logos{
display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
gap:clamp(12px,2vw,22px); padding:6px 0 4px;
}
#footer .mbs-footer-logos img{
display:block; max-height:140px; width:auto; background:var(--c-light);
border-radius:var(--r-sm); padding:10px 16px; box-shadow:0 8px 22px rgba(var(--c-ink-rgb),.45);
}
#footer .mbs-footer-logos a{ display:inline-block; transition:transform .3s ease; }
#footer .mbs-footer-logos a:hover{ transform:translateY(-3px); }
/* copyright */
#footer .copyright{ font-size:13px; line-height:1.7; color:var(--c-on-dark-mute); margin:0; }
#footer .copyright a{ color:var(--c-on-dark); text-decoration:none; transition:color .3s ease; }
#footer .copyright a:hover{ color:var(--c-accent-2); }
/* ============================================================
BACK-TO-TOP BUTTON (Webware smooth-scroll · scoped)
Overrides the FontAwesome fa-border box + fa-pull-right float
so the arrow sits centred in a clean circular button.
============================================================ */
.back-to-top-button{
position:fixed; top:auto; left:auto; right:clamp(18px,3vw,30px); bottom:clamp(18px,3vw,30px);
z-index:60; display:inline-flex; align-items:center; justify-content:center;
width:52px; height:52px; border-radius:var(--r-pill);
background:var(--c-primary); color:var(--c-light); text-decoration:none;
box-shadow:0 10px 30px rgba(var(--c-ink-rgb),.30);
transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.back-to-top-button:hover{ background:var(--c-primary-dark); color:var(--c-light); transform:translateY(-3px); box-shadow:0 16px 40px rgba(var(--c-ink-rgb),.36); }
.back-to-top-button:active{ transform:translateY(-1px); }
.back-to-top-button:focus-visible{ outline:2px solid var(--c-light); outline-offset:3px; }
/* neutralise the FontAwesome utilities on the icon, keep the 270° rotate (points up) */
.back-to-top-button i{
color:inherit; font-size:18px; line-height:1;
border:0 !important; padding:0 !important; border-radius:0 !important; /* kill fa-border box */
float:none !important; margin:0 !important; width:auto !important; /* kill fa-pull-right */
}
@media (max-width:640px){
.back-to-top-button{ width:46px; height:46px; }
.back-to-top-button i{ font-size:16px; }
}
/* ============================================================
SERVICE-AREAS HUB — city chips
============================================================ */
.mbs-area-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:clamp(28px,4vw,44px) 0 0; }
.mbs-area-chip{
display:inline-flex; align-items:center; gap:11px;
padding:15px 26px;
background:var(--c-light);
border:1px solid rgba(var(--c-ink-rgb),.10);
border-radius:var(--r-pill);
font-family:var(--font-body); font-weight:500; font-size:1rem; letter-spacing:.01em;
color:var(--c-ink); text-decoration:none;
box-shadow:var(--shadow-1);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease;
}
.mbs-area-chip i{ color:var(--c-primary); font-size:15px; transition:color .3s ease; }
.mbs-area-chip:hover,
.mbs-area-chip:focus-visible{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--c-primary); color:var(--c-primary); }
.mbs-area-chip:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
.mbs-area-note{ max-width:660px; margin:clamp(22px,3vw,32px) auto 0; text-align:center; }
/* ============================================================
TALLAHASSEE — trust points grid
============================================================ */
.mbs-trust-grid{
list-style:none; padding:0; margin:clamp(30px,4vw,50px) 0 0;
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2.4vw,26px) clamp(26px,3vw,46px);
}
.mbs-trust-grid li{
position:relative; padding-left:26px;
font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.65; color:var(--c-ink-2);
}
.mbs-trust-grid li::before{ content:""; position:absolute; left:0; top:.62em; width:13px; height:1px; background:var(--c-primary); }
@media all and (max-width:900px){ .mbs-trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media all and (max-width:560px){ .mbs-trust-grid{ grid-template-columns:1fr; } }
/* ============================================================
MOTION + A11Y
============================================================ */
@keyframes mbsReveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.mbs-btn:focus-visible,
.mbs-underline:focus-visible,
.mbs-inline-link:focus-visible,
.mbs-faq__q:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){
*{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media all and (max-width:1024px){
#header #mainNav > li > a {
padding: 10px 4px;
}
#footer .newsletter .button {
padding: 13px 20px;
}
#footer .footer-phone, #footer .footer-email {
gap: 5px;
}
}
.billing_postal_suffix_wrap {
display: none;
}
video.home-video-width {
width: 100%;
height: 100%;
}
video {
object-fit: contain;
}
.home1 {
line-height: 0px;
}
.home1 .inner-content-div.bn-content.aos-init.aos-animate {
max-width: 100% !important;
text-align: center !important;
}
.home-testimonial-list .slick-dots {
bottom: -60px;
}
.mbs-contact i.fas.fa-phone {
transform: rotate(90deg) !important;
}