/* Oluna flair v2 — shared design-lift styles for template pages.
Include after site CSS: */
/* ============ Global premium touches ============ */
::selection { background: var(--sage-200); color: var(--ink-900); }
:where(a, button):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 4px;
}
/* Primary buttons: deep-forest gradient that fades diagonally toward light
green on hover — a slow, calm color sweep rather than a shine. */
.oluna-cta,
button[type="submit"] {
background-image: linear-gradient(135deg,
var(--forest-800) 0%, var(--forest-700) 34%,
var(--forest-600) 55%, var(--forest-550) 72%, var(--sage-400) 100%) !important;
background-size: 260% 260% !important;
background-position: 0% 0% !important;
box-shadow: 0 1px 2px rgba(22, 36, 27, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
transition: background-position .8s cubic-bezier(.4, 0, .2, 1),
transform .25s cubic-bezier(.33, 1, .68, 1),
box-shadow .25s cubic-bezier(.33, 1, .68, 1);
}
.oluna-cta:hover,
button[type="submit"]:hover {
background-position: 100% 100% !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px -10px rgba(22, 36, 27, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.oluna-cta:active,
button[type="submit"]:active {
transform: translateY(0);
box-shadow: 0 2px 6px -2px rgba(22, 36, 27, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* Nav links: underline grows in from the left */
.desktop-nav a:not(.oluna-cta) { position: relative; }
.desktop-nav a:not(.oluna-cta)::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -5px;
height: 2px;
border-radius: 2px;
background: var(--sage-400);
transition: right .28s cubic-bezier(.33, 1, .68, 1);
}
.desktop-nav a:not(.oluna-cta):hover::after { right: 0; }
/* Eyebrows: bold italic serif caps — stylized, dark green, no ornament */
.oluna-eyebrow {
display: inline-block;
background: none;
border: none;
padding: 0;
font-family: var(--font-display) !important;
font-style: italic;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: .2em !important;
font-size: var(--text-sm) !important;
color: var(--forest-700) !important;
}
.oluna-eyebrow::before { display: none; }
/* On dark surfaces the eyebrow goes light sage */
.packages-section .oluna-eyebrow,
.fw-band .oluna-eyebrow,
.svc-qualifiers .svc-head .oluna-eyebrow {
color: var(--sage-300) !important;
}
/* Ambient depth on hero sections: soft radial washes */
.page-hero, .post-hero, .blog-hero, .contact-hero { position: relative; }
.page-hero::before, .post-hero::before, .blog-hero::before, .contact-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(640px 440px at 88% -12%, rgba(124, 152, 133, .18), transparent 65%),
radial-gradient(540px 400px at -8% 112%, rgba(184, 146, 78, .08), transparent 60%);
}
/* Refined blockquotes in article prose */
body .prose blockquote {
border-left: 3px solid var(--sage-400);
background: var(--sage-50);
border-radius: 0 14px 14px 0;
padding: 18px 24px;
font-family: var(--font-display);
font-style: italic;
font-size: 1.12em;
color: var(--ink-800);
}
/* ============ Richer image / media placeholders (site-wide) ============ */
.media-placeholder {
position: relative;
border: none !important;
background: radial-gradient(120% 120% at 85% 15%, var(--sage-100) 0%, var(--cream-100) 62%) !important;
border-radius: 20px !important;
overflow: hidden;
color: var(--sage-500) !important;
box-shadow: inset 0 0 0 1px rgba(43, 69, 52, .12);
}
/* Organic offset frame + corner ornament behind hero images */
.page-hero-media, .post-hero-media {
position: relative;
z-index: 0;
}
.page-hero-media::before, .post-hero-media::before {
content: "";
position: absolute;
inset: 22px -18px -18px 22px;
background: var(--sage-200);
opacity: .5;
border-radius: 24px;
z-index: -1;
}
.page-hero-media::after, .post-hero-media::after {
content: "";
position: absolute;
top: -13px;
left: -13px;
width: 62px;
height: 62px;
border-top: 2px solid var(--sage-400);
border-left: 2px solid var(--sage-400);
border-top-left-radius: 22px;
opacity: .65;
pointer-events: none;
}
/* ============ Logo-mark watermark (singular accents, never repeated cards) */
.ib-stat::after, .stat-highlight::after, .toc-cta::after {
content: "";
position: absolute;
right: -28px;
bottom: -32px;
width: 150px;
height: 150px;
background: var(--cream-50);
opacity: .08;
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
transform: rotate(-8deg);
pointer-events: none;
}
/* ============ Impact band (stat + chart) ============ */
.ib { background: var(--cream-50); position: relative; overflow: hidden; }
.ib-inner {
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 72px 32px;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 60px;
align-items: center;
}
.ib-lede {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-2xl);
line-height: 1.45;
color: var(--text-body);
margin: 14px 0 26px;
}
.ib-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.ib-chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
background: var(--surface-card, #fff);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 10px 18px;
font-size: var(--text-sm);
color: var(--text-muted);
box-shadow: 0 1px 2px rgba(22, 36, 27, .05);
transition: transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s;
}
.ib-chip:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px -12px rgba(22, 36, 27, .3);
}
.ib-chip strong {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-xl);
color: var(--forest-700);
}
.ib-visual { position: relative; min-height: 380px; }
.ib-media { position: absolute; right: 0; top: 4%; width: 78%; }
.ib-stat {
position: absolute;
left: 0;
bottom: 0;
width: 58%;
background:
radial-gradient(140% 120% at 20% 0%, rgba(92, 126, 99, .35), transparent 55%),
var(--forest-800);
color: var(--cream-50);
border-radius: 22px;
padding: 30px 28px;
transform: rotate(-2deg);
box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .45);
z-index: 2;
overflow: hidden;
}
.ib-num {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-5xl);
line-height: 1;
display: block;
}
.ib-label {
display: block;
margin-top: 10px;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--sage-200);
}
.ib-src {
display: block;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(250, 248, 242, .16);
font-size: var(--text-xs);
color: var(--sage-300);
letter-spacing: .02em;
}
@media (max-width: 860px) {
.ib-inner { grid-template-columns: 1fr; gap: 34px; padding: 52px 22px; }
.ib-visual { min-height: 0; }
.ib-media { position: relative; width: 100%; top: 0; }
.ib-stat { position: relative; width: auto; margin: -42px 16px 0; }
}
/* ============ Filler chart ============ */
.flair-chart {
background: var(--surface-card, #fff);
border: 1px solid var(--border-subtle);
border-radius: 18px;
padding: 20px 22px 10px;
box-shadow: 0 14px 34px -20px rgba(22, 36, 27, .35);
}
.fch-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
}
.fch-title { font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }
.fch-badge {
font-size: var(--text-xs);
font-weight: 600;
color: var(--forest-600);
background: var(--sage-100);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.flair-chart svg { width: 100%; height: auto; display: block; }
/* ============ Staggered photo collage band ============ */
.flair-collage { background: var(--cream-50); position: relative; overflow: hidden; }
.fc-inner {
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 20px 32px 88px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
align-items: start;
}
.fc-item { display: flex; flex-direction: column; gap: 14px; }
.fc-cap {
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-base);
color: var(--text-muted);
text-align: center;
}
.fc-item .media-placeholder {
box-shadow: 0 14px 34px -18px rgba(22, 36, 27, .35), inset 0 0 0 1px rgba(43, 69, 52, .08);
transition: transform .35s cubic-bezier(.33, 1, .68, 1), box-shadow .35s;
}
.fc-item:hover .media-placeholder {
transform: translateY(-4px);
box-shadow: 0 22px 44px -20px rgba(22, 36, 27, .45), inset 0 0 0 1px rgba(43, 69, 52, .1);
}
@media (max-width: 860px) {
.fc-inner { grid-template-columns: 1fr; gap: 28px; padding-bottom: 56px; }
}
/* ============ Full-width dark quote band ============ */
.fw-band {
position: relative;
overflow: hidden;
background:
radial-gradient(900px 520px at 12% -10%, rgba(56, 86, 63, .85), transparent 60%),
radial-gradient(820px 540px at 92% 110%, rgba(43, 69, 52, .9), transparent 58%),
var(--forest-900);
padding: 96px 32px;
}
.fw-band::before, .fw-band::after {
content: "";
position: absolute;
top: 50%;
width: 520px;
aspect-ratio: 3 / 2;
background: url(/assets/leaves/branch-6.webp) center/contain no-repeat;
filter: invert(.92) sepia(.08);
opacity: .1;
pointer-events: none;
}
.fw-band::before { left: -60px; transform: translateY(-50%); }
.fw-band::after {
right: -60px;
transform: translateY(-50%) scaleX(-1);
}
.fwb-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.fwb-mark {
display: inline-block;
width: 52px;
height: 52px;
background: var(--sage-300);
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
margin-bottom: 26px;
}
.fw-band blockquote {
margin: 0;
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.35;
color: var(--cream-50);
}
.fwb-attr {
display: block;
margin-top: 24px;
color: var(--sage-300);
font-size: var(--text-sm);
letter-spacing: .14em;
text-transform: uppercase;
}
/* ============ Review marquee ============ */
.rvm { background: var(--sage-50); padding: 84px 0; position: relative; overflow: hidden; }
.rvm-head {
max-width: var(--container-max, 1200px);
margin: 0 auto 42px;
padding: 0 32px;
text-align: center;
}
.rvm-heading { font-size: var(--text-4xl); margin: 10px 0 10px; }
.rvm-sub { color: var(--text-muted); font-size: var(--text-base); margin: 0; }
.rvm-stars { color: var(--gold-500); letter-spacing: 3px; margin-right: 8px; }
.rvm-viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rvm-row {
display: flex;
gap: 26px;
width: max-content;
padding: 6px 0 16px;
animation: rvm-scroll 75s linear infinite;
}
.rvm-viewport:hover .rvm-row { animation-play-state: paused; }
@keyframes rvm-scroll { to { transform: translateX(-50%); } }
.rvm-card {
width: 390px;
flex: none;
background: var(--surface-card, #fff);
border: 1px solid var(--border-subtle);
border-radius: 18px;
padding: 26px 26px 22px;
margin: 0;
box-shadow: 0 10px 26px -18px rgba(22, 36, 27, .25);
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .3s cubic-bezier(.33, 1, .68, 1), box-shadow .3s;
}
.rvm-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px -18px rgba(22, 36, 27, .35);
}
.rvm-cstars { color: var(--gold-500); letter-spacing: 3px; font-size: 15px; }
.rvm-card blockquote {
margin: 0;
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-body);
flex: 1;
}
.rvm-card figcaption {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid var(--border-subtle);
padding-top: 16px;
}
.rvm-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--av-bg, var(--forest-700));
color: var(--cream-50);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
letter-spacing: .03em;
flex: none;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.rvm-name { display: block; font-weight: 600; color: var(--text-strong); font-size: var(--text-sm); }
.rvm-role { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }
@media (max-width: 600px) { .rvm-card { width: 300px; } }
@media (prefers-reduced-motion: reduce) {
.rvm-row { animation: none; }
.rvm-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* ============ Spectrum block (service/industry pages) ============ */
.sp-intro { color: var(--text-muted); font-size: var(--text-sm); margin: 6px 0 18px; max-width: 560px; }
.sp-strong { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.sp-card {
background:
radial-gradient(140% 130% at 15% 0%, rgba(92, 126, 99, .38), transparent 60%),
var(--forest-800);
border: none;
border-radius: 16px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 7px;
position: relative;
overflow: hidden;
box-shadow: 0 14px 30px -18px rgba(22, 36, 27, .5);
transition: transform .3s cubic-bezier(.33, 1, .68, 1), box-shadow .3s;
}
.sp-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 40px -20px rgba(22, 36, 27, .55);
}
.sp-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--gold-500), transparent 65%);
}
.sp-leaf { display: none; }
.sp-name { font-weight: 600; color: var(--cream-50); font-size: var(--text-base); }
.sp-line { color: var(--sage-200); font-size: var(--text-sm); line-height: 1.5; }
.sp-also { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-also-label {
flex-basis: 100%;
font-size: var(--text-xs);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 2px;
}
.sp-pill {
background: var(--surface-card, #fff);
border: 1px solid var(--sage-200);
border-radius: 12px;
padding: 12px 20px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--forest-700);
letter-spacing: .01em;
box-shadow: 0 1px 3px rgba(22, 36, 27, .07);
transition: transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s, border-color .25s;
}
.sp-pill:hover {
transform: translateY(-2px);
border-color: var(--sage-400);
box-shadow: 0 10px 20px -12px rgba(22, 36, 27, .3);
}
@media (max-width: 860px) { .sp-strong { grid-template-columns: 1fr; } }
/* ============ Qualifier cards read as refined pull-quotes ============ */
.svc-qualifier {
position: relative;
font-family: var(--font-display) !important;
font-size: var(--text-lg) !important;
font-style: italic;
line-height: 1.5 !important;
color: var(--text-body) !important;
background: var(--surface-card, #fff) !important;
border: 1px solid var(--border-subtle) !important;
border-left: 3px solid var(--sage-400) !important;
border-radius: 16px !important;
padding: 24px 28px 22px 58px !important;
box-shadow: 0 8px 24px -18px rgba(22, 36, 27, .25);
transition: transform .3s cubic-bezier(.33, 1, .68, 1), box-shadow .3s;
}
.svc-qualifier:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -18px rgba(22, 36, 27, .32);
}
.svc-qualifier::before {
content: "\201C";
position: absolute;
left: 22px;
top: 12px;
font-family: var(--font-display);
font-style: normal;
font-size: 44px;
line-height: 1;
color: var(--sage-300);
}
/* ============ Global stat-highlight (dark organic card) ============ */
.stat-highlight {
background:
radial-gradient(140% 120% at 20% 0%, rgba(92, 126, 99, .35), transparent 55%),
var(--forest-800) !important;
color: var(--cream-50) !important;
border: none !important;
border-radius: 22px !important;
padding: 30px 28px !important;
transform: rotate(-2deg);
box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .45);
position: relative;
overflow: hidden;
}
.stat-highlight .sh-value { color: var(--cream-50) !important; font-weight: 300; }
.stat-highlight .sh-label { color: var(--sage-200) !important; }
.stat-highlight .sh-source { color: var(--sage-300) !important; }
/* ============ Blog: full-width "In conversation with" card ============ */
.post-interviewee { width: 100%; max-width: none !important; }
.interviewee-card { width: 100% !important; max-width: none !important; box-sizing: border-box; }
.ic-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
font-size: var(--text-sm);
color: var(--text-muted);
}
.ic-byline a { color: var(--forest-700); font-weight: 600; text-decoration: none; }
.ic-byline a:hover { text-decoration: underline; }
/* ============ Blog: clickable interviewee attribution ============ */
a.qa-a-name { display: block; text-decoration: none; margin-bottom: 10px; }
a.qa-a-name .qa-an {
display: block;
font-size: 1.05rem;
font-weight: 700;
color: var(--forest-700);
line-height: 1.3;
}
a.qa-a-name .qa-at {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--sage-500);
margin-top: 2px;
}
a.qa-a-name:hover .qa-an { text-decoration: underline; }
.qa-q-ctx {
display: block;
font-size: var(--text-sm);
color: var(--text-muted);
font-weight: 400;
margin-top: 6px;
line-height: 1.5;
}
/* ============ Blog: big sidebar CTA ============ */
.toc-cta {
background:
radial-gradient(140% 120% at 20% 0%, rgba(92, 126, 99, .35), transparent 55%),
var(--forest-800) !important;
border: none !important;
border-radius: 18px !important;
padding: 28px 24px !important;
position: relative;
overflow: hidden;
}
.toc-cta p {
color: var(--sage-100) !important;
font-family: var(--font-display) !important;
font-size: var(--text-xl) !important;
line-height: 1.35 !important;
margin: 0 0 16px !important;
position: relative;
z-index: 1;
}
.toc-cta-btn, a.toc-cta-btn {
display: block !important;
text-align: center !important;
background: var(--cream-50) !important;
color: var(--forest-800) !important;
padding: 15px 20px !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: var(--text-base) !important;
text-decoration: none !important;
position: relative;
z-index: 1;
box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35);
transition: transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s, background .25s;
}
.toc-cta-btn:hover, a.toc-cta-btn:hover {
background: var(--white) !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45);
}
/* ============ White cards: layered, warm, alive ============ */
.hub-card, .svc-included-card, .process-card {
position: relative;
overflow: hidden;
border: 1px solid var(--border-subtle) !important;
background:
radial-gradient(90% 65% at 100% 0%, rgba(228, 237, 226, .5), transparent 58%),
var(--surface-card, #fff) !important;
box-shadow: 0 1px 2px rgba(22, 36, 27, .05), 0 10px 28px -22px rgba(22, 36, 27, .3);
transition: transform .32s cubic-bezier(.33, 1, .68, 1),
box-shadow .32s cubic-bezier(.33, 1, .68, 1),
border-color .32s;
}
/* A deep-forest notch anchors each card's base and draws across on hover */
.hub-card::after, .svc-included-card::after, .process-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--forest-700), var(--forest-600) 55%, var(--sage-400));
transform: scaleX(.18);
transform-origin: left;
transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.hub-card:hover, .svc-included-card:hover, .process-card:hover {
transform: translateY(-4px);
border-color: var(--sage-300) !important;
box-shadow: 0 2px 4px rgba(22, 36, 27, .06), 0 22px 44px -22px rgba(22, 36, 27, .4);
}
.hub-card:hover::after, .svc-included-card:hover::after, .process-card:hover::after {
transform: scaleX(1);
}
/* Card titles carry the brand green */
.hub-card-title, .svc-included-title, .process-title, .diff-title {
color: var(--forest-700) !important;
}
/* Form fields: calm sage focus ring */
.oluna-field:focus {
border-color: var(--sage-400) !important;
box-shadow: 0 0 0 3px var(--sage-100) !important;
}
/* Client logos: settle back, wake on hover */
#why img { opacity: .78; transition: opacity .3s ease, transform .3s cubic-bezier(.33, 1, .68, 1); }
#why img:hover { opacity: 1; transform: scale(1.04); }
/* Icon tiles go deep forest — the dark-green depth carried into cards */
.hub-icon, .diff-icon {
background: linear-gradient(150deg, var(--forest-600), var(--forest-800)) !important;
color: var(--sage-100) !important;
box-shadow: 0 6px 14px -6px rgba(22, 36, 27, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.svc-check {
background: linear-gradient(150deg, var(--forest-600), var(--forest-800)) !important;
color: var(--cream-50) !important;
box-shadow: 0 4px 10px -4px rgba(22, 36, 27, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Card links: arrow slides on hover */
.hub-card-link span, .svc-related-link span { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.hub-card:hover .hub-card-link span { transform: translateX(4px); }
.hub-card-link { transition: color .2s; }
.hub-card:hover .hub-card-link { color: var(--forest-600); }
/* Process cards: ghost serif numerals + timeframe chips */
.process-num {
font-family: var(--font-display) !important;
font-size: 2.6rem !important;
font-weight: 300 !important;
line-height: 1 !important;
color: var(--sage-300) !important;
}
.process-timeframe {
background: var(--sage-100);
border: 1px solid var(--sage-200);
color: var(--forest-700) !important;
padding: 4px 12px;
border-radius: 999px;
font-size: var(--text-xs) !important;
font-weight: 600;
}
/* ============ "This is for you if" — dark head panel + qualifier grid ============ */
.svc-qualifiers {
display: grid !important;
grid-template-columns: 340px 1fr;
gap: 36px;
align-items: stretch;
}
.svc-qualifiers .svc-head {
background:
radial-gradient(140% 120% at 20% 0%, rgba(92, 126, 99, .35), transparent 55%),
var(--forest-800);
border-radius: 22px;
padding: 38px 34px;
margin: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
position: relative;
overflow: hidden;
box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .45);
}
.svc-qualifiers .svc-head::after {
content: "";
position: absolute;
right: -30px;
bottom: -36px;
width: 160px;
height: 160px;
background: var(--cream-50);
opacity: .08;
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
transform: rotate(-8deg);
pointer-events: none;
}
.svc-qualifiers .svc-head .oluna-eyebrow { align-self: flex-start; }
.svc-qualifiers .svc-heading { color: var(--cream-50) !important; margin: 0 !important; }
.svc-qualifier-list {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 0 !important;
align-content: center;
}
@media (max-width: 900px) {
.svc-qualifiers { grid-template-columns: 1fr; }
.svc-qualifier-list { grid-template-columns: 1fr; }
}
/* ============ FAQ without an aside (contact page): center + fill ============ */
.faq-inner:not(:has(.faq-aside)) { text-align: center; }
.faq-inner:not(:has(.faq-aside)) .faq-list {
margin: 0 auto;
max-width: 840px;
text-align: left;
}
.contact-main + .faq-section .faq-inner { padding-top: var(--space-8, 40px); }
.faq-list details, .faq-list > * {
transition: border-color .25s, box-shadow .25s;
}
.faq-list details:hover { border-color: var(--sage-400); }
/* ============ Footer: same radial depth as the bands ============ */
.site-footer {
background:
radial-gradient(760px 340px at 85% 0%, rgba(56, 86, 63, .55), transparent 60%),
var(--forest-900) !important;
}
/* Fallback (no :has support): contact page FAQ centered via sibling combinator */
.contact-main + .faq-section .faq-heading { text-align: center; }
.contact-main + .faq-section .faq-list { margin: 0 auto; max-width: 840px; }
.contact-main + .faq-section .faq-inner {
padding-top: var(--space-8, 40px);
padding-bottom: var(--space-12, 64px);
}
/* Collage placeholders: a touch more presence until real photos land */
.fc-item .media-placeholder {
background: linear-gradient(160deg, var(--sage-200) 0%, var(--cream-100) 70%) !important;
}
/* ================================================================
v3 — design-audit batch (2026-08)
================================================================ */
/* ---------- Notch fix: inset the resting stub so rounded corners
never clip it into a detached speck ---------- */
.hub-card::after, .svc-included-card::after, .process-card::after {
left: 22px;
right: 22px;
border-radius: 2px;
}
.process-card::after { transform: scaleX(.34); }
/* ---------- Card system extended to the families that missed it:
who-we-serve verticals, industry sag/ri grids, service related ---------- */
.ihg-card, .sag-card, .ri-card, .related-card {
position: relative;
overflow: hidden;
border: 1px solid var(--border-subtle) !important;
background:
radial-gradient(90% 65% at 100% 0%, rgba(228, 237, 226, .5), transparent 58%),
var(--surface-card, #fff) !important;
box-shadow: 0 1px 2px rgba(22, 36, 27, .05), 0 10px 28px -22px rgba(22, 36, 27, .3) !important;
transition: transform .32s cubic-bezier(.33, 1, .68, 1),
box-shadow .32s cubic-bezier(.33, 1, .68, 1),
border-color .32s;
}
.ihg-card::after, .sag-card::after, .ri-card::after, .related-card::after {
content: "";
position: absolute;
left: 22px;
right: 22px;
bottom: 0;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--forest-700), var(--forest-600) 55%, var(--sage-400));
transform: scaleX(.18);
transform-origin: left;
transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.ihg-card:hover, .sag-card:not(.is-pending):hover, .ri-card:not(.is-pending):hover,
.related-card:not(.is-pending):hover {
transform: translateY(-4px);
border-color: var(--sage-300) !important;
box-shadow: 0 2px 4px rgba(22, 36, 27, .06), 0 22px 44px -22px rgba(22, 36, 27, .4) !important;
}
.ihg-card:hover::after, .sag-card:not(.is-pending):hover::after,
.ri-card:not(.is-pending):hover::after, .related-card:not(.is-pending):hover::after {
transform: scaleX(1);
}
.ihg-icon, .sag-icon, .ri-icon, .related-icon {
background: linear-gradient(150deg, var(--forest-600), var(--forest-800)) !important;
color: var(--sage-100) !important;
box-shadow: 0 6px 14px -6px rgba(22, 36, 27, .45), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
.ihg-card-title,
.sag-card:not(.is-pending) .sag-name,
.ri-card:not(.is-pending) .ri-name,
.related-card:not(.is-pending) .related-name { color: var(--forest-700) !important; }
.sag-arrow { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.sag-card:hover .sag-arrow { transform: translateX(4px); }
.ihg-card-link { color: var(--forest-600) !important; }
.ihg-card-link.is-pending { color: var(--text-muted) !important; }
.ihg-card-link > span[aria-hidden] { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.ihg-card:hover .ihg-card-link > span[aria-hidden] { transform: translateX(4px); }
/* Pending cards: kill the dead-arrow affordance, ghost the 'soon' pill */
.ihg-card-link.is-pending > span[aria-hidden] { display: none !important; }
.ihg-soon {
background: transparent !important;
border: 1px solid var(--sage-200) !important;
color: var(--sage-500) !important;
letter-spacing: .1em !important;
padding: 2px 10px !important;
}
/* ---------- One label voice: every stray micro-label joins the
bold-italic-serif-caps eyebrow system ---------- */
.fc-kicker, .fb-lead, .as-heading, .ic-kicker, .kt-heading,
.sp-also-label, .related-heading, .ri-heading, .pt-heading, .fss-leadin {
font-family: var(--font-display) !important;
font-style: italic !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .18em !important;
font-size: var(--text-sm) !important;
color: var(--forest-700) !important;
}
/* FAQ sections get an eyebrow too (CSS-generated until the component adds one) */
.faq-inner.has-aside .faq-heading::before {
content: "Common questions";
display: block;
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
font-size: var(--text-sm);
color: var(--forest-700);
margin-bottom: 10px;
}
/* ---------- Imageless post covers: retire the repeated logo mark,
go dark editorial instead ---------- */
.post-fallback {
position: relative;
overflow: hidden;
background:
radial-gradient(130% 120% at 18% -8%, rgba(92, 126, 99, .45), transparent 58%),
linear-gradient(135deg, var(--forest-700) 0%, var(--forest-900) 100%) !important;
}
.post-fallback .pf-mark { display: none !important; }
.post-fallback::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
height: 1px;
background: linear-gradient(90deg, var(--gold-500), transparent 70%);
opacity: .55;
}
.post-fallback .pf-label {
position: relative;
z-index: 1;
font-family: var(--font-display) !important;
font-style: italic !important;
font-weight: 600 !important;
letter-spacing: .18em !important;
color: var(--sage-200) !important;
}
/* ---------- Hero-to-section seams: let heroes settle back to cream ---------- */
.contact-hero, .blog-hero {
background: linear-gradient(180deg, var(--cream-50) 0%, var(--sage-50) 58%, var(--cream-50) 100%) !important;
}
/* ---------- Contact page ---------- */
.contact-form-card {
position: relative;
overflow: hidden;
background:
radial-gradient(90% 65% at 100% 0%, rgba(228, 237, 226, .5), transparent 58%),
var(--surface-card, #fff) !important;
}
.contact-form-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--forest-700), var(--forest-600) 55%, var(--sage-400));
}
.dc-icon {
background: linear-gradient(150deg, var(--forest-600), var(--forest-800)) !important;
color: var(--sage-100) !important;
box-shadow: 0 6px 14px -6px rgba(22, 36, 27, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.trust-line {
border-left: 2px solid var(--gold-500) !important;
padding-left: var(--space-5, 24px) !important;
}
.trust-quote blockquote {
font-style: italic;
font-weight: 300 !important;
font-size: var(--text-xl) !important;
line-height: 1.5 !important;
color: var(--forest-700) !important;
}
.trust-quote figcaption {
margin-top: var(--space-3) !important;
font-size: var(--text-xs) !important;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sage-500) !important;
}
.faq-item:hover { box-shadow: 0 10px 24px -18px rgba(22, 36, 27, .28); }
.faq-item[open] {
border-color: var(--sage-300) !important;
box-shadow: 0 14px 30px -20px rgba(22, 36, 27, .32);
}
.faq-item[open] .faq-question { color: var(--forest-700) !important; }
.whn-num {
font-family: var(--font-display) !important;
font-style: italic;
font-weight: 500 !important;
font-size: 1.05rem !important;
color: var(--forest-700) !important;
background: var(--sage-50) !important;
box-shadow: inset 0 0 0 1.5px var(--sage-200);
}
/* ---------- Blog feed ---------- */
.pc-chip, .fc-chip {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--sage-300);
color: var(--forest-600) !important;
}
.pc-image, .fc-image { transition: transform .7s cubic-bezier(.33, 1, .68, 1); }
.post-card:hover .pc-image, .featured-card:hover .fc-image { transform: scale(1.04); }
.pc-title, .fc-title { transition: color .3s ease; }
.post-card:hover .pc-title, .featured-card:hover .fc-title { color: var(--forest-700) !important; }
.cta-band {
background:
radial-gradient(720px 340px at 12% -30%, rgba(92, 126, 99, .38), transparent 60%),
var(--forest-800) !important;
border-bottom: 1px solid rgba(203, 218, 201, .14);
padding-top: var(--space-10, 72px) !important;
padding-bottom: var(--space-10, 72px) !important;
}
/* ---------- Article typography: table, code, rule ---------- */
.prose table { border-collapse: collapse !important; font-size: var(--text-base) !important; }
.prose th, .prose td {
border: 0 !important;
border-bottom: 1px solid var(--sage-200) !important;
padding: 12px 16px !important;
text-align: left;
}
.prose th:first-child, .prose td:first-child { padding-left: 0 !important; }
.prose th {
background: transparent !important;
border-bottom: 2px solid var(--sage-400) !important;
font-size: var(--text-xs) !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: var(--forest-700) !important;
}
.prose tr:last-child td { border-bottom-color: transparent !important; }
.prose pre, .prose pre.astro-code {
background:
radial-gradient(140% 130% at 12% -10%, rgba(92, 126, 99, .28), transparent 55%),
var(--forest-900) !important;
border-radius: var(--radius-lg, 14px) !important;
box-shadow: inset 0 0 0 1px rgba(228, 237, 226, .1) !important;
}
.prose hr {
border: 0 !important;
border-top: 1px solid var(--sage-400) !important;
width: 88px !important;
margin: var(--space-8, 48px) auto !important;
opacity: .8;
}
.prose p + h2, .prose ul + h2, .prose ol + h2 { margin-top: calc(var(--space-8, 48px) * 1.25) !important; }
/* FAQ post: answer-first line reads as a serif dek, not a bold slab */
.prose h2 + p > strong:only-child {
display: block;
font-family: var(--font-display) !important;
font-weight: 400 !important;
font-style: normal;
font-size: var(--text-2xl) !important;
line-height: 1.3 !important;
color: var(--forest-700) !important;
}
/* Inline CTA: arrow answers hover */
.post-inline-cta .pic-arrow { transition: transform .3s cubic-bezier(.33, 1, .68, 1); }
.post-inline-cta a:hover .pic-arrow { transform: translateX(5px); }
.post-inline-cta a { transition: border-color .2s ease, background .2s ease, box-shadow .3s ease !important; }
.post-inline-cta a:hover { box-shadow: 0 12px 26px -18px rgba(22, 36, 27, .35); }
/* ---------- Interview media surfaces ---------- */
.im-video-canvas {
border: 0 !important;
background:
radial-gradient(120% 140% at 22% -12%, rgba(92, 126, 99, .38), transparent 56%),
linear-gradient(135deg, var(--forest-800) 0%, var(--forest-900) 100%) !important;
box-shadow: inset 0 0 0 1px rgba(228, 237, 226, .14), 0 18px 40px -18px rgba(22, 36, 27, .45) !important;
}
.im-play { box-shadow: 0 0 0 10px rgba(228, 237, 226, .07); }
.im-audio { border-color: var(--sage-200) !important; box-shadow: 0 1px 2px rgba(22, 36, 27, .05); }
.im-audio-bar { background: var(--sage-100) !important; }
.im-audio-progress { background: linear-gradient(90deg, var(--forest-600), var(--sage-400)) !important; }
.qa-a-panel .stat-highlight {
transform: none !important;
box-shadow: 0 12px 28px -16px rgba(22, 36, 27, .35) !important;
}
/* ---------- Placeholder labels: readable, not washed out ---------- */
.media-placeholder { color: var(--forest-600) !important; }
/* ---------- Parent / who-we-serve ---------- */
#why .oluna-marquee img {
filter: grayscale(1) contrast(.95) brightness(1.02);
opacity: .55;
transition: filter .35s ease, opacity .35s ease, transform .3s cubic-bezier(.33, 1, .68, 1);
}
#why .oluna-marquee img:hover { filter: none; opacity: .95; transform: scale(1.04); }
.rvm-viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
@media (min-width: 1025px) {
.package-card.featured {
transform: translateY(-10px) !important;
box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .25) !important;
}
}
.package-audience {
border-top: 1px solid var(--border-subtle) !important;
padding-top: var(--space-4, 20px) !important;
margin-top: auto !important;
}
select.oluna-field {
-webkit-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c7e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 42px !important;
}
.fss-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 0 6px var(--space-5, 24px);
border-left: 1px solid var(--border-subtle);
}
.fss-link span { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.fss-link:hover { text-decoration: none !important; color: var(--forest-700) !important; }
.fss-link:hover span { transform: translateX(4px); }
@media (max-width: 860px) { .fss-link { border-left: 0; padding-left: 0; } }
/* ---------- Service / industry ---------- */
.svc-industries-heading {
font-family: var(--font-display) !important;
font-size: var(--text-2xl) !important;
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: -.01em !important;
text-transform: none !important;
color: var(--text-strong) !important;
margin: 0 0 4px !important;
}
.program-types { padding: 34px 0 42px !important; }
.pt-inner { border-bottom: none !important; }
.pt-chip {
background: var(--surface-card, #fff) !important;
border: 1px solid var(--sage-200) !important;
color: var(--forest-700) !important;
font-weight: 600 !important;
padding: 9px 18px !important;
box-shadow: 0 1px 3px rgba(22, 36, 27, .07);
transition: transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s, border-color .25s;
}
.pt-chip:hover {
transform: translateY(-2px);
border-color: var(--sage-400) !important;
box-shadow: 0 10px 20px -12px rgba(22, 36, 27, .3);
}
/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
.pc-image, .fc-image { transition: none; }
.post-card:hover .pc-image, .featured-card:hover .fc-image { transform: none; }
}
/* ================================================================
v4 — template revision batch (2026-09-11)
Scope: all /templates/ pages. Global changes first, then per-page.
================================================================ */
/* ---------- Sticky fix: the page wrapper's overflow-x:hidden turned every
sticky sidebar (blog TOC, FAQ aside, form intro) into a no-op. `clip`
keeps the horizontal clipping without creating a scroll container. */
body > div[style*="overflow-x: hidden"] { overflow-x: clip !important; }
/* ---------- Clickable cards (flair.js adds .is-clickable when a card
carries a link) ---------- */
.is-clickable { cursor: pointer; }
/* ================================================================
1. Card hover — the bottom notch is retired. A deep-forest wash now
grows from the top-right corner and covers the card.
================================================================ */
.hub-card, .ihg-card, .process-card, .sag-card, .ri-card, .related-card {
position: relative;
overflow: hidden;
}
.hub-card::after, .ihg-card::after, .process-card::after,
.sag-card::after, .ri-card::after, .related-card::after {
content: "";
position: absolute;
inset: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
border-radius: 0;
background:
radial-gradient(140% 120% at 100% 0%, var(--forest-600) 0%, var(--forest-700) 42%, var(--forest-800) 100%);
transform: none;
clip-path: circle(0% at 100% 0%);
transition: clip-path .4s ease-out;
pointer-events: none;
z-index: 0;
}
.hub-card.hub-card:hover::after, .ihg-card.ihg-card:hover::after,
.process-card.process-card:hover::after, .sag-card.sag-card:hover::after,
.ri-card.ri-card:hover::after, .related-card.related-card:hover::after {
clip-path: circle(170% at 100% 0%);
transform: none;
transition: clip-path .7s cubic-bezier(.33, 1, .68, 1);
}
.hub-card > *, .ihg-card > *, .process-card > *,
.sag-card > *, .ri-card > *, .related-card > * {
position: relative;
z-index: 1;
}
.hub-card.hub-card:hover, .ihg-card.ihg-card:hover, .process-card.process-card:hover,
.sag-card.sag-card:hover, .ri-card.ri-card:hover, .related-card.related-card:hover {
border-color: var(--forest-700) !important;
box-shadow: 0 2px 4px rgba(22, 36, 27, .08), 0 26px 48px -22px rgba(22, 36, 27, .55) !important;
}
/* Content recolors as the wash arrives */
.hub-card-title, .ihg-card-title, .process-title, .sag-name, .ri-name, .related-name,
.hub-card-text, .ihg-card-text, .process-text, .sag-line, .ri-desc, .related-desc,
.hub-icon, .ihg-icon, .sag-icon, .ri-icon, .related-icon,
.process-num, .process-timeframe, .ihg-soon {
transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hub-card:hover .hub-card-title, .ihg-card:hover .ihg-card-title, .process-card:hover .process-title,
.sag-card:hover .sag-name, .ri-card:hover .ri-name, .related-card:hover .related-name,
.hub-card:hover .hub-card-text, .ihg-card:hover .ihg-card-text, .process-card:hover .process-text,
.sag-card:hover .sag-line, .ri-card:hover .ri-desc, .related-card:hover .related-desc,
.hub-card:hover .hub-icon, .ihg-card:hover .ihg-icon, .sag-card:hover .sag-icon,
.ri-card:hover .ri-icon, .related-card:hover .related-icon,
.process-card:hover .process-num, .process-card:hover .process-timeframe, .ihg-card:hover .ihg-soon,
.hub-card:hover .hub-card-link, .ihg-card:hover .ihg-card-link {
transition-duration: .45s;
transition-delay: .18s;
}
.hub-card:hover .hub-card-title, .ihg-card:hover .ihg-card-title, .process-card:hover .process-title,
.sag-card:hover .sag-name, .ri-card:hover .ri-name, .related-card:hover .related-name {
color: var(--cream-50) !important;
}
.hub-card:hover .hub-card-text, .ihg-card:hover .ihg-card-text, .process-card:hover .process-text,
.sag-card:hover .sag-line, .ri-card:hover .ri-desc, .related-card:hover .related-desc {
color: var(--sage-100) !important;
}
.hub-card:hover .hub-icon, .ihg-card:hover .ihg-icon, .sag-card:hover .sag-icon,
.ri-card:hover .ri-icon, .related-card:hover .related-icon {
background: rgba(250, 248, 242, .12) !important;
color: var(--cream-50) !important;
box-shadow: inset 0 0 0 1px rgba(250, 248, 242, .22) !important;
}
.process-card:hover .process-num { color: var(--sage-300) !important; }
.process-card:hover .process-timeframe {
background: rgba(250, 248, 242, .1) !important;
border-color: rgba(250, 248, 242, .24) !important;
color: var(--sage-100) !important;
}
.ihg-card:hover .ihg-soon { border-color: rgba(250, 248, 242, .32) !important; color: var(--sage-200) !important; }
/* ================================================================
2. "Explore …" — the CTA row becomes a real footer of the card and the
arrow draws out to the right edge on hover.
================================================================ */
.hub-card-link, .ihg-card-link {
display: flex !important;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 16px !important;
border-top: 1px solid var(--border-subtle);
font-weight: 700 !important;
letter-spacing: .01em;
color: var(--forest-700) !important;
text-decoration: none !important;
transition: color .45s ease, border-color .45s ease;
}
.hub-card:hover .hub-card-link, .ihg-card:hover .ihg-card-link {
color: var(--cream-50) !important;
border-top-color: rgba(250, 248, 242, .22);
}
.hub-card:hover .hub-card-link.is-pending, .ihg-card:hover .ihg-card-link.is-pending {
color: var(--sage-300) !important;
}
.hub-card-link > span[aria-hidden], .ihg-card-link > span[aria-hidden], .sag-arrow {
display: block !important;
flex: 1 1 auto;
max-width: 26px;
height: 2px;
background: currentColor;
border-radius: 2px;
position: relative;
font-size: 0 !important;
line-height: 0;
transform: none !important;
transition: max-width .65s cubic-bezier(.33, 1, .68, 1);
}
.hub-card-link > span[aria-hidden]::after, .ihg-card-link > span[aria-hidden]::after, .sag-arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
border-radius: 1px;
transform: translateY(-50%) rotate(45deg);
}
.hub-card:hover .hub-card-link > span[aria-hidden],
.ihg-card:hover .ihg-card-link > span[aria-hidden],
.sag-card:hover .sag-arrow {
max-width: 100%;
}
.hub-card-link.is-pending > span[aria-hidden] { display: none !important; }
.ihg-card-link .ihg-soon { margin-left: auto; }
.sag-name { display: flex !important; align-items: center; gap: 10px; }
.sag-card:hover .sag-arrow { color: var(--cream-50) !important; }
/* ================================================================
3. "Why it compounds" — pill chips become a two-up stat ledger
================================================================ */
.ib-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--sage-200);
border-bottom: 1px solid var(--sage-200);
padding: 22px 0;
max-width: 520px;
}
.ib-chip {
display: flex;
flex-direction: column-reverse;
gap: 10px;
background: none;
border: 0;
border-radius: 0;
padding: 2px 24px 2px 0;
box-shadow: none;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sage-500);
line-height: 1.4;
}
.ib-chip + .ib-chip { border-left: 1px solid var(--sage-200); padding-left: 24px; }
.ib-chip:hover { transform: none; box-shadow: none; }
.ib-chip strong {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--text-4xl);
line-height: 1;
letter-spacing: -.02em;
color: var(--forest-700);
}
@media (max-width: 480px) {
.ib-chip strong { font-size: var(--text-3xl); }
.ib-chip { padding-right: 14px; }
.ib-chip + .ib-chip { padding-left: 14px; }
}
/* ================================================================
4. Review rating — bigger, clearer
================================================================ */
.rvm-sub {
display: flex;
align-items: center;
justify-content: center;
gap: 8px 14px;
flex-wrap: wrap;
font-size: var(--text-base);
color: var(--text-body);
}
.rvm-stars {
font-size: 30px;
line-height: 1;
letter-spacing: 5px;
margin-right: 0;
color: var(--gold-500);
text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(184, 146, 78, .25);
}
.rvm-cstars { font-size: 19px; letter-spacing: 4px; }
/* ================================================================
5. Foliage on small screens — branches sit behind text, so they
recede; the dark band keeps a single small branch.
================================================================ */
@media (max-width: 768px) {
.oluna-branch-clip img { opacity: .045 !important; max-width: 46vw; }
}
@media (max-width: 900px) {
.fw-band::before, .fw-band::after { width: 40vw; opacity: .08; }
}
@media (max-width: 640px) {
.fw-band { padding: 72px 24px; }
.fw-band::after { display: none; }
.fw-band::before { width: 58vw; left: -18vw; top: auto; bottom: -8%; transform: none; opacity: .07; }
}
/* ================================================================
6. Photo placeholders that carry a real stand-in image
================================================================ */
.ph-note {
position: absolute;
left: 14px;
bottom: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: calc(100% - 28px);
background: rgba(250, 248, 242, .94);
color: var(--forest-700);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.3;
padding: 7px 12px;
border-radius: 999px;
box-shadow: 0 8px 18px -8px rgba(22, 36, 27, .45);
pointer-events: none;
}
.ph-note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.page-hero-media img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Full-width photo band with copy + stats */
.img-band {
position: relative;
overflow: hidden;
background: var(--forest-900);
color: var(--cream-50);
}
.img-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.img-band::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(22, 36, 27, .94) 0%, rgba(22, 36, 27, .78) 42%, rgba(22, 36, 27, .28) 100%);
}
.imb-inner {
position: relative;
z-index: 1;
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 104px 32px;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
}
.imb-copy .oluna-eyebrow { color: var(--sage-300) !important; }
.imb-heading {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.15;
letter-spacing: -.02em;
color: var(--cream-50);
margin: 14px 0 18px;
}
.imb-text { color: var(--sage-100); font-size: var(--text-lg); line-height: 1.6; max-width: 520px; margin: 0 0 28px; }
.imb-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.imb-stat { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 2px solid var(--gold-500); }
.imb-stat strong { font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl); line-height: 1; color: var(--cream-50); }
.imb-stat span { font-size: var(--text-xs); color: var(--sage-200); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.img-band .ph-note { left: auto; right: 20px; bottom: 20px; z-index: 1; }
@media (max-width: 900px) {
.imb-inner { grid-template-columns: 1fr; padding: 64px 20px 76px; }
.img-band::before { background: linear-gradient(180deg, rgba(22, 36, 27, .9) 0%, rgba(22, 36, 27, .82) 100%); }
}
/* Half-and-half photo section with a floating stat */
.img-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream-50); position: relative; }
.img-split.flip .ims-media { order: 2; }
.ims-media { position: relative; min-height: 480px; overflow: hidden; }
.ims-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ims-float {
position: absolute;
right: 32px;
bottom: 32px;
z-index: 2;
width: min(300px, calc(100% - 64px));
background:
radial-gradient(140% 120% at 20% 0%, rgba(92, 126, 99, .35), transparent 55%),
var(--forest-800);
color: var(--cream-50);
border-radius: 22px;
padding: 26px 26px 24px;
box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .6);
overflow: hidden;
}
.ims-float::after {
content: "";
position: absolute;
right: -28px;
bottom: -32px;
width: 140px;
height: 140px;
background: var(--cream-50);
opacity: .08;
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
transform: rotate(-8deg);
}
.ims-float strong { display: block; font-family: var(--font-display); font-weight: 300; font-size: var(--text-5xl); line-height: 1; }
.ims-float span { display: block; margin-top: 10px; font-size: var(--text-sm); line-height: 1.5; color: var(--sage-200); }
.img-split.flip .ims-float { right: auto; left: 32px; }
.img-split.flip .ims-media .ph-note { left: auto; right: 14px; }
.ims-copy { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ims-heading { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.02em; color: var(--text-strong); margin: 12px 0 16px; }
.ims-text { color: var(--text-muted); font-size: var(--text-lg); line-height: 1.65; margin: 0 0 22px; max-width: 520px; }
.ims-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ims-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-body); font-weight: 500; line-height: 1.5; }
.ims-list li::before {
content: "";
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 12px no-repeat,
linear-gradient(150deg, var(--forest-600), var(--forest-800));
box-shadow: 0 4px 10px -4px rgba(22, 36, 27, .45);
}
.ims-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); line-height: 1; padding: 14px 26px; border-radius: var(--radius-md, 16px); background: var(--forest-700); color: var(--cream-50); border: 1px solid var(--forest-700); text-decoration: none !important; }
@media (max-width: 900px) {
.img-split { grid-template-columns: 1fr; }
.ims-media { min-height: 340px; order: 0 !important; }
.ims-float, .img-split.flip .ims-float { right: 20px; left: auto; bottom: 20px; }
.ims-media .ph-note, .img-split.flip .ims-media .ph-note { top: 14px; bottom: auto; left: 14px; right: auto; }
.ims-copy { padding: 48px 20px 56px; }
}
/* Collage photos */
.fc-photo { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 34px -18px rgba(22, 36, 27, .4); transition: transform .35s cubic-bezier(.33, 1, .68, 1), box-shadow .35s; }
.fc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-item:hover .fc-photo { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(22, 36, 27, .5); }
/* Split-strip photo (who-we-serve) */
.ss-photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .45); }
.ss-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dark quote band on a photo */
.fw-band.has-img {
background-image: linear-gradient(rgba(22, 36, 27, .84), rgba(22, 36, 27, .9)), var(--img);
background-size: cover, cover;
background-position: center, center;
}
.fw-band.has-img .ph-note { z-index: 1; }
/* ================================================================
7. Problem strip → full-width dark green bar (pages with a stat aside)
================================================================ */
.split-strip:has(.ss-aside .stat-highlight) {
position: relative;
overflow: hidden;
color: var(--cream-50);
background:
radial-gradient(860px 520px at 6% -30%, rgba(56, 86, 63, .95), transparent 60%),
radial-gradient(760px 520px at 100% 130%, rgba(43, 69, 52, .95), transparent 58%),
var(--forest-900);
}
.split-strip:has(.ss-aside .stat-highlight)::after {
content: "";
position: absolute;
right: -50px;
bottom: -90px;
width: 340px;
height: 340px;
background: var(--cream-50);
opacity: .05;
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
transform: rotate(-8deg);
pointer-events: none;
}
.split-strip:has(.ss-aside .stat-highlight) .ss-inner.has-aside {
position: relative;
z-index: 1;
grid-template-columns: 1.25fr .75fr;
align-items: center;
gap: 64px;
padding-top: 72px;
padding-bottom: 72px;
}
.split-strip:has(.ss-aside .stat-highlight) .ss-main { gap: 18px; }
.split-strip:has(.ss-aside .stat-highlight) .oluna-eyebrow { color: var(--sage-300) !important; }
.split-strip:has(.ss-aside .stat-highlight) .ss-text { gap: 16px; }
.split-strip:has(.ss-aside .stat-highlight) .ss-text p {
color: var(--sage-100) !important;
font-size: var(--text-lg) !important;
line-height: 1.5 !important;
padding-left: 18px;
border-left: 2px solid rgba(184, 146, 78, .8);
}
.split-strip:has(.ss-aside .stat-highlight) .ss-text p:first-child {
color: var(--cream-50) !important;
font-size: var(--text-2xl) !important;
line-height: 1.3 !important;
padding-left: 0;
border-left: 0;
margin-bottom: 6px;
}
.split-strip:has(.ss-aside .stat-highlight) .stat-highlight {
background: rgba(250, 248, 242, .06) !important;
border: 1px solid rgba(250, 248, 242, .2) !important;
transform: none !important;
box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 38px 34px !important;
text-align: left !important;
align-items: flex-start;
}
.split-strip:has(.ss-aside .stat-highlight) .stat-highlight::before {
content: "";
display: block;
width: 44px;
height: 44px;
margin-bottom: 18px;
background: var(--sage-300);
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
}
.split-strip:has(.ss-aside .stat-highlight) .sh-value { font-size: var(--text-6xl) !important; letter-spacing: -.02em; }
.split-strip:has(.ss-aside .stat-highlight) .sh-label { font-size: var(--text-base) !important; max-width: 22ch; }
@media (max-width: 900px) {
.split-strip:has(.ss-aside .stat-highlight) .ss-inner.has-aside { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.split-strip:has(.ss-aside .stat-highlight) .sh-value { font-size: var(--text-5xl) !important; }
}
/* ================================================================
8. "What's included" — a checklist column beside a full-height
deliverable screenshot (no more half-height gap)
================================================================ */
.svc-included-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
gap: 0 56px !important;
align-items: stretch;
}
.svc-included-card {
grid-column: 1;
border: 0 !important;
border-bottom: 1px solid var(--sage-200) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 18px 8px !important;
gap: 16px !important;
transition: background .3s ease;
}
.svc-included-card:first-child { border-top: 1px solid var(--sage-200) !important; }
.svc-included-card:hover { transform: none !important; background: rgba(228, 237, 226, .4) !important; box-shadow: none !important; }
.svc-included-card::after { display: none !important; }
.svc-included-title { font-size: var(--text-lg) !important; }
.svc-included-grid > .media-placeholder, .svc-included-shot {
grid-column: 2;
grid-row: 1 / span var(--included-rows, 6);
align-self: stretch;
}
.svc-included-shot {
position: relative;
margin: 0;
border-radius: 22px;
overflow: hidden;
min-height: 340px;
box-shadow: 0 22px 48px -22px rgba(22, 36, 27, .5);
}
.svc-included-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@media (max-width: 860px) {
.svc-included-grid { grid-template-columns: 1fr !important; }
.svc-included-grid > .media-placeholder, .svc-included-shot { grid-column: 1; grid-row: auto; margin-top: 28px; min-height: 260px; }
}
/* ================================================================
9. "Also serving" — one organized unit under the three strong cards
================================================================ */
.sp-also {
margin-top: 22px;
padding: 16px 22px;
background: var(--surface-card, #fff);
border: 1px solid var(--sage-200);
border-radius: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.sp-also-label {
flex-basis: auto;
margin: 0 8px 0 0;
padding-right: 18px;
border-right: 1px solid var(--sage-200);
line-height: 1.2;
}
.sp-pill { padding: 8px 14px; border-radius: 999px; border-color: var(--sage-100); box-shadow: none; }
@media (max-width: 640px) {
.sp-also-label { flex-basis: 100%; border-right: 0; padding-right: 0; margin: 0 0 4px; }
}
/* ================================================================
10. "Often paired with" — three cards, the third is the full package
================================================================ */
.related-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.related-card--package {
background:
radial-gradient(140% 130% at 15% 0%, rgba(92, 126, 99, .38), transparent 60%),
var(--forest-800) !important;
border-color: var(--forest-700) !important;
}
.related-card--package .related-name { color: var(--cream-50) !important; }
.related-card--package .related-desc { color: var(--sage-200) !important; }
.related-card--package .related-icon {
background: rgba(250, 248, 242, .12) !important;
color: var(--cream-50) !important;
box-shadow: inset 0 0 0 1px rgba(250, 248, 242, .22) !important;
}
.related-badge {
display: inline-block;
margin-bottom: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-500);
}
@media (max-width: 900px) { .related-row { grid-template-columns: 1fr !important; } }
/* ================================================================
11. Contact form section on service / industry pages (mirrors the
services hub ending; rules are unscoped so the shared markup works)
================================================================ */
.contact-form-section { background: var(--cream-50); border-top: 1px solid var(--border-subtle); }
.cfs-inner { max-width: var(--container-max); padding: var(--space-12) var(--space-8); gap: var(--space-10); grid-template-columns: .9fr 1.1fr; align-items: start; margin: 0 auto; display: grid; }
.cfs-left { position: sticky; top: 100px; }
.cfs-heading { font-size: var(--text-4xl); margin: var(--space-3) 0 var(--space-4); }
.cfs-lede { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-relaxed); max-width: 380px; margin: 0; }
.cfs-next { margin-top: var(--space-7); }
.cfs-right { gap: var(--space-4); flex-direction: column; display: flex; }
.cfs-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-8); }
.whn-heading { font-family: var(--font-display); font-weight: var(--heading-serif-weight); font-size: var(--heading-3-size); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0 0 var(--space-5); }
.whn-list { gap: var(--space-5); flex-direction: column; margin: 0; padding: 0; list-style: none; display: flex; }
.whn-step { align-items: flex-start; gap: var(--space-4); display: flex; }
.whn-num { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; }
.whn-text { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-relaxed); padding-top: var(--space-2); }
.confidentiality-note { align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); margin: 0; display: flex; }
.cn-icon { color: var(--sage-500); flex-shrink: 0; padding-top: 3px; display: inline-flex; }
@media (max-width: 900px) { .cfs-inner { gap: var(--space-8); grid-template-columns: 1fr; } .cfs-left { position: static; } }
@media (max-width: 860px) {
.cfs-inner { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
.cfs-heading { font-size: var(--text-3xl); }
.cfs-card { padding: var(--space-6) var(--space-4); }
#form-namerow { grid-template-columns: 1fr !important; }
#oluna-hcaptcha { max-width: 100%; overflow-x: auto; }
}
/* ================================================================
12. Contact page — balanced columns, full-width map band
================================================================ */
.contact-grid { grid-template-columns: 1.35fr 1fr !important; align-items: stretch !important; padding-bottom: var(--space-8) !important; }
.contact-sidebar { padding-top: 0 !important; gap: var(--space-5) !important; }
.contact-sidebar .whn, .contact-sidebar .direct-contact {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: 0 1px 2px rgba(22, 36, 27, .05), 0 10px 28px -22px rgba(22, 36, 27, .3);
}
.contact-sidebar .trust-quote { margin-top: auto !important; }
.contact-map-band { position: relative; height: 460px; overflow: hidden; background: var(--sage-100); }
.contact-map-band .media-placeholder {
position: absolute;
inset: 0;
height: 100%;
border-radius: 0 !important;
background:
linear-gradient(rgba(43, 69, 52, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 69, 52, .07) 1px, transparent 1px),
radial-gradient(120% 120% at 85% 15%, var(--sage-100) 0%, var(--cream-100) 62%) !important;
background-size: 44px 44px, 44px 44px, 100% 100% !important;
box-shadow: none;
}
.cmb-inner { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-8); height: 100%; display: flex; align-items: center; }
.cmb-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 28px 30px;
max-width: 380px;
box-shadow: 0 24px 48px -22px rgba(22, 36, 27, .45);
}
.cmb-card .oluna-eyebrow { display: block; margin-bottom: 10px; }
.cmb-addr { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-strong); line-height: 1.3; margin: 0 0 4px; }
.cmb-meta { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 16px; }
.cmb-card a { font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.cmb-card a span { transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.cmb-card a:hover span { transform: translateX(4px); }
@media (max-width: 860px) {
.contact-map-band { height: auto; }
.contact-map-band .media-placeholder { position: relative; aspect-ratio: 4 / 3; height: auto; }
.cmb-inner { padding: 0 20px 28px; margin-top: -64px; }
.cmb-card { max-width: none; width: 100%; }
}
/* ================================================================
13. Who-we-serve "complete toolkit" — six service tiles, not pills
================================================================ */
.fss-inner { display: grid !important; grid-template-columns: 1fr; justify-items: center; gap: 26px !important; padding-top: 80px !important; padding-bottom: 80px !important; }
.fss-leadin {
font-family: var(--font-display) !important;
font-style: normal !important;
font-weight: 300 !important;
text-transform: none !important;
letter-spacing: -.02em !important;
font-size: var(--text-3xl) !important;
color: var(--text-strong) !important;
text-align: center;
line-height: 1.15;
}
.fss-leadin::before {
content: "The complete toolkit";
display: block;
margin-bottom: 10px;
font-style: italic;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
font-size: var(--text-sm);
color: var(--forest-700);
}
.fss-row { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 14px; width: 100%; }
.fss-chip {
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: 14px !important;
padding: 24px 14px 22px !important;
border-radius: 18px !important;
font-weight: 600 !important;
font-size: var(--text-base) !important;
color: var(--forest-700) !important;
background:
radial-gradient(90% 65% at 100% 0%, rgba(228, 237, 226, .5), transparent 58%),
var(--surface-card, #fff) !important;
box-shadow: 0 1px 2px rgba(22, 36, 27, .05), 0 10px 28px -22px rgba(22, 36, 27, .3);
transition: transform .32s cubic-bezier(.33, 1, .68, 1), box-shadow .32s, border-color .32s;
}
.fss-chip:hover { transform: translateY(-4px); border-color: var(--sage-300) !important; box-shadow: 0 2px 4px rgba(22, 36, 27, .06), 0 22px 44px -22px rgba(22, 36, 27, .4); }
.fss-icon {
width: 50px !important;
height: 50px !important;
border-radius: 14px !important;
background: linear-gradient(150deg, var(--forest-600), var(--forest-800)) !important;
color: var(--sage-100) !important;
box-shadow: 0 6px 14px -6px rgba(22, 36, 27, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.fss-icon svg { width: 22px; height: 22px; }
.fss-link { border-left: 0; padding-left: 0; font-size: var(--text-base) !important; }
@media (max-width: 1024px) { .fss-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fss-row { grid-template-columns: repeat(2, 1fr); } .fss-leadin { font-size: var(--text-2xl) !important; } }
/* ================================================================
14. Industry "Across every level of care" — a numbered care spectrum
================================================================ */
.program-types { padding: 72px 0 !important; }
.pt-inner { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 22px !important; border-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.pt-row { width: 100%; }
.pt-heading {
font-family: var(--font-display) !important;
font-style: normal !important;
font-weight: 300 !important;
text-transform: none !important;
letter-spacing: -.02em !important;
font-size: var(--text-3xl) !important;
color: var(--text-strong) !important;
line-height: 1.15;
}
.pt-heading::before {
content: "Levels of care";
display: block;
margin-bottom: 10px;
font-style: italic;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
font-size: var(--text-sm);
color: var(--forest-700);
}
.pt-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; counter-reset: pt; justify-content: stretch; }
.pt-chip {
counter-increment: pt;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 18px 18px 16px !important;
border-radius: 16px !important;
border-top: 3px solid var(--sage-400) !important;
font-size: var(--text-base) !important;
line-height: 1.3;
}
.pt-chip::before {
content: "0" counter(pt);
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: var(--text-lg);
color: var(--sage-400);
line-height: 1;
}
@media (max-width: 860px) { .program-types { padding: 56px 0 !important; } .pt-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .pt-row { grid-template-columns: 1fr; } }
/* ================================================================
15. Blog feed
================================================================ */
.blog-hero .bh-inner {
display: flex !important;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding-top: 64px !important;
padding-bottom: 56px !important;
}
.bh-text { flex: 1 1 auto; max-width: none; }
.bh-lede { max-width: none !important; font-size: var(--text-xl) !important; }
.bh-heading { font-size: clamp(2.4rem, 4.6vw, 3.75rem) !important; }
.bh-media { display: none !important; }
@media (max-width: 860px) { .blog-hero .bh-inner { flex-direction: column; align-items: flex-start; padding-top: 44px !important; padding-bottom: 40px !important; } }
/* Dropdowns render above the author strip (each reveal wrapper keeps a
transform, so it is its own stacking context) */
.blog-feed > [data-reveal]:has(.filter-bar) { position: relative; z-index: 30; }
.fb-dropdown[open] { z-index: 40; }
.fb-panel { z-index: 50 !important; }
/* Filters stack and clear */
.filter-bar { gap: 10px 12px !important; }
.fb-summary.active .fb-summary-term { font-weight: 400; opacity: .92; }
.fb-clear, .as-clear {
appearance: none;
border: 1px solid var(--sage-300);
background: transparent;
color: var(--forest-700);
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .2s, border-color .2s;
}
.fb-clear::before, .as-clear::before { content: "×"; font-size: 16px; line-height: 1; }
.fb-clear:hover, .as-clear:hover { background: var(--sage-50); border-color: var(--sage-400); }
.fb-clear { margin-left: auto; }
.fb-clear[hidden], .as-clear[hidden], .bf-empty[hidden] { display: none !important; }
.fb-option { position: relative; padding-right: 30px !important; }
.fb-option.active::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--forest-700); }
.is-filtered-out { display: none !important; }
.bf-empty { padding: 24px 0; }
/* Author strip: lift no longer clips, arrows on mobile */
.as-head { align-items: center !important; gap: 12px !important; }
.as-row { padding: 10px 6px 18px !important; margin: -10px -6px -8px; }
.as-card { position: relative; }
.as-card.selected .as-name { color: var(--forest-700); }
.as-nav { display: none; gap: 8px; margin-left: auto; }
.as-nav button {
appearance: none;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--sage-300);
background: var(--surface-card, #fff);
color: var(--forest-700);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s, border-color .2s, opacity .2s;
}
.as-nav button:hover { background: var(--sage-50); border-color: var(--sage-400); }
.as-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 768px) {
.as-nav { display: inline-flex; }
.as-row { scroll-snap-type: x mandatory; scrollbar-width: none; }
.as-row::-webkit-scrollbar { display: none; }
.as-card { width: calc(100% - 12px) !important; scroll-snap-align: center; }
.as-clear { order: 3; }
}
/* Post cards read as clickable */
.post-card, .featured-card { cursor: pointer; }
.pc-meta { width: 100%; }
.pc-meta::after {
content: "Read →";
margin-left: auto;
color: var(--forest-600);
font-weight: 700;
opacity: 0;
transform: translateX(-6px);
transition: opacity .3s ease, transform .3s cubic-bezier(.33, 1, .68, 1);
}
.post-card:hover .pc-meta::after { opacity: 1; transform: none; }
.post-card:hover .pc-title, .featured-card:hover .fc-title {
text-decoration: underline;
text-decoration-color: var(--sage-400);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
/* ================================================================
16. Blog posts — full-width title, sticky sidebar, people panels
================================================================ */
.post-title { max-width: none !important; }
.post-dek { max-width: none !important; }
.toc-unit { top: 92px !important; }
.toc-people {
background: var(--surface-card, #fff);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 24px);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-xs);
}
.toc-people-row { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: inherit; }
.toc-people-row + .toc-people-row { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.toc-people-row img, .toc-people-row .avatar-fallback { width: 36px !important; height: 36px !important; font-size: 13px !important; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.tp-role { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-500); font-weight: 700; }
.tp-name { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.toc-people-row:hover .tp-name { color: var(--forest-700); }
.toc-unit:has(.toc-people) .toc-author-chip { display: none !important; }
.post-author-full.post-people { max-width: none !important; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.ap-kicker { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-500); margin-bottom: 2px; }
.interviewee-profile { background: var(--sage-50) !important; border-color: var(--sage-200) !important; }
@media (max-width: 900px) { .post-author-full.post-people { grid-template-columns: 1fr; } }
/* ================================================================
17. FAQ post — each question is a block: numbered question, boxed
short answer, then the detail. JSON-LD FAQPage mirrors it.
================================================================ */
.prose.faq-list-start { counter-reset: faq; }
.prose .faq-qa { counter-increment: faq; padding: 34px 0 10px; border-top: 1px solid var(--sage-200); scroll-margin-top: 96px; }
.prose .faq-qa-q {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 0 0 18px !important;
font-size: var(--text-2xl) !important;
line-height: 1.25 !important;
}
.prose .faq-qa-q::before {
content: "0" counter(faq);
flex: none;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: var(--text-lg);
color: var(--sage-400);
line-height: 1;
margin-top: 8px;
min-width: 30px;
}
.prose .faq-qa-direct {
position: relative;
margin: 0 0 18px !important;
padding: 18px 22px;
background: var(--sage-50);
border-left: 3px solid var(--forest-600);
border-radius: 0 16px 16px 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-xl);
line-height: 1.4;
color: var(--forest-700);
}
.prose .faq-qa-direct::before {
content: "Short answer";
display: block;
margin-bottom: 6px;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sage-500);
}
.prose .faq-qa-body > p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .prose .faq-qa-q { font-size: var(--text-xl) !important; gap: 12px; } }
/* ================================================================
v5 — round-two revisions (2026-09-11, afternoon)
================================================================ */
/* ---------- Parent: photo band gets a heavy forest overlay and a single
copy column, so it reads at every width ---------- */
.img-band-bg { opacity: .42; }
.img-band::before {
background: linear-gradient(90deg, rgba(22, 36, 27, .97) 0%, rgba(22, 36, 27, .9) 48%, rgba(22, 36, 27, .72) 100%);
}
.img-band::before { z-index: 1; }
.imb-inner { grid-template-columns: minmax(0, 720px); padding: 96px 32px; z-index: 2; }
.img-band .ph-note { z-index: 3; }
.imb-stat { border-left-color: var(--sage-400); }
.imb-text { max-width: 600px; }
@media (max-width: 900px) {
.img-band::before { background: rgba(22, 36, 27, .9); }
}
/* ---------- Parent: photo row sits inside the "Built for behavioral
health" band and lines up with its three columns ---------- */
.flair-collage { background: var(--sage-50) !important; }
.fc-inner { padding-top: 0 !important; padding-bottom: 96px !important; }
.diff-inner { padding-bottom: 40px !important; }
@media (max-width: 860px) { .fc-inner { padding-bottom: 56px !important; } }
/* ---------- Dark problem bar: one Oluna mark (far right), quieter stat,
green rules instead of gold ---------- */
.split-strip:has(.ss-aside .stat-highlight) .stat-highlight::before,
.split-strip:has(.ss-aside .stat-highlight) .stat-highlight::after { display: none !important; }
.split-strip:has(.ss-aside .stat-highlight) .stat-highlight {
background: transparent !important;
border: 0 !important;
border-left: 1px solid rgba(250, 248, 242, .22) !important;
border-radius: 0 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
padding: 10px 0 10px 40px !important;
gap: 4px;
}
.split-strip:has(.ss-aside .stat-highlight) .sh-value {
font-size: clamp(4.25rem, 7vw, 6.25rem) !important;
line-height: .95;
letter-spacing: -.03em;
}
.split-strip:has(.ss-aside .stat-highlight) .sh-label {
margin-top: 10px;
color: var(--sage-200) !important;
font-weight: 500 !important;
}
.split-strip:has(.ss-aside .stat-highlight) .ss-text p { border-left-color: var(--sage-400); }
@media (max-width: 900px) {
.split-strip:has(.ss-aside .stat-highlight) .stat-highlight { border-left: 0 !important; border-top: 1px solid rgba(250, 248, 242, .22) !important; padding: 28px 0 0 !important; }
}
/* ---------- Service: "What's included" becomes its own light-sage band so
the photo section below reads as the next full-bleed beat ---------- */
.svc-included { background: var(--sage-50) !important; }
.svc-included-card { border-bottom-color: rgba(43, 69, 52, .16) !important; }
.svc-included-card:first-child { border-top-color: rgba(43, 69, 52, .16) !important; }
.svc-included-card:hover { background: rgba(255, 255, 255, .6) !important; }
.img-split { border-top: 1px solid var(--sage-100); }
/* ---------- "Often paired with": two service cards, then the homepage's
omni-channel package card full width beneath them ---------- */
.related-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.related-card--package {
grid-column: 1 / -1;
margin-top: 8px;
background: var(--forest-700) !important;
border: 0 !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-brand) !important;
padding: var(--space-8) !important;
display: grid !important;
grid-template-columns: auto 1fr auto;
gap: var(--space-6);
align-items: center;
}
.related-card--package::after { display: none !important; }
.related-card--package:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5) !important; }
.related-card--package .related-icon {
width: 64px !important;
height: 64px !important;
border-radius: var(--radius-md) !important;
background: var(--overlay-on-brand) !important;
color: var(--cream-50) !important;
box-shadow: none !important;
}
.related-card--package .related-icon svg { width: 30px; height: 30px; }
.related-card--package .related-text { gap: var(--space-2) !important; }
.related-card--package .related-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--forest-800);
background: var(--sage-200);
padding: 4px 12px;
border-radius: var(--radius-pill);
margin-bottom: 4px;
}
.related-card.related-card--package .related-name {
font-family: var(--font-display);
font-weight: 400 !important;
font-size: var(--text-3xl) !important;
line-height: 1.1;
color: var(--cream-50) !important;
}
.related-card.related-card--package .related-desc {
color: var(--sage-200) !important;
font-size: var(--text-lg) !important;
line-height: var(--leading-relaxed) !important;
max-width: 600px;
}
.related-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--text-base);
line-height: 1;
padding: 14px 26px;
border-radius: var(--radius-md);
background: var(--cream-50);
color: var(--forest-800);
border: 1px solid var(--cream-50);
white-space: nowrap;
transition: background .14s ease, transform .14s ease;
}
.related-card--package:hover .related-cta { background: var(--sage-100); }
@media (max-width: 860px) {
.related-row { grid-template-columns: 1fr !important; }
.related-card--package { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) !important; }
.related-cta { justify-self: start; }
}
/* the rule that ran under the paired-with row */
.contact-form-section { border-top: 0 !important; }
/* ---------- Behavioral health spectrum: nine tiles in one grid — three
focus cards, then six "also serving" tiles ---------- */
.svc-industries { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--sage-200); }
.sp-also {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.sp-also-label {
grid-column: 1 / -1;
margin: 12px 0 -4px;
padding: 0;
border: 0;
flex-basis: auto;
}
.sp-pill {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-radius: 16px;
background: var(--surface-card, #fff);
border: 1px solid var(--sage-200);
box-shadow: 0 1px 2px rgba(22, 36, 27, .05);
font-weight: 600;
color: var(--forest-700);
line-height: 1.3;
}
.sp-pill::before {
content: "";
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 12px no-repeat,
linear-gradient(150deg, var(--forest-600), var(--forest-800));
}
.sp-pill:hover { transform: translateY(-2px); border-color: var(--sage-400); box-shadow: 0 10px 20px -12px rgba(22, 36, 27, .3); }
@media (max-width: 860px) { .sp-strong, .sp-also { grid-template-columns: 1fr; } }
/* ---------- Contact: live map embed, tinted to the brand ---------- */
.contact-map-band .map-embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
filter: grayscale(1) sepia(.42) hue-rotate(78deg) saturate(.8) brightness(.94) contrast(.92);
}
.contact-map-band::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(43, 69, 52, .16), transparent 45%);
}
.cmb-inner { pointer-events: none; }
.cmb-card { pointer-events: auto; }
@media (max-width: 860px) {
.contact-map-band .map-embed { position: relative; aspect-ratio: 4 / 3; height: auto; }
}
/* ---------- Blog posts: the sidebar always fits the viewport. Questions
collapse to one numbered line each and the active one opens; the nav
scrolls internally so the CTA stays in reach ---------- */
.toc-unit { max-height: calc(100vh - 110px); }
.toc-nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sage-300) transparent; padding: 20px 20px !important; }
.toc-label { font-size: var(--text-lg) !important; margin-bottom: 10px !important; }
.toc-list { counter-reset: toc; gap: 2px !important; }
.toc-list > .toc-item > a {
counter-increment: toc;
display: flex !important;
gap: 8px;
align-items: baseline;
padding: 6px 10px !important;
font-size: var(--text-sm) !important;
line-height: 1.35 !important;
}
.toc-list > .toc-item > a::before {
content: counter(toc, decimal-leading-zero);
flex: none;
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-sm);
color: var(--sage-400);
min-width: 20px;
}
.toc-list > .toc-item > a > span,
.toc-list > .toc-item > a { min-width: 0; }
.toc-list > .toc-item > a:not(.active) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; padding-left: 34px !important; position: relative; }
.toc-list > .toc-item > a:not(.active)::before { position: absolute; left: 10px; top: 6px; }
.toc-list > .toc-item > a.active::before { color: var(--forest-700); }
.toc-sub summary { top: 6px !important; }
.toc-cta { padding: 20px 20px !important; flex: none; }
.toc-cta p { font-size: var(--text-lg) !important; margin-bottom: 12px !important; }
.toc-people { flex: none; }
/* ================================================================
v6 — round-three revisions (2026-09-14)
================================================================ */
/* ---------- Parent: stat ledger tops align on phones ---------- */
.ib-chip { justify-content: flex-end; }
/* ---------- Packages: breathing room under the last checklist item ---------- */
.package-list { padding-bottom: var(--space-5) !important; }
/* ---------- "Why Oluna": each column carries its own photo beneath the
text; photos bottom-align across the row ---------- */
.diff-col .fc-item { width: 100%; margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; gap: 12px; }
.diff-col .fc-cap { font-size: var(--text-sm); }
.diff-grid { gap: var(--space-8) var(--space-6) !important; }
.diff-inner { padding-bottom: var(--space-12) !important; }
/* ---------- Reviews: a swipeable, snapping carousel with arrows and dots
(autoplay only on desktop, pauses on hover, stops once you touch it) */
.rvm-viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-mask-image: none !important;
mask-image: none !important;
scrollbar-width: none;
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 8px 32px 22px;
scroll-padding: 0 32px;
-webkit-overflow-scrolling: touch;
}
.rvm-viewport::-webkit-scrollbar { display: none; }
.rvm-row { animation: none !important; width: auto !important; display: flex; gap: 24px; padding: 0; }
.rvm-card { scroll-snap-align: start; flex: none; width: min(390px, calc(100vw - 64px)) !important; }
.rvm-card[aria-hidden="true"] { display: none !important; }
.rvm-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.rvm-btn {
appearance: none;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--sage-300);
background: var(--surface-card, #fff);
color: var(--forest-700);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s, border-color .2s, opacity .2s;
}
.rvm-btn:hover { background: var(--sage-50); border-color: var(--sage-400); }
.rvm-btn:disabled { opacity: .35; cursor: default; }
.rvm-dots { display: flex; gap: 8px; align-items: center; }
.rvm-dot { appearance: none; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--sage-300); cursor: pointer; transition: width .25s, background .25s; }
.rvm-dot.active { width: 24px; background: var(--forest-700); }
@media (max-width: 600px) {
.rvm-viewport { padding: 8px 20px 18px; scroll-padding: 0 20px; }
.rvm-card { width: calc(100vw - 40px) !important; }
}
/* ---------- Proof section: stats read left, like the heading ---------- */
.svc-stat { text-align: left !important; align-items: flex-start !important; }
.svc-stat-row { gap: var(--space-6) var(--space-8) !important; }
/* ---------- Contact: the two-column grid was forced on phones and pushed
the sidebar off-screen; columns now apply above 900px only ---------- */
.contact-grid { grid-template-columns: 1fr !important; }
@media (min-width: 901px) { .contact-grid { grid-template-columns: 1.35fr 1fr !important; } }
/* ---------- Service / industry: tighten the gap between "often paired
with" and the form ---------- */
.related-inner { padding-bottom: 56px !important; }
main ~ .contact-form-section .cfs-inner { padding-top: 56px; }
.related-services { padding-bottom: 8px; }
/* ---------- Blog feed: hero checklist retired ---------- */
.bh-bullets { display: none !important; }
/* ---------- Industry: levels of care as a continuum — a line through
evenly spaced markers, labels beneath; stacks vertically on phones ---------- */
.pt-heading::before { content: "Continuum of care"; }
.pt-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; counter-reset: none; padding-top: 6px; }
.pt-chip {
position: relative;
flex-direction: column;
align-items: center !important;
text-align: center;
gap: 16px;
padding: 0 14px 6px !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-weight: 600 !important;
color: var(--forest-700) !important;
line-height: 1.3;
}
.pt-chip:hover { transform: none; box-shadow: none; }
.pt-chip::before {
content: "";
position: relative;
z-index: 1;
width: 30px;
height: 30px;
border-radius: 50%;
border: 0;
font-size: 0;
background:
url("data:image/svg+xml;utf8,") center / 13px no-repeat,
linear-gradient(150deg, var(--forest-600), var(--forest-800));
box-shadow: 0 0 0 6px var(--cream-50), 0 6px 14px -6px rgba(22, 36, 27, .45);
}
.pt-chip::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 14px;
height: 2px;
background: var(--sage-300);
}
.pt-chip:first-child::after { left: 50%; }
.pt-chip:last-child::after { right: 50%; }
@media (max-width: 640px) {
.pt-row { grid-template-columns: 1fr; }
.pt-chip { flex-direction: row; align-items: center !important; text-align: left; gap: 18px; padding: 12px 0 !important; }
.pt-chip::after { left: 14px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.pt-chip:first-child::after { left: 14px; top: 50%; }
.pt-chip:last-child::after { right: auto; bottom: 50%; }
}
/* ---------- Photo split sections: copy aligns to the site's content
column instead of hugging the viewport edge ---------- */
.ims-copy { padding: 80px 72px 80px max(48px, calc((100vw - var(--container-max, 1200px)) / 2 + var(--space-8, 48px))); }
.img-split:not(.flip) .ims-copy { padding: 80px max(48px, calc((100vw - var(--container-max, 1200px)) / 2 + var(--space-8, 48px))) 80px 72px; }
@media (max-width: 900px) {
.ims-copy, .img-split:not(.flip) .ims-copy { padding: 48px 20px 56px; }
}
/* ================================================================
v7 — homepage on the template system (2026-09-14)
================================================================ */
/* Hero photo is a portrait; crop it to the template's 4:3 with the face high */
.page-hero-media img { object-position: 50% 22%; }
/* Services grid: the inline min-height keeps cards even; the Explore row
sits on the card's bottom edge like the services hub */
#services-grid .hub-card { min-height: 0 !important; }
/* Who we serve: the nine tiles form one grid, no label row */
#serve-grid.sp-also { margin-top: 0; }
#serve-grid .sp-pill { font-size: var(--text-base); }
/* About: same deep-forest radial depth and single mark as the problem bars */
.home-about {
background:
radial-gradient(860px 520px at 6% -30%, rgba(56, 86, 63, .95), transparent 60%),
radial-gradient(760px 520px at 100% 130%, rgba(43, 69, 52, .95), transparent 58%),
var(--forest-900) !important;
}
.home-about::after {
content: "";
position: absolute;
left: -60px;
bottom: -90px;
width: 340px;
height: 340px;
background: var(--cream-50);
opacity: .05;
-webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat;
transform: rotate(-8deg);
pointer-events: none;
}
.home-about .oluna-eyebrow { color: var(--sage-300) !important; }
.home-about p { border-left: 2px solid var(--sage-400); padding-left: 18px; }
#about-media { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6) !important; }
/* Contact: the real review reads like the template's trust quote */
#contact.contact-form-section { border-top: 0; }
.home-quote > div[aria-label] { color: var(--gold-500) !important; }
.home-quote blockquote {
font-family: var(--font-display) !important;
font-style: italic;
font-weight: 300 !important;
font-size: var(--text-lg) !important;
line-height: 1.5 !important;
color: var(--forest-700) !important;
}
/* ================================================================
Oluna flair v8 — 2026-09-17 site build (the 19 mapped pages)
1. Header dropdown navigation (Services / Who We Serve) + mobile sub-lists
2. Live pages hide the "photo needed" chips unless ?photos=1 (review mode)
3. Team cards (About), prose sections, results disclaimer, chart note
================================================================ */
/* ---- 1. Dropdown nav ---- */
.desktop-nav .nav-item { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.desktop-nav .nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.desktop-nav .nav-dd-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0; margin: 0; border: 0; background: transparent;
color: var(--sage-500); cursor: pointer; border-radius: 6px;
transition: transform .25s cubic-bezier(.33, 1, .68, 1), color .2s;
}
.desktop-nav .nav-dd-btn:hover, .desktop-nav .nav-item.open .nav-dd-btn { color: var(--forest-700); }
.desktop-nav .nav-item.open .nav-dd-btn, .desktop-nav .nav-item:hover .nav-dd-btn { transform: rotate(180deg); }
.desktop-nav .nav-dd {
position: absolute; top: calc(100% + 12px); left: -14px; min-width: 248px;
display: none; flex-direction: column; gap: 2px; padding: 10px;
background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid var(--border-subtle); border-radius: 18px;
box-shadow: 0 18px 44px -18px rgba(22, 36, 27, .38), 0 2px 8px rgba(22, 36, 27, .06);
z-index: 60;
}
.desktop-nav .nav-dd::before {
content: ""; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px;
background: rgba(255, 255, 255, .96); border-left: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle);
transform: rotate(45deg);
}
.desktop-nav .nav-item:hover .nav-dd,
.desktop-nav .nav-item.open .nav-dd,
.desktop-nav .nav-item:focus-within .nav-dd { display: flex; }
.desktop-nav .nav-dd a {
display: block; padding: 9px 14px; border-radius: 10px;
font-size: var(--text-sm); font-weight: 500; color: var(--text-body); text-decoration: none; white-space: nowrap;
transition: background .18s, color .18s;
}
.desktop-nav .nav-dd a:hover, .desktop-nav .nav-dd a:focus-visible { background: var(--sage-50); color: var(--forest-700); }
.desktop-nav .nav-dd a[aria-current="page"] { background: var(--sage-100); color: var(--forest-800); }
.desktop-nav .nav-dd a::after { display: none !important; }
.desktop-nav .nav-item > a[aria-current="page"] { color: var(--forest-700); }
/* Mobile sub-lists under a parent link */
#mobile-menu .mm-sub { display: flex; flex-direction: column; padding: 4px 0 8px 14px; border-bottom: 1px solid var(--border-subtle); }
#mobile-menu .mm-sub a {
font-size: var(--text-base); font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 8px 0;
}
#mobile-menu .mm-sub a:hover { color: var(--forest-700); }
/* ---- 2. Photo-needed chips: hidden on live pages, shown in review mode ---- */
.live-page .ph-note { display: none !important; }
html[data-photos="review"] .live-page .ph-note { display: inline-flex !important; }
/* ---- 3. Page pieces used by the built pages ---- */
.results-note {
max-width: var(--container-narrow, 760px); margin: 22px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55;
}
.svc-lede, .proof-lede { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 640px; margin: 10px 0 0; }
.fch-note { margin: 10px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.proof-body.has-graph .flair-chart { height: 100%; display: flex; flex-direction: column; justify-content: center; }
/* Long-form section (SEO body copy) */
.svc-prose .svc-prose-body { max-width: var(--container-narrow, 760px); color: var(--text-body); line-height: var(--leading-relaxed); }
.svc-prose .svc-prose-body h3 {
font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-strong); letter-spacing: -0.01em;
margin: 30px 0 10px; line-height: 1.2;
}
.svc-prose .svc-prose-body h3:first-child { margin-top: 0; }
.svc-prose .svc-prose-body p { margin: 0 0 16px; }
.svc-prose .svc-prose-body ul { margin: 0 0 18px; padding-left: 22px; }
.svc-prose .svc-prose-body li { margin: 6px 0; }
.svc-prose .svc-prose-body a { color: var(--forest-700); text-decoration: underline; text-decoration-color: var(--sage-300); text-underline-offset: 3px; }
.svc-prose .svc-prose-body a:hover { text-decoration-color: var(--forest-700); }
.svc-prose .svc-prose-body strong { color: var(--text-strong); font-weight: 600; }
/* Spectrum cards as links */
.sp-card { text-decoration: none; }
a.sp-pill { text-decoration: none; }
/* Team (About) */
.team { background: var(--cream-50); padding: 84px 0; }
.team-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-8); }
.team-head { max-width: var(--container-narrow, 760px); margin-bottom: 36px; }
.team-heading { font-size: var(--text-4xl); margin: 10px 0 12px; }
.team-lede { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.team-card {
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 24px; box-shadow: var(--shadow-sm);
overflow: hidden; display: flex; flex-direction: column;
transition: transform .3s cubic-bezier(.33, 1, .68, 1), box-shadow .3s;
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-photo { aspect-ratio: 1 / 1; background: var(--sage-50); overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.team-name { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-strong); margin: 0; line-height: 1.15; }
.team-role { margin: -4px 0 4px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-500); }
.team-body p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.team-link { margin-top: auto; padding-top: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); text-decoration: none; }
.team-link span { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.team-link:hover span { transform: translateX(4px); }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .team { padding: 56px 0; } .team-inner { padding: 0 20px; } }
/* Contact: direct-contact list without a fake address */
.dc-list .dc-plain { color: var(--text-body); font-size: var(--text-sm); }
/* Blog author strip: real founders linking to the About page */
.as-card { text-decoration: none; }
/* Homepage: who-we-serve pills as links */
#serve-grid a.sp-pill { display: inline-flex; }
/* Homepage additions (2026-09-17): secondary hero link + about link */
.page-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-hero-link { font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); text-decoration: none; white-space: nowrap; }
.page-hero-link span { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.page-hero-link:hover span { transform: translateX(4px); }
.home-about-link { display: inline-block; margin-top: 22px; font-size: var(--text-base); font-weight: 600; color: var(--sage-200); text-decoration: none; }
.home-about-link span { display: inline-block; transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.home-about-link:hover { color: var(--cream-50); }
.home-about-link:hover span { transform: translateX(4px); }
/* ================================================================
Oluna flair v9 — 2026-09-17 hub rework (review round 1)
1. Services grid: dark-gradient CTA card fills the ninth slot
2. Ten-stage interactive stepper (.stages)
3. Editorial block: prose + sticky "is this a fit" aside
4. Reviews carousel: whole cards only, one card per step, at every width; name only
5. Impact band: compact chart never hidden by the stat card
================================================================ */
/* ---- 1. CTA card inside the services grid ---- */
.hub-grid .hub-card--cta {
background:
radial-gradient(120% 90% at 100% 0%, rgba(124, 152, 133, .38), transparent 55%),
linear-gradient(160deg, var(--forest-800) 0%, var(--forest-700) 55%, var(--forest-600) 100%) !important;
border-color: transparent !important;
color: var(--cream-50);
justify-content: center;
}
.hub-grid .hub-card--cta::after { display: none !important; }
.hub-card--cta .oluna-eyebrow { color: var(--sage-300) !important; }
.hub-card--cta .hub-card-title { color: var(--cream-50) !important; }
.hub-card--cta .hub-card-text { color: var(--sage-200) !important; }
.hub-card--cta .hub-cta-btn {
align-self: flex-start; margin-top: 6px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); line-height: 1;
padding: 13px 22px; border-radius: var(--radius-md);
background: var(--cream-50) !important; background-image: none !important; color: var(--forest-800) !important;
border: 1px solid var(--cream-50); text-decoration: none; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
transition: transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s;
}
.hub-card--cta .hub-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .55); }
.hub-card--cta .hub-cta-btn span { display: inline-block; margin-left: 8px; transition: transform .25s; }
.hub-card--cta .hub-cta-btn:hover span { transform: translateX(4px); }
/* ---- 2. Ten-stage stepper ---- */
.stages { background: var(--cream-50); position: relative; overflow: hidden; }
.stages-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 84px 32px; }
.stages-head { max-width: var(--container-narrow, 760px); margin-bottom: 34px; }
.stages-heading { font-size: var(--text-4xl); margin: 10px 0 12px; }
.stages-lede { color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); margin: 0; }
.stages-track {
list-style: none; margin: 0 0 22px; padding: 0 0 6px;
display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; position: relative;
}
.stages-track::before {
content: ""; position: absolute; left: 4%; right: 4%; top: 19px; height: 2px; background: var(--sage-200); z-index: 0;
}
.stages-track li { position: relative; z-index: 1; }
.stages-tab {
appearance: none; width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted);
font-family: var(--font-sans); transition: color .2s;
}
.stages-num {
width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-card, #fff); border: 1.5px solid var(--sage-300); color: var(--forest-700);
font-family: var(--font-display); font-size: 15px; font-weight: 500;
transition: background .25s, border-color .25s, color .25s, transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s;
}
.stages-name { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-align: center; line-height: 1.2; }
.stages-tab:hover .stages-num { border-color: var(--forest-600); transform: translateY(-2px); }
.stages-tab[aria-selected="true"] { color: var(--forest-800); }
.stages-tab[aria-selected="true"] .stages-num {
background: var(--forest-700); border-color: var(--forest-700); color: var(--cream-50);
box-shadow: 0 8px 18px -10px rgba(22, 36, 27, .6);
}
.stages-tab.is-done .stages-num { background: var(--sage-100); border-color: var(--sage-300); }
.stages-stage {
display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch;
}
.stages-panel {
display: none; background: var(--surface-card, #fff); border: 1px solid var(--border-subtle); border-radius: 24px;
box-shadow: 0 14px 34px -22px rgba(22, 36, 27, .3); padding: 34px 36px; min-height: 300px;
animation: stages-in .35s cubic-bezier(.33, 1, .68, 1);
}
.stages-panel.is-active { display: block; }
@keyframes stages-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stages-kicker { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-500); margin-bottom: 10px; }
.stages-panel h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-strong); margin: 0 0 12px; line-height: 1.2; }
.stages-panel p { margin: 0 0 12px; color: var(--text-body); line-height: var(--leading-relaxed); }
.stages-panel p strong { color: var(--forest-700); font-weight: 600; }
.stages-panel p:last-child { margin-bottom: 0; }
.stages-side {
background:
radial-gradient(140% 120% at 20% 0%, rgba(92, 126, 99, .35), transparent 55%),
var(--forest-800);
color: var(--cream-50); border-radius: 24px; padding: 32px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .45);
}
.stages-side .oluna-eyebrow { color: var(--sage-300) !important; }
.stages-side-title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.25; margin: 8px 0 0; }
.stages-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stages-side-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--sage-200); line-height: 1.5; }
.stages-side-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-300); margin-top: 7px; }
.stages-nav { display: flex; align-items: center; gap: 14px; }
.stages-nav button {
appearance: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(250, 248, 242, .35); background: rgba(250, 248, 242, .08);
color: var(--cream-50); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s;
}
.stages-nav button:hover { background: rgba(250, 248, 242, .16); border-color: var(--cream-50); }
.stages-nav button:disabled { opacity: .35; cursor: default; }
.stages-count { font-size: var(--text-sm); color: var(--sage-200); letter-spacing: .04em; }
.stages-cta { margin-top: 30px; display: flex; justify-content: center; }
@media (max-width: 960px) {
.stages-stage { grid-template-columns: 1fr; }
.stages-track { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; padding-bottom: 8px; scroll-snap-type: x proximity; }
.stages-track::-webkit-scrollbar { display: none; }
.stages-track::before { display: none; }
.stages-track li { flex: none; scroll-snap-align: center; }
.stages-tab { width: 86px; }
}
@media (max-width: 860px) {
.stages-inner { padding: 56px 20px; }
.stages-heading { font-size: var(--text-3xl); }
.stages-panel { padding: 26px 22px; min-height: 0; }
.stages-side { padding: 26px 22px; }
}
/* ---- 3. Editorial block: prose + sticky aside ---- */
.editorial { background: var(--cream-50); position: relative; overflow: hidden; }
.editorial-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 84px 32px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 56px; align-items: start; }
.editorial-head { grid-column: 1 / -1; max-width: var(--container-narrow, 760px); }
.editorial-heading { font-size: var(--text-4xl); margin: 10px 0 0; }
.editorial-body { color: var(--text-body); line-height: var(--leading-relaxed); font-size: var(--text-lg); }
.editorial-body h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-strong); letter-spacing: -0.01em; margin: 28px 0 10px; line-height: 1.2; }
.editorial-body h3:first-child { margin-top: 0; }
.editorial-body p { margin: 0 0 16px; }
.editorial-body a { color: var(--forest-700); text-decoration: underline; text-decoration-color: var(--sage-300); text-underline-offset: 3px; }
.editorial-body a:hover { text-decoration-color: var(--forest-700); }
.editorial-body .pull {
margin: 26px 0; padding: 22px 26px; border-left: 3px solid var(--sage-400); background: var(--sage-50); border-radius: 0 16px 16px 0;
font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--ink-800); line-height: 1.45;
}
.editorial-aside { position: sticky; top: 96px; }
.editorial-card {
background: var(--surface-card, #fff); border: 1px solid var(--sage-200); border-radius: 24px; padding: 28px 30px;
box-shadow: 0 16px 40px -24px rgba(22, 36, 27, .35); display: flex; flex-direction: column; gap: 14px;
}
.editorial-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-strong); margin: 0; line-height: 1.2; }
.editorial-card p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.editorial-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.editorial-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }
.editorial-list .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-100); color: var(--forest-700); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.editorial-card .oluna-cta { align-self: flex-start; margin-top: 6px; font-size: var(--text-sm); padding: 12px 20px; border-radius: var(--radius-md); color: var(--cream-50); text-decoration: none; font-weight: 600; }
@media (max-width: 960px) {
.editorial-inner { grid-template-columns: 1fr; gap: 34px; }
.editorial-aside { position: static; }
}
@media (max-width: 860px) { .editorial-inner { padding: 56px 20px; } .editorial-heading { font-size: var(--text-3xl); } .editorial-body { font-size: var(--text-base); } }
/* ---- 4. Reviews carousel: whole cards, paged, no cut-offs ---- */
.rvm-viewport { padding: 8px 0 22px !important; scroll-padding: 0 !important; max-width: min(var(--container-max, 1200px), calc(100vw - 64px)) !important; }
.rvm-row { gap: 24px !important; }
.rvm-card { width: calc((100% - 48px) / 3) !important; scroll-snap-align: start; scroll-snap-stop: always; }
@media (max-width: 1024px) { .rvm-card { width: calc((100% - 24px) / 2) !important; } }
@media (max-width: 680px) {
.rvm-viewport { max-width: calc(100vw - 40px) !important; }
.rvm-card { width: 100% !important; }
}
.rvm-role { display: none !important; }
.rvm-sub { display: none !important; }
.rvm-head { margin-bottom: 30px !important; }
/* ---- 5. Impact band: chart stays readable ---- */
.ib-media .flair-chart { padding: 18px 18px 12px; }
.ib-media .fch-head { margin-bottom: 8px; }
.ib-media .fch-note { display: none; }
.ib-stat { width: 52%; padding: 26px 26px; }
.ib-num { font-size: var(--text-4xl); }
.ib-visual { min-height: 420px; }
@media (max-width: 860px) { .ib-visual { min-height: 0; } .ib-stat { width: auto; } }
/* Process grid: no stage labels needed on pages that keep the four-step summary */
.process-timeframe { display: none !important; }
/* Contact heading spacing when the form button label is page-specific */
.cfs-heading { letter-spacing: -0.01em; }
/* ================================================================
Oluna flair v10 — 2026-09-18 hub review round 2
================================================================ */
/* Impact band: chart and stat card stacked, flush with the column, no overlap */
.ib-visual { display: flex; flex-direction: column; gap: 18px; min-height: 0 !important; }
.ib-media { position: static !important; width: 100% !important; top: auto; right: auto; }
.ib-stat { position: static !important; width: 100% !important; transform: none !important; margin: 0 !important; padding: 26px 28px; }
.ib-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ib-unit { font-family: var(--font-display); font-weight: 300; font-size: .62em; letter-spacing: -0.01em; color: var(--cream-50); }
@media (max-width: 860px) { .ib-stat { margin: 0 !important; } }
/* Stages: prev/next beside the intro paragraph; CTA under the panel, aligned with the side card */
.stages-head { max-width: none; display: grid; grid-template-columns: minmax(0, 760px) auto; align-items: end; gap: 24px 40px; }
.stages-head .stages-heading, .stages-head .oluna-eyebrow { grid-column: 1 / -1; }
.stages-head .stages-lede { max-width: 760px; }
.stages-head .stages-nav { justify-self: end; margin-bottom: 4px; }
.stages-head .stages-nav button { border-color: var(--sage-300); background: var(--surface-card, #fff); color: var(--forest-700); }
.stages-head .stages-nav button:hover { background: var(--sage-50); border-color: var(--forest-600); }
.stages-head .stages-count { color: var(--text-muted); }
.stages-side .stages-nav { display: none; }
.stages-left { display: flex; flex-direction: column; gap: 22px; }
.stages-left .stages-panel { flex: 1; }
.stages-left .stages-cta { margin: 0; justify-content: flex-start; }
@media (max-width: 960px) {
.stages-head { grid-template-columns: 1fr; }
.stages-head .stages-nav { justify-self: start; }
}
/* Behavioral-health-only band: copy left, the populations we serve on the right */
.imb-inner.has-list { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px) !important; gap: 56px; align-items: center; max-width: var(--container-max, 1200px); }
.imb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.imb-list a {
display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
padding: 14px 18px; border-radius: 16px; text-decoration: none;
background: rgba(250, 248, 242, .07); border: 1px solid rgba(250, 248, 242, .14);
transition: background .2s, border-color .2s, transform .25s cubic-bezier(.33, 1, .68, 1);
}
.imb-list a:hover { background: rgba(250, 248, 242, .13); border-color: rgba(250, 248, 242, .3); transform: translateX(4px); }
.imb-list .il-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(124, 152, 133, .28); color: var(--cream-50); display: inline-flex; align-items: center; justify-content: center; }
.imb-list .il-name { display: block; font-weight: 600; color: var(--cream-50); font-size: var(--text-base); }
.imb-list .il-line { display: block; color: var(--sage-200); font-size: var(--text-xs); margin-top: 2px; }
.imb-list .il-arrow { color: var(--sage-300); }
.imb-list-head { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-300); margin: 0 0 12px; }
@media (max-width: 900px) { .imb-inner.has-list { grid-template-columns: 1fr !important; gap: 34px; } }
/* Editorial: heading width + the limited-spots notice under the aside CTA */
.editorial-heading { max-width: 640px; }
.editorial-note {
display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 12px 14px;
border-radius: 12px; background: var(--gold-100); border: 1px solid rgba(184, 146, 78, .35);
color: var(--ink-800); font-size: var(--text-sm); line-height: 1.45;
}
.editorial-note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); margin-top: 6px; }
.editorial-note strong { color: var(--ink-900); font-weight: 600; }
/* ================================================================
Oluna flair v11 — 2026-09-18: consistent in-copy links + the limited-spots notice
================================================================ */
/* In-copy links everywhere match the blog template's prose links */
.live-page p a:not([class]), .live-page li a:not([class]), .live-page .hub-lede a, .live-page .ihg-lede a, .live-page .editorial-body a,
.live-page .svc-prose-body a, .live-page .faq-answer a, .live-page .imb-text a, .live-page .ims-text a, .live-page .svc-included-desc a,
.live-page .page-hero-lede a, .live-page .bf-empty a, .live-page .stages-panel a, .live-page .whn-text a {
color: var(--link-color, var(--forest-700)) !important;
text-decoration: underline !important;
text-decoration-color: var(--link-underline, var(--sage-300)) !important;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: color .16s ease, text-decoration-color .16s ease;
}
.live-page p a:not([class]):hover, .live-page li a:not([class]):hover, .live-page .hub-lede a:hover, .live-page .ihg-lede a:hover, .live-page .editorial-body a:hover,
.live-page .svc-prose-body a:hover, .live-page .faq-answer a:hover, .live-page .imb-text a:hover, .live-page .ims-text a:hover, .live-page .svc-included-desc a:hover,
.live-page .page-hero-lede a:hover, .live-page .bf-empty a:hover, .live-page .stages-panel a:hover, .live-page .whn-text a:hover {
color: var(--link-hover, var(--forest-600)) !important;
text-decoration-color: var(--link-hover, var(--forest-600)) !important;
}
/* Limited-spots notice: green panel, no dot */
.editorial-note {
display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; padding: 14px 16px;
border-radius: 14px; background: var(--sage-50); border: 1px solid var(--sage-200); border-left: 3px solid var(--forest-700);
color: var(--forest-800); font-size: var(--text-sm); line-height: 1.45;
}
.editorial-note::before { display: none !important; }
.editorial-note svg { flex: none; color: var(--forest-700); margin-top: 2px; }
.editorial-note strong { color: var(--forest-800); font-weight: 600; display: block; margin-bottom: 2px; }
/* ================================================================
Oluna flair v12 — 2026-09-18: round-3 fixes
================================================================ */
/* Limited-spots notice: light green to the card's edges and bottom, no dark side bar */
.editorial-card { padding-bottom: 0 !important; overflow: hidden; }
.editorial-note {
margin: 16px -30px 0 !important; padding: 18px 30px 22px !important; border: 0 !important;
border-top: 1px solid var(--sage-200) !important; border-radius: 0 !important; background: var(--sage-50) !important;
}
@media (max-width: 860px) { .editorial-note { margin: 16px -30px 0 !important; } }
/* Card-like links keep their button look (no underline treatment) */
.live-page .imb-list a, .live-page .imb-list a:hover, .live-page .sp-card, .live-page .sp-pill, .live-page .ri-card, .live-page .sag-card, .live-page .related-card,
.live-page .as-card, .live-page .team-link, .live-page .hub-card-link, .live-page .ihg-card-link, .live-page .fss-link {
text-decoration: none !important;
}
/* Mobile stepper: room for the selected circle's lift and shadow inside the scrolling track */
@media (max-width: 960px) {
.stages-track { padding: 8px 4px 10px !important; }
.stages-tab:hover .stages-num, .stages-tab[aria-selected="true"] .stages-num { transform: none; }
}
/* Industries hub: the same CTA card in the sixth slot */
.ihg-grid .hub-card--cta { background: radial-gradient(120% 90% at 100% 0%, rgba(124, 152, 133, .38), transparent 55%), linear-gradient(160deg, var(--forest-800) 0%, var(--forest-700) 55%, var(--forest-600) 100%) !important; border-color: transparent !important; justify-content: center; }
.ihg-grid .hub-card--cta::after { display: none !important; }
.ihg-grid .hub-card--cta .ihg-card-title { color: var(--cream-50) !important; }
.ihg-grid .hub-card--cta .ihg-card-text { color: var(--sage-200) !important; }
/* ================================================================
Oluna flair v13 — 2026-09-18: round-4 (packages-page review, carried across pages)
================================================================ */
/* Proof row: the influenced noun sits big beside the number ("1 → 5 Clinics"); the detail stays below */
.svc-stat-value { display: inline-flex !important; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 .3em; }
.svc-stat-unit { font-family: var(--font-display); font-weight: 400; font-size: .52em; line-height: 1; color: var(--forest-700); letter-spacing: -0.01em; white-space: nowrap; }
.svc-stat-label { max-width: 280px; }
/* Stepper: any number of steps (8, 9, 10), and a tinted variant where the four-step grid used to sit */
.stages-track { grid-template-columns: repeat(var(--stages-n, 10), minmax(0, 1fr)); }
.stages.tinted { background: var(--sage-50); }
.stages.tinted .stages-track::before { background: var(--sage-300); }
.stages.tinted .stages-panel { border-color: var(--sage-200); }
.stages-name { padding: 0 2px; }
@media (max-width: 1100px) { .stages-name { font-size: 11px; } }
/* ================================================================
Oluna flair v14 — 2026-09-19: author pages (/blog/author//)
================================================================ */
.author-hero .author-profile { max-width: 920px; }
.author-hero .ap-name { font-size: var(--text-4xl) !important; letter-spacing: -0.015em; }
.author-hero .ap-bio { margin: 0; color: var(--text-body); line-height: var(--leading-relaxed); }
.author-hero .ap-bio + .ap-bio { margin-top: 2px; }
.ap-counts { margin: 4px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); letter-spacing: .01em; }
.author-group { margin-bottom: 64px; }
.author-group:last-of-type { margin-bottom: 56px; }
.ag-head { max-width: 760px; margin-bottom: 26px; }
.ag-head .author-posts-heading { font-size: var(--text-3xl) !important; margin: 8px 0 8px !important; }
.ag-lede { margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.author-main .pc-media { position: relative; }
.pc-role {
position: absolute; left: 14px; top: 14px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: 6px 11px; border-radius: 999px; background: var(--cream-50); color: var(--forest-800); box-shadow: 0 6px 16px -8px rgba(22, 36, 27, .5);
}
.pc-role--interviewer { background: var(--forest-800); color: var(--cream-50); }
.pc-role--interviewee { background: var(--sage-100); }
.pc-role--expert { background: var(--gold-100, #F1E7D2); }
.author-filter--end { margin: 0; padding-top: 34px; border-top: 1px solid var(--border-subtle); }
.author-empty .bf-empty { margin: 0; }
.team-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
@media (max-width: 700px) { .author-hero .author-profile { flex-direction: column; } .author-hero .ap-name { font-size: var(--text-3xl) !important; } }
/* Author strip: the three founders fit the row on desktop; it stays a swipe row on small screens */
@media (min-width: 1000px) { .live-page .as-row .as-card { flex: 1 1 0; width: auto !important; min-width: 0; } }
/* ---- Author background: always-visible takeaways + an expandable, formatted full background ---- */
.author-hero .author-profile { flex-wrap: wrap; max-width: none; }
.author-hero .ap-body { flex: 1 1 420px; }
.ap-highlights { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.ap-highlights li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); line-height: 1.5; }
.ap-highlights .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-100); color: var(--forest-700); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.author-more { flex: 1 0 100%; margin: 6px calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); border-top: 1px solid var(--sage-200); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--sage-50); overflow: hidden; }
.author-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; font-size: var(--text-sm); font-weight: 600; color: var(--forest-700); transition: background .2s; }
.author-more > summary::-webkit-details-marker { display: none; }
.author-more > summary:hover { background: var(--sage-100); }
.author-more .am-close { display: none; }
.author-more[open] .am-open { display: none; }
.author-more[open] .am-close { display: inline; }
.author-more .am-chev { transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.author-more[open] .am-chev { transform: rotate(180deg); }
.am-panel { padding: 8px var(--space-6) var(--space-7); background: var(--surface-card, #fff); border-top: 1px solid var(--sage-200); animation: stages-in .35s cubic-bezier(.33, 1, .68, 1); }
.am-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px 56px; }
.am-block { padding-top: 26px; }
.am-block h3 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); margin: 0 0 14px; }
.am-block p { margin: 0; color: var(--text-body); line-height: var(--leading-relaxed); font-size: var(--text-base); }
.am-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.am-list li { display: flex; flex-direction: column; gap: 3px; }
.am-role { font-weight: 600; color: var(--text-strong); font-size: var(--text-base); line-height: 1.4; }
.am-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; }
.am-timeline { border-left: 2px solid var(--sage-200); padding-left: 22px; gap: 20px; }
.am-timeline li { position: relative; }
.am-timeline li::before { content: ""; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-card, #fff); border: 2px solid var(--forest-600); }
.am-timeline li:first-child::before { background: var(--forest-700); border-color: var(--forest-700); }
.am-quotes blockquote { margin: 0 0 12px; padding: 14px 18px; border-left: 3px solid var(--sage-400); background: var(--sage-50); border-radius: 0 12px 12px 0; font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.45; color: var(--ink-800, var(--text-strong)); }
.am-story { border-top: 1px solid var(--border-subtle); margin-top: 30px; }
.am-story-body { columns: 2; column-gap: 56px; }
.am-story-body h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--text-strong); margin: 0 0 8px; break-after: avoid; }
.am-story-body p { margin: 0 0 22px; break-inside: avoid; }
@media (max-width: 860px) {
.ap-highlights { grid-template-columns: 1fr; }
.am-grid { grid-template-columns: 1fr; gap: 0; }
.am-story-body { columns: 1; }
.author-more { margin: 6px calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); }
.am-panel { padding-left: 20px; padding-right: 20px; }
}
/* ================================================================
Oluna flair v15 — 2026-09-19: mobile menu — every item reachable, collapsible sub menus
================================================================ */
#mobile-menu.open { max-height: calc(100vh - var(--header-h, 72px)); max-height: calc(100dvh - var(--header-h, 72px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) !important; }
html.mm-locked, html.mm-locked body { overflow: hidden; }
#mobile-menu .mm-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-subtle); }
#mobile-menu .mm-row > a { flex: 1 1 auto; border-bottom: 0 !important; }
#mobile-menu .mm-toggle { appearance: none; flex: none; width: 52px; margin: 6px 0; border: 0; border-left: 1px solid var(--border-subtle); background: transparent; color: var(--forest-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0; }
#mobile-menu .mm-toggle svg { transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
#mobile-menu .mm-row.is-open .mm-toggle svg { transform: rotate(180deg); }
#mobile-menu .mm-row.is-open > a { color: var(--forest-700) !important; }
#mobile-menu.mm-enhanced .mm-sub { display: none; background: var(--sage-50); margin: 0 -20px; padding: 6px 20px 10px 34px; }
#mobile-menu.mm-enhanced .mm-sub.is-open { display: flex; animation: stages-in .25s cubic-bezier(.33, 1, .68, 1); }
#mobile-menu .mm-sub a { padding: 11px 0 !important; }
#mobile-menu .mm-sub a[aria-current="page"] { color: var(--forest-700); font-weight: 600; }
/* ================================================================
Oluna flair v16 - 2026-09-23: "Further reading" - blog cards on the pages a post supports
================================================================ */
.rr { background: var(--sage-50, #F2F5F0); padding: var(--space-10, 4rem) var(--space-6, 1.5rem); }
.rr-inner { max-width: var(--container-max); margin: 0 auto; }
.rr-head { margin-bottom: var(--space-6, 1.5rem); }
.rr-heading { font-size: var(--text-3xl); margin: .35rem 0 0; color: var(--ink-900, #16241B); }
.rr-row { display: grid; gap: var(--space-5, 1.25rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rr-row--1 { grid-template-columns: minmax(0, 620px); }
.rr-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-card { display: flex; flex-direction: column; background: var(--cream-50, #FAF8F2); border: 1px solid var(--border-subtle, rgba(22,36,27,.10));
border-radius: var(--radius-lg, 16px); overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; }
.rr-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-200, #E8E2D4); }
.rr-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, .5s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
.rr-card:hover .rr-media img { transform: scale(1.04); }
.rr-media--none { display: flex; align-items: center; justify-content: center; }
.rr-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--space-5, 1.25rem); }
.rr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rr-chip { font-family: var(--font-sans); font-size: var(--text-xs, .75rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--forest-700, #2F5D42); background: rgba(47,93,66,.09); padding: .25rem .6rem; border-radius: 999px; }
.rr-title { font-family: var(--font-display); font-size: var(--text-xl, 1.25rem); font-weight: var(--weight-light, 300); line-height: 1.25;
letter-spacing: var(--tracking-tight); color: var(--ink-900, #16241B); transition: color var(--dur-fast, .2s) var(--ease-out); }
.rr-card:hover .rr-title { color: var(--forest-700, #2F5D42); }
.rr-dek { font-family: var(--font-sans); font-size: var(--text-sm, .9rem); line-height: 1.55; color: var(--ink-700, #5A6159);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rr-more { margin-top: auto; padding-top: .35rem; font-family: var(--font-sans); font-size: var(--text-sm, .9rem); font-weight: 600; color: var(--forest-700, #2F5D42); }
.rr-arrow { display: inline-block; margin-left: .4rem; transition: transform var(--dur-fast, .2s) var(--ease-out); }
.rr-card:hover .rr-arrow { transform: translateX(3px); }
@media (max-width: 900px) { .rr-row, .rr-row--1, .rr-row--2 { grid-template-columns: minmax(0, 1fr); } .rr { padding: var(--space-8, 3rem) var(--space-5, 1.25rem); } }
@media (prefers-reduced-motion: reduce) { .rr-card:hover .rr-media img, .rr-card:hover .rr-arrow { transform: none; } }
/* ================================================================
Oluna flair v17 — 2026-10-12 polish round (operator's live-site review)
One layer, every page: motion, links, card CTAs, heroes that match their copy, stats with
their nouns, animated charts and numbers, the stepper's stage visuals, redesigned who-for,
in-depth, FAQ, proof, related and reading blocks, population photo cards, the homepage journey.
Calm motion only (fades, short lifts, slow drifts); everything stills under reduced motion.
================================================================ */
:root { --o-ease: cubic-bezier(.22, .61, .36, 1); --o-glow: rgba(124, 152, 133, .22); }
/* ---------------------------------------------------------------- 0. Reveal on scroll (every page) */
.o-anim [data-reveal]:not(.o-in), .o-anim [data-reveal-stagger] > *:not(.o-in) { opacity: 0; transform: translateY(26px); }
.o-anim [data-reveal="left"]:not(.o-in) { transform: translateX(-36px); }
.o-anim [data-reveal="right"]:not(.o-in) { transform: translateX(36px); }
/* the reveal transition only lives until the reveal is done, so cards keep their own quick hover lift */
.o-anim [data-reveal]:not(.o-done), .o-anim [data-reveal-stagger] > *:not(.o-done) {
transition: opacity .7s var(--o-ease) var(--o-delay, 0ms), transform .8s var(--o-ease) var(--o-delay, 0ms) !important;
}
/* the hero animates on load with CSS alone, so it never flashes */
.o-hero .page-hero-content > * { animation: o-rise .9s var(--o-ease) both; }
.o-hero .page-hero-content > *:nth-child(2) { animation-delay: 60ms; }
.o-hero .page-hero-content > *:nth-child(3) { animation-delay: 120ms; }
.o-hero .page-hero-content > *:nth-child(4) { animation-delay: 200ms; }
.o-hero .page-hero-content > *:nth-child(5) { animation-delay: 280ms; }
.o-hero .page-hero-content > *:nth-child(6) { animation-delay: 360ms; }
.o-hero .page-hero-content > *:nth-child(7) { animation-delay: 420ms; }
.o-hero .page-hero-media { animation: o-fade-in 1.1s var(--o-ease) .15s both; }
@keyframes o-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes o-fade-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* ---------------------------------------------------------------- 1. One link style, easy to see (operator: in-copy links were hard to notice) */
.live-page p a:not([class]), .live-page li a:not([class]), .live-page .hub-lede a, .live-page .ihg-lede a, .live-page .ed2-text a,
.live-page .faq2-a a, .live-page .imb-text a, .live-page .ims-text a, .live-page .inc-desc a, .live-page .page-hero-lede a,
.live-page .bf-empty a, .live-page .stages-panel a, .live-page .whn-text a, .live-page .ss-checks a, .live-page .jr-lede a,
.live-page .home-lede a, .live-page .svc-included-desc a, .live-page .editorial-body a, .live-page .faq-answer a {
color: var(--forest-700) !important;
font-weight: 600;
text-decoration: none !important;
background-image: linear-gradient(var(--o-link-hl, rgba(124, 152, 133, .17)), var(--o-link-hl, rgba(124, 152, 133, .17)));
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: padding-box;
background-size: 100% .36em;
background-position: 0 100%;
border-bottom: 1.5px solid var(--sage-400);
padding: 0 .06em;
transition: background-size .32s var(--o-ease), color .2s, border-color .2s;
}
.live-page p a:not([class]):hover, .live-page li a:not([class]):hover, .live-page .hub-lede a:hover, .live-page .ihg-lede a:hover,
.live-page .ed2-text a:hover, .live-page .faq2-a a:hover, .live-page .imb-text a:hover, .live-page .ims-text a:hover,
.live-page .inc-desc a:hover, .live-page .page-hero-lede a:hover, .live-page .bf-empty a:hover, .live-page .stages-panel a:hover,
.live-page .whn-text a:hover, .live-page .ss-checks a:hover, .live-page .jr-lede a:hover, .live-page .home-lede a:hover,
.live-page .svc-included-desc a:hover, .live-page .editorial-body a:hover, .live-page .faq-answer a:hover {
color: var(--forest-800) !important;
background-size: 100% 100%;
border-bottom-color: var(--forest-700);
}
/* on dark bands */
.live-page .imb-text a, .live-page .ss-checks a, .live-page .split-strip p a:not([class]) {
color: var(--cream-50) !important; --o-link-hl: rgba(167, 189, 169, .16); border-bottom-color: var(--sage-300);
}
.live-page .imb-text a:hover, .live-page .ss-checks a:hover, .live-page .split-strip p a:not([class]):hover { color: var(--cream-50) !important; border-bottom-color: var(--cream-50); }
/* ---------------------------------------------------------------- 2. Headings: an italic accent word, the way the brand writes */
.oluna-display em, .ims-heading em, .jr-heading em { font-style: italic; color: var(--sage-500); font-weight: inherit; }
.split-strip .oluna-display em, .img-band .oluna-display em, .packages-section .oluna-display em { color: var(--sage-300); }
/* ---------------------------------------------------------------- 3. Hero: the photo matches the height of the copy */
.o-hero .page-hero-inner.has-media { align-items: stretch !important; }
.o-hero .page-hero-media { position: relative; min-height: 440px; }
.o-hero .page-hero-media > img {
position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-xl);
}
.o-hero .page-hero-actions { flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
.o-hero .page-hero-media { min-height: 0; aspect-ratio: 4 / 3.4; max-width: 560px; }
}
/* floating UI cards on the homepage photo */
.hero-chip {
position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
padding: 12px 16px 12px 12px; border-radius: 18px; max-width: 250px;
background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 18px 40px -18px rgba(22, 36, 27, .45), 0 2px 6px rgba(22, 36, 27, .06);
animation: o-float 7s ease-in-out infinite;
}
.hero-chip--a { left: -34px; top: 47%; }
.hero-chip--b { right: -26px; bottom: 11%; animation-delay: -3.5s; }
.hc-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-100); color: var(--forest-700); }
.hc-ic.hc-ok { background: var(--forest-700); color: var(--cream-50); }
.hc-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.hc-t b { font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.hc-t small { font-size: 12px; color: var(--text-muted); }
@keyframes o-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 1100px) { .hero-chip--a { left: -12px; } .hero-chip--b { right: -10px; } }
@media (max-width: 600px) { .hero-chip { padding: 8px 12px 8px 8px; max-width: 200px; } .hc-ic { width: 30px; height: 30px; } .hc-t small { font-size: 11px; } .hero-chip--a { left: 10px; top: auto; bottom: 66px; } .hero-chip--b { right: 10px; bottom: 10px; } }
/* ---------------------------------------------------------------- 4. Problem strip: a lead line, then checks; the stat names what it counts */
.o-problem .ss-text { display: flex; flex-direction: column; gap: 22px !important; }
.o-problem .ss-text .ss-lead { margin: 0; }
.ss-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ss-checks li { display: flex; gap: 14px; align-items: flex-start; color: var(--sage-100); font-size: var(--text-lg); line-height: 1.5; }
.ss-ck { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(167, 189, 169, .2); color: var(--sage-200); box-shadow: inset 0 0 0 1px rgba(167, 189, 169, .35); }
.o-stat { display: flex !important; flex-direction: column; gap: 4px; }
.o-stat .sh-value { line-height: .95 !important; }
.o-stat .sh-noun { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.15; color: var(--cream-50); letter-spacing: -0.01em; margin-top: 6px; }
.o-stat .sh-label { margin-top: 8px !important; font-size: var(--text-sm) !important; font-weight: 500 !important; max-width: 26ch; line-height: 1.5; }
.o-stat .sh-source { margin-top: 8px; font-size: 12px; opacity: .9; }
/* ---------------------------------------------------------------- 5. "What's included": checklist left, photo bleeding to the right edge */
.svc-included.inc-bleed { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 !important; background: var(--sage-50); position: relative; overflow: hidden; }
.inc-copy { padding: 96px 64px 96px max(32px, calc((100vw - var(--container-max, 1200px)) / 2 + var(--space-8, 48px))); }
.inc-copy .svc-head { margin-bottom: 30px; }
.inc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inc-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--sage-200); }
.inc-item:first-child { border-top: 1px solid var(--sage-200); }
.inc-ck { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50); }
.inc-text { display: flex; flex-direction: column; gap: 4px; }
.inc-title { font-weight: 600; color: var(--text-strong); font-size: var(--text-base); }
.inc-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; }
.inc-media { position: relative; margin: 0; min-height: 560px; }
.inc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.inc-media .ph-note { position: absolute; left: 14px; top: 14px; }
@media (max-width: 960px) {
.svc-included.inc-bleed { grid-template-columns: 1fr; }
.inc-copy { padding: 56px 20px 40px; }
.inc-media { min-height: 0; aspect-ratio: 4 / 3.6; }
}
/* ---------------------------------------------------------------- 6. Image split: checks, and the float stat carries its noun */
.o-split .ims-list.o-checks li::before { display: none !important; }
.ims-ck { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50); }
.ims-ck svg { width: 12px; height: 12px; }
.o-float strong { display: flex !important; flex-direction: column; gap: 6px; }
.o-float .if-noun { display: block; margin: 0 !important; font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); line-height: 1.15; color: var(--cream-50) !important; letter-spacing: -0.01em; }
.o-float > span { font-size: 13px !important; }
.o-split .ims-media img { transition: transform 1.6s var(--o-ease); }
.o-split:hover .ims-media img { transform: scale(1.025); }
/* ---------------------------------------------------------------- 7. Card CTAs: a short label and a round arrow; the whole card is the link */
.hub-card, .ihg-card, .rel2-card, .pop-card, .rr-card, .sag-card { position: relative; }
.hub-card-link.o-cta, .ihg-card-link.o-cta {
display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
margin-top: auto; padding-top: 18px !important; border-top: 1px solid var(--border-subtle);
font-weight: 600 !important; font-size: var(--text-sm); letter-spacing: 0; color: var(--forest-700) !important; text-decoration: none !important;
}
.o-cta::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.hub-card-link.o-cta > .o-arrow, .ihg-card-link.o-cta > .o-arrow, .o-arrow {
display: inline-flex !important; align-items: center; justify-content: center; flex: none;
width: 38px; height: 38px; max-width: none !important; border-radius: 50%; position: relative;
background: var(--sage-100) !important; color: var(--forest-700); font-size: inherit !important; line-height: 1;
transition: background .35s var(--o-ease), color .35s var(--o-ease), transform .35s var(--o-ease) !important;
}
.hub-card-link.o-cta > .o-arrow::after, .ihg-card-link.o-cta > .o-arrow::after { display: none !important; }
.o-arrow svg { transition: transform .35s var(--o-ease); }
.hub-card:hover .o-cta .o-arrow, .ihg-card:hover .o-cta .o-arrow, .rel2-card:hover .o-arrow, .pop-card:hover .o-arrow, .rr-card:hover .o-arrow, .sag-card:hover .o-arrow {
background: var(--cream-50) !important; color: var(--forest-800);
}
.hub-card:hover .o-arrow svg, .ihg-card:hover .o-arrow svg, .rel2-card:hover .o-arrow svg, .pop-card:hover .o-arrow svg, .rr-card:hover .o-arrow svg, .sag-card:hover .o-arrow svg { transform: translateX(3px); }
.hub-card:hover .o-cta, .ihg-card:hover .o-cta { color: var(--cream-50) !important; border-top-color: rgba(250, 248, 242, .22); }
/* the old "explore …" line-arrow is gone from these cards */
.o-sag .sag-arrow { display: none !important; }
.o-sag { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.o-sag .o-arrow { width: 34px; height: 34px; z-index: 1; }
/* homepage: the packages card spans the rest of the last row (dark, no pill) */
.hub-grid .hub-card--wide {
grid-column: span 2; display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 22px 26px;
background: radial-gradient(120% 140% at 100% 0%, rgba(124, 152, 133, .4), transparent 55%), linear-gradient(150deg, var(--forest-800), var(--forest-700) 60%, var(--forest-600)) !important;
border-color: transparent !important; color: var(--cream-50); padding: var(--space-7) !important;
}
.hub-card--wide::after { display: none !important; }
.hub-card--wide .hcw-ic { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(250, 248, 242, .12); color: var(--cream-50); box-shadow: inset 0 0 0 1px rgba(250, 248, 242, .2); }
.hub-card--wide .hub-card-title { color: var(--cream-50) !important; font-size: var(--text-3xl) !important; margin: 0 0 8px; }
.hub-card--wide .hub-card-text { color: var(--sage-200) !important; margin: 0; max-width: 46ch; }
.hub-card--wide .hub-cta-btn {
grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--radius-md);
background: var(--cream-50); color: var(--forest-800) !important; font-weight: 600; font-size: var(--text-sm); text-decoration: none !important;
box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); transition: transform .25s var(--o-ease), box-shadow .25s;
}
.hub-card--wide .hub-cta-btn::before { content: ""; position: absolute; inset: 0; }
.hub-card--wide .hub-cta-btn:hover { transform: translateY(-2px); }
.hub-card--wide:hover { transform: translateY(-4px); }
@media (max-width: 1024px) { .hub-grid .hub-card--wide { grid-column: span 1; grid-template-columns: 1fr; } .hub-card--wide .hub-cta-btn { grid-column: 1; } }
/* ---------------------------------------------------------------- 8. Stepper: why-it-matters as checks above, an animated visual beside the stage */
.stg2 .stages-inner { padding: 96px var(--space-8, 48px); }
.stg2-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px 64px; align-items: end; margin-bottom: 40px; }
.stg2-intro .stages-heading { margin: 10px 0 14px; }
.stg2-why { background: var(--surface-card, #fff); border: 1px solid var(--sage-200); border-radius: 22px; padding: 24px 26px; box-shadow: 0 16px 36px -26px rgba(22, 36, 27, .35); }
.stg2-why-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); }
.stg2-why-t { margin: 8px 0 14px; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--text-strong); }
.stg2-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stg2-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }
.stg-ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sage-100); color: var(--forest-700); display: inline-flex; align-items: center; justify-content: center; }
.stg-ck svg { width: 12px; height: 12px; }
.stg2 .stages-track { margin-bottom: 26px; }
.stg2-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 28px !important; }
.stg2 .stages-panel { min-height: 340px; }
.stg2 .stg-purpose { font-family: var(--font-display); font-size: var(--text-lg); color: var(--forest-700) !important; line-height: 1.45; margin-bottom: 14px; }
.stg2-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stg2-foot .stages-nav button { border-color: var(--sage-300); background: var(--surface-card, #fff); color: var(--forest-700); }
.stg2-foot .stages-nav button:hover { background: var(--sage-50); border-color: var(--forest-600); }
.stg2-foot .stages-count { color: var(--text-muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.stg2-visual {
position: relative; border-radius: 24px; overflow: hidden; min-height: 400px;
background: radial-gradient(90% 70% at 85% 0%, rgba(203, 218, 201, .75), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(233, 217, 176, .35), transparent 60%), linear-gradient(160deg, #fbfaf5, var(--sage-50));
border: 1px solid var(--sage-200); box-shadow: inset 0 1px 0 #fff, 0 22px 50px -30px rgba(22, 36, 27, .45);
}
.stg2-visual::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(92, 126, 99, .14) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent); pointer-events: none; }
.sv-scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 26px 26px 64px; opacity: 0; visibility: hidden; transition: opacity .45s var(--o-ease), visibility 0s .45s; }
.sv-scene.is-active { opacity: 1; visibility: visible; transition: opacity .55s var(--o-ease) .05s, visibility 0s; }
.sv-svg { width: 100%; height: auto; max-height: 320px; display: block; overflow: visible; }
.sv-cap { position: absolute; left: 26px; bottom: 22px; display: flex; align-items: baseline; gap: 12px; }
.sv-num { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); }
.sv-name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--forest-800); letter-spacing: -0.01em; }
.stg2-progress { position: absolute; left: 26px; right: 26px; bottom: 14px; height: 2px; border-radius: 2px; background: rgba(92, 126, 99, .14); overflow: hidden; opacity: 0; transition: opacity .3s; }
.stg2.is-auto .stg2-progress { opacity: 1; }
.stg2-progress span { display: block; height: 100%; width: 100%; background: var(--forest-600); transform-origin: left; transform: scaleX(0); }
.stg2.is-auto .stg2-progress span { animation: o-prog var(--o-step, 7s) linear forwards; }
@keyframes o-prog { to { transform: scaleX(1); } }
@media (max-width: 960px) {
.stg2-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.stg2-stage { grid-template-columns: 1fr !important; }
.stg2-visual { order: -1; min-height: 300px; }
.stg2 .stages-panel { min-height: 0; }
}
@media (max-width: 860px) { .stg2 .stages-inner { padding: 64px 20px; } }
/* scene motion (only the active scene moves) */
.sv-svg * { transform-box: fill-box; }
.sv-pop, .sv-bar, .sv-grow, .sv-type, .sv-rise, .sv-slide, .sv-chat, .sv-doc, .sv-pulse, .sv-fall, .sv-wave, .sv-blink { transform-origin: center; }
.sv-bar { transform-origin: 50% 100%; }
.sv-grow, .sv-type, .sv-slide { transform-origin: 0% 50%; }
.sv-scene.is-active .sv-pop { animation: sv-pop .6s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-bar { animation: sv-bar .8s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-grow { animation: sv-grow .9s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-type { animation: sv-grow .7s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-slide { animation: sv-grow .8s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-rise { animation: sv-rise .7s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-draw { stroke-dasharray: 1; animation: sv-draw .9s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-draw-slow { animation-duration: 1.8s; }
.sv-scene.is-active .sv-fade { animation: sv-fade 1s var(--o-ease) var(--d, 0ms) both; }
.sv-scene.is-active .sv-spin { animation: sv-spin 40s linear infinite; transform-origin: center; }
.sv-scene.is-active .sv-ring { animation: sv-ring 2.6s ease-out infinite; transform-origin: center; }
.sv-scene.is-active .sv-doc { animation: sv-doc 4.6s var(--o-ease) var(--d, 0ms) infinite both; }
.sv-scene.is-active .sv-mag { animation: sv-mag 5.5s ease-in-out .9s infinite alternate both; }
.sv-scene.is-active .sv-today { animation: sv-mag-far 7s ease-in-out 1.4s infinite alternate both; }
.sv-scene.is-active .sv-wave { animation: sv-wave 1.8s ease-in-out var(--d, 0ms) infinite both; }
.sv-scene.is-active .sv-pulse { animation: sv-pulse 2.2s var(--o-ease) var(--d, 0ms) infinite both; }
.sv-scene.is-active .sv-chat { animation: sv-chat 7s var(--o-ease) var(--d, 0ms) infinite both; }
.sv-scene.is-active .sv-blink { animation: sv-blink 1.2s ease-in-out var(--d, 0ms) infinite both; }
.sv-scene.is-active .sv-fall { animation: sv-fall 3s ease-in var(--d, 0ms) infinite both; }
.sv-scene.is-active .sv-fall-out { animation-name: sv-fall-out; }
.sv-scene.is-active .sv-cursor { animation: sv-cursor 4.5s ease-in-out 1.6s infinite both; }
@keyframes sv-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sv-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sv-grow { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
@keyframes sv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sv-doc { 0% { opacity: 0; transform: translate(0, 0) scale(.9); } 12% { opacity: 1; transform: translate(0, 0) scale(1); } 52% { opacity: 1; transform: translate(0, 0) scale(1); } 86% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
@keyframes sv-mag { from { transform: translateX(0); } to { transform: translateX(196px); } }
@keyframes sv-mag-far { from { transform: translateX(0); } to { transform: translateX(244px); } }
@keyframes sv-wave { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes sv-pulse { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 80% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.2); } }
@keyframes sv-chat { 0% { opacity: 0; transform: translateY(12px); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sv-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes sv-fall { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 85% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(.8); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.5); } }
@keyframes sv-fall-out { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 45% { opacity: 1; transform: translate(calc(var(--tx) * .45), calc(var(--ty) * .45)); } 60% { opacity: 0; transform: translate(calc(var(--tx) * .55), calc(var(--ty) * .55)) scale(.4); } 100% { opacity: 0; transform: translate(calc(var(--tx) * .55), calc(var(--ty) * .55)) scale(.4); } }
@keyframes sv-cursor { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-46px, 36px); } 60% { transform: translate(-46px, 36px) scale(.92); } 70% { transform: translate(-46px, 36px); } }
/* ---------------------------------------------------------------- 9. Proof: stat cards with a picture of the change; charts that grow */
.pf2 .proof-inner { padding-top: 96px; padding-bottom: 96px; }
.pf2-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px !important; border: 0 !important; padding: 0 !important; margin: 34px 0 34px !important; }
.pf2-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf2-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf2-card {
position: relative; display: flex !important; flex-direction: column; align-items: flex-start !important; text-align: left !important; gap: 14px !important;
background: var(--surface-card, #fff); border: 1px solid var(--border-subtle); border-radius: 22px; padding: 26px 26px 24px !important;
box-shadow: 0 1px 2px rgba(22, 36, 27, .05), 0 18px 40px -30px rgba(22, 36, 27, .35); overflow: hidden;
transition: transform .4s var(--o-ease), box-shadow .4s var(--o-ease);
}
.pf2-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--forest-700), var(--sage-400), var(--gold-500)); opacity: .9; }
.pf2-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22, 36, 27, .06), 0 26px 50px -28px rgba(22, 36, 27, .45); }
.pf2-card .svc-stat-value { justify-content: flex-start !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 4vw, 3.4rem) !important; line-height: 1; color: var(--forest-800); letter-spacing: -0.02em; }
.pf2-card .svc-stat-unit { font-size: .46em !important; font-style: italic; color: var(--sage-500) !important; }
.pf2-card .svc-stat-label { max-width: none !important; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; text-align: left; margin: 0; }
.o-viz { display: block; width: 100%; }
.o-viz-none { height: 4px; }
.o-viz-bars { display: grid; gap: 8px; }
.o-bar { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; }
.o-bar-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.o-bar-track { height: 10px; border-radius: 6px; background: var(--sage-50); overflow: hidden; }
.o-bar-fill { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--forest-700), var(--forest-600)); transform-origin: left; }
.o-bar-fill.is-before { background: var(--sage-300); }
.o-anim .pf2-card:not(.o-seen) .o-bar-fill { transform: scaleX(0); }
.o-anim .pf2-card .o-bar-fill { transition: transform 1.2s var(--o-ease) .3s; }
.o-anim .pf2-card .o-bar-fill.is-before { transition-delay: .1s; }
.o-viz-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.o-dot { width: 22px; height: 22px; border-radius: 7px; background: var(--sage-50); box-shadow: inset 0 0 0 1.5px var(--sage-300); transition: background .4s var(--o-ease) calc(var(--i) * 140ms + .3s), box-shadow .4s; }
.o-dot.on, .pf2-card.o-seen .o-dot, html:not(.o-anim) .o-dot { background: var(--forest-700); box-shadow: none; }
.o-viz-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.o-ring { stroke-dasharray: var(--p) 100; }
.o-anim .pf2-card:not(.o-seen) .o-ring { stroke-dasharray: 0 100; }
.o-anim .o-ring { transition: stroke-dasharray 1.4s var(--o-ease) .3s; }
.pf2-body { gap: 22px !important; }
.pf2-case { border-radius: 22px !important; }
@media (max-width: 900px) { .pf2-row, .pf2-row--2, .pf2-row--3, .pf2-row--4 { grid-template-columns: 1fr !important; } .pf2 .proof-inner { padding-top: 64px; padding-bottom: 64px; } }
/* charts: bars rise, values follow */
.o-chart .fch-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.o-anim .o-chart:not(.o-seen) .fch-bar { transform: scaleY(0); }
.o-anim .o-chart .fch-bar { transition: transform 1.1s var(--o-ease) var(--d, 0ms); }
.o-anim .o-chart:not(.o-seen) .fch-val { opacity: 0; }
.o-anim .o-chart .fch-val { transition: opacity .5s var(--o-ease) var(--d, 0ms); }
/* ---------------------------------------------------------------- 10. Quote band: the person behind the words, and a slow ambient glow */
.fwb-person { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px auto 0; text-align: center; }
.fwb-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(250, 248, 242, .16), 0 10px 24px -10px rgba(0, 0, 0, .5); }
.fwb-who { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fwb-who b { color: var(--cream-50); font-weight: 600; font-size: var(--text-base); }
.fwb-who small { color: var(--sage-300); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.fw-band, .split-strip, .img-band, .packages-section { isolation: isolate; }
.fw-band::before, .split-strip::before {
content: ""; position: absolute; z-index: 0; width: 70vmax; height: 70vmax; left: -20vmax; top: -40vmax; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(124, 152, 133, .2), transparent 70%); animation: o-drift 22s ease-in-out infinite alternate;
}
@keyframes o-drift { from { transform: translate(0, 0); } to { transform: translate(30vmax, 18vmax); } }
/* ---------------------------------------------------------------- 11. Who this is for: checks + population photo cards + levels of care */
.who2 { background: var(--sage-50) !important; }
.who2-inner { padding-top: 96px !important; padding-bottom: 96px !important; display: flex !important; flex-direction: column; gap: 72px; }
.who2-top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: center; }
.who2-heading { font-size: var(--text-4xl); margin: 10px 0 14px; }
.who2-lede { margin: 0; color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 40ch; }
.who2-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.who2-item { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-card, #fff); border: 1px solid var(--sage-200); border-radius: 18px; padding: 20px 20px; font-size: var(--text-base); font-weight: 500; color: var(--text-strong); line-height: 1.5; box-shadow: 0 12px 30px -26px rgba(22, 36, 27, .35); }
.who2-ck { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50); }
.who2-spec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.who2-spec-heading { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); color: var(--text-strong); letter-spacing: -0.01em; }
.who2-spec-head p { margin: 0; color: var(--text-muted); max-width: 52ch; }
@media (max-width: 960px) { .who2-top { grid-template-columns: 1fr; } .who2-inner { gap: 52px; padding-top: 64px !important; padding-bottom: 64px !important; } }
@media (max-width: 640px) { .who2-list { grid-template-columns: 1fr; } }
.pop-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pop-card { display: block; aspect-ratio: 4 / 5.2; border-radius: 22px; overflow: hidden; text-decoration: none !important; color: var(--cream-50); background: var(--forest-800);
box-shadow: 0 18px 40px -26px rgba(22, 36, 27, .55); transition: transform .45s var(--o-ease), box-shadow .45s var(--o-ease); }
.pop-media, .pop-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pop-media img { object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--o-ease); }
.pop-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 36, 27, 0) 35%, rgba(22, 36, 27, .55) 62%, rgba(22, 36, 27, .9) 100%); }
.pop-body { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.pop-name { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; color: var(--cream-50); letter-spacing: -0.01em; }
.pop-line { font-size: 13px; line-height: 1.45; color: var(--sage-100); }
.pop-card .o-arrow { position: absolute; right: 14px; top: 14px; background: rgba(250, 248, 242, .9) !important; }
.pop-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -24px rgba(22, 36, 27, .6); }
.pop-card:hover .pop-media img { transform: scale(1.05); }
@media (max-width: 1100px) { .pop-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.pop-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 4px 20px 12px; scrollbar-width: none; }
.pop-row::-webkit-scrollbar { display: none; }
.pop-card { flex: 0 0 68%; scroll-snap-align: start; }
}
.lvl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.lvl-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-500); margin-right: 6px; }
.lvl-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--surface-card, #fff); border: 1px solid var(--sage-200); color: var(--forest-700) !important; font-size: var(--text-sm); font-weight: 500; text-decoration: none !important; transition: background .2s, border-color .2s; }
a.lvl-chip:hover { background: var(--sage-100); border-color: var(--sage-300); }
/* ---------------------------------------------------------------- 12. In depth / working together: numbered rows + a dark fit band */
.ed2 { background: var(--cream-50); position: relative; }
.ed2-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 96px var(--space-8, 48px); }
.ed2-head { max-width: 760px; margin-bottom: 36px; }
.ed2-head .editorial-heading { font-size: var(--text-4xl); margin: 10px 0 0; }
.ed2-rows { border-top: 1px solid var(--border-default); }
.ed2-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 16px 64px; padding: 34px 0; border-bottom: 1px solid var(--border-subtle); }
.ed2-k { display: flex; gap: 18px; align-items: baseline; }
.ed2-n { font-family: var(--font-display); font-size: var(--text-lg); color: var(--sage-400); font-variant-numeric: tabular-nums; }
.ed2-k h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.25; color: var(--text-strong); letter-spacing: -0.01em; }
.ed2-text { color: var(--text-body); font-size: var(--text-base); line-height: 1.75; }
.ed2-text p { margin: 0 0 14px; }
.ed2-text p:last-child { margin-bottom: 0; }
.ed2-text ul { margin: 0 0 14px; padding-left: 20px; }
.ed2-text strong { color: var(--text-strong); }
.ed2-fit {
margin-top: 56px; border-radius: 28px; padding: 40px 44px; color: var(--cream-50); position: relative; overflow: hidden;
display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px 44px; align-items: center;
background: radial-gradient(90% 120% at 100% 0%, rgba(124, 152, 133, .38), transparent 55%), linear-gradient(150deg, var(--forest-900), var(--forest-800) 55%, var(--forest-700));
box-shadow: 0 30px 60px -36px rgba(22, 36, 27, .7);
}
.ed2-fit::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 220px; height: 220px; background: var(--cream-50); opacity: .05; -webkit-mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat; mask: url(/assets/oluna-logo-mark.png) center/contain no-repeat; transform: rotate(-8deg); }
.ed2-fit-copy h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); color: var(--cream-50); line-height: 1.15; }
.ed2-fit-copy p { margin: 0; color: var(--sage-200); font-size: var(--text-sm); line-height: 1.6; }
.ed2-fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ed2-fit-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); color: var(--sage-100); line-height: 1.5; }
.ed2-fit-list .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(167, 189, 169, .22); color: var(--sage-200); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ed2-fit-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; position: relative; z-index: 1; }
.ed2 .editorial-note { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sage-200) !important; display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.ed2 .editorial-note strong { color: var(--cream-50) !important; display: block; }
.ed2 .editorial-note svg { flex: none; color: var(--sage-300); margin-top: 2px; }
.o-btn-light {
display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-md); background: var(--cream-50); color: var(--forest-800) !important;
font-weight: 600; font-size: var(--text-sm); text-decoration: none !important; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55); transition: transform .25s var(--o-ease), box-shadow .25s;
}
.o-btn-light svg { transition: transform .25s var(--o-ease); }
.o-btn-light:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .6); }
.o-btn-light:hover svg { transform: translateX(3px); }
@media (max-width: 1000px) { .ed2-fit { grid-template-columns: 1fr 1fr; } .ed2-fit-copy { grid-column: 1 / -1; } }
@media (max-width: 860px) {
.ed2-inner { padding: 64px 20px; }
.ed2-row { grid-template-columns: 1fr; padding: 26px 0; }
.ed2-fit { grid-template-columns: 1fr; padding: 30px 24px; }
.ed2-head .editorial-heading { font-size: var(--text-3xl); }
}
/* ---------------------------------------------------------------- 13. FAQ: heading and the ask on the left, the questions on the right */
.faq2 { background: var(--sage-50); position: relative; }
.faq2-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 96px var(--space-8, 48px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 40px 72px; align-items: start; }
.faq2-side { position: sticky; top: 110px; }
.faq2-heading { font-size: var(--text-4xl) !important; margin: 10px 0 14px !important; text-align: left !important; }
.faq2-lede { margin: 0 0 26px; color: var(--text-muted); line-height: 1.6; }
.faq2-ask { display: grid; grid-template-columns: auto 1fr; gap: 14px 14px; background: var(--surface-card, #fff); border: 1px solid var(--sage-200); border-radius: 20px; padding: 20px; box-shadow: 0 16px 36px -28px rgba(22, 36, 27, .4); }
.faq2-ask-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-100); color: var(--forest-700); }
.faq2-ask-t { display: flex; flex-direction: column; gap: 3px; }
.faq2-ask-t b { color: var(--text-strong); font-weight: 600; }
.faq2-ask-t span { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.faq2-btn { grid-column: 1 / -1; justify-self: start; padding: 12px 20px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--cream-50) !important; text-decoration: none !important; }
.faq2-list { display: flex; flex-direction: column; gap: 12px; }
.faq2-item { background: var(--surface-card, #fff); border: 1px solid var(--sage-200); border-radius: 18px; transition: border-color .25s, box-shadow .3s; }
.faq2-item[open] { border-color: var(--sage-300); box-shadow: 0 16px 36px -28px rgba(22, 36, 27, .45); }
.faq2-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; }
.faq2-item summary::-webkit-details-marker { display: none; }
.faq2-q { font-weight: 600; color: var(--text-strong); font-size: var(--text-base); line-height: 1.45; }
.faq2-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-50); color: var(--forest-700); box-shadow: inset 0 0 0 1px var(--sage-200); transition: transform .35s var(--o-ease), background .25s, color .25s; }
.faq2-item[open] .faq2-ic { transform: rotate(45deg); background: var(--forest-700); color: var(--cream-50); box-shadow: none; }
.faq2-item summary:hover .faq2-ic { background: var(--sage-100); }
.faq2-a { padding: 0 22px 22px; }
.faq2-a p { margin: 0; color: var(--text-body); line-height: 1.7; font-size: var(--text-base); }
.faq2-item[open] .faq2-a { animation: o-rise .45s var(--o-ease) both; }
@media (max-width: 900px) { .faq2-inner { grid-template-columns: 1fr; padding: 64px 20px; gap: 28px; } .faq2-side { position: static; } .faq2-heading { font-size: var(--text-3xl) !important; } }
/* ---------------------------------------------------------------- 14. Related ("Often paired with", "We also serve"): one row, no orphan */
.rel2 { background: var(--cream-50); }
.rel2-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 72px var(--space-8, 48px); }
.rel2-heading { margin: 0 0 22px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); font-family: var(--font-sans); }
.rel2-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rel2-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 20px; border-radius: 20px; background: var(--surface-card, #fff); border: 1px solid var(--border-subtle);
text-decoration: none !important; color: inherit; box-shadow: 0 12px 30px -26px rgba(22, 36, 27, .4); transition: transform .35s var(--o-ease), box-shadow .35s, border-color .35s, background .35s; }
.rel2-card:hover { transform: translateY(-3px); border-color: var(--forest-700); background: var(--forest-700); box-shadow: 0 22px 44px -26px rgba(22, 36, 27, .6); }
.rel2-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50); transition: background .35s; }
.rel2-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel2-name { font-weight: 600; color: var(--text-strong); transition: color .35s; }
.rel2-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; transition: color .35s; }
.rel2-card:hover .rel2-name { color: var(--cream-50); }
.rel2-card:hover .rel2-desc { color: var(--sage-200); }
.rel2-card:hover .rel2-icon { background: rgba(250, 248, 242, .14); }
.rel2-card--dark { background: linear-gradient(150deg, var(--forest-800), var(--forest-700)); border-color: transparent; }
.rel2-card--dark .rel2-name { color: var(--cream-50); }
.rel2-card--dark .rel2-desc { color: var(--sage-200); }
.rel2-card--dark .rel2-icon { background: rgba(250, 248, 242, .14); }
.rel2-card--dark .o-arrow { background: var(--cream-50) !important; }
@media (max-width: 860px) { .rel2-inner { padding: 56px 20px; } }
/* ---------------------------------------------------------------- 15. Reading cards + bylines (every blog card carries its author) */
.o-rr .rr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rr-all { font-weight: 600; font-size: var(--text-sm); color: var(--forest-700) !important; text-decoration: none !important; }
.rr-all span { display: inline-block; transition: transform .25s var(--o-ease); }
.rr-all:hover span { transform: translateX(4px); }
.o-rr .rr-card { box-shadow: 0 16px 38px -30px rgba(22, 36, 27, .45); transition: transform .4s var(--o-ease), box-shadow .4s; }
.o-rr .rr-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(22, 36, 27, .5); }
.rr-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rr-foot .o-arrow { width: 34px; height: 34px; }
.o-rr .rr-row--1 { grid-template-columns: 1fr !important; }
.o-rr .rr-row--1 .rr-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.o-rr .rr-row--1 .rr-media { aspect-ratio: auto; min-height: 320px; }
.o-rr .rr-row--1 .rr-body { padding: 36px; justify-content: center; }
.o-rr .rr-row--1 .rr-title { font-size: var(--text-3xl); }
.o-byline { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ob-avs { display: inline-flex; flex: none; }
.ob-avs img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cream-50); background: var(--sage-100); }
.ob-avs img + img { margin-left: -9px; }
.ob-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ob-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.ob-sub { font-size: 12px; color: var(--text-muted); }
.pc-byline, .fc-byline { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); width: 100%; }
@media (max-width: 900px) { .o-rr .rr-row--1 .rr-card { grid-template-columns: 1fr; } .o-rr .rr-row--1 .rr-media { min-height: 0; aspect-ratio: 3 / 2; } .o-rr .rr-row--1 .rr-body { padding: 22px; } }
/* ---------------------------------------------------------------- 16. Dark band list: whole rows are the links (no underlines), plus a button */
.o-band .imb-list a.il-link, .o-band .imb-list a.il-link * { text-decoration: none !important; background-image: none !important; border-bottom: 0 !important; }
.o-band .il-arrow { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(250, 248, 242, .1); color: var(--sage-200); transition: background .3s, color .3s, transform .3s var(--o-ease); }
.o-band .imb-list a.il-link:hover .il-arrow { background: var(--cream-50); color: var(--forest-800); transform: translateX(2px); }
.o-band .imb-cta { margin-top: 28px; }
/* ---------------------------------------------------------------- 17. Toolkit strip: every service on one row (no lone tile on a second line) */
.fss-row { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px !important; }
.fss-row > .fss-chip { flex: 1 1 140px; max-width: 168px; }
@media (max-width: 700px) { .fss-row > .fss-chip { flex: 1 1 40%; max-width: none; } }
/* ---------------------------------------------------------------- 18. Homepage: the journey from first search to signed admission */
.journey { background: linear-gradient(180deg, var(--cream-50), var(--sage-50)); position: relative; overflow: hidden; }
.jr-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 104px var(--space-8, 48px); }
.jr-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.jr-heading { font-size: var(--text-4xl); margin: 10px 0 14px; }
.jr-lede { margin: 0 auto; color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 60ch; }
.jr-track { position: relative; }
.jr-line { position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: repeating-linear-gradient(90deg, var(--sage-300) 0 6px, transparent 6px 12px); }
.jr-glow { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 6px rgba(184, 146, 78, .18), 0 0 22px 4px rgba(184, 146, 78, .45); animation: jr-travel 6.5s var(--o-ease) infinite; }
@keyframes jr-travel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
.jr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; }
.jr-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.jr-ic { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-card, #fff); color: var(--forest-700); border: 1.5px solid var(--sage-300); box-shadow: 0 14px 30px -18px rgba(22, 36, 27, .4); position: relative; z-index: 1; transition: background .4s, color .4s, transform .4s var(--o-ease); }
.jr-step:last-child .jr-ic { background: var(--forest-700); color: var(--cream-50); border-color: var(--forest-700); }
.jr-step:hover .jr-ic { transform: translateY(-3px); }
.jr-k { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--sage-500); }
.jr-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--text-strong); line-height: 1.2; }
.jr-text { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; max-width: 24ch; }
.o-anim .jr-step { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--o-ease) calc(var(--i) * 140ms), transform .7s var(--o-ease) calc(var(--i) * 140ms); }
.o-anim .jr-track.o-in .jr-step { opacity: 1; transform: none; }
.jr-cta { margin-top: 56px; display: flex; justify-content: center; }
.jr-cta .oluna-cta { padding: 15px 26px; border-radius: var(--radius-md); color: var(--cream-50); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) {
.jr-inner { padding: 72px 20px; }
.jr-head { text-align: left; margin-bottom: 40px; }
.jr-steps { grid-template-columns: 1fr; gap: 26px; }
.jr-step { display: grid; grid-template-columns: 64px 1fr; text-align: left; align-items: start; gap: 4px 18px; }
.jr-ic { grid-row: span 3; }
.jr-k { margin: 0; }
.jr-text { max-width: none; }
.jr-line { left: 31px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--sage-300) 0 6px, transparent 6px 12px); }
.jr-glow { left: -5px; animation: jr-travel-v 6.5s var(--o-ease) infinite; }
@keyframes jr-travel-v { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 12px); opacity: 0; } }
}
/* homepage odds and ends */
.home-lede { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-relaxed); }
.home-about .home-about-link { color: var(--cream-50); }
/* ---------------------------------------------------------------- 19. Small global polish */
.oluna-cta { background-color: var(--forest-700) !important; transition: background-position .7s var(--o-ease), transform .25s var(--o-ease), box-shadow .3s var(--o-ease) !important; }
html .oluna-cta:hover, html button[type="submit"]:hover {
background-color: var(--forest-700) !important;
background-image: linear-gradient(135deg, var(--forest-800) 0%, var(--forest-700) 34%, var(--forest-600) 55%, var(--forest-550, #476b4f) 72%, var(--sage-400) 100%) !important;
background-size: 260% 260% !important;
background-position: 100% 100% !important;
border-color: var(--forest-600) !important;
box-shadow: 0 16px 32px -14px rgba(43, 69, 52, .55) !important;
}
.svc-head .svc-heading, .proof-heading, .hub-heading, .ihg-heading, .rr-heading, .stages-heading { letter-spacing: -0.015em; }
.trust-quote figcaption { text-transform: none !important; letter-spacing: .02em !important; }
.process-card .process-num { font-family: var(--font-display); }
.o-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.o-hero .page-hero-content > *, .o-hero .page-hero-media, .hero-chip, .jr-glow, .fw-band::before, .split-strip::before { animation: none !important; }
.sv-scene .sv-svg *, .sv-scene.is-active .sv-svg * { animation: none !important; }
.sv-draw { stroke-dasharray: none !important; }
}
/* ---------------------------------------------------------------- 20. Homepage sections */
.o-who { background: var(--cream-50); position: relative; overflow: hidden; }
.ow-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 96px var(--space-8, 48px); }
.ow-head { max-width: 760px; margin-bottom: 40px; }
.ow-heading { font-size: var(--text-4xl); margin: 10px 0 14px; }
.ow-head .home-lede { margin: 0; }
.o-about p { border-left: 0 !important; padding-left: 0 !important; }
.o-about p:first-of-type { font-family: var(--font-display); font-size: var(--text-2xl) !important; line-height: 1.35 !important; color: var(--cream-50) !important; }
.o-about #about-media { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6) !important; }
.o-why #why-stats > div { transition: transform .4s var(--o-ease); }
@media (max-width: 860px) { .ow-inner { padding: 64px 20px; } .ow-heading { font-size: var(--text-3xl); } }
/* photo variant of the strip keeps its narrative paragraphs */
.o-problem.has-photo .ss-text p { margin: 0; }
.o-problem.has-photo .ss-text p + p { margin-top: 14px; }
/* the reading row's head: eyebrow + heading on the left, "All articles" on the right */
.o-rr .rr-head > div { min-width: 0; }
.o-rr .rr-head .rr-all { margin-bottom: 6px; }
/* every section on one content edge (48px gutters like the template sections) */
.rr.o-rr { padding: 96px 0; }
.o-rr .rr-inner { padding-left: var(--space-8, 48px); padding-right: var(--space-8, 48px); }
@media (max-width: 900px) { .rr.o-rr { padding: 64px 20px; } .o-rr .rr-inner { padding-left: 0; padding-right: 0; } }
/* the float's number keeps its display size (an old rule styles every span inside the float) */
.o-float .o-num { display: block; font-size: inherit !important; margin: 0 !important; color: var(--cream-50) !important; line-height: 1; }
/* who-for keeps the page gutters */
.who2-inner { max-width: var(--container-max, 1200px) !important; margin: 0 auto !important; padding-left: var(--space-8, 48px) !important; padding-right: var(--space-8, 48px) !important; box-sizing: border-box; }
@media (max-width: 860px) { .who2-inner { padding-left: 20px !important; padding-right: 20px !important; } }
/* headings break into balanced lines (no lone "purpose." on its own line) */
.oluna-display, .ims-heading, .jr-title, .ed2-k h3, .who2-spec-heading, .pop-name { text-wrap: balance; }
.page-hero-lede, .hub-lede, .ihg-lede, .jr-lede, .stages-lede, .who2-lede, .home-lede { text-wrap: pretty; }
/* blog feed: the grid under the featured post fills the row whatever the count (never an empty slot) */
.live-page .bf-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
/* ================================================================
v17, round 2 (operator's second review, 2026-10-12)
================================================================ */
/* ---- Working with Oluna / In depth: a dark panel (photo at low opacity) with the fit check; numbered rows beside it */
.ed3 { display: grid !important; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); background: var(--cream-50); position: relative; }
.ed3-panel { position: relative; overflow: hidden; color: var(--cream-50);
background: radial-gradient(90% 60% at 0% 0%, rgba(92, 126, 99, .45), transparent 60%), linear-gradient(160deg, var(--forest-900), var(--forest-800) 60%, var(--forest-700)); }
.ed3-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; mix-blend-mode: luminosity; pointer-events: none; }
.ed3-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 36, 27, .2), rgba(22, 36, 27, .55)); pointer-events: none; }
.ed3-panel-inner { position: sticky; top: 90px; z-index: 1; padding: 96px 56px 96px max(32px, calc((100vw - var(--container-max, 1200px)) / 2 + var(--space-8, 48px))); }
.ed3-panel .oluna-eyebrow { color: var(--sage-300) !important; }
.ed3-panel .editorial-heading { color: var(--cream-50); font-size: var(--text-4xl); margin: 10px 0 30px; }
.ed3-fit { border-top: 1px solid rgba(250, 248, 242, .16); padding-top: 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ed3-fit h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--cream-50); }
.ed3-fit > p { margin: 0; color: var(--sage-200); font-size: var(--text-sm); line-height: 1.6; }
.ed3-fit-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 11px; }
.ed3-fit-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); color: var(--sage-100); line-height: 1.5; }
.ed3-fit-list .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(167, 189, 169, .22); color: var(--sage-200); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ed3 .editorial-note { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sage-200) !important; display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.ed3 .editorial-note strong { color: var(--cream-50) !important; display: block; }
.ed3 .editorial-note svg { flex: none; color: var(--sage-300); margin-top: 2px; }
.ed3-rows { padding: 80px max(32px, calc((100vw - var(--container-max, 1200px)) / 2 + var(--space-8, 48px))) 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.ed3-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 22px; padding: 30px 0; border-bottom: 1px solid var(--border-subtle); }
.ed3-row:last-child { border-bottom: 0; }
.ed3-k { display: contents; }
.ed3-n { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--forest-700), var(--forest-600)); color: var(--cream-50); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .02em;
box-shadow: 0 12px 24px -14px rgba(43, 69, 52, .7), inset 0 1px 0 rgba(255, 255, 255, .15); }
.ed3-n--blank { visibility: hidden; }
.ed3-row h3 { margin: 4px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.2; color: var(--text-strong); letter-spacing: -0.01em; }
.ed3-text { grid-column: 2; }
.o-anim .ed3-row:not(.o-in) .ed3-n { transform: scale(.6); opacity: 0; }
.ed3-row .ed3-n { transition: transform .6s var(--o-ease) .15s, opacity .6s var(--o-ease) .15s; }
@media (max-width: 960px) {
.ed3 { grid-template-columns: 1fr; }
.ed3-panel-inner { position: static; padding: 64px 20px 56px; }
.ed3-rows { padding: 40px 20px 56px; }
.ed3-panel .editorial-heading { font-size: var(--text-3xl); }
}
@media (max-width: 560px) { .ed3-row { grid-template-columns: 1fr; } .ed3-n { grid-row: auto; width: 44px; height: 44px; border-radius: 13px; margin-bottom: 8px; } .ed3-text { grid-column: 1; } }
/* ---- Levels of care: a continuum track */
.lvl2 { margin-top: 28px; background: var(--surface-card, #fff); border: 1px solid var(--sage-200); border-radius: 22px; padding: 24px 28px 22px; box-shadow: 0 16px 36px -30px rgba(22, 36, 27, .4); }
.lvl2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.lvl2-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); }
.lvl2-sub { font-size: var(--text-sm); color: var(--text-muted); }
.lvl2-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.lvl2-line { position: absolute; left: calc(50% / var(--n, 6)); right: calc(50% / var(--n, 6)); top: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--forest-700), var(--sage-400), var(--gold-500)); transform-origin: left; }
.o-anim .lvl2:not(.o-in) .lvl2-line { transform: scaleX(0); }
.lvl2-line { transition: transform 1.4s var(--o-ease) .2s; }
.lvl2-track li { position: relative; display: flex; justify-content: center; }
.lvl2-track a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none !important; color: var(--text-strong) !important; padding: 0 4px; }
.lvl2-dot { width: 21px; height: 21px; border-radius: 50%; background: var(--surface-card, #fff); border: 3px solid var(--forest-700); box-shadow: 0 0 0 5px var(--sage-50); transition: background .25s, transform .3s var(--o-ease); }
.o-anim .lvl2:not(.o-in) .lvl2-dot { transform: scale(0); }
.lvl2 .lvl2-dot { transition: transform .5s var(--o-ease) calc(.25s + var(--i, 0) * .14s), background .25s; }
.lvl2-track li { --i: 0; }
.lvl2-name { font-size: var(--text-sm); font-weight: 600; text-align: center; line-height: 1.3; }
.lvl2-track a:hover .lvl2-dot { background: var(--forest-700); }
.lvl2-track a:hover .lvl2-name { color: var(--forest-700); }
.lvl2-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); width: 100%;
font-size: var(--text-sm); font-weight: 600; color: var(--forest-700) !important; text-decoration: none !important; }
.lvl2-more svg { transition: transform .25s var(--o-ease); }
.lvl2-more:hover svg { transform: translateX(4px); }
@media (max-width: 700px) {
.lvl2 { padding: 20px; }
.lvl2-track { grid-template-columns: 1fr; gap: 14px; padding-left: 4px; }
.lvl2-line { left: 13px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: linear-gradient(180deg, var(--forest-700), var(--sage-400), var(--gold-500)); transform-origin: top; }
.o-anim .lvl2:not(.o-in) .lvl2-line { transform: scaleY(0); }
.lvl2-track li { justify-content: flex-start; }
.lvl2-track a { flex-direction: row; gap: 14px; }
}
/* ---- Reviews: richer cards */
.rvm .rvm-card {
position: relative; overflow: hidden; border-radius: 24px !important; border: 1px solid var(--sage-200) !important;
background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--sage-50) 100%) !important; padding: 30px 28px 24px !important;
box-shadow: 0 1px 2px rgba(22, 36, 27, .05), 0 22px 44px -34px rgba(22, 36, 27, .5) !important; gap: 16px !important;
}
.rvm .rvm-card::before { content: "\201C"; position: absolute; right: 20px; top: -12px; font-family: var(--font-display); font-size: 140px; line-height: 1; color: var(--sage-100); pointer-events: none; }
.rvm .rvm-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--forest-700), var(--sage-400), var(--gold-500)); }
.rvm .rvm-cstars { position: relative; font-size: 17px !important; letter-spacing: 4px !important; }
.rvm .rvm-card blockquote { position: relative; font-family: var(--font-display); font-size: 1.12rem !important; line-height: 1.55 !important; color: var(--ink-800, #353b34) !important; letter-spacing: -0.003em; }
.rvm .rvm-card figcaption { border-top: 1px solid var(--sage-100) !important; }
.rvm .rvm-avatar { width: 46px !important; height: 46px !important; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--sage-200) !important; }
.rvm .rvm-name { font-size: var(--text-base) !important; }
.rvm .rvm-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22, 36, 27, .06), 0 30px 54px -32px rgba(22, 36, 27, .55) !important; }
/* ---- The founders, as faces: contact blocks and the FAQ ask card */
.o-faces { display: inline-flex; flex: none; }
.o-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cream-50); background: var(--sage-100); }
.o-faces img + img { margin-left: -12px; }
.cf-founders { display: flex; align-items: center; gap: 14px; margin: 22px 0 26px; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--surface-card, #fff); border: 1px solid var(--sage-200); box-shadow: 0 14px 30px -26px rgba(22, 36, 27, .45); max-width: 440px; }
.cf-founders .o-faces img { box-shadow: 0 0 0 3px #fff; }
.cff-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cff-t b { font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.cff-t small { font-size: 13px; color: var(--text-muted); }
.faq2-faces { grid-row: span 1; align-self: center; }
.faq2-faces img { width: 38px; height: 38px; box-shadow: 0 0 0 3px #fff; }
.faq2-ask { grid-template-columns: auto 1fr !important; align-items: center; }
/* ---- Industries hub: the populations as photo cards (3 across, the "not listed?" card completes the grid) */
.pop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pop-grid .pop-card { aspect-ratio: 4 / 4.4; }
.pop-grid .pop-name { font-size: var(--text-3xl); }
.pop-grid .pop-line { font-size: var(--text-sm); max-width: 32ch; }
.pop-grid .pop-cta { display: flex; flex-direction: column; justify-content: center; border-radius: 22px !important; padding: 34px !important; }
@media (max-width: 1000px) { .pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pop-grid { grid-template-columns: 1fr; } .pop-grid .pop-card { aspect-ratio: 4 / 3.6; } }
/* ---- Four-step process: boxed numbers and a connector that draws in */
.process-grid { position: relative; }
.process-grid::before { content: ""; position: absolute; left: 4%; right: 4%; top: 58px; height: 2px; z-index: 0;
background: repeating-linear-gradient(90deg, var(--sage-300) 0 6px, transparent 6px 12px); transform-origin: left; transition: transform 1.6s var(--o-ease) .2s; }
.o-anim .process-grid:not(.o-in)::before { transform: scaleX(0); }
.process-card { position: relative; z-index: 1; }
.process-card .process-num {
display: inline-flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px;
background: linear-gradient(150deg, var(--forest-700), var(--forest-600)) !important; color: var(--cream-50) !important;
font-family: var(--font-display) !important; font-size: 1.25rem !important; line-height: 1 !important; letter-spacing: .02em;
box-shadow: 0 12px 24px -14px rgba(43, 69, 52, .7), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.process-card:hover .process-num { background: var(--cream-50) !important; color: var(--forest-800) !important; }
@media (max-width: 900px) { .process-grid::before { display: none; } }
/* ---- the team photo (homepage about band, About hero): faces sit high with room above */
.o-about #about-media img { object-position: 50% 35% !important; }
/* the "not listed?" tile keeps its dark gradient in the photo grid */
.pop-grid .hub-card--cta {
background: radial-gradient(120% 90% at 100% 0%, rgba(124, 152, 133, .38), transparent 55%), linear-gradient(160deg, var(--forest-800) 0%, var(--forest-700) 55%, var(--forest-600) 100%) !important;
border: 0 !important; box-shadow: 0 18px 40px -26px rgba(22, 36, 27, .55) !important;
}
.pop-grid .hub-card--cta::after { display: none !important; }
.pop-grid .hub-card--cta .oluna-eyebrow { color: var(--sage-300) !important; }
.pop-grid .hub-card--cta .ihg-card-title { color: var(--cream-50) !important; font-size: var(--text-3xl) !important; }
.pop-grid .hub-card--cta .ihg-card-text { color: var(--sage-200) !important; }
.pop-grid .hub-card--cta:hover { transform: translateY(-4px); }
/* the narrative strip (light) reads at full strength */
.o-problem.has-photo .ss-text p { color: var(--ink-800, #353b34) !important; opacity: 1 !important; }
/* ================================================================
Oluna flair v18 — 2026-10-12, the operator's third review
More motion, more people, less plain: the hero's live dashboard cards, the results band and logo wall,
the continuum of care as searches, one featured review at a time, the scroll-driven "how it works"
story, single-line quote attribution, compact blog tags with bylines aligned at the bottom, a
readable "working with Oluna" panel that stays put while the rows scroll, headings that reveal word by
word, photos that wipe in, a reading-progress line, and no orphaned last words.
================================================================ */
/* ---------------------------------------------------------------- 0. type: no lonely last words */
.live-page p, .live-page li, .live-page blockquote, .live-page figcaption { text-wrap: pretty; }
/* short lead lines balance (operator: "Marketing is just the part we're good at." left "good at." alone) */
.o-about p, .ss-lead, .rs-lede, .story-lede, .lvl3-lede, .ims-text, .hub-lede, .ihg-lede, .rv3-q blockquote, .fw-band blockquote, .page-hero-lede, .stages-lede { text-wrap: balance; }
/* ---------------------------------------------------------------- 1. hero: the strategist's dashboard events */
.hero-ui { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hui {
position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px;
background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 24px 48px -24px rgba(22, 36, 27, .55), 0 2px 6px rgba(22, 36, 27, .06);
animation: hui-in .9s var(--o-ease) var(--d, .5s) backwards, hui-float 8s ease-in-out calc(var(--d, .5s) + 1.2s) infinite;
}
.hui-a { --d: .6s; left: -40px; top: 9%; }
.hui-b { --d: 1.25s; right: -32px; top: 41%; }
.hui-c { --d: 1.9s; left: -40px; bottom: 8%; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 12px; width: 236px; }
@keyframes hui-in { from { opacity: 0; translate: 0 18px; scale: .96; } }
@keyframes hui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hui-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-100); color: var(--forest-700); }
.hui-ic.hui-ok { background: var(--forest-700); color: var(--cream-50); }
.hui-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.hui-t b { font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.hui-t small { font-size: 12px; color: var(--text-muted); }
.hui-live { width: 9px; height: 9px; border-radius: 50%; background: #3f9a5c; margin-left: 4px; box-shadow: 0 0 0 0 rgba(63, 154, 92, .5); animation: hui-ping 2.2s ease-out infinite; }
@keyframes hui-ping { 0% { box-shadow: 0 0 0 0 rgba(63, 154, 92, .45); } 80%, 100% { box-shadow: 0 0 0 10px rgba(63, 154, 92, 0); } }
.huic-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-500); }
.huic-bars { display: flex; align-items: flex-end; gap: 12px; height: 78px; padding-bottom: 18px; position: relative; }
.huic-bar { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--forest-600), var(--forest-700));
transform-origin: bottom; animation: huic-grow 1s var(--o-ease) calc(var(--d, 1.9s) + .35s + var(--i) * .12s) backwards; }
.huic-bar:nth-child(2) { background: linear-gradient(180deg, var(--sage-400), var(--sage-500)); }
.huic-bar:nth-child(3) { background: linear-gradient(180deg, #d6be8a, var(--gold-500)); }
.huic-bar:nth-child(4) { background: linear-gradient(180deg, var(--sage-200), var(--sage-300)); }
.huic-bar i { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
@keyframes huic-grow { from { transform: scaleY(0); } }
@media (max-width: 1100px) { .hui-a, .hui-c { left: -14px; } .hui-b { right: -12px; } }
@media (max-width: 600px) {
.hui { padding: 8px 12px 8px 8px; } .hui-ic { width: 30px; height: 30px; } .hui-t small { font-size: 11px; }
.hui-a { left: 10px; top: 10px; } .hui-b { right: 10px; top: auto; bottom: 12px; } .hui-c { display: none; }
}
/* ---------------------------------------------------------------- 2. results band + logo wall */
.results { position: relative; padding: 104px 0 84px; background: radial-gradient(60% 50% at 50% 0%, rgba(203, 218, 201, .45), transparent 70%), var(--cream-50); }
.rs-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--space-8, 48px); }
.rs-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.rs-heading { font-size: var(--text-4xl); margin: 10px 0 12px; }
.rs-lede { margin: 0; color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.rs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rs-card {
position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 28px 26px 28px;
background: #fff; border: 1px solid var(--sage-200); border-radius: 24px; box-shadow: 0 1px 2px rgba(22, 36, 27, .04), 0 24px 44px -36px rgba(22, 36, 27, .5);
transition: transform .45s var(--o-ease), box-shadow .45s var(--o-ease), border-color .45s;
}
.rs-card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(203, 218, 201, .7), transparent); transition: transform .8s var(--o-ease); }
.rs-card:hover { transform: translateY(-5px); border-color: var(--sage-300); box-shadow: 0 2px 4px rgba(22, 36, 27, .05), 0 32px 56px -34px rgba(22, 36, 27, .55); }
.rs-card:hover::before { transform: scale(1.35); }
.rs-ic { position: relative; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50); margin-bottom: 18px;
box-shadow: 0 12px 22px -12px rgba(43, 69, 52, .7); animation: rs-bob 6s ease-in-out infinite; }
.rs-card:nth-child(2) .rs-ic { animation-delay: -1.5s; } .rs-card:nth-child(3) .rs-ic { animation-delay: -3s; } .rs-card:nth-child(4) .rs-ic { animation-delay: -4.5s; }
@keyframes rs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.rs-value { position: relative; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.8rem, 4.2vw, 3.7rem); line-height: 1; color: var(--forest-800); letter-spacing: -0.02em; }
.rs-noun { position: relative; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--sage-500); line-height: 1.25; margin-top: 4px; }
.rs-detail { position: relative; margin-top: 10px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.rs-line { display: none; }
@media (max-width: 1000px) { .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rs-grid { grid-template-columns: 1fr; } .results { padding: 72px 0 60px; } .rs-inner { padding: 0 20px; } .rs-heading { font-size: var(--text-3xl); } }
.lw { margin-top: 64px; }
.lw-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; }
.lw-rule { width: 64px; height: 1px; background: var(--border-default); }
.lw-k { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-500); }
.lw-viewport { overflow: hidden; padding: 12px 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.lw-track { display: flex; gap: 18px; width: max-content; animation: lw-scroll 48s linear infinite; }
.lw-viewport:hover .lw-track { animation-play-state: paused; }
.lw-tile { flex: none; width: 210px; height: 96px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--sage-100); border-radius: 20px;
box-shadow: 0 14px 26px -22px rgba(22, 36, 27, .45); transition: transform .35s var(--o-ease), box-shadow .35s, border-color .35s; }
.lw-tile img { width: auto; height: auto; max-width: 168px; max-height: 58px; object-fit: contain; opacity: .72; transition: opacity .3s; }
.lw-tile:hover { transform: translateY(-3px); border-color: var(--sage-300); box-shadow: 0 20px 34px -22px rgba(22, 36, 27, .5); }
.lw-tile:hover img { opacity: 1; }
@keyframes lw-scroll { to { transform: translateX(calc(-50% - 9px)); } }
@media (max-width: 560px) { .lw-tile { width: 168px; height: 80px; } .lw-tile img { max-width: 132px; max-height: 46px; } }
/* ---------------------------------------------------------------- 3. the continuum of care, as searches */
.lvl3 { margin-top: 32px; background: #fff; border: 1px solid var(--sage-200); border-radius: 26px; padding: 30px 30px 24px; box-shadow: 0 1px 2px rgba(22, 36, 27, .04), 0 24px 48px -40px rgba(22, 36, 27, .5); }
.lvl3-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; margin-bottom: 24px; }
.lvl3-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); }
.lvl3-title { margin: 8px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; line-height: 1.2; color: var(--text-strong); letter-spacing: -0.01em; }
.lvl3-lede { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.lvl3-scale { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.lvl3-bar { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--forest-700), var(--sage-400) 55%, var(--sage-100)); transform-origin: left; transition: transform 1.4s var(--o-ease) .2s; }
.o-anim .lvl3:not(.o-in) .lvl3-bar { transform: scaleX(0); }
.lvl3-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lvl3-grid li { display: flex; }
.lvl3-card { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 18px; border-radius: 18px; text-decoration: none !important; color: inherit !important;
background: linear-gradient(180deg, rgba(43, 69, 52, var(--t, .08)), rgba(240, 245, 238, .6) 70%); border: 1px solid var(--sage-100);
transition: transform .4s var(--o-ease), box-shadow .4s var(--o-ease), border-color .3s, background .3s; }
.lvl3-grid li:nth-child(1) .lvl3-card { --t: .16; } .lvl3-grid li:nth-child(2) .lvl3-card { --t: .13; } .lvl3-grid li:nth-child(3) .lvl3-card { --t: .10; }
.lvl3-grid li:nth-child(4) .lvl3-card { --t: .07; } .lvl3-grid li:nth-child(5) .lvl3-card { --t: .045; } .lvl3-grid li:nth-child(6) .lvl3-card { --t: .02; }
.lvl3-card:hover { transform: translateY(-4px); border-color: var(--sage-300); box-shadow: 0 22px 36px -26px rgba(22, 36, 27, .5); background: #fff; }
.lvl3-q { display: flex; align-items: flex-start; gap: 7px; min-height: 52px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--sage-200);
font-size: 12px; line-height: 1.35; color: var(--ink-800, #353b34); box-shadow: 0 6px 14px -12px rgba(22, 36, 27, .5); }
.lvl3-q svg { flex: none; color: var(--sage-500); margin-top: 1px; }
.lvl3-caret { display: inline-block; width: 1.5px; height: 13px; margin-top: 1px; background: var(--forest-700); animation: lvl3-blink 1s steps(1) infinite; flex: none; }
@keyframes lvl3-blink { 50% { opacity: 0; } }
.lvl3-step { margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sage-400); }
.lvl3-name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; color: var(--text-strong); }
.lvl3-desc { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.lvl3-more { display: inline-flex; align-items: center; gap: 8px; width: 100%; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
font-size: var(--text-sm); font-weight: 600; color: var(--forest-700) !important; text-decoration: none !important; }
.lvl3-more svg { transition: transform .25s var(--o-ease); }
.lvl3-more:hover svg { transform: translateX(4px); }
@media (max-width: 1100px) { .lvl3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lvl3-head { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lvl3 { padding: 22px 18px 18px; } .lvl3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lvl3-title { font-size: 1.5rem; } }
/* ---------------------------------------------------------------- 4. reviews: one at a time, the reviewers as tabs */
.rv3 { position: relative; padding: 104px 0; background: var(--sage-50); }
.rv3-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--space-8, 48px); }
.rv3-head { text-align: center; margin-bottom: 48px; }
.rv3-heading { font-size: var(--text-4xl); margin: 10px 0 0; }
.rv3-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--sage-200); border-radius: 30px;
box-shadow: 0 1px 2px rgba(22, 36, 27, .04), 0 40px 70px -50px rgba(22, 36, 27, .55); }
.rv3-mark { position: absolute; left: 40px; top: 18px; font-family: var(--font-display); font-size: 120px; line-height: 1; color: var(--sage-100); pointer-events: none; }
.rv3-quotes { position: relative; display: grid; padding: 64px 56px 44px; }
.rv3-q { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; transition: opacity .6s var(--o-ease), transform .6s var(--o-ease); }
.rv3-q[hidden] { display: flex !important; visibility: hidden; opacity: 0; transform: translateY(10px); }
.rv3-stars { display: flex; gap: 4px; color: var(--gold-500); }
.rv3-stars svg { filter: drop-shadow(0 2px 3px rgba(184, 146, 78, .3)); }
.rv3-q blockquote { position: relative; margin: 18px 0 28px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.75vw, 1.5rem); line-height: 1.5; color: var(--ink-900, #1c231d); letter-spacing: -0.005em; }
.rv3-q figcaption { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--sage-100); }
.rv3-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--av, var(--forest-700)); color: var(--cream-50); font-weight: 600; font-size: 14px; letter-spacing: .03em; }
.rv3-who b { font-size: var(--text-base); color: var(--text-strong); font-weight: 600; }
.rv3-list { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px 22px; border-left: 1px solid var(--sage-100); border-radius: 0 30px 30px 0; background: linear-gradient(180deg, var(--sage-50), #fbfcfa); }
.rv3-tab { appearance: none; border: 0; background: transparent; font: inherit; color: var(--text-body); text-align: left; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 16px; transition: background .25s, box-shadow .25s; }
.rv3-tab .rv3-av { width: 36px; height: 36px; font-size: 12px; grid-row: span 2; }
.rv3-name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.rv3-prog { display: block; height: 3px; border-radius: 3px; background: var(--sage-100); overflow: hidden; }
.rv3-prog i { display: block; height: 100%; width: 100%; background: var(--forest-700); transform: scaleX(0); transform-origin: left; }
.rv3-tab[aria-selected="true"] { background: #fff; box-shadow: 0 12px 26px -20px rgba(22, 36, 27, .5); }
.rv3-tab[aria-selected="true"] .rv3-prog i { transform: scaleX(1); }
.rv3.is-auto .rv3-tab[aria-selected="true"] .rv3-prog i { transform: scaleX(0); animation: o-prog var(--rv-step, 8s) linear forwards; }
.rv3-tab:hover { background: rgba(255, 255, 255, .75); }
.rv3-tab:focus-visible { outline: 2px solid var(--sage-400); outline-offset: 2px; }
@media (max-width: 900px) {
.rv3-stage { grid-template-columns: 1fr; }
.rv3-quotes { padding: 56px 26px 30px; }
.rv3-mark { left: 22px; top: 10px; font-size: 96px; }
.rv3-list { flex-direction: row; overflow-x: auto; justify-content: flex-start; border-left: 0; border-top: 1px solid var(--sage-100); border-radius: 0 0 30px 30px; padding: 14px; scrollbar-width: none; }
.rv3-list::-webkit-scrollbar { display: none; }
.rv3-tab { flex: none; }
.rv3 { padding: 72px 0; } .rv3-inner { padding: 0 20px; } .rv3-heading { font-size: var(--text-3xl); }
}
/* ---------------------------------------------------------------- 5. how it works: a scroll-driven story */
.story { position: relative; background: linear-gradient(180deg, var(--cream-50), var(--sage-50)); }
.story-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 104px var(--space-8, 48px) 96px; }
.story-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.story-heading { font-size: var(--text-4xl); margin: 10px 0 14px; }
.story-lede { margin: 0 auto; max-width: 62ch; color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.story-body { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 72px; align-items: start; }
.story-steps { list-style: none; margin: 0; padding: 12vh 0 16vh; position: relative; }
.story-steps::before { content: ""; position: absolute; left: 23px; top: 12vh; bottom: 16vh; width: 2px; background: repeating-linear-gradient(180deg, var(--sage-300) 0 6px, transparent 6px 12px); }
.story-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding: 0 0 22vh; opacity: .34; transition: opacity .5s var(--o-ease); }
.story-step:last-child { padding-bottom: 0; }
.story-step.is-active { opacity: 1; }
.story-n { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--sage-300); color: var(--forest-700); font-family: var(--font-display); font-size: 1.15rem; transition: background .4s, color .4s, border-color .4s, box-shadow .4s; }
.story-step.is-active .story-n { background: var(--forest-700); border-color: var(--forest-700); color: var(--cream-50); box-shadow: 0 14px 26px -14px rgba(43, 69, 52, .7); }
.story-txt h3 { margin: 8px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var(--text-strong); letter-spacing: -0.01em; }
.story-txt p { margin: 0; color: var(--text-body); font-size: var(--text-base); line-height: 1.7; max-width: 42ch; }
.story-thumb { display: none; }
.story-visual { position: sticky; top: 104px; }
.story-frame { position: relative; aspect-ratio: 1 / 1.08; border-radius: 28px; overflow: hidden; background: var(--sage-100); box-shadow: 0 44px 80px -44px rgba(22, 36, 27, .6); }
.story-scene { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s var(--o-ease); }
.story-scene img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.07); transition: transform 2.2s var(--o-ease); }
.story-scene.is-active { opacity: 1; }
.story-scene.is-active img { transform: scale(1); }
.story-scene .sui { opacity: 0; translate: 0 16px; transition: opacity .6s var(--o-ease) .45s, translate .7s var(--o-ease) .45s; }
.story-scene.is-active .sui { opacity: 1; translate: 0 0; }
.story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.story-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--sage-300); transition: width .35s var(--o-ease), background .35s; }
.story-dot.is-active { width: 26px; background: var(--forest-700); }
.story-cta { display: flex; justify-content: center; margin-top: 36px; }
.story-cta .oluna-cta { padding: 15px 26px; border-radius: var(--radius-md); color: var(--cream-50); font-weight: 600; text-decoration: none; }
/* the live interface cards on the story photos */
.sui { position: absolute; left: 22px; bottom: 22px; max-width: calc(100% - 44px); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .85); border-radius: 18px; padding: 14px 16px; box-shadow: 0 24px 48px -24px rgba(22, 36, 27, .55); }
.sui-chip { display: flex; align-items: center; gap: 12px; }
.sui-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-100); color: var(--forest-700); }
.sui-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.sui-t b { font-size: var(--text-sm); color: var(--text-strong); }
.sui-t small { font-size: 12.5px; color: var(--text-muted); }
.sui-ring .sui-ic { background: var(--forest-700); color: var(--cream-50); animation: sui-ring 1.6s ease-in-out infinite; }
@keyframes sui-ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } 40% { transform: rotate(0); } }
.sui-search { top: 22px; bottom: auto; right: 22px; padding: 12px; }
.sui-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--sage-200); font-size: 13.5px; color: var(--ink-800, #353b34); }
.sui-bar svg { flex: none; color: var(--sage-500); }
.sui-res { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sage-50); border-left: 3px solid var(--forest-700); }
.sui-res b { font-size: 14px; color: var(--forest-700); }
.sui-res small { font-size: 12px; color: var(--text-muted); }
.sui-crm { min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.sui-k, .sui-report .huic-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-500); }
.sui-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-body); }
.sui-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--sage-50); color: var(--forest-700); font-size: 12px; font-weight: 600; }
.sui-pill svg { width: 12px; height: 12px; }
.sui-ok { background: var(--forest-700); color: var(--cream-50); }
.sui-src { font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--sage-100); padding-top: 8px; }
.sui-report { width: 280px; display: flex; flex-direction: column; gap: 10px; }
.sui-report .huic-bar { animation: none; transform: scaleY(0); transition: transform 1s var(--o-ease) calc(.6s + var(--i) * .12s); }
.story-scene.is-active .sui-report .huic-bar, .story-thumb .sui-report .huic-bar { transform: scaleY(1); }
@media (max-width: 900px) {
.story-inner { padding: 72px 20px 64px; }
.story-head { text-align: left; }
.story-body { grid-template-columns: 1fr; gap: 0; }
.story-visual { display: none; }
.story-steps { padding: 0; }
.story-steps::before { top: 0; bottom: 0; }
.story-step { opacity: 1; padding: 0 0 40px; }
.story-thumb { display: block; position: relative; grid-column: 2; aspect-ratio: 4 / 3.4; border-radius: 20px; overflow: hidden; margin-top: 16px; box-shadow: 0 24px 44px -30px rgba(22, 36, 27, .55); }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-thumb .sui { left: 12px; right: auto; bottom: 12px; padding: 10px 12px; max-width: calc(100% - 24px); }
.story-thumb .sui-search { top: 12px; right: 12px; bottom: auto; }
.story-thumb .sui-crm { min-width: 0; }
.story-thumb .sui-report { width: 210px; }
.story-heading { font-size: var(--text-3xl); }
}
/* ---------------------------------------------------------------- 6. quote attribution: one line, no portrait */
.fwb-by { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 28px; }
.fwb-rule { width: 30px; height: 1px; background: var(--sage-400); }
.fwb-by b { color: var(--cream-50); font-weight: 600; font-size: var(--text-base); letter-spacing: .01em; }
.fwb-role { color: var(--sage-300); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
/* ---------------------------------------------------------------- 7. blog cards: compact tags, bylines on one baseline, calm hover */
.rr-chips, .pc-chips, .fc-chips { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.rr-chip, .pc-chip, .fc-chip, .post-chip {
font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; line-height: 1.2 !important;
padding: 4px 8px !important; border-radius: 6px !important; border: 0 !important; background: rgba(43, 69, 52, .065) !important; color: var(--forest-600) !important; white-space: nowrap;
}
.o-rr .rr-row { align-items: stretch; }
.o-rr .rr-card { height: 100%; }
.o-rr .rr-body { flex: 1 1 auto; }
.o-rr .rr-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.o-rr .rr-foot { margin-top: auto !important; }
.o-rr .rr-card, .o-rr .rr-card *, .post-card, .post-card *, .featured-card, .featured-card * { text-decoration: none !important; }
.o-rr .rr-card:hover .rr-title { color: var(--forest-700); }
.post-card { display: flex !important; flex-direction: column; height: 100%; }
.post-card .pc-body { display: flex !important; flex-direction: column; flex: 1 1 auto; }
.post-card .pc-meta { margin-top: auto !important; padding-top: 12px; }
.post-card .pc-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card:hover .pc-title, .featured-card:hover .fc-title { color: var(--forest-700) !important; }
.post-card .pc-image, .featured-card .fc-image { transition: transform 1.2s var(--o-ease) !important; }
.post-card:hover .pc-image, .featured-card:hover .fc-image { transform: scale(1.04); }
.bf-grid, .post-related-grid, .author-grid { align-items: stretch; }
/* ---------------------------------------------------------------- 8. working with Oluna: readable, and the left side stays put */
.editorial.ed3 { overflow: visible !important; }
.ed3-panel { overflow: clip !important; }
.ed3-bg { opacity: .11 !important; }
.ed3-panel::after { background: linear-gradient(180deg, rgba(22, 36, 27, .5), rgba(22, 36, 27, .72)) !important; }
.ed3-panel-inner { position: sticky !important; top: 96px; }
.ed3-panel .editorial-heading { font-size: clamp(2.2rem, 3.4vw, 2.9rem) !important; }
.ed3-fit h3 { font-size: 1.8rem !important; }
.ed3-fit > p { font-size: 1rem !important; color: #e3ebe1 !important; line-height: 1.65 !important; }
.ed3-fit-list li { font-size: 1rem !important; color: var(--cream-50) !important; }
.ed3-fit-list .ck { background: rgba(250, 248, 242, .14) !important; color: var(--cream-50) !important; width: 24px !important; height: 24px !important; }
.ed3 .editorial-note { font-size: 14.5px !important; color: #dbe5d9 !important; }
/* ---------------------------------------------------------------- 9. the stepper head, without the extra card */
.stg2-head { grid-template-columns: minmax(0, 1fr) !important; max-width: 820px; }
/* ---------------------------------------------------------------- 10. motion: photos wipe in, headings arrive word by word, a reading line */
.o-wipe img { clip-path: inset(0 0 0 0); transition: clip-path 1.25s var(--o-ease) .1s, transform 1.6s var(--o-ease) !important; }
.o-anim .o-wipe:not(.o-in) img { clip-path: inset(0 0 100% 0); }
.o-split .o-w { display: inline-block; transition: opacity .7s var(--o-ease) calc(var(--wi, 0) * 45ms), transform .8s var(--o-ease) calc(var(--wi, 0) * 45ms); }
.o-anim .o-split:not(.o-in) .o-w { opacity: 0; transform: translateY(.45em); }
.o-progress { position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 2.5px; pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0));
background: linear-gradient(90deg, var(--forest-700), var(--sage-400) 70%, var(--gold-500)); }
@media (prefers-reduced-motion: reduce) {
.hui, .hui-live, .huic-bar, .rs-ic, .lw-track, .lvl3-caret, .sui-ring .sui-ic { animation: none !important; opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important; }
.o-wipe img, .o-split .o-w { transition: none !important; clip-path: none !important; }
.o-progress { display: none; }
}
/* ---------- Oluna flair v19 (2026-10-12, round 8): a live hero screen, result stats that draw themselves, the
logos in a band of their own, the continuum as one connected path, a story line that draws as you scroll, a
photo on the packages tile. Reduced motion: everything rests in its finished state. ---------- */
/* ---------------------------------------------------------------- 1. hero: the cards cycle */
.hui-a, .hui-b { min-width: 232px; }
.hui-t b, .hui-t small { transition: opacity .3s var(--o-ease), transform .3s var(--o-ease); }
.hui.is-swap .hui-t b, .hui.is-swap .hui-t small { opacity: 0; transform: translateY(-5px); }
.hui.is-ping .hui-ic { animation: hui-ic-ping 1s var(--o-ease); }
@keyframes hui-ic-ping { 0% { box-shadow: 0 0 0 0 rgba(92, 126, 99, .5); } 100% { box-shadow: 0 0 0 14px rgba(92, 126, 99, 0); } }
.huic-bar { transition: height 1s var(--o-ease); }
/* ---------------------------------------------------------------- 2. results: each number draws a picture of itself */
.rs-detail { margin-bottom: 22px; }
.rs-viz { position: relative; display: flex; align-self: stretch; box-sizing: border-box; margin-top: auto; padding-top: 18px; height: 92px; border-top: 1px dashed var(--sage-200); }
/* 2.5x: before vs. after */
.rsv-ratio { flex-direction: column; justify-content: center; gap: 9px; }
.rsv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.rsv-row i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
.rsv-row b { display: block; width: var(--w); height: 11px; border-radius: 6px; background: var(--sage-200); transform-origin: left; transition: transform 1.1s var(--o-ease) .35s; }
.rsv-row.is-on b { background: linear-gradient(90deg, var(--forest-700), var(--sage-500)); transition-delay: .7s; box-shadow: 0 6px 14px -8px rgba(43, 69, 52, .7); }
.rsv-row.is-on i { color: var(--forest-700); }
/* the 30+ / 4x / 45+ pictures: flair-v21 */
/* ---------------------------------------------------------------- 3. the logos, in a band of their own */
.lw2 { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); align-items: center; gap: 0; margin-top: 64px; padding: 26px 0 26px 34px; border-radius: 28px; overflow: hidden;
background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, .78) 55%, rgba(240, 245, 238, .7)); border: 1px solid var(--sage-200); box-shadow: 0 1px 2px rgba(22, 36, 27, .04), 0 28px 50px -44px rgba(22, 36, 27, .5); }
.lw2-copy { padding-right: 30px; border-right: 1px solid var(--sage-200); }
.lw2-k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-500); }
.lw2-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3f9a5c; box-shadow: 0 0 0 4px rgba(63, 154, 92, .15); }
.lw2-line { margin: 10px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.3; color: var(--text-strong); text-wrap: balance; }
.lw2-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.lw2-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content; animation: lw2-scroll 46s linear infinite; }
.lw2-viewport:hover .lw2-track { animation-play-state: paused; }
.lw2-logo { flex: none; padding: 6px 30px; }
.lw2-logo img { display: block; width: auto; height: 54px; max-width: 168px; object-fit: contain; opacity: .66; transition: opacity .3s, transform .4s var(--o-ease); }
.lw2-logo:hover img { opacity: 1; transform: scale(1.05); }
@keyframes lw2-scroll { to { transform: translateX(-50%); } }
@media (max-width: 860px) {
.lw2 { grid-template-columns: 1fr; padding: 24px 0 18px; gap: 16px; }
.lw2-copy { padding: 0 24px; border-right: 0; text-align: center; }
.lw2-k { justify-content: center; }
.lw2-logo { padding: 4px 22px; } .lw2-logo img { height: 44px; max-width: 136px; }
}
/* ---------------------------------------------------------------- 4. the continuum as one connected path */
.lvl3--path .lvl3-scale { justify-content: space-between; margin: 0 0 12px; }
.lvl3--path .lvl3-scale span:last-child::after { content: " \2192"; }
.lvl3--path .lvl3-grid { position: relative; }
.lvl3--path .lvl3-grid::before { content: ""; position: absolute; top: 17px; left: calc((100% - 60px) / 12); right: calc((100% - 60px) / 12); height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--forest-700), var(--sage-400) 60%, var(--sage-200)); transform-origin: left; transition: transform 1.6s var(--o-ease) .25s; }
.o-anim .lvl3--path:not(.o-in) .lvl3-grid::before { transform: scaleX(0); }
.lvl3--path .lvl3-grid li { flex-direction: column; gap: 14px; }
.lvl3-node { position: relative; z-index: 1; align-self: center; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--cream-50); background: color-mix(in oklab, var(--forest-700) calc(100% - var(--i) * 13%), var(--sage-400));
box-shadow: 0 0 0 6px #fff, 0 10px 18px -10px rgba(43, 69, 52, .8); transition: transform .5s var(--o-ease), opacity .5s; transition-delay: calc(.3s + var(--i) * .2s); }
.o-anim .lvl3--path:not(.o-in) .lvl3-node { transform: scale(.5); opacity: 0; }
.lvl3--path .lvl3-card { gap: 4px; padding: 16px 14px 14px; }
.lvl3--path li:hover .lvl3-node { transform: scale(1.12); transition-delay: 0s; }
.lvl3--path .lvl3-q { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 14px 0 0; min-height: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.lvl3-qk { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-500); }
.lvl3-ql { display: flex; align-items: flex-start; gap: 6px; min-height: 68px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--sage-200);
font-size: 12px; line-height: 1.35; color: var(--ink-800, #353b34); box-shadow: 0 6px 14px -12px rgba(22, 36, 27, .5); }
.lvl3-ql svg { flex: none; color: var(--sage-500); margin-top: 1px; }
.lvl3--path .lvl3-desc { margin-bottom: 2px; }
.lvl3-title { text-wrap: balance; }
@media (max-width: 1100px) { .lvl3--path .lvl3-grid::before { display: none; } }
@media (max-width: 600px) {
.lvl3--path .lvl3-scale { display: none; }
.lvl3--path .lvl3-grid { grid-template-columns: 1fr; gap: 12px; }
.lvl3--path .lvl3-grid::before { display: block; top: 18px; bottom: 18px; left: 17px; right: auto; width: 2px; height: auto; transform-origin: top;
background: linear-gradient(180deg, var(--forest-700), var(--sage-400) 60%, var(--sage-200)); }
.o-anim .lvl3--path:not(.o-in) .lvl3-grid::before { transform: scaleY(0); }
.lvl3--path .lvl3-grid li { flex-direction: row; align-items: flex-start; gap: 12px; }
.lvl3--path .lvl3-node { align-self: flex-start; margin-top: 10px; }
.lvl3--path .lvl3-ql { min-height: 0; }
}
/* ---------------------------------------------------------------- 5. the story: a line that draws as you scroll */
.story-steps::after { content: ""; position: absolute; left: 23px; top: var(--sl-top, 0px); width: 2px; height: calc(var(--sl-len, 0px) * var(--sp, 0)); border-radius: 2px;
background: linear-gradient(180deg, var(--sage-500), var(--forest-700)); box-shadow: 0 0 10px rgba(92, 126, 99, .45); }
.story-step.is-past { opacity: .6; }
.story-step.is-past .story-n { background: var(--sage-100); border-color: var(--forest-700); color: var(--forest-700); }
/* ---------------------------------------------------------------- 6. homepage packages tile: a photo on its right side */
.hub-grid .hub-card--wide.hcw--photo { position: relative; overflow: hidden; grid-template-columns: 1fr; align-content: center; padding-right: 43% !important; }
.hub-card--wide.hcw--photo .hcw-ic { display: none; }
.hub-card--wide.hcw--photo .hub-cta-btn { grid-column: 1; }
.hcw-media { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 0; pointer-events: none; }
.hcw-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: transform 1.4s var(--o-ease); }
.hcw-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--forest-700) 0%, rgba(43, 69, 52, .55) 26%, rgba(43, 69, 52, 0) 62%); }
.hub-card--wide.hcw--photo:hover .hcw-media img { transform: scale(1.05); }
@media (max-width: 1024px) {
.hub-grid .hub-card--wide.hcw--photo { padding-right: var(--space-7) !important; padding-top: 236px !important; }
.hcw-media { width: auto; left: 0; bottom: auto; height: 210px; }
.hcw-media::after { background: linear-gradient(180deg, rgba(43, 69, 52, 0) 45%, var(--forest-800)); }
}
/* ---------------------------------------------------------------- 7. live cards on every page hero, placed off the faces */
.hui { max-width: 300px; }
.hui-t b { line-height: 1.3; }
.hui-a.at-tl { top: 9%; bottom: auto; }
.hui-a.at-bl { top: auto; bottom: 25%; }
.hui-b.at-mr { top: 41%; bottom: auto; }
.hui-b.at-br { top: auto; bottom: 7%; }
.hui-a.at-bll { top: auto; bottom: 7%; }
.hui-b.at-brh { top: auto; bottom: 27%; }
@media (max-width: 600px) {
.hui { max-width: calc(100% - 20px); }
/* the photo is short and wide on a phone: one card (the event), where the desktop puts it */
.hui-b[class*="at-"] { display: none; }
.hui-a.at-tl { top: 12px; bottom: auto; left: 12px; }
.hui-a.at-bl, .hui-a.at-bll { top: auto; bottom: 12px; left: 12px; }
}
/* ---------------------------------------------------------------- 8. the care path, any number of stops (industry pages too) */
.lvl3--path .lvl3-grid { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.lvl3--path .lvl3-grid::before { left: calc((100% - (var(--n, 6) - 1) * 12px) / (2 * var(--n, 6))); right: calc((100% - (var(--n, 6) - 1) * 12px) / (2 * var(--n, 6))); }
.lvl3--path div.lvl3-card:hover { transform: none; box-shadow: none; border-color: var(--sage-100); }
.pp-section { padding: 88px 0; background: var(--cream-50); }
.pp-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--space-8, 48px); }
.pp-section .lvl3 { margin-top: 0; }
.pp-section .lvl3-title { font-size: var(--text-3xl); }
@media (max-width: 1100px) { .lvl3--path .lvl3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pp-section { padding: 56px 0; } .pp-inner { padding: 0 20px; } .lvl3--path .lvl3-grid { grid-template-columns: 1fr; } .lvl3--path .lvl3-grid::before { left: 17px; right: auto; } }
/* ---------------------------------------------------------------- 9. population links carry their photo */
.rel2-icon.is-photo, .il-icon.is-photo { overflow: hidden; padding: 0; background: var(--sage-100); box-shadow: 0 8px 18px -12px rgba(22, 36, 27, .6); }
.rel2-icon.is-photo { width: 56px; height: 56px; border-radius: 16px; }
/* a population card: the photo across the top, the words below, the arrow beside them */
.rel2-card:has(.rel2-icon.is-photo) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; gap: 14px 12px; padding: 12px 12px 18px; }
.rel2-card:has(.rel2-icon.is-photo) > :last-child { align-self: end; }
.rel2-card:has(.rel2-icon.is-photo) .rel2-icon.is-photo { grid-column: 1 / -1; width: 100%; height: 132px; border-radius: 14px; }
.rel2-card:has(.rel2-icon.is-photo) .rel2-text { padding: 0 6px; }
.il-icon.is-photo { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(250, 248, 242, .25); }
.rel2-icon.is-photo img, .il-icon.is-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s var(--o-ease); }
.rel2-card:hover .rel2-icon.is-photo img, .imb-list a:hover .il-icon.is-photo img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.lvl3-node, .lvl3--path .lvl3-grid::before { transform: none !important; opacity: 1 !important; transition: none !important; }
.lw2-track { animation: none !important; }
}
/* ---------- Oluna flair v20 (2026-10-13, the operator's fourth review). Results without icons and with pictures that
loop slowly; the logos full width again; the continuum as a quiet line of stops; reviews as a full-width rail;
"how it works" pinned and advancing with the scroll; an AI chat and a web page on the story photos; checks that
draw themselves; stats whose "+" never pushes the number out of line; proof lines that climb.
Reduced motion: everything rests in its finished state. ---------- */
/* ---------------------------------------------------------------- 0. stepper scene icons sat off-centre
(`.sv-svg * { transform-box: fill-box }` made every scaled icon scale from its own corner) */
.sv-svg g[transform] { transform-box: view-box; transform-origin: 0 0; }
/* ---------------------------------------------------------------- 1. stats: the "+" and the up arrow */
.o-v { display: inline-flex; align-items: flex-start; vertical-align: top; }
.o-plus { font-size: .48em; line-height: 1; margin: .14em 0 0 .06em; font-weight: 400; color: var(--sage-500); }
.o-up { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: .14em 0 0 .3em; border-radius: 50%;
background: var(--sage-100); color: var(--forest-700); box-shadow: 0 6px 14px -8px rgba(43, 69, 52, .6); }
.o-up svg { width: 14px; height: 14px; }
.o-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o-float .o-v { line-height: 1; }
.o-float .o-up { background: var(--sage-500); color: var(--cream-50); box-shadow: none; }
.o-float .o-plus { color: var(--sage-300); }
/* the float card: solid, legible on any photo, its lines flush left */
.ims-float.o-float { background: radial-gradient(140% 120% at 15% 0%, rgba(92, 126, 99, .32), transparent 55%), rgba(24, 41, 30, .96) !important;
padding: 24px 26px 22px !important; border: 1px solid rgba(250, 248, 242, .08); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .6) !important; }
.ims-float.o-float strong { font-size: clamp(2.6rem, 3.6vw, 3.3rem) !important; letter-spacing: -0.02em; gap: 8px; }
.ims-float.o-float .if-noun { font-size: 1.2rem !important; }
.ims-float.o-float > span { color: var(--sage-200) !important; line-height: 1.5; margin-top: 10px !important; }
/* the float card's base rule styles every span inside it as a small block line; the number's own pieces stay inline */
.ims-float.o-float strong .o-v { display: inline-flex !important; align-items: flex-start; margin: 0 !important; font-size: inherit !important; line-height: 1 !important; color: var(--cream-50) !important; }
.ims-float.o-float strong .o-v > .o-num { display: inline !important; }
.ims-float.o-float strong .o-plus { display: inline !important; margin: .14em 0 0 .06em !important; font-size: .48em !important; line-height: 1 !important; color: var(--sage-300) !important; }
.ims-float.o-float strong .o-up { display: inline-flex !important; margin: .22em 0 0 .3em !important; font-size: 1rem !important; color: var(--cream-50) !important; }
/* ---------------------------------------------------------------- 2. results: plain ground, no icons, pictures that keep breathing */
.results.rs-plain { background: var(--cream-50) !important; padding-bottom: 88px; }
.rs-plain .rs-card { padding: 30px 28px 24px; }
.rs-plain .rs-card::before { opacity: .55; }
.rs-value { display: inline-flex; align-items: flex-start; }
.rs-value .o-plus { color: var(--sage-500); }
.rs-plain .rs-viz { height: 100px; padding-top: 20px; }
/* the pictures themselves: flair-v21 */
/* ---------------------------------------------------------------- 3. the logos: full width, between two rules */
.lw3 { margin-top: 76px; }
.lw3-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 26px; padding: 0 24px; }
.lw3-rule { width: 64px; height: 1px; background: var(--sage-300); }
.lw3-k { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-500); text-align: center; }
.lw3-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lw3-track { list-style: none; margin: 0; padding: 8px 0; display: flex; align-items: center; width: max-content; animation: lw2-scroll 56s linear infinite; }
.lw3-viewport:hover .lw3-track { animation-play-state: paused; }
.lw3-logo { flex: none; padding: 0 42px; }
.lw3-logo img { display: block; width: auto; height: 66px; max-width: 200px; object-fit: contain; opacity: .55; filter: grayscale(1); transition: opacity .35s, filter .35s; }
.lw3-logo:hover img { opacity: 1; filter: none; }
@media (max-width: 600px) { .lw3 { margin-top: 56px; } .lw3-logo { padding: 0 24px; } .lw3-logo img { height: 50px; max-width: 150px; } .lw3-rule { width: 32px; } }
/* ---------------------------------------------------------------- 4. homepage packages tile: a deeper gradient, no hover seam */
.hub-grid .hub-card--wide.hcw--photo {
background: radial-gradient(90% 130% at 0% 0%, rgba(124, 152, 133, .28), transparent 60%), linear-gradient(118deg, #1a2d21 0%, #22382a 40%, var(--forest-700) 100%) !important;
border: 0 !important; outline: 0; isolation: isolate; }
.hub-card--wide.hcw--photo .hcw-media { top: -1px; right: -1px; bottom: -1px; width: 44%; overflow: hidden; }
.hub-grid .hub-card--wide.hcw--photo { padding-right: calc(44% + 32px) !important; }
@media (max-width: 1024px) { .hub-grid .hub-card--wide.hcw--photo { padding-right: var(--space-7) !important; } .hub-card--wide.hcw--photo .hcw-media { width: auto; left: 0; bottom: auto; height: 210px; } }
.hub-card--wide.hcw--photo .hcw-media::after { background: linear-gradient(90deg, #22382a 0%, rgba(34, 56, 42, .82) 18%, rgba(34, 56, 42, .3) 48%, rgba(34, 56, 42, 0) 78%); }
.hub-card--wide.hcw--photo:hover { box-shadow: 0 34px 60px -30px rgba(22, 36, 27, .7) !important; }
/* ---------------------------------------------------------------- 5. how it works: pinned, advancing with the scroll */
.story-step .story-n { background: #fff; color: var(--sage-500); border-color: var(--sage-300); transition: background .4s, color .4s, border-color .4s, box-shadow .4s; }
.story-step.is-past .story-n { background: var(--sage-100); border-color: var(--forest-700); color: var(--forest-700); }
.story-step.is-active .story-n { background: var(--forest-700); border-color: var(--forest-700); color: var(--cream-50); }
.story-steps::after { transition: height .5s var(--o-ease); }
@media (min-width: 901px) {
.story-track { position: relative; height: calc(var(--n) * 58vh + 72vh); }
.story-pin { position: sticky; top: 84px; height: calc(100vh - 100px); display: flex; align-items: center; }
.story-pin .story-body { width: 100%; align-items: center; gap: 72px; }
.story-track .story-steps { padding: 0 !important; }
.story-track .story-steps::before { top: var(--sl-top, 24px); bottom: auto; height: var(--sl-len, 0px); }
.story-track .story-step { opacity: 1 !important; padding: 0 0 30px !important; }
.story-track .story-step:last-child { padding-bottom: 0 !important; }
.story-track .story-txt h3 { margin: 9px 0 6px; font-size: 1.5rem; color: var(--text-muted); transition: color .4s; }
.story-track .story-txt p { color: var(--text-muted); opacity: .7; transition: color .4s, opacity .4s; }
.story-track .story-step.is-active .story-txt h3 { color: var(--text-strong); }
.story-track .story-step.is-active .story-txt p { color: var(--text-body); opacity: 1; }
.story-track .story-step.is-past .story-txt h3 { color: var(--ink-700, #4a524a); }
.story-track .story-visual { position: relative; top: auto; }
.story-track .story-frame { max-height: calc(100vh - 190px); }
.story-track .story-step { cursor: pointer; }
}
@media (max-width: 900px) { .story-track { height: auto; } .story-pin { position: static; height: auto; display: block; } }
/* story card: an AI chat in the bottom-right corner (step 1) */
.sui-chat { left: auto; right: 20px; bottom: 20px; width: min(310px, calc(100% - 40px)); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.suc-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-500); }
.suc-head .hui-live { margin-left: auto; }
.suc-av { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50); }
.suc-me { align-self: flex-end; max-width: 88%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: var(--forest-700); color: var(--cream-50); font-size: 12.5px; line-height: 1.4; }
.suc-ai { align-self: flex-start; max-width: 94%; min-height: 4.4em; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: var(--sage-50); border: 1px solid var(--sage-100); color: var(--ink-800, #353b34); font-size: 12.5px; line-height: 1.45; }
.suc-src { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--sage-200); font-size: 11.5px; font-weight: 600; color: var(--forest-700); }
.story-scene .suc-src { opacity: 0; translate: 0 6px; transition: opacity .5s, translate .5s; }
.story-scene.is-active .suc-src { opacity: 1; translate: 0 0; transition-delay: 4.2s; }
/* story card: the page they land on, with the clinician's video (step 2) */
.sui-web { width: min(330px, calc(100% - 40px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.suw-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--sage-50); border-bottom: 1px solid var(--sage-100); }
.suw-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-300); }
.suw-url { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--sage-100); font-size: 11px; color: var(--text-muted); }
.suw-body { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 14px; }
.suw-h { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--text-strong); }
.suw-video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--sage-100); }
.suw-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.suw-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .94); color: var(--forest-700); animation: suw-pulse 2.8s ease-in-out infinite; }
.suw-play svg { margin-left: 2px; }
.suw-cap { position: absolute; left: 8px; bottom: 7px; padding: 3px 8px; border-radius: 6px; background: rgba(22, 36, 27, .74); color: var(--cream-50); font-size: 10.5px; }
.suw-lines { display: flex; flex-direction: column; gap: 5px; }
.suw-lines i { display: block; height: 6px; border-radius: 3px; background: var(--sage-100); }
.suw-lines i:nth-child(2) { width: 86%; } .suw-lines i:nth-child(3) { width: 58%; }
@keyframes suw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .65), 0 6px 16px -6px rgba(0, 0, 0, .5); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0), 0 6px 16px -6px rgba(0, 0, 0, .5); } }
@media (max-width: 900px) {
.story-thumb .sui-chat { right: 10px; left: auto; bottom: 10px; width: calc(100% - 20px); max-width: 290px; gap: 6px; padding: 10px; }
.story-thumb .suc-src { display: none; }
.story-thumb .sui-web { left: 10px; bottom: 10px; width: calc(100% - 20px); max-width: 280px; }
.story-thumb .suw-lines { display: none; }
}
/* ---------------------------------------------------------------- 6. the continuum: stops on one quiet line */
.cc { margin-top: 64px; padding-top: 52px; border-top: 1px solid var(--sage-200); }
.pp-section .cc { margin-top: 0; padding-top: 0; border-top: 0; }
.cc-head { max-width: 700px; margin-bottom: 40px; }
.cc-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-500); }
.cc-title { margin: 10px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.15; color: var(--text-strong); letter-spacing: -0.01em; text-wrap: balance; }
.cc-lede { margin: 0; max-width: 60ch; color: var(--text-muted); font-size: var(--text-base); line-height: 1.7; text-wrap: pretty; }
.cc-scale { display: flex; justify-content: space-between; margin: 0 0 20px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.cc-scale span:last-child::after { content: " \2192"; }
.cc-stops { --gap: 16px; --pad: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n)));
list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 var(--gap); }
.cc-stops::before { content: ""; position: absolute; top: 10px; left: var(--pad); right: var(--pad); height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--forest-700), var(--sage-400) 60%, var(--sage-200)); transform-origin: left; transition: transform 1.6s var(--o-ease) .2s; }
.o-anim .cc:not(.o-in) .cc-stops::before { transform: scaleX(0); }
.cc-glow { position: absolute; top: 5px; left: var(--pad); right: var(--pad); height: 12px; pointer-events: none; z-index: 1; }
.cc-glow::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
background: radial-gradient(circle, #fff 0 30%, rgba(203, 218, 201, .85) 45%, rgba(203, 218, 201, 0) 72%); animation: cc-travel 11s ease-in-out 2.4s infinite; opacity: 0; }
@keyframes cc-travel { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 64% { left: 100%; opacity: 1; } 70%, 100% { left: 100%; opacity: 0; } }
.cc-stops li { position: relative; z-index: 2; display: flex; }
.cc-stop { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: inherit !important; text-decoration: none !important; }
.cc-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; margin-bottom: 14px; background: color-mix(in oklab, var(--forest-700) calc(100% - var(--i) * 12%), var(--sage-300));
box-shadow: 0 6px 14px -6px rgba(43, 69, 52, .7); transition: scale .5s var(--o-ease), opacity .5s; transition-delay: calc(.3s + var(--i) * .16s); }
.cc-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.o-anim .cc:not(.o-in) .cc-dot { scale: .3; opacity: 0; }
.cc-name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--text-strong); transition: color .3s; text-wrap: balance; }
.cc-desc { max-width: 18ch; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-wrap: balance; }
a.cc-stop:hover .cc-dot { scale: 1.18; transition-delay: 0s; }
a.cc-stop:hover .cc-name { color: var(--forest-700); }
.cc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: var(--text-sm); font-weight: 600; color: var(--forest-700) !important; text-decoration: none !important; }
.cc-more svg { transition: transform .25s var(--o-ease); }
.cc-more:hover svg { transform: translateX(4px); }
@media (max-width: 700px) {
.cc { margin-top: 48px; padding-top: 40px; }
.cc-head { margin-bottom: 28px; }
.cc-scale, .cc-glow { display: none; }
.cc-stops { grid-template-columns: 1fr; gap: 22px; }
.cc-stops::before { top: 11px; bottom: 11px; left: 10px; right: auto; width: 2px; height: auto; transform-origin: top; background: linear-gradient(180deg, var(--forest-700), var(--sage-400) 60%, var(--sage-200)); }
.o-anim .cc:not(.o-in) .cc-stops::before { transform: scaleY(0); }
.cc-stop { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 16px; text-align: left; align-items: start; }
.cc-dot { grid-row: 1 / span 2; margin: 0; }
.cc-desc { max-width: none; }
}
/* 7. reviews: flair-v21 (rv5) */
/* ---------------------------------------------------------------- 8. "Across the behavioral health spectrum": the line under its heading */
.who2-spec-head { display: block !important; max-width: 720px; }
.who2-spec-head p { margin-top: 10px !important; max-width: 62ch; }
/* ---------------------------------------------------------------- 9. proof: a line that climbs, buildings for sites */
.o-viz-line { position: relative; display: block; width: 100%; }
.o-viz-line svg { display: block; width: 100%; height: auto; overflow: visible; }
.ol-line { stroke: var(--forest-700); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--o-ease) .25s; }
.ol-area { transition: opacity 1s ease 1.1s; }
.ol-a { fill: #fff; stroke: var(--sage-400); stroke-width: 2; }
.ol-b { fill: var(--forest-700); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: scale .5s var(--o-ease) 1.6s, opacity .3s 1.6s; }
.ol-ring { fill: none; stroke: var(--sage-400); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ol-ring 3.2s ease-out 2.4s infinite; opacity: 0; }
@keyframes ol-ring { 0% { scale: 1; opacity: .8; } 70%, 100% { scale: 2.6; opacity: 0; } }
.o-anim .pf2-card:not(.o-seen) .ol-line { stroke-dashoffset: 100; }
.o-anim .pf2-card:not(.o-seen) .ol-area { opacity: 0; }
.o-anim .pf2-card:not(.o-seen) .ol-b { scale: 0; opacity: 0; }
.ol-k { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ol-k span:last-child { color: var(--forest-700); }
.o-viz-blds { display: flex; flex-wrap: wrap; gap: 10px; }
.o-bld { width: 30px; height: 30px; color: var(--sage-300); transition: color .4s var(--o-ease), scale .4s var(--o-ease); transition-delay: calc(var(--i) * 160ms + .3s); }
.o-bld svg { display: block; width: 100%; height: 100%; }
.o-bld.on, .pf2-card.o-seen .o-bld, html:not(.o-anim) .o-bld { color: var(--forest-700); }
/* ---------------------------------------------------------------- 10. checks draw themselves: an empty circle, then the tick, then the fill */
.o-anim .o-ck { transition: background-color .45s var(--o-ease), box-shadow .45s var(--o-ease), color .3s; }
.o-anim .o-ck:not(.o-ck-on) { background-color: transparent !important; background-image: none !important; box-shadow: inset 0 0 0 1.5px var(--sage-300) !important; }
.o-anim .o-ck svg path, .o-anim svg.o-ck-svg path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--o-ease) .2s; }
.o-anim .o-ck:not(.o-ck-on) svg path, .o-anim svg.o-ck-svg:not(.o-ck-on) path { stroke-dashoffset: -24; }
@media (prefers-reduced-motion: reduce) {
.cc-glow, .ol-ring, .suw-play, .lw3-track { animation: none !important; }
.o-ck, .o-ck svg path, .ol-line, .ol-area, .ol-b, .cc-dot, .cc-stops::before { transition: none !important; }
}
.stat-highlight .o-plus, .ib .o-plus { color: var(--sage-300); }
.stat-highlight .o-up { background: var(--sage-500); color: var(--cream-50); }
@media (max-width: 900px) {
.story-thumb .sui-web .suw-body { gap: 7px; padding: 10px 12px 12px; }
.story-thumb .sui-web .suw-h { font-size: .92rem; }
.story-thumb .sui-web .suw-video { aspect-ratio: 16 / 7.5; }
.story-thumb .sui-web .suw-bar { padding: 7px 10px; }
}
/* ---------- Oluna flair v21 (2026-10-13, the operator's fifth review). Result pictures that play, hold and play again;
reviews that move right to left on their own with a focus that pops and a gradient that sweeps; the "Working with
Oluna" panel pinned under the header at once; a straight edge on the packages tile; photos that fade in once they
have loaded instead of wiping; a trend-up mark with room before it; no green "live" dots.
Reduced motion: everything rests in its finished state. ---------- */
/* ---------------------------------------------------------------- 1. results: each picture plays, holds, plays again */
/* 2.5x: the bars grow, give a little up and down, then sit still; the give repeats every ten seconds */
.rsv-row b { transition: none !important; }
.o-anim :is(.rs-card, .pf2-card):not(.o-in) .rsv-row b { transform: scaleX(0); }
.o-anim :is(.rs-card, .pf2-card).o-in .rsv-row b { animation: rsv-grow 1.1s var(--o-ease) .2s both, rsv-give 10s ease-in-out 3.2s infinite; }
.o-anim :is(.rs-card, .pf2-card).o-in .rsv-row.is-on b { animation-delay: .5s, 3.5s; }
@keyframes rsv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rsv-give { 0%, 22%, 100% { transform: scaleX(1); } 5% { transform: scaleX(1.07); } 10% { transform: scaleX(.93); } 15% { transform: scaleX(1.03); } }
/* 30+: a practice for each one served, popping in left to right, holding, then again */
.rsv-clinics { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px 5px; align-content: center; justify-items: center; }
.rsv-clinics b { display: block; width: 100%; max-width: 20px; aspect-ratio: 1; color: var(--sage-400); }
.rsv-clinics b:nth-child(3n + 1) { color: var(--forest-700); }
.rsv-clinics b:nth-child(4n + 2) { color: var(--sage-500); }
.rsv-clinics b svg { display: block; width: 100%; height: 100%; }
.o-anim :is(.rs-card, .pf2-card):not(.o-in) .rsv-clinics b { opacity: 0; scale: 0; }
.o-anim :is(.rs-card, .pf2-card).o-in .rsv-clinics b { animation: rsv-pop 9s var(--o-ease) both infinite; animation-delay: calc(.2s + var(--c) * 90ms + var(--r) * 30ms); }
@keyframes rsv-pop { 0% { opacity: 0; scale: 0; } 4% { opacity: 1; scale: 1.25; } 7%, 86% { opacity: 1; scale: 1; } 92%, 100% { opacity: 0; scale: .4; } }
/* 4x: ad spend flat at $1, return climbing to $4 */
.rsv-roas { align-items: center !important; }
.rsv-roas svg { display: block; width: 100%; height: auto; overflow: visible; }
.rr-grid { stroke: var(--sage-100); stroke-width: 1; fill: none; }
.rr-spend { fill: none; stroke: var(--sage-300); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; }
.rr-ret { fill: none; stroke: var(--forest-700); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; }
.rr-area { fill: rgba(92, 126, 99, .14); stroke: none; }
.rr-dot-s { fill: #fff; stroke: var(--sage-400); stroke-width: 2; }
.rr-dot-r { fill: var(--forest-700); stroke: #fff; stroke-width: 2; }
.rr-dot { transform-box: fill-box; transform-origin: center; }
.rr-t { font-family: var(--font-body, 'Hanken Grotesk', sans-serif); font-size: 11px; font-weight: 600; fill: var(--text-muted); }
.rr-t .rr-v { font-size: 13px; font-weight: 700; }
.rr-t-r, .rr-t-r .rr-v { fill: var(--forest-700); }
.o-anim :is(.rs-card, .pf2-card):not(.o-in) .rsv-roas :is(.rr-spend, .rr-ret) { stroke-dashoffset: 100; }
.o-anim :is(.rs-card, .pf2-card):not(.o-in) .rsv-roas :is(.rr-area, .rr-dot, .rr-t) { opacity: 0; }
.o-anim :is(.rs-card, .pf2-card).o-in .rr-spend { animation: rr-draw-s 9s var(--o-ease) .2s infinite both; }
.o-anim :is(.rs-card, .pf2-card).o-in .rr-ret { animation: rr-draw 9s var(--o-ease) .2s infinite both; }
.o-anim :is(.rs-card, .pf2-card).o-in .rr-area { animation: rr-fade 9s ease .2s infinite both; }
.o-anim :is(.rs-card, .pf2-card).o-in .rr-dot, .o-anim :is(.rs-card, .pf2-card).o-in .rr-t { animation: rr-pop 9s var(--o-ease) .2s infinite both; }
.o-anim :is(.rs-card, .pf2-card).o-in .rr-dot-s, .o-anim :is(.rs-card, .pf2-card).o-in .rr-t-s { animation-name: rr-pop-s; }
@keyframes rr-draw-s { 0% { stroke-dashoffset: 100; opacity: 1; } 10%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rr-draw { 0%, 6% { stroke-dashoffset: 100; opacity: 1; } 24%, 88% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rr-fade { 0%, 18% { opacity: 0; } 30%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes rr-pop-s { 0%, 9% { opacity: 0; scale: .4; } 13%, 88% { opacity: 1; scale: 1; } 95%, 100% { opacity: 0; scale: 1; } }
@keyframes rr-pop { 0%, 22% { opacity: 0; scale: .4; } 27%, 88% { opacity: 1; scale: 1; } 95%, 100% { opacity: 0; scale: 1; } }
/* 45+: a timeline of years that grows out to its end, holds, and grows again */
.rsv-tl { align-items: center !important; }
.tl-axis { position: relative; display: block; width: calc(100% - 64px); height: 46px; margin-top: -6px; }
.tl-axis::before, .tl-fill { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 4px; }
.tl-axis::before { background: var(--sage-100); }
.tl-fill { display: block; background: linear-gradient(90deg, var(--sage-400), var(--forest-700)); transform-origin: left; }
.tl-tick { position: absolute; left: var(--x); top: 9px; width: 0; }
.tl-tick::before { content: ""; position: absolute; left: -7px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--sage-500); }
.tl-tick i { position: absolute; top: 22px; left: 0; translate: -50% 0; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.tl-end { position: absolute; left: 100%; top: 6px; width: 0; }
.tl-end b { position: absolute; left: -10px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--forest-700); box-shadow: 0 0 0 4px rgba(92, 126, 99, .18); }
.tl-end i { position: absolute; top: 2px; left: 16px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--forest-700); white-space: nowrap; }
.o-anim :is(.rs-card, .pf2-card):not(.o-in) .tl-fill { transform: scaleX(0); }
.o-anim :is(.rs-card, .pf2-card):not(.o-in) :is(.tl-tick, .tl-end) { opacity: 0; }
.o-anim :is(.rs-card, .pf2-card).o-in .tl-fill { animation: tl-grow 9s linear .2s infinite both; }
.o-anim :is(.rs-card, .pf2-card).o-in .tl-tick { animation: tl-tick 9s var(--o-ease) infinite both; animation-delay: calc(.2s + var(--i) * .5s); }
.o-anim :is(.rs-card, .pf2-card).o-in .tl-end { animation: tl-tick 9s var(--o-ease) 2.45s infinite both; }
.o-anim :is(.rs-card, .pf2-card).o-in .tl-end b { animation: tl-ring 9s ease-out 2.45s infinite both; }
@keyframes tl-grow { 0% { transform: scaleX(0); transform-origin: left; } 25%, 75% { transform: scaleX(1); transform-origin: left; } 75.1% { transform: scaleX(1); transform-origin: right; } 97% { transform: scaleX(0); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: left; } }
@keyframes tl-tick { 0% { opacity: 0; scale: .3; } 3% { opacity: 1; scale: 1.25; } 6% { scale: 1; } 75% { opacity: 1; scale: 1; } 79%, 100% { opacity: 0; scale: .6; } }
@keyframes tl-ring { 0% { box-shadow: 0 0 0 0 rgba(92, 126, 99, .45); } 12% { box-shadow: 0 0 0 12px rgba(92, 126, 99, 0); } 13%, 100% { box-shadow: 0 0 0 4px rgba(92, 126, 99, .18); } }
/* the same pictures inside proof cards (30+ practices, 45+ years, 50+ admits) and two more: people and numbered steps */
.pf2-card .o-viz.rsv-clinics, .pf2-card .o-viz.rsv-tl { display: grid; margin: 4px 0 2px; }
.pf2-card .o-viz.rsv-tl { display: flex; min-height: 58px; padding-top: 10px; }
.rsv-people b { max-width: 16px; }
.rsv-people b:nth-child(3n + 1) { color: var(--forest-700); }
.o-steps { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 40px; margin: 6px 0 2px; }
.o-steps::before { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--sage-400), var(--forest-700)); transform-origin: left; transition: transform 1.4s var(--o-ease) .2s; }
.o-steps b { position: relative; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
color: var(--forest-700); background: #fff; box-shadow: inset 0 0 0 2px var(--sage-400); transition: background .4s, color .4s, box-shadow .4s, scale .4s var(--o-ease); transition-delay: calc(.3s + var(--i) * .16s); }
.o-steps b:last-child { background: var(--forest-700); color: var(--cream-50); box-shadow: none; }
.o-anim .pf2-card:not(.o-in) .o-steps::before { transform: scaleX(0); }
.o-anim .pf2-card:not(.o-in) .o-steps b { scale: .4; opacity: 0; }
/* ---------------------------------------------------------------- 2. reviews: right to left, a focus that grows and a gradient that drifts in
(2026-10-13 round 6: tan ground; the card in focus grows slowly as it arrives, holds ~2.5s, shrinks as the next one
grows; a soft, wide-edged gradient drifts across it and fades on to the next; big stars; a rounded light-green closing
quote in the bottom-right corner, behind the words) */
.rv5 { position: relative; padding: 104px 0 96px; background: var(--cream-100, #f4f1e8); overflow: hidden; }
.rv5-inner { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--space-8, 48px); }
.rv5-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.rv5-heading { font-size: var(--text-4xl); margin: 10px 0 0; }
.rv5-nav { display: flex; gap: 10px; flex: none; }
.rv5-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--stone-300, #d5cfc0); background: #fff; color: var(--forest-700); display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s var(--o-ease); }
.rv5-btn:hover { background: var(--forest-700); border-color: var(--forest-700); color: var(--cream-50); transform: translateY(-2px); }
.rv5-btn:focus-visible { outline: 2px solid var(--sage-400); outline-offset: 3px; }
.rv5-stage { padding: 30px 0 52px !important; touch-action: pan-y; cursor: grab; } /* a base phone rule gave every section child 20px sides */
.rv5-stage:active { cursor: grabbing; }
.rv5-track { display: flex; align-items: stretch; gap: 30px; width: max-content; will-change: transform; }
.rv5-track.is-moving { transition: transform 1.3s cubic-bezier(.45, .05, .25, 1); }
.rv5-card { flex: none; position: relative; width: min(400px, 80vw); margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 34px 34px 30px;
background: #fff; border: 1px solid rgba(213, 207, 192, .7); border-radius: 26px; overflow: hidden; user-select: none;
box-shadow: 0 1px 2px rgba(22, 36, 27, .04), 0 22px 36px -32px rgba(22, 36, 27, .4);
transition: transform 1.3s cubic-bezier(.45, .05, .25, 1), box-shadow 1.3s ease, border-color 1s ease; }
.rv5-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(105deg, rgba(167, 189, 169, .24) 0%, rgba(203, 218, 201, .26) 32%, rgba(228, 237, 226, .2) 62%, rgba(255, 255, 255, 0) 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 66%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 66%, transparent 100%);
-webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0;
transition: opacity 1.4s ease, -webkit-mask-position 0s linear 1.4s, mask-position 0s linear 1.4s; }
.rv5-card > * { position: relative; z-index: 1; }
.rv5-card.is-focus { transform: translateY(-8px) scale(1.06); border-color: var(--sage-300); box-shadow: 0 2px 4px rgba(22, 36, 27, .05), 0 44px 64px -34px rgba(22, 36, 27, .5); }
.rv5-card.is-focus::before { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0;
transition: opacity .9s ease, -webkit-mask-position 2.2s cubic-bezier(.4, 0, .2, 1), mask-position 2.2s cubic-bezier(.4, 0, .2, 1); }
.rv5-stars { display: inline-flex; gap: 5px; color: #c69a46; }
.rv5-stars svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(150, 110, 40, .25)); }
.rv5-card blockquote { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; line-height: 1.62; color: var(--ink-900, #1c231d); text-wrap: pretty; }
.rv5-card figcaption { display: flex; align-items: center; gap: 12px; padding: 18px 76px 0 0; border-top: 1px solid var(--sage-100); }
.rv5-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--forest-700); color: var(--cream-50);
font-size: 13px; font-weight: 600; letter-spacing: .04em; box-shadow: 0 0 0 3px var(--sage-100); }
.rv5-name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.rv5-mark { position: absolute !important; z-index: 0 !important; right: 26px; bottom: 22px; width: 70px; height: 55px; color: var(--sage-100); transition: color 1.3s ease; pointer-events: none; }
.rv5-mark svg { display: block; width: 100%; height: 100%; }
.rv5-card.is-focus .rv5-mark { color: var(--sage-200); }
/* the loop's silent hop back to the middle copy: nothing animates while it happens */
.rv5-track.no-anim, .rv5-track.no-anim .rv5-card, .rv5-track.no-anim .rv5-card::before, .rv5-track.no-anim .rv5-mark { transition: none !important; }
@media (max-width: 700px) {
.rv5 { padding: 72px 0 60px; }
.rv5-inner { padding: 0 20px; }
.rv5-head { margin-bottom: 20px; }
.rv5-heading { font-size: var(--text-3xl); }
.rv5-btn { width: 44px; height: 44px; }
.rv5-track { gap: 18px; }
.rv5-card { width: 80vw; padding: 28px 24px 24px; }
.rv5-card.is-focus { transform: translateY(-6px) scale(1.035); }
.rv5-stars svg { width: 22px; height: 22px; }
.rv5-card figcaption { padding-right: 64px; }
.rv5-mark { right: 20px; bottom: 18px; width: 58px; height: 46px; }
}
/* ---------------------------------------------------------------- 3. "Working with Oluna": pinned under the header at once */
@media (min-width: 1025px) {
.ed3-panel-inner { top: 0 !important; padding-top: calc(var(--o-hdr, 72px) + 36px) !important; padding-bottom: 56px !important; }
.ed3-panel .editorial-heading { margin-bottom: 24px !important; }
.ed3-fit { gap: 12px !important; padding-top: 22px !important; }
}
/* ---------------------------------------------------------------- 4. homepage packages tile: a straight edge, no gradient */
.hub-grid .hub-card--wide.hcw--photo { background: var(--forest-700) !important; }
.hub-card--wide.hcw--photo .hcw-media::after { display: none !important; }
.hub-card--wide.hcw--photo .hcw-media img { transform-origin: center; }
/* ---------------------------------------------------------------- 5. photos fade in once loaded (no wipe, no jump) */
.o-wipe img { clip-path: none !important; transition: opacity .9s ease, transform 1.4s var(--o-ease) !important; }
.o-anim .o-wipe:not(.o-in) img { clip-path: none !important; opacity: 0; transform: scale(1.03); }
/* ---------------------------------------------------------------- 6. the up mark: a trend line, with room before it */
.o-up { width: 30px; height: 30px; margin: .12em 0 0 .55em; }
.o-up svg { width: 17px; height: 17px; }
.ims-float.o-float strong .o-up { margin: .2em 0 0 .55em !important; }
/* ---------------------------------------------------------------- 7. no green "live" dots anywhere */
.hui-live, .lw2-k::before { display: none !important; }
@media (prefers-reduced-motion: reduce) {
.rs-card .rsv-row b, .rs-card .rsv-clinics b, .rs-card :is(.rr-spend, .rr-ret, .rr-area, .rr-dot, .rr-t), .rs-card :is(.tl-fill, .tl-tick, .tl-end, .tl-end b) {
animation: none !important; transform: none !important; opacity: 1 !important; scale: 1 !important; stroke-dashoffset: 0 !important; }
.rv5-card, .rv5-card::before, .rv5-track { transition: none !important; }
}
/* ---------------------------------------------------------------- 8. phones (2026-10-13 mobile pass) */
/* nothing may push the page sideways: the "Our story" band's decorative shape was 590px wide on a 390px screen */
html, body { overflow-x: clip; }
.split-strip { overflow-x: clip; }
@media (max-width: 600px) {
/* industry "full stack" cards: icon, name and arrow on one row, the description across the whole card */
.o-sag { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "ic tx ar"; align-items: start !important; column-gap: 14px !important; }
.o-sag .sag-icon { grid-area: ic; }
.o-sag .o-arrow { grid-area: ar; }
.o-sag .sag-text { display: contents; }
.o-sag .sag-name { grid-area: tx; align-self: center; }
.o-sag .sag-line { grid-column: 1 / -1; margin-top: 10px; }
/* headings that wrapped with loose line spacing */
.who2-spec-heading, .cc-title { line-height: 1.15 !important; }
/* the stepper's tab row scrolls sideways: fade its edge so that reads */
.stages-track, .stg2 .stages-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* ---------------------------------------------------------------- 9. the drifting leaves stay behind content (they are one fixed layer at z-index 0;
the original sections lift their inner wrapper to z-index 1, the newer blocks and the blog/contact templates did not) */
:is(.story-inner, .ow-inner, .rv5-inner, .rv5-stage, .rr-inner, .rs-inner, .lw3, .pp-inner, .contact-grid, .blog-feed, .author-group, .author-filter,
.interview-media, .post-grid, .post-author-full, .post-related) { position: relative; z-index: 1; }
.img-split > .ims-media, .img-split > .ims-copy { position: relative; z-index: 1; }