/* ============================================================
APEXA QLA — SUBPAGE LAYOUT SYSTEM
------------------------------------------------------------
Shared layout primitives for every NON-homepage template
(Start here, conditions, ORCA methods, programs, etc.).
Loaded AFTER style-v4 + style-v5-brand + style-v6-spec so it
can lean on the brand tokens + the shared header/footer styles.
Page skeleton:
============================================================ */
:root {
--page-max: 1400px; /* match homepage content width (.who-we-walk__inner etc.) */
--page-gut: clamp(1.25rem, 4vw, 3rem); /* horizontal gutter */
}
body.page {
background: #ffffff;
overflow-x: hidden;
}
body.single-post {
padding-top: 30px;
}
/* Custom cursor (assets/js/cursor.js) injects the orange dot + trailing
ring; native arrow is hidden only after html.has-cursor is set. */
/* Subpage nav sits over a NAVY page-hero (not a bright video like the
homepage), so the utility-bar text must be white in the default
(non-scrolled) state instead of the homepage's dark-on-bright text.
`body.page` raises specificity above the homepage rule in v6-spec. */
body.page .nav:not(.scrolled) .nav__utility-link {
color: #ffffff;
opacity: 0.8;
}
body.page .nav:not(.scrolled) .nav__utility-link:hover {
opacity: 1;
}
/* The fixed nav floats over the page-hero, so main content needs no
top padding — the hero band provides the clearance itself. */
.page main {
display: block;
}
/* ---- Shared container ---- */
.page-container {
max-width: var(--page-max);
margin: 0 auto;
padding-left: var(--page-gut);
padding-right: var(--page-gut);
}
/* ============================================================
PAGE HERO — short navy band at the top of every subpage.
The dark nav sits over it (same as the homepage hero), then
flips to the white pill once the user scrolls past it.
============================================================ */
.page-hero {
position: relative;
background: var(--dark); /* fallback + base tone behind any image */
color: #ffffff;
/* top padding clears the utility bar + nav pill (~130px) */
padding: clamp(9rem, 14vw, 12rem) var(--page-gut) clamp(3rem, 6vw, 5rem);
overflow: hidden;
isolation: isolate;
}
/* ---- Optional background image layer (parallax) ----
A page opts in by adding:
If --hero-image is unset OR the file 404s, this layer is transparent
and the navy .page-hero background shows through — graceful fallback.
The element is over-scanned (top/height) so the parallax transform
never exposes an edge. apexa-shared.js drives the translate. */
.page-hero__media {
position: absolute;
/* Over-scanned on ALL sides so the mouse + scroll parallax transform
never exposes an edge (moves in any direction). */
left: -5%;
top: -16%;
width: 110%;
height: 132%;
z-index: 0;
background-image: var(--hero-image, none);
background-size: cover;
background-position: 72% center; /* keep the subject (right side) framed */
background-repeat: no-repeat;
will-change: transform;
transform: translate3d(0, 0, 0);
pointer-events: none;
}
.page-hero__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
z-index: 0;
}
.page-hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
100deg,
rgba(26, 37, 43, 0.92) 0%,
rgba(26, 37, 43, 0.74) 38%,
rgba(26, 37, 43, 0.3) 72%,
rgba(26, 37, 43, 0.12) 100%
);
}
.page-hero--video .page-hero__inner {
position: relative;
z-index: 2;
}
.page-hero--video::after {
display: none;
}
.page-the-orca-method .page-hero--video {
min-height: clamp(580px, 92vh, 1000px);
}
/* ---- Scrim ----
Sits over the image, under the text. Three stacked gradients:
1) subtle orange brand glow upper-right,
2) left-dark legibility wash (keeps the headline readable over any image),
3) bottom fade for a clean seam into the next section. */
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
ellipse 58% 78% at 78% 26%,
rgba(253, 157, 73, 0.17) 0%,
rgba(253, 157, 73, 0) 60%
),
linear-gradient(
100deg,
rgba(40, 47, 48, 0.7) 0%,
rgba(40, 47, 48, 0.38) 30%,
rgba(40, 47, 48, 0.12) 58%,
rgba(40, 47, 48, 0) 80%
),
linear-gradient(
180deg,
rgba(40, 47, 48, 0) 60%,
rgba(40, 47, 48, 0.4) 100%
);
}
.page-hero__inner {
position: relative;
z-index: 2; /* content above media + scrim */
max-width: var(--page-max);
margin: 0 auto;
}
@media (prefers-reduced-motion: reduce) {
.page-hero__media {
transform: none !important;
}
}
/* Breadcrumb trail */
.page-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 1.5rem;
}
.page-breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.25s ease;
}
.page-breadcrumb a:hover {
color: var(--accent);
}
.page-breadcrumb span[aria-hidden] {
opacity: 0.4;
}
.page-breadcrumb .is-current {
color: rgba(255, 255, 255, 0.5);
}
.page-hero__eyebrow {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 1rem;
}
.page-hero__title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 700; /* match the homepage section headings */
font-size: clamp(2.1rem, 5vw, 3.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0;
max-width: 20ch;
}
.page-hero__title .editorial-accent {
color: var(--accent);
font-style: normal;
}
.page-hero__lead {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
margin: 1.5rem 0 0;
max-width: 60ch;
}
/* ============================================================
PAGE SECTIONS — content blocks below the hero
============================================================ */
.page-section {
padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.page-section--cream {
background: var(--cream);
}
.page-section--navy {
background: var(--dark);
color: #ffffff;
}
.page-section--tight {
padding: clamp(2.5rem, 5vw, 4rem) 0;
}
/* Section heading block */
.page-section__head {
max-width: 720px;
margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.page-section__head--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-eyebrow {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.9rem;
}
.section-title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 700; /* match homepage section headings (bold) */
font-size: clamp(2rem, 3.5vw, 3rem); /* 32–48px, same scale as homepage */
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-dark);
margin: 0;
}
.page-section--navy .section-title {
color: #ffffff;
}
.section-title .editorial-accent {
color: var(--accent);
font-style: normal;
}
/* ---- Readable prose column ---- */
.page-section__blocks {
width: 100%;
}
.page-prose {
max-width: 68ch;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-dark);
}
.page-prose > * + * {
margin-top: 1.25rem;
}
.page-prose h3 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 1.4rem;
letter-spacing: -0.01em;
margin-top: 2.5rem;
color: var(--text-dark);
}
.page-prose p {
margin: 0;
}
.page-prose strong {
font-weight: 600;
}
.page-prose a:not(.page-btn) {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
#privacy .page-prose {
max-width: 724px;
margin-left: auto;
margin-right: auto;
}
#privacy ul {
font-size: 1rem;
line-height: 1.65;
color: #25323A;
opacity: .82;
margin: 0 0 .8rem;
padding-left: 1.25rem;
max-width: 70ch;
}
#privacy ul li{
font-family: "aktiv-grotesk", "Inter", sans-serif;
margin: 0 0 .35rem;
}
#privacy .page-prose p {
margin: 0;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #25323A;
opacity: .82;
margin: 0 0 .8rem;
max-width: 70ch;
}
.acc-body.page-prose {
max-width: 100%;
}
/* Lead paragraph — slightly larger intro text */
.page-lead {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
line-height: 1.6;
color: var(--text-dark);
max-width: 60ch;
margin-top: clamp(2rem, 4vw, 3rem);
}
/* Down syndrome early care — checklist + pull quote */
.mp-list {
list-style: none;
padding: 0;
margin: 1.2rem 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 1.6rem;
}
@media (max-width: 620px) {
.mp-list {
grid-template-columns: 1fr;
}
}
.mp-list li {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.98rem;
line-height: 1.5;
color: #25323a;
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.mp-list i {
color: var(--accent);
margin-top: 0.15rem;
flex: none;
}
.mp-list--avoid i {
color: #c65a3a;
}
.ds-quote {
border-left: 3px solid var(--accent);
padding: 0.3rem 0 0.3rem 1.4rem;
margin: 1.6rem 0 0;
}
.ds-quote p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
line-height: 1.4;
color: #25323a;
margin: 0;
}
/* Events — empty state when no upcoming events */
.mp-empty {
text-align: center;
border: 1px dashed #d7d3cc;
border-radius: 18px;
padding: clamp(2rem, 5vw, 3.4rem);
background: #fff;
}
.mp-empty i {
font-size: 2.2rem;
color: var(--accent);
}
.mp-empty h3 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: #25323a;
margin: 0.8rem 0 0.4rem;
}
.mp-empty p {
font-family: "aktiv-grotesk", "Inter", sans-serif;
color: #5c6b72;
margin: 0 auto;
max-width: 46ch;
}
/* ---- Two-column split (text + media / aside) ---- */
.page-split {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.page-split--media-left .page-split__media {
order: -1;
}
@media (max-width: 860px) {
.page-split {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.page-split--media-left .page-split__media {
order: 0;
}
}
.page-split__media img,
.page-split__media video {
width: 100%;
height: auto;
border-radius: 16px;
display: block;
}
/* Dark “at a glance” aside (teletherapy / method splits) */
.page-split > aside {
color: #fff;
}
.page-split > aside li,
.page-split > aside li span {
color: #fff;
}
/* ---- ORCA method page: pillars + toolkit cards ---- */
.orca-pillars {
display: grid;
gap: 1.4rem;
grid-template-columns: repeat(2, 1fr);
margin-top: 2rem;
}
@media (min-width: 861px) {
.orca-pillars {
grid-template-columns: repeat(4, 1fr);
}
}
.orca-pillar {
border: 1px solid rgba(37, 50, 58, 0.12);
border-radius: 16px;
padding: 1.7rem 1.5rem 1.6rem;
background: #fff;
}
.orca-pillar__letter {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-size: 2.6rem;
line-height: 1;
font-weight: 800;
background: linear-gradient(135deg, #feaa5f, #fd9d49);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.orca-pillar__title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-size: 1.05rem;
margin: 0.7rem 0 0.5rem;
color: var(--text-dark);
}
.orca-pillar__text {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.92rem;
line-height: 1.5;
color: var(--text-dark);
opacity: 0.74;
margin: 0;
}
.orca-cat__index {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-size: 0.8rem;
letter-spacing: 0.12em;
color: var(--accent);
margin: 0 0 0.35rem;
}
.orca-cat__tools {
list-style: none;
padding: 0;
margin: 0.9rem 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.orca-cat__tools li {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.86rem;
color: var(--text-dark);
opacity: 0.82;
border: 1px solid rgba(37, 50, 58, 0.14);
border-radius: 999px;
padding: 0.28rem 0.72rem;
}
.orca-cat__tools li a {
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
}
.orca-cat__tools li.has-page {
position: relative;
overflow: hidden;
border-color: rgba(91, 130, 160, 0.5);
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
.orca-cat__tools li.has-page::before {
content: "";
position: absolute;
inset: 0;
left: -120%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transition: left 0.6s ease;
pointer-events: none;
z-index: 0;
}
.orca-cat__tools li.has-page:hover::before {
left: 120%;
}
.orca-cat__tools li.has-page:hover {
background: linear-gradient(135deg, #5b82a0, #35506a);
border-color: #5b82a0;
transform: translateY(-2px);
}
.orca-cat__tools li.has-page:hover a {
color: #fff;
}
#methods .cond-grid--3 {
max-width: none;
}
/* ---- Condition overview: prose + full-bleed point cloud ---- */
.pc-stage {
max-width: 580px;
}
.pc-stage--full {
position: relative;
aspect-ratio: 3 / 4;
}
.pc-stage--full canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.ov-pcfull {
position: relative;
}
.ov-pcfull .page-split__media {
position: relative;
}
.ov-pcfull .page-section__head {
margin-bottom: 0;
}
@media (min-width: 861px) {
.page-split--pc {
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
/* Zero section padding so the canvas runs edge to edge; pad the text column instead. */
.ov-pcfull {
padding-top: 0;
padding-bottom: 0;
}
.ov-pcfull .page-split--pc > div:first-child {
padding-top: clamp(3.5rem, 8vw, 7rem);
padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.ov-pcfull .pc-stage--full {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50%;
max-width: none;
aspect-ratio: auto;
margin: 0;
}
.condition-overview-section.ov-pcfull .pc-stage--full{
width: 100%;
}
}
@media (max-width: 860px) {
.ov-pcfull .pc-stage {
margin: 0 auto;
}
}
/* ---- Feature card grid (reusable, brand-styled) ---- */
.page-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
/* Clear breathing room when cards follow an intro paragraph (was sticking) */
.page-prose + .page-cards {
margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.page-card {
background: #ffffff;
border: 1px solid #e3e1dc;
border-radius: 14px;
padding: clamp(1.5rem, 2.5vw, 2.25rem);
transition:
transform 0.45s cubic-bezier(0.33, 1, 0.68, 1),
box-shadow 0.45s ease,
border-color 0.45s ease;
will-change: transform;
}
.page-card:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow:
0 18px 50px rgba(253, 157, 73, 0.16),
0 6px 18px rgba(26, 37, 43, 0.05);
}
.page-card__num {
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.18em;
color: var(--accent);
margin: 0 0 0.75rem;
}
/* Large line-icon for method/feature cards — matches the brand icon size, and
at this scale the line weight reads close to the brand SVG icons. */
.page-card__micon {
display: block;
font-size: clamp(58px, 6.5vw, 78px);
line-height: 1;
color: var(--accent);
margin: 0 0 1.1rem;
transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.page-card:hover .page-card__micon {
transform: scale(1.08);
}
/* Brand SVG card icon — sized to match the homepage stat icons (96px). */
.page-card__icon {
width: clamp(80px, 8vw, 96px);
height: clamp(80px, 8vw, 96px);
object-fit: contain;
object-position: left center;
display: block;
margin: 0 0 1.1rem;
transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.page-card:hover .page-card__icon {
transform: scale(1.1);
}
/* ---- Vertical timeline (e.g. Programs · "A day in an intensive") ---- */
.timeline {
list-style: none;
margin: clamp(2rem, 4vw, 3rem) 0 0;
padding: 0;
position: relative;
max-width: 760px;
}
.timeline::before {
content: "";
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--accent), rgba(253, 157, 73, 0.15));
}
.timeline__step {
position: relative;
padding: 0 0 clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 3.5vw, 2.75rem);
}
.timeline__step:last-child {
padding-bottom: 0;
}
.timeline__step::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(253, 157, 73, 0.16);
}
.timeline__time {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.timeline__title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 1.2rem;
color: var(--text-dark);
margin: 0.35rem 0 0.4rem;
}
.timeline__text {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.97rem;
line-height: 1.6;
color: var(--text-dark);
opacity: 0.86;
margin: 0;
}
/* Pulse radiating from behind each timeline dot (who-we-help) */
.timeline__step::before {
z-index: 1;
} /* keep the solid dot above the pulse */
.timeline__step::after {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(253, 157, 73, 0.6);
z-index: 0;
pointer-events: none;
animation: stepPulse 2.4s ease-out infinite;
}
@keyframes stepPulse {
0% {
transform: scale(1);
opacity: 0.85;
}
70% {
opacity: 0.18;
}
100% {
transform: scale(3);
opacity: 0;
}
}
/* Two-column: timeline (left) + hover-swap free-form image (right) */
.steps-x {
display: grid;
grid-template-columns: 1fr 0.85fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
margin-top: clamp(2rem, 4vw, 3rem);
}
.steps-x .timeline {
margin-top: 0;
}
/* dim the other steps while one is hovered */
.steps-x:has(.timeline__step:hover) .timeline__step {
opacity: 0.5;
transition: opacity 0.35s var(--ease);
}
.steps-x:has(.timeline__step:hover) .timeline__step:hover {
opacity: 1;
}
.steps-x__media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}
.steps-x__media::before {
content: "";
position: absolute;
inset: -6%;
z-index: 0;
background: radial-gradient(
circle at 52% 48%,
rgba(253, 157, 73, 0.2),
transparent 62%
);
filter: blur(8px);
}
.steps-x__img {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.05);
transition:
opacity 0.7s var(--ease),
transform 1s var(--ease);
/* Soft circular feather — blends the (already vignetted) photo into the
cream section with no hard edge. Fades to transparent before the corners. */
-webkit-mask-image: radial-gradient(
circle at 50% 50%,
#000 44%,
transparent 56%
);
mask-image: radial-gradient(circle at 50% 50%, #000 44%, transparent 56%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.steps-x__img[data-step="1"] {
opacity: 1;
transform: scale(1);
} /* default */
.steps-x:has(.timeline__step:hover) .steps-x__img {
opacity: 0;
transform: scale(1.05);
}
.steps-x:has(.timeline__step[data-step="1"]:hover) .steps-x__img[data-step="1"],
.steps-x:has(.timeline__step[data-step="2"]:hover) .steps-x__img[data-step="2"],
.steps-x:has(.timeline__step[data-step="3"]:hover) .steps-x__img[data-step="3"],
.steps-x:has(.timeline__step[data-step="4"]:hover)
.steps-x__img[data-step="4"] {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.timeline__step::after {
animation: none;
}
}
@media (max-width: 900px) {
.steps-x {
grid-template-columns: 1fr;
gap: 2rem;
}
.steps-x__media {
order: -1;
max-width: 340px;
margin: 0 auto;
}
}
/* ============================================================
Condition category sections with animated fx background
(/conditions/ — reuses the homepage neural/muscle/ripple canvases,
ported to condition-fx.js and run as a subtle full-section backdrop)
============================================================ */
.cond-section {
position: relative;
overflow: hidden;
}
.cond-section--alt {
background: #faf8f4;
}
.fx-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.55;
pointer-events: none;
}
.cond-section .page-container {
position: relative;
z-index: 1;
}
.cond-grid {
display: grid;
gap: clamp(0.85rem, 1.5vw, 1.15rem);
grid-template-columns: repeat(5, 1fr);
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.cond-grid--3 {
grid-template-columns: repeat(3, 1fr);
max-width: 940px;
}
@media (max-width: 1080px) {
.cond-grid,
.cond-grid--3,
.cond-grid--5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 720px) {
.cond-grid,
.cond-grid--3,
.cond-grid--5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 460px) {
.cond-grid,
.cond-grid--3,
.cond-grid--5 {
grid-template-columns: 1fr;
}
}
/* Fill the container: 5-up, 4-up and 2-up groups */
.cond-grid--5 {
grid-template-columns: repeat(5, 1fr);
}
.cond-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.cond-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1080px) {
.cond-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.cond-grid--4,
.cond-grid--2 {
grid-template-columns: 1fr;
}
}
/* Condition detail — "Subtypes we work with" grid (reusable across conditions).
3 columns (→ 2 rows for 6 items), each a bordered card with a thick check icon. */
.subtype-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
margin-top: clamp(1.4rem, 2.5vw, 1.8rem);
}
@media (max-width: 760px) {
.subtype-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.subtype-grid {
grid-template-columns: 1fr;
}
}
.subtype {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1.15rem;
border-radius: 12px;
border: 1px solid rgba(26, 37, 43, 0.12);
background: #ffffff;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 500;
font-size: 0.98rem;
line-height: 1.25;
color: var(--text-dark);
transition:
border-color 0.25s var(--ease),
transform 0.2s var(--ease),
box-shadow 0.25s var(--ease);
}
.subtype:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 10px 26px -16px rgba(253, 157, 73, 0.5);
}
.subtype svg {
flex-shrink: 0;
color: var(--accent);
}
/* "Back to all conditions" card (4th slot of the related-category grid) */
.cond-card--back {
background: linear-gradient(
180deg,
rgba(253, 157, 73, 0.1),
rgba(253, 157, 73, 0.03)
);
border-color: rgba(253, 157, 73, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
}
.cond-card--back .page-card__link i {
margin-right: 0.35rem;
}
.cond-card {
display: flex;
flex-direction: column;
text-decoration: none;
padding: clamp(1.1rem, 1.6vw, 1.5rem);
background: #fff;
border: 1px solid rgba(26, 37, 43, 0.08);
border-radius: 16px;
box-shadow: 0 12px 30px -22px rgba(26, 37, 43, 0.4);
transition:
transform 0.4s var(--ease),
border-color 0.4s var(--ease),
box-shadow 0.4s var(--ease);
}
.cond-card:hover {
transform: translateY(-5px);
border-color: rgba(253, 157, 73, 0.4);
box-shadow: 0 22px 44px -22px rgba(253, 157, 73, 0.4);
}
.cond-card__title {
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 600;
font-size: 1.02rem;
color: var(--text-dark);
margin: 0 0 0.5rem;
line-height: 1.25;
}
.cond-card__text {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.86rem;
line-height: 1.5;
color: var(--text-dark);
opacity: 0.82;
margin: 0 0 1rem;
flex: 1;
}
.cond-card .page-card__link {
font-size: 0.74rem;
}
/* Low-barrier action checklist (family-situation sub-pages) */
.checklist {
list-style: none;
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding: 0;
display: grid;
gap: 0.85rem;
max-width: 760px;
}
.checklist__item {
display: flex;
gap: 0.9rem;
align-items: flex-start;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid rgba(26, 37, 43, 0.08);
border-radius: 14px;
box-shadow: 0 10px 26px -18px rgba(26, 37, 43, 0.3);
transition:
transform 0.35s var(--ease),
border-color 0.35s var(--ease);
}
.checklist__item:hover {
transform: translateX(4px);
border-color: rgba(253, 157, 73, 0.4);
}
.checklist__icon {
flex: 0 0 auto;
width: 26px;
height: 26px;
margin-top: 1px;
border-radius: 50%;
background: rgba(253, 157, 73, 0.14);
color: var(--accent);
display: grid;
place-items: center;
font-size: 0.95rem;
}
.checklist__text {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.98rem;
line-height: 1.55;
color: var(--text-dark);
}
.checklist__text strong {
font-weight: 600;
}
/* Simple two-column compare (e.g. active vs traditional) */
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.compare__col {
padding: clamp(1.3rem, 2.5vw, 1.8rem);
border-radius: 16px;
}
.compare__col--us {
background: linear-gradient(
180deg,
rgba(253, 157, 73, 0.1),
rgba(253, 157, 73, 0.04)
);
border: 1px solid rgba(253, 157, 73, 0.3);
}
.compare__col--them {
background: #f4f3f0;
border: 1px solid rgba(26, 37, 43, 0.08);
}
.compare__tag {
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 0.9rem;
}
.compare__col--us .compare__tag {
color: var(--accent);
}
.compare__col--them .compare__tag {
color: rgba(26, 37, 43, 0.5);
}
.compare__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.compare__list li {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-dark);
padding-left: 1.5rem;
position: relative;
}
.compare__col--us .compare__list li::before {
content: "\2714";
position: absolute;
left: 0;
color: var(--accent);
}
.compare__col--them .compare__list li {
opacity: 0.7;
}
.compare__col--them .compare__list li::before {
content: "\2013";
position: absolute;
left: 0;
color: rgba(26, 37, 43, 0.4);
}
@media (max-width: 640px) {
.compare {
grid-template-columns: 1fr;
}
}
/* Funding / support institution logo strip (who-we-help · support routing) */
.logo-strip {
margin-top: clamp(2.25rem, 4vw, 3.25rem);
text-align: center;
}
.logo-strip__label {
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 1.25rem;
}
.logo-strip__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 4vw, 3rem);
}
/* Brand-grey typographic wordmarks (swap for official logo files later) */
.logo-strip__name {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: clamp(0.95rem, 1.5vw, 1.15rem);
letter-spacing: -0.01em;
color: rgba(37, 50, 58, 0.42); /* branding grey */
filter: grayscale(1);
transition:
color 0.4s var(--ease),
transform 0.4s var(--ease);
}
.logo-strip__name:hover {
color: rgba(37, 50, 58, 0.7);
transform: translateY(-2px);
}
.logo-strip .fees-note {
margin-top: 1.25rem;
}
/* ---- Team cards (the-therapieavengers) ---- */
.team-photo {
margin: 0 0 1.1rem;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
background: #e9e6e0;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease);
}
.page-card:hover .team-photo img {
transform: scale(1.05);
}
.team-card__role {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.92rem;
color: var(--text-dark);
opacity: 0.78;
margin: 0 0 0.85rem;
}
.team-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 1rem;
}
.team-tag {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
background: rgba(253, 157, 73, 0.12);
border-radius: 999px;
padding: 0.3rem 0.65rem;
}
.team-bar {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.team-bar__label {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--text-dark);
opacity: 0.7;
}
.team-bar__track {
height: 7px;
border-radius: 999px;
background: rgba(37, 50, 58, 0.1);
overflow: hidden;
}
.team-bar__fill {
display: block;
height: 100%;
width: var(--v, 90%);
border-radius: 999px;
background: linear-gradient(90deg, #feaa5f, #fd9d49);
}
/* ---- Simple photo tiles for galleries (e.g. Lilly pics & videos) ---- */
.zone-photo {
margin: 0;
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
background: #e9e6e0;
}
.zone-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.zone-photo video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #1c3338;
}
.zone-photo--ph,
.team-photo--ph {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #c9c4ba;
background: #f3f0ea;
}
.zone-photo--ph span,
.team-photo--ph span {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a89f8e;
}
.page-card__title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 1.25rem;
letter-spacing: -0.01em;
color: var(--text-dark);
margin: 0 0 0.6rem;
}
.page-card__text {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
opacity: 0.82;
margin: 0;
}
/* ---- What to bring checklists ---- */
.wtb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
@media (max-width: 760px) {
.wtb-grid {
grid-template-columns: 1fr;
}
}
.wtb-card {
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 18px;
padding: clamp(1.4rem, 2.4vw, 1.9rem);
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.wtb-card:hover {
box-shadow: 0 24px 50px -30px rgba(26, 37, 43, 0.5);
transform: translateY(-3px);
}
.wtb-card .page-card__icon {
margin-bottom: 1rem;
}
.wtb-card h3 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-weight: 700;
font-size: 1.18rem;
color: #25323a;
margin: 0 0 0.9rem;
}
.wtb-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.wtb-list li {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.96rem;
line-height: 1.5;
color: #25323a;
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.wtb-list i {
color: var(--accent);
margin-top: 0.15rem;
flex: none;
}
/* ---- Inline CTA row ---- */
.page-cta-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* Page CTA buttons reuse the shared button system from style-v6-spec.css.
We expose simple .page-btn primary/secondary aliases here so subpage
markup stays readable; they mirror the homepage gradient + shine. */
.page-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1.1rem 2rem;
border-radius: 999px;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
background 0.35s ease,
border-color 0.35s ease;
}
.page-btn--primary {
background: linear-gradient(180deg, #feaa5f, #fd9d49);
color: #ffffff;
border: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 12px 28px -8px rgba(253, 157, 73, 0.55);
}
.page-btn--primary:hover {
transform: translateY(-3px);
background: linear-gradient(180deg, #ffb870, #fca350);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 22px 44px -12px rgba(253, 157, 73, 0.7);
}
.page-btn--primary::after {
content: "→";
transition: transform 0.3s ease;
}
.page-btn--primary:hover::after {
transform: translateX(4px);
}
.page-btn--secondary {
background: transparent;
color: var(--text-dark);
border: 1.5px solid rgba(26, 37, 43, 0.25);
}
.page-section--navy .page-btn--secondary,
.page-hero .page-btn--secondary {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.45);
}
.page-btn--secondary:hover {
transform: translateY(-3px);
border-color: var(--accent);
color: var(
--text-dark
); /* keep readable on light bg (was orange = low contrast) */
background: rgba(
253,
157,
73,
0.08
); /* subtle orange tint instead of orange text */
}
.page-section--navy .page-btn--secondary:hover,
.page-hero .page-btn--secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #ffffff;
color: #ffffff;
}
/* Shine sweep for page buttons */
.page-btn::before {
content: "";
position: absolute;
top: 0;
left: -110%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
transition: left 0.7s ease;
pointer-events: none;
}
.page-btn:hover::before {
left: 110%;
}
/* ============================================================
LOAD MORE (parent stories — reveal hidden cards in batches)
============================================================ */
.voices__loadmore {
display: flex;
justify-content: center;
margin-top: clamp(2rem, 4vw, 3rem);
}
/* .voice-card sets display:flex, which overrides the [hidden] attribute's
display:none — so force hidden cards to actually hide until Load More. */
.voice-card[hidden] {
display: none !important;
}
/* Hidden cards fade up when revealed by the Load More button */
.voice-card.is-more-revealing {
opacity: 0;
transform: translateY(16px);
}
.voice-card.is-more-shown {
opacity: 1;
transform: none;
transition:
opacity 0.55s var(--ease),
transform 0.55s var(--ease);
}
/* ============================================================
ACCORDION (FAQ, insurance cards, facility info, etc.)
Uses native … … reveal.
Chromium 129+ / modern browsers; degrades to instant elsewhere. */
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
.acc-item::details-content {
block-size: 0;
overflow: hidden;
transition:
block-size 0.4s var(--ease),
content-visibility 0.4s var(--ease) allow-discrete;
}
.acc-item[open]::details-content {
block-size: auto;
}
}
/* ============================================================
FEE CARDS (Outlays / Fees — CHF pricing matrix)
============================================================ */
.fees-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.fee-card {
border: 1px solid #e3e1dc;
border-radius: 16px;
background: #ffffff;
padding: clamp(1.5rem, 2.5vw, 2.25rem);
display: flex;
flex-direction: column;
transition:
transform 0.35s var(--ease),
border-color 0.35s var(--ease),
box-shadow 0.35s var(--ease);
}
.fee-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 50px rgba(26, 37, 43, 0.07);
}
.fee-card--featured {
border-color: var(--accent);
box-shadow: 0 18px 50px rgba(253, 157, 73, 0.16);
}
.fee-card__tag {
align-self: flex-start;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(253, 157, 73, 0.12);
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.fee-card__label {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 1.2rem;
color: var(--text-dark);
margin: 0 0 0.5rem;
}
.fee-card__price {
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 700;
font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--text-dark);
}
.fee-card__price small {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0;
}
.fee-card__unit {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.88rem;
color: var(--text-muted);
margin: 0.4rem 0 1.1rem;
}
.fee-card__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.92rem;
color: var(--text-dark);
}
.fee-card__list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
opacity: 0.85;
}
.fee-card__list li i {
color: var(--accent);
flex-shrink: 0;
margin-top: 0.1rem;
}
.fees-note {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 1.25rem;
}
/* Partners intro + logo/name marquee */
.partners-intro p {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.72;
color: #25323A;
opacity: 0.85;
margin: 0 0 1rem;
max-width: 72ch;
}
.partner-marquee {
overflow: hidden;
position: relative;
margin-top: 2.2rem;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.partner-marquee__track {
display: flex;
width: max-content;
animation: pm-scroll 36s linear infinite;
}
.partner-marquee:hover .partner-marquee__track {
animation-play-state: paused;
}
.pm-group {
display: flex;
align-items: center;
}
.pm-item {
font-family: var(--font-heading);
font-weight: 700;
white-space: nowrap;
font-size: clamp(1.05rem, 1.8vw, 1.45rem);
letter-spacing: 0.02em;
color: #25323A;
opacity: 0.7;
display: flex;
align-items: center;
gap: 0.55rem;
margin-right: clamp(2.4rem, 5vw, 4.5rem);
padding: 1.4rem 0;
transition: opacity 0.3s ease;
}
.pm-item:hover { opacity: 1; }
.pm-item i { color: var(--accent); font-size: 1.1em; }
@keyframes pm-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.partner-marquee__track { animation: none; }
}
/* 2-column flowing text (Outlays / fees) */
.fees-flowtext {
column-count: 2;
column-gap: 3rem;
margin-top: 0.5rem;
}
.fees-flowtext p {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.72;
color: #25323A;
opacity: 0.85;
margin: 0 0 1rem;
}
.fees-flowtext p:first-child::first-letter {
font-family: "Cormorant Garamond", serif;
font-size: 3.1em;
font-weight: 600;
float: left;
line-height: 0.82;
padding: 0.06em 0.12em 0 0;
color: var(--accent);
}
@media (max-width: 720px) {
.fees-flowtext { column-count: 1; }
}
/* ============================================================
SPLAT TOUR (Tour the centre — Gaussian-splat that zooms to
fullscreen on scroll, no surrounding bento images)
Pinned section; tour-zoom.js (GSAP) scrubs the stage from a
contained card to a full-viewport view, then an Enter-tour button.
============================================================ */
.splat-tour {
position: relative;
background: transparent;
}
/* Retract the nav while the splat is zoomed in (immersive). */
body.tour-immersive .nav {
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition:
opacity 0.4s ease,
transform 0.4s ease;
}
.splat-tour__pin {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(0.9rem, 2.4vh, 1.9rem);
overflow: hidden;
}
/* Heading lives INSIDE the pin (above the stage) so title + tour are one
centred frame — no big gap from a separate section above. Fades out as
the splat zooms in. */
.splat-tour__intro {
text-align: center;
max-width: 720px;
padding: 0 1.5rem;
transition: opacity 0.35s ease;
}
.splat-tour__intro .page-lead {
margin: 0.6rem auto 0;
}
.splat-tour__stage {
position: relative;
width: min(1400px, 94vw);
height: min(820px, 74vh);
border-radius: 20px;
overflow: hidden;
background: #0e171c;
box-shadow: 0 36px 90px -24px rgba(0, 0, 0, 0.45);
will-change: width, height, border-radius;
}
.splat-tour__stage iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
/* Non-interactive during the embedded/zoom phase so it doesn't eat
scroll; becomes interactive only in fullscreen. */
pointer-events: none;
}
/* The iframe itself goes fullscreen (avoids the GSAP-pin transform that
makes element-fullscreen flash-and-exit). Make it interactive there. */
.splat-tour__stage iframe:fullscreen,
.splat-tour__stage iframe:-webkit-full-screen {
pointer-events: auto;
width: 100vw;
height: 100vh;
}
/* Enter / Exit tour button — orange pill, lives inside the stage so it
stays with it in fullscreen. Hidden until the zoom is well underway. */
.splat-tour__btn {
position: absolute;
bottom: clamp(1.25rem, 3vw, 2.25rem);
left: 50%;
transform: translateX(-50%) translateY(8px);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.9rem;
border: none;
border-radius: 999px;
background: linear-gradient(180deg, #feaa5f, #fd9d49);
color: #ffffff;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 12px 28px -8px rgba(253, 157, 73, 0.6);
/* Always available — clicking it is the ONLY way to interact with the
tour (the embed is non-interactive until fullscreen). */
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
transition:
opacity 0.4s var(--ease),
transform 0.4s var(--ease),
box-shadow 0.3s var(--ease);
}
.splat-tour__btn.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.splat-tour__btn:hover {
background: linear-gradient(180deg, #ffb870, #fca350);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 18px 36px -10px rgba(253, 157, 73, 0.75);
}
.splat-tour__btn i {
font-size: 1.15em;
}
/* Fullscreen tour overlay — body-level, covers the viewport, holds the
INTERACTIVE splat. Lives outside the GSAP-pinned (transformed) section
so element-fullscreen / position:fixed behave correctly. */
.tour-fs-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: #0e171c;
}
.tour-fs-overlay[hidden] {
display: none;
}
.tour-fs-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.tour-fs-close {
position: fixed;
top: clamp(14px, 2vw, 24px);
right: clamp(14px, 2vw, 24px);
z-index: 10000;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 999px;
background: linear-gradient(180deg, #feaa5f, #fd9d49);
color: #fff;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 12px 28px -8px rgba(0, 0, 0, 0.5);
transition:
background 0.3s var(--ease),
transform 0.2s var(--ease);
}
.tour-fs-close:hover {
background: linear-gradient(180deg, #ffb870, #fca350);
transform: translateY(-2px);
}
.tour-fs-close i {
font-size: 1.2em;
}
/* While the immersive tour overlay is open, hide the custom orange cursor —
the SuperSplat iframe shows its own native cursor, so otherwise you'd see
two. (cursor.js rewrites opacity inline each frame → need !important.) */
body.tour-open .cursor-ring,
body.tour-open .cursor-dot {
opacity: 0 !important;
visibility: hidden;
}
body.tour-open .tour-fs-overlay {
cursor: auto;
}
/* ============================================================
TOUR FRAME (legacy placeholder — kept for reference)
============================================================ */
.tour-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
background: var(--dark);
box-shadow: 0 24px 60px -16px rgba(26, 37, 43, 0.3);
}
.tour-frame iframe,
.tour-frame video,
.tour-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: cover;
}
.tour-frame__placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-family: "aktiv-grotesk", sans-serif;
padding: 2rem;
}
.tour-frame__placeholder i {
font-size: 2.5rem;
color: var(--accent);
}
.tour-guide {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: clamp(1.75rem, 5vw, 4rem);
margin-top: clamp(1.5rem, 3vw, 2.5rem);
text-align: center;
}
.tour-guide__item {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
max-width: 230px;
font-family: "aktiv-grotesk", sans-serif;
font-size: clamp(1rem, 1.35vw, 1.15rem);
font-weight: 500;
line-height: 1.4;
color: var(--text-dark);
}
.tour-guide__icon {
width: clamp(52px, 5.5vw, 64px);
height: clamp(52px, 5.5vw, 64px);
object-fit: contain; /* mixed aspect ratios (square keyboard + tall mice) */
flex: none;
}
/* ============================================================
14 PROMISES MATRIX (About Us — Block 2)
============================================================ */
.promises-grid {
list-style: none;
margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(0.75rem, 1.5vw, 1.1rem);
}
.promise {
display: flex;
align-items: flex-start;
gap: 0.85rem;
background: #ffffff;
border: 1px solid #e3e1dc;
border-radius: 12px;
padding: 1.1rem 1.25rem;
transition:
transform 0.3s var(--ease),
border-color 0.3s var(--ease),
box-shadow 0.3s var(--ease);
}
.promise:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: 0 12px 30px rgba(253, 157, 73, 0.14);
}
.promise__num {
flex-shrink: 0;
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.08em;
color: var(--accent);
line-height: 1.5;
min-width: 1.6em;
}
.promise p {
margin: 0;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-dark);
}
/* ============================================================
DRAFT-COPY MARKER
Placeholder copy is tagged data-draft="copy". Invisible by default
(clean client review). Add `class="show-drafts"` to to outline
every placeholder for the copywriter / WP dev to find and replace.
============================================================ */
body.show-drafts [data-draft="copy"] {
outline: 1px dashed rgba(253, 157, 73, 0.7);
outline-offset: 4px;
border-radius: 2px;
}
/* ---- Scroll-reveal helper (used with apexa-shared / IntersectionObserver
or simple CSS). Elements with data-reveal fade up when in view. ---- */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s var(--ease),
transform 0.7s var(--ease);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
r6–16 build-out — shared components (cards link, quote,
copy fields, blog pills + post cards)
============================================================ */
.page-card__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
font-family: "aktiv-grotesk", sans-serif;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--accent);
}
.page-card__link i {
transition: transform 0.3s var(--ease);
}
.page-card:hover .page-card__link i {
transform: translateX(4px);
}
/* Pull quote (method pages) */
.pull-quote {
max-width: 820px;
margin: 0 auto;
text-align: center;
border: 0;
padding: 0;
}
.pull-quote p {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
line-height: 1.35;
color: var(--text-dark);
margin: 0;
}
.pull-quote cite {
display: block;
margin-top: 1.1rem;
font-style: normal;
font-size: 0.9rem;
letter-spacing: 0.04em;
color: var(--accent);
}
/* Copy-to-clipboard field (qr-bill) */
.copy-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: #ffffff;
border: 1px solid #e3e1dc;
border-radius: 12px;
padding: 0.9rem 1.1rem;
margin-bottom: 0.75rem;
}
.copy-field__label {
display: block;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.2rem;
}
.copy-field__value {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 1rem;
color: var(--text-dark);
word-break: break-all;
}
.copy-field__btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid rgba(253, 157, 73, 0.4);
background: rgba(253, 157, 73, 0.1);
color: var(--accent);
border-radius: 999px;
padding: 0.5rem 0.95rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition:
background 0.25s var(--ease),
color 0.25s var(--ease);
}
.copy-field__btn:hover {
background: var(--accent);
color: #fff;
}
.copy-field__btn.is-copied {
background: #2e7d52;
border-color: #2e7d52;
color: #fff;
}
/* QR-bill example figure */
.qr-bill-figure {
max-width: 340px;
margin: 0;
}
.qr-bill-figure__img {
width: 100%;
height: auto;
display: block;
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 16px;
padding: 20px;
box-shadow: 0 16px 38px -20px rgba(26, 37, 43, 0.5);
}
.qr-bill-figure__caption {
margin-top: 0.75rem;
text-align: center;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: #8a979e;
}
/* Filter pills (learn / blog) */
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pill {
border: 1px solid #e3e1dc;
background: #ffffff;
color: var(--text-dark);
border-radius: 999px;
padding: 0.5rem 1.1rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition:
background 0.25s var(--ease),
color 0.25s var(--ease),
border-color 0.25s var(--ease);
}
.pill:hover {
border-color: var(--accent);
color: var(--accent);
}
.pill.is-active {
background: linear-gradient(180deg, #feaa5f, #fd9d49);
border-color: transparent;
color: #fff;
}
/* Blog post cards (learn) */
.post-card .zone-photo {
margin-bottom: 1.1rem;
}
/* Blog grid — exactly 3 per row, compact padding, full-bleed bigger image */
.post-grid {
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 2vw, 1.75rem);
}
@media (max-width: 920px) {
.post-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.post-grid {
grid-template-columns: 1fr;
}
}
.post-card {
padding: 1.15rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.post-card .zone-photo {
margin: -1.15rem -1.15rem 1.05rem; /* bleed to the top + side edges */
border-radius: 0;
aspect-ratio: 16 / 10; /* taller → more room for the image */
background: #e9e6e0;
}
.post-card .page-card__text {
flex: 1;
}
.post-card__meta {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.post-card__time {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.74rem;
color: var(--text-dark);
opacity: 0.6;
}
.post-card__author {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.82rem;
color: var(--text-dark);
opacity: 0.78;
}
/* Search results page */
.search-results__form {
display: flex;
gap: 0.75rem;
align-items: stretch;
margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
max-width: 640px;
}
.search-results__input {
flex: 1;
min-width: 0;
border: 1px solid #e3e1dc;
border-radius: 999px;
padding: 0.85rem 1.25rem;
font-family: var(--font-body);
font-size: 1rem;
color: var(--text-dark);
background: #fff;
}
.search-results__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(253, 157, 73, 0.25);
}
.search-results__form .page-btn {
flex-shrink: 0;
}
.search-results__grid .page-card__link {
margin-top: auto;
}
.search-results__pages {
margin-top: clamp(2rem, 4vw, 3rem);
}
.search-results__pages .nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
align-items: center;
}
.search-results__pages .page-numbers {
display: inline-flex;
min-width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
padding: 0 0.85rem;
border-radius: 999px;
border: 1px solid #e3e1dc;
background: #fff;
color: var(--text-dark);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.9rem;
}
.search-results__pages .page-numbers.current,
.search-results__pages a.page-numbers:hover {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.search-results__pages .page-numbers.dots {
border: 0;
background: transparent;
min-width: 0;
}
@media (max-width: 600px) {
.search-results__form {
flex-direction: column;
}
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* ============================================================
ARTICLE / BLOG POST DETAIL (learn//) — reusable template
Reuses .page-prose, .pull-quote, .post-grid; adds the editorial
header, hero image, takeaways callout, share row + author bio.
============================================================ */
.article-wrap {
max-width: 760px;
margin: 0 auto;
}
.article-head__cat {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.article-title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.08;
font-size: clamp(2rem, 4.6vw, 3.4rem);
color: var(--text-dark);
margin: 0;
}
.article-dek {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: clamp(1.1rem, 1.7vw, 1.3rem);
line-height: 1.6;
color: var(--text-dark);
opacity: 0.8;
margin: 1.1rem 0 0;
max-width: 60ch;
}
.article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1.1rem;
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid #e3e1dc;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.86rem;
color: var(--text-dark);
}
.article-meta__author {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 600;
}
.article-meta__author .post-card__avatar {
width: 34px;
height: 34px;
}
.article-meta__sep {
opacity: 0.4;
}
.article-hero-img {
margin: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(1.8rem, 4vw, 2.6rem);
border-radius: 18px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #e9e6e0;
}
.article-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.article-figure {
margin: 2.2rem 0;
}
.article-figure img {
width: 100%;
border-radius: 14px;
display: block;
}
.article-figure figcaption {
margin-top: 0.6rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.8rem;
color: var(--text-dark);
opacity: 0.6;
text-align: center;
}
.article-callout {
margin: 2.4rem 0;
padding: clamp(1.4rem, 2.4vw, 1.9rem);
background: linear-gradient(
180deg,
rgba(253, 157, 73, 0.08),
rgba(253, 157, 73, 0.04)
);
border: 1px solid rgba(253, 157, 73, 0.28);
border-radius: 16px;
}
.article-callout h4 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.9rem;
}
.article-callout ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.65rem;
}
.article-callout li {
position: relative;
padding-left: 1.7rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 1rem;
line-height: 1.55;
color: var(--text-dark);
}
.article-callout li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
.article-share {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
margin-top: 2.4rem;
padding-top: 1.6rem;
border-top: 1px solid #e3e1dc;
}
.article-share__label {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dark);
opacity: 0.6;
}
.article-share a {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid #e3e1dc;
color: var(--text-dark);
font-size: 1.05rem;
text-decoration: none;
transition:
background 0.25s var(--ease),
color 0.25s var(--ease),
border-color 0.25s var(--ease),
transform 0.15s ease;
}
.article-share a:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: translateY(-2px);
}
.article-author {
display: flex;
gap: 1.2rem;
align-items: center;
margin-top: 2.4rem;
padding: clamp(1.3rem, 2.2vw, 1.8rem);
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 16px;
}
.article-author__avatar {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #feaa5f, #fd9d49);
}
.article-author__name {
font-family: "aktiv-grotesk-extended", sans-serif;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.article-author__role {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.85rem;
color: var(--accent);
margin: 0.15rem 0 0.5rem;
}
.article-author__bio {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.92rem;
line-height: 1.55;
color: var(--text-dark);
opacity: 0.78;
margin: 0;
}
@media (max-width: 560px) {
.article-author {
flex-direction: column;
align-items: flex-start;
}
}
.post-card__avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #feaa5f, #fd9d49);
flex-shrink: 0;
}
/* ---- Mobile polish for r6–16 components ---- */
@media (max-width: 560px) {
/* Copy fields stack so long IBANs + the button never cramp */
.copy-field {
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
}
.copy-field__btn {
justify-content: center;
}
/* Slightly shorter image cards on small phones */
.mega-feature--photo {
min-height: clamp(260px, 60vw, 320px);
}
.team-photo {
aspect-ratio: 3 / 2;
}
}
/* ---- Pager (blog pagination — learn) ---- */
.pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.pager__num,
.pager__btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-width: 42px;
height: 42px;
padding: 0 0.9rem;
justify-content: center;
border-radius: 999px;
border: 1px solid #e3e1dc;
background: #fff;
color: var(--text-dark);
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition:
background 0.25s var(--ease),
color 0.25s var(--ease),
border-color 0.25s var(--ease);
}
.pager__num:hover,
.pager__btn:not(.is-disabled):hover {
border-color: var(--accent);
color: var(--accent);
}
.pager__num.is-active {
background: linear-gradient(180deg, #feaa5f, #fd9d49);
border-color: transparent;
color: #fff;
}
.pager__btn.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pager__dots {
padding: 0 0.3rem;
color: var(--text-dark);
opacity: 0.5;
}
/* ============================================================
Contact page — form + clinic info + map
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1.3fr 0.9fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 860px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
.contact-form {
display: grid;
gap: 1rem;
}
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 560px) {
.contact-form__row {
grid-template-columns: 1fr;
}
}
.contact-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.contact-field label {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-dark);
}
.contact-field label small {
font-weight: 400;
opacity: 0.6;
}
.contact-field input,
.contact-field textarea {
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.95rem;
padding: 0.8rem 1rem;
border: 1px solid rgba(26, 37, 43, 0.15);
border-radius: 12px;
background: #fff;
color: var(--text-dark);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: rgba(26, 37, 43, 0.4);
}
.contact-field input:focus,
.contact-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(253, 157, 73, 0.15);
}
.contact-field textarea {
resize: vertical;
min-height: 130px;
}
.contact-consent {
display: flex;
gap: 0.55rem;
align-items: flex-start;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.82rem;
color: var(--text-dark);
opacity: 0.85;
line-height: 1.5;
}
.contact-consent input {
margin-top: 2px;
accent-color: var(--accent);
}
.contact-consent a {
color: var(--accent);
}
/* Clinic info sidebar */
.contact-info {
background: #fff;
border: 1px solid rgba(26, 37, 43, 0.08);
border-radius: 18px;
padding: clamp(1.5rem, 2.5vw, 2rem);
box-shadow: 0 14px 40px -24px rgba(26, 37, 43, 0.4);
}
.contact-info__row {
display: flex;
gap: 0.85rem;
margin-bottom: 1.25rem;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.95rem;
line-height: 1.55;
color: var(--text-dark);
}
.contact-info__row:last-child {
margin-bottom: 0;
}
.contact-info__row > i {
color: var(--accent);
font-size: 1.25rem;
margin-top: 1px;
flex: 0 0 auto;
}
.contact-info a {
color: var(--text-dark);
text-decoration: none;
border-bottom: 1px solid rgba(253, 157, 73, 0.45);
transition: color 0.2s ease;
}
.contact-info a:hover {
color: var(--accent);
}
/* Map embed */
.map-embed {
width: 100%;
aspect-ratio: 21 / 9;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(26, 37, 43, 0.08);
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.map-embed iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 700px) {
.map-embed {
aspect-ratio: 4 / 3;
}
}
/* Contact form field hover */
.contact-field input:hover,
.contact-field textarea:hover {
border-color: rgba(253, 157, 73, 0.5);
box-shadow: 0 6px 18px -10px rgba(253, 157, 73, 0.4);
}
/* ============================================================
WhatsApp brand colour — any CTA button that links to wa.me
(green #25D366, the official WhatsApp colour)
============================================================ */
.page-btn[href*="wa.me"],
.page-section--navy .page-btn[href*="wa.me"] {
background: #25d366;
border-color: #25d366;
color: #ffffff;
}
.page-btn[href*="wa.me"]:hover,
.page-section--navy .page-btn[href*="wa.me"]:hover {
background: #1fb457;
border-color: #1fb457;
color: #ffffff;
box-shadow: 0 16px 40px -12px rgba(37, 211, 102, 0.5);
}
/* ---- Branded Leaflet map (contact page) ---- */
#contactMap.map-embed {
background: #eef1ee;
}
.leaflet-container {
font-family: "aktiv-grotesk", "Inter", sans-serif;
background: #eef1ee;
}
.apexa-marker {
filter: drop-shadow(0 7px 10px rgba(26, 37, 43, 0.35));
}
.apexa-marker svg {
display: block;
}
/* zoom controls — brand tint */
.leaflet-bar {
border: none;
box-shadow: 0 6px 18px -8px rgba(26, 37, 43, 0.35);
}
.leaflet-bar a {
color: var(--text-dark);
border-bottom-color: rgba(26, 37, 43, 0.08);
transition:
color 0.2s ease,
background 0.2s ease;
}
.leaflet-bar a:hover {
color: var(--accent);
background: #fff;
}
/* popup */
.leaflet-popup-content-wrapper {
border-radius: 14px;
box-shadow: 0 14px 40px -14px rgba(26, 37, 43, 0.4);
}
.leaflet-popup-content {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-dark);
}
.leaflet-popup-content strong {
font-family: "aktiv-grotesk-extended", sans-serif;
}
.leaflet-popup-tip {
box-shadow: none;
}
/* ---- Scroll-zoom map (contact) — grows to fullscreen like the centre tour ---- */
.map-zoom {
position: relative;
}
.map-zoom__pin {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.map-zoom__intro {
position: absolute;
top: clamp(2rem, 9vh, 5.5rem);
left: 50%;
transform: translateX(-50%);
z-index: 3;
text-align: center;
width: min(720px, 90vw);
padding: 0 1.5rem;
will-change: opacity;
}
.map-zoom__hint {
margin: 0.85rem 0 0;
font-family: "aktiv-grotesk", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.map-zoom__hint i {
animation: mapHintBob 1.6s ease-in-out infinite;
}
@keyframes mapHintBob {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
.map-zoom__stage {
/* Absolutely centred so it grows FROM ITS CENTRE (the marker) outward — the
translate(-50%,-50%) re-centres on every width/height frame, so the map
behind it never drifts as the window expands. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1120px, 92vw);
height: clamp(300px, 46vh, 520px);
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(26, 37, 43, 0.08);
box-shadow: 0 36px 90px -44px rgba(26, 37, 43, 0.55);
will-change: width, height;
}
/* The map is rendered ONCE at full viewport size and centred behind the stage
window; the growing stage (overflow:hidden) only reveals more of it — so the
map never resizes/re-zooms mid-scroll and there is nothing to jitter. */
.map-zoom__stage #contactMap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vh;
background: #eef1ee;
}
/* Brand zoom control — pinned to the stage window (not the map) so it stays
visible at both the contained and full-screen sizes. */
.map-zoom__ctrl {
position: absolute;
/* Clears the 119px fixed site header at full-screen, stays 100px off the
right edge. */
top: 140px;
right: 100px;
z-index: 6;
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow:
0 14px 34px -16px rgba(26, 37, 43, 0.5),
0 0 0 1px rgba(26, 37, 43, 0.08);
}
.map-zoom__ctrl-btn {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 0;
background: transparent;
cursor: pointer;
color: var(--text-dark, #1a252b);
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.15s ease;
}
.map-zoom__ctrl-btn + .map-zoom__ctrl-btn {
border-top: 1px solid rgba(26, 37, 43, 0.1);
}
.map-zoom__ctrl-btn:hover {
background: var(--accent, #fd9d49);
color: #fff;
}
.map-zoom__ctrl-btn:active {
transform: scale(0.92);
}
.map-zoom__ctrl-btn svg {
display: block;
}
@media (prefers-reduced-motion: reduce) {
.map-zoom__hint i {
animation: none;
}
}
/* ORCA-branded CTA: whale video behind the navy closing section (method pages) */
.page-section--navy.orca-cta {
position: relative;
overflow: hidden;
}
.orca-cta__bgvid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.92;
filter: brightness(1.3) saturate(1.06);
}
.orca-cta__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(26, 37, 43, 0.5) 0%,
rgba(26, 37, 43, 0.38) 50%,
rgba(26, 37, 43, 0.56) 100%
);
}
.page-section--navy.orca-cta > .page-container {
position: relative;
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.orca-cta__bgvid {
display: none;
}
}
/* ---- Career role pages ---- */
.job-list {
list-style: none;
padding: 0;
margin: 1.15rem 0 0;
display: grid;
gap: 0.85rem;
}
.job-list li {
position: relative;
padding-left: 1.7rem;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
color: var(--text-dark);
}
.job-list li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.55em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
}
@media (min-width: 861px) {
.job-split {
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
}
}
.role-video {
max-width: 920px;
margin: 0 auto;
}
/* ---- Assessment page: explainer video + report flow ---- */
.role-video__frame {
position: relative;
border-radius: 18px;
overflow: hidden;
background: #1c3338;
box-shadow: 0 34px 70px -36px rgba(26, 37, 43, 0.6);
aspect-ratio: 16 / 9;
}
.role-video__frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.role-video__cap {
text-align: center;
margin: 1rem 0 0;
font-family: var(--font-body);
font-size: 0.9rem;
color: #5c6b72;
}
.orca-report__split {
margin-top: clamp(2.6rem, 6vw, 4.5rem);
}
.orca-report__split-title {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}
.orca-report__split-body > p:first-child {
margin-top: 1.05rem;
}
.page-split__body.report-flow .section-eyebrow {
margin-bottom: 0;
}
.report-flow p {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.62;
color: var(--text-dark);
margin: 0 0 1.05rem;
max-width: 58ch;
}
.report-flow p:last-child {
margin-bottom: 0;
}
/* ---- Before & after page ---- */
.before-after-grid__lead,
.mixed-media-grid__lead {
max-width: 64ch;
margin: 0.7rem 0 0;
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.55;
color: var(--text-dark);
opacity: 0.78;
}
/* FAQ — video answer cards */
.vfaq-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 900px) {
.vfaq-grid {
grid-template-columns: 1fr;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
}
.vfaq-card {
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px -34px rgba(26, 37, 43, 0.35);
}
.vfaq-card__frame {
position: relative;
aspect-ratio: 16 / 9;
background: #1c3338;
}
.vfaq-card__frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vfaq-card__q {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 1rem 1.1rem 1.15rem;
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.98rem;
line-height: 1.4;
color: #25323a;
}
.vfaq-card__q i {
color: var(--accent);
font-size: 1.15rem;
line-height: 1.3;
}
.before-after-grid__footer {
text-align: center;
margin-top: 1.8rem;
}
.ba-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2.4vw, 1.8rem);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.ba-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin: 0;
border: 1px solid #e3e1dc;
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.ba-cell {
position: relative;
aspect-ratio: 3 / 4;
background: #f4f0e8;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ba-cell img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ba-cell > span:not([class*="ba-tag"]) {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9aa6ac;
}
.ba-tag {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 2;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.18rem 0.5rem;
border-radius: 999px;
}
.ba-tag--before {
background: rgba(37, 50, 58, 0.1);
color: #25323a;
}
.ba-tag--after {
background: var(--accent);
color: #1c2b22;
}
.ig-cta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.page-card__eyebrow {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.case-links {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.25rem;
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px solid #eeece7;
}
.case-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--accent);
text-decoration: none;
}
.case-link i {
font-size: 1rem;
}
.case-link:hover {
text-decoration: underline;
}
.bam-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2.4vw, 1.8rem);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.bam-item {
margin: 0;
border: 1px solid #e3e1dc;
border-radius: 16px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.bam-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #1c3338;
}
.bam-frame video,
.bam-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bam-frame__ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.bam-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.22rem 0.6rem;
border-radius: 999px;
background: rgba(28, 51, 56, 0.78);
color: #fff;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.bam-badge i {
font-size: 0.85rem;
color: var(--accent);
}
.bam-cap {
padding: 0.85rem 1rem 1rem;
font-family: var(--font-body);
font-size: 0.9rem;
line-height: 1.5;
color: #5c6b72;
}
.bam-cap strong {
color: #25323a;
font-weight: 600;
}
@media (max-width: 780px) {
.ba-grid,
.bam-grid {
grid-template-columns: 1fr;
}
}
/* Concierge — route map, stays, filterable cards, website links */
.cmap-scrolly {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
display: grid;
grid-template-columns: 56% 44%;
align-items: stretch;
border-top: 1px solid #e3e1dc;
border-bottom: 1px solid #e3e1dc;
}
.cmap-mapcol {
position: relative;
}
.cmap-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
background: #f4f0e8;
border-right: 1px solid #e3e1dc;
}
#cmapLeaflet {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #eef1f3;
}
.cmap-badge {
position: absolute;
top: 9.5rem;
left: 1rem;
z-index: 1200;
max-width: min(78%, 360px);
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(6px);
border-radius: 12px;
box-shadow: 0 10px 26px -14px rgba(26, 37, 43, 0.5), 0 0 0 1px rgba(26, 37, 43, 0.06);
padding: 0.6rem 0.85rem;
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--text-dark);
line-height: 1.3;
}
.cmap-badge span {
display: block;
margin-top: 0.2rem;
font-size: 0.76rem;
color: #8a979e;
}
.cmap-legend {
display: flex;
align-items: center;
margin-top: 0.3rem;
font-size: 0.78rem;
color: #6c7a80;
}
.cmap-legend i {
display: inline-block;
width: 18px;
height: 0;
border-top: 3px solid;
margin-right: 0.45rem;
}
.cmap-legend .car {
border-color: #25323a;
}
.cmap-legend .train {
border-color: #5b82a0;
border-top-style: dashed;
}
.cmap-stage .map-zoom__ctrl {
top: 9.5rem;
right: 1.1rem;
bottom: auto;
z-index: 1200;
}
.cmap-steps {
padding: 8vh clamp(1.5rem, 4.5vw, 5rem);
}
.cmap-step {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.cmap-step + .cmap-step {
border-top: 1px solid rgba(37, 50, 58, 0.08);
}
.cmap-step__n {
font-family: var(--font-heading);
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.16em;
color: var(--accent);
margin: 0 0 0.7rem;
text-transform: uppercase;
}
.cmap-step__t {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
color: var(--text-dark);
margin: 0 0 0.9rem;
line-height: 1.12;
}
.cmap-step__d {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.62;
color: var(--text-dark);
opacity: 0.8;
max-width: 44ch;
margin: 0;
}
.cmap-step .page-cta-row {
margin-top: 1.6rem;
}
.steps-x {
grid-template-columns: 1fr 1.15fr;
}
.steps-x__img {
mask-image: radial-gradient(circle at 50% 50%, #000 56%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 56%, transparent 70%);
}
.stay-filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin: 0 0 0.7rem;
}
.stay-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.stay-chip {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.03em;
padding: 0.5rem 1.05rem;
border-radius: 999px;
border: 1px solid rgba(37, 50, 58, 0.16);
background: #fff;
color: var(--text-dark);
cursor: pointer;
transition: all 0.25s ease;
}
.stay-chip:hover {
border-color: var(--accent);
}
.stay-chip.is-active {
background: #1c3338;
border-color: #1c3338;
color: #fff;
}
.stay-access {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-left: auto;
cursor: pointer;
user-select: none;
}
.stay-access input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.stay-access__track {
position: relative;
width: 42px;
height: 24px;
border-radius: 999px;
background: #d7d3cc;
transition: background 0.25s ease;
flex: none;
}
.stay-access__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 0.25s ease;
}
.stay-access input:checked + .stay-access__track {
background: var(--accent);
}
.stay-access input:checked + .stay-access__track .stay-access__thumb {
transform: translateX(18px);
}
.stay-access__label {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.82rem;
color: var(--text-dark);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.stay-hint {
font-family: var(--font-body);
font-size: 0.82rem;
color: #8a979e;
margin: 0 0 clamp(1.4rem, 3vw, 2rem);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.stay-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.1rem, 2vw, 1.7rem);
}
.stay-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.stay-card:hover {
box-shadow: 0 26px 54px -30px rgba(26, 37, 43, 0.55);
transform: translateY(-4px);
border-color: #d9d5ce;
}
.stay-card--featured {
border-color: var(--accent);
box-shadow: 0 20px 44px -28px rgba(253, 157, 73, 0.6);
}
.stay-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(135deg, #2a3b44, #1c3338);
}
.stay-card__media img {
position: absolute;
top: -14%;
left: 0;
width: 100%;
height: 128%;
object-fit: cover;
will-change: transform;
}
.stay-card__tags {
position: absolute;
top: 0.75rem;
left: 0.75rem;
display: flex;
gap: 0.4rem;
z-index: 2;
}
.stay-tag {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 0.3rem 0.6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #25323a;
display: inline-flex;
align-items: center;
gap: 0.3rem;
box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.4);
}
.stay-tag--access {
background: var(--accent);
color: #25323a;
}
.stay-card__body {
padding: 1.1rem 1.2rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.42rem;
flex: 1;
}
.stay-card__type {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.64rem;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--accent);
}
.stay-card__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.12rem;
line-height: 1.2;
margin: 0;
color: #25323a;
}
.stay-card__meta {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-body);
font-size: 0.82rem;
color: #25323a;
}
.stay-rating {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-family: var(--font-heading);
font-weight: 700;
}
.stay-rating i {
color: var(--accent);
font-size: 0.9rem;
}
.stay-src {
opacity: 0.6;
}
.stay-dot {
opacity: 0.4;
}
.stay-card__desc {
font-family: var(--font-body);
font-size: 0.88rem;
line-height: 1.5;
color: #25323a;
opacity: 0.78;
margin: 0.1rem 0 0;
}
.stay-card__dist {
font-family: var(--font-body);
font-size: 0.8rem;
color: #5c6b72;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.15rem;
}
.stay-card__dist i {
color: var(--accent);
}
.stay-card__foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding-top: 0.85rem;
margin-top: 0.9rem;
border-top: 1px solid #ededea;
}
.stay-price {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.02rem;
color: #25323a;
white-space: nowrap;
}
.stay-price small {
font-weight: 500;
font-size: 0.7rem;
opacity: 0.6;
}
.stay-go {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.78rem;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 0.28rem;
white-space: nowrap;
}
.stay-note {
text-align: center;
font-family: var(--font-body);
font-size: 0.84rem;
color: #8a979e;
margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.stay-note i {
color: var(--accent);
}
.ll-filters {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}
.ll-chip,
.rg-chip {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.03em;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid rgba(37, 50, 58, 0.16);
background: #fff;
color: var(--text-dark);
cursor: pointer;
transition: all 0.25s ease;
}
.ll-chip:hover,
.rg-chip:hover {
border-color: var(--accent);
}
.ll-chip.is-active,
.rg-chip.is-active {
background: #1c3338;
border-color: #1c3338;
color: #fff;
}
.ll-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2vw, 1.6rem);
}
.ll-card {
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.ll-card:hover {
box-shadow: 0 22px 46px -28px rgba(26, 37, 43, 0.5);
transform: translateY(-3px);
border-color: #d9d5ce;
}
.ll-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, #2a3b44, #1c3338);
}
.ll-card__media img {
position: absolute;
top: -12%;
left: 0;
width: 100%;
height: 124%;
object-fit: cover;
will-change: transform;
}
.ll-card__body {
padding: clamp(1.1rem, 2vw, 1.35rem);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ll-card__tag {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.ll-card__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.08rem;
color: var(--text-dark);
margin: 0;
}
.ll-card__text {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-dark);
opacity: 0.76;
margin: 0;
}
.ll-cities {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 2.5vw, 1.8rem);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.ll-city {
position: relative;
display: block;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 16 / 10;
text-decoration: none;
}
.ll-city img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.ll-city:hover img {
transform: scale(1.05);
}
.ll-city__cap {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.4rem;
background: linear-gradient(0deg, rgba(20, 30, 34, 0.78), rgba(20, 30, 34, 0.05) 60%);
}
.ll-city__name {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.5rem;
color: #fff;
}
.ll-city__sub {
font-family: var(--font-body);
font-size: 0.86rem;
color: rgba(255, 255, 255, 0.85);
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.2rem;
}
.wr-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.9rem, 1.8vw, 1.3rem);
}
.wr-card {
display: flex;
align-items: flex-start;
gap: 0.85rem;
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 14px;
padding: 1.05rem 1.15rem;
text-decoration: none;
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.wr-card:hover {
box-shadow: 0 18px 38px -24px rgba(26, 37, 43, 0.5);
transform: translateY(-2px);
border-color: #d9d5ce;
}
.wr-card__ico {
flex: none;
width: 38px;
height: 38px;
border-radius: 10px;
background: #1c3338;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
}
.wr-card__name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.95rem;
color: #25323a;
margin: 0;
display: flex;
align-items: center;
gap: 0.35rem;
}
.wr-card__name i {
color: var(--accent);
font-size: 0.85rem;
}
.wr-card__text {
font-family: var(--font-body);
font-size: 0.84rem;
line-height: 1.45;
color: #25323a;
opacity: 0.72;
margin: 0.2rem 0 0;
}
@media (max-width: 860px) {
.cmap-scrolly {
grid-template-columns: 1fr;
}
.cmap-stage {
height: 58vh;
}
.cmap-step {
min-height: auto;
padding: 2.4rem 0;
}
.cmap-step:first-child {
padding-top: 3rem;
}
.stay-grid,
.ll-grid,
.wr-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 720px) {
.ll-cities {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.stay-grid,
.ll-grid,
.wr-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.steps-x__media {
max-width: 470px;
}
}
@media (prefers-reduced-motion: reduce) {
.cmap-dot__pulse {
animation: none;
}
}
/* Lilly page — hero photo framing (Lake Zug) */
.page-lilly .page-hero__media {
background-position: 60% 35%;
}
/* FAQ page — hero photo framing */
.page-faq .page-hero__media {
background-position: 70% 15%;
}
/* Impact page */
.page-impact .page-hero__media {
background-position: center 42%;
}
.ig-stage { position: relative; }
.ig-chartwrap { position: relative; max-width: 1000px; margin: 2.4rem auto 0; padding-top: clamp(6rem, 12vw, 8.5rem); }
.ig-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ig-readout { position: absolute; top: 0; left: 0; display: flex; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap; pointer-events: none; }
.ig-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3.6rem, 9vw, 7.2rem); line-height: .82;
color: var(--text-dark); display: block; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ig-num__label { margin: 0 0 .85rem; max-width: 24ch; font-family: var(--font-body);
font-size: .96rem; line-height: 1.45; color: var(--text-dark); opacity: .72; }
.ig-hint { position: absolute; bottom: -2.6rem; left: 50%; transform: translateX(-50%); font-size: .72rem;
letter-spacing: .1em; text-transform: uppercase; color: #9aa6ac; font-family: var(--font-body); }
.ig-grid line { stroke: #e6e3dd; stroke-width: 1.5; }
.ig-grid text { fill: #aab2b6; font-size: 18px; font-family: var(--font-body); }
.ig-xlabels text { fill: #aab2b6; font-size: 18px; font-family: var(--font-body); text-anchor: middle; }
.ig-tip__pulse { transform-box: fill-box; transform-origin: center; animation: igp 2s ease-out infinite; }
@keyframes igp { 0% { transform: scale(.5); opacity: .35 } 70% { opacity: 0 } 100% { transform: scale(1.85); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ig-tip__pulse { animation: none; } }
.impact-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 820px) { .impact-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .impact-stats { grid-template-columns: 1fr; } }
.impact-stat__icon { width: clamp(54px, 6vw, 72px); height: clamp(54px, 6vw, 72px); object-fit: contain; object-position: left center; display: block; margin: 0 0 1rem; }
.impact-stat__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--text-dark); display: block; }
.impact-stat__label { display: block; margin-top: .5rem; font-family: var(--font-heading); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.impact-stat__desc { margin: .55rem 0 0; font-family: var(--font-body); font-size: .95rem; line-height: 1.5; color: var(--text-dark); opacity: .72; }
.ig-reviews .voices__rating { justify-content: center; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.6rem 0 0; }
.rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (max-width: 780px) { .rev-grid { grid-template-columns: 1fr; } }
.rev-card { background: #fff; border: 1px solid #e3e1dc; border-radius: 16px; padding: clamp(1.3rem, 2.2vw, 1.7rem); }
.rev-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.rev-card__stars { color: #FD9D49; letter-spacing: 2px; font-size: 1.05rem; }
.rev-card__src { font-family: var(--font-heading); font-weight: 700; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.rev-card__src--trustpilot { color: #00b67a; }
.rev-card__src--google { color: #4285F4; }
.rev-card__quote { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; color: var(--text-dark); margin: 0 0 1rem; }
.rev-card__who { font-family: var(--font-body); font-size: .9rem; color: var(--text-dark); opacity: .72; }
.rev-card__who strong { opacity: 1; }
/* Learn hub */
.page-learn .page-hero__media {
background-position: center 72%;
}
.zp { position: relative; }
.zp .zp-move { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; display: block; will-change: transform; }
.zp .zp-move img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.post-card:hover .zp .zp-move img { transform: scale(1.05); }
.article-wrap .page-breadcrumb { color: rgba(37, 50, 58, .55); }
.article-wrap .page-breadcrumb a { color: rgba(37, 50, 58, .72); }
.article-wrap .page-breadcrumb a:hover { color: var(--accent); }
.article-wrap .page-breadcrumb .is-current { color: rgba(37, 50, 58, .5); }
.article-toc {
background: #f7f4ef;
border: 1px solid #e3e1dc;
border-radius: 14px;
padding: 1.2rem 1.5rem;
margin: 1.8rem 0 2rem;
}
.article-toc__label {
font-family: var(--font-heading);
font-weight: 700;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 .7rem;
}
.article-toc__list {
margin: 0;
padding-left: 1.3rem;
display: flex;
flex-direction: column;
gap: .5rem;
font-family: var(--font-body);
}
.article-toc__list a {
color: #25323A;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .2s;
}
.article-toc__list a:hover { border-color: var(--accent); }
.article-backtop {
position: fixed;
left: 20px;
bottom: 20px;
width: 46px;
height: 46px;
border-radius: 50%;
background: #25323A;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
text-decoration: none;
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity .3s ease, transform .3s ease;
z-index: 60;
}
.article-backtop.is-on {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.article-backtop { transition: none; }
}
.page-prose h2 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif;
font-weight: 600;
font-size: 1.55rem;
letter-spacing: -0.01em;
margin-top: 2.6rem;
color: var(--text-dark);
line-height: 1.25;
}
/* ---- Moments from the centre gallery ---- */
.mfc-grid { column-count:3; column-gap:clamp(.7rem,1.4vw,1rem); }
@media(max-width:900px){ .mfc-grid { column-count:2; } }
@media(max-width:520px){ .mfc-grid { column-count:1; } }
.mfc-thumb { display:block; width:100%; margin:0 0 clamp(.7rem,1.4vw,1rem); padding:0; border:none; background:#1c3338; cursor:pointer; border-radius:14px; overflow:hidden; position:relative; break-inside:avoid; }
.mfc-thumb img { width:100%; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.mfc-thumb video { width:100%; display:block; pointer-events:none; }
.mfc-thumb:hover img, .mfc-thumb:focus-visible img { transform:scale(1.06); }
.mfc-thumb__ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.7rem; opacity:0; background:linear-gradient(0deg,rgba(20,30,34,.5),rgba(20,30,34,.05)); transition:opacity .35s ease; }
.mfc-thumb:hover .mfc-thumb__ico, .mfc-thumb:focus-visible .mfc-thumb__ico { opacity:1; }
.mfc-thumb__cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2.2rem .85rem .75rem; font-family:var(--font-body); font-size:.82rem; line-height:1.4; color:#fff; text-align:left; background:linear-gradient(0deg,rgba(20,30,34,.75),rgba(20,30,34,0)); opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.mfc-thumb:hover .mfc-thumb__cap, .mfc-thumb:focus-visible .mfc-thumb__cap { opacity:1; transform:none; }
.mfc-thumb__play { position:absolute; top:.7rem; left:.7rem; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(28,51,56,.82); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.2rem; pointer-events:none; }
.mfc-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 clamp(1.3rem,2.6vw,1.9rem); }
.mfc-chip { font-family:var(--font-heading); font-weight:600; font-size:.8rem; letter-spacing:.04em; padding:.5rem 1.15rem; border-radius:999px; border:1px solid rgba(37,50,58,.25); background:#fff; color:#25323A; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.mfc-chip:hover { border-color:#25323A; }
.mfc-chip.is-active { background:#25323A; border-color:#25323A; color:#fff; }
.mfc-filters { position:absolute; width:0; height:0; }
.mfc-lb { position:fixed; inset:0; z-index:2000; background:rgba(15,22,26,.96); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; opacity:0; transition:opacity .35s ease; }
.mfc-lb.is-open { display:block; opacity:1; }
.mfc-stage { position:absolute; inset:0; overflow:hidden; touch-action:pan-y; cursor:grab; }
.mfc-stage.is-grabbing { cursor:grabbing; }
.mfc-strip { display:flex; height:100%; will-change:transform; }
.mfc-slide { flex:0 0 100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); box-sizing:border-box; }
.mfc-slide img { max-width:100%; max-height:76vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); pointer-events:none; -webkit-user-drag:none; }
.mfc-slide video { max-width:100%; max-height:76vh; border-radius:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); }
.mfc-slidecap { margin:.95rem 0 0; font-family:var(--font-body); font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.85); text-align:center; max-width:70ch; }
.mfc-btn { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:1.5rem; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; transition:background .25s ease, transform .25s ease; }
.mfc-btn:hover { background:var(--accent); border-color:var(--accent); color:#25323A; }
.mfc-btn--prev { left:clamp(.6rem,2vw,2rem); }
.mfc-btn--next { right:clamp(.6rem,2vw,2rem); }
.mfc-close { position:absolute; top:1.1rem; right:1.2rem; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:1.6rem; cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center; transition:background .25s; }
.mfc-close:hover { background:rgba(255,255,255,.22); }
.mfc-count { position:absolute; top:1.5rem; left:1.5rem; z-index:3; font-family:var(--font-heading); font-weight:700; font-size:.8rem; letter-spacing:.1em; color:rgba(255,255,255,.75); }
.mfc-dots { position:absolute; bottom:1.3rem; left:0; right:0; display:flex; justify-content:center; gap:.5rem; z-index:3; }
.mfc-dot { width:9px; height:9px; border-radius:50%; border:none; padding:0; background:rgba(255,255,255,.3); cursor:pointer; transition:background .25s, transform .25s; }
.mfc-dot.is-on { background:var(--accent); transform:scale(1.25); }
@media(max-width:640px){ .mfc-btn{width:44px;height:44px;font-size:1.2rem;} }
/* ---- Shop · Lädeli products + modal ---- */
.mp-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (max-width: 820px) {
.mp-products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.mp-products { grid-template-columns: 1fr; }
}
.mp-prod {
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 14px;
padding: 1.1rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mp-prod[data-prod] { cursor: pointer; }
.mp-prod[data-prod]:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.mp-prod:hover {
box-shadow: 0 20px 42px -28px rgba(26, 37, 43, 0.5);
transform: translateY(-3px);
}
.mp-prod h3 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
color: #25323a;
margin: 0;
}
.mp-prod p {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.85rem;
line-height: 1.45;
color: #25323a;
opacity: 0.72;
margin: 0;
}
.mp-prod__more {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--accent);
margin-top: 0.35rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.prod-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.prod-modal.is-open { display: flex; }
.prod-modal__scrim {
position: absolute;
inset: 0;
background: rgba(28, 51, 56, 0.74);
backdrop-filter: blur(3px);
}
.prod-modal__card {
position: relative;
background: #f7f4ef;
border-radius: 18px;
max-width: 580px;
width: 100%;
max-height: 86vh;
overflow: auto;
padding: clamp(1.7rem, 4vw, 2.5rem);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
}
.prod-modal__close {
position: absolute;
top: 0.9rem;
right: 0.9rem;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #d7d3cc;
background: #fff;
color: #25323a;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;
}
.prod-modal__close:hover {
background: #25323a;
color: #fff;
}
.prod-modal__eyebrow {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.5rem;
}
.prod-modal__title {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-weight: 700;
font-size: clamp(1.25rem, 3vw, 1.55rem);
line-height: 1.2;
color: #25323a;
margin: 0 2rem 0.9rem 0;
}
.prod-modal__desc {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.98rem;
line-height: 1.65;
color: #25323a;
opacity: 0.85;
margin: 0 0 1.2rem;
}
.prod-modal__sub {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-weight: 700;
font-size: 0.95rem;
color: #25323a;
margin: 0 0 0.55rem;
}
.prod-modal__list {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: grid;
gap: 0.45rem;
}
.prod-modal__list li {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.92rem;
line-height: 1.5;
color: #25323a;
display: flex;
gap: 0.55rem;
align-items: flex-start;
}
.prod-modal__list i {
color: var(--accent);
flex: none;
margin-top: 0.1rem;
}
/* ---- Shop TheraTogs guide ---- */
.tt-list {
list-style: none;
padding: 0;
margin: 1.15rem 0 0;
display: grid;
gap: 0.85rem;
}
.tt-list li {
position: relative;
padding-left: 1.7rem;
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 1rem;
line-height: 1.55;
color: var(--text-dark);
}
.tt-list li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.55em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
}
@media (min-width: 861px) {
.tt-split {
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
}
.tt-figure {
margin: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 60px -34px rgba(26, 37, 43, 0.55);
}
.tt-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tt-systems {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (max-width: 820px) {
.tt-systems { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.tt-systems { grid-template-columns: 1fr; }
}
.tt-sys {
background: #fff;
border: 1px solid #e3e1dc;
border-radius: 14px;
padding: 1.2rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tt-sys h3 {
font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", "Inter", sans-serif;
font-weight: 700;
font-size: 1.02rem;
line-height: 1.25;
color: #25323a;
margin: 0;
}
.tt-sys p {
font-family: "aktiv-grotesk", "Inter", sans-serif;
font-size: 0.88rem;
line-height: 1.5;
color: #25323a;
opacity: 0.74;
margin: 0;
}
.error-404__cards > a.page-card {
text-decoration: none;
display: flex;
flex-direction: column;
}
.error-404__cards .page-card__link {
margin-top: auto;
}