/* -----------------------------------------------------------------------------
Premium refinements layer. Loaded last in the bundle so it overrides earlier
module rules. Purpose: soften harsh borders and shadows, introduce fluid
spacing, tighten the "boxy" feeling, and let the brand red land as small,
deliberate accents instead of blanket fills.
Nothing in here changes copy or structure — presentation only.
---------------------------------------------------------------------------- */
/* ---------- Global typography polish --------------------------------------- */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
/* Softer link underline offset for editorial feel. */
a{text-decoration-thickness:1px;text-underline-offset:4px}
/* ---------- Global alignment guardrails ------------------------------------
Force one horizontal gutter across the entire page so the logo, nav, section
headings, cards, and buttons all sit on the same left edge. Sections that
have their own inner `.container` will use its padding — this rule catches
any wrapper that forgot to nest one. */
main,
body{padding:0;margin:0}
.container{padding-left:var(--rjw-gutter);padding-right:var(--rjw-gutter)}
/* Explicit padding on the header primary bar so on <340px devices the brand
logo doesn't sit against the screen edge. Uses the same var as .container
so brand + section content are pixel-perfectly aligned. */
.global-site-header .container.global-site-header__bar{
padding-left:var(--rjw-gutter);
padding-right:var(--rjw-gutter);
}
.global-site-header__brand{margin-left:0;padding-left:0}
/* Header topbar inner also uses the same gutter. */
.global-site-header__topbar-inner{padding-left:var(--rjw-gutter);padding-right:var(--rjw-gutter)}
.global-site-header__topbar-inner.container{padding-left:var(--rjw-gutter);padding-right:var(--rjw-gutter)}
/* Hero rules live in assets/css/hero.css — this layer no longer overrides them. */
/* Trust-bar items outside the hero — icon alignment fix. */
.trust-bar__item{display:inline-flex;align-items:center;gap:.5rem;line-height:1.2}
.trust-bar__item svg{display:block;flex-shrink:0}
/* ---------- Mobile nav: strip the CSS chevron next to Services/Service Areas
The parent link now visually looks the same as every other row (Home,
Portfolio, About, …). Tap still opens the accordion because the JS handler
is unchanged. */
.mobile-panel__nav .has-dropdown > a::after,
.mobile-panel__nav .has-dropdown > a::before,
.mobile-panel__nav .has-dropdown.is-open > a::after{
content:none !important;
display:none !important;
border:0 !important;
background:none !important;
width:0 !important;height:0 !important;
margin:0 !important;
}
/* ---------- Utility classes replacing template inline styles ---------------
Every `style="..."` attribute was removed from PHP templates. These classes
restore the same visual result via a single CSS source of truth. */
.about-photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--rjw-radius-lg)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.service-area__map--stacked{margin-top:1.5rem}
.testimonials--two-col{grid-template-columns:1fr 1fr}
@media(max-width:640px){.testimonials--two-col{grid-template-columns:1fr}}
.portfolio-hero-figure{
margin:0 0 2rem;
border-radius:var(--rjw-radius-lg);
overflow:hidden;
box-shadow:var(--rjw-shadow-lg);
}
.portfolio-hero-figure img{width:100%;display:block}
.mt-6{margin-top:3rem}
/* ---------- Sections: fluid rhythm, less "block-and-band" feel ------------- */
.section{padding-block:clamp(3.5rem,7vw,7rem)}
.section--tight{padding-block:clamp(2rem,4vw,3.5rem)}
.section--cream{background:#faf9f7}
/* Add a whisper of texture to alternating sections so they don't feel like
flat rectangles stacked on top of each other. */
.section--cream{position:relative;isolation:isolate}
.section--cream::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(120% 60% at 8% 0%, rgba(200,16,46,.03), transparent 60%),
radial-gradient(120% 60% at 100% 100%, rgba(15,15,15,.025), transparent 60%);
}
/* ---------- Section headers: quieter eyebrow, tighter kerning --------------- */
.eyebrow{
display:inline-block;
font-family:var(--font-body);
font-size:.72rem;font-weight:700;
letter-spacing:.28em;text-transform:uppercase;
color:var(--rjw-accent);
padding-bottom:.75rem;
position:relative;
}
.eyebrow::after{
content:"";position:absolute;left:0;bottom:0;
width:28px;height:2px;background:var(--rjw-accent);border-radius:1px;
}
.section-header{margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-title{font-size:clamp(1.85rem,2.4vw + .8rem,2.85rem);line-height:1.08;letter-spacing:-.02em;margin:.65rem 0 .75rem}
.section-intro{color:var(--rjw-muted);font-size:clamp(1.02rem,.7vw + .85rem,1.15rem);line-height:1.6;max-width:56ch}
/* ---------- Buttons: gentler shadows, spring hover ------------------------- */
.btn{border-radius:999px;padding:.95rem 1.7rem;font-weight:600;letter-spacing:.005em;transition:transform .28s var(--rjw-ease),background .24s ease,color .24s ease,border-color .24s ease,box-shadow .28s ease}
.btn--small{padding:.6rem 1.05rem;font-size:.9rem}
.btn--large{padding:1.1rem 2rem;font-size:1.02rem}
.btn--primary{box-shadow:var(--rjw-shadow-red)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(200,16,46,.55)}
.btn--ghost{background:transparent;color:var(--rjw-ink);border-color:rgba(15,15,15,.16)}
.btn--ghost:hover{background:var(--rjw-ink);color:#fff;border-color:var(--rjw-ink)}
.btn--phone{background:var(--rjw-ink);border-color:var(--rjw-ink)}
/* ---------- Cards: hairline borders, layered shadows, generous radius ------ */
.service-card,
.testimonial-card,
.location-card,
.why-us__item,
.related-services a{
border-radius:var(--rjw-radius-lg);
border:1px solid var(--rjw-line);
box-shadow:var(--rjw-shadow-xs);
transition:transform .35s var(--rjw-ease),box-shadow .35s ease,border-color .35s ease;
}
.service-card:hover,
.testimonial-card:hover,
.location-card:hover,
.why-us__item:hover,
.related-services a:hover{
transform:translateY(-4px);
box-shadow:var(--rjw-shadow);
border-color:rgba(15,15,15,.1);
}
.service-card{padding:clamp(1.5rem,2.2vw,2.1rem)}
.service-card__icon{background:linear-gradient(135deg,var(--rjw-accent-tint) 0%,rgba(200,16,46,.04) 100%);border-radius:14px}
.service-card::after{background:var(--rjw-accent)}
.service-card__title{font-weight:700}
/* Featured (dark) service card feature — softer edges + red glow. */
.services-grid--featured .service-card:first-child{
border-radius:var(--rjw-radius-xl);
box-shadow:0 40px 80px -50px rgba(15,15,15,.5), 0 0 0 1px rgba(255,255,255,.03) inset;
background:radial-gradient(140% 100% at 100% 0%, #1c1c1c 0%, #0a0a0a 60%);
}
.services-grid--featured .service-card:first-child:hover{transform:translateY(-4px);box-shadow:0 60px 100px -55px rgba(15,15,15,.6), 0 0 0 1px rgba(255,255,255,.05) inset}
/* Why-us cards */
.why-us__item{padding:clamp(1.5rem,2vw,1.9rem);background:#fff}
.why-us__icon{
width:44px;height:44px;padding:10px;border-radius:12px;
background:linear-gradient(135deg,var(--rjw-accent-tint),rgba(200,16,46,.04));
color:var(--rjw-accent);
transition:transform .35s var(--rjw-ease),background .3s ease,color .3s ease;
}
.why-us__item:hover .why-us__icon{transform:rotate(-4deg) scale(1.06);background:var(--rjw-accent);color:#fff}
/* .why-us__title, .service-card__title, .how-step__title were downgraded from
to
to keep the homepage heading count reasonable. These rules make
the paragraph render with heading-like typography. */
.why-us__title,
.service-card__title,
.how-step__title{
font-family:var(--font-display);
font-weight:700;
letter-spacing:-.005em;
color:var(--rjw-ink);
margin:0 0 .5rem;
line-height:1.2;
}
.why-us__title{font-size:1.2rem}
.service-card__title{font-size:1.45rem;margin-bottom:.55rem}
.how-step__title{font-size:1.25rem}
.services-grid--featured .service-card:first-child .service-card__title{font-size:clamp(1.75rem,2vw + 1rem,2.5rem);color:#fff}
/* Testimonials — quieter borders, subtle brand-tinted stars, editorial quote. */
.testimonial-card{padding:clamp(1.5rem,2vw,1.9rem);background:#fff}
.testimonial-card__quote{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--rjw-ink);font-size:1.08rem;line-height:1.55}
.testimonial-card__author{border-top:1px solid var(--rjw-hairline);padding-top:1rem}
.testimonial-card__stars{color:#e8a923}
.testimonial-card__avatar{background:linear-gradient(135deg,var(--rjw-accent),var(--rjw-accent-dark))}
/* Location cards */
.location-card{padding:clamp(1.35rem,1.8vw,1.6rem);background:#fff}
.location-card__region{background:var(--rjw-accent-tint);color:var(--rjw-accent-dark);letter-spacing:.14em;font-size:.68rem;padding:.28rem .7rem}
/* Related services */
.related-services a{padding:clamp(1.1rem,1.4vw,1.35rem) clamp(1.25rem,1.6vw,1.6rem);background:#fff}
.related-services a:hover{border-color:rgba(200,16,46,.35)}
/* Portfolio cards — softer shadow, cleaner overlay. */
.portfolio-card{
border-radius:var(--rjw-radius-lg);
box-shadow:var(--rjw-shadow-sm);
transition:transform .4s var(--rjw-ease),box-shadow .4s ease;
}
.portfolio-card:hover{transform:translateY(-3px);box-shadow:var(--rjw-shadow)}
.portfolio-card__overlay{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);padding:1.5rem}
/* ---------- Trust bar: kill the double horizontal rule ---------------------- */
.trust-bar{
border-top:0;border-bottom:0;
background:linear-gradient(90deg,transparent 0%,var(--rjw-hairline) 20%,var(--rjw-hairline) 80%,transparent 100%);
padding:1.5rem 1.5rem;
border-radius:999px;
justify-content:center;
gap:1rem 1.75rem;
}
.trust-bar__item{color:var(--rjw-ink)}
.trust-bar__item strong{color:var(--rjw-ink)}
.trust-bar__item svg{color:var(--rjw-accent)}
@media(max-width:640px){
.trust-bar{border-radius:var(--rjw-radius-lg);padding:1.1rem 1.25rem}
}
/* ---------- FAQ: shift the tick from red pill to open chevron -------------- */
.faq__item{border-bottom:1px solid var(--rjw-hairline);padding:1.5rem 0}
.faq__q{gap:1.5rem;font-weight:600;letter-spacing:-.005em}
.faq__q::after{
content:"";width:22px;height:22px;background:transparent;border:1.5px solid rgba(15,15,15,.28);border-radius:50%;
position:relative;flex-shrink:0;transition:transform .3s var(--rjw-ease),border-color .2s ease;
}
.faq__item[open] .faq__q::after{transform:rotate(45deg);border-color:var(--rjw-accent)}
/* Restore the "+" cue drawn as two inner strokes, since we removed the text glyph. */
.faq__q{position:relative}
.faq__q::before{
content:"";position:absolute;right:5px;top:calc(50% - 8px);width:12px;height:12px;pointer-events:none;
background:
linear-gradient(var(--rjw-ink),var(--rjw-ink)) center/12px 1.5px no-repeat,
linear-gradient(var(--rjw-ink),var(--rjw-ink)) center/1.5px 12px no-repeat;
transition:transform .3s var(--rjw-ease),opacity .2s ease;
}
.faq__item[open] .faq__q::before{transform:rotate(90deg);opacity:.4}
/* ---------- How-it-works: quieter number, larger step gap ------------------ */
.how-steps{gap:clamp(1.75rem,3vw,2.5rem)}
.how-step::before{
color:transparent;
background:linear-gradient(135deg,var(--rjw-accent) 0%,#a20d24 100%);
-webkit-background-clip:text;background-clip:text;
font-weight:700;
font-size:2.4rem;
}
.how-step__title{letter-spacing:-.005em;font-weight:700}
/* ---------- Service area map: softer shadow, no hard border ---------------- */
.service-area__map{
border-radius:var(--rjw-radius-lg);
border:0;
box-shadow:var(--rjw-shadow), inset 0 0 0 1px rgba(15,15,15,.06);
}
.service-area__list a{
background:transparent;
border:1px solid var(--rjw-line);
padding:.5rem 1rem;
}
.service-area__list a:hover{background:var(--rjw-accent);border-color:var(--rjw-accent);color:#fff}
/* ---------- CTA band: less flat, add layered depth ------------------------- */
.cta-band{
background:
radial-gradient(80% 60% at 15% 20%, rgba(255,255,255,.14), transparent 60%),
radial-gradient(80% 60% at 90% 90%, rgba(0,0,0,.16), transparent 60%),
linear-gradient(135deg, #c8102e 0%, #a10c23 100%);
}
.cta-band .btn--outline-light{border-color:rgba(255,255,255,.7)}
/* ---------- Breadcrumbs: softer chevron ------------------------------------ */
.breadcrumbs li+li::before{color:rgba(15,15,15,.22)}
/* ---------- Bridge form: rounder inputs, softer chrome --------------------- */
.bridge-form input,
.bridge-form select,
.bridge-form textarea{
border-radius:14px!important;
border:1px solid var(--rjw-line)!important;
transition:border-color .2s ease,box-shadow .2s ease;
}
.bridge-form input:focus,
.bridge-form select:focus,
.bridge-form textarea:focus{
border-color:var(--rjw-accent)!important;
box-shadow:0 0 0 4px rgba(200,16,46,.12)!important;
outline:none;
}
/* ---------- Portfolio filters: hairline chips ------------------------------ */
.portfolio-filters button{border-color:var(--rjw-line);color:var(--rjw-ink)}
.portfolio-filters button:hover{background:var(--rjw-accent-tint);border-color:var(--rjw-accent-tint);color:var(--rjw-accent-dark)}
/* ---------- Mobile refinements: breathing room, no full-bleed edges -------- */
@media(max-width:640px){
.services-grid{gap:1rem}
.why-us{gap:1rem}
.testimonials{gap:1rem}
.cta-band__inner{text-align:center}
.cta-band__actions{justify-content:center}
.cta-band__lead{margin-inline:auto}
.trust-bar{gap:.65rem 1.25rem;font-size:.85rem}
.how-steps{gap:1.5rem}
}