/* =====================================================
REWIRE · RELATE · RESTORE — shared site styles
Snow / Floaty / Sahara / Pond / Basil • Josefin Sans + Plus Jakarta Sans
===================================================== */
/* ---------- Brand fonts ----------
Loaded via Google Fonts in each page .
No @font-face here — keeps the stylesheet light and the network
waterfall single-source. */
:root{
/* ============================================================
BRAND PALETTE — only five hexes ship.
Snow #F1F1F1 Floaty #B1C2DE Sahara #DDC08B
Pond #223F4C Basil #889F85
Every other token resolves to one of these or an rgba() of one.
============================================================ */
--snow:#F1F1F1;
--floaty:#B1C2DE;
--sahara:#DDC08B;
--pond:#223F4C;
--basil:#889F85;
/* Opacity-derived shades (no new hex values) */
--basil-deep: var(--pond);
--basil-darker: var(--pond);
--basil-soft: rgba(136,159,133,.55);
--basil-mist: rgba(136,159,133,.30);
--basil-tint: rgba(136,159,133,.15);
--pond-deep: var(--pond);
--pond-darker: var(--pond);
--floaty-soft: rgba(177,194,222,.55);
--sahara-deep: var(--sahara);
--sahara-soft: var(--sahara); /* alias retained for code stability — resolves to solid Sahara, no opacity */
/* Surfaces — all whites collapse to Snow */
--linen: var(--snow);
--linen-soft: var(--snow);
--cream: var(--snow);
--paper: var(--snow);
/* Legacy "forest" aliases — remapped to brand */
--forest-900: var(--pond);
--forest-800: var(--pond);
--forest-700: var(--basil);
--forest-600: var(--basil);
--forest-500: var(--basil);
--moss-400: var(--basil);
--sage-300: var(--basil-soft);
--sage-200: var(--basil-mist);
--sage-100: var(--basil-tint);
--terracotta: var(--sahara);
--ink: var(--pond);
--ink-soft: rgba(34,63,76,.82);
--muted: rgba(34,63,76,.55);
--rule: rgba(34,63,76,.14);
/* Type — Google-hosted system
Display: Josefin Sans (elegant geometric, character at large sizes)
Body: Plus Jakarta Sans (modern, warm, very readable long-form)
Italic emphasis lives in Josefin Sans italic, which is the signature voice. */
--f-display:'Josefin Sans','Helvetica Neue',Arial,sans-serif;
--f-body:'Plus Jakarta Sans','Inter','Helvetica Neue',Arial,sans-serif;
--f-italic:'Josefin Sans','Plus Jakarta Sans',Georgia,serif;
--f-script:'Sacramento',cursive;
--f-mono:'JetBrains Mono', ui-monospace, monospace;
/* Layout */
--maxw:1280px;
--pad-x:clamp(24px, 5vw, 72px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--f-body);
font-weight:400;
color:var(--ink);
background:var(--linen);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* ---------- Utility ---------- */
.eyebrow{
font-family:var(--f-body);
font-size:11px;letter-spacing:.32em;text-transform:uppercase;
font-weight:500;color:var(--forest-600);
display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{
content:"";width:28px;height:1px;background:currentColor;display:inline-block;
}
.eyebrow.no-rule::before{display:none}
.display{
font-family:var(--f-display);
font-weight:400;
letter-spacing:-0.02em;
line-height:1.0;
color:var(--pond);
}
.display em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--basil-deep)}
.display .gold{font-family:var(--f-italic);color:var(--sahara-deep);font-style:italic;font-weight:400}
/* Sans display headings still get italic serif emphasis for the "better you" effect */
h1 em, h2 em, h3 em, h4 em,
.hero h1 em, .hero h1 .mark-r{font-family:var(--f-italic);font-style:italic;font-weight:400}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:.01em;line-height:1.2}
.lead{
font-size:1.05rem;
color:var(--ink-soft);
max-width:54ch;
line-height:1.7;
}
.wrap{
max-width:var(--maxw);
margin:0 auto;
padding:0 var(--pad-x);
}
/* ---------- Nav ---------- */
.site-nav{
position:absolute;top:0;left:0;right:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
padding:28px var(--pad-x);
color:var(--cream);
}
.site-nav.on-light{
color:var(--pond);
background:rgba(255,255,255,.55);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid rgba(255,255,255,.45);
}
.site-nav.on-light .brand-mark{
/* Recolor white-fill SVG to brand navy via mask */
background:var(--pond);
-webkit-mask:url('assets/logo-mark-new.svg') center/contain no-repeat;
mask:url('assets/logo-mark-new.svg') center/contain no-repeat;
}
.site-nav.on-light a:hover,
.site-nav.on-light a.is-active,
.site-nav.on-light a[aria-current="page"]{color:var(--pond)}
.site-nav.on-light .nav-cta{border-color:var(--pond);color:var(--pond)}
.site-nav.on-light .nav-cta:hover{background:var(--pond);color:var(--cream);border-color:var(--pond)}
.site-nav .brand{
font-family:var(--f-display);
font-size:.95rem;
letter-spacing:.04em;
font-weight:500;
display:flex;align-items:center;gap:12px;
text-transform:uppercase;
}
.site-nav .brand-mark{
width:48px;height:48px;
background:url('assets/logo-mark-new.svg') center/contain no-repeat;
flex:none;
}
.site-nav ul{
list-style:none;display:flex;gap:34px;
font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
}
.site-nav a{opacity:.86;transition:opacity .2s}
.site-nav a:hover,.site-nav a.is-active,.site-nav a[aria-current="page"]{opacity:1;color:var(--sahara)}
/* Hide the JS-mirrored mobile "Book a call" on desktop — only the .nav-cta button shows */
.site-nav ul li.nav-cta-mobile{display:none}
.site-nav .nav-cta{
font-size:11px;letter-spacing:.24em;text-transform:uppercase;
padding:12px 20px;border:1px solid currentColor;border-radius:999px;
opacity:.92;transition:.2s;
}
.site-nav .nav-cta:hover{background:var(--cream);color:var(--forest-800);border-color:var(--cream);opacity:1}
.site-nav.on-light .nav-cta:hover{background:var(--forest-700);color:var(--cream);border-color:var(--forest-700)}
/* Hamburger toggle — hidden on desktop, shown ≤880px (injected by nav.js).
Lives inside .site-nav, sits to the right of the brand. */
.nav-toggle{
display:none;
width:44px;height:44px;
align-items:center;justify-content:center;
border:1px solid currentColor;border-radius:999px;
background:transparent;color:inherit;
margin-left:auto;
position:relative;
}
.nav-toggle span{
position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;
border-radius:1px;transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
.site-nav.is-open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.site-nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.site-nav.is-open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media (max-width:880px){
.site-nav{
padding:18px var(--pad-x);
gap:12px;flex-wrap:wrap;
}
.site-nav .brand{font-size:.82rem;gap:10px}
.site-nav .brand-mark{width:38px;height:38px}
.site-nav .nav-cta{display:none}
.nav-toggle{display:inline-flex}
/* Panel: full-width drop, collapsed by default */
.site-nav ul{
order:99;width:100%;
flex-direction:column;gap:0;
background:var(--pond);
color:var(--cream);
border-radius:8px;
padding:8px 8px;
margin-top:8px;
max-height:0;overflow:hidden;opacity:0;
transition:max-height .3s ease, opacity .2s ease, padding .25s ease;
}
.site-nav.is-open ul{
max-height:520px;opacity:1;
padding:14px 8px;
}
.site-nav ul li{width:100%}
.site-nav ul a{
display:block;padding:14px 18px;font-size:12px;letter-spacing:.24em;
border-radius:6px;opacity:.92;
}
.site-nav ul a:hover,.site-nav ul a.is-active{
background:rgba(241,241,241,.08);opacity:1;
}
.site-nav ul::after{
content:"";display:block;height:1px;background:rgba(241,241,241,.12);margin:8px 12px 12px;
}
.site-nav ul li.nav-cta-mobile{display:block}
.site-nav ul li.nav-cta-mobile a{
background:var(--sahara);color:var(--forest-800);text-align:center;
margin:0 8px;
}
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:16px 26px;border-radius:999px;
font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
transition:.25s ease;
white-space:nowrap;
}
.btn .arrow{
display:inline-block;width:18px;height:1px;background:currentColor;position:relative;
transition:width .25s ease;
}
.btn .arrow::after{
content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;
border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);
}
.btn:hover .arrow{width:26px}
.btn--primary{background:var(--forest-700);color:var(--cream)}
.btn--primary:hover{background:var(--forest-800)}
.btn--gold{background:var(--sahara);color:var(--forest-800)}
.btn--gold:hover{background:var(--sahara-soft)}
.btn--ghost-light{border:1px solid rgba(241,241,241,.5);color:var(--cream)}
.btn--ghost-light:hover{background:rgba(241,241,241,.1)}
.btn--ghost-dark{border:1px solid var(--forest-700);color:var(--forest-800)}
.btn--ghost-dark:hover{background:var(--forest-700);color:var(--cream)}
/* ---------- Sections ---------- */
section{position:relative}
.section{padding:clamp(80px,11vw,150px) 0}
.section--tight{padding:clamp(60px,8vw,100px) 0}
.section-head{
display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:end;
margin-bottom:64px;
}
.section-head h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.section-head .lead{margin-left:auto}
@media (max-width:880px){
.section-head{grid-template-columns:1fr;gap:24px}
/* Tighter vertical rhythm on tablets/phones — the desktop 80–150px gaps
read as large empty bands on small screens */
.section{padding:clamp(48px,8vw,84px) 0}
}
/* ---------- Page hero shell (for non-home) ---------- */
.page-hero{
background:var(--forest-800);
color:var(--cream);
padding:170px var(--pad-x) 96px;
position:relative;overflow:hidden;
}
.page-hero::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse at 80% 20%, rgba(221,192,139,.18), transparent 55%),
radial-gradient(ellipse at 10% 90%, rgba(136,159,133,.25), transparent 55%);
pointer-events:none;
}
.page-hero-inner{
max-width:var(--maxw);margin:0 auto;position:relative;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;
}
.page-hero h1{
font-family:var(--f-display);font-weight:400;
font-size:clamp(2.8rem,6vw,5.2rem);line-height:1;letter-spacing:-.015em;
}
.page-hero h1 em{font-style:italic;color:var(--floaty)}
.page-hero .crumbs{
display:flex;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
opacity:.7;margin-bottom:28px;
}
.page-hero .crumbs span{opacity:.6}
.page-hero p.lead{color:rgba(241,241,241,.82);max-width:42ch}
@media (max-width:880px){
.page-hero-inner{grid-template-columns:1fr;gap:32px}
}
/* ---------- Footer ---------- */
.site-footer{
background:var(--forest-900);
color:rgba(241,241,241,.75);
padding:90px var(--pad-x) 32px;
font-size:.9rem;
}
.footer-top{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;
padding-bottom:72px;border-bottom:1px solid rgba(241,241,241,.1);
}
.footer-top h5{
color:var(--sahara-soft);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
margin-bottom:22px;font-weight:500;
}
.footer-top ul{list-style:none}
.footer-top li{padding:7px 0}
.footer-top a{opacity:.78;transition:.2s}
.footer-top a:hover{opacity:1;color:var(--sahara-soft)}
.footer-brand{
font-family:var(--f-display);font-size:1.15rem;color:var(--cream);
letter-spacing:.04em;margin-bottom:18px;display:flex;align-items:center;gap:14px;
text-transform:uppercase;font-weight:500;
}
.footer-brand .brand-mark{
width:64px;height:64px;
background:url('assets/logo-mark.svg') center/contain no-repeat;
flex:none;
}
.footer-tag{max-width:34ch;line-height:1.7;font-size:.92rem;opacity:.85}
.footer-bottom{
max-width:var(--maxw);margin:24px auto 0;padding-top:24px;
display:flex;justify-content:space-between;
font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.55;
}
.footer-mantra{
font-family:var(--f-italic);font-style:italic;font-weight:400;
font-size:1.05rem;line-height:1.5;
color:var(--sahara-soft);letter-spacing:.005em;opacity:1;text-transform:none;
}
@media (max-width:880px){
.footer-top{grid-template-columns:1fr 1fr;gap:40px}
.footer-bottom{flex-direction:column;gap:14px}
}
/* ---------- Photo placeholders (botanical look) ---------- */
.photo{
background:var(--sage-100);
position:relative;overflow:hidden;
border-radius:2px;
}
.photo img{
width:100%;height:100%;object-fit:cover;
filter:saturate(.85) contrast(1.03);
}
/* organic asymmetric crop */
.photo--lobed{
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}
.photo--arch{
border-radius:200px 200px 6px 6px;
}
.photo--leaf{
border-radius:6px 200px 6px 200px;
}
/* leaf line drawing (very simple svg via mask) */
.leaf-flourish{
position:absolute;color:var(--sage-300);opacity:.6;pointer-events:none;
}
/* ---------- Reveal on load ---------- */
@keyframes rise{
from{opacity:0;transform:translateY(22px)}
to{opacity:1;transform:translateY(0)}
}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.1s}
.rise.d2{animation-delay:.2s}
.rise.d3{animation-delay:.35s}
.rise.d4{animation-delay:.5s}
.rise.d5{animation-delay:.65s}
.rise.d6{animation-delay:.8s}
/* ---------- Mantra ticker ---------- */
.mantra{
background:var(--pond);color:var(--sahara);
padding:15px 0;overflow:hidden;
border-top:1px solid rgba(221,192,139,.22);
border-bottom:1px solid rgba(221,192,139,.22);
}
.mantra-track{
display:flex;gap:54px;white-space:nowrap;
font-family:var(--f-italic);font-style:italic;font-weight:400;
font-size:clamp(1.4rem,2.6vw,2.1rem);
animation:scroll 38s linear infinite;
will-change:transform;
}
.mantra-track span.sep{color:var(--sahara);opacity:.5;font-style:normal}
@keyframes scroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* ---------- Pull quotes ---------- */
.pull{
background:var(--forest-800);color:var(--cream);
padding:clamp(80px,10vw,140px) var(--pad-x);
text-align:center;position:relative;overflow:hidden;
}
/* .pull::before gradient overlay removed — section is flat pond */
.pull blockquote{
position:relative;max-width:940px;margin:0 auto 22px;
font-family:var(--f-italic);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.6rem);
line-height:1.32;font-style:italic;
}
.pull blockquote em{color:var(--sahara-soft);font-style:italic}
.pull cite{position:relative;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
opacity:.7;font-style:normal}
/* ---------- Cards / lists shared ---------- */
.bullet-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.bullet-list li{
padding-left:28px;position:relative;font-size:.98rem;color:var(--ink-soft);
}
.bullet-list li::before{
content:"";position:absolute;left:0;top:.65em;width:14px;height:1px;background:var(--sahara);
}
/* number-led list */
.numbered{display:grid;gap:0}
.numbered .n-row{
display:grid;grid-template-columns:80px 1fr;gap:32px;
padding:32px 0;border-top:1px solid var(--rule);
}
.numbered .n-row:last-child{border-bottom:1px solid var(--rule)}
.numbered .n-num{font-family:var(--f-display);font-size:1.4rem;color:var(--sahara);font-style:italic}
.numbered .n-row h4{
font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--forest-800);
margin-bottom:8px;line-height:1.15;
}
.numbered .n-row p{color:var(--ink-soft);font-size:.98rem;max-width:62ch}
@media (max-width:680px){
.numbered .n-row{grid-template-columns:60px 1fr;gap:18px;padding:24px 0}
}
/* ---------- Final CTA ---------- */
.cta-final{
background:var(--forest-700);color:var(--cream);
padding:clamp(64px,7vw,100px) var(--pad-x);text-align:center;
position:relative;overflow:hidden;
}
/* .cta-final::before gradient overlay removed — section is flat basil */
.cta-final h2{
position:relative;font-family:var(--f-display);font-weight:400;
font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;letter-spacing:-.015em;
margin-bottom:24px;
}
.cta-final h2 em{color:var(--sahara-soft);font-style:italic}
.cta-final p{position:relative;max-width:520px;margin:0 auto 40px;opacity:.85;font-size:1.05rem}
.cta-final .cta-row{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- Mini meta bar (top thin bar) ---------- */
.meta-bar{
background:var(--forest-900);color:rgba(241,241,241,.65);
font-size:10px;letter-spacing:.28em;text-transform:uppercase;
padding:8px var(--pad-x);
display:flex;justify-content:space-between;align-items:center;
}
.meta-bar .meta-mantra{
font-family:var(--f-italic);font-style:italic;text-transform:none;
letter-spacing:.02em;font-size:.85rem;color:var(--sahara-soft);
}
@media (max-width:680px){
.meta-bar .meta-right{display:none}
}
/* ---------- Image strip (full-bleed botanical band) ---------- */
.image-strip{
position:relative;overflow:hidden;
background:var(--pond);
}
.image-strip > img{
width:100%;height:clamp(280px,38vw,460px);object-fit:cover;display:block;
filter:saturate(.82) brightness(.78) contrast(1.05);
}
.image-strip .strip-cap{
position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:40px;
max-width:60ch;
color:var(--snow);
text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.image-strip .strip-cap .lbl{
font-family:var(--f-body);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
margin-bottom:14px;opacity:.95;color:var(--sahara);
display:inline-flex;align-items:center;gap:14px;
}
.image-strip .strip-cap .lbl::before{content:"";width:28px;height:1px;background:currentColor}
.image-strip .strip-cap blockquote{
font-family:var(--f-italic);font-weight:400;font-style:italic;
font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.25;letter-spacing:-.005em;
}
.image-strip .strip-cap blockquote em{color:var(--sahara);font-style:italic}
.image-strip::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(180deg, transparent 25%, rgba(34,63,76,.85) 100%),
linear-gradient(90deg, rgba(34,63,76,.55) 0%, transparent 45%);
}
/* ---------- "Moments" 3-up grid ---------- */
.moments{background:var(--cream)}
.moments-row{
display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;
}
.moments-tile{
position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--basil-tint);
}
.moments-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.03)}
.moments-tile .mcap{
position:absolute;left:24px;bottom:24px;color:var(--cream);
text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.moments-tile .mcap small{
display:block;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--sahara-soft);
margin-bottom:8px;
}
.moments-tile .mcap span{
font-family:var(--f-italic);font-style:italic;font-size:1.4rem;line-height:1.1;
}
@media (max-width:880px){
.moments-row{grid-template-columns:1fr 1fr}
.moments-tile{aspect-ratio:1/1}
}
/* ---------- 2-col with image (used on multiple pages) ---------- */
.split-image{
display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;
}
.split-image.flip{grid-template-columns:1fr 1.2fr}
.split-image .si-text{display:flex;flex-direction:column;gap:18px}
.split-image .si-text h3{
font-family:var(--f-display);font-weight:400;
font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.1;color:var(--pond);
}
.split-image .si-text h3 em{font-style:italic;color:var(--basil-deep)}
.split-image .si-text p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.split-image .si-photo{
aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--basil-tint);
}
.split-image .si-photo.arch{border-radius:200px 200px 6px 6px}
.split-image .si-photo.leaf{border-radius:6px 200px 6px 200px}
.split-image .si-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.03)}
@media (max-width:880px){
.split-image,.split-image.flip{grid-template-columns:1fr;gap:32px}
}
/* shared input style */
.field{
display:flex;flex-direction:column;gap:8px;
}
.field label{
font-size:10px;letter-spacing:.3em;text-transform:uppercase;
color:var(--muted);font-weight:500;
}
.field input, .field textarea, .field select{
font:inherit;font-family:var(--f-body);font-size:1rem;
padding:14px 0;background:transparent;border:none;
border-bottom:1px solid var(--rule);color:var(--ink);
transition:.2s;
}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--forest-700);border-bottom-width:2px}
.field textarea{min-height:120px;resize:vertical}
/* ---------- Focus rings (keyboard a11y) ---------- */
:focus{outline:none}
:focus-visible{
outline:2px solid var(--sahara);
outline-offset:3px;
border-radius:2px;
}
.btn:focus-visible{outline-offset:4px}
.site-nav a:focus-visible,.site-nav .nav-cta:focus-visible{outline-color:var(--sahara)}
/* ---------- Scroll-linked reveal ---------- */
.reveal{
opacity:0;transform:translateY(28px);
transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.reveal{opacity:1;transform:none}
.mantra-track{animation:none}
}
/* ---------- Small-phone polish (≤560px) ---------- */
@media (max-width:560px){
:root{--pad-x:clamp(18px,5vw,32px)}
.section{padding:clamp(40px,9vw,60px) 0}
.section--tight{padding:clamp(32px,7vw,52px) 0}
.page-hero{padding:130px var(--pad-x) 64px}
/* Footer collapses to single column on phones */
.footer-top{grid-template-columns:1fr;gap:36px;padding-bottom:48px}
.site-footer{padding:64px var(--pad-x) 28px}
/* Pricing "what's included" grid → 1-col so the 11-char headings don't crush */
.included-grid{grid-template-columns:1fr}
/* Moments tiles in a single column for breathing room */
.moments-row{grid-template-columns:1fr}
/* Tighten section heads */
.section-head{margin-bottom:40px;gap:18px}
/* Cycle dot row — keep dots aligned even when content reflows */
.cycle-flow{gap:28px}
/* Card paddings get a touch tighter */
.pcard,.tier,.focus-card,.inc-cell,.contact-card,.science-aside{
padding-left:24px;padding-right:24px;
}
.contact-form{padding:32px 22px}
/* About shifts — description sits beneath title, less indent */
.about-shifts-rows .desc{padding-left:0;margin-top:4px}
.about-shifts-rows .row{grid-template-columns:44px 1fr;gap:12px}
/* CTA buttons fill width for easier tapping */
.cta-final .cta-row{flex-direction:column;align-items:stretch}
.cta-final .cta-row .btn{justify-content:center}
.hero-cta .btn{justify-content:center;width:100%}
/* Form pills: bump the typo'd .6rem to a legible size */
.radio-row label{font-size:11px;padding:10px 14px}
}
/* ---------- iOS Safari viewport (svh) for full-bleed heroes ---------- */
@supports (height:100svh){
.hero{min-height:100svh}
.hero-inner{min-height:100svh}
}
/* ---------- Inline icons ----------
is hydrated to