/* ==========================================================================
K7 HOMECARE — GLOBAL BASE
========================================================================== */
:root {
/* Brand colors */
--color-primary-teal: #0D9488;
--color-primary-teal-dark: #0B7C71;
--color-secondary-blue: #2563EB;
--color-accent-green: #22C55E;
--color-white: #FFFFFF;
--color-mint: #F0FDFA;
--color-navy: #1E293B;
--color-text-gray: #475569;
/* Type */
--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Layout */
--container-max: 1200px;
--space-section: clamp(3rem, 6vw, 6rem);
--radius-lg: 24px;
--radius-md: 14px;
--radius-pill: 999px;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-base);
color: var(--color-navy);
background: var(--color-white);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
}
p {
margin: 0;
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-secondary-blue);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
z-index: 100;
background: var(--color-navy);
color: var(--color-white);
padding: 0.65rem 1rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 600;
transition: top 0.2s var(--ease-out);
}
.skip-link:focus-visible {
top: 1rem;
}
/* ==========================================================================
HEADER / NAVIGATION
========================================================================== */
.site-header {
position: relative;
z-index: 50;
}
/* ---- Main navigation ---- */
.main-nav-bar {
position: sticky;
top: 0;
background: var(--color-white);
border-bottom: 1px solid rgba(30, 41, 59, 0.08);
transition: box-shadow 0.25s var(--ease-out);
}
.main-nav-bar.is-scrolled {
box-shadow: 0 8px 24px -16px rgba(30, 41, 59, 0.35);
}
/* HEADER SPACING & ALIGNMENT */
.main-nav {
position: relative;
max-width: 1300px;
margin: 0 auto;
padding-block: 0.75rem;
padding-inline: clamp(1.5rem, 3vw, 2.75rem);
display: flex;
align-items: center;
gap: 3rem;
}
/* Locks the bar to a steady 78-84px on desktop regardless of which logo
state (image vs. text fallback) is showing, while align-items keeps
every child perfectly centered within that height. */
@media (min-width: 1081px) {
.main-nav {
min-height: 80px;
}
}
.site-logo {
display: inline-flex;
align-items: center;
margin-right: auto;
}
.site-logo-img {
height: 52px;
width: auto;
max-width: 200px;
object-fit: contain;
}
.site-logo-img.is-error {
display: none;
}
.site-logo-fallback {
display: none;
align-items: center;
gap: 0.65rem;
}
.site-logo.has-error .site-logo-fallback {
display: inline-flex;
}
.site-logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--color-primary-teal);
color: var(--color-white);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.02em;
flex-shrink: 0;
}
.site-logo-fallback-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.site-logo-fallback-text strong {
font-size: 1.05rem;
color: var(--color-navy);
font-weight: 700;
}
.site-logo-fallback-text small {
font-size: 0.72rem;
color: var(--color-primary-teal);
font-weight: 600;
}
/*.site-logo {*/
/* display: inline-flex;*/
/* align-items: center;*/
/* margin-right: auto;*/
/* flex-shrink: 0;*/
/*}*/
/*.site-logo-img {*/
/* height: 68px;*/
/* width: auto;*/
/* max-width: 240px;*/
/* object-fit: contain;*/
/* display: block;*/
/*}*/
/*.site-logo-img.is-error {*/
/* display: none;*/
/*}*/
/*.site-logo-fallback {*/
/* display: none;*/
/* align-items: center;*/
/* gap: 0.65rem;*/
/*}*/
/*.site-logo.has-error .site-logo-fallback {*/
/* display: inline-flex;*/
/*}*/
/*.site-logo-mark {*/
/* display: inline-flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/* width: 40px;*/
/* height: 40px;*/
/* border-radius: var(--radius-md);*/
/* background: var(--color-primary-teal);*/
/* color: var(--color-white);*/
/* font-size: 0.95rem;*/
/* font-weight: 700;*/
/* letter-spacing: -0.02em;*/
/* flex-shrink: 0;*/
/*}*/
/*.site-logo-fallback-text {*/
/* display: flex;*/
/* flex-direction: column;*/
/* line-height: 1.25;*/
/*}*/
/*.site-logo-fallback-text strong {*/
/* font-size: 1.05rem;*/
/* color: var(--color-navy);*/
/* font-weight: 700;*/
/*}*/
/*.site-logo-fallback-text small {*/
/* font-size: 0.72rem;*/
/* color: var(--color-primary-teal);*/
/* font-weight: 600;*/
/*}*/
.nav-menu {
display: flex;
align-items: center;
gap: 2.5rem;
margin-left: auto;
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.05rem;
background: none;
border: none;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-navy);
cursor: pointer;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: var(--color-primary-teal);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
transform: scaleX(1);
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--color-primary-teal-dark);
}
/* ---- Services dropdown ---- */
.nav-dropdown {
position: relative;
}
.nav-dropdown-icon {
width: 10px;
height: 10px;
transition: transform 0.2s var(--ease-out);
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-icon {
transform: rotate(180deg);
}
.nav-submenu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.75rem;
min-width: 240px;
max-height: min(70vh, 520px);
overflow-y: auto;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.08);
border-radius: var(--radius-md);
box-shadow: 0 20px 40px -18px rgba(30, 41, 59, 0.3);
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}
.nav-dropdown.is-open .nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-submenu li a {
display: block;
padding: 0.6rem 0.75rem;
border-radius: calc(var(--radius-md) - 6px);
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-gray);
transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nav-submenu li a:hover,
.nav-submenu li a:focus-visible {
background: var(--color-mint);
color: var(--color-primary-teal-dark);
}
/* "All Services" — set apart at the top of the now-longer 10-service
list: bolder, teal-accented, with a hairline divider before the
individual services begin. */
.nav-submenu li:first-child {
margin-bottom: 0.35rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba(30, 41, 59, 0.08);
}
.nav-submenu li a.nav-submenu-all {
font-weight: 700;
color: var(--color-primary-teal-dark);
}
/* Current-page cue inside the submenu (e.g. "All Services" while on
services.html) — a soft mint fill, matching the same is-active
convention used for top-level nav-links. */
.nav-submenu li a.is-active {
background: var(--color-mint);
}
/* ---- Nav CTAs ---- */
.nav-cta-group {
display: flex;
align-items: center;
gap: 1.375rem;
}
.nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.6rem 1.15rem;
border-radius: var(--radius-md);
border: 1.5px solid transparent;
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
filter 0.2s var(--ease-out);
}
.nav-btn-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.nav-btn-outline {
background: var(--color-white);
border-color: var(--color-primary-teal);
color: var(--color-primary-teal-dark);
}
.nav-btn-outline:hover,
.nav-btn-outline:focus-visible {
background: var(--color-mint);
transform: translateY(-1px);
}
/* Resting state uses the darker teal shade (not the brighter #0D9488) so
white text on a compact 0.9rem button clears WCAG contrast; hover/focus
only darken further via filter, never swap to the lower-contrast teal. */
.nav-btn-primary {
background: var(--color-primary-teal-dark);
border-color: var(--color-primary-teal-dark);
color: var(--color-white);
box-shadow: 0 6px 16px -8px rgba(13, 148, 136, 0.5);
}
.nav-btn-primary:hover,
.nav-btn-primary:focus-visible {
filter: brightness(0.94);
transform: translateY(-1px);
box-shadow: 0 10px 20px -8px rgba(13, 148, 136, 0.55);
}
/* ---- Mobile toggle ---- */
.nav-toggle {
display: none;
position: relative;
z-index: 61;
width: 40px;
height: 40px;
flex-shrink: 0;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
background: none;
border: 1.5px solid rgba(30, 41, 59, 0.12);
border-radius: var(--radius-md);
cursor: pointer;
}
.nav-toggle-bar {
width: 18px;
height: 2px;
background: var(--color-navy);
border-radius: 2px;
transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ---- Mobile navigation ---- */
@media (max-width: 1080px) {
.nav-toggle {
display: inline-flex;
}
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 60;
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: calc(100vh - 100%);
overflow-y: auto;
background: var(--color-white);
border-top: 1px solid rgba(30, 41, 59, 0.08);
box-shadow: 0 24px 40px -20px rgba(30, 41, 59, 0.3);
padding: 0.5rem 1.25rem 1.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.nav-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-links {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav-link {
width: 100%;
padding: 0.9rem 0.1rem;
justify-content: space-between;
border-bottom: 1px solid rgba(30, 41, 59, 0.08);
}
.nav-link::after {
display: none;
}
.nav-link.is-active {
color: var(--color-primary-teal-dark);
}
.nav-dropdown-toggle {
width: 100%;
}
.nav-submenu {
position: static;
margin-top: 0;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
display: none;
padding: 0 0 0.5rem 0.75rem;
transition: none;
}
.nav-dropdown.is-open .nav-submenu {
display: block;
}
.nav-cta-group {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-top: 1.25rem;
margin-left: 0;
}
.nav-btn {
width: 100%;
padding: 0.9rem 1.3rem;
font-size: 1rem;
}
}
@media (max-width: 640px) {
.main-nav {
padding: 0.75rem 1.25rem;
}
.site-logo-img {
height: 40px;
}
.site-logo-fallback-text small {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.main-nav-bar,
.nav-link::after,
.nav-dropdown-icon,
.nav-submenu,
.nav-menu,
.nav-toggle-bar {
transition: none !important;
}
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
}
/* Subtle medical dot pattern layered under the mint glow — decorative
only, low enough opacity to never compete with the headline. */
.hero-backdrop {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(720px 480px at 82% 12%, var(--color-mint), transparent 60%),
var(--color-white);
}
.hero-backdrop::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(circle at 78% 15%, black, transparent 55%);
mask-image: radial-gradient(circle at 78% 15%, black, transparent 55%);
}
.hero-container {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: clamp(2.5rem, 5vw, 4.5rem);
}
/* ---- Content column ---- */
/* Hero Left Content */
.hero-content h1 {
font-size: clamp(3rem, 4.5vw, 4.4rem);
line-height: 1.05;
}
.hero-content .hero-subtitle {
font-size: 1.2rem;
line-height: 1.65;
}
.hero-content .hero-tagline {
font-size: 1.15rem;
}
/* Mobile */
@media (max-width: 768px) {
.hero-content h1 {
font-size: clamp(2.4rem, 9vw, 3.2rem);
line-height: 1.08;
}
.hero-content .hero-subtitle {
font-size: 1rem;
}
}
.hero-content {
max-width: 620px;
}
.hero-title-highlight {
color: var(--color-primary-teal);
font-size: clamp(3rem, 4.5vw, 4.4rem);
line-height: 1.05;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.hero-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
/* Scaled up ~9% from the previous 2.25rem/4.2vw/3.4rem clamp for
stronger visual impact; line-height tightened slightly (1.12 → 1.08)
to stay balanced at the larger size. */
.hero-title {
margin-top: 1.25rem;
font-size: clamp(2.45rem, 4.6vw, 3.7rem);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
.hero-tagline {
margin-top: 0.85rem;
font-size: 1.15rem;
font-weight: 600;
color: var(--color-primary-teal);
}
/* ~19px on desktop, per spec, with a touch more line-height for
comfortable reading at the larger size. */
.hero-subtext {
margin-top: 1rem;
font-size: 1.1875rem;
line-height: 1.7;
color: var(--color-text-gray);
max-width: 52ch;
}
.hero-keywords {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.hero-keywords li {
padding: 0.4rem 0.85rem;
border-radius: var(--radius-pill);
background: var(--color-white);
border: 1px solid #E2E8F0;
color: var(--color-text-gray);
font-size: 0.82rem;
font-weight: 500;
}
.hero-cta-group {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* Compact size per spec: min-height (not a fixed height) so the box
always lands at 44px even though padding+font-size alone total less
— content simply centres within that floor via align-items: center.
width stays auto (no forced stretch); the mobile block below only
goes full-width because the two CTAs stack there, same as elsewhere
on the page.
Note on colour: at 15px the text no longer qualifies as WCAG
"large text" (needs ~18.7px bold), so .btn-primary's resting
background was moved from the brighter --color-primary-teal to
--color-primary-teal-dark to keep white-on-teal at AA contrast —
hover now darkens further via filter rather than swapping to the
(lower-contrast) bright teal. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: auto;
min-height: 44px;
padding: 10px 18px;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
background-color 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}
.btn-primary {
background: var(--color-primary-teal-dark);
color: var(--color-white);
box-shadow: 0 8px 20px -8px rgba(13, 148, 136, 0.55);
}
.btn-primary:hover {
filter: brightness(0.92);
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(13, 148, 136, 0.6);
}
.btn-secondary {
background: var(--color-white);
color: var(--color-navy);
border: 1.5px solid #E2E8F0;
}
.btn-secondary:hover {
border-color: var(--color-primary-teal);
color: var(--color-primary-teal-dark);
transform: translateY(-2px);
}
.btn-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.btn-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.btn-primary:hover .btn-arrow,
.btn-primary:focus-visible .btn-arrow {
transform: translateX(4px);
}
/* HERO TRUST POINTS */
.hero-trust-row {
margin-top: 2.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1.4rem;
color: var(--color-text-gray);
font-size: 0.88rem;
font-weight: 500;
}
.hero-trust-row li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.trust-icon {
width: 16px;
height: 16px;
color: var(--color-accent-green);
flex-shrink: 0;
}
/* ---- Visual column ---- */
/* HERO IMAGE EXPERIENCE */
.hero-visual {
position: relative;
justify-self: center;
width: 100%;
max-width: 460px;
}
/* Soft ambient teal/mint halo behind the frame. A plain radial-gradient
(no blur filter) keeps this cheap to paint; .hero already has
overflow: hidden so it can never cause horizontal scroll. */
.hero-image-glow {
position: absolute;
inset: -12% -10%;
z-index: -1;
border-radius: var(--radius-lg);
background:
radial-gradient(60% 55% at 30% 20%, rgba(13, 148, 136, 0.28), transparent 70%),
radial-gradient(55% 50% at 75% 80%, rgba(240, 253, 250, 0.9), transparent 70%);
pointer-events: none;
}
/* A second, fainter medical dot pattern sitting behind the whole
composition (glow + frame + badges), offset from the backdrop's own
pattern so the two never simply double up. */
.hero-pattern {
position: absolute;
inset: -18% -14%;
z-index: -2;
background-image: radial-gradient(rgba(37, 99, 235, 0.1) 1.5px, transparent 1.5px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 68%);
mask-image: radial-gradient(circle at 50% 50%, black, transparent 68%);
pointer-events: none;
}
/* Thin decorative "pulse" line threading across the visual column,
evoking a heart-rate trace without being a literal medical chart. */
.hero-pulse-line {
position: absolute;
left: -6%;
right: -6%;
top: 6%;
height: 34px;
color: var(--color-primary-teal);
opacity: 0.35;
z-index: 1;
pointer-events: none;
}
/* Bottom-right, deliberately clear of the overhanging primary badge
(bottom-left) and the inset secondary badge (top-right). */
.hero-location-label {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 1;
display: inline-flex;
align-items: center;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-pill);
background: rgba(30, 41, 59, 0.55);
color: var(--color-white);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-image-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-mint);
box-shadow: 0 30px 60px -25px rgba(30, 41, 59, 0.35);
}
/* HERO IMAGE — TOP BORDER FIX */
/* The frame previously had a 1px inset ring (::after with an inset
box-shadow) tracing all four edges. Against the hero's light backdrop
its top edge read as a stray line sitting above the image, so the ring
is removed. The frame's own rounded corners, size, position, aspect
ratio and outer drop shadow (both declared on .hero-image-frame above)
are untouched. */
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s var(--ease-out), transform 0.5s var(--ease-out);
}
.hero-image.is-loaded {
opacity: 1;
}
.hero-image.is-error {
display: none;
}
.hero-image-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.hero-image-frame.has-error .hero-image-fallback {
display: flex;
}
.hero-image-fallback svg {
width: 30%;
height: 30%;
}
/* Frosted "glass" card: translucent white + backdrop-filter over the
image/glow, with a hairline border to stay legible in both directions. */
.hero-badge-card {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.7rem;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-md);
padding: 0.9rem 1.15rem;
box-shadow: 0 20px 40px -18px rgba(30, 41, 59, 0.3);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.hero-badge-card--primary {
left: -1.25rem;
bottom: -1.25rem;
}
/* Second, quieter indicator: smaller, lighter shadow, inset within the
frame's own bounds (rather than overhanging it) so it never risks
spilling past the viewport edge on narrow screens. */
.hero-badge-card--secondary {
top: 1rem;
right: 1rem;
padding: 0.55rem 0.85rem;
gap: 0.5rem;
box-shadow: 0 12px 24px -16px rgba(30, 41, 59, 0.25);
}
.hero-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.hero-badge-card--secondary .hero-badge-icon {
width: 26px;
height: 26px;
color: var(--color-accent-green);
}
.hero-badge-icon svg {
width: 20px;
height: 20px;
}
.hero-badge-card--secondary .hero-badge-icon svg {
width: 14px;
height: 14px;
}
.hero-badge-text {
display: flex;
flex-direction: column;
font-size: 0.8rem;
color: var(--color-text-gray);
line-height: 1.3;
}
.hero-badge-text strong {
font-size: 1rem;
color: var(--color-navy);
}
.hero-badge-card--secondary .hero-badge-text {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-navy);
}
/* ---- Entrance animation ---- */
@media (prefers-reduced-motion: no-preference) {
.hero-eyebrow,
.hero-title,
.hero-tagline,
.hero-subtext,
.hero-keywords,
.hero-cta-group,
.hero-trust-row {
opacity: 0;
animation: hero-rise 0.7s var(--ease-out) forwards;
}
.hero-eyebrow { animation-delay: 0.05s; }
.hero-title { animation-delay: 0.15s; }
.hero-tagline { animation-delay: 0.25s; }
.hero-subtext { animation-delay: 0.32s; }
.hero-keywords { animation-delay: 0.4s; }
.hero-cta-group { animation-delay: 0.48s; }
.hero-trust-row { animation-delay: 0.55s; }
.hero-visual {
opacity: 0;
animation: hero-fade-in 0.9s var(--ease-out) forwards;
animation-delay: 0.3s;
}
}
/* HERO MOTION & ACCESSIBILITY */
/* The badges are static now — only the entrance fade above and the
hover zoom below remain; no continuous/infinite motion runs in this
section at all. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.hero-image-frame:hover .hero-image {
transform: scale(1.045);
}
}
@keyframes hero-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hero-fade-in {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* HERO MOBILE RESPONSIVE */
@media (max-width: 960px) {
.hero-container {
grid-template-columns: 1fr;
}
.hero-content {
max-width: none;
}
/* Text first, image second: .hero-content (order 1) is the first thing
in the DOM already, so this keeps that source order and only
reorders visually if it's ever changed. */
.hero-visual {
max-width: 420px;
margin: 0 auto;
order: 2;
}
.hero-content {
order: 1;
}
}
@media (max-width: 560px) {
.hero {
padding: 2.75rem 1.25rem;
}
/* Tighter mobile heading rhythm — scaled proportionally down from the
larger desktop sizes above so nothing wraps awkwardly or overflows
on a narrow viewport. */
.hero-title {
margin-top: 1rem;
font-size: clamp(2.15rem, 8.5vw, 2.7rem);
}
.hero-tagline {
margin-top: 0.65rem;
}
.hero-subtext {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.6;
}
/* True 100% width on phones — the 420px cap above only matters on
tablets, where a fully edge-to-edge image would look oversized. */
.hero-visual {
max-width: 100%;
}
.hero-cta-group {
flex-direction: column;
align-items: stretch;
}
/* Slightly more compact than the desktop 10px/18px/15px, still full
width since the two CTAs stack in a column on mobile (not a "make
it small" contradiction — the compactness is in the padding/font,
not the width). min-height stays 44px, matching the base rule's
touch-target floor; colour contrast is unaffected by this size
change since it was already fixed on .btn-primary itself. */
.btn {
width: 100%;
padding: 9px 16px;
font-size: 14px;
min-height: 44px;
}
/* Only the overhanging primary badge needs repositioning to stay
on-screen; the secondary badge is already inset within the frame
and never risks overflowing. */
.hero-badge-card--primary {
left: 0.75rem;
bottom: -1rem;
padding: 0.75rem 1rem;
}
.hero-badge-card--secondary {
top: 0.75rem;
right: 0.75rem;
padding: 0.45rem 0.7rem;
}
.hero-location-label {
right: 0.75rem;
bottom: 0.75rem;
padding: 0.32rem 0.6rem;
font-size: 0.68rem;
}
.hero-pulse-line {
top: 3%;
height: 26px;
opacity: 0.28;
}
/* Trust points: intelligent 2x2 grid, no horizontal overflow possible */
.hero-trust-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 1rem;
}
.hero-trust-row li {
min-width: 0;
}
}
/* ==========================================================================
TRUST & NUMBERS SECTION
========================================================================== */
/* Mint background against Hero's white — clear separation via colour
alone, medium (not oversized) padding so the page keeps moving. */
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
background: #F0FDFA;
color: #0D9488;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
line-height: 1;
margin-bottom: 18px;
}
.section-eyebrow span {
width: 8px;
height: 8px;
background: #22C55E;
border-radius: 50%;
flex-shrink: 0;
}
.trust-numbers {
position: relative;
overflow: hidden;
background: var(--color-mint);
padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
}
/* TRUST & NUMBERS BACKGROUND — sweeping soft curve strokes plus a fine
micro-dot field, faded top/bottom via a mask so it never reads as a
hard-edged tile. Distinct from every other section: Hero uses a
masked dot-mesh only, Journey a straight line grid, Services a wide
pulse line, Difference a tiled medical cross. */
.trust-numbers-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(rgba(13, 148, 136, 0.14) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='170' viewBox='0 0 320 170'%3E%3Cpath d='M-20 40 C 60 8, 110 92, 190 58 S 320 18, 360 58' stroke='%230D9488' stroke-width='1.4' fill='none' opacity='0.09'/%3E%3Cpath d='M-20 140 C 60 108, 130 168, 210 128 S 340 96, 380 136' stroke='%232563EB' stroke-width='1.4' fill='none' opacity='0.07'/%3E%3C/svg%3E");
background-size: 28px 28px, 320px 170px;
background-repeat: repeat, repeat;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}
.trust-numbers-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
}
/* Mobile: drop the heavier curve-stroke layer, keep only the faint dot
field, per "reduce decorative background elements on mobile". */
@media (max-width: 480px) {
.trust-numbers-bg {
background-image: radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1px);
background-size: 24px 24px;
}
}
.trust-numbers-intro {
max-width: 640px;
margin: 0 auto 2.75rem;
text-align: center;
}
.trust-numbers-heading {
font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.trust-numbers-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text-gray);
}
/* ---- Strip ---- */
.trust-numbers-strip {
position: relative;
}
/* Static dashed "pulse" line behind the cards — no animation, just a
visual thread. It sits behind the opaque cards (z-index 0 vs. the
grid's z-index 1 below), so it only ever shows in the gaps between
them, reading as a connector rather than a line crossing the content.
Desktop-only: with four cards on one row this reads as a single
connecting thread; on the 2x2 mobile grid a horizontal line would
cut awkwardly across unrelated cards, so it's hidden there instead. */
.trust-numbers-line {
display: none;
}
@media (min-width: 761px) {
.trust-numbers-line {
display: block;
position: absolute;
left: 8%;
right: 8%;
top: 3.25rem;
height: 0;
border-top: 2px dashed rgba(13, 148, 136, 0.3);
z-index: 0;
}
}
.trust-numbers-grid {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
}
.trust-metric {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.07);
border-radius: 20px;
box-shadow: 0 14px 30px -24px rgba(30, 41, 59, 0.18);
padding: 1.75rem 1.25rem;
}
.trust-metric-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-mint);
color: var(--color-text-gray);
}
.trust-metric-icon svg {
width: 22px;
height: 22px;
}
.trust-metric-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.1;
}
.trust-metric-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-gray);
line-height: 1.35;
}
/* ---- Interaction ---- */
.trust-metric {
transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.trust-metric-icon {
transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.trust-metric:hover,
.trust-metric:focus-within {
border-color: var(--color-primary-teal);
box-shadow: 0 22px 42px -26px rgba(13, 148, 136, 0.32);
}
.trust-metric:hover .trust-metric-icon,
.trust-metric:focus-within .trust-metric-icon {
background: var(--color-primary-teal);
color: var(--color-white);
}
/* The lift is the only translation here, so — same pattern used
elsewhere on the page — it's the one part scoped behind motion-
allowing, hover-capable, mouse-driven contexts. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.trust-metric {
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.trust-metric:hover {
transform: translateY(-6px);
}
}
/* Scroll-triggered reveal — single IntersectionObserver, opt-in via
.js-reveal added only by JS and only when motion is allowed, so a
no-JS or reduced-motion visitor sees the full strip immediately. */
.trust-numbers-grid.js-reveal > li {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.trust-numbers-grid.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.trust-numbers-grid.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.trust-numbers-grid.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.11s; }
.trust-numbers-grid.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.17s; }
.trust-numbers-grid.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.23s; }
/* ---- Responsive ---- */
@media (max-width: 760px) {
.trust-numbers-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
@media (max-width: 480px) {
.trust-numbers {
padding-inline: 1.125rem;
}
.trust-metric {
padding: 1.4rem 1rem;
border-radius: 18px;
}
.trust-metric-icon {
width: 42px;
height: 42px;
}
.trust-metric-value {
font-size: 1.2rem;
}
.trust-metric-label {
font-size: 0.78rem;
}
}
/* ==========================================================================
CARE JOURNEY SECTION
========================================================================== */
/* SECTION VISUAL SEPARATION */
/* Journey keeps its clean white background/glow/line exactly as before;
the only change is a generous bottom padding so the section has real
breathing room before the wave divider and the (visually distinct
mint) Care Ecosystem section that follows — the two no longer sit
flush against each other. */
.journey {
position: relative;
overflow: hidden;
background: var(--color-white);
padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem calc(var(--space-section) + 3.5rem);
}
/* JOURNEY BACKGROUND — a fine straight-line grid, radially faded so it
stays concentrated behind the track and never reaches the section
edges. Layered underneath the existing teal/blue glow blobs so the
two combine into a single, subtle "clinical blueprint" backdrop that
no other section repeats (Hero's grid is dots on a diagonal mask,
not straight lines). */
.journey-grid {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 68%);
mask-image: radial-gradient(circle at 50% 40%, black, transparent 68%);
}
/* Mobile: the grid is purely decorative depth behind the track — drop
it and lean on the glow blobs alone. */
@media (max-width: 480px) {
.journey-grid {
display: none;
}
}
/* Soft teal/blue ambient glow. A real element (not a pseudo-element) so
the parallax script below can transform it directly. */
.journey-glow {
position: absolute;
inset: -10%;
z-index: 0;
background:
radial-gradient(560px 380px at 18% 15%, rgba(13, 148, 136, 0.12), transparent 65%),
radial-gradient(520px 360px at 84% 82%, rgba(37, 99, 235, 0.09), transparent 60%);
pointer-events: none;
will-change: transform;
}
.journey-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
}
.journey-intro {
max-width: 680px;
margin: 0 auto 3.5rem;
text-align: center;
}
.journey-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 1rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.journey-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.journey-heading {
margin-top: 1rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.journey-subtext {
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--color-text-gray);
}
/* ---- Track ---- */
.journey-body {
position: relative;
}
.journey-track {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.journey-track > li {
flex: 1;
min-width: 0;
}
/* Stepped/curved pathway rather than a flat timeline: every other stage
sits slightly higher, echoed by the dashed curve (.journey-curve)
drawn behind them. Desktop only — reset to a flat vertical list on
mobile, see CARE JOURNEY MOBILE. */
@media (min-width: 761px) {
.journey-track-item--raised {
margin-top: -1.5rem;
}
}
/* Ambient, decorative curve — approximates the stagger above rather
than being pinned to exact node coordinates, so it stays robust
across content/viewport changes. Static (no flow animation). */
.journey-curve {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: visible;
color: var(--color-primary-teal);
opacity: 0.3;
pointer-events: none;
}
.journey-step {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
background: none;
border: none;
border-radius: 20px;
font: inherit;
color: inherit;
cursor: pointer;
padding: 0.75rem 0.5rem 1.25rem;
}
.journey-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-white);
border: 2px solid rgba(13, 148, 136, 0.25);
color: var(--color-primary-teal-dark);
font-size: 1.05rem;
font-weight: 700;
flex-shrink: 0;
}
.journey-step:hover .journey-step-number,
.journey-step:focus-visible .journey-step-number {
border-color: var(--color-primary-teal);
}
/* On desktop this wrapper is transparent to layout (its children lay out
directly in the step's own flex column); on mobile it becomes the
right-hand text column next to the number — see CARE JOURNEY MOBILE. */
.journey-step-content {
display: contents;
}
.journey-step-icon {
color: var(--color-primary-teal);
}
.journey-step-icon svg {
width: 22px;
height: 22px;
}
.journey-step-title {
font-size: 0.92rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.3;
}
.journey-step-desc {
display: block;
max-width: 220px;
max-height: 0;
opacity: 0;
overflow: hidden;
font-size: 0.86rem;
line-height: 1.55;
color: var(--color-text-gray);
}
/* ---- Progress dots + CTA ---- */
.journey-progress {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
.journey-progress-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(13, 148, 136, 0.2);
}
.journey-progress-dot.is-active {
background: var(--color-primary-teal);
}
.journey-cta-wrap {
margin-top: 2.25rem;
text-align: center;
}
.journey-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-teal-dark);
color: var(--color-white);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
}
.journey-cta-arrow {
display: inline-block;
}
/* CARE JOURNEY INTERACTION */
.journey-step-number {
transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.journey-step-desc {
transition: max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out), margin-top 0.4s var(--ease-out);
}
.journey-step {
transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
/* The active step becomes the "glass/mint" information panel: a
translucent mint card wraps the whole step and its description
expands into view. Everything else (background/shadow/max-height)
is a colour, opacity or size change — not translation — so none of
it needs to be gated behind prefers-reduced-motion. */
.journey-step.is-active {
background: rgba(240, 253, 250, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 20px 40px -26px rgba(30, 41, 59, 0.25);
}
.journey-step.is-active .journey-step-number {
background: var(--color-primary-teal);
border-color: var(--color-primary-teal);
color: var(--color-white);
box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.14);
}
.journey-step.is-active .journey-step-desc {
max-height: 160px;
opacity: 1;
margin-top: 0.3rem;
}
.journey-cta {
transition: filter 0.25s var(--ease-out);
}
.journey-cta:hover,
.journey-cta:focus-visible {
filter: brightness(0.94);
}
.journey-cta-arrow {
transition: transform 0.25s var(--ease-out);
}
.journey-cta:hover .journey-cta-arrow,
.journey-cta:focus-visible .journey-cta-arrow {
transform: translateX(4px);
}
.journey-progress-dot {
transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.journey-progress-dot.is-active {
transform: scale(1.3);
}
/* Genuine motion (lift + parallax) only for capable, motion-allowing,
hover-capable devices. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.journey-cta {
transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.journey-cta:hover {
transform: translateY(-2px);
}
}
/* CARE JOURNEY ANIMATION */
/* REDUCED MOTION */
/* The connecting line is now a static dashed bar — the flowing
background-position animation it used to have has been removed
entirely (not just gated), since it was continuous motion that ran
with no user action at all. Auto-advance is gone the same way (see
home.js): every state change in this section now happens only in
direct response to a click/tap, which is why nothing further needs
gating behind prefers-reduced-motion here — none of the step
transitions use transform in the first place (see .journey-step-number
/ .journey-step-desc / .journey-step above), only colour, shadow and
max-height, so there's no motion left to disable. */
/* Scroll-triggered reveal — same progressive-enhancement pattern used
elsewhere on the page: the hidden/staggered state is opt-in via
.js-reveal, added only by JS and only when motion is allowed, so a
no-JS or reduced-motion visitor always sees the full journey
immediately. */
.journey-track.js-reveal > li {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.journey-track.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.journey-track.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.journey-track.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.12s; }
.journey-track.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.19s; }
.journey-track.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.26s; }
.journey-track.js-reveal.is-visible > li:nth-child(5) { transition-delay: 0.33s; }
/* CARE JOURNEY MOBILE */
/* Tablet: still horizontal, just tighter. */
@media (max-width: 980px) {
.journey-step-desc {
max-width: 100%;
}
}
/* Mobile: vertical flowing journey. The desktop curve is a horizontal
composition, so it's swapped out for a simple vertical dashed line
(a fresh, self-contained ::before — the desktop curve lives on a
separate .journey-curve SVG, not this pseudo-element, so there's no
base rule to inherit from here). Stepped/raised offsets are already
scoped to desktop-only above, so steps fall back to a flat column. */
@media (max-width: 720px) {
.journey-track {
flex-direction: column;
gap: 0;
}
.journey-curve {
display: none;
}
.journey-track::before {
content: "";
position: absolute;
left: 2.6rem;
right: auto;
top: 1.5rem;
bottom: 1.5rem;
height: auto;
width: 2px;
background: repeating-linear-gradient(
180deg,
var(--color-primary-teal) 0 12px,
transparent 12px 24px
);
background-size: 2px 48px;
opacity: 0.45;
z-index: 0;
pointer-events: none;
}
.journey-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 1rem;
padding: 0.75rem 0.5rem 1.5rem 0;
}
.journey-step-number {
width: 56px;
height: 56px;
}
.journey-step-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding-top: 0.5rem;
}
.journey-step-desc {
max-width: none;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar):
18px side padding (within the 16-20px comfort range — down from the
24px used everywhere else), and the step number circle already sizes
to 56px (well past the 44x44px touch-target minimum) via the 720px
breakpoint above, so it only needs confirming here, not resizing. */
@media (max-width: 480px) {
.journey {
padding-inline: 1.125rem;
}
.journey-intro {
margin-bottom: 2.5rem;
}
.journey-step-title {
font-size: 0.88rem;
}
.journey-step-desc {
font-size: 0.84rem;
}
}
/* SECTION TRANSITIONS */
/* A thin wave strip between Journey (white) and Care Ecosystem (mint) —
white at the top so it sits flush against Journey, curving down into
the same mint used as Ecosystem's own background, so the two sections
read as a deliberate transition rather than a hard cut or a blend. */
.section-divider {
position: relative;
background: var(--color-white);
line-height: 0;
overflow: hidden;
}
.section-divider svg {
display: block;
width: 100%;
height: 72px;
}
.section-divider-path {
fill: var(--color-mint);
}
@media (max-width: 640px) {
.section-divider svg {
height: 40px;
}
}
/* ==========================================================================
SERVICES SECTION
========================================================================== */
/* Top padding is deliberately smaller than the section's usual
--space-section rhythm — a balanced, medium gap after Journey/the
divider rather than the full generous spacing, so the page reads as
compact and premium rather than empty. Bottom padding is untouched
since this is the last section on the page. */
.services {
position: relative;
overflow: hidden;
background: var(--color-mint);
padding: clamp(2rem, 4vw, 3.5rem) 1.5rem var(--space-section);
}
/* SERVICES BACKGROUND — a wide, repeating ECG/pulse trace running
through the section plus a sparse micro-dot field. Distinct from
Trust & Numbers' organic curves and Difference's tiled cross: this
is the one section that gets a literal heartbeat-monitor line. */
.services-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(rgba(37, 99, 235, 0.09) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='130' viewBox='0 0 420 130'%3E%3Cpath d='M0 65 L64 65 L80 24 L96 106 L112 65 L420 65' stroke='%230D9488' stroke-width='1.6' fill='none' opacity='0.08'/%3E%3C/svg%3E");
background-size: 26px 26px, 420px 130px;
background-repeat: repeat, repeat-x;
background-position: 0 0, 0 12%;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.services-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
}
/* Mobile: drop the pulse-line trace, keep only the faint dot field. */
@media (max-width: 480px) {
.services-bg {
background-image: radial-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px);
background-size: 22px 22px;
}
}
.services-intro {
max-width: 680px;
margin: 0 auto 3.5rem;
text-align: center;
}
.services-eyebrow {
margin-bottom: 0.75rem;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.services-heading {
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.services-subtext {
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--color-text-gray);
}
/* ---- Asymmetric showcase: 1 large + 2 medium + 3 compact ---- */
/* Explicit placement (not an auto-flowing grid) is what makes this a
deliberate bento composition rather than a disguised uniform grid:
the featured card occupies a full 2x2 block, the two mediums stack
beside it, and the three compacts form their own row underneath. */
.services-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.services-grid-item {
display: flex;
}
.services-grid-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.services-grid-item:nth-child(2) { grid-column: 3; grid-row: 1; }
.services-grid-item:nth-child(3) { grid-column: 3; grid-row: 2; }
.services-grid-item:nth-child(4) { grid-column: 1; grid-row: 3; }
.services-grid-item:nth-child(5) { grid-column: 2; grid-row: 3; }
.services-grid-item:nth-child(6) { grid-column: 3; grid-row: 3; }
.service-card {
position: relative;
overflow: hidden;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.85rem;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.07);
border-radius: 24px;
box-shadow: 0 16px 36px -26px rgba(30, 41, 59, 0.2);
padding: 1.75rem 1.5rem;
color: inherit;
text-decoration: none;
}
/* The featured card: bigger type/icon and a soft teal/mint diagonal
gradient instead of flat white, so it reads as the visual anchor of
the whole composition. */
.services-grid-item--large .service-card {
padding: 2.5rem 2.25rem;
background: linear-gradient(135deg, rgba(13, 148, 136, 0.07), var(--color-mint) 60%, var(--color-white) 100%);
border-color: rgba(13, 148, 136, 0.18);
}
.services-grid-item--medium .service-card {
padding: 2rem 1.75rem;
justify-content: center;
}
/* Asymmetric accent: a soft, off-centre corner glow rather than a
symmetric border or centred flourish. Teal on the featured and
compact cards, blue on the two mediums, so the grid reads as varied
rather than six identical tiles repeating one accent colour. */
.service-card-accent {
position: absolute;
top: -34%;
right: -22%;
width: 160px;
height: 160px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(13, 148, 136, 0.14), transparent 72%);
}
.services-grid-item--medium .service-card-accent {
background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 72%);
}
.services-grid-item--compact .service-card-accent {
top: -28%;
right: auto;
left: -18%;
width: 130px;
height: 130px;
}
.service-card-icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.services-grid-item--large .service-card-icon {
width: 66px;
height: 66px;
}
.services-grid-item--compact .service-card-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.service-card-icon svg {
width: 26px;
height: 26px;
}
.services-grid-item--large .service-card-icon svg {
width: 30px;
height: 30px;
}
.services-grid-item--compact .service-card-icon svg {
width: 22px;
height: 22px;
}
.service-card-title {
position: relative;
z-index: 1;
font-size: 1.15rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.3;
}
.services-grid-item--large .service-card-title {
font-size: 1.55rem;
}
.services-grid-item--compact .service-card-title {
font-size: 1.05rem;
}
.service-card-desc {
position: relative;
z-index: 1;
font-size: 0.92rem;
line-height: 1.55;
color: var(--color-text-gray);
}
.services-grid-item--large .service-card-desc {
font-size: 1.02rem;
line-height: 1.65;
max-width: 46ch;
}
.services-grid-item--compact .service-card-desc {
font-size: 0.85rem;
}
/* Pinned to the bottom of the card via margin-top: auto, so the cue
lines up across cards of the same size regardless of how long each
description runs to. */
.service-card-cue {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: auto;
padding-top: 0.25rem;
font-size: 0.92rem;
font-weight: 700;
color: var(--color-primary-teal-dark);
}
.services-grid-item--large .service-card-cue {
font-size: 1rem;
}
.service-card-arrow {
display: inline-block;
}
/* HOME NURSING CARD — layered visual, glass micro-cards, glow ring */
/* Scoped entirely to .service-card--nursing / .nursing-* selectors —
nothing here touches the other five cards or their shared
.service-card* rules. .service-card already has position: relative +
overflow: hidden, so every absolutely positioned layer below is
automatically clipped to the card's rounded corners and can never
cause the grid to overflow. */
.service-card--nursing {
isolation: isolate;
}
/* Outer glow ring: invisible at rest, revealed on hover alongside the
shared border/shadow hover state every card already has — this is
the "stronger" hover treatment specific to the featured card. */
.nursing-glow-ring {
position: absolute;
inset: -1px;
z-index: 0;
border-radius: inherit;
box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.35), 0 0 40px 4px rgba(37, 99, 235, 0.12);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--ease-out);
}
.service-card--nursing:hover .nursing-glow-ring,
.service-card--nursing:focus-visible .nursing-glow-ring {
opacity: 1;
}
.nursing-visual-wrap {
position: absolute;
right: -6%;
bottom: -10%;
z-index: 0;
width: 60%;
max-width: 320px;
aspect-ratio: 4 / 5;
pointer-events: none;
}
.nursing-visual-glow {
position: absolute;
inset: -18%;
z-index: 0;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(13, 148, 136, 0.22), transparent 60%),
radial-gradient(circle at 70% 75%, rgba(37, 99, 235, 0.14), transparent 60%);
filter: blur(6px);
}
/* The photo layer reuses the same local asset already used for the
Hero image — never a plain rectangular ![]()
: it's masked into a
soft diagonal fade so it reads as an ambient backdrop rather than a
literal photo tile. A CSS background-image that fails to load simply
shows nothing (no broken-image icon), leaving the glow/ECG/badge
layers intact on their own — graceful by construction. */
.nursing-visual-image {
position: absolute;
inset: 6%;
z-index: 1;
border-radius: 28px;
background-image: url("assets/hero-caregiver.png");
background-size: cover;
background-position: center 22%;
opacity: 0.18;
-webkit-mask-image: linear-gradient(200deg, black 25%, transparent 82%);
mask-image: linear-gradient(200deg, black 25%, transparent 82%);
transition: opacity 0.35s var(--ease-out);
}
.service-card--nursing:hover .nursing-visual-image,
.service-card--nursing:focus-visible .nursing-visual-image {
opacity: 0.3;
}
.nursing-visual-ecg {
position: absolute;
left: 4%;
right: 4%;
top: 40%;
height: 22%;
z-index: 2;
overflow: visible;
color: var(--color-primary-teal);
pointer-events: none;
}
/* Static, fully visible by default (dashoffset: 0) so reduced-motion
users still see a subtle line — the draw-in loop below only kicks in
under prefers-reduced-motion: no-preference, at which point the
animation's own keyframes take over these same properties. */
.nursing-ecg-path {
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 420;
stroke-dashoffset: 0;
opacity: 0.35;
}
.nursing-visual-badge {
position: absolute;
top: 6%;
right: 8%;
z-index: 3;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(13, 148, 136, 0.15);
box-shadow: 0 14px 28px -16px rgba(30, 41, 59, 0.35);
color: var(--color-primary-teal-dark);
}
.nursing-visual-badge::after {
content: "";
position: absolute;
top: -2px;
right: -2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--color-accent-green);
border: 2px solid var(--color-white);
}
.nursing-visual-badge svg {
width: 20px;
height: 20px;
}
.nursing-labels {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.nursing-label {
position: absolute;
display: inline-flex;
align-items: center;
padding: 0.4rem 0.75rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 10px 22px -14px rgba(30, 41, 59, 0.28);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 0.72rem;
font-weight: 600;
color: var(--color-primary-teal-dark);
white-space: nowrap;
transition: transform 0.3s var(--ease-out);
}
.nursing-label--a { top: 10%; right: 4%; }
.nursing-label--b { top: 40%; right: 26%; }
.nursing-label--c { bottom: 12%; right: 0; }
/* Micro-cards nudge gently on hover — desktop, motion-allowing only. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.service-card--nursing:hover .nursing-label,
.service-card--nursing:focus-visible .nursing-label {
transform: translateY(-4px);
}
.service-card--nursing:hover .nursing-label--b,
.service-card--nursing:focus-visible .nursing-label--b {
transition-delay: 0.05s;
}
.service-card--nursing:hover .nursing-label--c,
.service-card--nursing:focus-visible .nursing-label--c {
transition-delay: 0.1s;
}
}
/* Slow ECG draw + very subtle float — the two pieces of continuous
motion this card has, both slow and small, both off entirely under
reduced motion (not just paused). */
@media (prefers-reduced-motion: no-preference) {
.nursing-ecg-path {
animation: nursing-ecg-draw 7s ease-in-out infinite;
}
.nursing-visual-wrap {
animation: nursing-visual-float 8s ease-in-out infinite;
}
}
@keyframes nursing-ecg-draw {
0% { stroke-dashoffset: 420; opacity: 0; }
12% { opacity: 0.55; }
55% { stroke-dashoffset: 0; opacity: 0.55; }
78% { opacity: 0; }
100% { stroke-dashoffset: -420; opacity: 0; }
}
@keyframes nursing-visual-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ---- "Explore All Services" CTA ---- */
.services-cta-wrap {
margin-top: 3rem;
text-align: center;
}
.services-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-teal-dark);
color: var(--color-white);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
}
.services-cta-arrow {
display: inline-block;
}
/* SERVICE CARD INTERACTIONS */
/* Baseline is transform-free; the lift is added back in below only for
motion-allowing, hover-capable, mouse-driven contexts. Icon and
accent respond on both hover and keyboard focus. */
.service-card {
transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.service-card:hover,
.service-card:focus-visible {
border-color: var(--color-primary-teal);
box-shadow: 0 26px 52px -26px rgba(30, 41, 59, 0.3);
}
.service-card-icon {
transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.service-card:hover .service-card-icon,
.service-card:focus-visible .service-card-icon {
transform: rotate(-6deg) scale(1.08);
background: var(--color-primary-teal);
color: var(--color-white);
}
.service-card-accent {
transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.service-card:hover .service-card-accent,
.service-card:focus-visible .service-card-accent {
transform: scale(1.15);
opacity: 0.85;
}
.service-card-arrow {
transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.service-card:hover .service-card-arrow,
.service-card:focus-visible .service-card-arrow {
transform: translateX(4px);
color: var(--color-primary-teal);
}
.services-cta {
transition: filter 0.25s var(--ease-out);
}
.services-cta:hover,
.services-cta:focus-visible {
filter: brightness(0.94);
}
.services-cta-arrow {
transition: transform 0.25s var(--ease-out);
}
.services-cta:hover .services-cta-arrow,
.services-cta:focus-visible .services-cta-arrow {
transform: translateX(4px);
}
/* REDUCED MOTION */
/* The hover lift is the only translation in this section's interaction
— everything else above (border colour, shadow, icon rotate/scale,
accent scale) is a small, contained, hover-triggered change rather
than autoplaying motion, so it stays on regardless of this setting.
The lift itself is additionally restricted to mouse/trackpad input,
so touch taps on mobile never get a phantom "stuck hover". */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.service-card {
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.service-card:hover,
.service-card:focus-visible {
transform: translateY(-8px);
}
.services-cta {
transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.services-cta:hover,
.services-cta:focus-visible {
transform: translateY(-2px);
}
}
/* Subtle scroll reveal — a single IntersectionObserver, one-time
trigger, plain opacity/transform (no layout thrash), so it costs
nothing worth measuring. Opt-in via .js-reveal added only by JS and
only when motion is allowed, so a no-JS or reduced-motion visitor
simply sees the full grid immediately. */
.services-grid.js-reveal > li {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.services-grid.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.services-grid.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.services-grid.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.1s; }
.services-grid.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.15s; }
.services-grid.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.2s; }
.services-grid.js-reveal.is-visible > li:nth-child(5) { transition-delay: 0.25s; }
.services-grid.js-reveal.is-visible > li:nth-child(6) { transition-delay: 0.3s; }
/* ---- Responsive ---- */
/* The desktop bento placement (grid-column/grid-row on each nth-child)
only makes sense against the 3-column template it was designed for.
Below that, every item resets to auto-flow so it doesn't try to
reference a 3rd column that no longer exists — the featured card
still gets to span the full width for emphasis, everything else
just flows in DOM order. */
@media (max-width: 980px) {
.services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.services-grid-item:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
.services-grid-item--large {
grid-column: 1 / 3;
}
}
@media (max-width: 640px) {
.services-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.services-grid-item--large {
grid-column: auto;
}
.service-card {
padding: 1.75rem 1.5rem;
}
.services-grid-item--large .service-card {
padding: 2rem 1.5rem;
}
.services-intro {
margin-bottom: 2.5rem;
}
/* HOME NURSING CARD — mobile: decoration is reduced, not removed.
The 3 glass micro-cards are dropped (they'd crowd full-width
stacked text and add height for little gain); the glow ring stays
desktop-only since a hover-only reveal has no meaning on touch.
The layered visual itself is demoted from an absolute background
to a real in-flow block, pushed after the CTA via `order` and
given a fixed compact height — "stacked below content" rather
than overlaid, with a hard height cap so the card can't grow
excessively tall. */
.nursing-labels,
.nursing-glow-ring {
display: none;
}
.nursing-visual-wrap {
position: relative;
order: 1;
right: auto;
bottom: auto;
top: auto;
left: auto;
width: 100%;
max-width: none;
aspect-ratio: auto;
height: 150px;
margin-top: 1.25rem;
border-radius: 20px;
overflow: hidden;
/* The float animation is switched off on mobile — one less moving
piece, matching the "reduce decorative elements" + lightweight
performance requirement for small screens. */
animation: none !important;
}
.nursing-visual-glow {
inset: -10%;
}
.nursing-visual-image {
inset: 0;
border-radius: 20px;
-webkit-mask-image: linear-gradient(200deg, black 35%, transparent 90%);
mask-image: linear-gradient(200deg, black 35%, transparent 90%);
}
.nursing-visual-ecg {
top: 60%;
height: 28%;
}
/* Static on mobile too — the slow draw-in loop is a nice-to-have on
a large desktop panel, not worth the extra paint work on a 150px
mobile strip. */
.nursing-ecg-path {
animation: none !important;
}
.nursing-visual-badge {
width: 38px;
height: 38px;
top: 8px;
right: 8px;
}
.nursing-visual-badge svg {
width: 17px;
height: 17px;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar):
18px side padding (within the 16-20px comfort range — down from the
24px used everywhere else). Each card is already full-width with
generous padding, so the whole tile is comfortably past the 44x44px
touch-target minimum without any extra sizing needed here. Heading
keeps the same clamp() scale used sitewide, which lands around
30-32px at this width — legible without excessive wrapping. */
@media (max-width: 480px) {
.services {
padding-inline: 1.125rem;
}
.service-card {
padding: 1.5rem 1.25rem;
border-radius: 20px;
}
.service-card-icon {
width: 48px;
height: 48px;
}
.service-card-icon svg {
width: 22px;
height: 22px;
}
.service-card-title {
font-size: 1.1rem;
}
.service-card-desc {
font-size: 0.9rem;
}
.service-card-cue {
font-size: 0.88rem;
}
/* The featured card keeps its gradient/accent treatment but drops
back to the same type scale as every other card at this width —
there isn't enough room left at 412px for a meaningfully larger
headline without wrapping awkwardly. */
.services-grid-item--large .service-card {
padding: 1.75rem 1.25rem;
}
.services-grid-item--large .service-card-icon {
width: 48px;
height: 48px;
}
.services-grid-item--large .service-card-icon svg {
width: 22px;
height: 22px;
}
.services-grid-item--large .service-card-title {
font-size: 1.1rem;
}
.services-grid-item--large .service-card-desc {
font-size: 0.9rem;
max-width: none;
}
.services-grid-item--large .service-card-cue {
font-size: 0.88rem;
}
.services-cta-wrap {
margin-top: 2.25rem;
}
.services-cta {
width: 100%;
justify-content: center;
}
/* HOME NURSING CARD — the stacked visual band shrinks slightly too. */
.nursing-visual-wrap {
height: 135px;
}
}
/* HOME NURSING CARD — fine-tuned mobile-first across the three
requested widths (412 / 390 / 360px). Each step nudges the card's
own padding and the stacked visual band slightly further down so
the large card stays compact and clutter-free even at the smallest
common Android width, without touching any other card. */
@media (max-width: 412px) {
.services-grid-item--large .service-card {
padding: 1.6rem 1.15rem;
}
.nursing-visual-wrap {
height: 130px;
}
}
@media (max-width: 390px) {
.services-grid-item--large .service-card {
padding: 1.5rem 1.1rem;
}
.services-grid-item--large .service-card-desc {
font-size: 0.88rem;
}
.nursing-visual-wrap {
height: 120px;
}
.nursing-visual-badge {
width: 34px;
height: 34px;
}
.nursing-visual-badge svg {
width: 15px;
height: 15px;
}
}
@media (max-width: 360px) {
.services-grid-item--large .service-card {
padding: 1.4rem 1rem;
}
.services-grid-item--large .service-card-title {
font-size: 1.05rem;
}
.nursing-visual-wrap {
height: 110px;
margin-top: 1rem;
}
}
/* ==========================================================================
THE K7 DIFFERENCE SECTION — "K7 CARE SYSTEM"
========================================================================== */
/* White background against Services' mint above it — the colour swap
alone gives clear visual separation. Top/bottom padding is deliberately
modest (not the full --space-section rhythm) since the two-column
layout below is already compact — a tall section here would waste
space rather than read as premium. */
.difference {
position: relative;
overflow: hidden;
background: var(--color-white);
padding: clamp(2.25rem, 4.5vw, 3.5rem) 1.5rem clamp(2.75rem, 5vw, 4rem);
}
/* DIFFERENCE SECTION BACKGROUND — this section's unique, extremely
low-opacity treatment: two soft organic glow curves (teal bottom-
left, blue top-right) plus a sparse tiled medical-cross pattern.
No other section on the page repeats this combination — Hero uses a
dot mesh, Trust & Numbers uses sweeping curve strokes, Care Journey
uses a fine line grid, Services uses a wide ECG pulse line. */
.difference-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(640px 460px at 6% 96%, rgba(13, 148, 136, 0.06), transparent 62%),
radial-gradient(560px 420px at 96% 4%, rgba(37, 99, 235, 0.05), transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 26v20M26 36h20' stroke='%230D9488' stroke-width='1.3' stroke-linecap='round' opacity='0.05'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat, repeat;
}
/* Two-column composition: ~42% copy / ~58% visual. align-items: center
vertically centers the (shorter) left column against the K7 Care
System, which sets the row's height. */
.difference-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
align-items: center;
gap: clamp(2rem, 4vw, 4.5rem);
}
/* ---- Left column: copy + trust points + CTA ---- */
.difference-left {
flex: 0 0 42%;
max-width: 42%;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 3vw, 2.25rem);
}
.difference-intro {
text-align: left;
}
.difference-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.difference-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.difference-text {
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--color-text-gray);
}
.difference-trust-row {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 0.6rem 1.4rem;
color: var(--color-text-gray);
font-size: 0.88rem;
font-weight: 500;
}
.difference-trust-row li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.difference-trust-icon {
width: 17px;
height: 17px;
color: var(--color-primary-teal);
flex-shrink: 0;
}
/* ---- K7 Care System (hub + 4 connected principles) ---- */
/* Right column: no longer stacked below the copy, so it carries no top
margin. Sized to sit comfortably inside the ~58% column without
ballooning the section's height — shorter than it is wide, which
also keeps it visually balanced against the left column. */
.care-system {
position: relative;
flex: 0 1 58%;
width: 100%;
max-width: 480px;
aspect-ratio: 1 / 0.9;
margin: 0 auto;
}
.care-system-glow {
position: absolute;
inset: 8%;
z-index: 0;
border-radius: 50%;
background:
radial-gradient(circle at 40% 35%, rgba(13, 148, 136, 0.1), transparent 62%),
radial-gradient(circle at 65% 68%, rgba(37, 99, 235, 0.07), transparent 60%);
pointer-events: none;
}
.care-system-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: visible;
pointer-events: none;
}
/* ECG-style connectors: a smooth curve for most of the run, then a
short sharp zig-zag near the node end, evoking a heartbeat blip. */
.care-line {
fill: none;
stroke: var(--color-primary-teal);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.22;
transition: stroke 0.3s var(--ease-out), stroke-width 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.care-line.is-active {
stroke: var(--color-secondary-blue);
stroke-width: 2.75;
opacity: 0.85;
}
.care-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 25%;
aspect-ratio: 1 / 1;
min-width: 120px;
max-width: 180px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
text-align: center;
padding: 1rem;
background: linear-gradient(150deg, var(--color-white), var(--color-mint));
border: 2px solid rgba(13, 148, 136, 0.25);
box-shadow: 0 24px 48px -20px rgba(13, 148, 136, 0.35), 0 0 0 10px rgba(13, 148, 136, 0.07);
}
.care-hub-icon {
color: var(--color-primary-teal);
}
.care-hub-icon svg {
width: 30px;
height: 30px;
}
.care-hub-label {
font-size: 1rem;
font-weight: 700;
color: var(--color-navy);
}
.care-principles {
position: relative;
z-index: 2;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.care-principle {
position: absolute;
left: var(--node-x);
top: var(--node-y);
transform: translate(-50%, -50%);
}
.care-principle-btn {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.45rem;
width: 138px;
background: var(--color-white);
border: 1.5px solid rgba(30, 41, 59, 0.08);
border-radius: 16px;
box-shadow: 0 12px 26px -20px rgba(30, 41, 59, 0.18);
padding: 0.8rem 0.7rem;
font: inherit;
color: inherit;
cursor: pointer;
}
.care-principle-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.care-principle-icon svg {
width: 18px;
height: 18px;
}
/* The one principle actually about verification gets the accent-green
status dot — green is reserved for verified/positive indicators, not
used decoratively elsewhere in this section. */
.care-principle-status {
position: absolute;
top: -2px;
right: -2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--color-accent-green);
border: 2px solid var(--color-white);
}
.care-principle-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.25;
}
.care-principle-desc {
display: block;
max-height: 0;
opacity: 0;
overflow: hidden;
font-size: 0.72rem;
line-height: 1.42;
color: var(--color-text-gray);
}
/* ---- CTA ---- */
/* Sits inside .difference-left now (see .difference-left's own gap for
spacing above it), left-aligned to match the rest of the column. */
.difference-cta-wrap {
text-align: left;
}
.difference-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-teal-dark);
color: var(--color-white);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
}
.difference-cta-arrow {
display: inline-block;
}
.difference-cta-note {
margin-top: 0.85rem;
font-size: 0.92rem;
color: var(--color-text-gray);
}
/* ---- Interactions ---- */
/* Baseline stays transform-free; hover gives a colour-only preview.
Selecting a principle (hover, click/tap, or keyboard focus — see
home.js) is what expands its description and lights up its
connecting line; nothing here auto-plays or cycles on its own. */
.care-principle-btn {
transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.care-principle-btn:hover,
.care-principle-btn:focus-visible {
border-color: var(--color-primary-teal);
}
.care-principle-icon {
transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.care-principle-desc {
transition: max-height 0.35s var(--ease-out), opacity 0.3s var(--ease-out), margin-top 0.35s var(--ease-out);
}
.care-principle-btn.is-active {
border-color: var(--color-primary-teal);
box-shadow: 0 0 0 5px rgba(13, 148, 136, 0.1), 0 16px 32px -20px rgba(13, 148, 136, 0.3);
}
.care-principle-btn.is-active .care-principle-icon {
background: var(--color-primary-teal);
color: var(--color-white);
}
.care-principle-btn.is-active .care-principle-desc {
max-height: 90px;
opacity: 1;
margin-top: 0.1rem;
}
.difference-cta {
transition: filter 0.25s var(--ease-out);
}
.difference-cta:hover,
.difference-cta:focus-visible {
filter: brightness(0.94);
}
.difference-cta-arrow {
transition: transform 0.25s var(--ease-out);
}
.difference-cta:hover .difference-cta-arrow,
.difference-cta:focus-visible .difference-cta-arrow {
transform: translateX(4px);
}
/* REDUCED MOTION */
/* The icon's hover/select scale and the CTA's hover lift are the only
transform-based motion in this section, so they're the only parts
scoped behind motion-allowing, hover-capable, mouse-driven contexts.
Border colour, connector stroke/opacity and the description's
max-height reveal all stay on regardless, since none of them are
translation. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.care-principle-btn:hover .care-principle-icon,
.care-principle-btn.is-active .care-principle-icon {
transform: scale(1.08);
}
.difference-cta {
transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.difference-cta:hover {
transform: translateY(-2px);
}
}
/* Scroll-triggered reveal — same progressive-enhancement pattern used
throughout the page: opt-in via .js-reveal (added only by JS, only
when motion is allowed), so a no-JS or reduced-motion visitor always
sees the full section immediately. */
.care-system.js-reveal .care-hub {
opacity: 0;
transform: translate(-50%, -50%) scale(0.85);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.care-system.js-reveal.is-visible .care-hub {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.care-system.js-reveal .care-principle {
opacity: 0;
transform: translate(-50%, -50%) scale(0.7);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.care-system.js-reveal.is-visible .care-principle {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.care-system.js-reveal.is-visible .care-principle:nth-child(1) { transition-delay: 0.05s; }
.care-system.js-reveal.is-visible .care-principle:nth-child(2) { transition-delay: 0.12s; }
.care-system.js-reveal.is-visible .care-principle:nth-child(3) { transition-delay: 0.19s; }
.care-system.js-reveal.is-visible .care-principle:nth-child(4) { transition-delay: 0.26s; }
/* ---- Responsive ---- */
/* STACK BREAKPOINT: below this, the 42/58 two-column composition no
longer has room to breathe, so it collapses to a single column —
copy first, K7 Care System second (DOM order already puts
.difference-left before .care-system, so no reordering is needed).
The radial hub-and-spoke composition itself is abandoned in favour
of a plain vertical list — hub on top (static, centred), then the 4
principles stacked full-width below, each always showing its
description (no collapse/expand needed once everything already fits
in a single column). Connector lines and the section's tiled cross
pattern are both dropped, per "reduce decorative elements on mobile". */
@media (max-width: 900px) {
.difference-container {
flex-direction: column;
align-items: stretch;
gap: 2.5rem;
}
.difference-left {
flex: none;
max-width: none;
text-align: center;
align-items: center;
}
.difference-intro {
text-align: center;
}
.difference-trust-row {
justify-content: center;
}
.difference-cta-wrap {
text-align: center;
}
.difference-bg {
background-image:
radial-gradient(640px 460px at 6% 96%, rgba(13, 148, 136, 0.06), transparent 62%),
radial-gradient(560px 420px at 96% 4%, rgba(37, 99, 235, 0.05), transparent 60%);
}
.care-system {
flex: none;
max-width: 480px;
aspect-ratio: auto;
margin: 0 auto;
}
.care-system-lines,
.care-system-glow {
display: none;
}
.care-hub {
position: static;
transform: none;
margin: 0 auto 1.75rem;
width: 108px;
max-width: none;
min-width: 0;
}
.care-system.js-reveal .care-hub,
.care-system.js-reveal.is-visible .care-hub {
transform: none;
}
.care-principles {
position: relative;
height: auto;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.care-principle {
position: static;
transform: none;
}
.care-system.js-reveal .care-principle,
.care-system.js-reveal.is-visible .care-principle {
transform: none;
}
.care-principle-btn {
width: 100%;
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 0.85rem;
padding: 0.9rem 1rem;
}
.care-principle-btn.is-active {
transform: none;
}
/* Always expanded on mobile — every description is readable without
needing to tap first. */
.care-principle-desc {
max-height: none;
opacity: 1;
margin-top: 0.15rem;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar):
18px side padding so the whole section sits comfortably within the
viewport with no horizontal overflow. Each principle button is
already full-width with ~0.9rem vertical padding plus a 42px icon —
well past the 44x44px touch-target minimum. */
@media (max-width: 480px) {
.difference {
padding-inline: 1.125rem;
}
.difference-trust-row {
gap: 0.5rem 1rem;
font-size: 0.82rem;
}
.care-hub {
width: 92px;
}
.care-hub-icon svg {
width: 24px;
height: 24px;
}
.care-hub-label {
font-size: 0.85rem;
}
.care-principle-desc {
font-size: 0.8rem;
}
.difference-cta {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
WHO WE CARE FOR SECTION — "CARE NEEDS MAP"
========================================================================== */
/* Mint background against Difference's white above it — the colour swap
keeps the established alternating rhythm (Trust mint / Journey white /
Services mint / Difference white / this section mint). */
.care-map {
position: relative;
overflow: hidden;
background: var(--color-mint);
padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(3rem, 6vw, 5rem);
}
/* SECTION BACKGROUND — a soft teal/blue radial glow (positioned
top-left/bottom-right, unlike Difference's bottom-left/top-right),
a fine 22px dot grid and one long, extremely low-opacity ECG trace
running along the lower third. This section's own unique
combination — distinct from Hero's dot mesh, Trust & Numbers'
curve strokes, Journey's line grid, Services' pulse line and
Difference's organic glow + cross tile. */
.care-map-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(600px 460px at 8% 6%, rgba(13, 148, 136, 0.07), transparent 62%),
radial-gradient(560px 440px at 94% 92%, rgba(37, 99, 235, 0.06), transparent 60%),
radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='90' viewBox='0 0 500 90'%3E%3Cpath d='M0,45 L70,45 L88,15 L106,75 L124,30 L142,45 L230,45 C260,45 270,20 300,20 L500,20' stroke='%230D9488' stroke-width='1.6' fill='none' opacity='0.07'/%3E%3C/svg%3E");
background-size: auto, auto, 22px 22px, 500px 90px;
background-repeat: no-repeat, no-repeat, repeat, repeat-x;
background-position: 0 0, 0 0, 0 0, 0 88%;
}
.care-map-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 3.5rem);
}
/* ---- Intro ---- */
.care-map-intro {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.care-map-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.care-map-heading {
margin-top: 0.75rem;
font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.care-map-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text-gray);
max-width: 640px;
margin-inline: auto;
}
.care-map-subline {
margin-top: 0.85rem;
font-size: 0.95rem;
font-weight: 600;
font-style: italic;
color: var(--color-primary-teal-dark);
}
/* ---- Care Needs Map visual (hub + 6 connected nodes) ---- */
.care-map-visual {
position: relative;
width: 100%;
max-width: 720px;
aspect-ratio: 1 / 0.95;
margin: 0 auto;
}
.care-map-glow {
position: absolute;
inset: 6%;
z-index: 0;
border-radius: 50%;
background:
radial-gradient(circle at 38% 32%, rgba(13, 148, 136, 0.11), transparent 62%),
radial-gradient(circle at 66% 70%, rgba(37, 99, 235, 0.08), transparent 60%);
pointer-events: none;
}
/* Layered concentric rings centred on the hub — cheap, image-free
"layered depth" via three nested dashed circles at falling opacity. */
.care-map-rings {
position: absolute;
top: 50%;
left: 50%;
width: 38%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
z-index: 0;
border-radius: 50%;
border: 1px dashed rgba(13, 148, 136, 0.16);
pointer-events: none;
}
.care-map-rings::before,
.care-map-rings::after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(37, 99, 235, 0.1);
}
.care-map-rings::before {
inset: -16%;
}
.care-map-rings::after {
inset: -32%;
border-color: rgba(13, 148, 136, 0.07);
}
/* Ambient ECG trace integrated into the composition — static, purely
atmospheric (not tied to any single node). */
.care-map-pulse {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
color: var(--color-primary-teal);
opacity: 0.09;
pointer-events: none;
}
.care-map-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: visible;
pointer-events: none;
}
/* Same curved + ECG-blip connector language as the K7 Care System
above (see .care-line), reused here for visual continuity. */
.care-map-line {
fill: none;
stroke: var(--color-primary-teal);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.2;
transition: stroke 0.3s var(--ease-out), stroke-width 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.care-map-line.is-active {
stroke: var(--color-secondary-blue);
stroke-width: 2.75;
opacity: 0.85;
}
/* ---- Central hub: caregiver/patient photo + badge + micro-labels ---- */
.care-map-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 32%;
min-width: 150px;
max-width: 210px;
display: flex;
flex-direction: column;
align-items: center;
}
.care-map-hub-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
background: var(--color-white);
box-shadow: 0 26px 50px -22px rgba(13, 148, 136, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.75);
}
/* Reuses the same local hero-caregiver asset and the exact same
load/error handling pattern as the Hero image (see home.js): the
![]()
fades in only once it has actually loaded, and quietly hides
itself in favour of the fallback icon if it fails — never a broken-
image glyph. */
.care-map-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.care-map-image.is-loaded {
opacity: 1;
}
.care-map-image.is-error {
display: none;
}
.care-map-image-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.care-map-hub-frame.has-error .care-map-image-fallback {
display: flex;
}
.care-map-image-fallback svg {
width: 30%;
height: 30%;
}
.care-map-badge {
position: relative;
z-index: 4;
margin-top: -14px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.9rem;
border-radius: var(--radius-pill);
background: var(--color-white);
border: 1px solid rgba(13, 148, 136, 0.15);
box-shadow: 0 14px 28px -16px rgba(30, 41, 59, 0.32);
font-size: 0.78rem;
font-weight: 700;
color: var(--color-navy);
white-space: nowrap;
}
.care-map-badge-icon {
display: inline-flex;
width: 15px;
height: 15px;
color: var(--color-primary-teal);
flex-shrink: 0;
}
.care-map-badge-icon svg {
width: 100%;
height: 100%;
}
/* Small supporting micro-labels floating in the gaps of the
composition — decorative reinforcement of the section's themes, not
distinct information, so the group is aria-hidden. */
.care-map-microlabel {
position: absolute;
left: var(--mx);
top: var(--my);
transform: translate(-50%, -50%);
z-index: 2;
font-size: 0.68rem;
font-weight: 600;
color: var(--color-primary-teal-dark);
background: rgba(255, 255, 255, 0.85);
padding: 0.3rem 0.6rem;
border-radius: var(--radius-pill);
box-shadow: 0 6px 14px -8px rgba(30, 41, 59, 0.25);
white-space: nowrap;
pointer-events: none;
}
.care-map-microlabel--wide {
font-size: 0.64rem;
}
/* ---- The 6 patient-care nodes ---- */
.care-map-nodes {
position: relative;
z-index: 2;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.care-map-node {
position: absolute;
left: var(--node-x);
top: var(--node-y);
transform: translate(-50%, -50%);
}
.care-map-node-btn {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.35rem;
width: 126px;
background: var(--color-white);
border: 1.5px solid rgba(30, 41, 59, 0.08);
border-radius: 16px;
box-shadow: 0 12px 24px -18px rgba(30, 41, 59, 0.18);
padding: 0.7rem 0.6rem;
font: inherit;
color: inherit;
cursor: pointer;
transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.care-map-node-btn:hover,
.care-map-node-btn:focus-visible {
border-color: var(--color-primary-teal);
}
.care-map-node-btn.is-active {
border-color: var(--color-primary-teal);
box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12), 0 14px 28px -18px rgba(13, 148, 136, 0.3);
}
.care-map-node-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.care-map-node-icon svg {
width: 17px;
height: 17px;
}
.care-map-node-btn.is-active .care-map-node-icon {
background: var(--color-primary-teal);
color: var(--color-white);
}
.care-map-node-label {
font-size: 0.76rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.2;
}
.care-map-node-phrase {
font-size: 0.66rem;
line-height: 1.3;
color: var(--color-text-gray);
}
/* Icon scale is the only transform-based hover/active motion on a
node, so it's the only part scoped behind motion-allowing, hover-
capable, mouse-driven contexts (see REDUCED MOTION below). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.care-map-node-btn:hover,
.care-map-node-btn.is-active {
transform: translate(-50%, -50%) scale(1.04);
}
}
/* ---- Shared information panel ---- */
.care-map-panel {
position: relative;
max-width: 760px;
width: 100%;
margin: 0 auto;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.07);
border-radius: 22px;
box-shadow: 0 20px 44px -28px rgba(30, 41, 59, 0.22);
padding: 1.5rem 1.75rem;
}
/* Selecting a node (hover, click/tap or keyboard focus — see home.js)
expands that care area's full description here and lights up its
connecting line; nothing auto-plays or cycles. All six items stay
in the DOM (crawlable, screen-reader reachable via aria-hidden
toggling in JS) — only the active one is visually expanded. */
.care-map-panel-item {
display: flex;
align-items: flex-start;
gap: 1rem;
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
transition: max-height 0.4s var(--ease-out), opacity 0.35s var(--ease-out);
}
.care-map-panel-item.is-active {
max-height: 280px;
opacity: 1;
}
.care-map-panel-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-mint);
color: var(--color-primary-teal);
}
.care-map-panel-icon svg {
width: 22px;
height: 22px;
}
.care-map-panel-body {
flex: 1;
min-width: 0;
}
.care-map-panel-title {
margin: 0 0 0.35rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--color-navy);
}
.care-map-panel-desc {
margin: 0;
font-size: 0.92rem;
line-height: 1.6;
color: var(--color-text-gray);
}
/* ---- Footer: supporting note + CTA ---- */
.care-map-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
max-width: 760px;
margin: 0 auto;
}
.care-map-footer-note {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
font-style: italic;
color: var(--color-primary-teal-dark);
max-width: 38ch;
}
.care-map-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-teal-dark);
color: var(--color-white);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
transition: filter 0.25s var(--ease-out);
}
.care-map-cta:hover,
.care-map-cta:focus-visible {
filter: brightness(0.94);
}
.care-map-cta-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.care-map-cta:hover .care-map-cta-arrow,
.care-map-cta:focus-visible .care-map-cta-arrow {
transform: translateX(4px);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.care-map-cta {
transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.care-map-cta:hover {
transform: translateY(-2px);
}
}
/* Scroll-triggered reveal — same progressive-enhancement pattern used
throughout the page: opt-in via .js-reveal (added only by JS, only
when motion is allowed), so a no-JS or reduced-motion visitor
always sees the full section immediately. */
.care-map-visual.js-reveal .care-map-hub {
opacity: 0;
transform: translate(-50%, -50%) scale(0.85);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.care-map-visual.js-reveal.is-visible .care-map-hub {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.care-map-visual.js-reveal .care-map-node {
opacity: 0;
transform: translate(-50%, -50%) scale(0.7);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.care-map-visual.js-reveal.is-visible .care-map-node {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.care-map-visual.js-reveal.is-visible .care-map-node:nth-child(1) { transition-delay: 0.05s; }
.care-map-visual.js-reveal.is-visible .care-map-node:nth-child(2) { transition-delay: 0.1s; }
.care-map-visual.js-reveal.is-visible .care-map-node:nth-child(3) { transition-delay: 0.15s; }
.care-map-visual.js-reveal.is-visible .care-map-node:nth-child(4) { transition-delay: 0.2s; }
.care-map-visual.js-reveal.is-visible .care-map-node:nth-child(5) { transition-delay: 0.25s; }
.care-map-visual.js-reveal.is-visible .care-map-node:nth-child(6) { transition-delay: 0.3s; }
/* ---- Responsive ---- */
/* STACK BREAKPOINT: below this, the radial hub-and-6-node composition
no longer has room to breathe, so it recomposes rather than simply
shrinks — central image first (static, centred), then the 6 care
categories become a compact horizontally-scrollable pill selector,
with the shared panel already sitting right below providing the
"active description appears below" behaviour on every breakpoint.
Connector lines, the ambient pulse trace, the rings and the micro-
labels are all dropped, per "reduce decorative graphics on mobile". */
@media (max-width: 860px) {
.care-map-container {
gap: 2.25rem;
}
.care-map-visual {
max-width: 420px;
aspect-ratio: auto;
}
.care-map-lines,
.care-map-pulse,
.care-map-rings,
.care-map-microlabel {
display: none;
}
.care-map-hub {
position: static;
transform: none;
margin: 0 auto;
width: 150px;
min-width: 0;
}
.care-map-visual.js-reveal .care-map-hub,
.care-map-visual.js-reveal.is-visible .care-map-hub {
transform: none;
}
.care-map-nodes {
position: relative;
height: auto;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.6rem;
margin-top: 1.5rem;
overflow-x: auto;
overflow-y: visible;
padding: 0.2rem 0.2rem 0.5rem;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.care-map-node {
position: relative;
left: auto;
top: auto;
transform: none;
flex: 0 0 auto;
scroll-snap-align: start;
}
.care-map-visual.js-reveal .care-map-node,
.care-map-visual.js-reveal.is-visible .care-map-node {
transform: none;
}
.care-map-node-btn.is-active {
transform: none;
}
.care-map-node-btn {
width: auto;
min-height: 44px;
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.9rem;
white-space: nowrap;
}
/* The full description already lives in the panel right below, so
the phrase is dropped here to keep each pill compact. */
.care-map-node-phrase {
display: none;
}
.care-map-panel {
padding: 1.25rem 1.35rem;
}
.care-map-footer {
justify-content: center;
text-align: center;
}
.care-map-cta {
width: 100%;
justify-content: center;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar);
also holds up at 390px and 360px. Every node pill is at least 44px
tall (min-height above), well past the touch-target minimum. */
@media (max-width: 480px) {
.care-map {
padding-inline: 1.125rem;
}
.care-map-bg {
background-image:
radial-gradient(600px 460px at 8% 6%, rgba(13, 148, 136, 0.07), transparent 62%),
radial-gradient(560px 440px at 94% 92%, rgba(37, 99, 235, 0.06), transparent 60%);
}
.care-map-text {
font-size: 1rem;
}
.care-map-hub {
width: 128px;
}
.care-map-badge {
font-size: 0.72rem;
padding: 0.45rem 0.75rem;
}
.care-map-panel {
padding: 1.1rem 1.1rem;
}
.care-map-panel-title {
font-size: 1rem;
}
.care-map-panel-desc {
font-size: 0.88rem;
}
}
/* ==========================================================================
SAFETY & CARE STANDARDS SECTION — CARD-BASED
========================================================================== */
/* White background against Care Needs Map's mint above it — the colour
swap keeps the established alternating rhythm. A clean, premium card
grid rather than a diagram: calm by design, minimal motion. */
.safety {
position: relative;
overflow: hidden;
background: var(--color-white);
padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(3rem, 6vw, 5rem);
}
/* SECTION BACKGROUND — a soft dot mesh, two corner glows (teal
top-right, blue bottom-left — the reverse corners from Difference's
glow), one static, very low-opacity ECG trace and one low-opacity
flowing curved line. Much lighter than the cards sitting on top of
it, and this section's own unique combination, distinct from every
other section's background treatment (see home.css for the full
breakdown). */
.safety-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(560px 460px at 92% 8%, rgba(13, 148, 136, 0.07), transparent 60%),
radial-gradient(520px 420px at 6% 94%, rgba(37, 99, 235, 0.06), transparent 60%),
radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96' viewBox='0 0 480 96'%3E%3Cpath d='M0,48 L90,48 L108,14 L126,82 L144,30 L162,48 L260,48 C290,48 300,66 330,66 L480,66' stroke='%230D9488' stroke-width='1.6' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='140' viewBox='0 0 560 140'%3E%3Cpath d='M-20,110 C 100,40 180,150 300,80 S 480,10 580,70' stroke='%232563EB' stroke-width='1.6' fill='none' opacity='0.05'/%3E%3C/svg%3E");
background-size: auto, auto, 32px 32px, 480px 96px, 560px 140px;
background-repeat: no-repeat, no-repeat, repeat, repeat-x, repeat;
background-position: 0 0, 0 0, 0 0, 0 58%, 0 0;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}
.safety-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 3.5rem);
}
/* ---- Intro ---- */
.safety-intro {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.safety-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.safety-heading {
margin-top: 0.75rem;
font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.safety-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text-gray);
}
/* ---- Card grid: clean, uniform 3x2 ---- */
/* Exactly 6 equal-width, equal-treatment cards, centred inside the
section via .safety-container's max-width + margin auto. Plain grid
auto-flow — 3 per row on desktop, no explicit per-card placement
needed since every card is the same size (unlike the Services
grid's bento, this one is deliberately not asymmetric). */
.safety-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.safety-grid-item {
display: flex;
}
.safety-card {
position: relative;
overflow: hidden;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.85rem;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.07);
border-radius: 22px;
box-shadow: 0 16px 36px -26px rgba(30, 41, 59, 0.2);
padding: 1.75rem 1.5rem;
transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
/* Small, off-centre teal accent glow, alternating to blue on the
even-positioned cards so the grid reads as varied rather than six
identical tiles repeating one accent colour. */
.safety-card-accent {
position: absolute;
top: -34%;
right: -22%;
width: 150px;
height: 150px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(13, 148, 136, 0.14), transparent 72%);
}
.safety-grid-item:nth-child(2n) .safety-card-accent {
background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 72%);
}
.safety-card-icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.safety-card-icon svg {
width: 24px;
height: 24px;
}
.safety-card-title {
position: relative;
z-index: 1;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.3;
}
.safety-card-desc {
position: relative;
z-index: 1;
font-size: 0.92rem;
line-height: 1.55;
color: var(--color-text-gray);
}
/* ---- Interactions ---- */
/* Normal card hover: a subtle border/shadow shift (colour only, so it
stays on for every visitor) plus a small lift — the lift is the only
transform-based motion, so it's the only part scoped behind
motion-allowing, hover-capable, mouse-driven contexts. On touch,
:active gives brief, direct tap feedback instead of a hover state
that could otherwise get stuck after a tap. */
.safety-card:hover {
border-color: rgba(13, 148, 136, 0.3);
box-shadow: 0 22px 42px -24px rgba(13, 148, 136, 0.3);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.safety-card:hover {
transform: translateY(-4px);
}
}
.safety-card:active {
transform: scale(0.99);
transition-duration: 0.15s;
}
/* ---- Footer: trust statement + CTA ---- */
.safety-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
max-width: 780px;
margin: 0 auto;
}
.safety-footer-note {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
font-style: italic;
color: var(--color-primary-teal-dark);
max-width: 34ch;
}
.safety-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-teal-dark);
color: var(--color-white);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
transition: filter 0.25s var(--ease-out);
}
.safety-cta:hover,
.safety-cta:focus-visible {
filter: brightness(0.94);
}
.safety-cta-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.safety-cta:hover .safety-cta-arrow,
.safety-cta:focus-visible .safety-cta-arrow {
transform: translateX(4px);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.safety-cta {
transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.safety-cta:hover {
transform: translateY(-2px);
}
}
/* Scroll-triggered reveal — simple fade/slide only, one small stagger
step per card (same pattern as the Services grid above). Opt-in via
.js-reveal (added only by JS, only when motion is allowed), so a
no-JS or reduced-motion visitor always sees the full grid
immediately. */
.safety-grid.js-reveal > .safety-grid-item {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.safety-grid.js-reveal.is-visible > .safety-grid-item {
opacity: 1;
transform: translateY(0);
}
.safety-grid.js-reveal.is-visible > .safety-grid-item:nth-child(1) { transition-delay: 0.05s; }
.safety-grid.js-reveal.is-visible > .safety-grid-item:nth-child(2) { transition-delay: 0.1s; }
.safety-grid.js-reveal.is-visible > .safety-grid-item:nth-child(3) { transition-delay: 0.15s; }
.safety-grid.js-reveal.is-visible > .safety-grid-item:nth-child(4) { transition-delay: 0.2s; }
.safety-grid.js-reveal.is-visible > .safety-grid-item:nth-child(5) { transition-delay: 0.25s; }
.safety-grid.js-reveal.is-visible > .safety-grid-item:nth-child(6) { transition-delay: 0.3s; }
/* ---- Responsive ---- */
/* TABLET: 3 columns of equal-width cards no longer have room to
breathe, so the grid drops to 2 — still uniform, still auto-flow. */
@media (max-width: 980px) {
.safety-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* MOBILE: exactly 1 card per row, designed first for the 412/390/360px
range — comfortable spacing, no squeezed desktop layout, decorative
background simplified to the glow blobs alone (dot mesh, ECG trace
and curved line dropped) per "reduce decorative background elements
on mobile". */
@media (max-width: 640px) {
.safety-container {
gap: 2.25rem;
}
.safety-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.safety-card {
padding: 1.5rem 1.375rem;
}
.safety-bg {
background-image:
radial-gradient(560px 460px at 92% 8%, rgba(13, 148, 136, 0.07), transparent 60%),
radial-gradient(520px 420px at 6% 94%, rgba(37, 99, 235, 0.06), transparent 60%);
}
.safety-footer {
justify-content: center;
text-align: center;
}
.safety-cta {
width: 100%;
justify-content: center;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar);
also holds up at 390px and 360px. Icon + title + description remain
comfortably readable at every one of these widths, and each card's
generous padding keeps it well past the 44px touch-target minimum
even though the cards themselves aren't interactive controls. */
@media (max-width: 480px) {
.safety {
padding-inline: 1.125rem;
}
.safety-text {
font-size: 1rem;
}
.safety-card {
padding: 1.375rem 1.25rem;
}
.safety-card-icon {
width: 46px;
height: 46px;
}
.safety-card-title {
font-size: 1.02rem;
}
.safety-card-desc {
font-size: 0.88rem;
}
}
/* ==========================================================================
PATIENT & FAMILY STORIES SECTION
========================================================================== */
/* Mint background against Safety's white above it — keeps the
established alternating rhythm. Warm, human and calm: a split
storytelling layout, not another card grid. */
.stories {
position: relative;
overflow: hidden;
background: var(--color-mint);
padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(3rem, 6vw, 5rem);
}
/* SECTION BACKGROUND — very light dots, two soft organic curved lines
(teal + blue) and one warm, centred glow. Lighter and calmer than
every previous background on the page, and this section's own
unique combination (see home.css for the full breakdown). */
.stories-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(620px 480px at 50% 20%, rgba(13, 148, 136, 0.06), transparent 62%),
radial-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='150' viewBox='0 0 540 150'%3E%3Cpath d='M-20,30 C 100,90 160,-10 280,50 S 460,130 580,60' stroke='%230D9488' stroke-width='1.5' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='150' viewBox='0 0 540 150'%3E%3Cpath d='M-20,120 C 120,60 180,150 300,90 S 460,20 580,90' stroke='%232563EB' stroke-width='1.5' fill='none' opacity='0.04'/%3E%3C/svg%3E");
background-size: auto, 30px 30px, 540px 150px, 540px 150px;
background-repeat: no-repeat, repeat, repeat, repeat;
background-position: 0 0, 0 0, 0 0, 0 45%;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}
.stories-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 3.5rem);
}
/* ---- Intro ---- */
.stories-intro {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.stories-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.stories-heading {
margin-top: 0.75rem;
font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.stories-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text-gray);
}
/* ---- Split storytelling grid ---- */
/* Two equal panels either side of a small connector badge — the
badge sits in a real, explicit middle grid column rather than being
absolutely positioned, so it never needs separate desktop/mobile
placement math. On mobile the template collapses to one column and
DOM order alone stacks it "patient panel, connector, family panel". */
.stories-grid {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: clamp(1.25rem, 3vw, 2rem);
}
.stories-panel {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
/* ---- Visual (photo / illustrated) ---- */
.stories-visual {
position: relative;
aspect-ratio: 4 / 3.1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
box-shadow: 0 26px 50px -26px rgba(30, 41, 59, 0.3);
}
.stories-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
opacity: 0;
transition: opacity 0.6s var(--ease-out), transform 0.3s var(--ease-out);
}
.stories-image.is-loaded {
opacity: 1;
}
.stories-image.is-error {
display: none;
}
.stories-image-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.stories-visual.has-error .stories-image-fallback {
display: flex;
}
.stories-image-fallback svg {
width: 26%;
height: 26%;
}
/* The Family Experience visual reuses the same local photo (there is
no second, distinct asset) but is deliberately made to read as a
different moment: mirrored framing plus a warm mint/teal wash on
top, rather than a literal duplicate of the Patient panel. */
.stories-visual--illustrated .stories-image {
transform: scaleX(-1);
object-position: center 30%;
}
.stories-visual-wash {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(160deg, rgba(240, 253, 250, 0.15), rgba(13, 148, 136, 0.38) 78%);
mix-blend-mode: multiply;
pointer-events: none;
}
.stories-visual-label {
position: absolute;
left: 1rem;
bottom: 1rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.85rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 26px -16px rgba(30, 41, 59, 0.35);
font-size: 0.82rem;
font-weight: 700;
color: var(--color-navy);
}
.stories-visual-label-icon {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--color-primary-teal);
flex-shrink: 0;
}
.stories-visual-label-icon svg {
width: 100%;
height: 100%;
}
/* Subtle image hover — the only transform-based motion on the visual,
so it's scoped behind motion-allowing, hover-capable, mouse-driven
contexts. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.stories-visual:hover .stories-image {
transform: scale(1.045);
}
.stories-visual--illustrated:hover .stories-image {
transform: scaleX(-1) scale(1.045);
}
}
/* ---- Connector: Patient ↔ Family ↔ K7 Care ---- */
.stories-connector {
position: relative;
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0 0.25rem;
}
.stories-connector::before,
.stories-connector::after {
content: "";
position: absolute;
top: 50%;
width: 22px;
height: 0;
border-top: 2px dashed rgba(13, 148, 136, 0.3);
}
.stories-connector::before {
right: 100%;
}
.stories-connector::after {
left: 100%;
}
.stories-connector-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--color-white);
color: var(--color-primary-teal);
border: 1.5px solid rgba(13, 148, 136, 0.18);
box-shadow: 0 14px 30px -18px rgba(13, 148, 136, 0.4);
flex-shrink: 0;
}
.stories-connector-icon svg {
width: 24px;
height: 24px;
}
.stories-connector-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--color-primary-teal-dark);
white-space: nowrap;
}
/* ---- Benefits ---- */
.stories-benefits-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-navy);
}
.stories-benefits-list {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.stories-benefits-list li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-gray);
}
.stories-benefits-icon {
flex-shrink: 0;
margin-top: 0.2rem;
width: 18px;
height: 18px;
color: var(--color-primary-teal);
}
/* ---- Footer: trust statement + CTA ---- */
.stories-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
max-width: 780px;
margin: 0 auto;
}
.stories-footer-note {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
font-style: italic;
color: var(--color-primary-teal-dark);
max-width: 36ch;
}
.stories-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-teal-dark);
color: var(--color-white);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 14px 30px -14px rgba(13, 148, 136, 0.5);
transition: filter 0.25s var(--ease-out);
}
.stories-cta:hover,
.stories-cta:focus-visible {
filter: brightness(0.94);
}
.stories-cta-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.stories-cta:hover .stories-cta-arrow,
.stories-cta:focus-visible .stories-cta-arrow {
transform: translateX(4px);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.stories-cta {
transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.stories-cta:hover {
transform: translateY(-2px);
}
}
/* Scroll-triggered reveal — simple fade/slide, one small stagger step
per panel (patient, then family). Opt-in via .js-reveal (added only
by JS, only when motion is allowed), so a no-JS or reduced-motion
visitor always sees the full section immediately. */
.stories-grid.js-reveal .stories-panel {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.stories-grid.js-reveal.is-visible .stories-panel {
opacity: 1;
transform: translateY(0);
}
.stories-grid.js-reveal.is-visible .stories-panel--family {
transition-delay: 0.1s;
}
/* ---- Responsive ---- */
@media (max-width: 900px) {
.stories-visual {
aspect-ratio: 4 / 3.4;
}
}
/* MOBILE: the split grid collapses to a single column — patient panel,
then the connector, then the family panel, in that DOM order —
designed first for the 412/390/360px range. Images stay prominent
but height-controlled; decorative background is simplified to the
central glow alone (dots and curved lines dropped) per "reduce
decorative elements on mobile". */
@media (max-width: 760px) {
.stories-container {
gap: 2.25rem;
}
.stories-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
justify-items: center;
}
.stories-panel {
width: 100%;
}
.stories-visual {
aspect-ratio: 16 / 10;
max-height: 260px;
}
.stories-connector {
flex-direction: row;
gap: 0.6rem;
padding: 0.4rem 0;
}
.stories-connector::before,
.stories-connector::after {
display: none;
}
.stories-connector-icon {
width: 40px;
height: 40px;
}
.stories-connector-icon svg {
width: 20px;
height: 20px;
}
.stories-bg {
background-image: radial-gradient(620px 480px at 50% 20%, rgba(13, 148, 136, 0.06), transparent 62%);
}
.stories-footer {
justify-content: center;
text-align: center;
}
.stories-cta {
width: 100%;
justify-content: center;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar);
also holds up at 390px and 360px. The visual label pill and every
benefit list row sit comfortably past the 44px touch-friendly
spacing guideline even though none of them are separate controls. */
@media (max-width: 480px) {
.stories {
padding-inline: 1.125rem;
}
.stories-text {
font-size: 1rem;
}
.stories-visual {
max-height: 220px;
}
.stories-visual-label {
font-size: 0.76rem;
padding: 0.45rem 0.7rem;
}
.stories-benefits-title {
font-size: 1rem;
}
.stories-benefits-list li {
font-size: 0.9rem;
}
}
/* ==========================================================================
HEALTH INSIGHTS SECTION
========================================================================== */
/* White background against Stories' mint above it — keeps the
established alternating rhythm. A premium editorial grid, not a
generic blog template: real article cards with their own visual
identity. */
.insights {
position: relative;
overflow: hidden;
background: var(--color-white);
padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(3rem, 6vw, 5rem);
}
/* SECTION BACKGROUND — fine, faint horizontal "ruled" lines (an
editorial/print cue no other section uses), a soft teal wash at the
top and a scatter of tiny blue dots. This section's own unique
combination (see home.css for the full breakdown). */
.insights-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(180deg, rgba(13, 148, 136, 0.05), transparent 42%),
linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px);
background-size: auto, 100% 38px, 26px 26px;
background-repeat: no-repeat, repeat, repeat;
-webkit-mask-image: linear-gradient(to bottom, black, black 82%, transparent);
mask-image: linear-gradient(to bottom, black, black 82%, transparent);
}
.insights-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.25rem, 4.5vw, 3rem);
}
/* ---- Intro ---- */
.insights-intro {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.insights-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.insights-heading {
margin-top: 0.75rem;
font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.insights-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text-gray);
}
/* ---- Article grid ---- */
.insights-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.75rem;
}
.insight-card {
height: 100%;
}
/* Entire card clickable via one anchor wrapping the whole article —
the accessible name is the full visible text (category, title,
excerpt, cue), same established pattern as the Services cards
above. */
.insight-card-link {
display: flex;
flex-direction: column;
height: 100%;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.08);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 36px -26px rgba(30, 41, 59, 0.22);
color: inherit;
text-decoration: none;
transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.insight-card-visual {
position: relative;
aspect-ratio: 4 / 2.6;
overflow: hidden;
background: var(--color-mint);
}
.insight-card-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s var(--ease-out), transform 0.35s var(--ease-out);
}
.insight-card-image.is-loaded {
opacity: 1;
}
.insight-card-image.is-error {
display: none;
}
.insight-card-image-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.insight-card-visual.has-error .insight-card-image-fallback {
display: flex;
}
.insight-card-image-fallback svg {
width: 26%;
height: 26%;
}
/* Each card reuses the same local photo but is framed and tinted
differently — a distinct crop plus its own soft colour wash — so
the three read as separate visual identities rather than one image
repeated three times. */
.insight-card-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.insight-card--elderly .insight-card-image {
object-position: center 12%;
}
.insight-card--elderly .insight-card-visual::after {
background: linear-gradient(165deg, rgba(13, 148, 136, 0.04), rgba(13, 148, 136, 0.32) 85%);
mix-blend-mode: multiply;
}
.insight-card--recovery .insight-card-image {
object-position: center 45%;
}
.insight-card--recovery .insight-card-visual::after {
background: linear-gradient(165deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.3) 85%);
mix-blend-mode: multiply;
}
.insight-card--nursing .insight-card-image {
object-position: center 78%;
}
.insight-card--nursing .insight-card-visual::after {
background: linear-gradient(165deg, rgba(30, 41, 59, 0.04), rgba(30, 41, 59, 0.28) 85%);
mix-blend-mode: multiply;
}
.insight-card-category {
position: absolute;
top: 0.85rem;
left: 0.85rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.75rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.92);
font-size: 0.72rem;
font-weight: 700;
color: var(--color-navy);
box-shadow: 0 10px 22px -14px rgba(30, 41, 59, 0.35);
}
.insight-card-category svg {
width: 14px;
height: 14px;
color: var(--color-primary-teal);
}
.insight-card-body {
position: relative;
z-index: 1;
padding: 1.5rem 1.375rem 1.625rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
flex: 1;
}
.insight-card-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.35;
}
.insight-card-excerpt {
font-size: 0.9rem;
line-height: 1.6;
color: var(--color-text-gray);
flex: 1;
}
.insight-card-cue {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: auto;
padding-top: 0.25rem;
font-size: 0.88rem;
font-weight: 700;
color: var(--color-primary-teal-dark);
}
.insight-card-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
/* ---- Interactions ---- */
.insight-card-link:hover,
.insight-card-link:focus-visible {
border-color: rgba(13, 148, 136, 0.28);
box-shadow: 0 22px 42px -24px rgba(13, 148, 136, 0.3);
}
.insight-card-link:focus-visible {
outline: 2px solid var(--color-primary-teal);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.insight-card-link:hover {
transform: translateY(-4px);
}
.insight-card-link:hover .insight-card-image {
transform: scale(1.05);
}
.insight-card-link:hover .insight-card-arrow {
transform: translateX(4px);
}
}
/* Scroll-triggered reveal — simple fade/slide, small per-card
stagger (same pattern as the Services grid above). Opt-in via
.js-reveal (added only by JS, only when motion is allowed), so a
no-JS or reduced-motion visitor always sees the full grid
immediately. */
.insights-grid.js-reveal > li {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.insights-grid.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.insights-grid.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.insights-grid.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.1s; }
.insights-grid.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.15s; }
/* ---- Responsive ---- */
@media (max-width: 900px) {
.insights-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* MOBILE: cards stack cleanly full-width, designed first for the
412/390/360px range — comfortable spacing, no squeezed desktop
layout, decorative background simplified (dot layer dropped) per
"reduce decorative elements on mobile". */
@media (max-width: 640px) {
.insights-container {
gap: 2rem;
}
.insights-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.insight-card-visual {
aspect-ratio: 16 / 10;
}
.insights-bg {
background-image: linear-gradient(180deg, rgba(13, 148, 136, 0.05), transparent 42%), linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px);
background-size: auto, 100% 38px;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar);
also holds up at 390px and 360px. The whole card is the tap target,
comfortably taller than 44px. */
@media (max-width: 480px) {
.insights {
padding-inline: 1.125rem;
}
.insight-card-body {
padding: 1.25rem 1.125rem 1.375rem;
}
.insight-card-title {
font-size: 1.02rem;
}
.insight-card-excerpt {
font-size: 0.86rem;
}
}
/* ==========================================================================
FINAL CTA SECTION
========================================================================== */
/* A deliberate visual climax to close the page: a bold, saturated
teal-to-blue gradient banner instead of the calm white/mint
backgrounds used everywhere else — the "strong visual transition"
from Health Insights' quiet editorial grid into a confident final
call to action. */
.final-cta {
position: relative;
overflow: hidden;
padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.final-cta-bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(125deg, var(--color-primary-teal-dark) 0%, var(--color-primary-teal) 48%, var(--color-secondary-blue) 100%);
}
/* The same local caregiver photo, blended into the gradient as an
ambient backdrop on the right rather than a discrete framed image —
a different visual treatment from the Hero's and Patient & Family
Stories' crisp photo frames. */
.final-cta-photo {
position: absolute;
inset: 0 0 0 auto;
z-index: 0;
width: 55%;
max-width: 640px;
background-image: url("assets/hero-caregiver.png");
background-size: cover;
background-position: center 15%;
/* Dimmed and pushed further right (mask fade starts later) than the
original pass — the blue-tinted overlay was reaching far enough
left to compete with the heading text for contrast. Keeping the
text dominant is more important than the backdrop's intensity. */
opacity: 0.22;
mix-blend-mode: overlay;
-webkit-mask-image: linear-gradient(90deg, transparent, black 52%);
mask-image: linear-gradient(90deg, transparent, black 52%);
pointer-events: none;
}
/* Subtle, static ECG line-art detail low in the banner — purely
atmospheric, not tied to any interaction. */
.final-cta-pulse {
position: absolute;
left: 0;
right: 0;
bottom: 14%;
z-index: 1;
width: 100%;
height: 70px;
color: rgba(255, 255, 255, 0.16);
pointer-events: none;
}
.final-cta-container {
position: relative;
z-index: 2;
max-width: var(--container-max);
margin: 0 auto;
}
.final-cta-content {
max-width: 640px;
}
.final-cta-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
/* Large but controlled: scales with viewport, capped well short of
the Hero's title so it reads as a confident close, not a repeat of
the page's opening statement. */
.final-cta-heading {
margin-top: 0.75rem;
font-size: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
line-height: 1.14;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-white);
}
/* "Leaving Home." — kept bright white (not the brand teal used for
Hero's highlight span, which would disappear against this section's
teal/blue gradient) with a soft light-mint glow behind it for
emphasis, plus a faint dark text-shadow so the white stays crisp
even where the background runs lighter. No font-size, weight or
line-height override, so the heading's size/layout/typography is
unchanged — only inline-block, to keep the glow anchored tightly to
this phrase instead of spanning the full line width. */
.final-cta-heading-highlight {
position: relative;
display: inline-block;
color: var(--color-white);
text-shadow: 0 2px 10px rgba(11, 22, 38, 0.4);
}
.final-cta-heading-highlight::before {
content: "";
position: absolute;
inset: -0.08em -0.16em;
z-index: -1;
border-radius: 0.35em;
background: rgba(240, 253, 250, 0.22);
box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.3);
pointer-events: none;
}
.final-cta-text {
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
max-width: 52ch;
}
.final-cta-buttons {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.final-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 1rem 1.85rem;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 1rem;
transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.final-cta-btn--primary {
background: var(--color-white);
color: var(--color-primary-teal-dark);
box-shadow: 0 20px 40px -18px rgba(11, 22, 38, 0.45);
}
.final-cta-btn--primary:hover,
.final-cta-btn--primary:focus-visible {
background: var(--color-mint);
}
.final-cta-btn--secondary {
background: transparent;
color: var(--color-white);
border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.final-cta-btn--secondary:hover,
.final-cta-btn--secondary:focus-visible {
border-color: var(--color-white);
background: rgba(255, 255, 255, 0.12);
}
.final-cta-btn-icon {
width: 18px;
height: 18px;
}
.final-cta-btn-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.final-cta-btn:hover .final-cta-btn-arrow {
transform: translateX(4px);
}
.final-cta-btn:focus-visible {
outline: 2px solid var(--color-white);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.final-cta-btn:hover {
transform: translateY(-2px);
}
}
/* Scroll-triggered reveal — one simple fade/slide on the whole content
block. Opt-in via .js-reveal (added only by JS, only when motion is
allowed), so a no-JS or reduced-motion visitor always sees the full
CTA immediately. */
.final-cta-content.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.final-cta-content.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---- Responsive ---- */
/* MOBILE: the photo backdrop widens to a full-bleed, faded ambient
wash rather than a right-anchored panel (there's no separate text
column to protect from it once everything stacks); the ECG line is
dropped, per "reduce decorative elements on mobile". Buttons become
full-width and stack. */
@media (max-width: 760px) {
.final-cta-photo {
width: 100%;
max-width: none;
opacity: 0.16;
-webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 75%, transparent);
mask-image: linear-gradient(180deg, transparent, black 30%, black 75%, transparent);
}
.final-cta-pulse {
display: none;
}
.final-cta-content {
max-width: none;
}
.final-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.final-cta-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.final-cta-heading {
font-size: clamp(1.75rem, 1.2rem + 4vw, 2.35rem);
}
.final-cta-text {
font-size: 1rem;
}
.final-cta-btn {
padding: 0.9rem 1.5rem;
font-size: 0.95rem;
}
}
/* ==========================================================================
GLOBAL FOOTER
========================================================================== */
/* Deep navy base with two soft teal/blue radial glows blended in —
the site's one dark surface, reused unmodified across every page. */
.site-footer {
position: relative;
overflow: hidden;
background: #0B1220;
color: rgba(255, 255, 255, 0.75);
}
/* SIGNATURE BACKGROUND — radial teal/blue glow, a faint medical-cross
tile and a scatter of dots, layered under the watermark/ECG/curves
added as separate elements below. All static; nothing here or
anywhere else in the footer animates on its own. */
.footer-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(900px 560px at 8% -10%, rgba(13, 148, 136, 0.28), transparent 60%),
radial-gradient(800px 560px at 96% 110%, rgba(37, 99, 235, 0.24), transparent 60%),
linear-gradient(160deg, #0B1220 0%, var(--color-navy) 55%, #0F3B3A 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 26v20M26 36h20' stroke='%23FFFFFF' stroke-width='1.3' stroke-linecap='round' opacity='0.035'/%3E%3C/svg%3E"),
radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: auto, auto, auto, 72px 72px, 30px 30px;
background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
/* Large, low-opacity brand watermark bleeding off the bottom-right
corner — purely atmospheric, clipped by .site-footer's overflow:
hidden so it can never cause horizontal scroll. */
.footer-watermark {
position: absolute;
right: -2%;
bottom: -8%;
z-index: 0;
font-size: clamp(5rem, 16vw, 13rem);
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1;
color: rgba(255, 255, 255, 0.035);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.footer-pulse {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 0;
width: 100%;
height: 46px;
color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.footer-curves {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* ---- TOP: Premium CTA strip ---- */
.footer-cta {
position: relative;
z-index: 1;
padding: clamp(2.25rem, 4.5vw, 3.25rem) 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-cta-container {
max-width: var(--container-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.footer-cta-content {
max-width: 560px;
}
.footer-cta-eyebrow {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-mint);
}
.footer-cta-heading {
margin-top: 0.6rem;
font-size: clamp(1.5rem, 1rem + 2.2vw, 2.15rem);
line-height: 1.22;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-white);
}
.footer-cta-text {
margin-top: 0.65rem;
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
max-width: 48ch;
}
.footer-cta-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.footer-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.6rem;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.footer-cta-btn--primary {
background: var(--color-white);
color: var(--color-primary-teal-dark);
box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5);
}
.footer-cta-btn--primary:hover,
.footer-cta-btn--primary:focus-visible {
background: var(--color-mint);
}
.footer-cta-btn--secondary {
background: transparent;
color: var(--color-white);
border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.footer-cta-btn--secondary:hover,
.footer-cta-btn--secondary:focus-visible {
border-color: var(--color-white);
background: rgba(255, 255, 255, 0.1);
}
.footer-cta-btn-icon {
width: 17px;
height: 17px;
}
.footer-cta-btn-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.footer-cta-btn:hover .footer-cta-btn-arrow {
transform: translateX(4px);
}
.footer-cta-btn:focus-visible {
outline: 2px solid var(--color-white);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.footer-cta-btn:hover {
transform: translateY(-2px);
}
}
/* ---- MAIN: horizontal footer grid ---- */
.footer-main {
position: relative;
z-index: 1;
padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
}
/* Brand column gets extra width; the four nav/contact columns share
the rest equally — a deliberately horizontal 5-up row, not a tall
stack of vertical lists. */
.footer-main-container {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
gap: 2rem;
}
.footer-col--brand {
padding-right: 1rem;
}
.footer-logo {
display: inline-flex;
}
/* A solid white badge behind the logo mark — guarantees the logo
stays legible against the dark footer regardless of its own
colouring, the same defensive approach as the fallback below. */
.footer-logo-badge {
display: inline-flex;
align-items: center;
background: var(--color-white);
padding: 0.5rem 0.85rem;
border-radius: var(--radius-md);
box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.45);
}
.footer-logo-img {
display: block;
height: 32px;
width: auto;
}
.footer-logo-img.is-error {
display: none;
}
.footer-logo-fallback {
display: none;
align-items: center;
gap: 0.55rem;
}
.footer-logo.has-error .footer-logo-fallback {
display: inline-flex;
}
.footer-logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: var(--color-primary-teal);
color: var(--color-white);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: -0.02em;
flex-shrink: 0;
}
.footer-logo-fallback-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.footer-logo-fallback-text strong {
font-size: 0.92rem;
color: var(--color-navy);
font-weight: 700;
}
.footer-logo-fallback-text small {
font-size: 0.65rem;
color: var(--color-primary-teal);
font-weight: 600;
}
.footer-brand-desc {
margin-top: 1.1rem;
font-size: 0.92rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.68);
max-width: 34ch;
}
.footer-brand-location {
margin-top: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.88rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
.footer-brand-location-icon {
width: 16px;
height: 16px;
color: var(--color-mint);
flex-shrink: 0;
}
/* ---- Nav columns (native , always open on desktop) ---- */
/* On desktop every column is permanently expanded and non-interactive
— .footer-col-summary's pointer-events: none means clicking it does
nothing, so [open] never toggles off. On mobile (see the 760px
breakpoint) this same markup becomes a real, keyboard-operable
accordion with zero extra JS: / already handles
toggling, focus and Enter/Space activation natively. */
.footer-col-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
list-style: none;
cursor: default;
pointer-events: none;
margin-bottom: 1rem;
}
.footer-col-summary::-webkit-details-marker {
display: none;
}
.footer-col-title {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-white);
}
.footer-col-chevron {
display: none;
width: 11px;
height: 11px;
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
transition: transform 0.25s var(--ease-out);
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
/* Underline-on-hover accent is a colour-only transition (text-
decoration-color), never a transform, so it's safe to leave
unconditional — nothing here needs a prefers-reduced-motion guard. */
.footer-links a {
display: inline-block;
padding-block: 0.15rem;
font-size: 0.92rem;
color: rgba(255, 255, 255, 0.68);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}
.footer-links a:hover,
.footer-links a:focus-visible {
color: var(--color-white);
text-decoration-color: var(--color-mint);
}
.footer-links a:focus-visible {
outline: 2px solid var(--color-mint);
outline-offset: 3px;
border-radius: 2px;
}
/* ---- Contact column ---- */
.footer-contact {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.footer-contact-link,
.footer-contact-static {
display: flex;
align-items: flex-start;
gap: 0.65rem;
color: rgba(255, 255, 255, 0.68);
}
.footer-contact-link {
padding-block: 0.1rem;
text-decoration: none;
transition: color 0.2s var(--ease-out);
}
.footer-contact-link:hover,
.footer-contact-link:focus-visible {
color: var(--color-white);
}
.footer-contact-link:focus-visible {
outline: 2px solid var(--color-mint);
outline-offset: 3px;
border-radius: 4px;
}
.footer-contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
background: rgba(255, 255, 255, 0.08);
color: var(--color-mint);
}
.footer-contact-icon svg {
width: 15px;
height: 15px;
}
.footer-contact-text {
font-size: 0.92rem;
line-height: 1.4;
padding-top: 0.3rem;
}
.footer-contact-detail {
display: inline-block;
margin-top: 0.15rem;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.55);
}
/* ---- BOTTOM BAR ---- */
.footer-bottom {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.25rem 1.5rem;
}
.footer-bottom-container {
max-width: var(--container-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem 1.5rem;
}
.footer-copyright {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 1.1rem;
}
.footer-legal a,
.footer-credit a {
color: rgba(255, 255, 255, 0.55);
font-size: 0.82rem;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}
.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-credit a:hover,
.footer-credit a:focus-visible {
color: var(--color-white);
text-decoration-color: var(--color-mint);
}
.footer-legal a:focus-visible,
.footer-credit a:focus-visible {
outline: 2px solid var(--color-mint);
outline-offset: 3px;
border-radius: 2px;
}
.footer-credit {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-credit a {
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
}
/* Gentle heartbeat: a single smooth scale + soft teal glow, slow
enough to read as calm rather than flashy. Static by default;
the loop only runs when motion is allowed. */
.footer-credit-heart {
display: inline-block;
transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
.footer-credit-heart {
animation: footer-heartbeat 2.6s ease-in-out infinite;
}
}
@keyframes footer-heartbeat {
0%,
100% {
transform: scale(1);
text-shadow: 0 0 0 rgba(13, 148, 136, 0);
}
50% {
transform: scale(1.14);
text-shadow: 0 0 10px rgba(13, 148, 136, 0.6), 0 0 3px rgba(13, 148, 136, 0.4);
}
}
/* TechVahni: a subtle shimmering gradient underline that draws in on
hover/focus, layered on top of the plain colour-only underline every
other footer link already gets (see .footer-legal a, .footer-credit a
above) — that plain version stays the baseline for touch and
reduced-motion, this is a mouse-only, motion-allowed enhancement. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.footer-credit-link {
position: relative;
text-decoration: none;
}
.footer-credit-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1.5px;
background: linear-gradient(90deg, var(--color-primary-teal), var(--color-mint), var(--color-primary-teal));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s var(--ease-out);
}
.footer-credit-link:hover::after,
.footer-credit-link:focus-visible::after {
transform: scaleX(1);
}
}
/* ---- Responsive ---- */
/* TABLET: brand spans the full row, the four nav/contact columns
settle into a tidy 2x2 grid beneath it. */
@media (max-width: 980px) {
.footer-main-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 2.5rem;
}
.footer-col--brand {
grid-column: 1 / 3;
padding-right: 0;
}
}
/* MOBILE: the CTA strip and bottom bar stack; the four nav columns
become real, tappable accordions — designed first for the
412/390/360px range. Each gets its own divider line and
a 44px-tall summary row; the chevron reappears as the toggle
affordance now that the summary is genuinely interactive again. */
@media (max-width: 760px) {
.footer-cta-container {
flex-direction: column;
align-items: flex-start;
}
.footer-cta-buttons {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.footer-cta-btn {
width: 100%;
justify-content: center;
}
.footer-main-container {
grid-template-columns: 1fr;
row-gap: 0;
}
.footer-col--brand {
grid-column: auto;
margin-bottom: 2rem;
}
details.footer-col {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.9rem 0;
}
details.footer-col:last-of-type {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-col-summary {
cursor: pointer;
pointer-events: auto;
min-height: 44px;
margin-bottom: 0;
}
.footer-col-chevron {
display: inline-flex;
}
details.footer-col[open] .footer-col-chevron {
transform: rotate(180deg);
}
details.footer-col nav,
details.footer-col .footer-contact {
padding-top: 0.9rem;
}
.footer-bottom-container {
flex-direction: column;
align-items: flex-start;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
/* Tuned against a 412px CSS-px viewport (Galaxy S20 Ultra and similar);
also holds up at 390px and 360px. Every accordion summary and link
row is at least 44px tall (min-height / padding above). */
@media (max-width: 480px) {
.footer-cta,
.footer-main,
.footer-bottom {
padding-inline: 1.125rem;
}
.footer-cta-heading {
font-size: clamp(1.35rem, 1rem + 3vw, 1.75rem);
}
.footer-cta-text {
font-size: 0.95rem;
}
.footer-watermark {
font-size: clamp(3.5rem, 22vw, 6rem);
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 01: HERO
========================================================================== */
/* This hero deliberately does NOT reuse the Home page Hero's own
wrapper classes (.hero, .hero-content, .hero-visual). Two existing
rules would otherwise leak in unwanted:
- `.hero-content h1` (a later, duplicate rule targeting the
element selector) outranks `.hero-title` on specificity and
would silently override this page's heading size.
- `.hero-title`/`.hero-visual`'s entrance animations run at
0.7s/0.9s, longer than this page's explicit 200–400ms cap.
Everything else that has no such conflict — design tokens, the
.btn/.btn-primary/.btn-secondary buttons, the
.hero-image-frame/.hero-image/.hero-image-fallback photo treatment
(and its existing JS load/error handling + hover-zoom, both reused
with zero new code) — is reused directly, so the page still reads
as the same K7 website. */
.about-hero {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-white);
}
/* SECTION BACKGROUND — thin curved lines, a faint dot grid and a soft
radial teal glow: the 3-ingredient "faded healthcare background
system" requested for this page, built with the same technique as
the Home page Hero's own backdrop but a fresh composition (curved
lines are new; the Home Hero's backdrop has none). */
.about-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(640px 460px at 88% 8%, rgba(13, 148, 136, 0.1), transparent 62%),
radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='160' viewBox='0 0 560 160'%3E%3Cpath d='M-20,40 C 100,10 160,110 280,60 S 460,10 580,60' stroke='%230D9488' stroke-width='1.4' fill='none' opacity='0.07'/%3E%3Cpath d='M-20,130 C 120,90 180,160 300,110 S 460,70 580,120' stroke='%232563EB' stroke-width='1.4' fill='none' opacity='0.05'/%3E%3C/svg%3E");
background-size: auto, 26px 26px, 560px 160px;
background-repeat: no-repeat, repeat, repeat;
}
.about-hero-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: clamp(2.5rem, 5vw, 4.5rem);
}
/* ---- Content column ---- */
.about-hero-content {
max-width: 620px;
}
.about-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-hero-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.about-hero-title {
margin-top: 1.25rem;
font-size: clamp(2.45rem, 4.6vw, 3.7rem);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
.about-hero-title-highlight {
color: var(--color-primary-teal);
}
.about-hero-text {
margin-top: 1rem;
font-size: 1.1875rem;
line-height: 1.7;
color: var(--color-text-gray);
max-width: 52ch;
}
.about-hero-ctas {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* ---- Visual column ---- */
.about-hero-visual {
position: relative;
justify-self: center;
width: 100%;
max-width: 460px;
}
/* Scoped override: the Home page Hero's frame is a 4/5 portrait crop;
this page needs 16:9 per spec. Scoping the override under
.about-hero-visual means the Home Hero's own .hero-image-frame is
completely untouched. */
.about-hero-visual .hero-image-frame {
aspect-ratio: 16 / 9;
}
.about-hero-visual .hero-image {
object-position: center 22%;
}
/* ---- Entrance animation ---- */
/* Reuses the Home Hero's own @keyframes (hero-rise / hero-fade-in)
but at this page's required 200–400ms, not the Home Hero's
700ms/900ms — a deliberately shorter, subtler reveal. */
@media (prefers-reduced-motion: no-preference) {
.about-hero-eyebrow,
.about-hero-title,
.about-hero-text,
.about-hero-ctas {
opacity: 0;
animation: hero-rise 0.35s var(--ease-out) forwards;
}
.about-hero-eyebrow { animation-delay: 0.05s; }
.about-hero-title { animation-delay: 0.1s; }
.about-hero-text { animation-delay: 0.15s; }
.about-hero-ctas { animation-delay: 0.2s; }
.about-hero-visual {
opacity: 0;
animation: hero-fade-in 0.4s var(--ease-out) forwards;
animation-delay: 0.15s;
}
}
/* Button hover/focus, the image hover-zoom (.hero-image-frame:hover
.hero-image) and the image load/error fallback are all inherited
for free from the reused .btn and .hero-image rules and the
existing Hero JS IIFE — no new CSS or JS needed for any of that. */
/* ---- Responsive ---- */
@media (max-width: 960px) {
.about-hero-container {
grid-template-columns: 1fr;
}
.about-hero-content {
max-width: none;
}
/* Text first, image second — matches source order already. */
.about-hero-visual {
max-width: 480px;
margin: 0 auto;
order: 2;
}
.about-hero-content {
order: 1;
}
}
/* MOBILE: designed first for the 412/390/360px range — tighter
heading/copy rhythm, full-width stacked buttons, decorative
background simplified (curved-line layer dropped, glow kept small)
per "reduce decorative elements on mobile". Avoids excessive hero
height by trimming section padding rather than just shrinking text. */
@media (max-width: 560px) {
.about-hero {
padding: 2.75rem 1.25rem;
}
.about-hero-bg {
background-image:
radial-gradient(480px 360px at 88% 6%, rgba(13, 148, 136, 0.09), transparent 62%),
radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px);
background-size: auto, 24px 24px;
}
.about-hero-title {
margin-top: 1rem;
font-size: clamp(2.15rem, 8.5vw, 2.7rem);
}
.about-hero-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.6;
}
.about-hero-visual {
max-width: 100%;
}
.about-hero-ctas {
flex-direction: column;
align-items: stretch;
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 02: OUR STORY
========================================================================== */
/* Mint background against Section 01's white — same alternating rhythm
used throughout the Home page. Editorial storytelling + a layered
photo composition, deliberately not a repeat of Section 01's clean
symmetric split: images carry more visual weight here and sit on
the opposite (left) side. */
.about-story {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-mint);
}
/* SECTION BACKGROUND — a faint straight-line grid and a soft radial
teal glow behind the image composition. Distinct from Section 01's
dot-grid backdrop; the curved lines are a separate, animated layer
(see .about-story-lines) rather than baked into this tiled one. */
.about-story-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(560px 480px at 20% 45%, rgba(13, 148, 136, 0.1), transparent 62%),
linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
background-size: auto, 32px 32px, 32px 32px;
background-repeat: no-repeat, repeat, repeat;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.about-story-lines {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.12;
}
.about-story-line {
fill: none;
stroke-linecap: round;
}
/* "Subtle background line movement": a one-time draw-in, not a loop —
each line starts fully undrawn and animates to fully drawn once,
the moment the section is revealed. No continuous motion. */
.about-story-lines.js-reveal .about-story-line {
stroke-dasharray: 1100;
stroke-dashoffset: 1100;
transition: stroke-dashoffset 0.6s var(--ease-out);
}
.about-story-lines.js-reveal.is-visible .about-story-line:nth-child(1) {
stroke-dashoffset: 0;
transition-delay: 0.05s;
}
.about-story-lines.js-reveal.is-visible .about-story-line:nth-child(2) {
stroke-dashoffset: 0;
transition-delay: 0.18s;
}
.about-story-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
align-items: center;
gap: clamp(2.5rem, 5vw, 4.5rem);
}
/* ---- Content column (visually on the right on desktop) ---- */
.about-story-content {
order: 2;
}
.about-story-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-story-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.about-story-heading {
margin-top: 1rem;
font-size: clamp(2rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.14;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
max-width: 16ch;
}
.about-story-heading-highlight {
color: var(--color-primary-teal);
}
.about-story-text {
margin-top: 1.1rem;
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-text-gray);
max-width: 52ch;
}
.about-story-text + .about-story-text {
margin-top: 0.9rem;
}
/* ---- Visual column (layered photo composition, left on desktop) ---- */
/* Two independent columns, not a shared-row grid: each column's total
height comes purely from its own two stacked photos, so there is
never a mismatched row forcing one image to stretch or crop to
match another. Column widths (2.7 : 1) are tuned so the landscape
pair (about1/about4, ~1.5:1 each) and the portrait pair
(about2/about3, ~0.56:1 each) land at almost exactly the same
total height — a genuinely asymmetric mosaic where nothing is cut. */
.about-story-visual {
position: relative;
order: 1;
width: 100%;
max-width: 640px;
display: flex;
align-items: flex-start;
gap: 1rem;
justify-self: center;
}
.about-story-visual-col {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.about-story-visual-col--wide {
flex: 2.7 1 0%;
}
.about-story-visual-col--narrow {
flex: 1 1 0%;
}
.about-story-glow {
position: absolute;
inset: -8%;
z-index: 0;
border-radius: 50%;
background:
radial-gradient(55% 50% at 35% 30%, rgba(13, 148, 136, 0.18), transparent 70%),
radial-gradient(50% 45% at 75% 80%, rgba(240, 253, 250, 0.9), transparent 70%);
pointer-events: none;
}
.about-story-img-frame {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
background: var(--color-mint);
border: 4px solid var(--color-white);
border-radius: var(--radius-lg);
box-shadow: 0 22px 44px -20px rgba(30, 41, 59, 0.3), 0 0 0 1px rgba(13, 148, 136, 0.16);
}
/* Each frame's aspect-ratio matches its source photo exactly (about1/
about4 are 1.498:1, about2/about3 are 0.5625:1), so object-fit:
cover below never has anything to crop — the box already is the
photo's own shape. */
.about-story-img-frame--photo-a,
.about-story-img-frame--photo-d {
aspect-ratio: 1.498;
}
.about-story-img-frame--photo-b,
.about-story-img-frame--photo-c {
aspect-ratio: 0.5625;
border-radius: var(--radius-md);
}
.about-story-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
opacity: 0;
transition: opacity 0.6s var(--ease-out), transform 0.35s var(--ease-out);
}
.about-story-img.is-loaded {
opacity: 1;
}
.about-story-img.is-error {
display: none;
}
.about-story-img-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.about-story-img-frame.has-error .about-story-img-fallback {
display: flex;
}
.about-story-img-fallback svg {
width: 28%;
height: 28%;
}
/* Subtle image hover — the only transform-based motion here besides
the entrance reveal, so it's the only part scoped behind motion-
allowing, hover-capable, mouse-driven contexts. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.about-story-img-frame:hover .about-story-img {
transform: scale(1.02);
}
}
/* ---- Entrance animation ---- */
/* Staggered text reveal + image slide/reveal, both within the
300–600ms range this section calls for (longer/slightly more
engaging than Section 01's 200–400ms). Opt-in via .js-reveal
(added only by JS, only when motion is allowed), so a no-JS or
reduced-motion visitor always sees the full section immediately. */
@media (prefers-reduced-motion: no-preference) {
.about-story-content.js-reveal .about-story-eyebrow,
.about-story-content.js-reveal .about-story-heading,
.about-story-content.js-reveal .about-story-text {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.about-story-content.js-reveal.is-visible .about-story-eyebrow,
.about-story-content.js-reveal.is-visible .about-story-heading,
.about-story-content.js-reveal.is-visible .about-story-text {
opacity: 1;
transform: translateY(0);
}
.about-story-content.js-reveal.is-visible .about-story-eyebrow { transition-delay: 0.05s; }
.about-story-content.js-reveal.is-visible .about-story-heading { transition-delay: 0.15s; }
.about-story-content.js-reveal.is-visible .about-story-text:nth-of-type(1) { transition-delay: 0.25s; }
.about-story-content.js-reveal.is-visible .about-story-text:nth-of-type(2) { transition-delay: 0.35s; }
/* Simple, uniform slide-up + fade for all four — staggered by
column then position (photo-a, photo-d down the wide column;
photo-b, photo-c down the narrow column), never a differentiated
"peek from behind" motion now that nothing overlaps. */
.about-story-visual.js-reveal .about-story-img-frame {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.about-story-visual.js-reveal.is-visible .about-story-img-frame {
opacity: 1;
transform: translateY(0);
}
.about-story-visual.js-reveal.is-visible .about-story-img-frame--photo-a { transition-delay: 0.05s; }
.about-story-visual.js-reveal.is-visible .about-story-img-frame--photo-b { transition-delay: 0.15s; }
.about-story-visual.js-reveal.is-visible .about-story-img-frame--photo-d { transition-delay: 0.25s; }
.about-story-visual.js-reveal.is-visible .about-story-img-frame--photo-c { transition-delay: 0.35s; }
}
/* ---- Responsive ---- */
/* TABLET: the 2-column mosaic scales fluidly on its own (flex-based,
no fixed aspect-ratio), so only the glow needs to go and the
content column needs to stop reserving its desktop max-width. */
@media (max-width: 900px) {
.about-story-container {
grid-template-columns: 1fr;
}
.about-story-content {
order: 1;
}
.about-story-visual {
order: 2;
max-width: 480px;
margin: 0 auto;
}
.about-story-glow {
display: none;
}
.about-story-heading {
max-width: none;
}
}
/* MOBILE: below this, the asymmetric 2-column mosaic (sized for the
portrait photos' natural 0.56:1 ratio) would run far too tall once
stacked to full width. Recompose into a compact 2x2 grid instead —
all four images shown at the SAME uniform square cell size via
object-fit: contain, so every photo stays fully visible (letterboxed
into its cell, never cropped) while the whole group stays short.
The two column wrappers go `display: contents` so their four
photos become direct grid items in one 2x2 flow; each photo then
gets an explicit `order` so the grid always reads
about1 | about2 / about3 | about4, regardless of their source
order in the markup (about1+about4 together, about2+about3
together, from the desktop mosaic's column grouping).
The Our Story text stays first, the image grid follows it.
Designed first for the 412/390/360px range. */
@media (max-width: 640px) {
.about-story {
padding: 2rem 1rem;
}
.about-story-bg {
background-image: radial-gradient(420px 360px at 20% 20%, rgba(13, 148, 136, 0.08), transparent 62%);
}
.about-story-lines {
display: none;
}
.about-story-heading {
font-size: clamp(1.85rem, 7.5vw, 2.3rem);
}
.about-story-text {
font-size: 1rem;
line-height: 1.65;
}
/* Text first, image grid below it. */
.about-story-content {
order: 1;
}
/*.about-story-visual {*/
/* order: 2;*/
/* display: grid;*/
/* grid-template-columns: repeat(2, minmax(0, 1fr));*/
/* gap: 0.75rem;*/
/* width: 100%;*/
/* max-width: 460px;*/
/* margin: 0 auto;*/
/*}*/
.about-story-visual {
order: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
min-width: 0;
}
.about-story-visual-col {
display: contents;
}
.about-story-img-frame,
.about-story-img-frame--photo-a,
.about-story-img-frame--photo-b,
.about-story-img-frame--photo-c,
.about-story-img-frame--photo-d {
width: 100%;
max-width: 100%;
min-width: 0;
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
border-width: 3px;
box-sizing: border-box;
}
/* Explicit grid reading order: about1, about2, about3, about4 —
top-left, top-right, bottom-left, bottom-right. */
.about-story-img-frame--photo-a { order: 1; }
.about-story-img-frame--photo-b { order: 2; }
.about-story-img-frame--photo-c { order: 3; }
.about-story-img-frame--photo-d { order: 4; }
.about-story-img {
object-fit: contain;
}
.about-story-visual,
.about-story-img-frame {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 03: OUR APPROACH
========================================================================== */
/* White background against Section 02's mint — keeps the established
alternating rhythm. A premium horizontal care pathway, not a card
grid: four icon nodes on one connecting line. */
.about-approach {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-white);
}
/* SECTION BACKGROUND — a static ECG/pulse trace, a soft centred
teal/mint glow and two faint dashed geometric rings. Distinct from
Section 01's curved-lines-and-dots backdrop and Section 02's line
grid + animated curves. */
.about-approach-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(680px 420px at 50% 28%, rgba(13, 148, 136, 0.08), transparent 65%);
}
.about-approach-ecg {
position: absolute;
left: 0;
right: 0;
top: 60%;
z-index: 0;
width: 100%;
height: 60px;
color: var(--color-primary-teal);
opacity: 0.07;
pointer-events: none;
}
.about-approach-ring {
position: absolute;
z-index: 0;
border-radius: 50%;
border: 1px dashed rgba(13, 148, 136, 0.14);
pointer-events: none;
}
.about-approach-ring--a {
width: 220px;
height: 220px;
top: 4%;
left: 3%;
}
.about-approach-ring--b {
width: 150px;
height: 150px;
bottom: 6%;
right: 5%;
border-color: rgba(37, 99, 235, 0.13);
}
.about-approach-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.75rem, 5.5vw, 4rem);
}
/* ---- Intro ---- */
.about-approach-intro {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.about-approach-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-approach-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.about-approach-heading {
margin-top: 1rem;
font-size: clamp(2rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.16;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
/* ---- Pathway ---- */
.about-approach-pathway {
position: relative;
}
.about-approach-line {
position: absolute;
left: 0;
top: 30px;
z-index: 0;
width: 100%;
height: 4px;
overflow: visible;
pointer-events: none;
}
.about-approach-line-path {
fill: none;
stroke-linecap: round;
}
.about-approach-steps {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
.about-approach-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.about-approach-step-node {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-white);
border: 1.5px solid rgba(13, 148, 136, 0.22);
box-shadow: 0 14px 28px -16px rgba(13, 148, 136, 0.35);
transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.about-approach-step-icon {
display: inline-flex;
color: var(--color-primary-teal);
transition: color 0.3s var(--ease-out);
}
.about-approach-step-icon svg {
width: 26px;
height: 26px;
}
.about-approach-step-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-navy);
}
.about-approach-step-desc {
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-text-gray);
max-width: 26ch;
}
/* ---- Interactions ---- */
/* Small icon/accent transition on hover — colour/background/shadow
changes stay unconditional (safe for every visitor); the icon's
own scale is the only transform, so it's the only part scoped
behind motion-allowing, hover-capable, mouse-driven contexts. */
.about-approach-step:hover .about-approach-step-node {
background: var(--color-primary-teal);
border-color: var(--color-primary-teal);
box-shadow: 0 18px 34px -16px rgba(13, 148, 136, 0.45);
}
.about-approach-step:hover .about-approach-step-icon {
color: var(--color-white);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.about-approach-step:hover .about-approach-step-icon {
transform: scale(1.08);
}
}
/* ---- Entrance animation ---- */
/* The connecting line draws itself in once, then the four steps fade/
slide in with a light stagger along the way — a single calm
choreography, not a loop. Opt-in via .js-reveal (added only by JS,
only when motion is allowed), so a no-JS or reduced-motion visitor
always sees the full pathway immediately. */
@media (prefers-reduced-motion: no-preference) {
.about-approach-line.js-reveal .about-approach-line-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 0.5s var(--ease-out);
}
.about-approach-line.js-reveal.is-visible .about-approach-line-path {
stroke-dashoffset: 0;
}
.about-approach-steps.js-reveal .about-approach-step {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.about-approach-steps.js-reveal.is-visible .about-approach-step {
opacity: 1;
transform: translateY(0);
}
.about-approach-steps.js-reveal.is-visible .about-approach-step:nth-child(1) { transition-delay: 0.1s; }
.about-approach-steps.js-reveal.is-visible .about-approach-step:nth-child(2) { transition-delay: 0.2s; }
.about-approach-steps.js-reveal.is-visible .about-approach-step:nth-child(3) { transition-delay: 0.3s; }
.about-approach-steps.js-reveal.is-visible .about-approach-step:nth-child(4) { transition-delay: 0.4s; }
}
/* ---- Responsive ---- */
/* MOBILE: below this, the 4-column horizontal pathway gets too tight
to read comfortably. Convert into a clean vertical timeline instead
— icon nodes left-aligned in a column with a vertical connector
behind them, title/description to the right of each. Designed first
for the 412/390/360px range. Decorative rings drop out; the ECG
trace and glow stay but fainter. */
@media (max-width: 760px) {
.about-approach {
padding: 2.75rem 1.25rem;
}
.about-approach-ring {
display: none;
}
.about-approach-ecg {
opacity: 0.05;
}
.about-approach-heading {
font-size: clamp(1.85rem, 7.5vw, 2.3rem);
}
.about-approach-line {
display: none;
}
.about-approach-steps {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.about-approach-steps::before {
content: "";
position: absolute;
left: 28px;
top: 30px;
bottom: 30px;
width: 2px;
background: rgba(13, 148, 136, 0.22);
z-index: 0;
}
.about-approach-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 1rem;
}
.about-approach-step-node {
width: 58px;
height: 58px;
}
.about-approach-step-desc {
max-width: none;
}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
.about-approach-steps.js-reveal::before {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s var(--ease-out);
}
.about-approach-steps.js-reveal.is-visible::before {
transform: scaleY(1);
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
@media (max-width: 480px) {
.about-approach-step-title {
font-size: 1rem;
}
.about-approach-step-desc {
font-size: 0.86rem;
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 04: WHAT WE BELIEVE
========================================================================== */
/* Mint background against Section 03's white — keeps the established
alternating rhythm. A large editorial statement beside a divided
principles list, not a card grid. */
.about-beliefs {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-mint);
}
/* SECTION BACKGROUND — a soft diagonal teal wash and a sparse tiled
medical-cross line-art pattern, plus one gradient glow behind the
statement column. Distinct from Section 01's curves+dots, Section
02's line grid and Section 03's ECG trace + rings. */
.about-beliefs-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(135deg, rgba(13, 148, 136, 0.06), transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 30v24M30 42h24' stroke='%230D9488' stroke-width='1.3' stroke-linecap='round' opacity='0.05'/%3E%3C/svg%3E");
background-repeat: no-repeat, repeat;
}
.about-beliefs-glow {
position: absolute;
top: 8%;
left: 2%;
z-index: 0;
width: 42%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(13, 148, 136, 0.15), transparent 70%);
pointer-events: none;
}
.about-beliefs-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.75rem, 5.5vw, 4rem);
}
/* ---- Intro ---- */
.about-beliefs-intro {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.about-beliefs-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-beliefs-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.about-beliefs-heading {
margin-top: 1rem;
font-size: clamp(2rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.16;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
/* ---- Split: statement + divided list ---- */
.about-beliefs-split {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
gap: clamp(2.5rem, 5vw, 4rem);
}
.about-beliefs-statement-text {
font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.6rem);
line-height: 1.28;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.about-beliefs-statement-highlight {
color: var(--color-primary-teal);
}
.about-beliefs-list {
list-style: none;
margin: 0;
padding: 0;
}
.about-beliefs-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.15rem 0;
}
/* The divider itself — a gradient hairline rather than a flat border,
so it can be scaled in from the left as its own "soft" reveal (see
the entrance animation below). */
.about-beliefs-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(13, 148, 136, 0.4), rgba(13, 148, 136, 0.06));
transform-origin: left;
}
.about-beliefs-item:last-child {
padding-bottom: 0;
}
.about-beliefs-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-white);
color: var(--color-primary-teal);
flex-shrink: 0;
box-shadow: 0 10px 22px -14px rgba(13, 148, 136, 0.35);
}
.about-beliefs-item-icon svg {
width: 21px;
height: 21px;
}
.about-beliefs-item-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--color-navy);
}
.about-beliefs-item-desc {
margin-top: 0.3rem;
font-size: 0.92rem;
line-height: 1.55;
color: var(--color-text-gray);
}
/* ---- Entrance animation ---- */
/* Heading fade/slide, principles staggered fade/slide and the divider
hairlines growing in from the left — one calm choreography, all
within 300–500ms, nothing looping. Opt-in via .js-reveal (added
only by JS, only when motion is allowed), so a no-JS or reduced-
motion visitor always sees the full section immediately. */
@media (prefers-reduced-motion: no-preference) {
.about-beliefs-intro.js-reveal .about-beliefs-eyebrow,
.about-beliefs-intro.js-reveal .about-beliefs-heading {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.about-beliefs-intro.js-reveal.is-visible .about-beliefs-eyebrow,
.about-beliefs-intro.js-reveal.is-visible .about-beliefs-heading {
opacity: 1;
transform: translateY(0);
}
.about-beliefs-intro.js-reveal.is-visible .about-beliefs-heading {
transition-delay: 0.1s;
}
.about-beliefs-statement.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.about-beliefs-statement.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.about-beliefs-list.js-reveal .about-beliefs-item {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item {
opacity: 1;
transform: translateY(0);
}
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(1) { transition-delay: 0.1s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(2) { transition-delay: 0.18s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(3) { transition-delay: 0.26s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(4) { transition-delay: 0.34s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(5) { transition-delay: 0.42s; }
.about-beliefs-list.js-reveal .about-beliefs-item::before {
transform: scaleX(0);
transition: transform 0.5s var(--ease-out);
}
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item::before {
transform: scaleX(1);
}
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(1)::before { transition-delay: 0.05s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(2)::before { transition-delay: 0.13s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(3)::before { transition-delay: 0.21s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(4)::before { transition-delay: 0.29s; }
.about-beliefs-list.js-reveal.is-visible .about-beliefs-item:nth-child(5)::before { transition-delay: 0.37s; }
}
/* ---- Responsive ---- */
/* MOBILE: stack the statement above the principles list, centred
statement typography, comfortable spacing. Designed first for the
412/390/360px range; decorative glow drops out. */
@media (max-width: 760px) {
.about-beliefs {
padding: 2.75rem 1.25rem;
}
.about-beliefs-glow {
display: none;
}
.about-beliefs-heading {
font-size: clamp(1.85rem, 7.5vw, 2.3rem);
}
.about-beliefs-split {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-beliefs-statement-text {
font-size: clamp(1.5rem, 6vw, 1.9rem);
text-align: center;
}
.about-beliefs-item {
padding: 1rem 0;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
@media (max-width: 480px) {
.about-beliefs-item-icon {
width: 40px;
height: 40px;
}
.about-beliefs-item-icon svg {
width: 19px;
height: 19px;
}
.about-beliefs-item-title {
font-size: 0.98rem;
}
.about-beliefs-item-desc {
font-size: 0.88rem;
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 05: THE K7 WAY
========================================================================== */
/* White background against Section 04's mint — keeps the established
alternating rhythm. A curved vertical timeline beside a large photo
— a composition not repeated anywhere else on this page. */
.about-way {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-white);
}
/* SECTION BACKGROUND — a soft glow behind the image, a sparse scatter
of large, faint medical "+" marks and one hexagon outline. Distinct
from Section 01's curves+dots, Section 02's line grid, Section 03's
ECG trace + rings and Section 04's diagonal wash + tight cross tile. */
.about-way-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(560px 480px at 82% 45%, rgba(13, 148, 136, 0.09), transparent 62%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cpath d='M110 90v40M90 110h40' stroke='%230D9488' stroke-width='1.4' stroke-linecap='round' opacity='0.06'/%3E%3C/svg%3E");
background-size: auto, 220px 220px;
background-repeat: no-repeat, repeat;
}
.about-way-hexagon {
position: absolute;
top: 8%;
left: 4%;
z-index: 0;
width: 130px;
height: 130px;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cpolygon points='65,4 122,34 122,96 65,126 8,96 8,34' fill='none' stroke='%232563EB' stroke-width='1.4' opacity='0.14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.about-way-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.75rem, 5.5vw, 4rem);
}
/* ---- Intro ---- */
.about-way-intro {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.about-way-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-way-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.about-way-heading {
margin-top: 1rem;
font-size: clamp(2rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.16;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
/* ---- Split: timeline + image ---- */
.about-way-split {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
align-items: start;
gap: clamp(2.5rem, 5vw, 4rem);
}
/* ---- Timeline ---- */
.about-way-timeline {
position: relative;
}
/* Ambient decorative connector — sits behind the opaque step nodes, so
it doesn't need pixel-perfect alignment with them to read as
"connecting" the steps (same technique used by every curved/dashed
connector line elsewhere on the K7 site). */
.about-way-path {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 60px;
height: 100%;
overflow: visible;
pointer-events: none;
}
.about-way-path-line {
fill: none;
stroke-linecap: round;
}
.about-way-steps {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
}
.about-way-step {
position: relative;
padding-left: 4.5rem;
padding-bottom: 2.5rem;
}
.about-way-step:last-child {
padding-bottom: 0;
}
.about-way-step-node {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-white);
border: 1.5px solid rgba(13, 148, 136, 0.25);
box-shadow: 0 14px 28px -16px rgba(13, 148, 136, 0.35);
font-size: 0.95rem;
font-weight: 700;
color: var(--color-primary-teal);
}
.about-way-step-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-navy);
}
.about-way-step-desc {
margin-top: 0.35rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--color-text-gray);
max-width: 40ch;
}
/* ---- Visual ---- */
.about-way-visual {
position: relative;
width: 100%;
max-width: 420px;
justify-self: center;
}
.about-way-image-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-mint);
box-shadow: 0 30px 60px -25px rgba(30, 41, 59, 0.35);
}
.about-way-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.about-way-image.is-loaded {
opacity: 1;
}
.about-way-image.is-error {
display: none;
}
.about-way-image-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.about-way-image-frame.has-error .about-way-image-fallback {
display: flex;
}
.about-way-image-fallback svg {
width: 30%;
height: 30%;
}
/* ---- Entrance animation ---- */
/* Heading fades/slides in, the path draws itself in, the five steps
reveal sequentially and the image gets a subtle scale reveal — one
calm choreography within 300–600ms per transition, nothing looping.
Opt-in via .js-reveal (added only by JS, only when motion is
allowed), so a no-JS or reduced-motion visitor always sees the
full section immediately. */
@media (prefers-reduced-motion: no-preference) {
.about-way-intro.js-reveal .about-way-eyebrow,
.about-way-intro.js-reveal .about-way-heading {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.about-way-intro.js-reveal.is-visible .about-way-eyebrow,
.about-way-intro.js-reveal.is-visible .about-way-heading {
opacity: 1;
transform: translateY(0);
}
.about-way-intro.js-reveal.is-visible .about-way-heading {
transition-delay: 0.1s;
}
.about-way-path.js-reveal .about-way-path-line {
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
transition: stroke-dashoffset 0.6s var(--ease-out);
}
.about-way-path.js-reveal.is-visible .about-way-path-line {
stroke-dashoffset: 0;
}
.about-way-steps.js-reveal .about-way-step {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.about-way-steps.js-reveal.is-visible .about-way-step {
opacity: 1;
transform: translateY(0);
}
.about-way-steps.js-reveal.is-visible .about-way-step:nth-child(1) { transition-delay: 0.1s; }
.about-way-steps.js-reveal.is-visible .about-way-step:nth-child(2) { transition-delay: 0.2s; }
.about-way-steps.js-reveal.is-visible .about-way-step:nth-child(3) { transition-delay: 0.3s; }
.about-way-steps.js-reveal.is-visible .about-way-step:nth-child(4) { transition-delay: 0.4s; }
.about-way-steps.js-reveal.is-visible .about-way-step:nth-child(5) { transition-delay: 0.5s; }
.about-way-visual.js-reveal {
opacity: 0;
transform: scale(0.96);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.about-way-visual.js-reveal.is-visible {
opacity: 1;
transform: scale(1);
}
}
/* ---- Responsive ---- */
/* TABLET: timeline stays first, image drops below it — the DOM order
already matches "vertical timeline + image below" for mobile, so
only the grid needs to collapse. */
@media (max-width: 860px) {
.about-way-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-way-visual {
max-width: 380px;
margin: 0 auto;
}
.about-way-hexagon {
display: none;
}
}
/* MOBILE: designed first for the 412/390/360px range — tighter step
rhythm and a smaller node/path so nothing crowds a narrow viewport,
comfortable spacing, no overflow. */
@media (max-width: 640px) {
.about-way {
padding: 2.75rem 1.25rem;
}
.about-way-heading {
font-size: clamp(1.85rem, 7.5vw, 2.3rem);
}
.about-way-step {
padding-left: 3.75rem;
padding-bottom: 2rem;
}
.about-way-step-node {
width: 48px;
height: 48px;
font-size: 0.85rem;
}
.about-way-path {
width: 48px;
}
.about-way-visual {
max-width: 320px;
}
}
/* S20 ULTRA MOBILE OPTIMIZATION */
@media (max-width: 480px) {
.about-way-step-title {
font-size: 1.02rem;
}
.about-way-step-desc {
font-size: 0.9rem;
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 07 (PART A): WHY K7 HOMECARE
========================================================================== */
/* Mint background against Section 05's white — keeps the established
alternating rhythm. The largest, most prominent photo on the About
page, beside a clean divided checklist — not a card grid. */
.about-why {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-mint);
}
.about-why-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(560px 480px at 14% 40%, rgba(13, 148, 136, 0.1), transparent 62%);
}
.about-why-ecg {
position: absolute;
left: 0;
right: 0;
bottom: 8%;
z-index: 0;
width: 100%;
height: 50px;
color: var(--color-primary-teal);
opacity: 0.06;
pointer-events: none;
}
.about-why-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(2.5rem, 5vw, 4.5rem);
}
/* ---- Visual ---- */
.about-why-visual {
position: relative;
width: 100%;
justify-self: center;
}
.about-why-image-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
box-shadow: 0 34px 68px -28px rgba(30, 41, 59, 0.4);
}
.about-why-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 16%;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.about-why-image.is-loaded {
opacity: 1;
}
.about-why-image.is-error {
display: none;
}
.about-why-image-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: var(--color-primary-teal);
}
.about-why-image-frame.has-error .about-why-image-fallback {
display: flex;
}
.about-why-image-fallback svg {
width: 30%;
height: 30%;
}
/* ---- Content ---- */
.about-why-content {
max-width: 560px;
}
.about-why-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.about-why-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.about-why-heading {
margin-top: 1rem;
font-size: clamp(1.9rem, 1.1rem + 3vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
.about-why-list {
margin-top: 2rem;
list-style: none;
padding: 0;
}
.about-why-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 0;
border-top: 1px solid rgba(13, 148, 136, 0.14);
}
.about-why-item:first-child {
border-top: none;
padding-top: 0;
}
.about-why-item-icon {
flex-shrink: 0;
margin-top: 0.2rem;
width: 20px;
height: 20px;
color: var(--color-primary-teal);
}
.about-why-item-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.about-why-item-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--color-navy);
}
.about-why-item-desc {
font-size: 0.9rem;
line-height: 1.5;
color: var(--color-text-gray);
}
/* ---- Entrance animation ---- */
/* Image and heading reveal on scroll, the five reasons follow with a
subtle stagger — all within 300–600ms, nothing looping. Opt-in via
.js-reveal (added only by JS, only when motion is allowed), so a
no-JS or reduced-motion visitor always sees the full section
immediately. */
@media (prefers-reduced-motion: no-preference) {
.about-why-visual.js-reveal {
opacity: 0;
transform: translateY(20px) scale(0.98);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.about-why-visual.js-reveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.about-why-content.js-reveal .about-why-eyebrow,
.about-why-content.js-reveal .about-why-heading {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.about-why-content.js-reveal.is-visible .about-why-eyebrow,
.about-why-content.js-reveal.is-visible .about-why-heading {
opacity: 1;
transform: translateY(0);
}
.about-why-content.js-reveal.is-visible .about-why-heading {
transition-delay: 0.1s;
}
.about-why-list.js-reveal .about-why-item {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.about-why-list.js-reveal.is-visible .about-why-item {
opacity: 1;
transform: translateY(0);
}
.about-why-list.js-reveal.is-visible .about-why-item:nth-child(1) { transition-delay: 0.15s; }
.about-why-list.js-reveal.is-visible .about-why-item:nth-child(2) { transition-delay: 0.24s; }
.about-why-list.js-reveal.is-visible .about-why-item:nth-child(3) { transition-delay: 0.33s; }
.about-why-list.js-reveal.is-visible .about-why-item:nth-child(4) { transition-delay: 0.42s; }
.about-why-list.js-reveal.is-visible .about-why-item:nth-child(5) { transition-delay: 0.51s; }
}
/* ---- Responsive ---- */
/* MOBILE: image stacks above the content, designed first for the
412/390/360px range. */
@media (max-width: 860px) {
.about-why-container {
grid-template-columns: 1fr;
}
.about-why-visual {
max-width: 420px;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.about-why {
padding: 2.75rem 1.25rem;
}
.about-why-heading {
font-size: clamp(1.75rem, 7.5vw, 2.15rem);
}
.about-why-content {
max-width: none;
}
}
/* ==========================================================================
ABOUT PAGE — SECTION 07 (PART B): FINAL CTA
========================================================================== */
/* A deep navy-to-teal gradient with a soft mint glow — the strongest,
most confident visual close on the About page, distinct from the
Home page's teal-to-blue Final CTA banner. */
.about-final-cta {
position: relative;
overflow: hidden;
padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.about-final-cta-bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, #0B1220 0%, var(--color-navy) 45%, var(--color-primary-teal-dark) 100%);
}
.about-final-cta-glow {
position: absolute;
top: -10%;
right: -6%;
z-index: 0;
width: 50%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 253, 250, 0.22), transparent 70%);
pointer-events: none;
}
.about-final-cta-ring {
position: absolute;
z-index: 0;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.about-final-cta-ring--a {
width: 200px;
height: 200px;
bottom: 6%;
left: 4%;
}
.about-final-cta-ring--b {
width: 120px;
height: 120px;
top: 12%;
left: 20%;
border-color: rgba(240, 253, 250, 0.18);
}
.about-final-cta-pulse {
position: absolute;
left: 0;
right: 0;
bottom: 12%;
z-index: 1;
width: 100%;
height: 70px;
color: rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.about-final-cta-container {
position: relative;
z-index: 2;
max-width: var(--container-max);
margin: 0 auto;
}
.about-final-cta-content {
max-width: 640px;
}
.about-final-cta-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.about-final-cta-heading {
margin-top: 0.75rem;
font-size: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
line-height: 1.14;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-white);
}
.about-final-cta-text {
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
max-width: 52ch;
}
.about-final-cta-buttons {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.about-final-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 1rem 1.85rem;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 1rem;
transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.about-final-cta-btn--primary {
background: var(--color-white);
color: var(--color-primary-teal-dark);
box-shadow: 0 20px 40px -18px rgba(11, 22, 38, 0.45);
}
.about-final-cta-btn--primary:hover,
.about-final-cta-btn--primary:focus-visible {
background: var(--color-mint);
}
.about-final-cta-btn--secondary {
background: transparent;
color: var(--color-white);
border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.about-final-cta-btn--secondary:hover,
.about-final-cta-btn--secondary:focus-visible {
border-color: var(--color-white);
background: rgba(255, 255, 255, 0.12);
}
.about-final-cta-btn-icon {
width: 18px;
height: 18px;
}
.about-final-cta-btn-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.about-final-cta-btn:hover .about-final-cta-btn-arrow {
transform: translateX(4px);
}
.about-final-cta-btn:focus-visible {
outline: 2px solid var(--color-white);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.about-final-cta-btn:hover {
transform: translateY(-2px);
}
}
/* Gentle hover/accent transition on the CTA is handled above (colour-
only changes stay unconditional; the lift is gated to motion-
allowing, hover-capable, mouse-driven contexts). The content reveal
below is the section's only scroll-triggered animation. */
.about-final-cta-content.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.about-final-cta-content.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---- Responsive ---- */
/* MOBILE: rings and the pulse trace drop out, buttons become full-
width and stack — designed first for the 412/390/360px range. */
@media (max-width: 760px) {
.about-final-cta-ring,
.about-final-cta-pulse {
display: none;
}
.about-final-cta-content {
max-width: none;
}
.about-final-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.about-final-cta-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.about-final-cta-heading {
font-size: clamp(1.75rem, 1.2rem + 4vw, 2.35rem);
}
.about-final-cta-text {
font-size: 1rem;
}
.about-final-cta-btn {
padding: 0.9rem 1.5rem;
font-size: 0.95rem;
}
}
/* ==========================================================================
SERVICES PAGE (services.html)
========================================================================== */
/* ---- Hero: single centred column, no visual, simpler than the About
Hero above (no two-column split needed here). ---- */
.services-hero {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem calc(var(--space-section) * 0.6);
background: var(--color-white);
}
/* Same 3-ingredient faded-healthcare-background technique used
elsewhere on the site (radial glow + dot grid + faint curved
trace), a fresh composition for this page. */
.services-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(620px 420px at 12% 0%, rgba(13, 148, 136, 0.09), transparent 60%),
radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='140' viewBox='0 0 560 140'%3E%3Cpath d='M-20,100 C 120,60 180,130 300,90 S 460,40 580,90' stroke='%230D9488' stroke-width='1.4' fill='none' opacity='0.07'/%3E%3C/svg%3E");
background-size: auto, 26px 26px, 560px 140px;
background-repeat: no-repeat, repeat, repeat;
}
.services-hero-container {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.services-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.services-hero-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.services-hero-heading {
margin-top: 1.25rem;
font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.4rem);
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
/* "Complete" stays the heading's default navy; the rest of the line
picks up the brand teal — a plain colour swap, no gradient, so it
stays subtle at any size and simply wraps as normal text on
mobile (no nowrap/nbsp needed since both halves are whole words). */
.services-hero-heading-highlight {
color: var(--color-primary-teal);
}
.services-hero-text {
margin: 1rem auto 0;
max-width: 58ch;
font-size: 1.1rem;
line-height: 1.7;
color: var(--color-text-gray);
}
@media (prefers-reduced-motion: no-preference) {
.services-hero-eyebrow,
.services-hero-heading,
.services-hero-text {
opacity: 0;
animation: hero-rise 0.35s var(--ease-out) forwards;
}
.services-hero-eyebrow { animation-delay: 0.05s; }
.services-hero-heading { animation-delay: 0.1s; }
.services-hero-text { animation-delay: 0.15s; }
}
@media (max-width: 560px) {
.services-hero {
padding: 2.75rem 1.25rem 1.75rem;
}
.services-hero-bg {
background-image:
radial-gradient(420px 320px at 12% 0%, rgba(13, 148, 136, 0.08), transparent 60%),
radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px);
background-size: auto, 22px 22px;
}
.services-hero-heading {
margin-top: 1rem;
font-size: clamp(1.85rem, 1.2rem + 6vw, 2.5rem);
}
.services-hero-text {
margin-top: 0.85rem;
font-size: 1.02rem;
line-height: 1.6;
}
}
/* ---- Overview: 10-service card grid ---- */
.services-overview {
position: relative;
overflow: hidden;
padding: 0 1.5rem var(--space-section);
background: var(--color-white);
}
/* A second, quieter decorative layer (fine dot field only) so the
grid section doesn't repeat the hero's glow/curve treatment. */
.services-overview-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.services-overview-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
}
.services-overview-intro {
max-width: 680px;
margin: 0 auto 3rem;
text-align: center;
}
.services-overview-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.services-overview-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 3rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.services-overview-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.services-overview-card {
height: 100%;
}
/* Whole-card-is-one-anchor pattern (same as the Home page Services
and Health Insights grids): the accessible name is the icon's
sr-only-equivalent absence plus the visible title/desc/cue text. */
.services-overview-card-link {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
text-align: left;
gap: 0.85rem;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.08);
border-radius: var(--radius-lg);
box-shadow: 0 16px 36px -26px rgba(30, 41, 59, 0.2);
padding: 1.75rem 1.5rem;
color: inherit;
text-decoration: none;
transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
/* Subtle per-card healthcare accent: a soft off-centre corner glow,
purely decorative and clipped to the card's rounded corners via
the parent's overflow: hidden. */
.services-overview-card-link::after {
content: "";
position: absolute;
top: -30%;
right: -20%;
z-index: 0;
width: 150px;
height: 150px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(13, 148, 136, 0.1), transparent 72%);
}
.services-overview-card-icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 16px;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.services-overview-card-icon svg {
width: 26px;
height: 26px;
}
.services-overview-card-title {
position: relative;
z-index: 1;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.3;
}
.services-overview-card-desc {
position: relative;
z-index: 1;
font-size: 0.92rem;
line-height: 1.6;
color: var(--color-text-gray);
}
/* Pinned to the bottom via margin-top: auto so the cue lines up
across cards regardless of description length. */
.services-overview-card-cue {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: auto;
padding-top: 0.25rem;
font-size: 0.92rem;
font-weight: 700;
color: var(--color-primary-teal-dark);
}
.services-overview-card-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
/* ---- Interactions ---- */
.services-overview-card-link:hover,
.services-overview-card-link:focus-visible {
border-color: rgba(13, 148, 136, 0.28);
box-shadow: 0 22px 42px -24px rgba(13, 148, 136, 0.3);
}
.services-overview-card-link:focus-visible {
outline: 2px solid var(--color-primary-teal);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.services-overview-card-link:hover {
transform: translateY(-4px);
}
.services-overview-card-link:hover .services-overview-card-arrow {
transform: translateX(4px);
}
}
/* ---- Scroll-triggered reveal ---- */
/* Opt-in via .js-reveal, added only by JS and only when motion is
allowed, so a no-JS or reduced-motion visitor always sees the full
grid immediately. */
.services-overview-grid.js-reveal > li {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.services-overview-grid.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.services-overview-grid.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.04s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.08s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.12s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.16s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(5) { transition-delay: 0.2s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(6) { transition-delay: 0.24s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(7) { transition-delay: 0.28s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(8) { transition-delay: 0.32s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(9) { transition-delay: 0.36s; }
.services-overview-grid.js-reveal.is-visible > li:nth-child(10) { transition-delay: 0.4s; }
/* ---- Responsive ---- */
@media (max-width: 900px) {
.services-overview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* MOBILE: single column, comfortable full-width cards, designed
first for the 412/390/360px range; decorative dot layer simplified
and the corner-glow accent kept small so nothing causes horizontal
overflow. Card padding and icon size stay large enough that the
whole card remains a comfortably big touch target (well over the
44px minimum). */
@media (max-width: 640px) {
.services-overview {
padding: 0 1.25rem 3.5rem;
}
.services-overview-intro {
margin-bottom: 2.25rem;
}
.services-overview-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.services-overview-card-link {
padding: 1.5rem 1.35rem;
}
.services-overview-bg {
background-size: 20px 20px;
}
}
/* ==========================================================================
HOME NURSING CARE PAGE (home-nursing.html)
========================================================================== */
/* ---- Hero: two-column, editorial photo + a one-shot "draw-in" ECG
trace and a floating trust badge over the image — the "slightly
stronger" hero visual called for in the brief. Everything else on
this page keeps the calmer 200-500ms reveal used site-wide. ---- */
.nursing-hero {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-white);
}
.nursing-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(620px 440px at 90% 6%, rgba(13, 148, 136, 0.1), transparent 62%),
radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px);
background-size: auto, 26px 26px;
background-repeat: no-repeat, repeat;
}
/* Decorative trace only — drawn once on load via stroke-dashoffset,
then stays static. Not scroll-triggered since the hero is already
in view on load; not infinite. */
.nursing-hero-pulse {
position: absolute;
left: 0;
right: 0;
bottom: 8%;
z-index: 0;
width: 100%;
height: 70px;
color: rgba(13, 148, 136, 0.16);
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.nursing-hero-pulse path {
stroke-dasharray: 1300;
stroke-dashoffset: 1300;
animation: nursing-pulse-draw 1.4s var(--ease-out) 0.2s forwards;
}
}
@keyframes nursing-pulse-draw {
to {
stroke-dashoffset: 0;
}
}
.nursing-hero-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(2.5rem, 5vw, 4.5rem);
}
.nursing-hero-content {
max-width: 620px;
}
.nursing-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem 0.4rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-mint);
color: var(--color-primary-teal-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.nursing-hero-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent-green);
flex-shrink: 0;
}
.nursing-hero-heading {
margin-top: 1.25rem;
font-size: clamp(2.35rem, 1.5rem + 3.4vw, 3.5rem);
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-navy);
}
.nursing-hero-heading-highlight {
color: var(--color-primary-teal);
}
.nursing-hero-text {
margin-top: 1rem;
font-size: 1.1875rem;
line-height: 1.7;
color: var(--color-text-gray);
max-width: 54ch;
}
.nursing-hero-ctas {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.nursing-hero-visual {
position: relative;
justify-self: center;
width: 100%;
max-width: 460px;
}
/* Scoped override: this page's frame is 4/5 portrait, distinct from
the Home/About Hero's own crops — scoping under
.nursing-hero-visual leaves every other page's .hero-image-frame
untouched. */
.nursing-hero-visual .hero-image-frame {
aspect-ratio: 4 / 5;
}
.nursing-hero-visual .hero-image {
object-position: center 20%;
}
/* Floating trust badge, overlapping the image's bottom-left corner —
the page's own small "premium" flourish. */
.nursing-hero-badge {
position: absolute;
left: -1rem;
bottom: 1.5rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.1rem;
background: var(--color-white);
border-radius: var(--radius-pill);
box-shadow: 0 18px 36px -16px rgba(30, 41, 59, 0.32);
font-size: 0.88rem;
font-weight: 700;
color: var(--color-navy);
}
.nursing-hero-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.nursing-hero-badge-icon svg {
width: 16px;
height: 16px;
}
@media (prefers-reduced-motion: no-preference) {
.nursing-hero-eyebrow,
.nursing-hero-heading,
.nursing-hero-text,
.nursing-hero-ctas {
opacity: 0;
animation: hero-rise 0.4s var(--ease-out) forwards;
}
.nursing-hero-eyebrow { animation-delay: 0.05s; }
.nursing-hero-heading { animation-delay: 0.1s; }
.nursing-hero-text { animation-delay: 0.16s; }
.nursing-hero-ctas { animation-delay: 0.22s; }
.nursing-hero-visual {
opacity: 0;
animation: hero-fade-in 0.5s var(--ease-out) forwards;
animation-delay: 0.15s;
}
.nursing-hero-badge {
opacity: 0;
transform: translateY(10px);
animation: hero-rise 0.4s var(--ease-out) 0.55s forwards;
}
}
@media (max-width: 960px) {
.nursing-hero-container {
grid-template-columns: 1fr;
}
.nursing-hero-content {
max-width: none;
order: 1;
}
.nursing-hero-visual {
max-width: 420px;
margin: 0 auto;
order: 2;
}
}
@media (max-width: 560px) {
.nursing-hero {
padding: 2.75rem 1.25rem;
}
.nursing-hero-bg {
background-image:
radial-gradient(420px 320px at 90% 4%, rgba(13, 148, 136, 0.09), transparent 60%),
radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px);
background-size: auto, 22px 22px;
}
.nursing-hero-pulse {
display: none;
}
.nursing-hero-heading {
margin-top: 1rem;
font-size: clamp(2rem, 1.3rem + 6vw, 2.6rem);
}
.nursing-hero-text {
margin-top: 0.85rem;
font-size: 1.05rem;
line-height: 1.6;
}
.nursing-hero-ctas {
flex-direction: column;
align-items: stretch;
}
.nursing-hero-badge {
left: 0.75rem;
bottom: 1rem;
padding: 0.6rem 0.9rem;
font-size: 0.82rem;
}
}
/* ---- What Is Home Nursing Care: single-column prose ---- */
.nursing-intro {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background: var(--color-mint);
}
/* Faded medical geometry: a thin cross tile plus a soft dot field. */
.nursing-intro-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 26v20M26 36h20' stroke='%230D9488' stroke-width='1.4' stroke-linecap='round' opacity='0.1'/%3E%3C/svg%3E"),
radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px);
background-size: 72px 72px, 24px 24px;
background-repeat: repeat, repeat;
}
.nursing-intro-container {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.nursing-intro-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.nursing-intro-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.nursing-intro-text {
margin-top: 1rem;
font-size: 1.08rem;
line-height: 1.75;
color: var(--color-text-gray);
}
.nursing-intro-text + .nursing-intro-text {
margin-top: 0.85rem;
}
.nursing-intro-content.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.nursing-intro-content.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 560px) {
.nursing-intro {
padding: 3rem 1.25rem;
}
.nursing-intro-heading {
font-size: clamp(1.6rem, 1.1rem + 5vw, 2.1rem);
}
.nursing-intro-text {
font-size: 1rem;
line-height: 1.65;
}
}
/* ---- Who May Need Home Nursing Care: intro + flat checklist ---- */
.nursing-who {
position: relative;
padding: var(--space-section) 1.5rem;
background: var(--color-white);
}
.nursing-who-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(560px 380px at 8% 100%, rgba(37, 99, 235, 0.07), transparent 62%);
}
.nursing-who-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
}
.nursing-who-intro {
max-width: 680px;
margin: 0 auto 2.5rem;
text-align: center;
}
.nursing-who-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.nursing-who-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.nursing-who-text {
margin-top: 1rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text-gray);
}
/* Flat checklist, not cards: two columns of plain rows with an icon
and a hairline divider — deliberately simpler than a boxed grid. */
.nursing-who-list {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 920px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-top: 1px solid rgba(30, 41, 59, 0.08);
}
.nursing-who-list > li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1.1rem 0.75rem;
border-bottom: 1px solid rgba(30, 41, 59, 0.08);
font-size: 1rem;
line-height: 1.55;
color: var(--color-navy);
}
.nursing-who-list > li:nth-child(odd) {
border-right: 1px solid rgba(30, 41, 59, 0.08);
}
.nursing-who-list-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-mint);
color: var(--color-primary-teal-dark);
flex-shrink: 0;
}
.nursing-who-list-icon svg {
width: 14px;
height: 14px;
}
.nursing-who-list.js-reveal > li {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.nursing-who-list.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.nursing-who-list.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.04s; }
.nursing-who-list.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.08s; }
.nursing-who-list.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.12s; }
.nursing-who-list.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.16s; }
.nursing-who-list.js-reveal.is-visible > li:nth-child(5) { transition-delay: 0.2s; }
@media (max-width: 640px) {
.nursing-who {
padding: 3rem 1.25rem;
}
.nursing-who-list {
grid-template-columns: 1fr;
}
.nursing-who-list > li:nth-child(odd) {
border-right: none;
}
}
/* ---- Nursing Care We Provide: editorial feature rows ---- */
.nursing-services {
position: relative;
padding: var(--space-section) 1.5rem;
background: var(--color-mint);
}
.nursing-services-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(rgba(13, 148, 136, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.nursing-services-container {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
}
.nursing-services-intro {
max-width: 680px;
margin: 0 auto 2.5rem;
text-align: center;
}
.nursing-services-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.nursing-services-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.nursing-services-list {
list-style: none;
margin: 0;
padding: 0;
background: var(--color-white);
border: 1px solid rgba(30, 41, 59, 0.08);
border-radius: var(--radius-lg);
box-shadow: 0 20px 44px -30px rgba(30, 41, 59, 0.25);
overflow: hidden;
}
.nursing-services-row {
display: flex;
align-items: flex-start;
gap: 1.1rem;
padding: 1.5rem 1.75rem;
border-bottom: 1px solid rgba(30, 41, 59, 0.07);
transition: background-color 0.25s var(--ease-out);
}
.nursing-services-row:last-child {
border-bottom: none;
}
.nursing-services-row:hover {
background: var(--color-mint);
}
.nursing-services-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--color-mint);
color: var(--color-primary-teal);
flex-shrink: 0;
}
.nursing-services-row-icon svg {
width: 24px;
height: 24px;
}
.nursing-services-row-title {
font-size: 1.08rem;
font-weight: 700;
color: var(--color-navy);
line-height: 1.3;
}
.nursing-services-row-desc {
margin-top: 0.35rem;
font-size: 0.96rem;
line-height: 1.6;
color: var(--color-text-gray);
}
.nursing-services-row-desc a {
color: var(--color-primary-teal-dark);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(13, 148, 136, 0.35);
text-underline-offset: 2px;
}
.nursing-services-row-desc a:hover,
.nursing-services-row-desc a:focus-visible {
text-decoration-color: currentColor;
}
.nursing-services-list.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.nursing-services-list.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 640px) {
.nursing-services {
padding: 3rem 1.25rem;
}
.nursing-services-row {
padding: 1.25rem 1.1rem;
gap: 0.9rem;
}
.nursing-services-row-icon {
width: 42px;
height: 42px;
}
}
/* ---- Why Choose K7: flat accent-list, not cards ---- */
.nursing-why {
position: relative;
padding: var(--space-section) 1.5rem;
background: var(--color-white);
}
.nursing-why-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(560px 380px at 92% 0%, rgba(37, 99, 235, 0.07), transparent 62%);
}
.nursing-why-container {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
}
.nursing-why-intro {
max-width: 680px;
margin: 0 auto 2.5rem;
text-align: center;
}
.nursing-why-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.nursing-why-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.nursing-why-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 2.5rem;
}
/* Left-border accent instead of a full card outline/box — reads as an
editorial sidebar list rather than a repeated card grid. */
.nursing-why-item {
padding-left: 1.1rem;
border-left: 3px solid rgba(13, 148, 136, 0.25);
}
.nursing-why-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--color-mint);
color: var(--color-primary-teal);
}
.nursing-why-item-icon svg {
width: 22px;
height: 22px;
}
.nursing-why-item-title {
margin-top: 0.85rem;
font-size: 1.08rem;
font-weight: 700;
color: var(--color-navy);
}
.nursing-why-item-desc {
margin-top: 0.4rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text-gray);
}
.nursing-why-grid.js-reveal > li {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.nursing-why-grid.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.nursing-why-grid.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.nursing-why-grid.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.1s; }
.nursing-why-grid.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.15s; }
.nursing-why-grid.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.2s; }
@media (max-width: 640px) {
.nursing-why {
padding: 3rem 1.25rem;
}
.nursing-why-grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
/* ---- How Home Nursing Works: static vertical step timeline ---- */
.nursing-steps {
position: relative;
padding: var(--space-section) 1.5rem;
background: var(--color-mint);
}
.nursing-steps-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px);
background-size: 24px 24px;
}
.nursing-steps-container {
position: relative;
z-index: 1;
max-width: 780px;
margin: 0 auto;
}
.nursing-steps-intro {
max-width: 680px;
margin: 0 auto 2.5rem;
text-align: center;
}
.nursing-steps-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.nursing-steps-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.nursing-steps-track {
position: relative;
list-style: none;
margin: 0;
padding: 0;
counter-reset: none;
}
/* Connecting vertical line behind the numbered circles. */
.nursing-steps-track::before {
content: "";
position: absolute;
top: 26px;
bottom: 26px;
left: 26px;
width: 1px;
background: rgba(13, 148, 136, 0.25);
}
.nursing-steps-item {
position: relative;
padding: 0 0 2rem 4.25rem;
}
.nursing-steps-item:last-child {
padding-bottom: 0;
}
.nursing-steps-number {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--color-white);
border: 2px solid rgba(13, 148, 136, 0.3);
color: var(--color-primary-teal-dark);
font-size: 1rem;
font-weight: 700;
}
.nursing-steps-title {
padding-top: 0.85rem;
font-size: 1.08rem;
font-weight: 700;
color: var(--color-navy);
}
.nursing-steps-desc {
margin-top: 0.35rem;
font-size: 0.96rem;
line-height: 1.6;
color: var(--color-text-gray);
max-width: 52ch;
}
.nursing-steps-track.js-reveal > li {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.nursing-steps-track.js-reveal.is-visible > li {
opacity: 1;
transform: translateY(0);
}
.nursing-steps-track.js-reveal.is-visible > li:nth-child(1) { transition-delay: 0.05s; }
.nursing-steps-track.js-reveal.is-visible > li:nth-child(2) { transition-delay: 0.12s; }
.nursing-steps-track.js-reveal.is-visible > li:nth-child(3) { transition-delay: 0.19s; }
.nursing-steps-track.js-reveal.is-visible > li:nth-child(4) { transition-delay: 0.26s; }
@media (max-width: 640px) {
.nursing-steps {
padding: 3rem 1.25rem;
}
.nursing-steps-item {
padding-left: 3.75rem;
}
.nursing-steps-number {
width: 44px;
height: 44px;
font-size: 0.92rem;
}
.nursing-steps-track::before {
left: 22px;
}
}
/* ---- FAQ: native details/summary accordion ---- */
.nursing-faq {
position: relative;
overflow: hidden;
padding: var(--space-section) 1.5rem;
background:
radial-gradient(circle at 12px 12px, rgba(13, 148, 136, 0.08) 1.2px, transparent 1.4px) 0 0 / 28px 28px,
linear-gradient(135deg, transparent 0 48%, rgba(13, 148, 136, 0.045) 49% 51%, transparent 52% 100%) 0 0 / 72px 72px,
linear-gradient(180deg, #ffffff 0%, #f8fffd 100%);
}
.nursing-faq-container {
position: relative;
z-index: 1;
max-width: 780px;
margin: 0 auto;
}
.nursing-faq-intro {
max-width: 680px;
margin: 0 auto 2.5rem;
text-align: center;
}
.nursing-faq-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-primary-teal);
}
.nursing-faq-heading {
margin-top: 0.75rem;
font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.75rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.nursing-faq-list {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.nursing-faq-item {
overflow: hidden;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(13, 148, 136, 0.16);
border-radius: 8px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
transition: border-color 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), background-color 0.24s var(--ease-out);
}
.nursing-faq-item:hover,
.nursing-faq-item[open] {
border-color: rgba(13, 148, 136, 0.34);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 42px rgba(13, 148, 136, 0.11);
}
.nursing-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
gap: 0.85rem;
padding: 0.95rem 1.1rem;
font-size: 1rem;
font-weight: 700;
color: var(--color-navy);
cursor: pointer;
list-style: none;
transition: color 0.22s var(--ease-out), background-color 0.22s var(--ease-out);
}
.nursing-faq-question:hover,
.nursing-faq-item[open] .nursing-faq-question {
color: var(--color-primary-teal-dark);
background: rgba(13, 148, 136, 0.045);
}
.nursing-faq-question-text {
min-width: 0;
line-height: 1.35;
}
.nursing-faq-question::-webkit-details-marker {
display: none;
}
.nursing-faq-chevron {
position: relative;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 999px;
background: rgba(13, 148, 136, 0.08);
color: var(--color-primary-teal-dark);
transition: transform 0.24s var(--ease-out), background-color 0.24s var(--ease-out), color 0.24s var(--ease-out);
}
.nursing-faq-chevron::before,
.nursing-faq-chevron::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
border-radius: 999px;
background: currentColor;
transform-origin: center;
}
.nursing-faq-chevron::before {
transform: translate(-78%, -50%) rotate(45deg);
}
.nursing-faq-chevron::after {
transform: translate(-22%, -50%) rotate(-45deg);
}
.nursing-faq-item[open] .nursing-faq-chevron {
transform: rotate(180deg);
background: var(--color-primary-teal);
color: var(--color-white);
}
.nursing-faq-item[data-closing] .nursing-faq-chevron {
transform: rotate(0deg);
background: rgba(13, 148, 136, 0.08);
color: var(--color-primary-teal-dark);
}
.nursing-faq-panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.26s var(--ease-out), opacity 0.22s var(--ease-out);
}
.nursing-faq-item[open] .nursing-faq-panel {
grid-template-rows: 1fr;
opacity: 1;
}
.nursing-faq-item[data-closing] .nursing-faq-panel {
grid-template-rows: 0fr;
opacity: 0;
}
.nursing-faq-answer {
overflow: hidden;
margin: 0;
padding: 0 1.1rem 1.05rem;
font-size: 0.96rem;
line-height: 1.65;
color: var(--color-text-gray);
}
.nursing-faq-question:focus-visible {
outline: 2px solid var(--color-primary-teal);
outline-offset: 2px;
border-radius: 6px;
}
.nursing-faq-list.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.nursing-faq-list.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 640px) {
.nursing-faq {
padding: 3rem 1.25rem;
}
.nursing-faq-intro {
margin-bottom: 1.8rem;
}
.nursing-faq-question {
min-height: 58px;
padding: 0.9rem 0.95rem;
font-size: 0.96rem;
}
.nursing-faq-answer {
padding: 0 0.95rem 1rem;
font-size: 0.94rem;
}
}
/* ---- Final CTA: reuses the About page's final-CTA visual language
under a page-scoped namespace (deep navy/teal gradient, glow, one
static pulse trace) ---- */
.nursing-final-cta {
position: relative;
overflow: hidden;
padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.nursing-final-cta-bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, #0B1220 0%, var(--color-navy) 45%, var(--color-primary-teal-dark) 100%);
}
.nursing-final-cta-glow {
position: absolute;
top: -10%;
left: -6%;
z-index: 0;
width: 50%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 253, 250, 0.22), transparent 70%);
pointer-events: none;
}
.nursing-final-cta-pulse {
position: absolute;
left: 0;
right: 0;
bottom: 12%;
z-index: 1;
width: 100%;
height: 70px;
color: rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.nursing-final-cta-container {
position: relative;
z-index: 2;
max-width: var(--container-max);
margin: 0 auto;
}
.nursing-final-cta-content {
max-width: 640px;
}
.nursing-final-cta-eyebrow {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.nursing-final-cta-heading {
margin-top: 0.75rem;
font-size: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
line-height: 1.14;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-white);
}
.nursing-final-cta-text {
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
max-width: 52ch;
}
.nursing-final-cta-buttons {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.nursing-final-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 1rem 1.85rem;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 1rem;
transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.nursing-final-cta-btn--primary {
background: var(--color-white);
color: var(--color-primary-teal-dark);
box-shadow: 0 20px 40px -18px rgba(11, 22, 38, 0.45);
}
.nursing-final-cta-btn--primary:hover,
.nursing-final-cta-btn--primary:focus-visible {
background: var(--color-mint);
}
.nursing-final-cta-btn--secondary {
background: transparent;
color: var(--color-white);
border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.nursing-final-cta-btn--secondary:hover,
.nursing-final-cta-btn--secondary:focus-visible {
border-color: var(--color-white);
background: rgba(255, 255, 255, 0.12);
}
.nursing-final-cta-btn-icon {
width: 18px;
height: 18px;
}
.nursing-final-cta-btn-arrow {
display: inline-block;
transition: transform 0.25s var(--ease-out);
}
.nursing-final-cta-btn:hover .nursing-final-cta-btn-arrow {
transform: translateX(4px);
}
.nursing-final-cta-btn:focus-visible {
outline: 2px solid var(--color-white);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.nursing-final-cta-btn:hover {
transform: translateY(-2px);
}
}
.nursing-final-cta-content.js-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.nursing-final-cta-content.js-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 760px) {
.nursing-final-cta-glow,
.nursing-final-cta-pulse {
display: none;
}
.nursing-final-cta-content {
max-width: none;
}
.nursing-final-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.nursing-final-cta-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.nursing-final-cta {
padding: 3rem 1.25rem;
}
.nursing-final-cta-heading {
font-size: clamp(1.75rem, 1.2rem + 4vw, 2.35rem);
}
.nursing-final-cta-text {
font-size: 1rem;
}
.nursing-final-cta-btn {
padding: 0.9rem 1.5rem;
font-size: 0.95rem;
}
}
/*test for logo */