/*
Theme Name: MHC Theme
Theme URI: https://morganhornungconsulting.com
Author: Fresh Codes / Morgan Hornung Consulting
Description: Lightweight, Elementor-compatible theme for Morgan Hornung Consulting. Static pages are built with Elementor; case studies use coded on-brand templates (no Elementor Pro required). Brand tokens ported from the original Astro site.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mhc
Tags: elementor, portfolio, custom-post-type
*/
/* Prevent horizontal page overflow.
Use `clip` (not `hidden`): `overflow-x: hidden` implicitly makes the element a
vertical scroll container, so with it on BOTH html and body each could show
its own scrollbar — during load that flashed a brief double scrollbar. `clip`
clips horizontally WITHOUT creating a scroll container, so only the viewport
scrolls vertically. */
html,
body {
overflow-x: clip !important;
max-width: 100vw !important;
}
/* =========================================================================
Full-bleed sections on the Elementor homepage.
The mirrored section markup manages its own inner max-width + centering, so
Elementor's boxed container (default ~1140px) must NOT clip the backgrounds —
let each section span the full viewport width.
========================================================================= */
.home.elementor-page .elementor-section > .elementor-container {
max-width: 100% !important;
padding: 0 !important;
}
.home.elementor-page .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
padding: 0 !important;
}
.home.elementor-page .elementor-widget,
.home.elementor-page .elementor-widget-html,
.home.elementor-page .elementor-widget-html > .elementor-widget-container,
.home.elementor-page [class*="elementor-widget-mhc_home"] > .elementor-widget-container {
width: 100%;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Non-homepage Elementor content (case studies, etc.) has no boxed container of
its own — align it to the same 1500px grid + gutters the global header/footer
use (.mhc-wrap), so the hero/content don't sit flush against the viewport
edge while the header sits inset. */
.elementor-page:not(.home) .elementor-section.elementor-section-full_width > .elementor-container,
.elementor-page:not(.home) .elementor-section.elementor-section-boxed > .elementor-container {
max-width: 93.75rem !important;
margin-inline: auto !important;
}
/* Cathy's image pair — matches the Figma spec: two equal square-ish tiles,
edge-to-edge (no gap), each filling its full column with object-fit:cover. */
#cathy-imagepair .elementor-container {
display: flex !important;
align-items: stretch;
height: 46rem;
gap: 0;
}
#cathy-imagepair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#cathy-imagepair .elementor-widget-wrap {
height: 100%;
}
#cathy-imagepair .elementor-widget-image {
height: 100%;
width: 100%;
}
#cathy-imagepair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* Left photo has the logo/signature at the top — keep the crop anchored
there so it's never cut off. */
#cathy-pair-left .elementor-widget-image img {
object-position: top;
}
/* Jessica Killin's image pair — same balanced/edge-to-edge treatment as
Cathy's, just shorter. */
#jk-imagepair .elementor-container {
display: flex !important;
align-items: stretch;
height: 42rem;
gap: 0;
}
#jk-imagepair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#jk-imagepair .elementor-widget-wrap {
height: 100%;
}
#jk-imagepair .elementor-widget-image {
height: 100%;
width: 100%;
}
#jk-imagepair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
#jpm-imagepair .elementor-container {
display: flex !important;
align-items: stretch;
height: 34rem;
gap: 0;
}
#jpm-imagepair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#jpm-imagepair .elementor-widget-wrap {
height: 100%;
}
#jpm-imagepair .elementor-widget-image {
height: 100%;
width: 100%;
}
#jpm-imagepair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
#jpm-imagepair2 .elementor-container {
display: flex !important;
align-items: stretch;
height: 30rem;
gap: 0;
}
#jpm-imagepair2 .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#jpm-imagepair2 .elementor-widget-wrap {
height: 100%;
}
#jpm-imagepair2 .elementor-widget-image {
height: 100%;
width: 100%;
}
#jpm-imagepair2 .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
#eagelco-imagepair .elementor-container {
display: flex !important;
align-items: stretch;
height: 32rem;
gap: 0;
}
#eagelco-imagepair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#eagelco-imagepair .elementor-widget-wrap {
height: 100%;
}
#eagelco-imagepair .elementor-widget-image {
height: 100%;
width: 100%;
}
#eagelco-imagepair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
#eagelco-feature-col .elementor-widget-image img {
max-height: 32rem;
width: 100%;
object-fit: cover;
}
#wander-feature-col .elementor-widget-image img {
max-height: 33rem;
width: 100%;
object-fit: cover;
object-position: bottom;
}
/* Hello Living's feature image is a product mockup inside a dark wrapper card —
scale it naturally inside the wrapper. */
#hello-feature-col {
box-sizing: border-box;
}
#hello-feature-col .elementor-widget-wrap {
background: #c99a3d;
border-radius: var(--radius-card, 0.625rem);
padding: 2.5rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-left: 23px;
margin-right: 10px;
}
#hello-feature-col .elementor-widget-image img {
max-height: 24rem;
width: auto;
max-width: 100%;
object-fit: contain;
margin: 0 auto;
display: block;
}
@media (max-width: 767px) {
#hello-feature-col {
margin-top: 2rem;
}
}
/* CORE Group feature card — fill column and align to wrapper */
#core-feature-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
}
#core-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#hello-imagepair .elementor-container {
display: flex !important;
align-items: stretch;
height: 44rem;
gap: 0;
}
#hello-imagepair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#hello-imagepair .elementor-widget-wrap {
height: 100%;
}
#hello-imagepair .elementor-widget-image {
height: 100%;
width: 100%;
}
#hello-imagepair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* Copy-block feature image (business card close-up) — sized just slightly
taller than the text column beside it, not its full natural height. */
#cathy-feature-col .elementor-widget-image img {
height: 32rem;
width: 100%;
object-fit: cover;
object-position: center;
}
#jk-feature-col .elementor-widget-image img {
height: 30rem;
width: 100%;
object-fit: cover;
object-position: center;
}
/* the mirrored sections already set their own full-width backgrounds */
.elementor-page .elementor-widget-html [data-mhc-section],
.elementor-page [class*="elementor-widget-mhc_home"] [data-mhc-section] { width: 100%; }
/* Testimonials + logos band: dark wine gradient. The original was scoped to an
Astro-only attribute, so the native widget (home + About) lost it — reapply
here on the section itself (id + data-mhc-section are on the SAME element). */
#testimonials[data-mhc-section="testimonials"] {
background: linear-gradient(105deg, #572c33, #995e68);
}
/* Standard 1500px content grid, matching other builds. Section backgrounds
stay full-bleed; only the inner content column is capped. */
.elementor-page [data-mhc-section] .max-w-7xl { max-width: 1500px; }
/* Testimonials: the slide had its own horizontal padding, making the pink
card narrower than the logo grid above it — strip it so both match width. */
[data-mhc-section="testimonials"] article[data-carousel-slide] { padding-inline: 0 !important; }
/* Testimonials: the carousel JS sets transform with no transition, so slides
snap instantly — add a smooth CSS glide (the JS clears this during drag). */
[data-mhc-section="testimonials"] [data-carousel-track] {
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Testimonials: bigger star rating + quote mark. */
[data-mhc-section="testimonials"] article[data-carousel-slide] .text-button-primary.flex.gap-2 {
font-size: 1.5rem !important;
gap: 0.35rem !important;
}
[data-mhc-section="testimonials"] article[data-carousel-slide] .text-button-primary.font-serif {
font-size: 0 !important;
width: 3.5rem;
height: 2.6rem;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Testimonials: replace the plain ← / → glyphs with clean chevron icons. */
[data-mhc-section="testimonials"] [data-carousel-prev],
[data-mhc-section="testimonials"] [data-carousel-next],
[data-mhc-section="testimonials"] [data-carousel-indicator] {
cursor: pointer !important;
}
[data-mhc-section="testimonials"] [data-carousel-prev] span,
[data-mhc-section="testimonials"] [data-carousel-next] span {
font-size: 0;
pointer-events: none !important;
}
[data-mhc-section="testimonials"] [data-carousel-prev]::after,
[data-mhc-section="testimonials"] [data-carousel-next]::after {
content: '';
display: block;
width: 0.55rem;
height: 0.55rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
pointer-events: none !important;
}
[data-mhc-section="testimonials"] [data-carousel-prev]::after { transform: rotate(-135deg); margin-left: 3px; }
[data-mhc-section="testimonials"] [data-carousel-next]::after { transform: rotate(45deg); margin-right: 3px; }
/* Testimonials: keep the progress dashes thin, not tall bars. */
[data-mhc-section="testimonials"] [data-carousel-indicator] {
height: 3px !important;
}
/* Testimonials: highlight the active progress dash (the original rule was
scoped to an Astro-only attribute, so it never matched our widget markup). */
[data-mhc-section="testimonials"] .testimonial-indicator {
opacity: 0.5;
transform-origin: center;
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
[data-mhc-section="testimonials"] .testimonial-indicator[data-active="true"] {
background-color: var(--color-button-primary) !important;
opacity: 1;
transform: scaleX(1.15);
}
/* Testimonials: taller inner quote box with more top/bottom breathing room. */
[data-mhc-section="testimonials"] article[data-carousel-slide] .rounded-xl.bg-\[\#EDBEC9\] {
padding-block: 3.5rem !important;
}
[data-mhc-section="testimonials"] article[data-carousel-slide] .text-button-primary.flex.gap-2 {
margin-bottom: 1.5rem !important;
}
/* Testimonials: round the client logo boxes. */
[data-mhc-section="testimonials"] .h-28.border.border-white\/8 {
border-radius: 0.75rem !important;
}
/* Services: taller cards (more top/bottom breathing room) + bigger titles. */
/* Services section: top-centered headline, 6 cards in 3x2 grid with MH logo card, and Learn More button */
[data-mhc-section="services"] {
padding-top: 2rem !important;
padding-bottom: clamp(3.5rem, 5.5vw, 5.5rem) !important;
}
[data-mhc-section="services"] .services-heading-wrap {
text-align: center;
margin: 0 auto 3.5rem auto;
max-width: 58rem;
}
[data-mhc-section="services"] .services-heading-wrap h2.text-heading,
[data-mhc-section="services"] h2.text-heading {
font-family: var(--font-serif) !important;
font-size: clamp(2.35rem, 4vw, 3.5rem) !important;
line-height: 1.25 !important;
max-width: none !important;
text-align: center !important;
margin: 0 auto !important;
}
[data-mhc-section="services"] .bg-surface-soft.min-h-60 {
padding-block: 2.5rem !important;
min-height: 24rem !important;
background-color: #FFE2E2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
border-radius: 8px !important;
}
/* Card titles: Season Mix font */
[data-mhc-section="services"] h3.text-heading {
font-family: 'Season Mix', 'Span', var(--font-serif) !important;
font-size: 1.65rem !important;
font-weight: 500 !important;
line-height: 1.25 !important;
color: var(--color-heading) !important;
}
/* MH Photo Card: Morgan's portrait photo + bottom-left animated MH monogram */
[data-mhc-section="services"] .mhc-services-card-mh,
[data-mhc-section="services"] div.mhc-services-card-mh,
[data-mhc-section="services"] .grid > .mhc-services-card-mh {
background-color: #D5798A !important;
border-radius: 8px !important;
display: block !important;
min-height: 24rem !important;
padding: 0 !important;
cursor: pointer;
overflow: hidden !important;
position: relative !important;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
[data-mhc-section="services"] .mhc-services-card-mh:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 36px -8px rgba(100, 60, 70, 0.35) !important;
}
[data-mhc-section="services"] .mhc-services-card-mh-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 20% !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
[data-mhc-section="services"] .mhc-services-card-mh:hover .mhc-services-card-mh-img {
transform: scale(1.04) !important;
}
[data-mhc-section="services"] .mhc-services-card-mh .mhc-mh-logo-wrap {
position: absolute !important;
bottom: 2rem !important;
left: 2rem !important;
z-index: 2 !important;
}
[data-mhc-section="services"] .mhc-services-card-mh .mhc-mh-logo-svg {
width: 95px !important;
height: 81px !important;
display: block !important;
overflow: visible !important;
}
[data-mhc-section="services"] .mhc-mh-stroke {
stroke-dasharray: 480;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-mhc-section="services"] .mhc-services-card-mh.anim-ready .mhc-mh-stroke {
stroke-dashoffset: 480;
}
[data-mhc-section="services"] .mhc-services-card-mh.anim-ready.in-view .mhc-mh-stroke {
stroke-dashoffset: 0 !important;
}
[data-mhc-section="services"] .mhc-services-card-mh:hover .mhc-mh-logo-svg {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
transform: scale(1.03);
transition: transform 0.3s ease, filter 0.3s ease;
}
/* Services Learn More button removed per user request */
[data-mhc-section="services"] .services-btn-wrap {
display: none !important;
}
[data-mhc-section="services"] .grid.gap-6 {
gap: 1.25rem !important;
}
/* Testimonials: flip quote icon so it faces the correct way (matching Figma) */
#testimonials .text-button-primary.font-serif,
[data-mhc-section="testimonials"] .text-button-primary.font-serif {
display: inline-block !important;
transform: rotate(180deg) !important;
transform-origin: center center !important;
}
/* Testimonials: Premium GSAP Crossfade layout */
testimonial-carousel [data-carousel-viewport] {
position: relative;
overflow: visible !important;
}
testimonial-carousel [data-carousel-track] {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
transform: none !important;
transition: none !important;
width: 100% !important;
}
testimonial-carousel [data-carousel-track] > article {
grid-area: 1 / 1 / 2 / 2 !important;
width: 100% !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.45s ease, transform 0.45s ease !important;
transform: scale(0.985);
}
testimonial-carousel [data-carousel-track] > article.is-active-slide {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: scale(1) !important;
z-index: 2 !important;
}
/* Fallback so the first testimonial is visible before/without the carousel JS
(e.g. inside the Elementor editor, where front-end scripts don't run). On the
live site the JS sets inline styles that override this, so crossfade still
works. No !important here on purpose, so JS's inline opacity:0 can hide it. */
testimonial-carousel [data-carousel-track] > article:first-child {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
}
/* Hand-drawn emphasis circles/underlines used by native Elementor widgets. */
.mh-em {
position: relative;
display: inline-block;
vertical-align: baseline;
}
.mh-em__text {
position: relative;
z-index: 1;
}
.mh-em[data-type='circle'] > .mh-em__svg {
position: absolute;
inset: -0.35em -0.25em;
width: calc(100% + 0.5em);
height: calc(100% + 0.7em);
overflow: visible;
pointer-events: none;
z-index: 0;
}
.mh-em[data-type='underline'] > .mh-em__svg {
position: absolute;
bottom: -0.05em;
left: -0.05em;
width: calc(100% + 0.1em);
height: max(4px, 0.2em);
overflow: visible;
pointer-events: none;
z-index: 0;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: var(--em-delay, 0s);
}
.mh-em[data-type='circle'] .mh-em__path {
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
opacity: 0;
}
.mh-em[data-type='underline'] .mh-em__path {
fill: currentColor;
stroke: none;
}
@keyframes draw-circle {
from { opacity: 1; }
to { stroke-dashoffset: 0; opacity: 1; }
}
.mh-em.drawn[data-type='circle'] .mh-em__path {
animation: draw-circle 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: var(--em-delay, 0s);
}
.mh-em.drawn[data-type='underline'] > .mh-em__svg {
clip-path: inset(0 0 0 0);
}
.mhc-signature {
display: block;
width: min(18rem, 100%) !important;
height: auto !important;
max-width: 18rem !important;
}
/* ============================================================
How It Works — rebuilt to match the Figma design.
Card aspect ratio is 1643 / 1096 matching Figma.
============================================================ */
[data-mhc-section="how-it-works"] {
background-color: #4A1E1C !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: clamp(1.25rem, 2.2vw, 2.25rem) 0 !important;
overflow: hidden !important;
}
[data-mhc-section="how-it-works"] section#howitworks {
background-color: transparent !important;
position: relative;
z-index: 2;
margin: 0 !important;
}
[data-mhc-section="how-it-works"] section#howitworks > div {
padding: 0 !important;
}
[data-mhc-section="how-it-works"] .max-w-7xl {
max-width: 1440px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 clamp(1.5rem, 4vw, 3rem) !important;
}
[data-mhc-section="how-it-works"] .how-it-works {
max-width: 1380px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
position: relative;
aspect-ratio: 1643 / 1096;
border-radius: 0 !important;
background-color: transparent !important;
overflow: visible !important;
container-type: inline-size;
z-index: 2;
}
/* Hide duplicate background grids: maintain ONLY ONE clean grid */
[data-mhc-section="how-it-works"] .how-it-works > div[class*="bg-[linear-gradient"] {
display: none !important;
}
/* How It Works interactive cursor grid reveal layers - FULL CANVAS with feathered vignette */
[data-mhc-section="how-it-works"] > .hiw-base-grid,
[data-mhc-section="how-it-works"] .hiw-base-grid {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 0 !important;
background-size: 60px 60px !important;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 20%, rgba(0, 0, 0, 0.5) 58%, transparent 92%) !important;
mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 20%, rgba(0, 0, 0, 0.5) 58%, transparent 92%) !important;
}
[data-mhc-section="how-it-works"] > .hiw-cursor-glow,
[data-mhc-section="how-it-works"] .hiw-cursor-glow {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: 0;
transition: opacity 0.35s ease !important;
background: radial-gradient(circle 240px at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(255, 120, 120, 0.08) 0%, rgba(255, 87, 87, 0.02) 50%, transparent 70%) !important;
}
[data-mhc-section="how-it-works"] > .hiw-grid-reveal,
[data-mhc-section="how-it-works"] .hiw-grid-reveal {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 1 !important;
background-size: 60px 60px !important;
background-image:
linear-gradient(to right, rgba(255, 180, 185, 0.22) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 180, 185, 0.22) 1px, transparent 1px) !important;
opacity: 0;
transition: opacity 0.35s ease !important;
mask-image: radial-gradient(circle 200px at var(--mouse-x, -500px) var(--mouse-y, -500px), black 0%, rgba(0, 0, 0, 0.3) 55%, transparent 75%) !important;
-webkit-mask-image: radial-gradient(circle 200px at var(--mouse-x, -500px) var(--mouse-y, -500px), black 0%, rgba(0, 0, 0, 0.3) 55%, transparent 75%) !important;
}
[data-mhc-section="how-it-works"].has-mouse > .hiw-cursor-glow,
[data-mhc-section="how-it-works"].has-mouse .hiw-cursor-glow,
[data-mhc-section="how-it-works"] .how-it-works.has-mouse .hiw-cursor-glow {
opacity: 1 !important;
}
[data-mhc-section="how-it-works"].has-mouse > .hiw-grid-reveal,
[data-mhc-section="how-it-works"].has-mouse .hiw-grid-reveal,
[data-mhc-section="how-it-works"] .how-it-works.has-mouse .hiw-grid-reveal {
opacity: 1 !important;
}
/* How It Works — Subtle, ambient fluid canvas blended softly into dark background */
.hiw-fluid-canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 1 !important;
opacity: 0.35 !important;
mix-blend-mode: screen !important;
}
.hiw-cursor-wrap {
display: none !important;
}
/* Hide static background SVG; dynamic inline SVG replaces it with animation */
[data-mhc-section="how-it-works"] .how-it-works::after {
display: none !important;
}
.hiw-lines-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
/* Entrance Drawing Animation */
.hiw-path {
transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hiw-path.hiw-path-loop2 {
transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
}
.hiw-path.hiw-path-arrow-stem {
transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1) 2.4s;
}
.hiw-path.hiw-path-arrow-head {
transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 2.7s;
}
.hiw-dot {
opacity: 0;
transform: scale(0);
transform-box: fill-box;
transform-origin: center;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hiw-num {
opacity: 0;
transform: translateY(10px);
transform-box: fill-box;
transform-origin: center;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.how-it-works.anim-drawn .hiw-path {
stroke-dashoffset: 0 !important;
}
.how-it-works.anim-drawn .hiw-dot.hiw-dot-1 {
opacity: 1 !important; transform: scale(1) !important; transition-delay: 0.3s;
}
.how-it-works.anim-drawn .hiw-num.hiw-num-1 {
opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.3s;
}
.how-it-works.anim-drawn .hiw-dot.hiw-dot-2 {
opacity: 1 !important; transform: scale(1) !important; transition-delay: 1.1s;
}
.how-it-works.anim-drawn .hiw-num.hiw-num-2 {
opacity: 1 !important; transform: translateY(0) !important; transition-delay: 1.1s;
}
.how-it-works.anim-drawn .hiw-dot.hiw-dot-3 {
opacity: 1 !important; transform: scale(1) !important; transition-delay: 2.4s;
}
.how-it-works.anim-drawn .hiw-num.hiw-num-3 {
opacity: 1 !important; transform: translateY(0) !important; transition-delay: 2.4s;
}
/* In the Elementor editor no scroll-JS runs, so the steps would stay hidden and
couldn't be previewed/edited — reveal them (incl. the Step labels) there. The
live front-end still animates them in on scroll. */
body.elementor-editor-active [data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step {
opacity: 1 !important;
transform: none !important;
}
body.elementor-editor-active [data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step > div:first-child {
display: block !important;
}
/* Step text entrance animation */
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step {
opacity: 0 !important;
transform: translateY(16px) !important;
transition: opacity 0.6s ease, transform 0.6s ease !important;
}
.how-it-works.anim-drawn .hiw-steps ol > li.hiw-step:nth-child(1) {
opacity: 1 !important; transform: translateY(0) !important; transition-delay: 0.35s !important;
}
.how-it-works.anim-drawn .hiw-steps ol > li.hiw-step:nth-child(2) {
opacity: 1 !important; transform: translateY(0) !important; transition-delay: 1.15s !important;
}
.how-it-works.anim-drawn .hiw-steps ol > li.hiw-step:nth-child(3) {
opacity: 1 !important; transform: translateY(0) !important; transition-delay: 2.45s !important;
}
/* Content layer fills the panel so children position by % of the box. */
[data-mhc-section="how-it-works"] .how-it-works > .relative.z-10 {
position: absolute !important;
inset: 0 !important;
z-index: 3;
pointer-events: auto;
}
/* Heading — white serif, top-left. */
[data-mhc-section="how-it-works"] .how-it-works h2 {
position: absolute;
left: 4.99%;
top: 11.13%;
margin: 0;
color: #ffffff !important;
font-family: var(--font-serif);
font-size: clamp(2rem, 4.35cqw, 4.5rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.01em;
white-space: nowrap;
}
/* Steps container spans the full box. */
[data-mhc-section="how-it-works"] .hiw-steps {
position: static !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
[data-mhc-section="how-it-works"] .hiw-steps ol {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Each step: text only, positioned to sit under its SVG number.
The "Step N" label div is hidden (numbers come from the SVG scaffold). */
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step {
position: absolute;
margin: 0 !important;
display: block !important;
}
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step > div:first-child {
display: none !important;
}
/* Step titles: Season Mix font per user request */
[data-mhc-section="how-it-works"] .how-it-works h3 {
font-family: 'Season Mix', 'Span', var(--font-serif) !important;
font-weight: 500 !important;
font-size: clamp(1.4rem, 2.3cqw, 2.4rem) !important;
color: #F7B7B2 !important;
line-height: 1.25 !important;
margin: 0 0 clamp(0.4rem, 0.8cqw, 0.9rem) 0 !important;
letter-spacing: -0.01em !important;
}
/* Step descriptions: light cream/pink text, readable */
[data-mhc-section="how-it-works"] .how-it-works p {
font-family: var(--font-sans) !important;
font-weight: 300 !important;
font-size: clamp(0.85rem, 1.18cqw, 1.15rem) !important;
color: #F4D7D3 !important;
line-height: 1.55 !important;
margin: 0 !important;
}
/* Step 1: sits under 01 on the left */
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step:nth-child(1) {
left: 4.99%;
top: 44.71%;
width: 22.4%;
max-width: 22rem;
}
/* Step 2: sits centered under 02 at bottom */
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step:nth-child(2) {
left: 38.04%;
top: 71.90%;
width: 33.5%;
max-width: 32rem;
}
/* Step 3: sits under 03 on the right */
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step:nth-child(3) {
left: 58.85%;
top: 35.86%;
width: 34%;
max-width: 28rem;
}
/* "Let's Talk" button: removed per user request */
[data-mhc-section="how-it-works"] .hiw-steps > div.hiw-step,
[data-mhc-section="how-it-works"] .hiw-steps a.button {
display: none !important;
}
/* Hide the old vertical timeline rail + step dots. */
[data-mhc-section="how-it-works"] .hiw-steps::before,
[data-mhc-section="how-it-works"] .hiw-step::before {
display: none !important;
}
/* Mobile: aspect-locked absolute layout falls back to stacked list below 56rem */
@media (max-width: 56rem) {
[data-mhc-section="how-it-works"] .how-it-works {
aspect-ratio: auto;
padding: 3.5rem 2rem !important;
}
[data-mhc-section="how-it-works"] .how-it-works::after { display: none; }
[data-mhc-section="how-it-works"] .how-it-works > .relative.z-10 {
position: relative !important;
inset: auto !important;
}
[data-mhc-section="how-it-works"] .how-it-works h2 {
position: static;
margin-bottom: 2rem;
white-space: normal;
font-size: 2.25rem !important;
}
[data-mhc-section="how-it-works"] .hiw-steps ol { display: flex !important; flex-direction: column; gap: 2rem; }
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step {
position: static !important;
width: 100% !important;
max-width: none !important;
}
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step > div:first-child { display: block !important; margin-bottom: 0.5rem; color: #FF5757; font-weight: 600; }
[data-mhc-section="how-it-works"] .hiw-steps > .hiw-step:last-child {
position: static !important;
width: auto !important;
height: auto !important;
margin-top: 2rem !important;
}
[data-mhc-section="how-it-works"] .hiw-steps > .hiw-step:last-child a.button {
display: inline-flex !important;
width: auto !important;
min-width: 12rem !important;
}
/* #9 — hide the decorative clutter on mobile (squiggle lines + big 01/02/03
numbers, cursor grid, glow, reveal, fluid canvas). */
[data-mhc-section="how-it-works"] .hiw-lines-svg,
[data-mhc-section="how-it-works"] .hiw-base-grid,
[data-mhc-section="how-it-works"] .hiw-cursor-glow,
[data-mhc-section="how-it-works"] .hiw-grid-reveal,
[data-mhc-section="how-it-works"] .hiw-fluid-canvas,
[data-mhc-section="how-it-works"] .hiw-num { display: none !important; }
/* #9 — separate each step with a divider line, clean stacked section. */
[data-mhc-section="how-it-works"] .hiw-steps ol { gap: 0 !important; }
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step {
padding: 1.75rem 0 !important;
/* Always visible on mobile — don't depend on the slow scroll-draw stagger
(delays up to 2.45s) that hid steps 2 & 3. */
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
[data-mhc-section="how-it-works"] .hiw-steps ol > li.hiw-step + li.hiw-step {
border-top: 1px solid rgba(247, 183, 178, 0.35);
}
}
/* Awards ("Winner, winner") - Exact Figma gradient bg, #CD9E9A boxes, white logos */
[data-mhc-section="awards"] {
background: linear-gradient(155deg, #FFE3DB 15%, rgba(243, 190, 205, 0.56) 100%) !important;
margin-top: -1px !important;
margin-bottom: 0 !important;
padding: 0 !important;
position: relative;
z-index: 2;
}
#awards {
background: linear-gradient(155deg, #FFE3DB 15%, rgba(243, 190, 205, 0.56) 100%) !important;
padding: clamp(3.5rem, 5.5vw, 6rem) 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#awards .grid,
[data-mhc-section="awards"] .grid {
gap: clamp(0.85rem, 1.4vw, 1.35rem) !important;
}
#awards .bg-award-background,
[data-mhc-section="awards"] .bg-award-background,
#awards .grid > div,
[data-mhc-section="awards"] .grid > div {
background-color: #CD9E9A !important;
border-radius: 8px !important;
opacity: 1 !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
#awards .bg-award-background:hover,
[data-mhc-section="awards"] .bg-award-background:hover,
#awards .grid > div:hover,
[data-mhc-section="awards"] .grid > div:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 24px -6px rgba(180, 110, 120, 0.3) !important;
}
#awards img,
[data-mhc-section="awards"] img {
filter: none !important;
max-height: 52px !important;
width: auto !important;
}
/* Case-study (and other non-home) pages: the global header sits in normal
flow ABOVE the #hero section, so the page background shows through behind
it and the gradient mesh only starts below — a visible seam. On the
homepage the header lives INSIDE #hero, so there's no seam. Match that by
overlaying the header transparently on top of #hero and padding the hero
down to compensate, so the gradient runs all the way to the top. */
body:not(.home) header.mhc-global-header {
position: absolute !important;
top: 0; left: 0; right: 0;
background: transparent;
z-index: 10;
}
/* WP admin bar pushes the whole page down (32px desktop / 46px on narrow
viewports) but our absolutely-positioned header ignores that push and
stays pinned to the true viewport top — offset it to match when logged in. */
/* NOTE: WordPress puts the `admin-bar` class on , not , so the old
`html.admin-bar` selector never matched and the header rendered under the admin
bar when logged in (cramped top / clipped logo). Target body.admin-bar. */
body.admin-bar:not(.home) header.mhc-global-header,
html.admin-bar body:not(.home) header.mhc-global-header {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar:not(.home) header.mhc-global-header,
html.admin-bar body:not(.home) header.mhc-global-header {
top: 46px;
}
}
body:not(.home) #hero {
padding-top: 9rem;
}
/* Hero image sizing/position — one shared rule so every case study behaves
identically: bigger, and anchored to the bottom edge of the hero section
instead of floating centered. */
body:not(.home) #hero .elementor-column:last-child > .elementor-widget-wrap {
justify-content: flex-end !important;
padding-bottom: 0 !important;
}
body:not(.home) #hero .elementor-widget-image {
margin-bottom: -2.5rem;
}
/* Decorative circle behind Cathy's portrait cutout for depth/interest. */
#cathy-hero-col {
position: relative;
}
#cathy-hero-col::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 34rem;
height: 34rem;
border-radius: 50%;
aspect-ratio: 1 / 1;
background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(224,116,150,0.35) 70%, rgba(224,116,150,0.1) 100%);
z-index: 0;
}
#cathy-hero-col .elementor-widget-image {
z-index: 1;
}
/* Decorative rotated square outline behind Jessica's portrait cutout. */
#jk-hero-col {
position: relative;
}
#jk-hero-col::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(8deg);
width: 28rem;
height: 28rem;
border: 2px solid rgba(217, 63, 58, 0.4);
z-index: 0;
}
#jk-hero-col .elementor-widget-image {
z-index: 1;
}
/* Ent Credit Union Champ Bailey hero cutout */
#ent-hero-col {
position: relative;
}
#ent-hero-col .elementor-widget-image {
margin-bottom: 0 !important;
z-index: 1;
}
#ent-hero-col .elementor-widget-image::after {
display: none !important;
}
#ent-hero-col .elementor-widget-image img {
max-height: 42rem;
width: auto;
display: block;
margin: 0 auto;
}
/* JPM Built's "Your Brand Tells a Story" block — heading carries the bold
visual weight instead of the first paragraph, so override the shared
copy-block rule that normally bolds the first . */
#jpm-story-heading .elementor-heading-title {
font-family: var(--font-sans) !important;
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--color-heading) !important;
margin-bottom: 1.25rem !important;
}
#jpm-story-col .elementor-widget-text-editor p:first-child,
#jpm-closing-col .elementor-widget-text-editor p:first-child {
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
}
#jpm-closing-col {
max-width: 56rem;
}
#jpm-closing-text, #jpm-closing-text p {
text-align: left !important;
}
/* Crop the portrait slightly shorter from the bottom only, keeping his
face untouched at the top. */
#jpm-portrait-col .elementor-widget-image img {
height: 38rem;
width: 100%;
object-fit: cover;
object-position: top;
}
body:not(.home) #hero .elementor-widget-image img {
width: auto;
max-width: 120%;
max-height: 38rem;
}
/* Soft contact shadow under the hero product image so it feels grounded on
the surface it's sitting on instead of floating over the gradient. */
body:not(.home) #hero .elementor-widget-image {
position: relative;
}
body:not(.home) #hero .elementor-widget-image::after {
content: '';
position: absolute;
left: 15%;
right: 15%;
bottom: -1rem;
height: 2rem;
background: radial-gradient(ellipse, rgba(64,64,82,0.35), rgba(64,64,82,0) 70%);
pointer-events: none;
z-index: 1;
}
/* Soft blurred color blob behind the product for depth, echoing the hero
gradient's coral/orange palette. */
body:not(.home) #hero .elementor-widget-image::before {
content: '';
position: absolute;
inset: -15%;
background: radial-gradient(circle, rgba(255,150,120,0.4), rgba(255,180,140,0.2) 55%, transparent 72%);
filter: blur(2.5rem);
pointer-events: none;
z-index: -1;
}
body:not(.home) #hero .elementor-widget-image img {
position: relative;
z-index: 2;
}
/* Case-study hero typography — matched to the original CaseStudyHero.astro
spec (font-serif h1 at max 3.75rem/leading-none/tracking-tight, font-light
body copy), instead of the Elementor build's flat 72px h1 + default-weight
description that drifted from the source design. */
body:not(.home) #hero .elementor-widget-image {
margin-top: 2.5rem;
}
/* Every case-study image should have a consistent 8px radius — the per-widget
border_radius setting isn't taking effect (wrong control key for this
Elementor version), so enforce it globally instead. */
body:not(.home) .elementor-widget-image img {
border-radius: 8px !important;
}
body:not(.home) #hero h1.elementor-heading-title {
font-family: var(--font-serif) !important;
font-weight: 400 !important;
font-size: clamp(3rem, 6.5vw, 5.25rem) !important;
line-height: 1 !important;
letter-spacing: -0.01em !important;
color: #404052 !important;
}
.postid-360 #hero h1.elementor-heading-title {
line-height: 1.12 !important;
}
body:not(.home) #hero .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-weight: 300 !important;
font-size: 18px !important;
line-height: 29px !important;
color: #4a4a60 !important;
}
/* Case-study "copy block" (intro paragraph + feature image) — matched to
CopyBlock.astro's exact spec: bold lead-in paragraph, then light-weight
body copy with relaxed leading. */
body:not(.home) .elementor-widget-text-editor p:first-child:not(:only-child) {
font-family: var(--font-sans) !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading) !important;
margin-bottom: 1.5rem !important;
}
body:not(.home) .elementor-widget-text-editor p:not(:first-child),
body:not(.home) .elementor-widget-text-editor p:only-child {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
/* A standalone detail-copy paragraph (alone in its own widget, full section
width) should stay a readable column width instead of stretching
edge-to-edge across the whole 1500px grid — applies to every case study,
not just one. */
body:not(.home) .elementor-widget-text-editor p:only-child {
max-width: 56rem;
}
/* Closing detail-copy paragraph — keep it a readable column width instead of
stretching edge-to-edge across the full 1500px grid, and pull it up tight
under the image pair above. */
#aitf-closing-col {
margin-top: 1rem;
}
#aitf-closing-col .elementor-widget-text-editor p {
max-width: 56rem;
}
/* Detail image text overlay (e.g. Art in the Find's "Get Dressed,
Confidently" caption) — dark gradient for legibility + bottom-left white
serif caption, matching the reference mockup. Shared by any column marked
with an id ending in -col / -caption via the pattern below. */
/* Cap the feature image so it doesn't tower over a shorter text column
(case-by-case fix — apply the same #id-col + max-height pattern to other
case studies if the same imbalance shows up there). */
#avcopyc2 .elementor-widget-image img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
.elementor-element-avcopy01 {
padding-top: 12px !important;
}
.elementor-element-s156cp {
padding-top: 12px !important;
}
#avadvisors-text-col .elementor-widget-text-editor {
max-width: 58rem;
margin-inline: 0;
}
#core-full-col .elementor-widget-image img {
max-height: 40rem;
width: 100%;
object-fit: cover;
object-position: center 25%;
}
/* JPM's laptop mockup has its own stand baked into the image, leaving extra
dead space below — push it down further so it actually sits at the edge. */
#jpm-hero-col .elementor-widget-image {
margin-bottom: -40px !important;
}
#aitf-detail1-col .elementor-widget-image, #aitf-feature-col .elementor-widget-image, #aviva-detail1-col .elementor-widget-image, #aviva-detail4-col .elementor-widget-image, #jk-team-col .elementor-widget-image, #jpm-full-col .elementor-widget-image, #eagelco-detail1-col .elementor-widget-image, #eagelco-full-col .elementor-widget-image, #core-full-col .elementor-widget-image, #ent-playbook-col .elementor-widget-image, #ent-saving-col .elementor-widget-image {
position: relative;
}
#aitf-detail1-col .elementor-widget-image::after, #aitf-feature-col .elementor-widget-image::after, #aviva-detail1-col .elementor-widget-image::after, #aviva-detail4-col .elementor-widget-image::after, #jk-team-col .elementor-widget-image::after, #jpm-full-col .elementor-widget-image::after, #eagelco-detail1-col .elementor-widget-image::after, #eagelco-full-col .elementor-widget-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 45%);
border-radius: 8px;
pointer-events: none;
}
#core-full-col .elementor-widget-image::after, #ent-saving-col .elementor-widget-image::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 88%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 40%, transparent 70%), linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 45%);
border-radius: 8px;
pointer-events: none;
}
#ent-playbook-col .elementor-widget-image::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 45%;
height: 25%;
background: radial-gradient(circle at 15% 85%, rgba(0,0,0,0.7) 0%, transparent 75%);
border-radius: 0 0 0 8px;
pointer-events: none;
}
#ent-playbook-caption .elementor-heading-title {
text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
}
#ent-playbook-col .elementor-widget-image img, #ent-saving-col .elementor-widget-image img {
width: 100%;
height: auto;
max-height: 44rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#aitf-detail1-caption, #aitf-feature-caption, #aviva-detail1-caption, #aviva-detail4-caption, #jk-team-caption, #jpm-full-caption, #eagelco-detail1-caption, #eagelco-full-caption, #core-full-caption, #ent-playbook-caption, #ent-saving-caption {
position: relative;
z-index: 2;
margin-top: -9rem;
padding: 0 2rem 2rem;
}
#eagelco-detail1-caption, #eagelco-full-caption {
margin-top: -11rem;
padding-bottom: 3rem;
}
#aitf-detail1-caption .elementor-heading-title, #aitf-feature-caption .elementor-heading-title, #aviva-detail1-caption .elementor-heading-title, #aviva-detail4-caption .elementor-heading-title, #jk-team-caption .elementor-heading-title, #jpm-full-caption .elementor-heading-title, #eagelco-detail1-caption .elementor-heading-title, #eagelco-full-caption .elementor-heading-title, #core-full-caption .elementor-heading-title, #ent-playbook-caption .elementor-heading-title, #ent-saving-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-weight: 400 !important;
font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
line-height: 1.15 !important;
color: #fff !important;
}
[data-id="s79side"] .elementor-container {
align-items: center !important;
}
#ent-side-text-col .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
#ent-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#ent-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#ent-side-col .elementor-widget-image img {
width: 100%;
max-height: 35rem;
object-fit: cover;
object-position: center;
border-radius: 8px;
display: block;
}
#ent-para-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-style: normal !important;
font-size: 18px !important;
line-height: 29px !important;
font-weight: 300 !important;
color: rgb(74, 74, 96) !important;
max-width: 56rem;
margin: 0 !important;
}
/* DanG Financial */
[data-id="s50cp"] .elementor-container {
align-items: center !important;
}
#dang-side-text-col .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
#dang-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#dang-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#dang-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#dang-feature-col .elementor-widget-image img {
width: 100%;
max-height: 31rem;
object-fit: cover;
object-position: center 30%;
border-radius: 8px;
display: block;
}
#dang-para-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-style: normal !important;
font-size: 18px !important;
line-height: 29px !important;
font-weight: 300 !important;
color: rgb(74, 74, 96) !important;
max-width: 56rem;
margin: 0 !important;
}
#dang-mockup-col .elementor-widget-image img,
#dang-branding-col .elementor-widget-image img,
#dang-typography-col .elementor-widget-image img,
#dang-colors-col .elementor-widget-image img,
#dang-cfo-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#dang-cfo-col {
position: relative;
}
#dang-cfo-caption {
position: absolute;
bottom: clamp(3.75rem, 5.5vw, 5.5rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 62rem;
pointer-events: none;
}
#dang-cfo-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
/* Shyanne Smith Stables */
[data-id="s125cp"] .elementor-container {
align-items: center !important;
}
#shyanne-side-text-col .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
#shyanne-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#shyanne-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#shyanne-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#shyanne-feature-col .elementor-widget-image img {
width: 100%;
max-height: 29.5rem;
object-fit: cover;
object-position: center center;
border-radius: 8px;
display: block;
}
#shyanne-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#shyanne-horses-col .elementor-widget-image img,
#shyanne-typo-col .elementor-widget-image img,
#shyanne-riders-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#shyanne-imgpair-col1 .elementor-widget-image img,
#shyanne-imgpair-col2 .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#shyanne-para-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
max-width: 56rem;
margin: 0 !important;
}
#shyanne-riders-col {
position: relative;
}
#shyanne-riders-caption {
position: absolute;
bottom: clamp(3.75rem, 5.5vw, 5.5rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 56rem;
pointer-events: none;
}
#shyanne-riders-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2rem, 3.8vw, 3.25rem) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
/* Spectrabotics */
[data-id="s136cp"] .elementor-container {
align-items: center !important;
}
#spectrabotics-side-text-col .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
#spectrabotics-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#spectrabotics-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#spectrabotics-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#spectrabotics-feature-col .elementor-widget-image img {
width: 100%;
max-height: 29.5rem;
object-fit: cover;
object-position: center center;
border-radius: 8px;
display: block;
}
#spectrabotics-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#waghela-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#dang-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#waghela-feature-col .elementor-widget-image img {
width: 100%;
max-height: 24rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#spectrabotics-precision-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#spectrabotics-precision-col {
position: relative;
}
#spectrabotics-precision-caption {
position: absolute;
bottom: clamp(3rem, 5vw, 4.5rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 46rem;
pointer-events: none;
}
#spectrabotics-precision-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2.2rem, 3.8vw, 3.5rem) !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
margin-bottom: 0.75rem !important;
}
#spectrabotics-precision-subtext {
font-family: var(--font-sans) !important;
font-size: clamp(1rem, 1.25vw, 1.25rem) !important;
font-weight: 500 !important;
line-height: 1.42 !important;
color: #fff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
margin: 0 !important;
}
#spectrabotics-box1-col,
#spectrabotics-box2-col {
position: relative;
}
#spectrabotics-box1-col .elementor-widget-image img,
#spectrabotics-box2-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#spectrabotics-box1-caption,
#spectrabotics-box2-caption {
position: absolute;
bottom: clamp(2.75rem, 4.5vw, 4rem);
left: clamp(2rem, 3.5vw, 3rem);
z-index: 2;
max-width: 32rem;
pointer-events: none;
}
/* box1's caption is 3 lines, box2's is only 2 — both anchored from the
bottom, so box2 sat noticeably lower/closer to the image edge than box1.
Push box2 up by roughly one line so their tops line up. */
#spectrabotics-box2-caption {
bottom: calc(clamp(2.75rem, 4.5vw, 4rem) + 2.76rem);
}
#spectrabotics-box1-caption .elementor-heading-title,
#spectrabotics-box2-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(1.75rem, 2.5vw, 2.4rem) !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#spectrabotics-para-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
max-width: 56rem;
margin: 0 !important;
}
#spectrabotics-grid-col {
position: relative;
}
#spectrabotics-grid-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#spectrabotics-grid-caption {
position: absolute;
bottom: clamp(3.75rem, 5.5vw, 5.5rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 56rem;
pointer-events: none;
}
#spectrabotics-grid-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2rem, 3.8vw, 3.25rem) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* Waghela Associates */
[data-id="s146cp"] .elementor-container {
align-items: center !important;
}
#waghela-side-text-col .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
#waghela-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#waghela-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#waghela-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#waghela-pair-col1 .elementor-widget-image img,
#waghela-pair-col2 .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#waghela-para-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
max-width: 56rem;
margin: 0 !important;
}
#waghela-skyline-col {
position: relative;
}
#waghela-skyline-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#waghela-skyline-caption {
position: absolute;
bottom: clamp(3.75rem, 5.5vw, 5.5rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 56rem;
pointer-events: none;
}
#waghela-skyline-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2rem, 3.8vw, 3.25rem) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* Peak Au Pair Case Study */
.postid-337 .mhc-service-pills {
max-width: 58rem;
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.postid-337 [data-id="s337sv"] {
padding-bottom: 0 !important;
}
.postid-337 [data-id="s337sv"] .elementor-column {
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
padding-bottom: 1.5rem;
}
.postid-337 [data-id="s337side"] {
padding-top: 1.5rem !important;
}
#peak-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#wander-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
#hello-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
[data-id="s337side"] .elementor-container {
align-items: center !important;
}
#peak-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#peak-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#peak-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#peak-side-img-col .elementor-widget-image img {
width: 100%;
max-height: 34rem;
object-fit: cover;
object-position: center top;
border-radius: 8px;
display: block;
}
#peak-banner-col {
position: relative;
overflow: hidden;
border-radius: 8px;
}
#peak-banner-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 28rem;
object-fit: cover;
display: block;
border-radius: 8px;
}
#peak-banner-col .elementor-widget-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 45%);
border-radius: 8px;
pointer-events: none;
}
#peak-banner-caption {
position: absolute;
z-index: 2;
left: clamp(2rem, 4.5vw, 4rem);
bottom: clamp(2rem, 4.5vw, 4rem);
right: clamp(2rem, 4.5vw, 4rem);
pointer-events: none;
}
#peak-banner-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2rem, 4vw, 3.25rem) !important;
font-weight: 400 !important;
color: #fff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* Peak Au Pair Partners Section */
#peak-partners-section > .elementor-container {
border-bottom: 1px solid rgba(220, 170, 170, 0.45);
padding-bottom: 3.5rem !important;
}
#peak-partners-col1 {
padding-right: clamp(1.5rem, 3.5vw, 3.5rem) !important;
}
#peak-partners-col1 .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#peak-partners-col1 .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#peak-partners-col1 .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#peak-partners-col2 {
border-left: 1px solid rgba(220, 170, 170, 0.5);
padding-left: clamp(1.5rem, 3.5vw, 3.5rem) !important;
}
.peak-partners-title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--color-heading, #2c1815);
margin-top: 0;
margin-bottom: 1.25rem;
}
.peak-partners-list p {
font-family: var(--font-sans) !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 28px !important;
color: #4a4a60 !important;
margin-bottom: 0.35rem !important;
}
.peak-partners-list p:last-child {
margin-bottom: 0 !important;
}
/* Peak Au Pair Image Pairs and Banners */
#peak-pair1-col1 .elementor-widget-image img,
#peak-pair1-col2 .elementor-widget-image img,
#peak-pair2-col1 .elementor-widget-image img,
#peak-pair2-col2 .elementor-widget-image img {
width: 100%;
height: 32rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#peak-full2-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 26rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Garderie Petit Baobab */
#baobab-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.postid-325 [data-id="s325sv"] {
padding-bottom: 0 !important;
}
.postid-325 [data-id="s325side"] {
padding-top: 1.5rem !important;
}
[data-id="s325side"] .elementor-container {
align-items: center !important;
}
#baobab-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#baobab-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#baobab-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#baobab-side-img-col .elementor-widget-image img {
width: 100%;
max-width: 32rem;
height: auto;
border-radius: 8px;
display: block;
margin-inline: auto;
}
/* Baobab 3 Social Ads Wrapper */
.baobab-social-wrapper {
background-color: #1c6982;
border-radius: 8px;
padding: clamp(2rem, 3.5vw, 3.5rem);
box-sizing: border-box;
width: 100%;
}
.baobab-social-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2vw, 2rem);
margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.baobab-social-card {
background: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
display: flex;
}
.baobab-social-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.baobab-social-text p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #ffffff !important;
margin: 0 !important;
max-width: 1320px;
}
/* Baobab Dual Image Pair */
#baobab-pair-col1 .elementor-widget-image img,
#baobab-pair-col2 .elementor-widget-image img {
width: 100%;
height: 30rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Baobab Bottom Banner */
#baobab-banner-col {
position: relative;
overflow: hidden;
border-radius: 8px;
}
#baobab-banner-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 28rem;
object-fit: cover;
display: block;
border-radius: 8px;
}
#baobab-banner-caption {
position: absolute;
bottom: clamp(2rem, 4.5vw, 4rem);
left: clamp(2rem, 4.5vw, 4rem);
font-family: var(--font-serif);
font-size: clamp(2rem, 3.8vw, 3.25rem);
font-weight: 400;
line-height: 1.2;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
z-index: 2;
margin: 0;
}
/* =========================================================================
AvAdvisors Case Study
========================================================================= */
.postid-348 .mhc-service-pills {
max-width: 64rem;
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.postid-348 [data-id="s348sv"] {
padding-bottom: 0 !important;
padding-top: 2.5rem !important;
}
.postid-348 [data-id="s348sv"] .elementor-column {
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
padding-bottom: 1.5rem;
}
.postid-348 [data-id="s348side"] {
padding-top: 1.5rem !important;
}
#avadvisors-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
[data-id="s348side"] .elementor-container {
align-items: center !important;
}
#avadvisors-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#avadvisors-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#avadvisors-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#avadvisors-side-img-col .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#avadvisors-full1-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 26rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#avadvisors-text-col {
max-width: 58rem;
margin-inline: 0;
}
#avadvisors-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#avadvisors-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#avadvisors-full2-col {
position: relative;
}
#avadvisors-full2-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 28rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#avadvisors-full2-caption {
position: absolute;
bottom: clamp(3rem, 5vw, 4.5rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 46rem;
pointer-events: none;
}
#avadvisors-full2-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2.2rem, 3.8vw, 3.5rem) !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
margin: 0 !important;
}
/* =========================================================================
Wrightsock Case Study
========================================================================= */
.postid-360 [data-id="s360sv"] {
padding-bottom: 0 !important;
padding-top: 2.5rem !important;
}
.postid-360 [data-id="s360sv"] .mhc-service-pills {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.postid-360 [data-id="s360sv"] .elementor-column {
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
padding-bottom: 1.5rem;
}
.postid-360 [data-id="s360side"] {
padding-top: 1.5rem !important;
}
#wrightsock-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.elementor-element-s360he {
padding-bottom: 12px !important;
}
[data-id="s360side"] .elementor-container {
align-items: center !important;
}
#wrightsock-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#wrightsock-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#wrightsock-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#wrightsock-side-img-col .elementor-widget-image img {
width: 100% !important;
height: 100% !important;
min-height: 22rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#wrightsock-side-img-col .elementor-widget-image {
height: 100%;
}
.elementor-element-c360s2 {
display: flex;
align-items: stretch;
}
.elementor-element-c360s1 {
padding-right: clamp(1rem, 2.5vw, 2.25rem) !important;
}
.elementor-element-c360s2 {
padding-left: clamp(1rem, 2.5vw, 2.25rem) !important;
}
#wrightsock-full1-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 26rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#wrightsock-text-col {
max-width: 58rem;
margin-inline: 0;
}
#wrightsock-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#wrightsock-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#wrightsock-col1 .elementor-widget-image img,
#wrightsock-col2 .elementor-widget-image img,
#wrightsock-col3 .elementor-widget-image img {
width: 100%;
height: 32rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* =========================================================================
Securely Case Study
========================================================================= */
.postid-118 .mhc-service-pills {
max-width: 48rem;
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.postid-118 [data-id="s118sv"] {
padding-bottom: 0 !important;
padding-top: 2.5rem !important;
}
.postid-118 [data-id="s118sv"] .elementor-column {
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
padding-bottom: 1.5rem;
}
.postid-118 [data-id="s118side"] {
padding-top: 1.5rem !important;
}
#securely-hero-col .elementor-widget-image img {
width: 100%;
max-width: 32rem;
margin-inline: auto;
height: auto;
display: block;
object-fit: contain;
}
[data-id="s118side"] .elementor-container {
align-items: center !important;
}
#securely-side-img-col .elementor-widget-image img {
width: 100%;
max-width: 32rem;
margin-inline: auto;
height: auto;
border-radius: 8px;
display: block;
}
#securely-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#securely-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#securely-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#securely-side-text-col .elementor-widget-text-editor p:first-child a {
color: inherit !important;
}
#securely-fw-col .elementor-widget-image img,
#securely-fw2-col .elementor-widget-image img,
#securely-fw3-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 24rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Conclusion block — re-pointed from the old .securely-* content classes to the
Elementor column id + structure, so the content is clean/editable and the
design is byte-for-byte the same declarations. */
#securely-concl-col .elementor-widget-text-editor > p:first-child {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
max-width: 58rem;
margin: 0 0 2.5rem 0 !important;
}
#securely-concl-col .elementor-widget-text-editor h4 {
font-family: var(--font-sans) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--color-heading, #2c1815) !important;
margin: 1rem 0 0.5rem 0 !important;
}
#securely-concl-col .elementor-widget-text-editor h4 ~ p {
font-family: var(--font-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #4a4a60 !important;
margin: 0 0 0.25rem 0 !important;
}
#securely-concl-col .elementor-widget-text-editor h4 ~ p a {
color: inherit;
text-decoration: underline;
}
/* =========================================================================
BlueLux Pools Case Study
========================================================================= */
.postid-24 .mhc-service-pills {
max-width: 48rem;
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.postid-24 [data-id="s24sv"] {
padding-bottom: 0 !important;
padding-top: 2.5rem !important;
}
.postid-24 [data-id="s24sv"] .elementor-column {
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
padding-bottom: 1.5rem;
}
.postid-24 [data-id="s24side"] {
padding-top: 1.5rem !important;
}
#bluelux-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
[data-id="s24side"] .elementor-container {
align-items: center !important;
}
#bluelux-side-img-col .elementor-widget-image img {
width: 100%;
max-width: 32rem;
margin-inline: auto;
height: auto;
display: block;
}
#bluelux-side-text-col .elementor-widget-text-editor p.bluelux-side-title {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#bluelux-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#bluelux-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#bluelux-side-text-col .elementor-widget-text-editor p.bluelux-side-title a {
color: inherit !important;
}
/* BlueLux Diamond Banner with Text Overlay */
#bluelux-diam-col {
position: relative !important;
}
#bluelux-diam-col > .elementor-widget-wrap {
position: relative !important;
}
#bluelux-diam-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 24rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#bluelux-diam-col .elementor-widget-html {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
left: clamp(2rem, 5vw, 4.5rem) !important;
max-width: 36rem !important;
width: calc(100% - clamp(4rem, 10vw, 9rem)) !important;
z-index: 2 !important;
}
#bluelux-diam-caption {
position: static !important;
width: 100% !important;
}
#bluelux-diam-caption p {
font-family: var(--font-sans) !important;
font-size: clamp(14px, 1.15vw, 17px) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
color: #ffffff !important;
margin-bottom: 1.25rem !important;
}
#bluelux-diam-caption p:last-child {
margin-bottom: 0 !important;
}
/* BlueLux Brand Grid Images */
#bluelux-brand-left .elementor-widget-image img {
width: 100%;
height: 28rem;
object-fit: contain;
background: #ffffff;
border-radius: 8px;
display: block;
}
#bluelux-brand-right .elementor-widget-image img {
width: 100%;
height: 28rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
@media (max-width: 768px) {
#bluelux-brand-left .elementor-widget-image img,
#bluelux-brand-right .elementor-widget-image img {
height: 18rem;
}
}
/* BlueLux Partners Block */
.bluelux-partners-block {
margin-top: 0.5rem;
}
.bluelux-partners-title {
font-family: var(--font-sans) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--color-heading, #2c1815) !important;
margin: 0 0 0.5rem 0 !important;
}
.bluelux-partners-text {
font-family: var(--font-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #4a4a60 !important;
margin: 0 !important;
}
.bluelux-partners-text a {
color: inherit;
text-decoration: underline;
}
/* BlueLux Fullwidth Banners */
#bluelux-fw1-col .elementor-widget-image img,
#bluelux-fw2-col .elementor-widget-image img,
#bluelux-fw3-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 24rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* BlueLux Swag & Tab Side-by-Side */
#bluelux-swag-left .elementor-widget-image img,
#bluelux-swag-right .elementor-widget-image img {
width: 100%;
height: 32rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
@media (max-width: 768px) {
#bluelux-swag-left .elementor-widget-image img,
#bluelux-swag-right .elementor-widget-image img {
height: 20rem;
}
}
/* =========================================================================
Fresh Codes Case Study
========================================================================= */
.postid-86 .mhc-service-pills {
max-width: none;
flex-wrap: nowrap;
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.postid-86 [data-id="s86sv"] {
padding-top: 2.5rem !important;
padding-bottom: 0 !important;
}
.postid-86 [data-id="s86sv"] .elementor-column {
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
padding-bottom: 1.5rem;
}
.postid-86 [data-id="s86side"] {
padding-top: 1.5rem !important;
}
#freshcodes-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
[data-id="s86side"] .elementor-container {
align-items: center !important;
}
#freshcodes-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#freshcodes-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#freshcodes-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#freshcodes-side-img-col .elementor-widget-image img {
width: 100%;
max-width: 32rem;
margin-inline: auto;
height: auto;
border-radius: 8px;
display: block;
}
#freshcodes-fwr-col .elementor-widget-image img,
#freshcodes-fw2-col .elementor-widget-image img,
#freshcodes-hhh-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 26rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Fresh Codes Team Avatars */
.freshcodes-team-lead {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
max-width: 58rem;
margin: 0 0 2.5rem 0 !important;
}
.freshcodes-team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2vw, 1.75rem);
margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
.freshcodes-team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.freshcodes-avatar-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.freshcodes-avatar-card img {
width: 100%;
height: auto;
display: block;
}
.freshcodes-partners-block {
margin-top: 1.5rem;
}
.freshcodes-partners-title {
font-family: var(--font-sans) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--color-heading, #2c1815) !important;
margin: 0 0 0.5rem 0 !important;
}
.freshcodes-partners-text {
font-family: var(--font-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #4a4a60 !important;
margin: 0 !important;
}
.freshcodes-partners-text a {
color: inherit;
text-decoration: underline;
}
/* Fresh Codes Bottom Banner */
#freshcodes-geee-col {
position: relative;
}
#freshcodes-geee-col .elementor-widget-image img {
width: 100%;
height: auto;
min-height: 28rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#freshcodes-geee-caption {
position: absolute;
bottom: clamp(4rem, 6.5vw, 6rem);
left: clamp(2.5rem, 4vw, 4rem);
z-index: 2;
max-width: 46rem;
pointer-events: none;
}
#freshcodes-geee-caption .elementor-heading-title {
font-family: var(--font-serif) !important;
font-size: clamp(2.2rem, 3.8vw, 3.5rem) !important;
font-weight: 400 !important;
line-height: 1.15 !important;
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
margin: 0 !important;
}
/* Enterception Case Study */
#enterception-hero-col .elementor-widget-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
[data-id="s320side"] .elementor-container {
align-items: center !important;
}
#enterception-side-text-col .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
#enterception-side-text-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
margin-bottom: 1.25rem !important;
}
#enterception-side-text-col .elementor-widget-text-editor p:first-child {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 33px !important;
color: var(--color-heading, #2c1815) !important;
margin-bottom: 1.5rem !important;
}
#enterception-side-text-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#enterception-side-img-col .elementor-widget-image img {
width: 100%;
max-height: 24rem;
object-fit: cover;
object-position: center top;
border-radius: 8px;
display: block;
}
/* Enterception Interactive Video Player Banner */
.enterception-video-wrap {
position: relative;
width: 100%;
aspect-ratio: 1676 / 984;
border-radius: 8px;
overflow: hidden;
background: #000;
cursor: pointer;
}
.enterception-video-wrap .enterception-video-el {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.enterception-video-overlay {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: clamp(2rem, 4.5vw, 4.5rem) clamp(2.5rem, 5vw, 5rem);
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%);
transition: opacity 0.35s ease, visibility 0.35s ease;
z-index: 2;
}
.enterception-video-wrap.is-playing .enterception-video-overlay {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.enterception-video-wrap.is-playing {
cursor: default;
}
.enterception-video-wrap.is-playing .enterception-video-el {
object-fit: contain;
}
.enterception-video-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 400;
line-height: 1.15;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.enterception-play-btn {
width: clamp(75px, 7vw, 110px);
height: clamp(75px, 7vw, 110px);
border-radius: 50%;
background-color: #ff5757;
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 24px rgba(255, 87, 87, 0.4);
transition: transform 0.2s ease, background-color 0.2s ease;
flex-shrink: 0;
}
.enterception-play-btn svg {
margin-left: 5px;
}
.enterception-play-btn:hover {
transform: scale(1.08);
background-color: #ff6e6e;
}
/* Enterception Concluding Text & Images */
#enterception-para-col {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
#enterception-para-col .elementor-widget-text-editor {
max-width: 56rem;
margin-inline: 0 !important;
}
#enterception-para-col .elementor-widget-text-editor p {
font-family: var(--font-sans) !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 29px !important;
color: #4a4a60 !important;
text-align: left !important;
margin-inline: 0 !important;
margin-bottom: 1.25rem !important;
}
#enterception-para-col .elementor-widget-text-editor p:last-child {
margin-bottom: 0 !important;
}
#enterception-pair-col1 .elementor-widget-image img,
#enterception-pair-col2 .elementor-widget-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
#ent-imgpair-col1 .elementor-widget-image img, #ent-imgpair-col2 .elementor-widget-image img {
width: 100%;
height: 40rem;
object-fit: cover;
border-radius: 8px;
display: block;
}
#ent-imgpair-col2 .elementor-widget-image img {
object-position: center top;
}
#eagelco-newpair .elementor-container {
display: flex !important;
align-items: stretch;
height: 42rem;
gap: 0;
}
#eagelco-newpair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#eagelco-newpair .elementor-widget-wrap {
height: 100%;
}
#eagelco-newpair .elementor-widget-image {
height: 100%;
width: 100%;
}
#eagelco-newpair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
#wander-imagepair .elementor-container {
display: flex !important;
align-items: stretch;
height: 32rem;
gap: 0;
}
#wander-imagepair .elementor-column {
flex: 1 1 0 !important;
width: auto !important;
height: 100%;
}
#wander-imagepair .elementor-widget-wrap {
height: 100%;
}
#wander-imagepair .elementor-widget-image {
height: 100%;
width: 100%;
}
#wander-imagepair .elementor-widget-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* Animated gradient mesh behind the hero — two soft multi-radial planes
drifting in opposite directions, in Morgan's coral / plum / rose palette. */
#hero { position: relative; isolation: isolate; overflow: clip; } /* clip contains mesh + deco: nothing overflows to be cut */
/* Flowing, color-shifting brand gradient base (behind the mesh blooms).
Higher specificity + !important to beat the original astro section bg. */
/* Creamy, warm, on-brand gradient. Scroll drives the color shift (GSAP), so no
CSS keyframe here (a CSS animation would override the scroll-driven value). */
.elementor-page section#hero {
background-image: linear-gradient(120deg, #ffe6dc 0%, #ffddd8 24%, #ffd6d9 46%, #fadfe0 66%, #ffdfd2 84%, #ffe6dc 100%) !important;
background-size: 300% 300% !important;
background-position: 0% 50%;
}
#hero::before, #hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-repeat: no-repeat;
will-change: transform;
}
#hero::before {
background:
radial-gradient(38% 42% at 22% 30%, rgba(255,96,96,0.28), transparent 60%),
radial-gradient(34% 38% at 78% 24%, rgba(93,92,148,0.22), transparent 62%),
radial-gradient(42% 46% at 68% 78%, rgba(255,180,201,0.30), transparent 60%);
animation: mhc-mesh-a 14s ease-in-out infinite;
}
#hero::after {
background:
radial-gradient(30% 34% at 42% 70%, rgba(217,63,58,0.18), transparent 60%),
radial-gradient(36% 40% at 12% 82%, rgba(93,92,148,0.16), transparent 62%),
radial-gradient(30% 34% at 88% 60%, rgba(255,120,120,0.20), transparent 60%),
radial-gradient(34% 38% at 92% 92%, rgba(255,180,201,0.28), transparent 60%);
animation: mhc-mesh-b 18s ease-in-out infinite;
}
/* No rotate() here on purpose: rotating a full-bleed background layer reveals
its own rectangular edge as a hard "square" line moving across the hero. */
@keyframes mhc-mesh-a {
0%,100% { transform: translate3d(-2%,-1%,0) scale(1.08); }
50% { transform: translate3d(2%,2%,0) scale(1.14); }
}
@keyframes mhc-mesh-b {
0%,100% { transform: translate3d(2%,1%,0) scale(1.1); }
50% { transform: translate3d(-2%,-2%,0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
#hero::before, #hero::after { animation: none !important; }
}
/* Hero: vertically center the copy column against the photo, and force
white CTA button text — the original Tailwind build purged `.text-white`
since Elementor renders this markup outside the pages Astro scanned. */
#hero > div > div { align-items: center; }
/* Bigger hero headline + wider text column so the gap to the photo shrinks */
#hero h2 { font-size: clamp(3.25rem, 7vw, 6.75rem) !important; max-width: none !important; margin-bottom: 1.25rem !important; line-height: 1.05 !important; }
@media (min-width: 42rem) {
#hero > div > div > div:first-child { max-width: 56rem !important; margin-right: 1.5rem !important; margin-top: -3rem !important; }
#hero > div > div > div:last-child { margin-top: -2.5rem !important; }
}
.elementor-page .button.bg-button-primary { color: #fff !important; }
#hero .button.bg-button-primary { padding-left: 3rem !important; padding-right: 3rem !important; }
/* =========================================================================
Hero blob — organic "liquid" motion. Each colored shape drifts on its own
slow, eased cycle (offset phases) for a GSAP-like morph, over a gentle
whole-blob float. GPU-accelerated transforms only; respects reduced-motion.
========================================================================= */
/* Let the blob overflow its frame so scaling/rotation isn't clipped, and
inset the blob itself so it has room to breathe while animating. */
/* Blob behind Morgan — soft blurred gradient auras (premium), edges fully
faded so there is never a hard cut. closest-side guarantees the fade
completes inside the box before any boundary. */
/* Original crisp blob shape — no blur, no mask. clip-path removed (pushed to DB)
so the shapes render their full organic ends with no cut. */
#hero div:has(> .mhc-blob-anim) { overflow: visible !important; }
.mhc-blob-anim { overflow: visible; transform: scale(1.06); transform-origin: center; }
.mhc-blob-anim g[clip-path] { clip-path: none !important; }
.mhc-blob-p { transform: translateY(15px); }
/* ---- Hero: mobile only (≤48rem) -------------------------------- [#2, #3]
Desktop is already left-aligned (container-query `@2xl/page:justify-start`)
and full-size, so these overrides can't touch it. */
@media (max-width: 48rem) {
/* #2 — left-align the CTA button (heading + subtext are already left). */
#hero .flex.justify-center { justify-content: flex-start !important; }
/* #3 — decorative blob stays behind Morgan (z-0) but smaller. */
.mhc-blob-anim { transform: scale(0.82); }
}
/* 2nd decorative blob — sits BEHIND Morgan and bleeds down out of the hero.
No animation. Injected into #hero, behind the portrait (z-0 < portrait z-10). */
.mhc-deco {
position: absolute;
right: 5%;
bottom: -180px; /* bleeds below the hero */
width: 548px;
height: 849px;
background: url('images/deco-blob.svg') no-repeat center bottom / contain;
z-index: 0;
pointer-events: none;
}
/* Low-opacity decorative blob behind the personal-work card (left side). */
[data-mhc-section="personal-work"] { position: relative; margin-bottom: 2rem; }
@media (min-width: 80rem) { [data-mhc-section="personal-work"] { margin-bottom: 3rem; } }
[data-mhc-section="personal-work"]::before {
content: "";
position: absolute;
left: -3%;
top: 26%;
width: 560px;
height: 900px;
background: url('images/deco-blob.svg') no-repeat left top / contain;
opacity: 0.6;
z-index: 0;
pointer-events: none;
}
[data-mhc-section="personal-work"]::after {
content: "";
position: absolute;
top: 9.5rem;
right: 15%;
width: 9rem;
height: 9.5rem;
background: url('images/ddd.svg') no-repeat center / contain;
z-index: 0;
pointer-events: none;
}
[data-mhc-section="personal-work"] > * { position: relative; z-index: 1; }
/* Card row: full-height columns so the photo can reach the bottom edge. */
[data-mhc-section="personal-work"] .flex.flex-row { align-items: stretch !important; }
/* Neutralize the photo column's negative top margin so columns align. */
[data-mhc-section="personal-work"] [class*="-mt-60"] { margin-top: 0 !important; }
/* Remove the empty 240px "top bar" above the row (badge was moved out). */
[data-mhc-section="personal-work"] .h-60 { display: none !important; }
/* Clean 2-col grid: photo (full height, bottom-stuck) + text (vertically centered). */
[data-mhc-section="personal-work"] .flex.flex-row {
display: grid !important;
grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
column-gap: 3rem;
align-items: stretch !important;
min-height: 560px;
max-width: 100% !important;
}
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 {
display: flex !important;
flex-direction: column;
justify-content: center !important;
min-width: 0 !important;
max-width: 100% !important;
background: transparent !important;
padding-left: 0 !important;
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
transform: translateY(2rem);
}
/* Separate clipping contexts: the photo column itself does NOT clip (so the
decorative blob is never cut); only Morgan's photo wrapper clips. */
[data-mhc-section="personal-work"] .flex.flex-row > div:first-child {
position: relative !important;
overflow: visible !important;
}
[data-mhc-section="personal-work"] .flex.flex-row > div:first-child > .absolute.inset-0 {
overflow: visible !important;
z-index: 0 !important;
}
/* Decorative shape renders fully (never clipped), smaller + bottom-aligned. */
[data-mhc-section="personal-work"] .flex.flex-row > div:first-child > .absolute.inset-0 {
align-items: flex-end !important;
justify-content: center !important;
}
.mhc-decoblob-inner {
width: auto !important;
height: 100% !important;
max-width: none !important;
overflow: visible !important;
}
/* Morgan's photo: tall, bottom-anchored, head extends ABOVE the card top
(nothing clips her — matches the Figma where she pops out of the panel). */
[data-mhc-section="personal-work"] .flex.flex-row > div:first-child > .flex.h-full.w-full.items-end {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
[data-mhc-section="personal-work"] .flex.flex-row > div:first-child > .flex.h-full.w-full.items-end img {
position: absolute !important;
left: 50% !important;
bottom: -2rem !important; /* align the cutout to the cream card edge */
top: auto !important;
transform: translateX(-50%) !important;
height: 114% !important;
width: auto !important;
max-width: none !important;
object-fit: contain !important;
object-position: bottom center !important;
margin: 0 !important;
}
/* Let Morgan overflow the card top — remove clipping on the card ancestors. */
[data-mhc-section="personal-work"] .rounded-3xl { overflow: visible !important; }
/* Expectations section — more top/bottom padding, taller cards, and a
scroll-driven gradient color-flip (GSAP scrubs background-position). */
#workingwithmeexpectations {
background: linear-gradient(215deg, #FFE3DB 0%, #ffe0e2 30%, #fbdce4 52%, #ffe3db 78%, #ffefe8 100%) !important;
background-size: 200% 200% !important;
background-position: 0% 50%;
padding-top: 6.5rem;
padding-bottom: 4.5rem;
}
#workingwithmeexpectations .grid > div {
border-radius: 10px !important;
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
#workingwithmeexpectations .grid {
column-gap: 1.25rem !important;
}
#workingwithmeexpectations .grid + div {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
max-width: none !important;
margin-top: 2rem !important;
padding: 2.25rem 3.25rem !important;
border-radius: 10px !important;
background: linear-gradient(105deg, #F3B1BF 0%, #F8CDD4 48%, #DCC9E9 100%) !important;
text-align: left !important;
}
#workingwithmeexpectations .grid + div p {
max-width: 36rem !important;
color: #fff !important;
font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important;
font-weight: 600 !important;
line-height: 1.05 !important;
margin: 0 !important;
}
#workingwithmeexpectations .grid + div .button {
flex-shrink: 0 !important;
min-width: 13rem !important;
}
/* ---- Expectations: mobile only (≤48rem) ------------------------- [#7]
Stack the CTA banner (heading over full-width button) and single-column
the cards. Desktop row layout above is untouched. */
@media (max-width: 48rem) {
#workingwithmeexpectations { padding-top: 4rem; padding-bottom: 3rem; }
#workingwithmeexpectations .grid { grid-template-columns: 1fr !important; row-gap: 1.25rem; }
#workingwithmeexpectations .grid > div { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
#workingwithmeexpectations .grid + div {
flex-direction: column !important;
align-items: flex-start !important;
gap: 1.5rem !important;
padding: 2rem 1.5rem !important;
}
#workingwithmeexpectations .grid + div .button {
width: 100% !important;
min-width: 0 !important;
}
}
/* Bigger card headings. */
#workingwithmeexpectations .grid > div h3 {
font-size: clamp(1.5rem, 1.8vw, 2rem) !important;
margin-bottom: 1.5rem !important;
}
/* Bigger expectations heading + gap between heading and cards. */
#workingwithmeexpectations h2 {
font-size: clamp(3.1rem, 4.1vw, 3.65rem) !important;
line-height: 1.08 !important;
margin-bottom: 3.5rem !important;
}
/* Bigger quote in the personal-work card, with more breathing room. */
[data-mhc-section="personal-work"] p.font-semibold {
font-size: clamp(1.5rem, 2vw, 2rem) !important;
font-weight: 500 !important;
line-height: 1.25 !important;
}
.mhc-quote-underline {
position: relative;
display: inline-block;
}
.mhc-quote-underline::after {
content: "";
position: absolute;
left: -0.03em;
right: -0.02em;
bottom: -0.02em;
height: 0.08em;
background: #ff6060;
border-radius: 999px;
transform: rotate(-0.5deg);
transform-origin: left center;
}
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 > p { margin-bottom: 1rem !important; }
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 > p.font-semibold { margin-bottom: 1.75rem !important; }
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 > p:not(.font-semibold) { margin-bottom: 1.25rem !important; }
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 > img {
margin-top: 0 !important;
}
/* Simplify the personal-work card: hide the notch/corner "handle" decorations
and the MEET MORGAN circular badge. */
[data-mhc-section="personal-work"] .absolute.bg-\[\#FFFDF6\],
[data-mhc-section="personal-work"] .absolute.bg-\[\#FADEDB\] { display: none !important; }
[data-mhc-section="personal-work"] .absolute[class*="bg-[#FFFDF6]"],
[data-mhc-section="personal-work"] .absolute[class*="bg-[#FADEDB]"] {
display: none !important;
}
/* MEET MORGAN badge — original circular text, pink filled, "M" monogram,
moved (via JS) to the bottom-left over the photo. */
.mhc-badge {
display: inline-flex !important;
position: absolute !important;
left: 16% !important;
bottom: 8% !important;
right: auto !important;
top: auto !important;
width: 200px !important;
height: 200px !important;
margin: 0 !important;
background: #F3B1BF !important;
background-image: none !important;
border-radius: 50% !important;
color: #fff !important;
z-index: 4;
align-items: center;
justify-content: center;
}
.mhc-badge .circular-text-svg {
display: block !important;
position: absolute !important;
inset: -4% !important;
width: 108% !important;
height: 108% !important;
}
.mhc-badge text { fill: #fff !important; font-size: 22px; letter-spacing: 1px; }
.mhc-badge-m {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 34%;
height: auto;
transform: translate(-50%, -50%);
pointer-events: none;
}
/* Remove the pink "gun/L" backdrop panel so only the card + blob show. */
[data-mhc-section="personal-work"] .relative.bg-\[\#FADEDB\] { background: transparent !important; }
/* "Work That Feels Personal" heading — centered, bigger, 2 lines (matches original). */
[data-mhc-section="personal-work"] h2 {
text-align: center !important;
margin-inline: auto !important;
max-width: none !important;
font-size: clamp(2.5rem, 4.5vw, 4rem) !important;
line-height: 1.1 !important;
}
[data-mhc-section="personal-work"] > div > div:first-child {
margin-bottom: 5.25rem !important;
}
/* ---- Personal-work: mobile only (≤48rem) ------------------ [#4, #5, #6]
Desktop grid/blobs/centered heading above are all ≥48rem — untouched. */
@media (max-width: 48rem) {
/* #4 — hide decorative blobs that overlap the text. */
[data-mhc-section="personal-work"]::before,
[data-mhc-section="personal-work"]::after { display: none !important; }
/* #4 — left-align the heading. */
[data-mhc-section="personal-work"] h2 {
text-align: left !important;
margin-inline: 0 !important;
font-size: clamp(2rem, 8vw, 2.5rem) !important;
}
[data-mhc-section="personal-work"] > div > div:first-child { margin-bottom: 2.5rem !important; }
/* #5 — collapse the 2-col card to one column so the quote gets full width. */
[data-mhc-section="personal-work"] .flex.flex-row {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 {
order: 1;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 1.75rem 1.5rem 0 !important;
justify-content: flex-start !important;
}
/* Readable quote size on a narrow screen (desktop uses up to 2rem). */
[data-mhc-section="personal-work"] p.font-semibold {
font-size: 1.35rem !important;
line-height: 1.3 !important;
}
/* #6 — the full photo column is `hidden @7xl/page:block` (hidden below ~1280px
by design), so on mobile the "Meet Morgan" badge is the picture. Anchor it
to the bottom-right of the card and reserve space so it never overlaps the
quote text or the signature. */
[data-mhc-section="personal-work"] .flex.flex-row > .p-8 { padding-bottom: 8.5rem !important; }
.mhc-badge {
left: auto !important;
right: 1.25rem !important;
bottom: 1.5rem !important;
top: auto !important;
transform: none !important;
width: 120px !important;
height: 120px !important;
}
}
/* =========================================================================
Header polish & mousetrack isolation — keeps header, nav links, and MH
logo 100% stable and stationary.
========================================================================= */
.mhc-home-nav,
.mhc-home-nav-logo,
.mhc-home-nav-inner,
.mhc-home-nav nav,
.mhc-home-nav a {
transform: none !important;
position: relative !important;
z-index: 100 !important;
}
.mhc-home-nav nav a {
position: relative;
padding-bottom: 3px;
transition: color 0.25s ease;
}
.mhc-home-nav nav a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--color-brand);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.65,0,0.35,1);
}
.mhc-home-nav nav a:hover { color: var(--color-brand-deep); text-decoration: none; }
.mhc-home-nav nav a:hover::after { transform: scaleX(1); }
/* Thin sticky nav bar — slides in after the hero scrolls away. */
.mhc-stickybar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background: rgba(160, 70, 70, 0.55);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 8px 24px rgba(90,50,50,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
transform: translateY(-100%);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
will-change: transform;
}
.mhc-stickybar-logo img { filter: brightness(0) invert(1); }
.mhc-stickybar nav a { color: #fff; }
.mhc-stickybar nav a:hover { color: #fff; opacity: 0.75; }
.mhc-stickybar.is-visible { transform: translateY(0); }
/* When the WP admin bar is showing, push the fixed sticky bar below it so it
doesn't render under the bar and clip the logo (admin-bar class is on body). */
body.admin-bar .mhc-stickybar { top: 32px; }
/* On mobile the WP admin bar is position:absolute (it scrolls away with the
page), so the sticky bar must sit flush at top:0 — a 46px offset just leaves
an empty gap above the bar once you've scrolled. */
@media (max-width: 782px) { body.admin-bar .mhc-stickybar { top: 0 !important; } }
.mhc-stickybar-inner {
max-width: 1500px;
margin: 0 auto;
padding: 1.1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.mhc-stickybar-logo img { width: 3.5rem; height: auto; display: block; }
.mhc-stickybar nav { display: flex; align-items: center; gap: 2.25rem; }
.mhc-stickybar nav a {
position: relative;
padding-bottom: 3px;
color: #fff !important;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.25s ease;
}
.mhc-stickybar nav a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: #fff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.65,0,0.35,1);
}
.mhc-stickybar nav a:hover { color: #fff !important; opacity: 0.75; text-decoration: none; }
.mhc-stickybar nav a:hover::after { transform: scaleX(1); }
@media (max-width: 48rem) {
.mhc-stickybar-inner { padding: 0.85rem 1.5rem; }
.mhc-stickybar nav { gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.mhc-stickybar nav a { font-size: 0.7rem; }
}
/* Custom display serif — the original site's "Span" (self-hosted, matches exactly). */
@font-face {
font-family: 'Span';
src:
url('fonts/Span/Span-Light.woff2') format('woff2'),
url('fonts/Span/Span-Light.woff') format('woff');
font-style: normal;
font-weight: 300;
font-display: block;
}
/* The Seasons font (self-hosted) */
@font-face {
font-family: 'The Seasons';
src:
url('fonts/TheSeasons/TheSeasons-Light.woff2') format('woff2'),
url('fonts/TheSeasons/TheSeasons-Light.otf') format('opentype');
font-style: normal;
font-weight: 300 400;
font-display: swap;
}
@font-face {
font-family: 'The Seasons';
src:
url('fonts/TheSeasons/TheSeasons-Bold.woff2') format('woff2'),
url('fonts/TheSeasons/TheSeasons-Bold.otf') format('opentype');
font-style: normal;
font-weight: 700;
font-display: swap;
}
/* =========================================================================
Elementor-built global header (MHC Templates → Site Header, post 209).
Styles the native Elementor widgets to match the original coded nav so the
client can edit the header visually in Elementor without design drift.
========================================================================= */
/* Header container (Elementor element id mhchdr01). */
.elementor-element-mhchdr01.e-con {
/* !important + width:100% needed because Elementor's .e-con-full container
CSS otherwise forces the header to span the full viewport (logo flush to
the left edge). Cap it to the shared --wrap and centre it so the header
lines up with the home/Codex grid. */
width: 100% !important;
max-width: var(--wrap) !important;
margin-inline: auto !important;
/* !important so Elementor's default container padding can't override it and
shrink the header's top breathing room on inner pages. Matches the home
nav's 2rem top / 2.5rem bottom rhythm. */
padding: 2rem 1.5rem 2.5rem !important;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Match the home nav logo exactly (5.5rem wide). The Elementor image widget
outputs ![]()
with NO width/height attributes, so the SVG's aspect ratio can
get distorted (letters spilling out of the logo box). Lock BOTH dimensions to
the logo.svg ratio (129:110 → height = width * 110/129 = 4.6875rem) so it
always scales uniformly. */
.mhc-el-logo img {
width: 5.5rem !important;
height: 4.6875rem !important;
aspect-ratio: 129 / 110;
object-fit: contain !important;
border-radius: 0 !important;
max-width: none !important;
display: block;
}
body:not(.home) header.mhc-global-header .elementor-widget-image.mhc-el-logo img,
body:not(.home) header.mhc-global-header .elementor-element-mhchdr02 img {
border-radius: 0 !important;
}
/* Nav container (Elementor element id mhchdr03). */
.elementor-element-mhchdr03.e-con {
display: flex;
flex-direction: row;
align-items: center;
gap: 3rem;
width: auto;
flex-wrap: nowrap;
}
/* Plain nav links — strip Elementor's default button chrome. */
.mhc-el-navlink .elementor-button {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
box-shadow: none !important;
font-family: 'DM Sans', var(--font-sans) !important;
color: var(--color-heading) !important;
font-size: 1.05rem !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
line-height: 52px !important;
min-height: 52px !important;
fill: currentColor;
transition: color 0.25s ease;
}
.mhc-el-navlink .elementor-button:hover {
background: transparent !important;
color: var(--color-brand-deep) !important;
}
.mhc-el-navlink .elementor-button-text { font-weight: 500; }
/* Contact CTA — pill button matching the original .mhc-nav-cta. */
.mhc-el-cta .elementor-button {
height: 52px !important;
padding: 0 40px !important;
border: 1px solid #ff6060 !important;
border-radius: 10px !important;
color: #ff6060 !important;
background: transparent !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 28px !important;
transition: background 0.2s ease, color 0.2s ease;
}
.mhc-el-cta .elementor-button:hover {
background: #ff6060 !important;
color: #fff !important;
}
@media (max-width: 60rem) {
.mhc-el-header .mhc-el-nav { gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
}
/* MHC Menu widget (renders a WP menu inside Elementor) — styled to match the
home nav exactly, so the Elementor header nav is identical to the coded one. */
.mhc-el-menu ul {
display: flex;
align-items: center;
gap: 3rem;
margin: 0;
padding: 0;
list-style: none;
}
.mhc-el-menu a {
font-family: 'DM Sans', var(--font-sans);
color: var(--color-heading);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.25s ease;
}
.mhc-el-menu a:hover { color: var(--color-brand-deep); }
.mhc-el-menu a.mhc-nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 40px;
border: 1px solid #ff6060;
border-radius: 10px;
color: #ff6060;
font-size: 18px;
font-weight: 400;
line-height: 28px;
transition: background 0.2s ease, color 0.2s ease;
}
.mhc-el-menu a.mhc-nav-cta:hover { background: #ff6060; color: #fff; }
@media (max-width: 60rem) {
.mhc-el-menu ul { gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
}
/* Season Mix font (self-hosted trial) */
@font-face {
font-family: 'Season Mix';
src: url('fonts/SeasonMix/SeasonMix-TRIAL-Light.otf') format('opentype');
font-style: normal;
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Season Mix';
src: url('fonts/SeasonMix/SeasonMix-TRIAL-Regular.otf') format('opentype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Season Mix';
src: url('fonts/SeasonMix/SeasonMix-TRIAL-Medium.otf') format('opentype');
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Season Mix';
src: url('fonts/SeasonMix/SeasonMix-TRIAL-SemiBold.otf') format('opentype');
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Season Mix';
src: url('fonts/SeasonMix/SeasonMix-TRIAL-Bold.otf') format('opentype');
font-style: normal;
font-weight: 700;
font-display: swap;
}
/* Season Mix font for all headings (H1-H6, section titles, cards, subtitles) */
h1, h2, h3, h4, h5, h6,
.font-serif,
.text-heading,
.home h1, .home h2, .home h3, .home h4, .home h5, .home h6,
[data-mhc-section] h1,
[data-mhc-section] h2,
[data-mhc-section] h3,
[data-mhc-section] h4,
[data-mhc-section] h5,
[data-mhc-section] h6,
.mhc-fw-title,
.mhc-fw-card-title,
.mhc-latest-head h2,
.mhc-latest-card-title,
.mhc-carousel-title,
.text-ink {
font-family: 'Season Mix', 'Span', serif !important;
letter-spacing: -0.015em !important;
}
/* =========================================================================
Design tokens — ported verbatim from the Astro site's @theme block.
========================================================================= */
:root {
--font-sans: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Season Mix', 'Span', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--color-canvas: #fff0ed;
--color-button-primary: #ff6060;
--color-button-primary-hover: #ff5757;
--color-button-primary-active: #d93f3a;
--color-surface: #fff3f0;
--color-surface-soft: #ffe6e2;
--color-surface-warm: #ffded9;
--color-partner-logo-background: #fbd5d0;
--color-brand: #ff6060;
--color-brand-strong: #ff5757;
--color-brand-deep: #d93f3a;
/* Morgan's "orange" = her brand coral. Used on form focus, dropdowns,
highlights. Kept as vars so accents stay on-brand in one place. */
--color-orange: #ff6060;
--color-orange-deep: #d93f3a;
--color-orange-soft: #ffe6e2;
--color-ink: #26201f;
--color-heading: #404052;
--color-body: #4a4a60;
--color-plum: #5d5c94;
--color-wine: #3c1818;
--color-wine-soft: #562f2e;
--color-border-soft: #eec1ca;
--color-border-footer: rgba(255, 87, 87, 0.34);
--radius-control: 8px;
--radius-card: 0.625rem;
--radius-panel: 1.75rem;
--radius-footer: 2.9375rem;
--shadow-card: 0 10px 24px rgba(165, 100, 98, 0.15);
--wrap: 93.75rem; /* 1500px */
}
/* =========================================================================
Base
========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
/* Lenis smooth-scroll base rules (required for correct behavior). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Branded scrollbar — Morgan's coral→plum on the soft canvas track.
scrollbar-gutter reserves the track's width on every page, even short ones
that don't scroll — otherwise the centered .mhc-wrap grid shifts a few
pixels sideways whenever you navigate to a page with a different content
height (scrollbar present vs absent), making the nav look like it "jumps". */
html { scrollbar-width: auto; scrollbar-color: var(--color-brand) var(--color-surface-soft); scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-surface-soft); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--color-brand), var(--color-plum));
border-radius: 999px;
border: 3px solid var(--color-surface-soft);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--color-brand-deep), var(--color-plum)); }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--color-body, #4a4a60);
background: var(--color-canvas, #fff0ed);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--color-heading);
line-height: 1.15;
font-weight: 400;
margin: 0 0 0.5em;
}
a { color: var(--color-brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.mhc-wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: 1.5rem;
}
/* Homepage nav (single-page scroll header, sits above the hero) */
.mhc-home-nav { padding-top: 2rem; padding-bottom: 2.5rem; }
/* Align the sticky nav's logo + links to the SAME edges every
[data-mhc-section] block uses, at EVERY width. The sections are a 1500px
.max-w-7xl centred inside a `p-10` (2.5rem) padding wrapper. Match that
exactly: give the nav wrap the same 2.5rem side padding and a max-width of
1500 + those two paddings, so its content is a 1500px box with 2.5rem
gutters — identical inset to the sections on wide screens AND when the
viewport is narrow enough that the padding (not the centring) sets the edge. */
.mhc-home-nav .mhc-wrap {
max-width: calc(var(--wrap) + 5rem);
padding-inline: 2.5rem;
}
.mhc-home-nav-inner { display: flex; align-items: center; justify-content: space-between; }
.mhc-home-nav-logo { display: inline-block; color: var(--color-heading); }
.mhc-home-nav-logo svg, .mhc-home-nav-logo img { width: 5.5rem; height: auto; display: block; }
.mhc-home-nav nav ul {
display: flex;
align-items: center;
gap: 3rem;
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
}
.mhc-home-nav nav a {
font-family: 'DM Sans', var(--font-sans);
color: var(--color-heading);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
text-decoration: none;
}
.mhc-home-nav nav a.mhc-nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 40px;
border: 1px solid #ff6060;
border-radius: 10px;
color: #ff6060;
font-size: 18px;
font-weight: 400;
line-height: 28px;
transition: background 0.2s ease, color 0.2s ease;
}
.mhc-home-nav nav a.mhc-nav-cta::after { display: none; }
.mhc-home-nav nav a.mhc-nav-cta:hover {
background: #ff6060;
color: #fff;
}
.mhc-home-nav nav a:hover { color: var(--color-brand-deep); text-decoration: none; }
@media (max-width: 60rem) {
.mhc-home-nav nav ul { gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
}
/* Buttons */
.mhc-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-button-primary);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-control);
font-weight: 600;
transition: background 0.15s ease;
text-decoration: none;
}
.mhc-btn:hover { background: var(--color-button-primary-hover); text-decoration: none; color: #fff; }
.mhc-btn:active { background: var(--color-button-primary-active); }
/* =========================================================================
Site header / footer (used on case-study pages; Elementor pages can
override with their own header via Theme Builder if Pro is added).
========================================================================= */
.mhc-site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border-soft);
}
.mhc-site-header .mhc-wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 1rem;
}
.mhc-logo { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-heading); font-weight: 500; }
.mhc-logo:hover { text-decoration: none; }
.mhc-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.mhc-nav a { color: var(--color-heading); font-weight: 500; }
.mhc-site-footer {
margin-top: 5rem;
background: var(--color-wine);
color: #fbeae7;
border-top-left-radius: var(--radius-footer);
border-top-right-radius: var(--radius-footer);
padding: 3.5rem 0;
}
.mhc-site-footer a { color: #ffd7cf; }
.mhc-site-footer .mhc-wrap { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
/* Line the global footer's content box up with the site header wrapper
(.mhc-wrap = var(--wrap) width + 1.5rem padding) on EVERY page. The footer
markup used max-w-7xl (80rem) + p-10, so its edges never matched the header
nav. Override its outer padding + inner cap to match .mhc-wrap exactly. */
[data-mhc-section="footer"] > #footer > div[class*="p-6"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
[data-mhc-section="footer"] > #footer > div[class*="p-6"] > .max-w-7xl {
max-width: var(--wrap) !important;
padding-inline: 1.5rem !important;
}
.mhc-footer-social { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
/* =========================================================================
Service pills
========================================================================= */
.mhc-services-heading {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
color: var(--color-heading);
margin: 0 0 1.5rem;
}
.mhc-service-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
margin: 0 0 2.5rem;
padding: 0 0 2.5rem;
border-bottom: 1px solid rgba(238, 193, 202, 0.4);
}
.mhc-pill {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
padding: 0.75rem 1.5rem;
border-radius: 999px;
white-space: nowrap;
color: #26201f;
line-height: 14px;
}
/* Exact tones from the original site's defaultServiceTones map. */
.mhc-pill--lilac { background-color: #efd0ee; }
.mhc-pill--peach { background-color: #f6cec5; }
.mhc-pill--rose { background-color: #f5c7d4; }
/* =========================================================================
Case study — single
========================================================================= */
.cs-hero {
padding-block: 3rem 2rem;
text-align: center;
}
.cs-hero h1 {
font-size: clamp(2.25rem, 5vw, 3.75rem);
color: var(--color-heading);
}
.cs-hero .cs-desc {
max-width: 42rem;
margin: 1rem auto 1.5rem;
font-size: 1.125rem;
color: var(--color-body);
}
.cs-hero .mhc-service-pills { justify-content: center; margin-top: 1.25rem; }
.cs-hero-image {
width: 100%;
max-width: var(--wrap);
margin: 2rem auto 0;
padding-inline: 1.5rem;
}
.cs-hero-image img {
width: 100%;
border-radius: var(--radius-panel);
box-shadow: var(--shadow-card);
}
.cs-body { padding-block: 3.5rem; }
/* Copy block: text + image side by side, alternating. */
.cs-copyblock {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-block: 3.5rem;
}
.cs-copyblock.image-left .cs-copyblock-text { order: 2; }
.cs-copyblock.image-left .cs-copyblock-media { order: 1; }
.cs-copyblock-text p { font-size: 1.0625rem; margin: 0 0 1rem; color: var(--color-body); }
.cs-copyblock-media img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; }
/* Full-width detail image */
.cs-image { margin-block: 2.5rem; }
.cs-image img { width: 100%; border-radius: var(--radius-panel); }
/* Centered detail copy */
.cs-detailcopy {
max-width: 46rem;
margin: 3rem auto;
text-align: center;
font-family: var(--font-serif);
font-size: 1.5rem;
line-height: 1.4;
color: var(--color-heading);
}
/* Image pair (two side by side) */
.cs-imagepair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-block: 2.5rem;
}
.cs-imagepair img { border-radius: var(--radius-card); width: 100%; }
/* Footer image */
.cs-footer-image { margin-top: 3.5rem; }
.cs-footer-image img { width: 100%; border-radius: var(--radius-panel); }
/* Back link + next steps */
.cs-back { display: inline-block; margin: 2rem 0; color: var(--color-brand-deep); font-weight: 600; }
/* =========================================================================
Case study — archive / work grid
========================================================================= */
/* Case-study archive: pink page background like the homepage hero */
body.post-type-archive-case_study,
body.tax-case_study_service {
background: linear-gradient(150deg, #ffe7e2 0%, #ffd9d6 45%, rgba(224,116,150,0.5) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
.cs-archive {
background: transparent;
padding-block: 2rem 5rem;
}
.cs-archive-header {
text-align: center;
padding-block: 7.5rem 1.5rem;
}
.cs-archive-header h1 {
color: var(--color-heading);
font-family: "Season Mix", Span, serif;
font-size: clamp(3.5rem, 7vw, 6.5rem);
font-weight: 400;
line-height: 0.95;
margin: 0;
}
.cs-archive-header p {
max-width: 46rem;
margin: 1.25rem auto 0;
color: var(--color-body);
font-size: 1.125rem;
line-height: 1.6;
}
/* ---- Inner pages: mobile only (≤48rem) --------------------------- [#12]
12px left/right padding on content wraps (NOT the header nav wrap), and extra
top room on the archive title so it clears the fixed header overlay. */
@media (max-width: 48rem) {
body:not(.home) .mhc-wrap:not(.mhc-home-nav-inner) { padding-inline: 12px !important; }
.cs-archive-header { padding-block: 10rem 1rem !important; }
.cs-archive-header h1 { font-size: clamp(2.75rem, 13vw, 4rem) !important; }
.cs-archive { padding-block: 1rem 3rem !important; }
}
/* Plain page (Privacy Policy etc.): matching hero title + readable body.
Left-aligned, with enough top room to clear the fixed nav. */
.mhc-page-header {
padding-block: 11rem 1rem;
text-align: left;
}
.mhc-page-body {
padding-block: 1.5rem 5rem;
color: var(--color-body, #4a4a60);
font-size: 1.0625rem;
line-height: 1.75;
}
/* Cap the reading width but keep every block anchored to the same left edge as
the "Privacy Policy" title above (both live in .mhc-wrap). */
.mhc-page-body > * { max-width: 52rem; }
.mhc-page-body h2 {
font-family: "Season Mix", Span, serif;
font-weight: 400;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
color: var(--color-heading, #404052);
line-height: 1.2;
margin: 2.5rem 0 0.75rem;
}
.mhc-page-body h3 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.35rem;
color: var(--color-heading, #404052);
margin: 1.75rem 0 0.5rem;
}
.mhc-page-body p { margin: 0 0 1.1rem; }
.mhc-page-body ul {
margin: 0 0 1.3rem;
padding-left: 1.25rem;
list-style: disc;
}
.mhc-page-body li { margin: 0.3rem 0; }
.mhc-page-body a { color: var(--color-brand-deep, #d93f3a); text-decoration: underline; text-underline-offset: 2px; }
.cs-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4.5rem 2rem;
padding-block: 3rem;
}
.cs-card {
background: transparent;
border-radius: 0;
box-shadow: none;
transition: transform 0.2s ease;
display: flex;
flex-direction: column;
}
.cs-card:hover { box-shadow: none; }
.cs-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.cs-card-thumb { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; }
.cs-card-thumb img,
.cs-card-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card-body { padding: 1.25rem 0.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.cs-card-body h2 {
color: var(--color-heading);
font-family: var(--font-serif);
font-size: clamp(1.75rem, 2.2vw, 2.35rem);
font-weight: 300;
line-height: 1.05;
margin: 0;
}
.cs-card-body p {
margin: 0;
color: var(--color-body);
font-size: 0.95rem;
line-height: 1.55;
}
.cs-card .mhc-service-pills { margin-top: auto; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
/* Full-fold feature card: spans both columns, wider cinematic image */
.cs-card--full { grid-column: 1 / -1; }
.cs-card--full .cs-card-thumb { aspect-ratio: 21 / 9; }
.cs-card--full .cs-card-body h2 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
/* =========================================================================
Responsive
========================================================================= */
@media (max-width: 48rem) {
.cs-grid { grid-template-columns: 1fr; }
.cs-copyblock, .cs-imagepair { grid-template-columns: 1fr; gap: 1.5rem; }
.cs-copyblock.image-left .cs-copyblock-text,
.cs-copyblock.image-left .cs-copyblock-media { order: initial; }
.mhc-nav ul { gap: 1rem; }
.cs-detailcopy { font-size: 1.25rem; }
}
@media (min-width: 48.001rem) and (max-width: 70rem) {
.cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =========================================================================
Homepage sections (rendered from the extracted section JSON)
========================================================================= */
.home-hero { background: linear-gradient(132deg, #ffe7e2, rgba(224,116,150,0.55)); padding-block: 4rem; }
.home-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.home-hero-logo { width: 120px; margin-bottom: 1.5rem; }
.home-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 12ch; }
.home-hero .lead { font-size: 1.25rem; max-width: 42ch; margin-block: 1rem 1.75rem; }
.home-hero-media { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.home-hero-photo { position: relative; z-index: 1; width: 100%; max-width: 460px; }
/* =========================================================================
Morphing blob (behind the hero + personal photos)
========================================================================= */
.mhc-blob {
position: absolute;
z-index: 0;
background: linear-gradient(135deg, #d9b8e6 0%, #f4b8cb 55%, #ffcbb8 100%);
opacity: 0.85;
filter: blur(4px);
will-change: border-radius, transform;
animation: mhc-blob-morph 14s ease-in-out infinite;
}
.mhc-blob--hero {
inset: 4% 8% -2% 8%;
border-radius: 46% 54% 62% 38% / 48% 44% 56% 52%;
}
.mhc-blob--personal {
inset: 10% 12% 0 12%;
opacity: 0.55;
animation-duration: 18s;
animation-direction: reverse;
}
@keyframes mhc-blob-morph {
0%,100% { border-radius: 46% 54% 62% 38% / 48% 44% 56% 52%; transform: rotate(0deg) scale(1); }
25% { border-radius: 62% 38% 40% 60% / 56% 58% 42% 44%; transform: rotate(3deg) scale(1.04); }
50% { border-radius: 38% 62% 56% 44% / 42% 60% 40% 58%; transform: rotate(-2deg) scale(0.98); }
75% { border-radius: 54% 46% 34% 66% / 60% 40% 60% 40%; transform: rotate(2deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .mhc-blob { animation: none; } }
/* =========================================================================
Circular "HELLO · HELLO" badge with script M monogram
========================================================================= */
.mhc-badge {
position: absolute;
top: -28px;
right: 32px;
z-index: 4;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle at 50% 32%, #ff8f80 0%, #ff6a61 55%, #f2564f 100%);
box-shadow: 0 12px 26px rgba(217, 63, 58, 0.38);
display: grid;
place-items: center;
}
.mhc-badge-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: mhc-badge-spin 24s linear infinite;
}
.mhc-badge-ring text {
fill: #fff;
font-family: var(--font-serif); /* Span — matches the reference badge */
font-size: 16px;
font-weight: 300;
letter-spacing: 2px;
}
.mhc-badge-m {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 34%;
height: auto;
transform: translate(-50%, -50%);
pointer-events: none;
}
@keyframes mhc-badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mhc-badge-ring { animation: none; } }
.home-personal { padding-block: 5rem; }
.home-personal-head { text-align: center; max-width: 52rem; margin: 0 auto 2.5rem; }
.home-personal-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.home-personal-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; background: #fffdf6; border-radius: var(--radius-panel); padding: 1.25rem; box-shadow: var(--shadow-card); }
.home-personal-photo { position: relative; border-radius: var(--radius-panel); overflow: hidden; background: radial-gradient(circle at 50% 20%, #fadedb, #ffece7); display: flex; align-items: flex-end; justify-content: center; }
.home-personal-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.home-personal-panel { background: #fffdf6; border-radius: var(--radius-card); padding: 2rem; align-self: center; }
.home-personal-panel p:first-child { font-size: 1.15rem; color: var(--color-heading); }
.home-signature { width: 200px; margin-top: 1rem; }
.home-expect { background: linear-gradient(215deg, #ffe3db, rgba(243,190,205,0.56)); padding-block: 5rem; }
.home-expect h2 { font-size: clamp(2rem, 4vw, 2.75rem); max-width: 20ch; }
.home-expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block: 2.5rem; }
.home-expect-card { background: rgba(255,247,244,0.78); border-radius: var(--radius-card); padding: 1.75rem; }
.home-expect-card h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; color: var(--color-heading); }
.home-expect-close { max-width: 40rem; margin: 0 auto 1.5rem; text-align: center; }
.home-expect > .mhc-wrap > .mhc-btn { display: block; width: fit-content; margin-inline: auto; }
.home-featured { padding-block: 5rem; text-align: center; }
.home-featured h2 { font-size: clamp(2rem, 4vw, 3rem); }
.home-featured .home-sub { color: var(--color-body); margin-bottom: 2.5rem; }
.home-featured .cs-grid { text-align: left; }
.home-featured-more { margin-top: 2.5rem; }
.home-testimonials { background: var(--color-surface-soft); padding-block: 5rem; }
.home-testimonials h2 { text-align: center; font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 2.5rem; }
.home-testimonials-grid { columns: 3; column-gap: 1.5rem; }
.home-quote { break-inside: avoid; margin: 0 0 1.5rem; background: #fff; border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card); }
.home-quote blockquote { margin: 0 0 0.75rem; font-size: 1rem; color: var(--color-body); }
.home-quote figcaption { font-weight: 600; color: var(--color-heading); }
.home-services { padding-block: 5rem; }
.home-services h2 { font-size: clamp(2rem, 4vw, 2.75rem); max-width: 22ch; margin-bottom: 2.5rem; }
.home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.home-service-card { background: var(--color-surface); border-radius: var(--radius-card); padding: 1.75rem; }
.home-service-icon { width: 48px; height: 48px; margin-bottom: 1rem; }
.home-service-card h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; color: var(--color-heading); }
.home-how { padding-block: 5rem; }
.home-how-card { background: #4a1e1c; color: #fbeae7; border-radius: var(--radius-panel); padding: 3rem; max-width: 64rem; margin-inline: auto; }
.home-how-card h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.home-how-steps { list-style: none; padding: 0; margin: 2rem 0; }
.home-how-steps li { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); }
.home-how-step { color: var(--color-brand); font-weight: 600; }
.home-how-steps h3 { color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; }
.home-how-steps p { opacity: 0.85; margin: 0.5rem 0 0; }
.home-awards { background: linear-gradient(215deg, #ffe3db, rgba(243,190,205,0.6)); padding-block: 5rem; text-align: center; }
.home-awards h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
.home-awards .home-sub { max-width: 44rem; margin: 0.75rem auto 2.5rem; }
.home-awards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.home-award { background: rgba(203,157,156,1); border-radius: var(--radius-card); height: 140px; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.home-award img { max-height: 80px; width: auto; filter: brightness(0) invert(1); }
.home-team { padding-block: 5rem; }
.home-team .mhc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.home-team-head h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
.home-team-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.home-partner { background: var(--color-partner-logo-background); border-radius: var(--radius-card); height: 90px; display: flex; align-items: center; justify-content: center; padding: 1rem; transition: background 0.15s; }
.home-partner:hover { background: var(--color-surface-warm); }
.home-partner img { max-height: 48px; width: auto; }
.home-contact { background: linear-gradient(120deg, #ffe0e0, rgba(147,110,140,0.5)); padding-block: 5rem; }
.home-contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.home-contact-copy { border-radius: var(--radius-panel); padding: 3rem; color: #fff; background-size: cover; background-position: center; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; }
.home-contact-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.home-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: #fffdf6; border-radius: var(--radius-panel); padding: 2rem; }
.home-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--color-heading); }
.home-field-wide { grid-column: 1 / -1; }
.home-field input, .home-field select, .home-field textarea { border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); padding: 0.65rem 0.8rem; font: inherit; background: #fff; }
.home-contact-form .mhc-btn { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 60rem) {
.home-hero-inner, .home-personal-card, .home-team .mhc-wrap, .home-contact-inner { grid-template-columns: 1fr; }
.home-expect-grid, .home-services-grid, .home-awards-grid, .home-team-logos { grid-template-columns: 1fr 1fr; }
.home-testimonials-grid { columns: 2; }
.home-how-steps li { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* =========================================================================
About Us — Hero (mhc_about_hero widget)
Pink gradient lives on the hero section only (#about-hero, the outer
Elementor , which is full-bleed by default) — NOT the whole
page. The rest of the page (bio, etc.) sits on the site's normal light
background, matching where the case-studies page's grid content sits.
========================================================================= */
body.page-about { background: var(--color-canvas, #fff0ed); }
#about-hero {
background: linear-gradient(150deg, #ffe7e2 0%, #ffd9d6 45%, rgba(224,116,150,0.5) 100%);
}
.mhc-about-hero-inner {
max-width: 52rem;
margin-inline: auto;
padding: 9.5rem 1.5rem 3.5rem;
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
text-align: center;
}
.mhc-about-hero-heading {
font-family: "Season Mix", Span, serif;
font-weight: 400;
font-size: clamp(3.5rem, 7vw, 6.5rem);
line-height: 0.95;
color: var(--color-heading, #404052);
margin: 0;
}
.mhc-about-hero-subtext {
font-family: var(--font-sans);
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-body, #4a4a60);
max-width: 46rem;
margin: 1.25rem auto 0;
}
@media (max-width: 40rem) {
.mhc-about-hero-inner { padding: 6rem 1.25rem 3rem; }
}
/* Contact page: tighten the subtext width so "figure out how I can help."
wraps onto the second line instead of orphaning. Contact page only. */
body.page-id-167 .mhc-about-hero-subtext {
max-width: 38rem;
text-wrap: balance;
}
/* Services page hero: left-align the text to the content edge so it lines up
flush with the body content below it ("Built to scale…", the service cards),
NOT centred. The inner already carries .mhc-wrap, so match that wrap width +
padding and left-anchor the text. Also match the Case Studies H1 (Season Mix 400). */
body.page-services #hero .elementor-container,
body.page-services #hero .elementor-column,
body.page-services #hero .elementor-widget-wrap,
body.page-services #hero .elementor-element-svherowg,
body.page-services #hero .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
margin-inline: auto !important;
}
body.page-services .mhc-about-hero-inner {
align-items: center;
text-align: center;
max-width: var(--wrap);
margin-inline: auto !important;
padding-inline: 1.5rem;
}
body.page-services .mhc-about-hero-heading {
font-family: "Season Mix", Span, serif;
font-weight: 400;
color: rgb(64, 64, 82);
}
body.page-services .mhc-about-hero-subtext {
margin-inline: auto;
text-align: center;
}
/* Single continuous background for the whole Services page, like the Case
Studies archive: one fixed gradient on , and every section on top of
it made transparent so there's no seam between the hero and the content. */
body.page-services {
background: linear-gradient(150deg, #ffe7e2 0%, #ffd9d6 45%, rgba(224,116,150,0.5) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
body.page-services #hero,
body.page-services #hero .elementor-container,
body.page-services #hero .elementor-column,
body.page-services #hero .elementor-widget-wrap,
body.page-services .elementor-element-svstack01,
body.page-services .elementor-element-svstack01 .elementor-container,
body.page-services .elementor-element-svstack01 .elementor-column,
body.page-services .elementor-element-svstack01 .elementor-widget-wrap,
body.page-services .mhc-services-stack {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* Kill any decorative blob / glow pseudo-elements on the services hero, and
stop the hero section clipping so nothing shows a hard "cut" edge. */
body.page-services #hero::before,
body.page-services #hero::after,
body.page-services #hero .elementor-widget-container::before,
body.page-services #hero .elementor-widget-container::after,
body.page-services #hero .mhc-deco,
body.page-services #hero .mhc-blob,
body.page-services #hero [class*="mhc-blob"] {
display: none !important;
background: none !important;
}
body.page-services #hero,
body.page-services .elementor-element-svstack01 {
overflow: visible !important;
}
/* Remove the "Built to scale with your goals." heading on the services page. */
body.page-services .mhc-services-stack-heading {
display: none !important;
}
/* Match the Case Studies archive hero rhythm: 9.5rem from the top of the page
to the heading, 1.25rem from H1 to intro copy, and 4.5rem from intro copy
to the content below. Elementor contributes a 10px wrapper offset before the
stack widget, so the stack top padding is 38px instead of the archive grid's
full 3rem. */
body.page-services #hero {
padding-top: 0 !important;
}
body.page-services #hero .elementor-container,
body.page-services #hero .elementor-column,
body.page-services #hero .elementor-widget-wrap,
body.page-services #hero .elementor-widget-container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-services #hero .elementor-element-svherowg {
margin-bottom: 0 !important;
}
body.page-services #hero > div > div > div:first-child {
margin-top: 0 !important;
margin-right: 0 !important;
}
body.page-services .mhc-about-hero-inner {
gap: 0 !important;
padding-top: 9.5rem !important;
padding-bottom: 1.5rem !important;
}
body.page-services .mhc-services-stack {
padding-top: 38px !important;
}
/* =========================================================================
About Us — Bio (mhc_about_bio widget)
========================================================================= */
.mhc-about-bio { padding-block: 5rem 3.5rem; }
.mhc-about-bio--divider { padding-bottom: 2.5rem; }
.mhc-about-bio--divider .mhc-about-bio-inner {
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(64, 64, 82, 0.15);
}
/* The section right after the divider (matched via its outer Elementor
section id, since the widget's own isn't a direct DOM sibling)
needs less top padding — the divider already provides the breathing room. */
#about-bio-1 + section .mhc-about-bio { padding-top: 2.5rem; }
#about-hero + section .mhc-about-bio { padding-top: 38px; }
.mhc-about-bio-heading {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(2.75rem, 5.5vw, 4.25rem);
line-height: 1.05;
color: var(--color-heading, #404052);
margin: 0 0 1.75rem;
}
.mhc-about-bio-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 3.5rem;
align-items: center;
}
.mhc-about-bio--photo-right .mhc-about-bio-copy { order: 1; }
.mhc-about-bio--photo-right .mhc-about-bio-photo { order: 2; }
.mhc-about-bio--photo-left .mhc-about-bio-grid { grid-template-columns: 0.85fr 1.15fr; }
.mhc-about-bio--photo-left .mhc-about-bio-photo { order: 1; }
.mhc-about-bio--photo-left .mhc-about-bio-copy { order: 2; }
.mhc-about-bio-photo {
display: flex;
justify-content: center;
padding-block: 0 2rem;
}
.mhc-about-bio-polaroid {
background: #eae5dd;
padding: 0.9rem 0.9rem 1.1rem;
transform: rotate(-3deg);
max-width: 30rem;
width: 100%;
}
.mhc-about-bio-photo img {
display: block;
width: 100%;
object-fit: cover;
aspect-ratio: 4 / 5;
}
#about-bio-1 .mhc-about-bio-polaroid {
max-width: 28rem;
background: #cf7d76;
padding: 0.7rem;
transform: none;
margin-top: 1.5rem;
border-radius: 8px;
}
#about-bio-1 .mhc-about-bio-photo img {
aspect-ratio: auto;
object-fit: contain;
border-radius: 8px;
}
#about-bio-1 .mhc-about-bio-caption {
color: #fff;
font-weight: 700;
}
.mhc-about-bio-caption {
margin: 0.9rem 0 0;
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-body, #4a4a60);
}
.mhc-about-bio-copy {
font-family: var(--font-sans);
font-weight: 400;
color: rgb(74, 74, 96);
font-size: 18px;
line-height: 34px;
padding-top: 0;
}
.mhc-about-bio-copy p { margin: 0 0 1.25rem; }
.mhc-about-bio-copy p:last-child { margin-bottom: 0; }
@media (max-width: 60rem) {
.mhc-about-bio-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
About Us — Accordion ("What Shapes My Work")
========================================================================= */
.mhc-about-accordion {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: linear-gradient(215deg, #ffe3db, rgba(243, 190, 205, 0.56));
padding-block: 6rem;
}
.mhc-about-accordion-heading {
font-family: var(--font-serif);
font-weight: 300;
color: var(--color-heading, #404052);
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.05;
margin: 0 0 3rem;
}
.mhc-accordion { border-top: 1px solid rgba(64, 64, 82, 0.18); }
.mhc-accordion-item {
border-bottom: 1px solid rgba(64, 64, 82, 0.18);
}
.mhc-accordion-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-block: 1.75rem;
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--color-heading, #404052);
}
.mhc-accordion-summary::-webkit-details-marker { display: none; }
.mhc-accordion-toggle {
flex: none;
position: relative;
width: 1rem;
height: 1rem;
}
.mhc-accordion-toggle::before,
.mhc-accordion-toggle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1rem;
height: 1.5px;
background: var(--color-brand, #ff5757);
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.mhc-accordion-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.mhc-accordion-item[open] .mhc-accordion-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.mhc-accordion-item[open] .mhc-accordion-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.mhc-accordion-item[open] .mhc-accordion-toggle::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mhc-accordion-body { padding: 0 0 2rem; }
.mhc-accordion-body p {
margin: 0;
max-width: 46rem;
font-family: var(--font-sans);
color: var(--color-body, #4a4a60);
font-size: 1.05rem;
line-height: 1.7;
}
/* Waghela Associates case study — feature image column balanced and cropped at bottom */
#waghela-feature .elementor-container { align-items: center !important; }
#waghela-feature-col .elementor-widget-image img {
max-height: 26.5rem;
width: 100%;
object-fit: cover;
object-position: center top;
border-radius: 8px;
display: block;
}
@media (max-width: 40rem) {
.home-expect-grid, .home-services-grid, .home-awards-grid, .home-team-logos { grid-template-columns: 1fr; }
.home-testimonials-grid { columns: 1; }
.home-contact-form { grid-template-columns: 1fr; }
}
/* ---- Services page: stacked editorial service cards --------------------- */
.mhc-services-stack { padding-block: 5rem 6rem; background: var(--color-canvas); }
.mhc-services-stack-inner { max-width: var(--wrap); }
.mhc-services-stack-heading {
font-family: var(--font-serif);
font-weight: 300;
color: var(--color-heading, #2c1815);
font-size: clamp(2.25rem, 4.5vw, 3.25rem);
line-height: 1.1;
margin: 0 0 3rem;
max-width: none;
white-space: nowrap;
}
body.page-services .mhc-services-stack-heading { white-space: nowrap !important; max-width: none !important; }
@media (max-width: 60rem) {
body.page-services .mhc-services-stack-heading { white-space: normal !important; max-width: 34rem !important; }
}
.mhc-services-cards { display: flex; flex-direction: column; gap: 1.75rem; }
.mhc-services-card {
position: relative;
overflow: hidden;
border-radius: 8px;
padding: clamp(2.25rem, 4vw, 3.75rem) clamp(2rem, 5vw, 4.5rem);
background: var(--color-surface-soft);
border: 0;
box-shadow: none;
transition: none;
min-height: 22rem;
}
.mhc-services-card:hover {
box-shadow: none;
}
/* Services page cards: simple soft fills sampled from the hero palette. */
body.page-services .mhc-services-card:nth-child(3n+1) {
background: #fff3f0;
}
body.page-services .mhc-services-card:nth-child(3n+2) {
background: #fff3f0;
}
body.page-services .mhc-services-card:nth-child(3n+3) {
background: #fff3f0;
}
.mhc-services-card-top {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
.mhc-services-card-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.75rem, 3.2vw, 2.75rem);
line-height: 1.1;
color: var(--color-heading, #2c1815);
margin: 0;
}
.mhc-services-card-number {
flex: none;
font-family: "Season Mix", Span, serif;
font-weight: 400;
font-size: clamp(3.75rem, 6.2vw, 6.5rem);
line-height: 0.75;
letter-spacing: 0;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 87, 87, 0.62);
text-stroke: 1px rgba(255, 87, 87, 0.62);
padding-top: 0;
opacity: 0.72;
}
.mhc-services-card-divider {
position: relative;
z-index: 1;
height: 1px;
background: rgba(112, 112, 124, 0.26);
margin: 1.75rem 0 2rem;
}
.mhc-services-card-statement {
position: relative;
z-index: 1;
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.5;
color: var(--color-heading, #2c1815);
max-width: 34rem;
margin: 0 0 2.25rem;
}
.mhc-services-card-points {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 2.5rem;
row-gap: 0.85rem;
max-width: 40rem;
}
.mhc-services-card-points li {
position: relative;
padding-left: 1.15rem;
font-family: var(--font-sans);
font-size: 0.98rem;
line-height: 1.5;
color: var(--color-body);
}
.mhc-services-card-points li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 0.4rem;
height: 0.4rem;
background: var(--color-brand);
}
.mhc-services-card-bignum {
position: absolute;
z-index: 0;
right: -0.5rem;
bottom: -0.8rem;
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(7rem, 16vw, 12rem);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(60, 24, 24, 0.14);
user-select: none;
pointer-events: none;
}
/* ==========================================================================
SERVICES PAGE: Crisp Animated Service Icons (Clean, No Glow)
High-definition vector animations tailored to each icon's geometry,
optimized for sharp clarity on crisp white card backgrounds.
========================================================================== */
/* Icon Container & 3D Perspective Stage */
.mhc-services-card-icon-wrap {
position: absolute;
z-index: 1;
right: clamp(1.5rem, 4vw, 3.25rem);
bottom: clamp(1.5rem, 3.5vw, 2.75rem);
width: clamp(6.5rem, 11vw, 9.5rem);
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
user-select: none;
perspective: 800px;
}
/* Base Icon Element: Crisp vector clarity, no blur */
.mhc-services-card-icon {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.94;
transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mhc-services-card:hover .mhc-services-card-icon {
opacity: 1;
transform: scale(1.06);
}
.mhc-services-card-icon svg.mhc-svc-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* Service cards stay completely stationary on hover (no jumping/moving) */
body.page-services .mhc-services-card {
transition: none;
border: 1px solid rgba(225, 205, 210, 0.5);
}
body.page-services .mhc-services-card:hover {
transform: none !important;
}
/* --------------------------------------------------------------------------
0: STRATEGY AND BRAND — Kinetic Aperture Vortex
Crisp geometric rotation of 6 interlocking blades with sequential focus waves
-------------------------------------------------------------------------- */
.mhc-pinwheel-rotor {
transform-origin: 31.5px 27.3px;
animation: mhcApertureSpin 22s linear infinite;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mhcApertureSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.mhc-blade {
transform-box: fill-box;
transform-origin: center;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
animation: mhcBladePulse 4.2s ease-in-out infinite;
}
.mhc-blade-1 { animation-delay: 0s; }
.mhc-blade-2 { animation-delay: 0.7s; }
.mhc-blade-3 { animation-delay: 1.4s; }
.mhc-blade-4 { animation-delay: 2.1s; }
.mhc-blade-5 { animation-delay: 2.8s; }
.mhc-blade-6 { animation-delay: 3.5s; }
@keyframes mhcBladePulse {
0%, 100% { opacity: 0.85; transform: scale(1); }
35% { opacity: 1; transform: scale(1.05); }
70% { opacity: 0.8; transform: scale(0.98); }
}
.mhc-services-card--0:hover .mhc-pinwheel-rotor {
animation-duration: 8s;
transform: scale(1.08);
}
.mhc-services-card--0:hover .mhc-blade {
opacity: 1;
}
/* --------------------------------------------------------------------------
1: CREATIVE AND CONTENT — Starlight Diamond Constellation
16 crisp star florets twinkling with independent micro-scales & rotation
-------------------------------------------------------------------------- */
.mhc-constellation-group {
animation: mhcConstellationFloat 6s ease-in-out infinite alternate;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mhcConstellationFloat {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-4px) rotate(1deg); }
100% { transform: translateY(2px) rotate(-1deg); }
}
.mhc-star {
transform-box: fill-box;
transform-origin: center;
animation: mhcStarTwinkle 3.6s ease-in-out infinite;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.mhc-star-1 { animation-delay: 0.1s; }
.mhc-star-2 { animation-delay: 1.3s; }
.mhc-star-3 { animation-delay: 2.2s; }
.mhc-star-4 { animation-delay: 0.8s; }
.mhc-star-5 { animation-delay: 1.9s; }
.mhc-star-6 { animation-delay: 0.4s; }
.mhc-star-7 { animation-delay: 2.6s; }
.mhc-star-8 { animation-delay: 1.1s; }
.mhc-star-9 { animation-delay: 2.9s; }
.mhc-star-10 { animation-delay: 0.6s; }
.mhc-star-11 { animation-delay: 1.7s; }
.mhc-star-12 { animation-delay: 2.4s; }
.mhc-star-13 { animation-delay: 0.9s; }
.mhc-star-14 { animation-delay: 1.5s; }
.mhc-star-15 { animation-delay: 2.8s; }
.mhc-star-16 { animation-delay: 0.3s; }
@keyframes mhcStarTwinkle {
0%, 100% {
transform: scale(0.85) rotate(0deg);
opacity: 0.72;
}
50% {
transform: scale(1.22) rotate(18deg);
opacity: 1;
}
}
.mhc-services-card--1:hover .mhc-constellation-group {
transform: scale(1.1);
}
.mhc-services-card--1:hover .mhc-star {
animation-duration: 1.6s;
}
/* --------------------------------------------------------------------------
2: WEBSITES AND DIGITAL EXPERIENCE — 3D Faceted Delta Prism
Spatial isometric 3D gyroscopic tilt and clean vertex node pulses
-------------------------------------------------------------------------- */
.mhc-prism-group {
transform-style: preserve-3d;
animation: mhcPrismFloat3D 6.5s ease-in-out infinite alternate;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mhcPrismFloat3D {
0% {
transform: translateY(0px) rotateX(10deg) rotateY(-14deg);
}
50% {
transform: translateY(-6px) rotateX(-6deg) rotateY(12deg) scale(1.03);
}
100% {
transform: translateY(0px) rotateX(10deg) rotateY(-14deg);
}
}
.mhc-prism-mesh {
transition: opacity 0.4s ease;
}
.mhc-pnode {
animation: mhcNodePulse 2.4s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.mhc-pnode-1 { animation-delay: 0s; }
.mhc-pnode-2 { animation-delay: 0.5s; }
.mhc-pnode-3 { animation-delay: 1.0s; }
.mhc-pnode-4 { animation-delay: 1.5s; }
.mhc-pnode-5 { animation-delay: 0.8s; }
.mhc-pnode-6 { animation-delay: 1.3s; }
@keyframes mhcNodePulse {
0%, 100% { transform: scale(0.8); opacity: 0.65; }
50% { transform: scale(1.45); opacity: 1; }
}
.mhc-services-card--2:hover .mhc-prism-group {
transform: rotateX(-2deg) rotateY(16deg) scale(1.05);
}
/* --------------------------------------------------------------------------
3: CREATIVE PRODUCER — Tactile Equalizer Matrix Tiles
Sharp vector blocks waving in a rhythmic diagonal ripple cascade
-------------------------------------------------------------------------- */
.mhc-matrix-group {
animation: mhcMatrixDrift 5s ease-in-out infinite alternate;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mhcMatrixDrift {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-3px) rotate(0.8deg); }
100% { transform: translateY(1px) rotate(-0.8deg); }
}
.mhc-tile {
transform-box: fill-box;
transform-origin: center;
animation: mhcTileRipple 3.8s ease-in-out infinite;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
/* Diagonal wave propagation across matrix columns */
.mhc-tile-1, .mhc-tile-2, .mhc-tile-3, .mhc-tile-4, .mhc-tile-5 { animation-delay: 0.0s; }
.mhc-tile-11, .mhc-tile-12, .mhc-tile-13, .mhc-tile-14 { animation-delay: 0.3s; }
.mhc-tile-6, .mhc-tile-7, .mhc-tile-8, .mhc-tile-9, .mhc-tile-10 { animation-delay: 0.6s; }
.mhc-tile-20, .mhc-tile-21, .mhc-tile-22, .mhc-tile-23 { animation-delay: 0.9s; }
.mhc-tile-15, .mhc-tile-16, .mhc-tile-17, .mhc-tile-18, .mhc-tile-19 { animation-delay: 1.2s; }
.mhc-tile-29, .mhc-tile-30, .mhc-tile-31, .mhc-tile-32 { animation-delay: 1.5s; }
.mhc-tile-24, .mhc-tile-25, .mhc-tile-26, .mhc-tile-27, .mhc-tile-28 { animation-delay: 1.8s; }
.mhc-tile-38, .mhc-tile-39, .mhc-tile-40, .mhc-tile-41 { animation-delay: 2.1s; }
.mhc-tile-33, .mhc-tile-34, .mhc-tile-35, .mhc-tile-36, .mhc-tile-37 { animation-delay: 2.4s; }
@keyframes mhcTileRipple {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.72;
}
35% {
transform: translateY(-4.5px) scale(1.15);
opacity: 1;
}
70% {
transform: translateY(1.5px) scale(0.93);
opacity: 0.58;
}
}
.mhc-services-card--3:hover .mhc-matrix-group {
transform: scale(1.05);
}
.mhc-services-card--3:hover .mhc-tile {
animation-duration: 1.9s;
}
/* --------------------------------------------------------------------------
4: GROWTH AND CAMPAIGNS — Ascending Flight Wings
Clean upward aerodynamic momentum, tier-by-tier launch cascade
-------------------------------------------------------------------------- */
.mhc-wings-group {
animation: mhcGrowthHover 4.5s ease-in-out infinite alternate;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mhcGrowthHover {
0% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-5px) scale(1.03); }
100% { transform: translateY(1px) scale(0.98); }
}
.mhc-wing-tier {
animation: mhcTierAscend 2.8s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
}
.mhc-tier-1 { animation-delay: 0s; }
.mhc-tier-2 { animation-delay: 0.4s; }
.mhc-tier-3 { animation-delay: 0.8s; }
.mhc-tier-4 { animation-delay: 1.2s; }
.mhc-wing-l {
transform-box: fill-box;
transform-origin: right center;
transition: transform 0.4s ease;
}
.mhc-wing-r {
transform-box: fill-box;
transform-origin: left center;
transition: transform 0.4s ease;
}
@keyframes mhcTierAscend {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.75;
}
40% {
transform: translateY(-6px) scale(1.12);
opacity: 1;
}
75% {
transform: translateY(1px) scale(0.96);
opacity: 0.65;
}
}
.mhc-services-card--4:hover .mhc-wings-group {
transform: scale(1.05);
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.mhc-pinwheel-rotor,
.mhc-blade,
.mhc-constellation-group,
.mhc-star,
.mhc-prism-group,
.mhc-prism-mesh,
.mhc-pnode,
.mhc-matrix-group,
.mhc-tile,
.mhc-wings-group,
.mhc-wing-tier {
animation: none !important;
}
}
@media (max-width: 48rem) {
.mhc-services-card { padding: 2rem 1.75rem; min-height: 0; }
.mhc-services-card-points { grid-template-columns: 1fr; }
/* Hide the decorative geometric icons on mobile — they overlap the bullet
list on the narrow card (principle: no decorative clutter over text). */
.mhc-services-card-icon-wrap { display: none !important; }
.mhc-services-card-bignum { font-size: 6rem; right: -0.25rem; bottom: -0.4rem; }
}
/* Services page CTA banner: home-hero style text + Morgan portrait. */
.mhc-services-cta {
position: relative;
margin-top: 6rem;
overflow: hidden;
min-height: 34rem;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr);
align-items: center;
background: linear-gradient(90deg, #ffb4c9 0%, #fff3f0 100%);
}
.mhc-services-cta-inner {
position: relative;
z-index: 3;
max-width: 36rem;
padding-block: clamp(4rem, 7vw, 7rem);
}
.mhc-services-cta-heading {
font-family: "Season Mix", Span, serif;
font-weight: 400;
color: var(--color-heading, #404052);
font-size: clamp(3rem, 5.25vw, 5.8rem);
line-height: 1.05;
margin: 0 0 1.25rem;
max-width: none;
white-space: nowrap;
}
.mhc-services-cta-subtext {
font-family: var(--font-sans);
color: var(--color-body, #4a4a60);
font-size: clamp(1rem, 1.3vw, 1.2rem);
line-height: 1.6;
max-width: 34rem;
margin: 0 0 2rem;
}
.mhc-services-cta-btn {
display: inline-block;
background: var(--color-brand, #ff5757);
color: #fff;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
padding: 0.9rem 2rem;
border-radius: 4px;
text-decoration: none;
transition: background 0.2s ease;
}
.mhc-services-cta-btn:hover { background: #e04b4b; transform: none; }
.mhc-services-cta-portrait {
position: absolute;
right: max(1.5rem, calc((100vw - var(--wrap)) / 2));
bottom: 0;
z-index: 2;
width: min(43vw, 38rem);
height: min(48vw, 42rem);
pointer-events: none;
}
.mhc-services-cta-portrait::before {
content: "";
position: absolute;
right: 5%;
bottom: -12%;
z-index: 1;
width: 126%;
height: 126%;
background: url(images/deco-blob.svg) center bottom / contain no-repeat;
opacity: 1.18;
}
.mhc-services-cta-portrait img {
position: absolute;
right: 0;
bottom: -0.125rem;
z-index: 2;
width: min(39vw, 34rem);
height: auto;
max-width: none;
}
@media (max-width: 48rem) {
.mhc-services-cta {
grid-template-columns: 1fr !important;
min-height: 42rem;
align-items: flex-start;
}
.mhc-services-cta-inner {
max-width: none !important;
width: 100% !important;
padding-top: 4rem;
padding-bottom: 20rem;
}
/* Heading must wrap on mobile — nowrap forced it far wider than the screen
and starved the text column. */
.mhc-services-cta-heading {
white-space: normal !important;
font-size: clamp(2.25rem, 9vw, 3.1rem) !important;
}
.mhc-services-cta-subtext { max-width: 100% !important; }
.mhc-services-cta-portrait {
right: 50%;
width: min(86vw, 28rem);
height: 25rem;
transform: translateX(50%);
}
.mhc-services-cta-portrait img {
width: min(76vw, 24rem);
}
}
/* Make the CTA full-bleed and flush against the footer. */
body.page-services .mhc-services-cta {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 6rem;
margin-bottom: 0 !important;
border-radius: 0 !important;
min-height: clamp(34rem, 45vw, 42rem);
}
/* Zero every bottom padding/margin between the banner and the footer so the
full-bleed image sits flush against it (no gradient strip showing). */
body.page-services .mhc-services-stack,
body.page-services .mhc-services-stack-inner,
body.page-services .elementor-element-svstack01,
body.page-services .elementor-element-svstack01 .elementor-container,
body.page-services .elementor-element-svstack01 .elementor-column,
body.page-services .elementor-element-svstack01 .elementor-widget-wrap,
body.page-services .elementor-element-svstack01 .elementor-widget-container {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* CTA now lives in its own section (svcta01) — zero its section padding so the
full-bleed banner stays flush to the footer, and the 6rem margin-top on
.mhc-services-cta provides the gap above it. */
body.page-services .elementor-element-svcta01,
body.page-services .elementor-element-svcta01 .elementor-container,
body.page-services .elementor-element-svcta01 .elementor-column,
body.page-services .elementor-element-svcta01 .elementor-widget-wrap,
body.page-services .elementor-element-svcta01 .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
/* Keep the CTA text aligned with the rest of the page content, not the viewport edge. */
body.page-services .mhc-services-cta-inner {
max-width: calc((100vw - var(--wrap)) / 2 + 34rem);
padding-left: calc((100vw - var(--wrap)) / 2 + 1.5rem);
padding-right: 1.5rem;
}
body.page-about .elementor-element-abcta0001,
body.page-about .elementor-element-abcta0001 .elementor-container,
body.page-about .elementor-element-abcta0001 .elementor-column,
body.page-about .elementor-element-abcta0001 .elementor-widget-wrap,
body.page-about .elementor-element-abcta0001 .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
body.page-about .elementor-element-abtest0001,
body.page-about .elementor-element-abtest0001 .elementor-container,
body.page-about .elementor-element-abtest0001 .elementor-column,
body.page-about .elementor-element-abtest0001 .elementor-widget-wrap,
body.page-about .elementor-element-abtest0001 .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
body.page-about .elementor-element-abtest0001 {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
background: linear-gradient(132deg, #6c3533 0%, #8d5361 100%) !important;
}
body.page-about .elementor-element-abtest0001 .elementor-container,
body.page-about .elementor-element-abtest0001 .elementor-column,
body.page-about .elementor-element-abtest0001 .elementor-widget-wrap,
body.page-about .elementor-element-abtest0001 .elementor-widget-container {
background: transparent !important;
}
body.page-about [data-mhc-section="testimonials"] {
background: transparent !important;
padding-block: 4rem;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
}
/* Kill the Elementor section/column padding that let the pale page canvas
peek through as a white seam above the full-bleed maroon logos section. */
body.page-about .elementor-element-abtest0001,
body.page-about .elementor-element-abtest0001 > .elementor-container,
body.page-about .elementor-element-abtest0001 .elementor-column > .elementor-element-populated,
body.page-about .elementor-element-abacc0001,
body.page-about .elementor-element-abacc0001 > .elementor-container,
body.page-about .elementor-element-abacc0001 .elementor-column > .elementor-element-populated {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.page-about [data-mhc-section="testimonials"] section#testimonials {
background: transparent;
}
body.page-about .mhc-services-cta {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 0;
margin-bottom: 0 !important;
border-radius: 0 !important;
min-height: clamp(34rem, 45vw, 42rem);
}
body.page-about .mhc-services-cta-inner {
max-width: calc((100vw - var(--wrap)) / 2 + 34rem);
padding-left: calc((100vw - var(--wrap)) / 2 + 1.5rem);
padding-right: 1.5rem;
}
/* =========================================================================
Testimonials page — 3x3 testimonial wall
========================================================================= */
body.page-testimonials {
background: linear-gradient(150deg, #ffe7e2 0%, #ffd9d6 45%, rgba(224,116,150,0.5) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
body.page-testimonials #hero,
body.page-testimonials #hero::before,
body.page-testimonials #hero::after {
background: transparent !important;
background-image: none !important;
animation: none !important;
}
body.page-testimonials #hero {
overflow: visible !important;
padding-top: 0 !important;
}
body.page-testimonials .mhc-about-hero-inner {
gap: 0 !important;
align-items: center;
text-align: center;
padding-top: 9.5rem !important;
padding-bottom: 1.5rem !important;
}
body.page-testimonials .mhc-about-hero-heading {
font-family: "Season Mix", Span, serif;
font-weight: 400;
color: rgb(64, 64, 82);
}
body.page-testimonials .mhc-about-hero-subtext {
margin: 1.25rem auto 0;
max-width: 46rem;
text-align: center;
}
/* [#12] Mobile: give the About/Testimonials hero title comfortable room to clear
the ~147px fixed header overlay (was only ~5px). Page-specific to beat the
existing !important padding rules. */
@media (max-width: 48rem) {
body.page-testimonials .mhc-about-hero-inner,
body.page-about .mhc-about-hero-inner {
padding-top: 11rem !important;
}
}
.mhc-testimonials-wall-section {
padding-block: 3rem 6rem;
}
.mhc-testimonials-wall {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.mhc-testimonial-tile {
position: relative;
display: flex;
min-height: 26rem;
flex-direction: column;
overflow: hidden;
border-radius: 8px;
background: #fff3f0;
border: 1px solid rgba(225, 205, 210, 0.5);
box-shadow: none;
padding: clamp(1.9rem, 2.6vw, 2.35rem);
color: var(--color-heading, #404052);
}
.mhc-testimonial-tile-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.9rem;
padding-right: 3rem;
}
.mhc-testimonial-avatar {
display: flex;
width: 3.5rem;
height: 3.5rem;
flex: none;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #dd769a;
color: #fff;
font-family: "Season Mix", Span, serif;
font-size: 2rem;
line-height: 1;
padding-top: 0.22rem;
overflow: hidden;
}
.mhc-testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 999px;
}
.mhc-testimonial-tile h2 {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 1.8vw, 2rem);
font-weight: 400;
line-height: 1.1;
margin: 0 0 0.3rem;
}
.mhc-testimonial-stars {
color: var(--color-brand, #ff5757);
font-size: 0.95rem;
letter-spacing: 0.12em;
line-height: 1;
}
.mhc-testimonial-tile p {
position: relative;
z-index: 1;
margin: 0;
color: var(--color-body, #4a4a60);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.65;
}
.mhc-testimonial-quote {
position: absolute;
top: 2.1rem;
right: 1.45rem;
color: #ffb4c9;
font-family: "Season Mix", Span, serif;
font-size: clamp(3.4rem, 4vw, 4.6rem);
line-height: 0.8;
opacity: 0.48;
pointer-events: none;
}
@media (max-width: 70rem) {
.mhc-testimonials-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 48rem) {
body.page-testimonials .mhc-about-hero-inner {
padding-top: 7rem !important;
}
.mhc-testimonials-wall-section {
padding-block: 2.5rem 4rem;
}
.mhc-testimonials-wall {
grid-template-columns: 1fr;
}
.mhc-testimonial-tile {
min-height: 0;
}
}
/* =========================================================================
Contact Us — Form card (mhc_contact_form widget)
========================================================================= */
body.page-contact {
background: linear-gradient(150deg, #ffe7e2 0%, #ffd9d6 45%, rgba(224,116,150,0.5) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
#contact-hero {
background: transparent !important;
}
/* Trim the gap between the "Contact Us" intro and the form card slightly. */
#contact-form { margin-top: -3rem !important; }
.mhc-contact-form { padding-block: 2rem 5rem; }
.mhc-contact-form-card {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
background: linear-gradient(150deg, #ffd8d3 0%, #f3b6c3 55%, #dba0c2 100%);
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 2rem 4rem -2rem rgba(60, 24, 24, 0.25);
}
.mhc-contact-form-photo {
position: relative;
min-height: 32rem;
}
.mhc-contact-form-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mhc-contact-form-photo-caption {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
}
.mhc-contact-form-photo-caption h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 2.75rem);
color: #fff;
margin: 0 0 0.5rem;
}
.mhc-contact-form-photo-caption p {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255,255,255,0.9);
max-width: 22rem;
margin: 0;
}
.mhc-contact-form-fields {
padding: 3rem 3rem 3.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mhc-contact-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.mhc-contact-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-heading, #404052);
}
.mhc-contact-field em {
font-style: normal;
color: var(--color-orange-deep, #f2621e);
}
.mhc-contact-field input,
.mhc-contact-field select,
.mhc-contact-field textarea {
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 400;
color: var(--color-heading, #404052);
background: rgba(255, 245, 243, 0.65);
border: 1.5px solid transparent;
border-radius: 0.6rem;
padding: 0.85rem 1rem;
outline: none;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mhc-contact-field input::placeholder,
.mhc-contact-field textarea::placeholder {
color: rgba(64, 64, 82, 0.45);
}
.mhc-contact-field input:hover,
.mhc-contact-field textarea:hover {
border-color: rgba(255, 96, 96, 0.35);
}
.mhc-contact-field input:focus,
.mhc-contact-field select:focus,
.mhc-contact-field textarea:focus {
background: #fffaf7;
border-color: var(--color-orange, #ff7a3d);
box-shadow: 0 0 0 3px rgba(255, 96, 96, 0.18);
}
.mhc-contact-field textarea { resize: vertical; min-height: 8rem; }
.mhc-contact-field select { appearance: none; cursor: pointer; }
/* -------------------------------------------------------------------------
Custom dropdown (mhc-contact-form.js). The native