(not a block below it) so
it naturally trails the sentence — same line if it fits, wraps to
its own line if it doesn't, rather than always forcing a 3rd line. */
.svc-list-link {
/* flex (block-level) instead of inline-flex — always starts its own
line below the description, on every row, instead of only
wrapping down when a given row's sentence happened to run out
of horizontal room first */
display: flex;
width: fit-content;
align-items: center;
gap: 4px;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.svc-list-link:hover { color: var(--primary); }
/* Underline only the text, not the icon glyph — underlining the whole
link made the icon look like a separate, disconnected fragment */
.svc-list-link-text { text-decoration: underline; text-underline-offset: 3px; }
.svc-list-link .material-symbols-outlined { font-size: 15px; transition: transform 0.3s var(--ease); }
.svc-list-link:hover .material-symbols-outlined { transform: translateX(3px); }
.svc-list-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.svc-more { grid-area: more; }
/* Shared CTA style for "View All Services" / "See More Services" —
dark by default, gold on hover, so it reads as a bold call to
action rather than a quiet outlined button once real photos
replace the dark placeholder panels around it. Spans the full
width of whichever column it sits in (list column on desktop,
carousel width on mobile) instead of shrinking to its own text. */
.svc-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
padding: 14px 20px;
margin-top: 4px;
border-radius: var(--radius);
background: #131313;
color: #fff;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.svc-cta-btn:hover { background: var(--primary); color: #131313; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(239, 206, 17, 0.3); }
.svc-cta-btn:active { transform: scale(0.97); }
.svc-cta-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.svc-cta-btn .material-symbols-outlined { font-size: 18px; transition: transform 0.3s var(--ease); }
.svc-cta-btn:hover .material-symbols-outlined { transform: translateX(3px); }
/* Auto-advancing progress dots — sits directly under the carousel
on every breakpoint. Active dot expands into a pill and its inner
bar fills over the auto-advance duration; resets to a plain dot
when another slide becomes active. Also acts as a 3rd clickable
"remote control" alongside the tiles/list. */
.svc-progress-dots {
grid-area: dots;
display: flex;
justify-content: center;
gap: 8px;
}
.svc-progress-dot {
position: relative;
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 100px;
background: var(--border);
overflow: hidden;
cursor: pointer;
transition: width 0.3s var(--ease);
}
.svc-progress-dot.is-active { width: 36px; }
.svc-progress-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.svc-progress-fill {
position: absolute;
inset: 0;
width: 0%;
background: var(--primary);
border-radius: 100px;
}
/* Carousel — shared across breakpoints, native scroll-snap so a
real finger swipe on mobile feels native (not JS drag-tracked) */
.svc-carousel {
grid-area: carousel;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.svc-carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.svc-carousel-track::-webkit-scrollbar { display: none; }
.svc-slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: center;
aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
/* 3/2 (not 4/3) so the carousel column's height lands flush with the
list column's bottom edge (4 rows + the "View All Services" row) at
the 1360px container width — 4/3 overshot list height by ~66px once
the container widened from 1200px, since a fixed aspect-ratio scales
with the column's own width while the list's height is text-driven
and stays roughly constant. Re-check this pairing if the container
max-width or the list copy length changes again. */
.svc-slide { aspect-ratio: 3 / 2; }
}
.svc-slide-photo {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 24px),
linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 60%, #131313 100%);
display: flex;
align-items: center;
justify-content: center;
}
.svc-slide-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.svc-slide-photo span {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
border: 1px dashed rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 100px;
text-align: center;
}
.svc-slide-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
gap: 14px;
padding: 24px;
/* Tightened to a bottom-only fade (client direction 2026-09-02) — the
old gradient stayed at 50%+ opacity halfway up the photo and muted
the real project photography. This keeps full readable contrast
right behind the copy but clears to the untouched photo by ~55%
up, so the kitchen/bath work itself reads at full color. */
background: linear-gradient(to top, rgba(19,19,19,0.92) 0%, rgba(19,19,19,0.6) 22%, rgba(19,19,19,0.15) 45%, rgba(19,19,19,0) 60%);
}
.svc-slide-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
}
.svc-slide-icon .material-symbols-outlined { font-size: 22px; color: #131313; }
.svc-slide-copy { flex: 1; min-width: 0; }
.svc-slide-copy strong { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }
.svc-slide-copy p { color: rgba(255,255,255,0.75); font-size: 16px; line-height: 1.5; }
.svc-slide-link {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}
.svc-slide-link:hover { background: var(--primary); transform: translateX(2px); }
.svc-slide-link:hover .material-symbols-outlined { color: #131313; }
.svc-slide-link .material-symbols-outlined { font-size: 18px; color: #fff; }
.svc-slide-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (min-width: 768px) {
.svc-explorer {
grid-template-columns: 5fr 7fr;
/* "." = empty cell — the desktop CTA now lives inside .svc-list
itself (its last row) instead of a separate grid area */
grid-template-areas: "list carousel" ". dots";
column-gap: 3rem;
row-gap: 16px;
align-items: start;
}
.svc-tile-grid { display: none; }
.svc-list { display: flex; flex-direction: column; gap: 6px; }
.svc-more.svc-more-mobile { display: none; }
/* Only 3 rows now (down from 4, see .svc-explorer comment in
index.html) — taller vertical padding per row makes the list +
"View All Services" button fill the same height as the carousel
image beside it, so the top and bottom stay flush like they did
with 4 rows. Re-measure via getBoundingClientRect if the row
count or copy length changes again. */
.svc-list-row { padding-top: 33px; padding-bottom: 33px; }
}
/* ==========================================================================
Shared media-placeholder box shape (4:3, 20px radius, dashed border
until filled with a real photo/video). Originally built for the "Why
Choose Us" story timeline (removed 2026-08-30); still used by the
homepage "See The Transformation" video section and reused wherever
a real photo/video is pending.
========================================================================== */
.story-media-placeholder {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 20px;
overflow: hidden;
background:
repeating-linear-gradient(135deg, rgba(19,19,19,0.04) 0 2px, transparent 2px 24px),
linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 60%, var(--border) 100%);
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--border);
}
.story-media-placeholder span {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
padding: 0 32px;
}
/* Real video in place — drop the dashed placeholder border/gradient,
same pattern as .about-photo--filled */
.story-media-placeholder--filled {
border: none;
background: none;
}
.story-media-placeholder--filled video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Circular prev/next control, shared by carousel-style nav (currently
the portfolio lightbox). Rebuilt 2026-08-20: this rule went missing
when the reviews section's older single-slide carousel (its original
owner, per task-log.md) was replaced by the uniform-tile marquee —
there was never a breakpoint-specific cause. */
.carousel-arrow {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease);
}
.carousel-arrow:hover {
background: var(--primary);
border-color: var(--primary);
color: #131313;
transform: translateY(-2px);
}
.carousel-arrow:active { transform: scale(0.94); }
.carousel-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* ==========================================================================
Reviews — uniform-tile infinite marquee
Same measured-offset loop technique as .hero-marquee (initReviewsMarquee
in main.js): two identical groups sit side by side, JS measures the exact
pixel width of one group (tile width is fixed, so this is exact, not
estimated) and drives the loop by that offset via --marquee-shift, so the
loop is always seamless regardless of how many reviews exist. Second group
is aria-hidden — real content lives once in the DOM.
Cataloged as a repeatable section: _agency-ops/section-library/testimonials/
========================================================================== */
/* Fixed-px fade (not a %), so the fade distance stays short and consistent
at any container width instead of growing on wide desktop screens.
Desktop only — mobile's narrower viewport removes the mask entirely
(below) and reinstates a fixed 24px inset instead, so tiles cut off
cleanly at that inset edge rather than fading, which reads better in
a smaller window. */
.reviews-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
@media (max-width: 640px) {
.reviews-marquee {
-webkit-mask-image: none;
mask-image: none;
/* Client direction 2026-09-07: full-bleed (edge-to-edge, no fade) was
only ever meant for desktop — mobile should keep the same 24px
inset it always had from living inside .container before the
full-bleed change moved this markup outside of it. Restored here
directly since the marquee is no longer a padded container's
child at any width. */
padding: 0 24px;
}
}
.reviews-marquee-track {
display: flex;
width: max-content;
animation: reviews-marquee-scroll 85s linear infinite;
transform: translateX(0);
}
/* Hover-pause is driven by JS (mouseenter/mouseleave per tile in
initReviewsMarquee), not a CSS :hover rule here — see the comment in
main.js for why: CSS :hover state can go stale when the hovered element
shrinks out from under a stationary cursor (exactly what happens when
"View less" collapses a tile), and only a real pointer-move event
reliably clears it. focus-within is still fine here since keyboard
focus doesn't have that staleness risk. */
.reviews-marquee:focus-within .reviews-marquee-track,
.reviews-marquee-track.is-paused {
animation-play-state: paused;
}
.reviews-marquee-group {
display: flex;
gap: 20px;
flex-shrink: 0;
padding-right: 20px;
}
@keyframes reviews-marquee-scroll {
to { transform: translateX(var(--marquee-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
.reviews-marquee-track { animation: none; }
}
/* Resting height is a max-height (not a fixed height) so "View more" can
expand the tile by transitioning to a taller max-height instead of
snapping — the surrounding flex row grows/shrinks smoothly with it
(hovering/expanding already pauses the whole marquee, so nothing is
sliding underneath while this happens). See initReviewsMarquee's
review-tile-expand logic in main.js.
Expanded/resting max-height values are NOT set here — they're driven
by inline style from JS (exact scrollHeight on expand, the real
breakpoint value on collapse), not a generic placeholder like 700px.
Transitioning between two values far from the real content height
makes the box sit capped at content height (invisible, no motion) for
most of the transition and only actually move in whatever's left —
confirmed by frame-sampling the rendered height. See main.js. */
.review-tile {
width: 300px;
max-height: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
overflow: hidden;
position: relative;
z-index: 1;
transition: max-height 0.4s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.review-tile.is-expanded {
border-color: var(--primary);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
z-index: 10;
}
.review-tile-stars { color: var(--primary); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; flex-shrink: 0; }
/* opacity transition: text must stay unclamped (full length) for the
duration of a collapse so the tile's own max-height shrink has real
content to clip against (see max-height-transition-generic-placeholder
known-bug) — but that means what's on screen mid-shrink is a full
paragraph getting cut off mid-sentence. Fading it out in sync with the
shrink (see collapse() in main.js) masks that cutoff as a crossfade
instead of a visible hard clip. */
.review-tile-text {
font-size: 14px;
line-height: 1.6;
color: var(--text);
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: 1;
transition: opacity 0.32s var(--ease);
}
.review-tile.is-expanded .review-tile-text {
display: block;
overflow: visible;
}
/* Hidden by default; JS shows it only for tiles whose text is actually
truncated by the line-clamp above (never show a "View more" that reveals
nothing new). */
.review-tile-toggle {
display: none;
align-self: flex-start;
background: none;
border: none;
padding: 0;
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
flex-shrink: 0;
}
.review-tile-toggle:hover { opacity: 0.75; }
.review-tile-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.review-tile-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.review-tile-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.review-tile-avatar-fallback {
display: none;
width: 32px; height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: var(--primary);
color: #131313;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
}
.review-tile-meta-text { display: flex; flex-direction: column; min-width: 0; }
.review-tile-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-tile-time { font-size: 11px; color: var(--muted); }
@media (max-width: 640px) {
.review-tile { width: 260px; max-height: 244px; padding: 18px; }
}
/* ==========================================================================
Process — asymmetric emphasis grid. Steps 1-3 plain/equal weight,
step 4 gets a bold full-width gold-filled card instead of a
connecting line — visual weight follows which step actually sells
the feeling (service-copy.md "step 4" rule), not just position.
Number badge overlaps the card's top-left corner (borrowed detail
from a real reference: bisque-condor-171999.framer.app/how_we-_work,
a construction-trade site using the same "only one step gets color
fill" mechanic, adapted here to the step that's actually the payoff).
========================================================================== */
/* Horizontal phase timeline — pattern: shadcnblocks.com/block/timeline11.
Mobile (default): stacked column, badge+connector on the left, content
indented to the right — every phase (including the last) carries a
connector that continues past its own icon into the trailing gap, so
the spine runs unbroken start to finish. Desktop/tablet (768px+):
4-column grid; each phase gets its own left-justified line sitting
above its own icon/content, sized to that column only (not bridging
into the next), so there are 4 distinct lines, not 3 connectors
spanning gaps. See initPhaseTimeline() in main.js for the base-line-
to-solid-line reveal, which now plays as one sequential chronological
pass (Phase 1 finishes, then Phase 2, then 3, then 4) rather than all
4 fading in together. */
.phase-timeline { display: flex; flex-direction: column; }
/* padding-bottom is the mobile gap between one phase's text and the
next phase's icon — 24px = 2/3 of the original 36px per client
feedback (remove a third). Desktop overrides this to 0 below. */
.phase-item { position: relative; display: flex; gap: 16px; padding-bottom: 24px; }
.phase-badge {
position: relative;
z-index: 2;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bg);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.phase-badge-mid {
width: 100%;
height: 100%;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface);
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.phase-badge-inner {
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
}
.phase-badge-inner .material-symbols-outlined { font-size: 20px; color: var(--text); }
/* Vertical connector (mobile) — sits behind the badge, centered on it,
spanning down into the gap toward the next item. Fixed height (not
top+bottom stretched to the item's own dynamic bottom edge) so every
phase gets the exact same line length regardless of how much its own
text wraps — Phase 4's longer paragraph was previously stretching its
connector taller than Phases 1-3. 86px = the shared length Phases 1-3
already rendered at (114px), shortened 25% per client feedback.
base = permanent faded line, fill = solid overlay animated via GSAP.
58px = a further 1/3 cut from the previous 86px, matching the same
1/3 reduction applied to the gap above, per client feedback that both
the line and the gap between phases were still too long/large. */
.phase-connector {
position: absolute;
z-index: 1;
top: 56px;
height: 58px;
left: 27px;
width: 2px;
}
.phase-connector-base { position: absolute; inset: 0; background: var(--border); }
.phase-connector-fill {
position: absolute;
inset: 0;
background: var(--text);
width: 100%;
height: 0%;
}
.phase-content { padding-top: 4px; }
.phase-eyebrow {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 4px;
}
.phase-content h3 { font-size: 22px; margin-bottom: 6px; }
.phase-content p { color: var(--muted); font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) {
.phase-timeline { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
.phase-item { flex-direction: column; align-items: flex-start; padding-bottom: 0; padding-top: 88px; gap: 0; }
.phase-badge { position: absolute; top: 0; left: 0; width: 64px; height: 64px; }
/* Self-contained to this item's own column — left-justified with the
badge/icon and text below it, not reaching into the next column. */
.phase-connector {
top: 32px;
bottom: auto;
left: 0;
width: 100%;
height: 2px;
}
.phase-connector-fill { width: 0%; height: 100%; }
.phase-content { padding-top: 0; }
}
/* ==========================================================================
Short Hero — inner/service pages (blueprint calls for ~50vh, not full
viewport). Reuses every homepage hero class (.hero-mat gold frame,
.hero-frame, .hero-media, .hero-content, .hero-marquee) unchanged —
only the frame height is overridden, so initHeroParallax/initHeroMarquee
in main.js work identically with no JS changes.
========================================================================== */
/* Frame height and content padding brought down to match the /services/
.page-header's compact scale (client request 2026-08-19) — was 62vh/
58vh, which read as a second full hero rather than an inner-page
banner. min-height is a floor, not a cap, so the frame still grows if
subhead/CTA content needs more room; it no longer reserves empty vh. */
.hero--short .hero-frame { align-items: center; padding-top: 0; min-height: 180px; }
@media (min-width: 768px) {
.hero--short .hero-frame { min-height: 30vh; }
}
/* Centered headline/subhead/CTAs, per client request — flex column +
align-items:center centers each child's own box regardless of its
individual max-width, rather than relying on text-align alone (which
only centers wrapped text lines within a box that's still pinned
left). Scoped to .hero--short so the homepage's full hero (left-
aligned, per mobile-hero.md's image-hero default) is unaffected. */
.hero--short .hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 24px;
}
@media (min-width: 768px) {
.hero--short .hero-content { padding: 40px 64px 48px; }
}
/* Headline size reverted 2026-08-20 to match the homepage hero exactly
— was clamp(40px,6vw,64px), a 2026-08-19 decision to match the old
/page-header/ h1 scale that no longer applies now that every
inner-page hero (service pages, About, Contact, Services Hub,
Service Areas) dropped its subhead/CTA row and reads as
headline-only. Client direction: every hero's text should be one
uniform size site-wide. Floor lowered again 2026-09-05 alongside the
base .hero-headline (see its own comment) — mirrored here so this
stays in sync with that value rather than hardcoding it twice. */
.hero--short .hero-headline {
/* Floor matches the base .hero-headline's 40px (see its comment) so
every page's hero text stays the same size, per the rule above. */
font-size: clamp(40px, 9vw, 108px);
letter-spacing: -0.03em;
margin-bottom: 0;
}
@media (min-width: 768px) {
/* Mobile zeroes this — every .hero--short page is headline-only (no
subhead/CTA below it), so a trailing margin-bottom just biases the
vertical centering upward with nothing below to balance it against.
Kept on desktop unchanged, where the frame's own larger min-height
makes this a non-issue either way. */
.hero--short .hero-headline { margin-bottom: 12px; }
}
/* No-media variant — same gold-mat frame and compact hero--short scale,
but a solid onyx panel instead of a photo. Unified inner-page header
for hub/one-off pages (About, Contact, Services Hub, Service Areas)
per client direction 2026-08-20: every page header should read as
either "photo hero" (service pages, kept as-is) or "solid onyx + gold
outline" (everything else) — never the un-bordered flat panel this
replaces. Title only, no subhead/CTAs, to match the simple existing
look on Services Hub/Service Areas that prompted this unification. */
.hero--no-media .hero-frame {
background: var(--bg);
}
/* ==========================================================================
Trust Strip — service-page section (service-page-blueprint.md #2).
New shared component, first used here; copy verbatim to every future
service page. Slim badge row: stars/review count, licensed/insured,
years in business, family-owned — deliberately not a second copy of
the homepage hero's scrolling marquee (that's a homepage-hero-specific
device), just a plain static row so it reads as its own trust beat.
========================================================================== */
.trust-strip-section {
padding: 28px 0;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.trust-strip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px 40px;
}
.trust-strip-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
}
.trust-strip-item .material-symbols-outlined,
.trust-strip-item svg {
color: var(--primary);
font-size: 20px;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.trust-strip-stars { color: var(--primary); letter-spacing: 1px; font-size: 15px; }
@media (max-width: 767px) {
.trust-strip-row { gap: 12px 24px; }
.trust-strip-item { font-size: 13px; }
}
/* ==========================================================================
Service Gallery Grid — service-page-blueprint.md #9. Reusable across
every service page, not just Kitchen. Real photos only, same house
radius as every other image frame on the site.
========================================================================== */
.service-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-gallery-item {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4 / 3;
position: relative;
}
.service-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease);
}
.service-gallery-item:hover img { transform: scale(1.05); }
@media (max-width: 767px) {
.service-gallery-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ==========================================================================
Trust Panel — new shared component (service-page-blueprint.md). Merges
Why Choose Us + Service Area into one section: a dark card (heading,
"two components" checklist, trust paragraph, CTA) beside two stacked
real photos. Reference: nextlevelremodeling.com/kitchen-remodeling —
layout borrowed, copy and photos entirely original.
========================================================================== */
.trust-panel-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
/* Text panel is the main focus, per the reference (a wider text card,
smaller stacked photos) — not an even split. */
.trust-panel-grid { grid-template-columns: 3fr 2fr; gap: 32px; align-items: stretch; }
}
.trust-panel-card {
background: #131313;
color: #fff;
padding: 40px 32px;
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Matches .split-media-heading exactly, so this heading reads at the
same size as the Service Intro heading right above it. */
.trust-panel-card h2 { color: #fff; margin-bottom: 0; font-size: clamp(36px, 5vw, 56px); }
.trust-panel-eyebrow { margin-bottom: 14px; }
.trust-panel-subhead {
color: var(--primary);
font-weight: 600;
font-size: 15px;
margin: 18px 0 12px;
}
.trust-panel-checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 22px;
}
.trust-panel-checklist li {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: 600;
font-size: 15px;
}
.trust-panel-checklist .material-symbols-outlined {
color: var(--primary);
font-size: 20px;
flex-shrink: 0;
margin-top: 1px;
}
.trust-panel-body {
color: rgba(255, 255, 255, 0.75);
line-height: 1.7;
font-size: 16px;
margin-bottom: 26px;
}
.trust-panel-card .btn { align-self: flex-start; }
/* Flips which side the photos/card sit on via `order`, not DOM order,
so the HTML stays in natural reading order (card markup, then
photos markup) regardless of which modifier is applied. Scoped to
this modifier so every other trust-panel-grid instance keeps the
default text-left/photos-right arrangement. */
@media (min-width: 768px) {
.trust-panel-grid--image-left { grid-template-columns: 2fr 3fr; }
.trust-panel-grid--image-left .trust-panel-card,
.trust-panel-grid--image-left .trust-panel-copy { order: 2; }
.trust-panel-grid--image-left .trust-panel-photos { order: 1; }
}
/* Widens the photo column slightly against the base 3fr/2fr split —
used where the text column carries less content (e.g. no subhead/
checklist) and needs the photos sized up to keep the section
balanced instead of leaving the text column looking sparse. */
@media (min-width: 768px) {
.trust-panel-grid--photos-lg { grid-template-columns: 5fr 4fr; }
}
/* No-photos variant: card only, no stacked photo column. Card fills
the full container width (matches the sections above/below) with
all content centered instead of the default left-aligned layout. */
.trust-panel-grid--no-photos {
grid-template-columns: 1fr;
}
.trust-panel-grid--no-photos .trust-panel-card {
align-items: center;
text-align: center;
}
.trust-panel-grid--no-photos .trust-panel-checklist,
.trust-panel-grid--no-photos .trust-panel-checklist li {
align-items: center;
justify-content: center;
}
.trust-panel-grid--no-photos .trust-panel-card .btn {
align-self: center;
}
@media (min-width: 768px) {
.trust-panel-grid--no-photos { grid-template-columns: 1fr; }
}
/* Light variant of the trust-panel text column — same grid, same
eyebrow/heading/subhead/checklist/body pieces, no dark card
background. Used where the trust-panel LAYOUT (text column beside
two stacked real photos) is the right fit but a dark card would be
too heavy for the section's job (e.g. a photo-led service intro
instead of a reinforcing trust block further down the page). */
.trust-panel-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.trust-panel-copy h2 {
margin-bottom: 0;
font-size: clamp(36px, 5vw, 56px);
}
.trust-panel-copy p {
color: var(--muted);
font-size: 16px;
line-height: 1.7;
margin-bottom: 26px;
}
.trust-panel-photos {
display: flex;
flex-direction: column;
gap: 24px;
}
.trust-panel-photo {
border-radius: var(--radius);
overflow: hidden;
flex: 1;
}
.trust-panel-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (min-width: 768px) {
.trust-panel-photo { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
.trust-panel-photo { aspect-ratio: 4 / 3; }
}
/* ==========================================================================
Consult + Gallery Teaser — new shared component. Closing section before
the real lead-capture form: a real-photo panel (recent work + inline
links to service-area pages, preserving the internal linking the
removed Service Area section used to carry) beside a dark consultation
CTA panel. Both panels share one rounded/clipped outer shape.
Reference: nextlevelremodeling.com/kitchen-remodeling — layout
borrowed, copy and photos entirely original.
========================================================================== */
.consult-gallery-grid {
display: grid;
grid-template-columns: 1fr;
border-radius: var(--radius);
overflow: hidden;
}
@media (min-width: 768px) {
.consult-gallery-grid { grid-template-columns: 1fr 1fr; }
}
.consult-gallery-photo-panel {
position: relative;
min-height: 320px;
display: flex;
align-items: flex-end;
}
.consult-gallery-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.consult-gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(19, 19, 19, 0.92) 0%, rgba(19, 19, 19, 0.6) 55%, rgba(19, 19, 19, 0.2) 100%);
}
.consult-gallery-content {
position: relative;
z-index: 2;
padding: 40px 32px;
color: #fff;
}
.consult-gallery-content p { margin-bottom: 20px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.consult-gallery-content p a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
/* Sits on a dark photo overlay, so the site-wide solid-onyx
.btn-secondary would be nearly invisible here (onyx on near-onyx) —
solid white instead, same "solid, not outline" treatment, gold on
hover to match every other button site-wide. */
.consult-gallery-content .btn-secondary { background: #fff; color: #131313; }
.consult-gallery-content .btn-secondary:hover { background: var(--primary); color: #131313; }
.consult-panel {
background: #131313;
color: #fff;
padding: 48px 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.consult-panel h2 { color: #fff; font-size: clamp(36px, 5vw, 56px); margin-bottom: 14px; }
.consult-panel p { color: rgba(255, 255, 255, 0.75); margin-bottom: 24px; line-height: 1.7; }
.consult-panel .btn { align-self: flex-start; }
/* ==========================================================================
Portfolio Hub — category grids + lightbox
Hub-only MVP (portfolio-gallery-blueprint.md, adapted per client direction
2026-08-21 after studying nextlevelremodeling.com/portfolio): each card is
one real completed project, click opens a lightbox with that project's
full photo set. No category archive pages or individual project URLs yet
— those are Phase 2. The lightbox reuses .carousel-arrow (main.css nav
section) for prev/next so no new visual language is introduced.
========================================================================== */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.portfolio-grid { grid-template-columns: 1fr; }
}
.portfolio-card {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
border: none;
padding: 0;
cursor: pointer;
background: var(--surface-2);
}
.portfolio-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s var(--ease);
}
.portfolio-card:hover img { transform: scale(1.05); }
.portfolio-card-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 20px;
background: linear-gradient(to top, rgba(19,19,19,0.75) 0%, rgba(19,19,19,0) 55%);
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.portfolio-card:hover .portfolio-card-overlay,
.portfolio-card:focus-visible .portfolio-card-overlay { opacity: 1; }
.portfolio-card-label {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
}
.portfolio-card-label .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.portfolio-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Bathroom grid — 3:4 portrait override (client direction 2026-09-07),
uniform height across all 8 real photos instead of the site-wide 4:3
default. All 8 source photos are already portrait and close to 3:4
natively (0.75-0.81), except two outliers cropped further by
object-fit:cover: bath-powder-room-brass-bidet (0.558, ~26% height
trim) gets an inline object-position bias toward the bottom (see its
tag) so the crop favors the vanity/mirror/toilet and cuts the
vaulted ceiling above the light fixture instead of the subject;
bath-subway-tub-pebble-niche (1.0 square, ~25% width trim) needs no
bias since the excess width is the green door-frame casing on both
sides — a plain center crop already removes it evenly. Every other
photo's own crop is negligible (<7%) at default center. */
#bathroom .portfolio-card { aspect-ratio: 3 / 4; }
.portfolio-category-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.portfolio-category-more { color: var(--muted); font-size: 14px; font-weight: 500; }
/* Lightbox */
.portfolio-lightbox {
position: fixed;
inset: 0;
z-index: 1200000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 10, 10, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.portfolio-lightbox.is-open { opacity: 1; visibility: visible; }
.portfolio-lightbox-frame {
position: relative;
width: min(90vw, 1000px);
max-height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.portfolio-lightbox-image-wrap {
width: 100%;
max-height: 74vh;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
overflow: hidden;
background: #131313;
}
.portfolio-lightbox-image-wrap img {
width: 100%;
height: 100%;
max-height: 74vh;
object-fit: contain;
display: block;
}
.portfolio-lightbox-close {
position: absolute;
top: -48px;
right: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s var(--ease);
}
.portfolio-lightbox-close:hover { background: var(--primary); color: #131313; }
.portfolio-lightbox-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.portfolio-lightbox-nav {
display: flex;
align-items: center;
gap: 24px;
}
.portfolio-lightbox-nav .carousel-arrow { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.portfolio-lightbox-nav .carousel-arrow:hover { background: var(--primary); border-color: var(--primary); color: #131313; }
.portfolio-lightbox-counter { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; min-width: 44px; text-align: center; }
@media (max-width: 640px) {
.portfolio-lightbox-close { top: -44px; width: 36px; height: 36px; }
}