/* ============================================================
01 · PROMO BAR
============================================================
Expandable, collapsed by default.
Randomizes headline on page load.
Mobile: 40px tall, desktop: 36px.
============================================================ */
.promo-bar {
position: relative;
background-color: var(--color-charcoal);
overflow: hidden;
z-index: 100;
}
.promo-bar__trigger {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
height: 40px;
padding: 0 var(--space-10);
cursor: pointer;
position: relative;
}
@media (min-width: 1024px) {
.promo-bar__trigger {
height: 36px;
}
}
.promo-bar__headline {
font-size: var(--type-small);
font-weight: var(--weight-medium);
color: var(--color-cream);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 32px);
}
.promo-bar__arrow {
color: var(--color-cream);
opacity: 0.8;
font-size: 16px;
line-height: 1;
/* The caret glyph (⌄ U+2304) sits low in its line-box by default —
pull it up via margin so it reads as centered next to the headline.
Margin (layout) isn't affected by the rotate(180deg) applied on
.is-open, so the up-arrow gets the same nudge automatically. */
margin-top: -3px;
transition: transform var(--speed-normal) var(--ease-in-out);
pointer-events: none;
}
.promo-bar.is-open .promo-bar__arrow {
transform: rotate(180deg);
}
.promo-bar__panel {
max-height: 0;
overflow-y: auto;
padding: 0 var(--space-5);
transition: max-height 200ms var(--ease-in);
}
.promo-bar.is-open .promo-bar__panel {
max-height: 400px;
padding-bottom: var(--space-6);
transition: max-height var(--speed-normal) var(--ease-out);
}
@media (min-width: 1024px) {
.promo-bar__panel {
max-width: 800px;
margin: 0 auto;
}
.promo-bar.is-open .promo-bar__panel {
max-height: 320px;
}
}
.promo-announcement {
padding: var(--space-5) 0;
border-top: 1px solid rgba(248, 245, 237, 0.1);
}
.promo-announcement:first-child {
border-top: none;
padding-top: var(--space-4);
}
.promo-announcement__headline {
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--color-cream);
line-height: 1.3;
margin-bottom: var(--space-2);
}
@media (min-width: 1024px) {
.promo-announcement__headline {
font-size: 20px;
}
}
.promo-announcement__body {
font-size: 14px;
color: rgba(248, 245, 237, 0.85);
line-height: 1.6;
margin-bottom: var(--space-3);
}
@media (min-width: 1024px) {
.promo-announcement__body {
font-size: 15px;
}
}
.promo-announcement__cta {
display: inline;
color: var(--color-gold);
font-size: 14px;
font-weight: var(--weight-medium);
text-decoration: underline;
transition: opacity var(--speed-fast) var(--ease-out);
}
.promo-announcement__cta::after {
content: ' →';
}
.promo-announcement__cta:hover {
opacity: 0.8;
}
/* ============================================================
02 · STICKY NAV
============================================================
Desktop: 3-zone layout — logo | links | phone + book
Mobile: logo | phone icon + book + hamburger
Shrinks from 72px → 60px on scroll via .is-scrolled class.
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 90;
background-color: var(--color-cream);
transition:
border-color var(--speed-normal) var(--ease-out),
box-shadow var(--speed-normal) var(--ease-out);
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
border-bottom-color: var(--color-charcoal-10);
box-shadow: var(--shadow-nav);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-4);
height: 64px;
transition: height var(--speed-normal) var(--ease-out);
}
@media (min-width: 768px) {
.nav__inner {
padding: 0 var(--space-6);
height: 72px;
}
}
@media (min-width: 1024px) {
.nav__inner {
padding: 0 var(--space-8);
}
}
.nav.is-scrolled .nav__inner {
height: 60px;
}
/* Logo */
.nav__logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.nav__logo-img {
height: 36px;
width: auto;
display: block;
transition: height var(--speed-normal) var(--ease-out);
}
@media (min-width: 768px) {
.nav__logo-img {
height: 58px;
}
}
@media (min-width: 768px) {
.nav.is-scrolled .nav__logo-img {
height: 44px;
}
}
/* Desktop + tablet center links — hidden on mobile only */
.nav__links {
display: none;
}
@media (min-width: 768px) {
.nav__links {
display: flex;
align-items: center;
gap: 24px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
@media (min-width: 1024px) {
.nav__links {
gap: 36px;
}
}
.nav__item {
position: relative;
}
.nav__link,
.nav__link--btn {
font-size: var(--type-label);
font-weight: var(--weight-medium);
color: var(--color-charcoal);
letter-spacing: 0.1px;
transition: color var(--speed-fast) var(--ease-out);
white-space: nowrap;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}
.nav__link:hover,
.nav__link--btn:hover {
color: var(--color-wood);
}
.nav__chevron {
opacity: 0.6;
font-size: 11px;
transition: transform var(--speed-normal) var(--ease-in-out);
}
.nav__link--btn[aria-expanded="true"] .nav__chevron {
transform: rotate(180deg);
}
/* Right actions — hidden on mobile, visible tablet+ */
.nav__actions {
display: none;
}
@media (min-width: 768px) {
.nav__actions {
display: flex;
align-items: center;
gap: var(--space-4);
flex-shrink: 0;
}
}
@media (min-width: 1024px) {
.nav__actions {
gap: var(--space-5);
}
}
/* Hide phone number at tablet — too cramped alongside 5 centered links */
@media (min-width: 768px) and (max-width: 1023px) {
.nav__phone {
display: none;
}
}
.nav__phone {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--type-label);
font-weight: var(--weight-medium);
color: var(--color-charcoal);
transition: color var(--speed-fast) var(--ease-out);
white-space: nowrap;
}
.nav__phone:hover {
color: var(--color-wood);
}
.nav__phone-svg {
flex-shrink: 0;
color: currentColor;
}
/* Mobile controls — hidden at tablet+ */
.nav__mobile-controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
@media (min-width: 768px) {
.nav__mobile-controls {
display: none;
}
}
.nav__mobile-phone {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--color-charcoal);
transition: color var(--speed-fast) var(--ease-out);
}
.nav__mobile-phone:hover {
color: var(--color-wood);
}
.nav__hamburger {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--color-charcoal);
transition: color var(--speed-fast) var(--ease-out);
}
.nav__hamburger:hover {
color: var(--color-wood);
}
/* Shared button */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-family: var(--font-primary);
font-size: var(--type-button);
font-weight: var(--weight-semibold);
letter-spacing: 0.2px;
border-radius: var(--radius-md);
cursor: pointer;
border: none;
white-space: nowrap;
transition:
background-color var(--speed-fast) var(--ease-out),
transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--book {
background-color: var(--color-wood);
color: #ffffff;
padding: 14px 26px;
font-size: 16px;
font-weight: var(--weight-bold);
letter-spacing: 0.04em;
box-shadow: 4px 4px 0 0 var(--color-charcoal);
}
.btn--book:hover {
background-color: var(--color-wood-dark);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 0 var(--color-charcoal);
}
.btn--book:active {
transform: translate(4px, 4px);
box-shadow: 0 0 0 0 var(--color-charcoal);
}
.btn__arrow {
display: inline-block;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.btn--book:hover .btn__arrow {
transform: translateX(4px);
}
.btn--book-sm {
padding: 10px 18px;
font-size: 14px;
}
/* ============================================================
03 · SERVICES MEGA PANEL
============================================================
Hover-triggered with 100ms delay.
640px wide, 2×2 grid of service cards.
============================================================ */
.nav__mega {
position: absolute;
/* No gap — panel touches button. 8px gap was breaking hover-bridge,
causing the panel to disappear when mouse moved toward a service link. */
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 640px;
background-color: var(--color-cream);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--speed-fast) var(--ease-out),
visibility var(--speed-fast) var(--ease-out);
transition-delay: 0ms;
z-index: 200;
}
/* Open via JS — hover OR click both add .is-open via JavaScript.
Pure-CSS hover-open caused a "dead zone" between button and panel
because pointer-events flipped to none mid-transit. JS with a grace
timer fixes that reliably. */
.nav__link--btn[aria-expanded="true"] + .nav__mega,
.nav__mega.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0ms;
}
.nav__mega-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.mega-card {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
transition: background-color var(--speed-fast) var(--ease-out);
}
.mega-card:hover {
background-color: var(--color-stone);
}
/* Amber circle + white hand-drawn icon (matches brand .service-card__badge pattern) */
.mega-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--color-wood);
flex-shrink: 0;
margin-top: 2px;
position: relative;
overflow: visible;
box-shadow:
0 4px 10px rgba(161, 93, 37, 0.25),
inset 0 -2px 0 rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.mega-card__icon img {
width: 70%;
height: 70%;
object-fit: contain;
display: block;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.mega-card__icon--drawn img,
.mega-card__icon--fill img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140%;
height: 140%;
}
.mega-card__icon--invert img {
filter: invert(1);
mix-blend-mode: screen;
}
.mega-card__icon--screen img {
mix-blend-mode: screen;
}
.mega-card__icon--fill img {
width: 200%;
height: 200%;
}
.mega-card__icon svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.mega-card__text {
display: flex;
flex-direction: column;
gap: 3px;
}
.mega-card__name {
font-size: 16px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
line-height: 1.2;
}
.mega-card__desc {
font-size: 13px;
color: var(--color-charcoal-body);
opacity: 0.7;
line-height: 1.4;
}
.nav__mega-footer {
border-top: 1px solid var(--color-charcoal-10);
padding-top: var(--space-4);
}
.nav__mega-all {
font-size: var(--type-label);
font-weight: var(--weight-medium);
color: var(--color-wood);
transition: color var(--speed-fast) var(--ease-out);
}
.nav__mega-all:hover {
color: var(--color-wood-dark);
}
/* ============================================================
04 · MOBILE OVERLAY
============================================================ */
.mobile-overlay {
display: none;
position: fixed;
inset: 0;
background-color: var(--color-charcoal-40);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 300;
opacity: 0;
transition: opacity var(--speed-normal) var(--ease-out);
}
.mobile-overlay.is-visible {
display: block;
}
.mobile-overlay.is-open {
opacity: 1;
}
/* ============================================================
05 · MOBILE MENU
============================================================
Slides in from the right, full viewport width.
Cream background. Focus-trapped when open.
============================================================ */
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 480px;
background-color: var(--color-cream);
z-index: 400;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(100%);
transition: transform 300ms var(--ease-out);
padding-bottom: var(--space-8);
}
.mobile-menu.is-open {
transform: translateX(0);
}
.mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-5);
border-bottom: 1px solid var(--color-charcoal-10);
flex-shrink: 0;
}
.mobile-menu__close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--color-charcoal);
transition: color var(--speed-fast) var(--ease-out);
}
.mobile-menu__close:hover {
color: var(--color-wood);
}
.mobile-menu__links {
flex-shrink: 0;
}
.mobile-menu__item {
border-bottom: 1px solid var(--color-charcoal-10);
}
.mobile-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 64px;
padding: 0 var(--space-6);
font-size: 20px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: color var(--speed-fast) var(--ease-out);
}
.mobile-menu__link:hover {
color: var(--color-wood);
}
.mobile-menu__plus {
font-size: 20px;
font-weight: var(--weight-regular);
color: var(--color-charcoal-meta);
transition: transform var(--speed-normal) var(--ease-in-out);
line-height: 1;
}
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__plus {
transform: rotate(45deg);
}
.mobile-menu__children {
max-height: 0;
overflow: hidden;
background-color: var(--color-stone);
transition: max-height var(--speed-normal) var(--ease-out);
}
.mobile-menu__children.is-open {
max-height: 300px;
}
.mobile-menu__child {
display: block;
padding: var(--space-4) var(--space-10);
font-size: 16px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-body);
border-bottom: 1px solid var(--color-charcoal-10);
transition: color var(--speed-fast) var(--ease-out);
}
.mobile-menu__child:last-child {
border-bottom: none;
}
.mobile-menu__child:hover {
color: var(--color-wood);
}
.mobile-menu__divider {
height: 1px;
background-color: var(--color-charcoal-10);
margin: var(--space-3) 0;
flex-shrink: 0;
}
.mobile-menu__secondary {
flex-shrink: 0;
}
.mobile-menu__secondary-link {
display: block;
padding: var(--space-3) var(--space-5);
font-size: var(--type-small);
color: var(--color-charcoal-meta);
transition: color var(--speed-fast) var(--ease-out);
}
.mobile-menu__secondary-link:hover {
color: var(--color-wood);
}
.mobile-menu__phone {
display: block;
padding: var(--space-4) var(--space-6);
font-size: 20px;
font-weight: var(--weight-medium);
color: var(--color-charcoal);
transition: color var(--speed-fast) var(--ease-out);
}
.mobile-menu__phone:hover {
color: var(--color-wood);
}
.mobile-menu__book {
margin: var(--space-5) var(--space-5) 0;
width: calc(100% - var(--space-10));
padding: 16px 24px;
font-size: 17px;
}
/* ============================================================
06 · HERO
============================================================
Four-layer background: cream base + grain tile + radial
gradient (::before) + ridge line arcs (::after).
Mobile: stacked, text top, image bottom.
Desktop: 50/50 split, text left, image right.
============================================================ */
.hero {
/* Layer 1 — base cream */
background-color: var(--color-cream);
/* Layer 2 — grain texture tiled at 160×160 */
background-image: url('../images/grain.svg');
background-size: 160px 160px;
background-repeat: repeat;
position: relative;
overflow: hidden;
/* Asymmetric: keep generous top room (under nav), tight bottom (banner sits closer) */
padding: var(--space-12) var(--space-5) var(--space-4);
}
@media (min-width: 768px) {
.hero {
padding: var(--space-16) var(--space-8) var(--space-6);
}
}
@media (min-width: 1024px) {
.hero {
padding: var(--space-20) var(--space-10) var(--space-8);
}
}
/* Layer 3 — soft radial gradient */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 60% 40%, rgba(252, 249, 241, 0.4) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
/* Layer 4 — ridge line arcs (sage topographic lines, bottom-right) */
.hero::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 60%;
background-image: url("data:image/svg+xml,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
@media (max-width: 767px) {
.hero::after {
width: 70%;
height: 42%;
opacity: 0.7;
}
}
/* Layer 5 — ghosted paw prints anchored in negative space.
Positioned individually (not tiled) so they never land on text
or the hero image. Bleed off edges on purpose — reads as
"imprint bigger than the frame" rather than a sticker. */
.hero__paws {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden; /* clip the off-edge bleed cleanly */
}
.hero__paw {
position: absolute;
color: var(--color-sage);
opacity: 0.07;
display: block;
width: 150px;
height: 150px;
}
/* Top-left — bleeds off top+left edges */
.hero__paw--tl {
top: -40px;
left: -30px;
width: 180px;
height: 180px;
transform: rotate(-18deg);
}
/* Bottom-left — below the CTA group on desktop; partially off-edge */
.hero__paw--bl {
bottom: 40px;
left: -40px;
width: 150px;
height: 150px;
transform: rotate(24deg);
}
/* Mid paw — was for the desktop column gap (now removed).
Always hidden in the new layout. */
.hero__paw--mid {
display: none;
}
/* Top-right "walking sideways" paw — rotated near-horizontal so it
visually breaks the pattern of the other three (which are all on
gentle tilts). Reads as a paw mid-step rather than a static imprint. */
.hero__paw--tr {
top: 50px;
right: -50px;
width: 150px;
height: 150px;
transform: rotate(-15deg);
}
@media (min-width: 1024px) {
.hero__paw--tr {
top: 90px;
right: 20%;
width: 150px;
height: 150px;
transform: rotate(-12deg);
}
}
/* Mobile: scale down only. With the new layout (hero is text-only,
banner sits below as its own section), the bottom-left paw lands
under the CTAs in real negative space — no need to move it. */
@media (max-width: 767px) {
.hero__paw--tl {
top: -30px;
left: -40px;
width: 140px;
height: 140px;
}
}
/* ============================================================
GALLERY TEASER — Homepage section (Life at the Lodge)
============================================================ */
.gallery-teaser {
background-color: var(--color-cream);
padding: var(--space-20) var(--space-5);
overflow: hidden;
}
@media (min-width: 768px) {
.gallery-teaser {
padding: var(--space-24) var(--space-8);
}
}
.gallery-teaser__inner {
max-width: 1400px;
margin: 0 auto;
}
.gallery-teaser__header {
text-align: center;
margin-bottom: var(--space-10);
}
.gallery-teaser__eyebrow {
display: block;
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-wood);
margin-bottom: var(--space-2);
}
.gallery-teaser__heading {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: var(--weight-bold);
color: var(--color-charcoal);
margin-bottom: var(--space-3);
line-height: 1.1;
}
.gallery-teaser__heading-accent {
color: var(--color-wood);
font-style: italic;
}
.gallery-teaser__sub {
font-size: var(--type-lead);
line-height: var(--type-lead-lh);
color: var(--color-charcoal-body);
max-width: 440px;
margin: 0 auto;
}
.gallery-teaser__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-10);
}
@media (min-width: 600px) {
.gallery-teaser__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
}
.gallery-teaser__item {
aspect-ratio: 1;
border-radius: var(--radius-md);
overflow: hidden;
background-color: var(--color-stone);
}
.gallery-teaser__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s var(--ease-out);
}
.gallery-teaser__item:hover .gallery-teaser__img {
transform: scale(1.05);
}
.gallery-teaser__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-sage);
opacity: 0.5;
}
.gallery-teaser__placeholder svg {
width: 35%;
height: 35%;
}
.gallery-teaser__footer {
text-align: center;
}
.gallery-teaser__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--weight-semibold);
font-size: var(--type-body);
color: var(--color-wood);
text-decoration: none;
border-bottom: 2px solid currentColor;
padding-bottom: 2px;
transition: opacity var(--speed-fast) var(--ease-out);
}
.gallery-teaser__cta:hover {
opacity: 0.75;
}
/* All hero content sits above the background layers */
.hero__inner,
.scroll-cue {
position: relative;
z-index: 3;
}
/* Inner layout — stacked on mobile/tablet, side-by-side on desktop */
.hero__inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
@media (min-width: 768px) {
.hero__inner {
gap: var(--space-12);
}
}
@media (min-width: 1024px) {
.hero__inner {
flex-direction: row;
align-items: stretch;
gap: var(--space-16);
}
}
/* Text column */
.hero__text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media (min-width: 1024px) {
.hero__text {
flex: 0 0 52%;
align-items: center;
text-align: center;
justify-content: center;
}
}
/* Visual column — slideshow */
/* Mobile: full-bleed — breaks out of hero padding */
.hero__visual {
margin-left: calc(-1 * var(--space-5));
margin-right: calc(-1 * var(--space-5));
width: calc(100% + 2 * var(--space-5));
}
@media (min-width: 640px) {
.hero__visual {
margin-left: calc(-1 * var(--space-8));
margin-right: calc(-1 * var(--space-8));
width: calc(100% + 2 * var(--space-8));
}
}
@media (min-width: 1024px) {
.hero__visual {
flex: 1;
min-height: 500px;
/* Reset negative margins from mobile full-bleed */
margin-left: 0;
margin-right: 0;
width: 100%;
}
.hero__visual .hero__figure {
height: 100%;
aspect-ratio: unset;
max-height: none;
border-radius: var(--radius-lg);
}
}
/* Headline */
.hero__headline {
font-size: 38px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
letter-spacing: -0.4px;
line-height: 1.12;
margin: 0 0 16px;
}
@media (min-width: 640px) {
.hero__headline {
font-size: 52px;
}
}
@media (min-width: 1024px) {
.hero__headline {
font-size: clamp(56px, 5vw, 72px);
letter-spacing: -0.6px;
max-width: 16ch;
margin-bottom: 22px;
}
}
.hero__headline-line {
display: block;
}
/* Small em-dash trailing "Pet Lodge for —". Shrunk to 0.4em so it
reads as a connector to the rotator below, not a slab of punctuation. */
.hero__headline-dash {
display: inline-block;
font-size: 0.4em;
vertical-align: 0.35em;
margin-left: 0.25em;
letter-spacing: 0;
}
.hero__headline-accent {
color: var(--color-wood);
font-style: italic;
}
/* ----------------------------------------------------------
ROTATOR — third headline line cycles through 4 phrases.
CSS-only width sizing via inline-grid stack (no JS measuring).
All phrases occupy the same grid cell; only .is-active is visible.
Container width auto-fits the widest phrase so there's no jump.
---------------------------------------------------------- */
.hero__rotator {
display: inline-grid;
grid-template-areas: "stack";
vertical-align: baseline;
text-align: center;
}
.hero__rotator-word {
grid-area: stack;
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
transition:
opacity 350ms cubic-bezier(.22, 1, .36, 1),
transform 350ms cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
.hero__rotator-word.is-active {
opacity: 1;
transform: translateY(0);
}
/* Static fallback — only shown when reduced-motion is preferred */
.hero__rotator-static {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.hero__rotator {
display: none;
}
.hero__rotator-static {
display: inline;
}
}
/* Screen-reader-only utility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Subhead */
.hero__subhead {
font-size: 14px;
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
line-height: 1.55;
max-width: 360px;
margin: 0 0 20px;
}
@media (min-width: 640px) {
.hero__subhead {
font-size: 16px;
max-width: 480px;
}
}
@media (min-width: 1024px) {
.hero__subhead {
font-size: 17px;
max-width: 540px;
margin-bottom: 30px;
}
}
/* CTA group */
.hero__cta-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 0;
align-items: center;
}
@media (min-width: 1024px) {
.hero__cta-group {
flex-direction: row;
justify-content: center;
gap: var(--space-5);
}
}
.btn--book-hero {
padding: 16px 32px;
font-size: 17px;
}
@media (max-width: 1023px) {
.btn--book-hero {
width: 100%;
}
}
.hero__cta-secondary {
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
width: 100%;
transition: color var(--speed-fast) var(--ease-out);
}
@media (min-width: 1024px) {
.hero__cta-secondary {
width: auto;
min-height: unset;
}
}
.hero__cta-secondary:hover {
text-decoration: underline;
}
.hero__cta-arrow {
color: var(--color-wood);
transition: transform var(--speed-fast) var(--ease-out);
}
.hero__cta-secondary:hover .hero__cta-arrow {
transform: translateX(3px);
}
/* Trust anchor (eyebrow position, above the headline) —
stacked pet avatars + Google rating, centered. Compact. */
.hero__trust {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.hero__trust-avatars {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.hero__trust-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--color-cream);
box-shadow: 0 1px 3px rgba(11, 18, 21, 0.12);
object-fit: cover;
display: block;
background-color: var(--color-stone); /* fallback while image loads */
}
.hero__trust-avatar + .hero__trust-avatar {
margin-left: -8px;
}
.hero__trust-link {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
line-height: 1;
text-decoration: none;
transition: opacity var(--speed-fast) var(--ease-out);
}
.hero__trust-link:hover,
.hero__trust-link:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0.85;
}
/* Friction reducer */
.hero__friction {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-style: italic;
color: rgba(44, 51, 56, 0.75);
line-height: 1.5;
}
.hero__check {
flex-shrink: 0;
}
/* ============================================================
HERO BANNER — full-bleed cinematic slideshow under the CTAs
Section sits after .hero, edge-to-edge of viewport.
============================================================ */
.hero-banner {
width: 100%;
background-color: var(--color-cream);
}
/* Image figure — re-styled from card to full-bleed banner */
.hero__figure {
width: 100%;
overflow: hidden;
background-color: var(--color-stone);
aspect-ratio: 16 / 9;
border-radius: 0;
box-shadow: none;
}
@media (min-width: 768px) {
.hero__figure {
aspect-ratio: 16 / 9;
max-height: 500px;
}
}
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* ============================================================
SPOTLIGHT — featured service callout
Sits between hero and services section.
To feature a different service: update eyebrow, heading, desc, and href.
============================================================ */
.spotlight {
background: var(--color-cream);
padding: 28px 24px;
border-bottom: 1px solid var(--color-cream-edge);
}
.spotlight__inner {
max-width: 600px;
margin: 0 auto;
border-left: 3px solid var(--color-wood);
padding-left: 20px;
}
.spotlight__dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-wood);
margin-right: 7px;
vertical-align: middle;
animation: dotPulse 2s ease-out infinite;
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(161, 93, 37, 0.6); }
70% { box-shadow: 0 0 0 9px rgba(161, 93, 37, 0); }
100% { box-shadow: 0 0 0 0 rgba(161, 93, 37, 0); }
}
@media (prefers-reduced-motion: reduce) {
.spotlight__dot { animation: none; }
}
.spotlight__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-wood);
margin: 0 0 6px;
}
.spotlight__heading {
font-size: 19px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
line-height: 1.2;
margin: 0 0 4px;
}
.spotlight__desc {
font-size: 13px;
color: var(--color-charcoal);
opacity: 0.65;
line-height: 1.4;
margin: 0 0 14px;
}
@media (min-width: 768px) {
.spotlight {
padding: 36px 48px;
}
.spotlight__inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
}
.spotlight__copy { flex: 1; }
.spotlight__heading { font-size: 22px; }
.spotlight__desc { margin: 0; }
}
/* ============================================================
CINEMATIC IMAGE — reusable site-wide
============================================================
Layer 1: slides with Ken Burns zoom
Layer 2: film grain overlay
Layer 3: warm edge vignette
============================================================ */
.cinematic-image {
position: relative;
isolation: isolate;
}
.cinematic-image__slides {
position: absolute;
inset: 0;
overflow: hidden;
}
.cinematic-image__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
transform: scale(1.0);
/* Buttery crossfade. The `transform` transition is what kills the
Ken Burns "bump": when .is-active is removed, the keyframe
animation dies and the slide reverts to base transform. Without a
transition, that revert SNAPS — visible as a jump. With a 2200ms
transition matching the opacity fade, the outgoing slide glides
back to scale 1.0 exactly as it fades out. Invisible. */
transition:
opacity 2200ms cubic-bezier(0.22, 1, 0.36, 1),
transform 2200ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
/* img inside slides — object-fit must be on the img, not the picture element */
.cinematic-image__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.cinematic-image__slide.is-active {
opacity: 1;
animation: kenBurnsIn 18s ease-in-out forwards;
}
.cinematic-image__slide.is-active:nth-child(even) {
animation-name: kenBurnsOut;
}
@keyframes kenBurnsIn {
from { transform: scale(1.0); }
to { transform: scale(1.08); }
}
@keyframes kenBurnsOut {
from { transform: scale(1.08); }
to { transform: scale(1.0); }
}
.cinematic-image__grain {
position: absolute;
inset: 0;
background-image: url("../images/grain.svg");
background-size: 160px 160px;
opacity: 0.07;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 2;
}
.cinematic-image__vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 58%, rgba(11, 18, 21, 0.22) 100%);
pointer-events: none;
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.cinematic-image__slide,
.cinematic-image__slide.is-active {
animation: none !important;
transform: none !important;
}
}
/* ============================================================
07 · SCROLL CUE
============================================================
Below hero text/image, centered. Gentle bob animation.
============================================================ */
.scroll-cue {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: var(--space-10);
padding: var(--space-2) var(--space-4);
color: rgba(11, 18, 21, 0.5);
text-decoration: none;
transition: opacity var(--speed-fast) var(--ease-out);
}
.scroll-cue:hover {
opacity: 0.8;
}
.scroll-cue__arrow {
font-size: 18px;
line-height: 1;
animation: scrollBob 2s ease-in-out infinite;
}
.scroll-cue__label {
font-size: var(--type-small);
font-weight: var(--weight-medium);
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* ============================================================
08 · BOOKING MODAL
============================================================
Full-viewport overlay with blur. Centered content card.
Opens via [data-open-booking], closes via [data-close-modal],
Escape key, or overlay click.
============================================================ */
.modal {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
visibility: hidden;
pointer-events: none;
}
@media (min-width: 480px) {
.modal {
padding: var(--space-4);
}
}
.modal.is-open {
visibility: visible;
pointer-events: auto;
}
/* Overlay */
.modal__overlay {
position: absolute;
inset: 0;
background: var(--color-charcoal-40);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 200ms var(--ease-out);
cursor: pointer;
}
.modal.is-open .modal__overlay {
opacity: 1;
}
/* Content card */
.modal__content {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
max-height: 96vh;
background: var(--color-cream);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-5) var(--space-4);
overflow-y: auto;
display: flex;
flex-direction: column;
opacity: 0;
transform: scale(0.96);
transition:
opacity 300ms var(--ease-out),
transform 300ms var(--ease-out);
}
@media (min-width: 480px) {
.modal__content {
padding: var(--space-8);
max-height: 92vh;
}
}
@media (min-width: 768px) {
.modal__content {
padding: var(--space-10) var(--space-12);
max-height: 90vh;
}
}
.modal.is-open .modal__content {
opacity: 1;
transform: scale(1);
}
/* Close button */
.modal__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-charcoal);
border-radius: var(--radius-md);
transition: color var(--speed-fast) var(--ease-out),
background-color var(--speed-fast) var(--ease-out);
}
.modal__close:hover {
color: var(--color-wood);
background-color: var(--color-stone);
}
/* Text */
.modal__title {
font-size: var(--type-h3);
font-weight: var(--weight-bold);
color: var(--color-charcoal);
line-height: var(--type-h2-lh);
letter-spacing: var(--type-h2-ls);
margin-bottom: var(--space-1);
padding-right: var(--space-10);
}
@media (min-width: 768px) {
.modal__title {
font-size: var(--type-h2);
margin-bottom: var(--space-2);
}
}
.modal__intro {
font-size: var(--type-small);
color: var(--color-charcoal-body);
margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
.modal__intro {
font-size: var(--type-body);
margin-bottom: var(--space-6);
}
}
/* Embed area */
.modal__embed {
flex: 1;
min-height: 420px;
width: 100%;
}
.modal__embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
min-height: 420px;
}
.modal__placeholder {
width: 100%;
min-height: 480px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
border: 1px dashed var(--color-sage-light);
border-radius: var(--radius-md);
background-color: var(--color-stone);
padding: var(--space-8);
}
.modal__placeholder-text {
font-size: var(--type-body);
color: var(--color-charcoal-body);
text-align: center;
}
.modal__placeholder-note {
font-size: var(--type-small);
color: var(--color-charcoal-meta);
text-align: center;
}
/* ============================================================
09 · HERO ENTRANCE ANIMATIONS
============================================================
Staggered fade-up cascade on page load.
animation-fill-mode: both holds opacity: 0 before delay fires.
Image uses fadeIn only (no transform) per spec.
============================================================ */
.hero__trust {
animation: fadeUp 500ms var(--ease-out) 100ms both;
}
.hero__headline {
animation: fadeUp 500ms var(--ease-out) 200ms both;
}
.hero__subhead {
animation: fadeUp 500ms var(--ease-out) 400ms both;
}
.hero__cta-group {
animation: fadeUp 500ms var(--ease-out) 600ms both;
}
.hero__friction {
animation: fadeUp 500ms var(--ease-out) 800ms both;
}
.hero__figure {
animation: fadeIn 700ms var(--ease-out) 300ms both;
}
/* ============================================================
04 · SOCIAL PROOF (REVIEWS)
============================================================
Curated carousel. Featured review + preview strip.
Auto-advances every 9s, pauses on interaction.
============================================================ */
.reviews {
position: relative;
background-color: var(--color-cream);
padding: var(--space-16) var(--space-5);
}
.reviews__inner {
max-width: 1400px;
margin: 0 auto;
}
/* ---------- Section heading ---------- */
.reviews__header {
text-align: center;
margin-bottom: var(--space-12);
}
.reviews__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-3);
}
.reviews__heading {
font-size: var(--type-h2);
line-height: var(--type-h2-lh);
letter-spacing: var(--type-h2-ls);
font-weight: var(--weight-bold);
color: var(--color-charcoal);
margin: 0;
}
/* Italic-amber accent on the brand keyword — matches sitewide
pattern (Peace of Mind, the full picture, It's a pet lodge). */
.reviews__heading-accent {
font-style: italic;
color: var(--color-wood);
font-weight: var(--weight-bold);
}
/* Subhead — AEO-liftable intro that names all 4 service keywords +
credibility signal ("verified Google reviews"). */
.reviews__intro {
font-size: 15px;
line-height: 1.55;
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
max-width: 560px;
margin: var(--space-4) auto 0;
}
@media (min-width: 768px) {
.reviews__intro {
font-size: 17px;
line-height: var(--type-lead-lh);
}
}
/* ---------- Aggregate rating display ----------
Primary trust signal. Mirrors the schema.org AggregateRating
in . Sits in a soft cream-warm pill so it stands out
against the cream section background without screaming. */
.reviews__rating {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
width: fit-content;
max-width: 100%;
margin: 0 auto var(--space-10);
padding: 10px 20px;
background-color: var(--color-cream-warm, #FCF9F1);
border: 1px solid rgba(161, 93, 37, 0.18);
border-radius: var(--radius-pill);
box-shadow:
0 2px 6px rgba(11, 18, 21, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
font-size: 14px;
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
line-height: 1;
}
.reviews__rating-stars {
color: var(--color-wood);
font-size: 17px;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
}
.reviews__rating-value {
color: var(--color-charcoal);
}
.reviews__rating-value strong {
font-size: 17px;
font-weight: var(--weight-bold);
letter-spacing: -0.3px;
}
.reviews__rating-divider {
color: var(--color-charcoal-meta);
margin: 0 2px;
}
.reviews__rating-link {
color: var(--color-wood);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--speed-fast) var(--ease-out);
}
.reviews__rating-link:hover {
color: var(--color-wood-dark);
}
@media (min-width: 768px) {
.reviews__rating {
font-size: 15px;
}
.reviews__rating-stars { font-size: 19px; }
.reviews__rating-value strong { font-size: 19px; }
}
/* ---------- Featured review ---------- */
.reviews__featured {
max-width: 900px;
margin: 0 auto;
/* Center body content on mobile to match the rest of the homepage.
Was 'text-align: left' in the original — broke page-wide rhythm. */
text-align: center;
transition: opacity 200ms var(--ease-in-out);
}
/* JS toggles .is-swapping to fade the old content out before injecting the new */
.reviews__featured.is-swapping {
opacity: 0;
}
.reviews__figure {
margin: 0;
}
.reviews__stars {
display: flex;
justify-content: center;
gap: var(--space-1);
margin-bottom: var(--space-8);
}
.reviews__star {
display: inline-block;
font-size: 18px;
line-height: 1;
color: var(--color-gold);
}
.reviews__quote {
max-width: 720px;
margin: 0;
font-size: var(--type-lead);
line-height: var(--type-lead-lh);
font-weight: var(--weight-regular);
font-style: normal;
color: var(--color-charcoal);
}
.reviews__attribution {
display: flex;
flex-direction: column;
align-items: center;
margin-top: var(--space-6);
text-align: center;
}
.reviews__name-line {
font-size: 16px;
line-height: 1.4;
}
.reviews__dash {
margin-right: var(--space-2);
color: var(--color-charcoal-body);
}
.reviews__name {
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
}
.reviews__relationship {
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
}
/* Meta line — service tag + verified Google badge + date.
Sits below the name line as a single horizontal row that wraps
on narrow screens. Adds credibility (Verified) + service context. */
.reviews__meta-line {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-meta);
line-height: 1;
}
/* Service tag — small amber pill showing which service the review is about */
.reviews__service-tag {
display: inline-block;
padding: 4px 10px;
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-wood);
background-color: rgba(161, 93, 37, 0.10);
border: 1px solid rgba(161, 93, 37, 0.20);
border-radius: var(--radius-pill);
line-height: 1;
}
/* Verified Google badge — Google G icon + small label */
.reviews__verified {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--color-charcoal-meta);
}
.reviews__google-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
display: block;
}
.reviews__divider {
color: var(--color-charcoal-meta);
opacity: 0.5;
font-weight: var(--weight-regular);
}
.reviews__date {
font-size: 12px;
font-weight: var(--weight-regular);
color: var(--color-charcoal-meta);
}
@media (min-width: 768px) {
.reviews__meta-line { font-size: 13px; }
.reviews__service-tag { font-size: 11px; padding: 5px 11px; }
.reviews__google-icon { width: 14px; height: 14px; }
.reviews__date { font-size: 13px; }
}
/* ---------- Preview strip (desktop only) ---------- */
.reviews__strip {
display: none;
list-style: none;
padding: 0;
margin: var(--space-12) 0 0;
justify-content: center;
gap: var(--space-5);
}
.reviews__strip-item {
display: flex;
}
.reviews__preview {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
background: transparent;
border: 0;
padding: var(--space-2);
cursor: pointer;
font-family: inherit;
}
.reviews__preview:hover:not(.is-current) .reviews__avatar {
transform: scale(1.05);
box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 5px var(--color-sage-60);
}
.reviews__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: var(--radius-pill);
background-color: var(--color-sage);
color: var(--color-cream);
font-size: 18px;
font-weight: var(--weight-semibold);
letter-spacing: 0.5px;
transition:
transform var(--speed-normal) var(--ease-out),
box-shadow var(--speed-normal) var(--ease-out);
}
.reviews__preview-name {
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-meta);
transition:
color var(--speed-normal) var(--ease-out),
font-weight var(--speed-normal) var(--ease-out);
}
.reviews__preview.is-current .reviews__avatar {
transform: scale(1.1);
box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 5px var(--color-wood);
}
.reviews__preview.is-current .reviews__preview-name {
color: var(--color-charcoal);
font-weight: var(--weight-semibold);
}
/* ---------- Controls (dots + arrows) ---------- */
.reviews__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-6);
}
.reviews__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: transparent;
border: 1px solid var(--color-charcoal);
color: var(--color-charcoal);
cursor: pointer;
padding: 0;
transition:
background-color var(--speed-fast) var(--ease-out),
transform var(--speed-fast) var(--ease-out);
}
.reviews__arrow:hover {
background-color: var(--color-cream-edge);
}
.reviews__arrow:active {
transform: scale(0.96);
}
.reviews__dots {
display: flex;
align-items: center;
gap: var(--space-3);
list-style: none;
padding: 0;
margin: 0;
}
.reviews__dots li {
display: flex;
/* Ensure the dot button has a 44px tappable area while the visual dot stays small */
}
.reviews__dot {
position: relative;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
}
.reviews__dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
background-color: var(--color-sage);
opacity: 0.3;
outline: 1px solid var(--color-sage);
transform: translate(-50%, -50%);
transition:
background-color var(--speed-normal) var(--ease-out),
opacity var(--speed-normal) var(--ease-out),
box-shadow var(--speed-normal) var(--ease-out);
}
.reviews__dot.is-current::before {
background-color: var(--color-wood);
opacity: 1;
outline: 0;
}
/* Focus ring tight around the visual dot, not the 44px hit area */
.reviews__dot:focus-visible {
outline: none;
}
.reviews__dot:focus-visible::before {
box-shadow: 0 0 0 2px var(--color-cream), 0 0 0 4px var(--color-wood);
}
/* Same idea for preview buttons — ring the avatar, not the whole button */
.reviews__preview:focus-visible {
outline: none;
}
.reviews__preview:focus-visible .reviews__avatar {
box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 5px var(--color-wood);
}
/* ---------- Top divider — bridges sage Why section above into cream Reviews ---------- */
.reviews__top-divider {
position: absolute;
top: 1px;
left: 0;
right: 0;
width: 100%;
height: 32px;
color: var(--color-cream);
display: block;
transform: translateY(-100%);
pointer-events: none;
}
@media (min-width: 768px) {
.reviews__top-divider {
height: 50px;
}
}
/* ---------- Bottom hairline ---------- */
.reviews__divider {
width: 80%;
max-width: 1120px;
height: 1px;
margin: var(--space-8) auto 0;
background-color: var(--color-sage-15);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
/* ---------- Photo review cards ---------- */
.reviews__rating-verified {
display: inline-flex;
align-items: center;
gap: 5px;
}
.reviews__cards {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-top: var(--space-8);
max-width: 860px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.reviews__card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-cream-edge);
box-shadow: 0 2px 16px rgba(11, 18, 21, 0.07);
}
.reviews__card-photo {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
flex-shrink: 0;
}
.reviews__card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.reviews__card-body {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
justify-content: center;
align-items: center;
text-align: center;
}
.reviews__card-stars {
color: var(--color-wood);
font-size: 17px;
letter-spacing: 0.05em;
line-height: 1;
}
.reviews__card-quote {
font-size: 16px;
line-height: 1.72;
color: var(--color-charcoal);
margin: 0;
width: 100%;
}
.reviews__card-attribution {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
border-top: 1px solid var(--color-cream-edge);
padding-top: var(--space-4);
margin-top: var(--space-1);
width: 100%;
}
.reviews__card-name {
font-size: 15px;
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
}
@media (min-width: 768px) {
.reviews__card {
flex-direction: row;
}
.reviews__card-photo {
width: 42%;
aspect-ratio: 1 / 1;
flex-shrink: 0;
}
.reviews__card-body {
padding: var(--space-8);
}
.reviews__card-quote {
font-size: 17px;
}
}
/* ---------- Entrance animation ---------- */
/* Pre-animation resting state — elements are hidden until the section
scrolls into view (JS adds .is-in-view). Each child gets its own
staggered animation below. */
.reviews__eyebrow,
.reviews__heading,
.reviews__rating,
.reviews__card {
opacity: 0;
}
.reviews.is-in-view .reviews__eyebrow { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.reviews.is-in-view .reviews__heading { animation: fadeUp 500ms var(--ease-out) 100ms both; }
.reviews.is-in-view .reviews__rating { animation: fadeIn 400ms var(--ease-out) 250ms both; }
.reviews.is-in-view .reviews__card:nth-child(1) { animation: fadeUp 500ms var(--ease-out) 350ms both; }
.reviews.is-in-view .reviews__card:nth-child(2) { animation: fadeUp 500ms var(--ease-out) 500ms both; }
/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
.reviews {
padding: var(--space-20) var(--space-8);
}
.reviews__star {
font-size: 20px;
}
}
/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
.reviews {
padding: var(--space-24) var(--space-10);
}
/* Centering rules are now applied at base — no desktop overrides needed
(was scoped to ≥1024px previously, broke mobile alignment). */
.reviews__quote {
margin-left: auto;
margin-right: auto;
}
.reviews__strip {
display: flex;
}
}
/* ============================================================
05 · SERVICES OVERVIEW
============================================================
4 cards. 2×2 grid desktop/tablet, 1×4 stacked mobile.
Boarding emphasized via MOST POPULAR tag.
Cards link to anchors; real service pages post-launch.
============================================================ */
.services {
background-color: var(--color-paper);
padding: var(--space-16) var(--space-5);
}
.services__inner {
max-width: 1400px;
margin: 0 auto;
}
/* ---------- Section heading ---------- */
.services__header {
text-align: center;
margin-bottom: var(--space-16);
}
.services__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-3);
}
.services__heading {
font-size: var(--type-h2);
line-height: var(--type-h2-lh);
letter-spacing: var(--type-h2-ls);
font-weight: var(--weight-bold);
color: var(--color-charcoal);
max-width: 720px;
margin: 0 auto var(--space-5);
}
/* Amber accent on the emotional/premium beat. Wood on cream at H2
size = ~4.2:1 — passes WCAG AA large-text. */
.services__heading-accent {
color: var(--color-wood);
font-style: italic;
}
.services__intro {
font-size: var(--type-body);
line-height: var(--type-body-lh);
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
max-width: 580px;
margin: 0 auto;
}
/* ---------- Grid ---------- */
.services__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
/* ---------- Card — EDITORIAL LAYERED DESIGN ----------
Photo fills the entire card as the background. A white overlay
card sits centered horizontally, anchored near the bottom. An
amber circle badge with the service icon peeks above the top of
the overlay card, brand-marked.
Pattern: Aman, Equinox, premium hospitality feature cards.
---------------------------------------------------------- */
.service-card {
position: relative;
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--color-paper);
text-decoration: none;
color: inherit;
box-shadow: 0 8px 24px -4px rgba(11, 18, 21, 0.12), 0 2px 8px rgba(11, 18, 21, 0.06);
transition:
transform var(--speed-normal) var(--ease-out),
box-shadow var(--speed-normal) var(--ease-out);
}
.service-card__article {
display: flex;
flex-direction: column;
height: 100%;
}
/* ---------- Photo — stacked at the top of the card ---------- */
.service-card__image {
position: relative;
flex-shrink: 0;
width: 100%;
padding: 16px 16px 0;
overflow: hidden;
background-color: var(--color-paper);
}
.service-card__image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
object-position: center 30%;
border-radius: var(--radius-md);
transition: transform 800ms cubic-bezier(.22, 1, .36, 1);
}
/* ---------- MOST POPULAR tag (still top-right of photo) ---------- */
.service-card__tag {
position: absolute;
top: calc(16px + var(--space-3));
right: calc(16px + var(--space-3));
z-index: 3;
background-color: var(--color-wood);
color: var(--color-cream);
font-size: 10px;
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 10px;
border-radius: var(--radius-sm);
box-shadow: 0 2px 6px rgba(11, 18, 21, 0.15);
}
/* ---------- White content area — full width, stacked below photo ---------- */
.service-card__content {
position: relative;
width: 100%;
padding: 40px 20px 24px;
background-color: var(--color-paper);
text-align: center;
flex: 1;
}
/* Amber crescent wave — removed in favour of inset photo design */
.service-card__content::before {
display: none;
}
/* ---------- Amber circle badge — sits at the wave's lowest point ---------- */
.service-card__badge {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--color-wood);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 6px 14px rgba(161, 93, 37, 0.32),
inset 0 -2px 0 rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
border: 3px solid var(--color-paper);
z-index: 2;
}
.service-card__badge-icon {
width: 88%;
height: 88%;
object-fit: contain;
display: block;
/* Subtle drop shadow only — icon already on transparent bg with bright cream linework */
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
/* ---------- Type ---------- */
.service-card__name {
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.4px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
margin: 0 0 8px;
}
.service-card__description {
font-size: 14px;
line-height: 1.5;
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
margin: 0 0 14px;
}
.service-card__link {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: var(--weight-semibold);
color: var(--color-wood);
letter-spacing: 0.2px;
}
.service-card__arrow {
display: inline-block;
margin-left: 4px;
transition: transform var(--speed-normal) var(--ease-out);
}
/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
.service-card:hover {
transform: translateY(-6px);
box-shadow:
0 20px 48px -12px rgba(184, 115, 51, 0.22),
0 16px 32px rgba(11, 18, 21, 0.10);
}
.service-card:hover .service-card__image img {
transform: scale(1.05);
}
.service-card:hover .service-card__arrow {
transform: translateX(4px);
}
}
/* Keyboard focus */
.service-card:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 4px;
}
/* ---------- Entrance animation ---------- */
/* Pre-animation resting state — elements hidden until the section
scrolls into view. JS toggles .is-in-view. */
.services__eyebrow,
.services__heading,
.services__intro,
.services__grid .service-card,
.services__cta-lead,
.services__cta-btn {
opacity: 0;
}
.services.is-in-view .services__eyebrow { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.services.is-in-view .services__heading { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.services.is-in-view .services__intro { animation: fadeUp 400ms var(--ease-out) 200ms both; }
.services.is-in-view .service-card:nth-child(1) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 400ms both; }
.services.is-in-view .service-card:nth-child(2) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both; }
.services.is-in-view .service-card:nth-child(3) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 640ms both; }
.services.is-in-view .service-card:nth-child(4) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both; }
.services.is-in-view .services__cta-lead { animation: fadeUp 500ms var(--ease-out) 900ms both; }
.services.is-in-view .services__cta-btn { animation: fadeUp 500ms var(--ease-out) 1000ms both; }
/* ---------- CTA block ---------- */
.services__cta {
text-align: center;
margin-top: var(--space-16);
}
.services__cta-lead {
font-size: 18px;
line-height: 1.4;
font-weight: var(--weight-medium);
color: var(--color-charcoal-body);
margin: 0 0 var(--space-5);
}
/* Services CTA inherits the universal .btn--book treatment.
Class kept as an entrance-animation hook only. */
/* ---------- Tablet (≥768px) — 2×2 grid ---------- */
@media (min-width: 768px) {
.services {
padding: 72px var(--space-8);
}
.services__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.service-card__content {
padding: 44px 26px 26px;
}
.service-card__badge {
width: 64px;
height: 64px;
top: -32px;
}
.service-card__name {
font-size: 24px;
}
}
/* ---------- Desktop (≥1024px) — 4-up grid ---------- */
@media (min-width: 1024px) {
.services {
padding: var(--space-24) var(--space-10);
}
.services__grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr; /* Force identical row heights */
align-items: stretch; /* Stretch to fill row */
gap: var(--space-6);
}
.service-card__content {
padding: 48px 24px 24px;
}
.service-card__badge {
width: 68px;
height: 68px;
top: -34px;
}
.service-card__name {
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.4px;
}
.service-card__description {
font-size: 14px;
}
}
/* ---------- Wide desktop (≥1280px) — slight type bump ---------- */
@media (min-width: 1280px) {
.services__grid {
gap: var(--space-8);
}
.service-card__name {
font-size: 24px;
}
.service-card__description {
font-size: 15px;
}
}
/* ============================================================
06 · WHY MEADOW RIDGE (DIFFERENTIATORS + FACILITY)
============================================================
Merged section. Sage background. Brand anchor moment.
Hero photo + 4 bullets (claim + proof unified).
Secondary row of 3 smaller facility photos below.
CTA at bottom routes to #contact for tour scheduling.
⚠️ CONTRAST FLAGS (per spec's "verify" requirement):
Section bg = --color-sage (#818878).
- Cream (#F8F5ED) on sage = 3.31:1
→ FAILS body 4.5:1, passes large text 3:1 (h2, hero-lead)
→ Body (intro 17px regular, bullets 18px semibold) technically
passes large-text threshold at 18px/semibold ≈ 14pt bold.
Intro at 17px regular does NOT — borderline fail.
- Wood (#A15D25) on sage = 1.42:1
→ FAILS at any size. Eyebrow as spec'd is unreadable.
- Wood CTA bg (amber block) w/ cream = fine (button treatment
uses cream-on-wood which is 5.83:1 PASS).
The spec's "raise opacity to 95% or pure cream" fallback does
not fix the wood-eyebrow issue. Flagging this for Jay to call:
options are (a) keep sage, change eyebrow to cream (3.31:1,
large-text-only), (b) switch section bg to --color-sage-dark
(cream = 6.21:1 AA pass body), (c) change eyebrow to a lighter
tint introduced as a new token.
Implementing spec as written for now; contrast flagged in-line
where each pairing lives.
============================================================ */
/* ---------- Section + inner ---------- */
.why {
position: relative;
background-color: var(--color-sage);
padding: 72px var(--space-5);
}
/* Ridge-line divider — bleeds the sage color upward into the section
above (Services, white) as a subtle topographic curve instead of a
straight color edge. SVG sits at the top of .why, absolute-positioned,
clipped by Services' overflow if needed. currentColor = sage. */
.why__divider {
position: absolute;
top: 1px; /* +1 overlaps the section top so no hairline gap shows
after translateY pulls the element up by its height */
left: 0;
right: 0;
width: 100%;
height: 32px;
color: var(--color-sage);
display: block;
transform: translateY(-100%); /* pull the divider up OUT of the section */
pointer-events: none;
}
@media (min-width: 768px) {
.why__divider {
height: 50px;
}
}
.why__inner {
max-width: 1400px;
margin: 0 auto;
}
.why__paws {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.why__paw {
position: absolute;
color: var(--color-cream);
opacity: 0.07;
display: block;
}
.why__paw--tr {
top: 20px;
right: -40px;
width: 180px;
height: 180px;
transform: rotate(-14deg);
}
.why__paw--bl {
bottom: -30px;
left: -40px;
width: 160px;
height: 160px;
transform: rotate(22deg);
}
/* ---------- Heading block ---------- */
.why__header {
text-align: center;
margin-bottom: 56px;
}
/* Eyebrow: cream on sage to match heading + intro colors (Jay's call;
AA contrast at 14px semibold doesn't pass — accepted trade-off). */
.why__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-cream);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-3);
}
/* Cream on sage = 3.31:1. Passes large-text 3:1 (h2 is large). */
.why__heading {
font-size: var(--type-h2);
line-height: 1.15;
letter-spacing: -0.8px;
font-weight: var(--weight-bold);
color: var(--color-cream);
max-width: 720px;
margin: 0 auto var(--space-5);
}
/* Italic accent on the SEO keyword phrase ("It's a pet lodge.").
Stays cream (wood would fail contrast on sage at 1.42:1). Italic
alone carries the visual emphasis. */
.why__heading-accent {
font-style: italic;
font-weight: var(--weight-bold);
}
.why__intro {
font-size: var(--type-body);
line-height: var(--type-body-lh);
font-weight: var(--weight-regular);
color: var(--color-paper);
max-width: 620px;
margin: 0 auto;
}
/* ============================================================
TABBED DIFFERENTIATORS — interactive tab/panel pattern
4 photo-tabs at the top, content panel that swaps below.
Mobile: 2x2 tabs / Desktop: 4-across.
See: y the homepage hero is a tabbed pattern (Aman / Equinox).
============================================================ */
/* Interaction cue — explicit "tap to explore" instruction */
.why__tabs-cue {
text-align: center;
margin: 0 auto 14px;
font-size: 13px;
font-weight: var(--weight-semibold);
color: var(--color-paper);
text-transform: uppercase;
letter-spacing: 1.6px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
opacity: 0.9;
}
.why__tabs-cue-arrow {
display: inline-block;
color: var(--color-paper);
animation: cueBounce 1.6s ease-in-out infinite;
}
@keyframes cueBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.why__tabs-cue-arrow { animation: none; }
}
/* Tab list — 2x2 mobile, 4-across desktop */
.why__tablist {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 28px;
}
.why__tab {
appearance: none;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
text-align: left;
color: inherit;
font: inherit;
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
position: relative;
transition:
transform 220ms var(--ease-out),
box-shadow 220ms var(--ease-out);
box-shadow:
0 4px 14px -4px rgba(11, 18, 21, 0.20),
0 2px 6px rgba(11, 18, 21, 0.08);
}
.why__tab-photo {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-stone);
}
.why__tab-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
/* Inactive tabs are dimmed so the active state has clear contrast */
opacity: 0.50;
filter: saturate(0.65);
transition:
opacity 240ms var(--ease-out),
filter 240ms var(--ease-out),
transform 600ms var(--ease-out);
}
.why__tab-num {
position: absolute;
top: 8px;
left: 10px;
font-size: 22px;
font-weight: var(--weight-bold);
font-style: italic;
color: var(--color-cream);
line-height: 1;
letter-spacing: -0.5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
z-index: 2;
}
/* Top-left gradient so number stays readable on any photo */
.why__tab-photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 50%);
pointer-events: none;
z-index: 1;
}
/* Placeholder treatment — clear visual signal "this isn't a final photo" */
.why__tab-photo--placeholder::before {
display: none;
}
.why__tab-placeholder {
position: absolute;
inset: 0;
background: var(--color-stone);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
text-align: center;
border: 2px dashed var(--color-wood);
}
.why__tab-placeholder svg {
width: 26px;
height: 26px;
color: var(--color-wood);
opacity: 0.75;
}
.why__tab-placeholder-label {
font-size: 10px;
font-weight: var(--weight-bold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.35;
}
/* On placeholders, switch the number color so it stays readable */
.why__tab-photo--placeholder .why__tab-num {
color: var(--color-wood);
text-shadow: 0 1px 2px rgba(252, 249, 241, 0.8);
}
.why__tab-label {
background: var(--color-cream);
color: var(--color-charcoal);
font-size: 12px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 12px;
line-height: 1.2;
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 220ms;
}
/* Active tab — full color, lifted, with downward connector pointer */
.why__tab[aria-selected="true"] {
transform: translateY(-4px);
box-shadow:
0 14px 28px -8px rgba(11, 18, 21, 0.40),
0 6px 14px rgba(11, 18, 21, 0.16);
z-index: 2;
}
.why__tab[aria-selected="true"] .why__tab-photo img {
opacity: 1;
filter: saturate(1.05);
}
.why__tab[aria-selected="true"] .why__tab-label {
background: var(--color-cream-warm, #FCF9F1);
color: var(--color-wood);
box-shadow: inset 0 -4px 0 var(--color-wood);
}
/* Connector pointer — downward triangle below active tab */
.why__tab[aria-selected="true"]::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--color-cream);
z-index: 3;
filter: drop-shadow(0 2px 2px rgba(11, 18, 21, 0.15));
}
@media (hover: hover) {
.why__tab:not([aria-selected="true"]):hover {
transform: translateY(-3px);
box-shadow:
0 10px 22px -6px rgba(11, 18, 21, 0.30),
0 4px 10px rgba(11, 18, 21, 0.10);
}
.why__tab:not([aria-selected="true"]):hover .why__tab-photo img {
opacity: 0.95;
filter: saturate(0.95);
}
}
.why__tab:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 3px;
}
/* Panels — content for each tab */
.why__panels {
position: relative;
margin-bottom: 48px;
}
.why__panel {
display: none;
background: var(--color-cream);
color: var(--color-charcoal);
border-radius: 16px;
padding: 28px 22px 26px;
box-shadow:
0 16px 36px -10px rgba(11, 18, 21, 0.32),
0 6px 14px rgba(11, 18, 21, 0.10);
animation: panelIn 320ms var(--ease-out);
}
.why__panel.is-active { display: block; }
@keyframes panelIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.why__panel-claim {
font-size: 22px;
font-weight: var(--weight-bold);
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--color-charcoal);
margin: 0 0 10px;
}
.why__panel-lead {
font-size: 14px;
line-height: 1.6;
color: var(--color-charcoal-body);
margin: 0 0 18px;
}
.why__panel-facts {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.why__panel-fact {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
color: var(--color-charcoal-body);
}
.why__panel-fact-dot {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--color-wood);
margin-top: 1px;
}
.why__panel-fact strong {
color: var(--color-charcoal);
font-weight: var(--weight-bold);
}
.why__panel-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--color-wood);
text-decoration: none;
letter-spacing: 0.2px;
}
.why__panel-link:hover {
color: var(--color-wood-dark);
text-decoration: underline;
}
.why__panel-link-arrow {
transition: transform 180ms;
}
.why__panel-link:hover .why__panel-link-arrow {
transform: translateX(3px);
}
/* ---------- Tablet (≥640px) ---------- */
@media (min-width: 640px) {
.why__tablist { gap: 14px; }
.why__tab-num { font-size: 26px; }
.why__tab-label { font-size: 13px; padding: 14px; }
.why__panel { padding: 36px 32px 32px; }
.why__panel-claim { font-size: 26px; }
.why__panel-lead { font-size: 15px; }
.why__panel-fact { font-size: 14px; }
}
/* ---------- Tablet section padding (≥768px) ---------- */
@media (min-width: 768px) {
.why { padding: 96px var(--space-8); }
.why__header { margin-bottom: 56px; }
}
/* ---------- Desktop (≥1024px) — tabs go 4-across ---------- */
@media (min-width: 1024px) {
.why { padding: 120px var(--space-10); }
.why__header { margin-bottom: 64px; }
.why__tablist {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 32px;
}
.why__tab-num { font-size: 32px; top: 12px; left: 14px; }
.why__tab-label { font-size: 14px; padding: 16px; letter-spacing: 1.4px; }
.why__panel {
padding: 48px 56px 44px;
max-width: 880px;
margin: 0 auto;
}
.why__panel-claim { font-size: 32px; letter-spacing: -0.8px; margin-bottom: 14px; }
.why__panel-lead { font-size: 16px; max-width: 640px; }
.why__panel-facts { max-width: 640px; }
.why__panel-fact { font-size: 14px; }
.why__panels { margin-bottom: 56px; }
}
/* ---------- CTA block ---------- */
.why__cta {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.why__cta-lead {
font-size: var(--type-lead);
line-height: var(--type-lead-lh);
font-weight: var(--weight-semibold);
color: var(--color-cream);
max-width: 520px;
margin: 0;
}
.why__cta-btn:focus-visible {
outline: 2px solid var(--color-cream);
outline-offset: 4px;
}
/* ---------- Entrance animations (step 7) ---------- */
.why__eyebrow,
.why__heading,
.why__intro,
.why__tabs-cue,
.why__tab,
.why__panels,
.why__cta-lead,
.why__cta-btn {
opacity: 0;
}
.why.is-in-view .why__eyebrow { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.why.is-in-view .why__heading { animation: fadeUp 500ms var(--ease-out) 100ms both; }
.why.is-in-view .why__intro { animation: fadeUp 500ms var(--ease-out) 200ms both; }
.why.is-in-view .why__tabs-cue { animation: fadeUp 500ms var(--ease-out) 350ms both; }
.why.is-in-view .why__tab:nth-child(1) { animation: fadeUp 500ms var(--ease-out) 450ms both; }
.why.is-in-view .why__tab:nth-child(2) { animation: fadeUp 500ms var(--ease-out) 550ms both; }
.why.is-in-view .why__tab:nth-child(3) { animation: fadeUp 500ms var(--ease-out) 650ms both; }
.why.is-in-view .why__tab:nth-child(4) { animation: fadeUp 500ms var(--ease-out) 750ms both; }
.why.is-in-view .why__panels { animation: fadeUp 500ms var(--ease-out) 900ms both; }
.why.is-in-view .why__cta-lead { animation: fadeUp 500ms var(--ease-out) 1100ms both; }
.why.is-in-view .why__cta-btn { animation: fadeUp 500ms var(--ease-out) 1200ms both; }
/* ── A+D entrance animations ── */
.why.is-in-view .why__split { animation: fadeUp 500ms var(--ease-out) 350ms both; }
.why.is-in-view .why__strip { animation: fadeUp 500ms var(--ease-out) 550ms both; }
@media (prefers-reduced-motion: reduce) {
.why.is-in-view .why__split,
.why.is-in-view .why__strip { animation: none; }
}
/* ============================================================
WHY · A+D SPLIT (The Facility section on homepage)
Desktop: two equal columns side by side.
Mobile: stacked vertically, landscape photo crop.
============================================================ */
/* ── Container ── */
.why__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(248, 245, 237, 0.18);
margin-bottom: 16px;
}
/* ── Each panel ── */
.why__split-panel {
display: flex;
flex-direction: column;
}
.why__split-panel--them {
border-right: 1px solid rgba(248, 245, 237, 0.18);
}
/* ── Photo ── */
.why__split-photo {
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--color-sage-dark);
position: relative;
}
.why__split-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.why__split-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(88, 93, 82, 0.55);
}
.why__split-placeholder span {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--color-cream);
opacity: 0.5;
}
/* ── Copy block ── */
.why__split-copy {
padding: 28px 28px 36px;
flex: 1;
}
.why__split-eyebrow {
font-size: 13px;
font-weight: var(--weight-semibold);
letter-spacing: var(--type-eyebrow-ls);
text-transform: uppercase;
color: var(--color-cream);
opacity: 0.8;
margin: 0 0 10px;
}
.why__split-claim {
font-size: clamp(18px, 2vw, 24px);
font-weight: var(--weight-bold);
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--color-cream);
margin: 0 0 20px;
}
/* ── Paw bullet list ── */
.why__split-facts {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.why__split-fact {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 13px;
line-height: 1.45;
color: var(--color-cream);
}
.why__split-fact strong {
font-weight: var(--weight-semibold);
color: var(--color-cream);
}
.why__split-fact-dot {
flex-shrink: 0;
width: 15px;
height: 15px;
color: var(--color-cream);
opacity: 0.55;
margin-top: 2px;
}
/* ── D Strip ── */
.why__strip {
display: flex;
flex-direction: column;
gap: 14px;
}
.why__strip-photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
border-radius: 12px;
overflow: hidden;
}
.why__strip-photo {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--color-sage-dark);
position: relative;
}
.why__strip-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.why__strip-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(88, 93, 82, 0.55);
}
.why__strip-placeholder span {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--color-cream);
opacity: 0.5;
}
.why__strip-ctas {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.why__strip-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 16px;
font-weight: var(--weight-semibold);
color: var(--color-cream);
text-decoration: none;
letter-spacing: 0.02em;
opacity: 0.9;
transition: opacity 200ms ease;
}
.why__strip-link--secondary {
font-size: 14px;
font-weight: var(--weight-medium);
opacity: 0.65;
}
.why__strip-link:hover { opacity: 1; }
/* ── Mobile: stack panels, landscape crop ── */
@media (max-width: 767px) {
.why__split {
grid-template-columns: 1fr;
margin-bottom: 12px;
}
.why__split-panel--them {
border-right: none;
border-bottom: 1px solid rgba(248, 245, 237, 0.18);
}
.why__split-photo { aspect-ratio: 16 / 9; }
.why__split-copy { padding: 22px 20px 28px; }
.why__split-claim { font-size: 19px; margin-bottom: 16px; }
.why__split-fact { font-size: 13px; }
.why__strip-photos { border-radius: 10px; }
}
/* ── Desktop refinements ── */
@media (min-width: 1024px) {
.why__split-photo { aspect-ratio: 1 / 1; }
.why__split-copy { padding: 32px 36px 44px; }
.why__split-claim { font-size: clamp(20px, 1.8vw, 26px); }
.why__split-fact { font-size: 14px; }
}
/* ============================================================
07 · MORE THAN A PET RESORT (AMENITIES)
============================================================
2 feature cards. Cream section background.
Taproom + 24/7 wash station.
Both cards route to #amenities (future /amenities page).
============================================================ */
.amenities {
position: relative;
background-color: var(--color-cream);
/* Reduced top padding — was 64px, but Reviews above already has
bottom padding + hairline divider. Cutting top ~half tightens
the gap between sections without crowding. */
padding: 32px var(--space-5) 64px;
}
/* Ridge-line divider — bleeds cream upward into the sage .why section
above. Same pattern as .why__divider: top:1px + translateY(-100%)
overlaps the section seam so no hairline gap shows. */
.amenities__divider {
position: absolute;
top: 1px;
left: 0;
right: 0;
width: 100%;
height: 32px;
color: var(--color-cream);
display: block;
transform: translateY(-100%);
pointer-events: none;
}
@media (min-width: 768px) {
.amenities__divider {
height: 50px;
}
}
.amenities__inner {
max-width: 1400px;
margin: 0 auto;
}
/* ---------- Heading block ---------- */
.amenities__header {
text-align: center;
margin-bottom: 56px;
}
.amenities__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-3);
}
.amenities__heading {
font-size: var(--type-h2);
line-height: 1.15;
letter-spacing: -0.8px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
max-width: 720px;
margin: 0 auto var(--space-5);
}
/* Italic-amber accent on the brand keyword (sitewide pattern) */
.amenities__heading-accent {
font-style: italic;
color: var(--color-wood);
font-weight: var(--weight-bold);
}
.amenities__intro {
font-size: 16px;
line-height: var(--type-lead-lh);
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
max-width: 600px;
margin: 0 auto;
}
/* ---------- Card grid ---------- */
.amenities__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* ---------- Amenity card — FULL-BLEED PHOTO + TEXT OVERLAY ----------
Pattern: Aman / Hoxton / Soho House amenity tiles. Photo fills the
tile, text overlays at the bottom-left with a gradient for legibility.
Visually different from the editorial-layered service cards above
(those use a white card overlay; these use direct-on-photo text). */
.amenity-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--color-stone);
text-decoration: none;
color: inherit;
box-shadow: 0 8px 22px -6px rgba(11, 18, 21, 0.18);
transition:
transform 300ms var(--ease-out),
box-shadow 300ms var(--ease-out);
}
.amenity-card__article {
position: absolute;
inset: 0;
}
.amenity-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
/* Bottom gradient — transparent at top → strong dark at bottom for
legibility behind the overlay text. Stronger ramp through the
copy area so all text reads cleanly on any photo. */
.amenity-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(11, 18, 21, 0) 25%,
rgba(11, 18, 21, 0.20) 45%,
rgba(11, 18, 21, 0.55) 65%,
rgba(11, 18, 21, 0.85) 90%,
rgba(11, 18, 21, 0.92) 100%
);
pointer-events: none;
z-index: 1;
}
/* Overlay — text positioned at the bottom-left of the photo */
.amenity-card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 22px 22px 22px;
z-index: 2;
color: var(--color-cream);
}
.amenity-card__eyebrow {
display: block;
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-cream);
text-transform: uppercase;
letter-spacing: 1.6px;
margin-bottom: 8px;
opacity: 0.92;
}
.amenity-card__name {
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.4px;
font-weight: var(--weight-bold);
color: var(--color-cream);
margin: 0 0 10px;
}
.amenity-card__description {
font-size: 14px;
line-height: 1.5;
font-weight: var(--weight-regular);
color: var(--color-cream);
opacity: 0.9;
margin: 0 0 14px;
}
.amenity-card__link {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--color-cream);
letter-spacing: 0.3px;
border-bottom: 1px solid rgba(248, 245, 237, 0.35);
padding-bottom: 2px;
}
.amenity-card__arrow {
display: inline-block;
margin-left: 4px;
transition: transform 240ms var(--ease-out);
}
/* Focus-visible */
.amenity-card:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 4px;
}
/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
.amenity-card:hover {
transform: translateY(-6px);
box-shadow:
0 18px 36px -10px rgba(11, 18, 21, 0.32),
0 6px 14px rgba(11, 18, 21, 0.14);
}
.amenity-card:hover .amenity-card__photo {
transform: scale(1.05);
}
.amenity-card:hover .amenity-card__arrow {
transform: translateX(4px);
}
.amenity-card:hover .amenity-card__link {
border-bottom-color: var(--color-cream);
}
}
/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
.amenities {
padding: 48px var(--space-8) 80px;
}
.amenities__header {
margin-bottom: 56px;
}
.amenities__grid {
gap: 20px;
}
.amenity-card__overlay {
padding: 28px;
}
.amenity-card__name {
font-size: 24px;
}
.amenity-card__description {
font-size: 15px;
}
}
/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
.amenities {
padding: 64px var(--space-10) 96px;
}
.amenities__header {
margin-bottom: 72px;
}
.amenities__intro {
font-size: var(--type-lead);
}
.amenities__grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 24px;
}
.amenity-card__overlay {
padding: 32px;
}
.amenity-card__name {
font-size: 26px;
letter-spacing: -0.5px;
}
.amenity-card__description {
font-size: 15px;
}
.amenities__intro {
font-size: 17px;
}
}
/* ---------- Entrance animation ---------- */
.amenities__eyebrow,
.amenities__heading,
.amenities__intro,
.amenity-card {
opacity: 0;
}
.amenities.is-in-view .amenities__eyebrow { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.amenities.is-in-view .amenities__heading { animation: fadeUp 500ms var(--ease-out) 100ms both; }
.amenities.is-in-view .amenities__intro { animation: fadeUp 500ms var(--ease-out) 200ms both; }
.amenities.is-in-view .amenity-card:nth-child(1) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 400ms both; }
.amenities.is-in-view .amenity-card:nth-child(2) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both; }
.amenities.is-in-view .amenity-card:nth-child(3) { animation: cardRaise 700ms cubic-bezier(0.22, 1, 0.36, 1) 640ms both; }
.amenities.is-in-view .amenities__cta { animation: fadeUp 500ms var(--ease-out) 900ms both; }
/* ---------- Section CTA (links to future /facility page) ---------- */
.amenities__cta {
text-align: center;
margin-top: 48px;
opacity: 0;
}
.amenities__cta-link {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: var(--weight-semibold);
color: var(--color-wood);
letter-spacing: 0.2px;
text-decoration: none;
padding: 12px 4px;
border-bottom: 2px solid transparent;
transition: border-color var(--speed-normal) var(--ease-out),
color var(--speed-normal) var(--ease-out);
}
.amenities__cta-arrow {
display: inline-block;
margin-left: var(--space-2);
transition: transform var(--speed-normal) var(--ease-out);
}
@media (hover: hover) {
.amenities__cta-link:hover {
color: var(--color-wood-dark);
border-bottom-color: var(--color-wood-dark);
}
.amenities__cta-link:hover .amenities__cta-arrow {
transform: translateX(4px);
}
}
.amenities__cta-link:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
@media (min-width: 1024px) {
.amenities__cta {
margin-top: 64px;
}
}
/* ============================================================
08 · PRICING TEASER
============================================================
4 cards in 2×2 grid. Stacked on mobile.
Two variants: priced (Boarding, Daycare) and
varies (Grooming, Training).
Shared card dimensions for visual parallelism.
Single "See full pricing" CTA routes to #pricing.
============================================================ */
.pricing {
background-color: var(--color-paper);
padding: 56px var(--space-5) 64px;
}
.pricing__inner {
max-width: 1400px;
margin: 0 auto;
}
/* ---------- Heading ---------- */
.pricing__header {
text-align: center;
margin-bottom: 40px;
}
.pricing__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-3);
}
.pricing__heading {
font-size: var(--type-h2);
line-height: 1.15;
letter-spacing: -0.8px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
max-width: 720px;
margin: 0 auto var(--space-4);
}
/* Italic-amber accent on anti-positioning phrase (sitewide pattern) */
.pricing__heading-accent {
font-style: italic;
color: var(--color-wood);
font-weight: var(--weight-bold);
}
.pricing__intro {
font-size: 15px;
line-height: 1.55;
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 768px) {
.pricing__intro {
font-size: 17px;
line-height: var(--type-lead-lh);
}
}
/* ---------- Grid (4 cards) ---------- */
.pricing__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* ---------- Pricing card — editorial brand-system card ----------
Cream-warm card with amber circle badge (matching service cards),
prominent price, paw-bullet "includes" list, wood link.
Visually consistent with the rest of the homepage's editorial system. */
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: var(--color-cream-warm, #FCF9F1);
border: 1px solid rgba(161, 93, 37, 0.14);
border-radius: var(--radius-lg);
padding: 36px 22px 24px;
text-decoration: none;
color: inherit;
box-shadow:
0 4px 12px rgba(11, 18, 21, 0.04),
0 1px 3px rgba(11, 18, 21, 0.04);
transition:
transform 240ms var(--ease-out),
box-shadow 240ms var(--ease-out),
border-color 240ms var(--ease-out);
}
/* Amber circle badge with hand-drawn cream icon — peeks above the
top edge of the card. Same DNA as the service cards' badges. */
.pricing-card__badge {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--color-wood);
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--color-cream-warm, #FCF9F1);
box-shadow:
0 4px 10px rgba(161, 93, 37, 0.30),
inset 0 -2px 0 rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.pricing-card__badge-icon {
width: 80%;
height: 80%;
object-fit: contain;
display: block;
/* Icons are pure white on transparent at source — only need a subtle
drop shadow for definition. Brightness filter dropped (was fighting
cream-on-amber; pure white renders cleanly without it). */
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.pricing-card__name {
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.5px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
margin: 10px 0 16px;
}
/* Price block */
.pricing-card__price {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-bottom: 16px;
}
.pricing-card__price-label {
font-size: 10px;
font-weight: var(--weight-bold);
color: var(--color-charcoal-meta);
text-transform: uppercase;
letter-spacing: 1.6px;
margin-bottom: 2px;
}
.pricing-card__price-amount {
font-size: 36px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
line-height: 1;
letter-spacing: -1.2px;
}
/* Custom-quote variant — smaller italic */
.pricing-card__price-amount--quote {
font-size: 20px;
font-weight: var(--weight-bold);
font-style: italic;
color: var(--color-charcoal);
letter-spacing: -0.4px;
}
.pricing-card__price-unit {
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-meta);
margin-top: 4px;
letter-spacing: 0.1px;
}
/* Subtle wood divider between price and includes */
.pricing-card__divider {
display: block;
width: 32px;
height: 1px;
background-color: rgba(161, 93, 37, 0.30);
margin: 0 0 16px;
}
/* Includes list with paw-print bullets */
.pricing-card__includes {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
width: 100%;
max-width: 240px;
}
.pricing-card__include {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--color-charcoal-body);
}
.pricing-card__include-paw {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--color-wood);
margin-top: 2px;
}
.pricing-card__link {
display: inline-flex;
align-items: center;
margin-top: auto;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--color-wood);
letter-spacing: 0.2px;
}
.pricing-card__arrow {
display: inline-block;
margin-left: 4px;
transition: transform 240ms var(--ease-out);
}
/* Focus-visible */
.pricing-card:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 4px;
}
/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
.pricing-card:hover {
transform: translateY(-4px);
box-shadow:
0 14px 28px -8px rgba(11, 18, 21, 0.16),
0 4px 10px rgba(11, 18, 21, 0.06);
border-color: rgba(161, 93, 37, 0.32);
}
.pricing-card:hover .pricing-card__arrow {
transform: translateX(3px);
}
}
/* ---------- Cat Boarding — featured full-width card ---------- */
.pricing-feature {
display: block;
background: linear-gradient(135deg, var(--color-cream-warm, #FCF9F1) 0%, var(--color-stone) 100%);
border: 1px solid rgba(161, 93, 37, 0.16);
border-radius: var(--radius-lg);
padding: 28px 22px;
margin-top: 20px;
text-decoration: none;
color: inherit;
box-shadow:
0 6px 16px rgba(11, 18, 21, 0.06),
0 1px 3px rgba(11, 18, 21, 0.04);
transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.pricing-feature__main {
margin-bottom: 24px;
}
.pricing-feature__eyebrow {
font-size: 10px;
font-weight: var(--weight-bold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: 1.6px;
margin: 0 0 8px;
}
.pricing-feature__name {
font-size: 22px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
letter-spacing: -0.5px;
line-height: 1.2;
margin: 0 0 10px;
}
.pricing-feature__desc {
font-size: 14px;
line-height: 1.5;
color: var(--color-charcoal-body);
margin: 0 0 16px;
max-width: 480px;
}
.pricing-feature__price {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 14px;
}
.pricing-feature__price-label {
font-size: 10px;
font-weight: var(--weight-bold);
color: var(--color-charcoal-meta);
text-transform: uppercase;
letter-spacing: 1.6px;
}
.pricing-feature__price-amount {
font-size: 32px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
line-height: 1;
letter-spacing: -1px;
}
.pricing-feature__price-unit {
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-meta);
margin-top: 4px;
}
.pricing-feature__link {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--color-wood);
letter-spacing: 0.2px;
}
.pricing-feature__arrow {
display: inline-block;
margin-left: 4px;
transition: transform 240ms var(--ease-out);
}
@media (hover: hover) {
.pricing-feature:hover {
transform: translateY(-3px);
box-shadow:
0 14px 28px -8px rgba(11, 18, 21, 0.14),
0 4px 10px rgba(11, 18, 21, 0.06);
}
.pricing-feature:hover .pricing-feature__arrow {
transform: translateX(3px);
}
}
.pricing-feature:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 4px;
}
.pricing-feature__packages {
border-top: 1px solid rgba(161, 93, 37, 0.18);
padding-top: 20px;
}
.pricing-feature__packages-label {
font-size: 10px;
font-weight: var(--weight-bold);
color: var(--color-charcoal-meta);
text-transform: uppercase;
letter-spacing: 1.6px;
margin: 0 0 12px;
}
.pricing-feature__packages-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pricing-feature__package-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.pricing-feature__package-nights {
font-size: 14px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-body);
}
.pricing-feature__package-price {
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
letter-spacing: -0.4px;
}
/* Tablet+: feature card goes horizontal (main left, packages right) */
@media (min-width: 768px) {
.pricing-feature {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
padding: 36px 40px;
margin-top: 24px;
align-items: center;
}
.pricing-feature__main {
margin-bottom: 0;
}
.pricing-feature__name { font-size: 26px; }
.pricing-feature__desc { font-size: 15px; }
.pricing-feature__price-amount { font-size: 36px; }
.pricing-feature__packages {
border-top: none;
border-left: 1px solid rgba(161, 93, 37, 0.18);
padding-top: 0;
padding-left: 40px;
min-width: 220px;
}
.pricing-feature__package-item { gap: 20px; }
.pricing-feature__package-price { font-size: 22px; }
}
/* ---------- "No surprises" reassurance + CTA ---------- */
.pricing__cta {
text-align: center;
margin-top: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.pricing__cta-lead {
font-size: 13px;
font-weight: var(--weight-semibold);
color: var(--color-charcoal-meta);
font-style: italic;
margin: 0;
}
@media (min-width: 768px) {
.pricing__cta-lead { font-size: 14px; }
}
/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
.pricing {
padding: 64px var(--space-8) 80px;
}
.pricing__header {
margin-bottom: 56px;
}
.pricing__grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.pricing-card {
padding: 40px 24px 28px;
}
.pricing-card__badge {
width: 52px;
height: 52px;
top: -24px;
}
.pricing-card__name { font-size: 24px; letter-spacing: -0.6px; }
.pricing-card__price-amount { font-size: 40px; }
.pricing-card__price-amount--quote { font-size: 22px; }
.pricing__cta { margin-top: 48px; }
}
/* ---------- Desktop (≥1024px) — 4-up row ---------- */
@media (min-width: 1024px) {
.pricing {
padding: 96px var(--space-10);
}
.pricing__header {
margin-bottom: 64px;
}
.pricing__grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 22px;
}
.pricing-card {
padding: 44px 22px 28px;
}
.pricing-card__badge {
width: 56px;
height: 56px;
top: -28px;
}
.pricing-card__name { font-size: 26px; letter-spacing: -0.7px; }
.pricing-card__price-amount { font-size: 38px; }
.pricing-card__price-amount--quote { font-size: 22px; }
.pricing__cta { margin-top: 56px; }
}
/* ---------- Entrance animation ---------- */
.pricing__eyebrow,
.pricing__heading,
.pricing__intro,
.pricing-card,
.pricing-feature,
.pricing__cta {
opacity: 0;
}
.pricing.is-in-view .pricing__eyebrow { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.pricing.is-in-view .pricing__heading { animation: fadeUp 500ms var(--ease-out) 100ms both; }
.pricing.is-in-view .pricing__intro { animation: fadeUp 500ms var(--ease-out) 200ms both; }
.pricing.is-in-view .pricing-card:nth-child(1) { animation: fadeUp 600ms var(--ease-out) 400ms both; }
.pricing.is-in-view .pricing-card:nth-child(2) { animation: fadeUp 600ms var(--ease-out) 500ms both; }
.pricing.is-in-view .pricing-card:nth-child(3) { animation: fadeUp 600ms var(--ease-out) 600ms both; }
.pricing.is-in-view .pricing-card:nth-child(4) { animation: fadeUp 600ms var(--ease-out) 700ms both; }
.pricing.is-in-view .pricing-feature { animation: fadeUp 600ms var(--ease-out) 850ms both; }
.pricing.is-in-view .pricing__cta { animation: fadeUp 500ms var(--ease-out) 1000ms both; }
/* ============================================================
09 · MEET THE TEAM
============================================================
Two sub-sections: Management (3 photo cards) + Ownership
(2 names, no photos). Cream background.
Closes with Ashley press quote and tour CTA.
============================================================ */
.team {
position: relative;
background-color: var(--color-cream);
padding: 64px var(--space-5);
}
/* Ridge-line divider — charcoal rising down into the Final CTA below.
Lives at the bottom of .team (not top of .final-cta) because
.final-cta has overflow:hidden which would clip a translated-up
divider. bottom:1px + translateY(100%) overlaps the seam. */
.team__divider {
position: absolute;
bottom: 1px;
left: 0;
right: 0;
width: 100%;
height: 32px;
color: var(--color-charcoal);
display: block;
transform: translateY(100%);
pointer-events: none;
}
@media (min-width: 768px) {
.team__divider {
height: 50px;
}
}
.team__inner {
max-width: 1400px;
margin: 0 auto;
}
/* ---------- Heading ---------- */
.team__header {
text-align: center;
margin-bottom: 56px;
}
.team__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-3);
}
.team__heading {
font-size: var(--type-h2);
line-height: 1.15;
letter-spacing: -0.8px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
max-width: 720px;
margin: 0 auto var(--space-5);
}
/* Italic-amber accent on the brand keyword (sitewide pattern) */
.team__heading-accent {
font-style: italic;
color: var(--color-wood);
font-weight: var(--weight-bold);
}
.team__intro {
font-size: var(--type-body);
line-height: var(--type-body-lh);
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
max-width: 580px;
margin: 0 auto;
}
/* ---------- Sub-heading (Management / Ownership) ---------- */
.team__subheading {
font-size: 14px;
font-weight: var(--weight-semibold);
color: var(--color-charcoal-meta);
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
margin: 0 0 var(--space-10);
}
/* ---------- Management grid ---------- */
.team__managers {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
max-width: 1100px;
margin: 0 auto 72px;
}
/* ---------- Manager card ---------- */
.manager-card {
margin: 0;
/* No bg, no border, no shadow — editorial, not promotional */
}
.manager-card__image {
position: relative;
aspect-ratio: 1 / 1; /* mobile square */
width: 100%;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background-color: var(--color-stone);
margin-bottom: var(--space-5);
transition:
transform 300ms var(--ease-out),
box-shadow 300ms var(--ease-out);
}
.manager-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.manager-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-stone);
color: var(--color-charcoal-meta);
font-size: 36px;
font-weight: var(--weight-bold);
letter-spacing: 1px;
}
/* Credential chip — small amber pill surfacing each manager's
primary credential. Mirrors the .reviews__service-tag DNA so the
visual system reads consistently. */
.manager-card__chip {
display: inline-block;
padding: 4px 10px;
margin-bottom: 10px;
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-wood);
background-color: rgba(161, 93, 37, 0.10);
border: 1px solid rgba(161, 93, 37, 0.20);
border-radius: var(--radius-pill);
line-height: 1;
}
.manager-card__name {
font-size: 20px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
letter-spacing: -0.2px;
line-height: 1.2;
margin: 0 0 var(--space-1);
}
.manager-card__title {
font-size: 13px;
font-weight: var(--weight-semibold);
color: var(--color-wood);
letter-spacing: 0.3px;
text-transform: uppercase;
margin: 0 0 var(--space-3);
}
.manager-card__description {
font-size: 14px;
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
line-height: 1.55;
margin: 0;
}
/* ---------- Ownership ---------- */
.team__divider {
width: 60px;
height: 1px;
background-color: rgba(129, 136, 120, 0.3); /* sage 30% */
margin: 0 auto var(--space-5);
}
.team__owners {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
justify-items: center;
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
}
.owner-item {
display: flex;
flex-direction: column;
align-items: center;
}
.owner-item__name {
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--color-charcoal);
letter-spacing: -0.2px;
line-height: 1.2;
}
.owner-item__title {
font-size: 13px;
font-weight: var(--weight-regular);
color: var(--color-charcoal-meta);
margin: var(--space-1) 0 0;
}
/* ---------- Pull quote ---------- */
.team__quote {
max-width: 620px;
margin: 0 auto 48px;
padding: 0;
text-align: center;
border: 0;
}
.team__quote-mark {
display: block;
font-size: 56px;
line-height: 0.5;
color: rgba(129, 136, 120, 0.6); /* sage 60% */
font-family: Georgia, 'Times New Roman', serif;
margin-bottom: var(--space-5);
}
.team__quote-text {
font-size: 18px;
line-height: 1.5;
font-weight: var(--weight-medium);
color: var(--color-charcoal);
margin: 0;
}
.team__quote-cite {
display: block;
font-size: 14px;
font-weight: var(--weight-semibold);
color: var(--color-charcoal-body);
font-style: normal;
margin-top: var(--space-4);
}
/* ---------- Mini CTA ---------- */
.team__cta {
text-align: center;
display: flex;
justify-content: center;
}
.team__cta-link {
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: var(--weight-semibold);
color: var(--color-wood);
letter-spacing: 0.2px;
text-decoration: none;
padding: 12px 4px;
border-bottom: 2px solid transparent;
transition: border-color var(--speed-normal) var(--ease-out),
color var(--speed-normal) var(--ease-out);
}
.team__cta-arrow {
display: inline-block;
margin-left: 8px;
transition: transform var(--speed-normal) var(--ease-out);
}
@media (hover: hover) {
.team__cta-link:hover {
color: var(--color-wood-dark);
border-bottom-color: var(--color-wood-dark);
}
.team__cta-link:hover .team__cta-arrow {
transform: translateX(4px);
}
}
.team__cta-link:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 4px;
border-radius: 2px;
}
/* ---------- Manager image hover (pointer only) ---------- */
@media (hover: hover) {
.manager-card:hover .manager-card__image {
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
}
/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
.team {
padding: 72px var(--space-8);
}
.team__header {
margin-bottom: 72px;
}
.team__managers {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 88px;
}
.manager-card__image {
aspect-ratio: 4 / 5; /* portrait on tablet+ */
}
.team__owners {
gap: 48px;
}
}
/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
.team {
padding: 96px var(--space-10);
}
.team__header {
margin-bottom: 80px;
}
.team__managers {
gap: 32px;
margin-bottom: 96px;
}
.team__owners {
gap: 80px;
margin-bottom: 80px;
}
.team__quote-text {
font-size: var(--type-lead);
}
}
/* ---------- Entrance animation ---------- */
.team__eyebrow,
.team__heading,
.team__intro,
.team__subheading,
.manager-card,
.team__divider,
.team__owners,
.team__quote-mark,
.team__quote-text,
.team__quote-cite,
.team__cta-link {
opacity: 0;
}
.team.is-in-view .team__eyebrow { animation: fadeUp 500ms var(--ease-out) 0ms both; }
.team.is-in-view .team__heading { animation: fadeUp 500ms var(--ease-out) 100ms both; }
.team.is-in-view .team__intro { animation: fadeUp 500ms var(--ease-out) 200ms both; }
.team.is-in-view .team__subheading:nth-of-type(1) { animation: fadeUp 400ms var(--ease-out) 400ms both; }
.team.is-in-view .manager-card:nth-child(1) { animation: fadeUp 600ms var(--ease-out) 500ms both; }
.team.is-in-view .manager-card:nth-child(2) { animation: fadeUp 600ms var(--ease-out) 600ms both; }
.team.is-in-view .manager-card:nth-child(3) { animation: fadeUp 600ms var(--ease-out) 700ms both; }
.team.is-in-view .team__divider { animation: fadeUp 400ms var(--ease-out) 900ms both; }
.team.is-in-view .team__subheading:nth-of-type(2) { animation: fadeUp 400ms var(--ease-out) 1000ms both; }
.team.is-in-view .team__owners { animation: fadeUp 500ms var(--ease-out) 1100ms both; }
.team.is-in-view .team__quote-mark { animation: fadeUp 500ms var(--ease-out) 1300ms both; }
.team.is-in-view .team__quote-text { animation: fadeUp 500ms var(--ease-out) 1300ms both; }
.team.is-in-view .team__quote-cite { animation: fadeUp 400ms var(--ease-out) 1450ms both; }
.team.is-in-view .team__cta-link { animation: fadeUp 400ms var(--ease-out) 1550ms both; }
/* ============================================================
10 · FINAL CTA BAND
============================================================
Full-bleed charcoal. Bookend to hero.
Two CTAs: Book a Stay (modal) + Schedule a tour (#contact).
Subtle sage ridge-line decoration in bottom-right echoes hero.
CONTRAST NOTES:
- Cream on charcoal = 17.2:1 (AAA pass)
- Cream 85% on charcoal ≈ 12.6:1 (AAA pass)
- Wood on charcoal = 2.70:1 (FAIL) — eyebrow uses cream instead
============================================================ */
.final-cta {
position: relative;
background-color: var(--color-charcoal);
overflow: hidden;
padding: 72px var(--space-6) 64px;
}
/* Ridge-line decoration */
.final-cta__ridges {
position: absolute;
bottom: 0;
right: 0;
width: 65%;
height: 40%;
color: var(--color-sage);
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
/* Ghosted paw prints — cream on charcoal, diagonal "trail" pairing.
Placement avoids the bottom-right ridges and stays clear of the
centered content. Reads as footprints in the dark — bookends the
hero's paws at the top of the page. */
.final-cta__paws {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
color: var(--color-cream);
}
.final-cta__paw {
position: absolute;
display: block;
opacity: 0.06;
}
.final-cta__paw--tr {
top: -40px;
right: -30px;
width: 160px;
height: 160px;
transform: rotate(38deg);
}
.final-cta__paw--bl {
bottom: -30px;
left: -35px;
width: 150px;
height: 150px;
transform: rotate(-22deg);
}
@media (max-width: 767px) {
.final-cta__paw--tr {
top: -30px;
right: -40px;
width: 130px;
height: 130px;
}
.final-cta__paw--bl {
bottom: -20px;
left: -45px;
width: 130px;
height: 130px;
}
}
/* Inner content layer sits above ridges */
.final-cta__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Eyebrow — cream (wood fails AA on charcoal) */
.final-cta__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-cream);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-5);
opacity: 0.8;
}
.final-cta__heading {
font-size: clamp(32px, 4.5vw, 52px);
font-weight: var(--weight-bold);
line-height: 1.08;
letter-spacing: -1.2px;
color: var(--color-cream);
max-width: 760px;
margin: 0 0 var(--space-6);
}
/* Amber accent on the emotional beat. Matches the Services heading
accent (--color-wood) for brand consistency. Contrast on charcoal
is 3.69:1 — passes WCAG AA for large text (the heading is 32–52px
bold, well above the 18pt-bold / 24px large-text threshold). */
.final-cta__heading-accent {
color: var(--color-wood);
font-style: italic;
}
.final-cta__lead {
font-size: 17px;
line-height: 1.55;
font-weight: var(--weight-regular);
color: var(--color-cream);
opacity: 0.85;
max-width: 580px;
margin: 0 0 36px;
}
/* CTA group */
.final-cta__group {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
width: 100%;
max-width: 320px;
}
.final-cta__primary {
width: 100%;
justify-content: center;
}
/* Secondary: cream text link w/ arrow, underline on hover */
.final-cta__secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px var(--space-2);
font-size: 16px;
font-weight: var(--weight-semibold);
color: var(--color-cream);
letter-spacing: 0.2px;
text-decoration: none;
transition: color var(--speed-normal) var(--ease-out);
}
.final-cta__secondary-text {
border-bottom: 2px solid transparent;
transition: border-color var(--speed-normal) var(--ease-out);
padding-bottom: 2px;
}
.final-cta__secondary-arrow {
display: inline-block;
margin-left: var(--space-2);
transition: transform var(--speed-normal) var(--ease-out);
}
@media (hover: hover) {
.final-cta__secondary:hover .final-cta__secondary-text {
border-bottom-color: var(--color-cream);
}
.final-cta__secondary:hover .final-cta__secondary-arrow {
transform: translateX(4px);
}
}
.final-cta__secondary:focus-visible {
outline: 2px solid var(--color-cream);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.final-cta__primary:focus-visible {
outline: 2px solid var(--color-cream);
outline-offset: 4px;
}
/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
.final-cta {
padding: 80px var(--space-8) 72px;
}
.final-cta__ridges {
width: 55%;
height: 50%;
}
.final-cta__group {
flex-direction: row;
max-width: none;
width: auto;
gap: var(--space-6);
}
.final-cta__primary {
width: auto;
}
}
/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
.final-cta {
padding: 96px var(--space-10) 88px;
}
.final-cta__ridges {
width: 45%;
height: 55%;
}
.final-cta__lead {
font-size: var(--type-lead);
margin-bottom: var(--space-10);
}
}
/* ---------- Entrance animation ---------- */
.final-cta__eyebrow,
.final-cta__heading,
.final-cta__lead,
.final-cta__primary,
.final-cta__secondary,
.final-cta__ridges {
opacity: 0;
}
.final-cta.is-in-view .final-cta__eyebrow { animation: fadeUp 400ms var(--ease-out) 0ms both; }
.final-cta.is-in-view .final-cta__heading { animation: fadeUp 600ms var(--ease-out) 100ms both; }
.final-cta.is-in-view .final-cta__lead { animation: fadeUp 500ms var(--ease-out) 300ms both; }
.final-cta.is-in-view .final-cta__primary { animation: fadeUp 500ms var(--ease-out) 500ms both; }
.final-cta.is-in-view .final-cta__secondary { animation: fadeUp 500ms var(--ease-out) 600ms both; }
/* Ridges fade in to 12%, opacity-only (no translate) */
.final-cta.is-in-view .final-cta__ridges { animation: ridgesFadeIn 1000ms var(--ease-out) 400ms both; }
@keyframes ridgesFadeIn {
from { opacity: 0; }
to { opacity: 0.12; }
}
/* Preserve eyebrow's 0.8 opacity target after fadeUp finishes */
.final-cta.is-in-view .final-cta__eyebrow { animation: fadeUpEyebrow 400ms var(--ease-out) 0ms both; }
.final-cta.is-in-view .final-cta__lead { animation: fadeUpLead 500ms var(--ease-out) 300ms both; }
@keyframes fadeUpEyebrow {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 0.8; transform: translateY(0); }
}
@keyframes fadeUpLead {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 0.85; transform: translateY(0); }
}
/* ============================================================
FINAL CTA — Shared additions (used by boarding + daycare + future pages)
Trust pill above lead, urgency line above CTAs, phone + hours below.
All styled for charcoal background.
============================================================ */
/* Trust pill — repeats hero/reviews social proof at conversion moment */
.final-cta__trust-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-6);
padding: 8px 16px;
background-color: rgba(252, 249, 241, 0.08);
border: 1px solid rgba(252, 249, 241, 0.18);
border-radius: 999px;
text-decoration: none;
color: var(--color-cream);
font-size: 13px;
font-weight: var(--weight-semibold);
transition: background-color var(--speed-fast) var(--ease-out), transform var(--speed-fast) var(--ease-out);
}
.final-cta__trust-stars {
color: var(--color-wood);
letter-spacing: 1px;
font-size: 12px;
}
.final-cta__trust-score {
font-weight: var(--weight-bold);
}
.final-cta__trust-divider {
opacity: 0.4;
margin: 0 2px;
}
.final-cta__trust-source {
opacity: 0.85;
font-weight: var(--weight-medium);
font-size: 11px;
}
@media (hover: hover) {
.final-cta__trust-pill:hover {
background-color: rgba(252, 249, 241, 0.12);
transform: translateY(-1px);
}
}
/* Urgency line — soft, italic, just above the CTA group (boarding only currently) */
.final-cta__urgency {
font-size: 13px;
font-style: italic;
color: var(--color-cream);
opacity: 0.65;
margin: calc(var(--space-6) * -1) 0 var(--space-8);
}
@media (min-width: 1024px) {
.final-cta__urgency {
font-size: 14px;
}
}
/* Phone fallback + hours signal — quiet supporting block under CTAs */
.final-cta__support {
margin-top: var(--space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.final-cta__phone-line {
font-size: 14px;
color: var(--color-cream);
opacity: 0.85;
margin: 0;
}
.final-cta__phone {
color: var(--color-cream);
font-weight: var(--weight-bold);
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 4px;
}
.final-cta__phone:hover {
color: var(--color-wood);
}
.final-cta__hours {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-cream);
opacity: 0.55;
margin: 0;
}
@media (min-width: 1024px) {
.final-cta__phone-line {
font-size: 15px;
}
.final-cta__hours {
font-size: 13px;
}
}
/* ============================================================
11 · FOOTER
============================================================
Full-bleed charcoal. 4 columns desktop, 2×2 tablet,
stacked mobile. NAP data, hours for 3 zones, site nav,
social, legal bar with designmynt attribution.
CONTRAST NOTES (sRGB relative luminance):
- cream on charcoal = 17.2:1 (AAA)
- cream @ 85% on charcoal = ~14.6:1 (AAA)
- cream @ 70% on charcoal = ~8.4:1 (AAA)
- cream @ 60% on charcoal = ~6.0:1 (AA normal, AAA large)
- wood on charcoal = 2.70:1 — used only for eyebrow-style
column headings which are UPPERCASE 12px with +1.8px tracking;
treated as decorative label, not body copy. Each heading is
paired with full-cream content directly below so meaning is
never conveyed by the wood color alone.
============================================================ */
.footer {
position: relative;
background-color: var(--color-charcoal);
color: var(--color-cream);
padding: 56px var(--space-6);
text-align: center;
}
/* Thin sage seam separating from Section 10's charcoal band */
.footer__seam {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: rgba(129, 136, 120, 0.15);
}
.footer__inner {
max-width: 880px;
margin: 0 auto;
}
/* ---------- Brand block ---------- */
.footer__brand {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32px;
}
.footer__logo {
display: block;
height: 48px;
width: auto;
margin-bottom: 16px;
/* Render transparent-PNG logo in cream against the dark background. */
filter: brightness(0) invert(1);
}
.footer__tagline {
font-size: 15px;
font-weight: var(--weight-medium);
font-style: italic;
color: rgba(248, 245, 237, 0.75);
letter-spacing: -0.1px;
line-height: 1.5;
margin: 0 0 18px;
}
.footer__tagline em {
font-style: italic;
}
.footer__social {
display: flex;
justify-content: center;
gap: 12px;
}
.footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--color-cream);
border-radius: var(--radius-sm);
transition: color var(--speed-fast) var(--ease-out),
transform var(--speed-fast) var(--ease-out);
}
.footer__social-link svg {
display: block;
}
/* ---------- Visit Us block ---------- */
.footer__visit {
margin-bottom: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.footer__address {
font-style: normal;
margin: 0;
}
.footer__address-link {
display: inline-block;
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--color-cream);
line-height: 1.5;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--speed-fast) var(--ease-out),
border-color var(--speed-fast) var(--ease-out);
}
.footer__directions,
.footer__contact {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 14px;
margin: 0;
color: var(--color-cream);
}
.footer__directions-label {
font-size: 12px;
font-weight: var(--weight-semibold);
color: rgba(248, 245, 237, 0.6);
text-transform: uppercase;
letter-spacing: 1.4px;
}
.footer__directions-link,
.footer__contact-link {
font-weight: var(--weight-medium);
color: var(--color-cream);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(248, 245, 237, 0.3);
transition: color var(--speed-fast) var(--ease-out),
text-decoration-color var(--speed-fast) var(--ease-out);
}
.footer__sep {
color: rgba(248, 245, 237, 0.4);
font-weight: var(--weight-regular);
}
/* ---------- Hours block ---------- */
.footer__hours {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 24px;
margin-top: 6px;
padding-top: 16px;
border-top: 1px solid rgba(129, 136, 120, 0.18);
width: 100%;
max-width: 600px;
}
.footer__hours-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.footer__hours-label {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: 1.4px;
}
.footer__hours-time {
font-size: 13px;
font-weight: var(--weight-regular);
color: var(--color-cream);
opacity: 0.9;
}
/* ---------- Two-column nav grid (Services + Explore) ---------- */
.footer__nav-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 0;
border-top: 1px solid rgba(129, 136, 120, 0.18);
border-bottom: 1px solid rgba(129, 136, 120, 0.18);
margin-bottom: 24px;
}
.footer__col {
text-align: center;
}
.footer__heading {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: 1.8px;
margin: 0 0 16px;
}
.footer__nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* 2-column variant — services + explore split into 2 inline columns */
.footer__nav--two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 20px;
row-gap: 10px;
max-width: 320px;
margin: 0 auto;
}
.footer__nav-link {
display: inline-block;
font-size: 14px;
font-weight: var(--weight-regular);
color: var(--color-cream);
opacity: 0.85;
text-decoration: none;
transition: opacity var(--speed-fast) var(--ease-out),
color var(--speed-fast) var(--ease-out);
}
/* ---------- Hover states (pointer only) ---------- */
@media (hover: hover) {
.footer__address-link:hover {
color: var(--color-cream-warm);
border-bottom-color: var(--color-cream-warm);
}
.footer__directions-link:hover,
.footer__contact-link:hover {
color: var(--color-wood);
text-decoration-color: var(--color-wood);
}
.footer__nav-link:hover {
opacity: 1;
color: var(--color-wood);
}
.footer__social-link:hover {
color: var(--color-wood);
transform: scale(1.08);
}
.footer__attribution:hover .footer__wordmark-mynt {
color: #4FE6BF; /* brighter mint on hover */
}
}
/* ---------- Focus-visible (all interactive elements) ---------- */
.footer__address-link:focus-visible,
.footer__directions-link:focus-visible,
.footer__contact-link:focus-visible,
.footer__nav-link:focus-visible,
.footer__social-link:focus-visible,
.footer__attribution:focus-visible {
outline: 2px solid var(--color-cream);
outline-offset: 4px;
border-radius: 2px;
}
/* ---------- Legal bar ---------- */
.footer__legal {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.footer__copyright {
font-size: 12px;
font-weight: var(--weight-regular);
color: rgba(248, 245, 237, 0.6);
margin: 0;
line-height: 1.5;
}
.footer__legal-links {
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer__legal-link {
font-size: 12px;
font-weight: var(--weight-regular);
color: rgba(248, 245, 237, 0.6);
text-decoration: none;
transition: color var(--speed-fast) var(--ease-out);
}
.footer__legal-link:hover {
color: var(--color-cream);
}
.footer__attribution {
display: inline-flex;
align-items: baseline;
gap: 6px;
text-decoration: none;
}
.footer__attribution-label {
font-size: 12px;
font-weight: var(--weight-regular);
color: rgba(248, 245, 237, 0.6);
}
.footer__wordmark {
font-size: 13px;
font-weight: var(--weight-bold);
letter-spacing: -0.5px;
}
.footer__wordmark-design {
color: var(--color-cream);
}
.footer__wordmark-mynt {
/* Mint brand accent — promote to token if Designmynt colors are
added to tokens.css in a future pass. */
color: #2DD4A3;
transition: color var(--speed-fast) var(--ease-out);
}
/* ---------- Tablet (≥768px) ---------- */
@media (min-width: 768px) {
.footer {
padding: 64px var(--space-8);
}
.footer__brand {
margin-bottom: 36px;
}
.footer__visit {
margin-bottom: 40px;
}
/* Side-by-side nav columns at tablet+ */
.footer__nav-grid {
grid-template-columns: repeat(2, auto);
justify-content: center;
column-gap: 80px;
row-gap: 0;
padding: 36px 0;
}
.footer__legal {
flex-direction: row;
justify-content: center;
gap: 16px;
}
}
/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
.footer {
padding: 72px var(--space-10);
}
.footer__inner {
max-width: 960px;
}
.footer__nav-grid {
column-gap: 120px;
}
.footer__directions,
.footer__contact {
font-size: 15px;
}
.footer__hours-time { font-size: 14px; }
}
/* ============================================================
12 · STICKY CTA — MOBILE MEDALLION BAR
============================================================
Floating charcoal pill, mobile only (<768px).
Cream medallion pokes up above the bar's top edge like a
pressed-metal coin. Left: tap-to-call. Right: amber Book pill.
Visibility is managed in JS:
- hidden near page top (hero in view)
- hidden near Section 10 Final CTA (redundant with its conversion)
- hidden when the mobile menu is open (z-index handles this,
but is-visible is also force-removed)
============================================================ */
.sticky-cta {
/* Mobile only — spec said <768px */
display: none;
position: fixed;
bottom: 16px;
left: 12px;
right: 12px;
z-index: 85; /* below nav megas (90), below modal (500), below mobile overlay */
/* Bar chassis */
height: 64px;
padding: 0 6px;
background-color: var(--color-charcoal);
border-radius: var(--radius-pill);
box-shadow: 0 8px 24px rgba(11, 18, 21, 0.25),
0 2px 6px rgba(11, 18, 21, 0.15);
/* Layout: call | medallion (absolute) | book */
align-items: center;
justify-content: space-between;
/* Entrance */
opacity: 0;
transform: translateY(calc(100% + 24px));
transition: opacity var(--speed-normal) var(--ease-out),
transform var(--speed-normal) var(--ease-out);
pointer-events: none;
}
/* Only mount on mobile */
@media (max-width: 767px) {
.sticky-cta {
display: flex;
}
}
.sticky-cta[hidden] {
/* The [hidden] attribute is flipped off via JS once first scroll
past hero occurs. Keeping the attribute before that prevents a
flash of bar during initial paint. */
display: none !important;
}
.sticky-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ---------- Left — Tap to call ---------- */
.sticky-cta__call {
display: inline-flex;
align-items: center;
gap: 10px;
height: 52px;
padding: 0 12px 0 10px;
color: var(--color-cream);
text-decoration: none;
border-radius: var(--radius-pill);
transition: color var(--speed-fast) var(--ease-out),
opacity var(--speed-fast) var(--ease-out);
}
.sticky-cta__call-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(248, 245, 237, 0.08);
flex-shrink: 0;
line-height: 0;
}
.sticky-cta__call-icon svg {
display: block;
}
.sticky-cta__call-text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
.sticky-cta__call-eyebrow {
font-size: 9px;
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(248, 245, 237, 0.6);
margin-bottom: 3px;
}
.sticky-cta__call-label {
font-size: 14px;
font-weight: var(--weight-semibold);
color: var(--color-cream);
letter-spacing: -0.1px;
}
@media (hover: hover) {
.sticky-cta__call:hover {
color: var(--color-wood);
}
.sticky-cta__call:hover .sticky-cta__call-label {
color: var(--color-wood);
}
}
.sticky-cta__call:focus-visible,
.sticky-cta__book:focus-visible {
outline: 2px solid var(--color-cream);
outline-offset: 3px;
}
/* ---------- Center — Medallion ---------- */
.sticky-cta__medallion {
/* Centered inside the bar via absolute positioning.
The medallion sits ENTIRELY within the bar (v1 shipped with it
poking above the top edge, but the round circle didn't seat
into the flat pill top — removed to fix that hovering artifact).
*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--color-cream);
border: 1px solid rgba(129, 136, 120, 0.3); /* sage @ 30% */
box-shadow: 0 2px 6px rgba(11, 18, 21, 0.2),
inset 0 0 0 1px rgba(11, 18, 21, 0.04);
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none; /* decorative — not tappable */
}
.sticky-cta__medallion-logo {
display: block;
width: 36px;
height: auto;
/* Force PNG to dark so it reads on the cream medallion. Swap for
a real charcoal-logo asset if you want tint control. */
filter: brightness(0);
}
/* ---------- Right — Book pill ---------- */
.sticky-cta__book {
/* Override base .btn--book sizing for the compact sticky slot.
The base hard-shadow (4px 4px 0 0 charcoal) would be invisible
against the charcoal bar — swap to cream-tinted shadow. */
height: 48px;
padding: 0 20px;
font-size: 15px;
border-radius: var(--radius-pill);
box-shadow: 3px 3px 0 0 rgba(248, 245, 237, 0.15);
}
.sticky-cta__book .btn__text,
.sticky-cta__book .btn__arrow {
font-size: 15px;
}
@media (hover: hover) {
.sticky-cta__book:hover {
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 0 rgba(248, 245, 237, 0.22);
}
}
.sticky-cta__book:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 0 rgba(248, 245, 237, 0.15);
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.sticky-cta {
transition: opacity 1ms linear;
transform: none;
}
.sticky-cta.is-visible {
transform: none;
}
}
/* ============================================================
ACCORDION — shared across service pages
/ pattern with custom +/× glyph.
============================================================ */
.accordion-item {
border-bottom: 1px solid var(--color-charcoal-10);
}
.accordion-item__summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
font-size: var(--type-body);
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
user-select: none;
transition: color var(--speed-fast) var(--ease-out);
}
.accordion-item__summary::-webkit-details-marker { display: none; }
.accordion-item__summary::marker { display: none; content: ''; }
@media (hover: hover) {
.accordion-item__summary:hover { color: var(--color-wood); }
}
.accordion-item__summary:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.accordion-item__glyph {
font-size: 20px;
font-weight: var(--weight-regular);
color: var(--color-charcoal-meta);
flex-shrink: 0;
line-height: 1;
transition: transform var(--speed-normal) var(--ease-in-out),
color var(--speed-fast) var(--ease-out);
}
details[open] .accordion-item__glyph {
transform: rotate(45deg);
color: var(--color-wood);
}
.accordion-item__body {
padding: 0 0 var(--space-5);
}
.accordion-item__body p {
font-size: var(--type-body);
line-height: var(--type-body-lh);
color: var(--color-charcoal-body);
margin: 0 0 var(--space-3);
}
.accordion-item__body p:last-child { margin-bottom: 0; }
/* ============================================================
PAGE HERO — shared across boarding + daycare service pages
60/40 split: text left, image right (desktop + tablet).
Stacked mobile: text top, image below at 5:4 crop.
============================================================ */
.page-hero {
position: relative;
background-color: var(--color-cream);
background-image: url('../images/grain.svg');
background-size: 160px 160px;
background-blend-mode: multiply;
overflow: hidden;
padding: var(--space-12) var(--space-5);
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 40%, var(--color-cream-warm) 0%, transparent 70%);
opacity: 0.5;
pointer-events: none;
z-index: 1;
}
.page-hero__paws {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.page-hero__paw {
position: absolute;
color: var(--color-sage);
opacity: 0.07;
display: block;
width: 150px;
height: 150px;
}
.page-hero__paw--tl {
top: -40px;
left: -30px;
width: 180px;
height: 180px;
transform: rotate(-18deg);
}
.page-hero__paw--bl {
bottom: 40px;
left: -40px;
width: 150px;
height: 150px;
transform: rotate(24deg);
}
.page-hero__paw--tr {
top: 50px;
right: -50px;
width: 150px;
height: 150px;
transform: rotate(-15deg);
}
@media (max-width: 767px) {
.page-hero__paw--tl {
top: -30px;
left: -40px;
width: 140px;
height: 140px;
}
.page-hero__paw--bl {
top: 42%;
right: -40px;
bottom: auto;
left: auto;
width: 150px;
height: 150px;
transform: rotate(-28deg);
opacity: 0.07;
}
.page-hero__paw--tr {
display: none;
}
}
.page-hero__ridges {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 60%;
color: rgba(129, 136, 120, 0.08);
pointer-events: none;
z-index: 2;
}
@media (max-width: 767px) {
.page-hero__ridges {
width: 70%;
height: 40%;
}
}
.page-hero__inner {
position: relative;
z-index: 3;
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.page-hero__eyebrow {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 var(--space-4);
}
.page-hero__heading {
font-size: clamp(40px, 8.5vw, 56px);
font-weight: var(--weight-bold);
line-height: 1.05;
letter-spacing: var(--type-h1-display-ls);
color: var(--color-charcoal);
margin: 0 0 var(--space-5);
}
.page-hero__heading-accent {
color: var(--color-wood);
font-style: italic;
}
.page-hero__heading-line {
display: block;
white-space: nowrap;
}
@media (max-width: 767px) {
.page-hero__heading-line {
white-space: normal;
}
}
.page-hero__subhead {
font-size: var(--type-lead);
font-weight: var(--weight-regular);
line-height: var(--type-lead-lh);
color: var(--color-charcoal-body);
max-width: 540px;
margin: 0 0 var(--space-6);
}
.page-hero__bullets {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6);
display: flex;
flex-direction: column;
gap: 10px;
}
.page-hero__bullet {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: 16px;
line-height: 1.5;
}
.page-hero__bullet-dot {
color: var(--color-wood);
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 1.5em;
}
.page-hero__bullet-name {
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
}
.page-hero__bullet-desc {
font-weight: var(--weight-regular);
color: var(--color-charcoal-body);
}
.page-hero__review {
border-left: 3px solid var(--color-sage);
padding: 4px 0 4px var(--space-5);
margin: 0 0 var(--space-8);
max-width: 540px;
}
.page-hero__review-label {
font-size: var(--type-eyebrow);
font-weight: var(--weight-semibold);
color: var(--color-wood);
text-transform: uppercase;
letter-spacing: var(--type-eyebrow-ls);
margin: 0 0 6px;
}
.page-hero__review-quote {
font-size: 15px;
font-style: italic;
line-height: 1.55;
color: var(--color-charcoal-body);
margin: 0 0 6px;
}
.page-hero__review-author {
font-size: 13px;
font-weight: var(--weight-medium);
color: var(--color-charcoal-meta);
margin: 0;
}
.page-hero__ctas {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
}
.page-hero__cta-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--type-button);
font-weight: var(--weight-semibold);
color: var(--color-charcoal);
text-decoration: none;
min-height: 44px;
}
.page-hero__cta-arrow {
color: var(--color-wood);
display: inline-block;
transition: transform var(--speed-fast) var(--ease-out);
}
@media (hover: hover) {
.page-hero__cta-secondary:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.page-hero__cta-secondary:hover .page-hero__cta-arrow {
transform: translateX(4px);
}
}
.page-hero__cta-secondary:focus-visible {
outline: 2px solid var(--color-wood);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.page-hero__figure {
width: 100%;
aspect-ratio: 5 / 4;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
flex-shrink: 0;
}
@media (min-width: 768px) {
.page-hero {
padding: var(--space-16) var(--space-8);
}
.page-hero__inner {
flex-direction: row;
align-items: center;
gap: var(--space-12);
}
.page-hero__text {
flex: 0 0 60%;
min-width: 0;
}
.page-hero__figure {
flex: 1;
aspect-ratio: unset;
align-self: stretch;
min-height: 380px;
}
.page-hero__ctas {
flex-direction: row;
align-items: center;
justify-content: center;
}
}
@media (min-width: 1024px) {
.page-hero {
padding: var(--space-20) var(--space-10);
}
.page-hero__inner {
gap: var(--space-16);
min-height: 420px;
}
.page-hero__heading {
font-size: clamp(60px, 5.4vw, 80px);
max-width: 18ch;
}
}
@media (min-width: 1400px) {
.page-hero__inner {
padding: 0;
}
}
/* ============================================================
SVC HERO — shared across service pages (boarding, daycare,
grooming, training). Mirrors homepage hero split exactly:
.svc-inner = .hero__inner
.svc-text = .hero__text
.svc-visual = .hero__visual
.svc-figure = .hero__figure (in split context)
Mobile: stacked, 16:9 landscape image with rounded corners.
1024px+: text left (52%), portrait image right.
============================================================ */
.svc-inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
@media (min-width: 768px) {
.svc-inner {
gap: var(--space-12);
}
}
@media (min-width: 1024px) {
.svc-inner {
flex-direction: row;
align-items: stretch;
gap: var(--space-16);
}
}
.svc-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media (min-width: 1024px) {
.svc-text {
flex: 0 0 52%;
justify-content: center;
}
}
.svc-visual {
width: 100%;
}
@media (min-width: 1024px) {
.svc-visual {
flex: 1;
min-height: 500px;
/* Reset negative margins from mobile full-bleed */
margin-left: 0;
margin-right: 0;
width: 100%;
}
.svc-visual .svc-figure {
height: 100%;
aspect-ratio: unset;
max-height: none;
border-radius: var(--radius-lg);
}
}
/* Mobile: 16:9 landscape, full-bleed — no rounded corners, breaks out of hero padding */
.svc-visual {
margin-left: calc(-1 * var(--space-5));
margin-right: calc(-1 * var(--space-5));
width: calc(100% + 2 * var(--space-5));
}
@media (min-width: 640px) {
.svc-visual {
margin-left: calc(-1 * var(--space-8));
margin-right: calc(-1 * var(--space-8));
width: calc(100% + 2 * var(--space-8));
}
}
.svc-figure {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
background-color: var(--color-stone);
margin: 0;
}
.svc-figure picture {
display: block;
width: 100%;
height: 100%;
}
.svc-figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}