/* Marianna Chrysostomou — site styles.
   Palette from the logo: navy ink + teal subtitle, on warm cream, with
   fruit-soft accents (butter, peach, lilac, mint). */

:root {
  --navy: #1B3A85;
  --navy-2: #2B50A8;
  --deep: #0F2152;
  --teal: #3A9C9F;
  --aqua: #62C3D0;
  --mint: #E2F2EF;
  --cream: #FBF8F2;
  --paper: #FFFFFF;
  --butter: #F7E9BE;
  --peach: #F8DCC6;
  --lilac: #E5DEF6;
  --ink: #15213F;
  --muted: #5A6580;
  --line: rgba(27, 58, 133, .12);
  --shadow-s: 0 2px 6px rgba(15, 33, 82, .05), 0 8px 24px rgba(15, 33, 82, .06);
  --shadow-m: 0 4px 12px rgba(15, 33, 82, .06), 0 20px 50px rgba(15, 33, 82, .10);
  --r: 28px;
  --r-s: 16px;
  --serif: 'Literata', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --hdr: 84px;
  color-scheme: light;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 17px/1.65 var(--sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { /* paper grain */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--deep); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.28rem; }
h1 em, h2 em { font-style: italic; color: var(--teal); }
p { margin: 0 0 1em; text-wrap: pretty; }
address { font-style: normal; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic.flip { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 8px; }
.muted { color: var(--muted); }

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.wrap.narrow { width: min(860px, 100% - 40px); }
.center { text-align: center; }
.sec { padding-block: clamp(48px, 7vw, 96px); position: relative; }
.sec + .sec { padding-top: clamp(16px, 3vw, 40px); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--paper); --fg: var(--navy);
  display: inline-flex; align-items: center; gap: .55em; padding: .95em 1.5em; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 0; font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  text-decoration: none; position: relative; isolation: isolate; overflow: hidden; white-space: nowrap;
  transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .3s;
}
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .3s; }
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { --bg: linear-gradient(135deg, var(--navy), var(--navy-2)); --fg: #fff; background: var(--bg); box-shadow: 0 10px 24px -8px rgba(27, 58, 133, .55); }
.btn-primary:hover { box-shadow: 0 16px 30px -10px rgba(27, 58, 133, .6); }
.btn-soft { --bg: rgba(27, 58, 133, .07); background: var(--bg); }
.btn-soft:hover { --bg: rgba(27, 58, 133, .12); }
.btn-light { --bg: #fff; --fg: var(--navy); box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }
.btn-ghost-light { --bg: rgba(255,255,255,.12); --fg: #fff; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn-sm { padding: .7em 1.15em; font-size: .9rem; }
.btn-block { width: 100%; justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; text-decoration: none; color: var(--navy); }
.link-arrow .ic { transition: transform .3s var(--spring); }
.link-arrow:hover .ic { transform: translateX(5px); }
.round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-s); transition: transform .3s var(--spring), background .2s; }
.round:hover { transform: scale(1.08); background: var(--navy); color: #fff; }

.eyebrow { display: inline-flex; align-items: center; gap: .5em; font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 1.1em; }
.eyebrow .ic { width: 1.1em; height: 1.1em; }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.12rem; color: var(--muted); }
.hero-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 60ch; }
.center .hero-lead { margin-inline: auto; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; padding: 12px 0; transition: transform .45s var(--ease), padding .3s; }
.hdr-in {
  width: min(1240px, 100% - 24px); margin-inline: auto; display: flex; align-items: center; gap: 20px;
  padding: 8px 10px 8px 22px; border-radius: 999px; background: rgba(251, 248, 242, .72);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s;
}
.hdr.scrolled .hdr-in { background: rgba(255, 255, 255, .85); border-color: var(--line); box-shadow: var(--shadow-s); }
.hdr.hide { transform: translateY(-120%); }
.brand img { height: 62px; width: auto; transition: height .3s; }
.hdr.scrolled .brand img { height: 52px; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; display: flex; align-items: center; }
.nav a { display: block; padding: .6em 1em; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.nav a:hover { background: rgba(27, 58, 133, .07); color: var(--navy); }
.nav li.active > a { color: var(--navy); background: rgba(27, 58, 133, .09); }
.sub-btn { border: 0; background: none; padding: 6px; margin-left: -10px; border-radius: 50%; display: grid; color: var(--muted); }
.sub-btn .ic { width: 16px; height: 16px; transition: transform .3s; }
.has-sub:hover .sub-btn .ic, .has-sub.open .sub-btn .ic { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 420px; padding: 10px; border-radius: 22px;
  background: #fff; box-shadow: var(--shadow-m); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98); transform-origin: top center;
  transition: opacity .25s, transform .35s var(--ease), visibility .25s;
}
.sub::before { content: ''; position: absolute; inset: -14px 0 auto; height: 14px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.sub a { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; white-space: normal; }
.sub a b { display: block; font-size: .95rem; color: var(--deep); }
.sub a small { display: block; color: var(--muted); font-weight: 500; font-size: .82rem; line-height: 1.4; }
.sub-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--teal); flex: none; transition: transform .3s var(--spring); }
.sub a:hover .sub-ic { transform: rotate(-8deg) scale(1.08); }
.hdr-cta { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(27,58,133,.08); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .35s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; right: 19px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); right: 13px; }

.mnav { position: fixed; inset: 0; z-index: 45; background: linear-gradient(160deg, var(--cream), var(--mint)); padding: calc(var(--hdr) + 28px) 24px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; }
.mnav[hidden] { display: none; }
.mnav ul { list-style: none; margin: 0; padding: 0; }
.mnav > nav > ul > li { opacity: 0; transform: translateY(16px); animation: rise .6s var(--ease) forwards; animation-delay: calc(var(--i) * 60ms + 80ms); border-bottom: 1px solid var(--line); }
.mnav > nav > ul > li > a { display: block; padding: 14px 0; font: 500 1.9rem/1.2 var(--serif); color: var(--deep); text-decoration: none; }
.mnav-sub { padding-bottom: 14px !important; display: grid; gap: 4px; }
.mnav-sub a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--muted); font-weight: 600; text-decoration: none; }
.mnav-sub .ic { color: var(--teal); }
.mnav-foot { display: grid; gap: 10px; margin-top: auto; }
.mnav-foot .btn { justify-content: center; }
body.menu-open { overflow: hidden; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Blobs & apple line ---------- */
.blob { position: absolute; width: 46vw; max-width: 640px; aspect-ratio: 1; z-index: -1; filter: blur(60px); opacity: .7; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: radial-gradient(circle at 30% 30%, var(--c1), var(--c2)); animation: blobmove 22s ease-in-out infinite alternate; pointer-events: none; }
.blob.b1 { top: -12%; right: -10%; }
.blob.b2 { bottom: -20%; left: -14%; animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes blobmove { 0% { transform: translate(0, 0) rotate(0) scale(1); } 50% { transform: translate(-4%, 6%) rotate(40deg) scale(1.08); } 100% { transform: translate(5%, -3%) rotate(80deg) scale(.95); } }
.apple-line { position: absolute; pointer-events: none; }
.apple-line path { stroke: var(--aqua); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.apple-line.draw.in path, .in .apple-line.draw path, [data-reveal].in .apple-line path { animation: draw 2.6s var(--ease) forwards; }
.apple-line path:nth-child(2) { animation-delay: .9s !important; }
.apple-line path:nth-child(3) { animation-delay: 1.2s !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); overflow: hidden; margin-top: calc(var(--hdr) * -1); padding-top: calc(var(--hdr) + clamp(24px, 4vw, 56px)); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.hl { position: relative; white-space: nowrap; color: var(--navy); font-style: italic; }
.hl svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .38em; overflow: visible; }
.hl path { fill: none; stroke: var(--aqua); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.in .hl path, .hl.in path { animation: draw 1.2s var(--ease) .8s forwards; }
.hl.alt path { stroke: #F2C46B; animation-delay: 1.3s !important; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.hero-actions.center { justify-content: center; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding: 0; margin: 40px 0 0; }
.hero-proof li { display: flex; align-items: center; gap: 10px; }
.hero-proof b { font: 600 1.6rem/1 var(--serif); color: var(--navy); display: flex; }
.hero-proof span { font-size: .85rem; color: var(--muted); line-height: 1.3; max-width: 13ch; }
.stars-inline .ic, .stars .ic { width: 16px; height: 16px; color: #F5B83D; }
.hero-art { position: relative; aspect-ratio: 4 / 4.6; max-width: 520px; justify-self: center; width: 100%; }
.hero-apple { inset: -9% -10% -6% -10%; width: 120%; height: 115%; z-index: 0; }
.portrait { position: absolute; inset: 6% 6% 4%; overflow: hidden; z-index: 1; box-shadow: var(--shadow-m); background: var(--mint); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.04); }
.morph { border-radius: 60% 40% 48% 52% / 46% 52% 48% 54%; animation: morph 14s ease-in-out infinite; }
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 48% 52% / 46% 52% 48% 54%; }
  33% { border-radius: 44% 56% 58% 42% / 56% 42% 58% 44%; }
  66% { border-radius: 52% 48% 40% 60% / 42% 58% 44% 56%; }
}
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-m); animation: bob 6s ease-in-out infinite; }
.float b { display: block; font-size: .9rem; color: var(--deep); line-height: 1.2; }
.float small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.25; }
.float > .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--mint); color: var(--teal); }
.float img { width: 64px; height: auto; }
.float .emoji { font-size: 1.7rem; width: 40px; height: 40px; display: grid; place-items: center; background: var(--butter); border-radius: 12px; }
.f1 { top: 10%; left: -8%; }
.f2 { bottom: 16%; right: -10%; animation-delay: -2s; }
.f3 { bottom: 2%; left: 4%; animation-delay: -4s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; width: 26px; height: 42px; border: 2px solid rgba(27,58,133,.3); border-radius: 14px; transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--navy); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; background: var(--deep); color: #fff; padding: 18px 0; transform: rotate(-1.2deg); margin: 0 -2vw; box-shadow: var(--shadow-m); }
.marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { font: italic 500 1.3rem/1 var(--serif); white-space: nowrap; }
.marquee i { color: var(--aqua); display: grid; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- GESY ---------- */
.gesy { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 3vw, 32px) clamp(22px, 4vw, 48px); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); position: relative; overflow: hidden; }
.gesy::before { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(98,195,208,.25), transparent 70%); }
.gesy-logo { flex: none; width: clamp(120px, 16vw, 180px); padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gesy-title { font: 500 clamp(1.25rem, 2.2vw, 1.75rem)/1.25 var(--serif); color: var(--deep); margin: 0 0 .35em; }
.gesy-title strong { color: #1A1F8C; font-weight: 700; }
.gesy-sub { margin: 0; color: var(--muted); }
.gesy-or { font: italic 600 1.2rem/1 var(--serif); color: var(--teal); margin-right: .2em; }
.gesy-sub strong { color: var(--navy); }

/* ---------- About teaser ---------- */
.at-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.at-photo { margin: 0; position: relative; }
.at-frame { border-radius: 200px 200px var(--r) var(--r); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-m); }
.at-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.2s var(--ease); }
.at-photo:hover img { transform: scale(1.04); }
.at-badge { position: absolute; left: -24px; bottom: 28px; right: 18%; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--deep); color: #fff; font-size: .82rem; line-height: 1.4; box-shadow: var(--shadow-m); }
.at-badge .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255,255,255,.12); color: var(--aqua); }
.mini-timeline { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.mini-timeline li { display: flex; gap: 16px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); transition: transform .4s var(--spring); }
.mini-timeline li:hover { transform: translateX(6px); }
.mini-timeline b { color: var(--deep); }
.mini-timeline p { margin: 2px 0 0; color: var(--muted); font-size: .94rem; }
.mt-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--mint), var(--lilac)); color: var(--navy); }

/* ---------- Service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc-grid.three { grid-template-columns: repeat(3, 1fr); }
.svc, .svc-row, .pillar, .goal-cards li, .r-card { --gx: 50%; --gy: 50%; }
.svc { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px 26px; border-radius: var(--r); background: #fff; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-s); overflow: hidden; isolation: isolate; transition: transform .5s var(--spring), box-shadow .4s; }
[data-glow]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--gx) var(--gy), rgba(98,195,208,.18), transparent 50%); opacity: 0; transition: opacity .3s; }
[data-glow]:hover::before { opacity: 1; }
.svc:hover { transform: translateY(-8px); box-shadow: var(--shadow-m); }
.svc h3 { margin: 14px 0 4px; }
.svc p { color: var(--muted); font-size: .94rem; margin: 0 0 18px; }
.svc-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--navy); background: linear-gradient(135deg, var(--mint), #fff); box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--spring), background .3s, color .3s; }
.svc-ic .ic { width: 30px; height: 30px; }
.svc:hover .svc-ic { transform: rotate(-8deg) scale(1.08); background: var(--navy); color: #fff; }
.svc-grid > :nth-child(2) .svc-ic { background: linear-gradient(135deg, var(--butter), #fff); }
.svc-grid > :nth-child(3) .svc-ic { background: linear-gradient(135deg, var(--lilac), #fff); }
.svc-grid > :nth-child(4) .svc-ic { background: linear-gradient(135deg, var(--peach), #fff); }
.svc-go { margin-top: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(27,58,133,.07); color: var(--navy); transition: transform .4s var(--spring), background .3s, color .3s; }
.svc:hover .svc-go, .svc-row:hover .svc-go { background: var(--navy); color: #fff; transform: rotate(45deg); }

/* ---------- Journey ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.steps-line { position: absolute; top: 58px; left: 8%; width: 84%; height: 40px; z-index: 0; overflow: visible; }
.steps-line path { fill: none; stroke: var(--aqua); stroke-width: 2; stroke-dasharray: .006 .012; opacity: .7; }
.steps li { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.step-n { position: absolute; top: 0; left: 50%; margin-left: 30px; width: 28px; height: 28px; border-radius: 50%; background: var(--deep); color: #fff; font: 700 .8rem/28px var(--sans); z-index: 2; }
.step-ic { width: 116px; height: 116px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: #fff; box-shadow: var(--shadow-m), inset 0 0 0 10px var(--cream), inset 0 0 0 11px var(--line); transition: transform .5s var(--spring); }
.step-ic .ic { width: 38px; height: 38px; }
.steps li:hover .step-ic { transform: translateY(-6px) rotate(-6deg); }
.steps h3 { font-size: 1.15rem; margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: .92rem; }

/* ---------- Reviews ---------- */
.reviews { overflow: hidden; }
.rev-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.rev-head .sec-head { margin-bottom: 24px; }
.rev-score { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 18px 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); margin-bottom: 24px; }
.rev-score .g .ic { width: 40px; height: 40px; }
.rev-score .g { grid-row: span 2; }
.score { display: flex; align-items: center; gap: 10px; }
.score b { font: 600 2rem/1 var(--serif); color: var(--deep); }
.rev-total { font-size: .85rem; color: var(--muted); }
.rev-links { grid-column: 1 / -1; display: flex; gap: 14px; margin-top: 8px; font-size: .85rem; }
.rev-links a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.rev-links .ic { width: 14px; height: 14px; }
.rev-filter { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(27,58,133,.06); margin-bottom: 28px; }
.rev-filter button { border: 0; background: none; padding: .5em 1.1em; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--muted); transition: background .25s, color .25s; }
.rev-filter button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-s); }
.rev-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(20px, calc((100vw - 1200px) / 2)) 30px; scrollbar-width: none; scroll-padding-inline: max(20px, calc((100vw - 1200px) / 2)); }
.rev-track::-webkit-scrollbar { display: none; }
.rev { position: relative; flex: 0 0 min(380px, 82vw); scroll-snap-align: start; margin: 0; padding: 30px 28px 24px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); display: flex; flex-direction: column; transition: transform .45s var(--spring), box-shadow .3s, opacity .3s; }
.rev:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow-m); }
.rev[hidden] { display: none; }
.rev-q { position: absolute; top: -8px; right: 22px; font: italic 600 6rem/1 var(--serif); color: hsl(var(--h) 55% 80% / .55); pointer-events: none; }
.rev blockquote { margin: 0 0 22px; flex: 1; }
.rev blockquote p { margin: 0; white-space: pre-line; font-size: 1rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rev figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px dashed var(--line); }
.rev figcaption b { display: block; font-size: .92rem; color: var(--deep); text-transform: capitalize; }
.rev figcaption small { display: block; font-size: .78rem; color: var(--muted); }
.rev .stars { margin-left: auto; display: flex; }
.rev .stars .ic { width: 13px; height: 13px; }
.av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 45% 55%), hsl(calc(var(--h) + 40) 50% 45%)); flex: none; }
.rev-nav { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Recipe teaser / cards ---------- */
.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.r-card { position: relative; display: block; border-radius: var(--r); background: #fff; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-s); overflow: hidden; isolation: isolate; transition: transform .5s var(--spring), box-shadow .4s; }
.r-card:hover { transform: translateY(-8px) rotate(.4deg); box-shadow: var(--shadow-m); }
.r-card h3 { margin: 8px 0 6px; font-size: 1.45rem; }
.r-card p { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.r-body { padding: 22px 26px 24px; }
.r-cat { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.r-meta { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.r-meta li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--cream); font-size: .85rem; font-weight: 700; color: var(--navy); }
.r-meta .ic { width: 16px; height: 16px; color: var(--teal); }
.r-art { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(circle at 25% 30%, var(--a), transparent 60%), radial-gradient(circle at 80% 70%, var(--b), transparent 60%), linear-gradient(135deg, var(--a), var(--b)); overflow: hidden; }
.r-art.big { aspect-ratio: 1; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; box-shadow: var(--shadow-m); animation: morph 16s ease-in-out infinite; }
.r-e { position: absolute; font-size: clamp(3rem, 7vw, 5rem); filter: drop-shadow(0 12px 18px rgba(15,33,82,.18)); transition: transform .6s var(--spring); animation: bob 5s ease-in-out infinite; }
.r-art.big .r-e { font-size: clamp(4rem, 10vw, 8rem); }
.r-e.e0 { left: 16%; top: 22%; transform: rotate(-18deg); }
.r-e.e1 { right: 18%; top: 14%; animation-delay: -1.5s; }
.r-e.e2 { right: 34%; bottom: 10%; animation-delay: -3s; transform: rotate(10deg); }
.r-card:hover .r-e.e0 { transform: rotate(-30deg) scale(1.12); }
.r-card:hover .r-e.e1 { transform: translateY(-10px) scale(1.15); }
.r-steam { position: absolute; left: 46%; top: 8%; width: 60px; opacity: .55; }
.r-steam path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 6; animation: steam 2.4s linear infinite; }
@keyframes steam { to { stroke-dashoffset: -28; } }
.fav { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--navy); box-shadow: var(--shadow-s); transition: transform .4s var(--spring); }
.fav:hover { transform: scale(1.12); }
[data-fav][aria-pressed="true"] .ic { fill: #E5536B; color: #E5536B; animation: pop .45s var(--spring); }
@keyframes pop { 50% { transform: scale(1.4); } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--hdr) + 24px); }
.faq-card { padding: 24px; border-radius: 22px; background: linear-gradient(135deg, var(--mint), var(--lilac)); }
.faq-card p { font: 500 1.2rem/1.3 var(--serif); color: var(--deep); }
.acc { display: grid; gap: 12px; }
.acc-item, .be-item, .r-extra { border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); overflow: hidden; transition: box-shadow .3s; }
.acc-item[open], .be-item[open], .r-extra[open] { box-shadow: var(--shadow-m); }
.acc-item summary, .be-item summary, .r-extra summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; font-weight: 700; color: var(--deep); }
summary::-webkit-details-marker { display: none; }
.acc-n { font: italic 500 1rem/1 var(--serif); color: var(--teal); }
.acc-q { flex: 1; }
.acc-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--cream); color: var(--navy); transition: transform .4s var(--spring), background .3s, color .3s; }
.acc-x .ic { width: 18px; height: 18px; }
[open] > summary .acc-x { transform: rotate(135deg); background: var(--navy); color: #fff; }
.acc-a, .be-item > p, .rx-body { padding: 0 22px 22px 56px; color: var(--muted); }
.acc-a p { margin: 0; }
details[open] > :not(summary) { animation: fadeDown .45s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(24px, 4vw, 48px) 0; }
.cta-inner { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 80px); border-radius: clamp(28px, 4vw, 48px); color: #fff; background: radial-gradient(circle at 15% 20%, rgba(98,195,208,.35), transparent 45%), radial-gradient(circle at 85% 90%, rgba(98,195,208,.25), transparent 40%), linear-gradient(135deg, var(--deep), var(--navy)); box-shadow: var(--shadow-m); }
.cta-inner h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-inner h2 em { color: var(--aqua); }
.cta-sub { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--aqua); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-apple { width: 420px; height: 420px; right: -80px; top: -60px; z-index: -1; opacity: .5; }
.cta-apple path { stroke: rgba(255,255,255,.4); }

/* ---------- Contact ---------- */
.ch-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-bottom: 40px; }
.quick { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.sec > .wrap > .quick { grid-template-columns: repeat(3, 1fr); }
.quick a { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); transition: transform .4s var(--spring), box-shadow .3s; min-width: 0; }
.quick a:hover { box-shadow: var(--shadow-m); }
.quick small { display: block; font-size: .78rem; color: var(--muted); }
.quick b { display: block; color: var(--deep); overflow-wrap: anywhere; }
.q-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; background: var(--navy); color: #fff; }
.quick li:nth-child(2) .q-ic { background: var(--teal); }
.quick li:nth-child(3) .q-ic { background: linear-gradient(135deg, #F2C46B, #E79A6B); }
.card-form { padding: clamp(22px, 3.5vw, 40px); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); position: relative; }

.hours { padding: 20px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); }
.hours-top { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.hours-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--mint); color: var(--teal); flex: none; }
.hours-title { margin: 0; font-weight: 800; color: var(--deep); }
.hours-range { margin: 0; color: var(--muted); font-size: .9rem; }
.status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--cream); font-size: .8rem; white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #B9C0CF; }
.status.open { background: #E3F5EA; color: #19734A; }
.status.open i { background: #2FB36B; box-shadow: 0 0 0 0 rgba(47,179,107,.6); animation: ping 1.8s infinite; }
.status.closed { background: #FBEDEA; color: #A14530; }
.status.closed i { background: #E07A5F; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(47,179,107,0); } 100% { box-shadow: 0 0 0 0 rgba(47,179,107,0); } }
.week { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week li { display: grid; justify-items: center; gap: 6px; font-size: .74rem; color: var(--muted); }
.week .bar { width: 100%; height: 64px; border-radius: 10px; background: var(--cream); position: relative; overflow: hidden; }
.week .bar span { position: absolute; left: 0; right: 0; top: 18%; height: 56%; border-radius: 8px; background: linear-gradient(180deg, var(--aqua), var(--teal)); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--spring); transition-delay: calc(var(--d, 0) * 70ms); }
.hours.in .week .on .bar span { transform: scaleY(1); }
.week .off .bar { background: repeating-linear-gradient(-45deg, var(--cream), var(--cream) 5px, #F1ECE2 5px, #F1ECE2 10px); }
.week .d { font-weight: 800; color: var(--deep); }
.week .t { font-size: .66rem; }
.week li.today .bar { box-shadow: 0 0 0 2px var(--navy); }
.week li.today .d { color: var(--navy); }

.loc { display: grid; gap: 18px; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); justify-self: center; }
.seg-pill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); transition: transform .5s var(--spring); }
.seg[data-active="1"] .seg-pill { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .8em 1.8em; font-weight: 800; color: var(--muted); transition: color .3s; }
.seg button[aria-selected="true"] { color: #fff; }
.loc-panels { position: relative; }
.loc-panel { display: grid; gap: 14px; animation: fadeUp .5s var(--ease); }
.loc-panel[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.map { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-m); aspect-ratio: 21 / 9; background: var(--mint); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85) hue-rotate(-6deg); }
.addr { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); }
.addr-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; flex: none; }
.addr .btn { margin-left: auto; }
.addr strong { color: var(--deep); font-size: 1.05rem; }
.follow { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.follow p { margin: 0; font-weight: 700; color: var(--muted); }

/* Form */
.cform { display: grid; gap: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { position: relative; }
.field input, .field textarea { width: 100%; padding: 26px 18px 10px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--cream); font: inherit; color: var(--ink); transition: border-color .25s, background .25s, box-shadow .25s; resize: vertical; }
.field textarea { min-height: 140px; padding-bottom: 34px; }
.field label { position: absolute; left: 19px; top: 18px; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform .25s var(--ease), color .25s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--aqua); background: #fff; box-shadow: 0 0 0 4px rgba(98,195,208,.18); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.76); color: var(--teal); font-weight: 700; }
.field.bad input, .field.bad textarea { border-color: #E07A5F; background: #FFF6F3; }
.count { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); }
.count svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.count circle { fill: none; stroke: var(--line); stroke-width: 4; }
.count .count-arc { stroke: var(--teal); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset .2s; }
.count.warn .count-arc { stroke: #E07A5F; }
.chips-in { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips-in legend { font-size: .85rem; color: var(--muted); margin-bottom: 8px; float: left; width: 100%; }
.chip-in input { position: absolute; opacity: 0; }
.chip-in span { display: inline-flex; align-items: center; gap: 6px; padding: .55em 1.1em; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: .92rem; cursor: pointer; transition: all .25s; }
.chip-in span .ic { width: 16px; height: 16px; }
.chip-in input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-in input:focus-visible + span { outline: 3px solid var(--aqua); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--muted); cursor: pointer; }
.consent input { position: absolute; opacity: 0; }
.consent .box { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--cream); color: transparent; transition: all .25s var(--spring); margin-top: 1px; }
.consent .box .ic { width: 15px; height: 15px; }
.consent input:checked + .box { background: var(--teal); border-color: var(--teal); color: #fff; transform: scale(1.08); }
.consent input:focus-visible + .box { outline: 3px solid var(--aqua); outline-offset: 2px; }
.consent.bad .box { border-color: #E07A5F; }
.captcha { min-height: 78px; }
.captcha.bad { border-radius: 6px; box-shadow: 0 0 0 2px #E07A5F; width: fit-content; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-msg { margin: 0; font-size: .9rem; color: #A14530; }
.btn-send .spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-send.busy .spin { display: block; }
.btn-send.busy .ic { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sent { position: absolute; inset: 0; border-radius: inherit; background: #fff; display: grid; place-content: center; justify-items: center; text-align: center; padding: 32px; z-index: 2; animation: fadeUp .5s var(--ease); }
.sent[hidden] { display: none; }
.sent svg { width: 96px; height: 96px; margin-bottom: 18px; }
.sent circle, .sent path { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease) forwards; }
.sent path { animation-delay: .5s; stroke-width: 4; }
.sent-title { font: 500 1.5rem/1.3 var(--serif); color: var(--deep); }

/* ---------- Footer ---------- */
.ftr { position: relative; margin-top: 80px; background: var(--deep); color: rgba(255,255,255,.75); padding: 40px 0 28px; }
.ftr-wave { position: absolute; left: 0; bottom: 100%; width: 100%; height: 60px; fill: var(--deep); }
.ftr-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 36px; }
.ftr-brand img { width: 220px; margin-bottom: 16px; }
.ftr-brand p { font-size: .94rem; }
.ftr-h { font: 500 1.2rem/1 var(--serif); color: #fff; margin-bottom: 18px; }
.ftr a { color: rgba(255,255,255,.82); text-decoration: none; }
.ftr a:hover { color: var(--aqua); }
.ftr-links, .ftr-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .94rem; }
.ftr-contact li { display: flex; gap: 10px; align-items: flex-start; }
.ftr-contact .ic { color: var(--aqua); margin-top: 3px; width: 18px; height: 18px; }
.ftr-contact b { color: #fff; }
.ftr-gesy { margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #fff; color: var(--deep); font-size: .78rem; font-weight: 700; line-height: 1.3; }
.ftr-gesy img { width: 74px; }
.ftr-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; }
.ftr-bottom p { margin: 0; }
.socials { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(27,58,133,.08); color: var(--navy); transition: transform .35s var(--spring), background .25s, color .25s; }
.socials a:hover { transform: translateY(-3px) rotate(-8deg); background: var(--navy); color: #fff; }
.socials.light a { background: rgba(255,255,255,.1); color: #fff; }
.socials.light a:hover { background: var(--aqua); color: var(--deep); }
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: none; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 14px 30px -8px rgba(27,58,133,.6); transform: translateY(120px); transition: transform .5s var(--spring); }
.fab.show { transform: none; }

/* ---------- Inner page heroes ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(var(--hdr) * -1); padding: calc(var(--hdr) + clamp(24px, 4vw, 48px)) 0 clamp(40px, 6vw, 80px); }
.page-hero.slim { padding-bottom: 24px; }
.ph-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); }
.center .crumbs ol { justify-content: center; }
.crumbs li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); }
.bio-photo { position: relative; aspect-ratio: 4 / 4.6; max-width: 480px; width: 100%; justify-self: center; }

/* Bio */
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(var(--aqua), var(--lilac)); }
.timeline li { position: relative; width: 50%; padding: 0 48px 36px 0; }
.timeline li:nth-child(even) { margin-left: 50%; padding: 0 0 36px 48px; }
.tl-dot { position: absolute; top: 6px; right: -24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); box-shadow: var(--shadow-m), 0 0 0 6px var(--cream); z-index: 1; }
.timeline li:nth-child(even) .tl-dot { right: auto; left: -24px; }
.tl-card { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); transition: transform .45s var(--spring); }
.tl-card:hover { transform: translateY(-4px); }
.tl-y { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--mint); color: var(--teal); font-size: .76rem; font-weight: 800; margin-bottom: 10px; }
.tl-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.ph2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.big-quote { margin: 0 0 22px; font: italic 500 clamp(1.4rem, 2.4vw, 1.9rem)/1.35 var(--serif); color: var(--navy); position: relative; padding-left: 0; }
.big-quote::before { content: '“'; display: block; font-size: 4rem; line-height: .6; color: var(--aqua); }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pillar { position: relative; overflow: hidden; isolation: isolate; padding: 24px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); transition: transform .45s var(--spring); }
.pillar:nth-child(even) { transform: translateY(24px); }
.pillar:hover { transform: translateY(-6px); }
.pillar:nth-child(even):hover { transform: translateY(18px); }
.pl-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--navy); color: #fff; margin-bottom: 14px; }
.pillar h3 { font-size: 1.1rem; }
.pillar p { color: var(--muted); font-size: .92rem; margin: 0; }
.bubbles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bubbles li { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 14px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); font: 500 1.15rem/1 var(--serif); color: var(--deep); transition: transform .45s var(--spring); }
.bubbles li:hover { transform: translateY(-6px) rotate(-2deg); }
.bubbles span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--cream); }
.ent-card { display: flex; gap: clamp(18px, 3vw, 36px); align-items: flex-start; padding: clamp(24px, 4vw, 48px); border-radius: var(--r); background: linear-gradient(135deg, #fff, var(--mint)); box-shadow: var(--shadow-m); }
.ent-ic { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--teal); color: #fff; flex: none; }
.ent-ic .ic { width: 34px; height: 34px; }
.ent-card p { color: var(--muted); }
.ent-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Services */
.svc-art { display: grid; place-items: center; }
.svc-big { display: grid; gap: 14px; }
.svc-row { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: clamp(14px, 3vw, 32px); padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 36px); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); transition: transform .5s var(--spring), box-shadow .3s; }
.svc-row:hover { transform: translateX(8px); box-shadow: var(--shadow-m); }
.svc-num { font: italic 500 2.6rem/1 var(--serif); color: var(--aqua); opacity: .6; }
.svc-txt h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: 4px; }
.svc-txt p { margin: 0; color: var(--muted); }
.svc-row .svc-go { margin: 0; }
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.note-card { padding: 30px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); }
.note-card.alt { background: linear-gradient(135deg, var(--butter), var(--peach)); }
.note-card > .ic { width: 50px; height: 50px; padding: 12px; border-radius: 16px; background: var(--navy); color: #fff; margin-bottom: 16px; }
.note-card p { color: var(--muted); margin-bottom: 10px; }
.note-card.alt p { color: #6A5A4A; }

.scale-art { position: relative; width: min(360px, 80vw); aspect-ratio: 1; }
.tape-svg { width: 100%; height: 100%; animation: spinSlow 60s linear infinite; }
.tape-svg circle { fill: none; stroke-width: 18; }
.ts-bg { stroke: #fff; }
.ts-arc { stroke: url(#none); stroke: var(--aqua); stroke-dasharray: 66 100; stroke-linecap: round; opacity: .8; }
.tape-svg line { stroke: var(--navy); stroke-width: 2; opacity: .35; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.scale-center { position: absolute; inset: 22%; border-radius: 50%; background: #fff; box-shadow: var(--shadow-m); display: grid; place-content: center; text-align: center; overflow: hidden; }
.scale-center span { font: italic 500 1.5rem/1.6 var(--serif); color: var(--navy); animation: cycle 6s infinite; opacity: 0; grid-area: 1 / 1; }
.scale-center span:nth-child(2) { animation-delay: 2s; color: var(--teal); }
.scale-center span:nth-child(3) { animation-delay: 4s; }
@keyframes cycle { 0% { opacity: 0; transform: translateY(16px); } 8%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-16px); } }

.sessions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.session { padding: clamp(22px, 3vw, 34px); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); }
.session.alt { background: linear-gradient(160deg, #fff, var(--mint)); }
.session header { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.session h3 { margin: 4px 0 0; font-size: 1.45rem; }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .74rem; font-weight: 800; }
.clock { --m: 60; width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-content: center; justify-items: center; color: var(--navy); background: conic-gradient(var(--aqua) calc(var(--m) / 60 * 100%), var(--cream) 0); position: relative; }
.clock::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.clock > * { position: relative; }
.clock .ic { width: 18px; height: 18px; }
.clock b { font: 600 1.4rem/1 var(--serif); }
.session-arrow { align-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; box-shadow: var(--shadow-m); }
.ticks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ic { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--mint); color: var(--teal); margin-top: 1px; }
.tip { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--butter); color: #6A5A4A; font-size: .9rem; margin: 0; }
.tip .ic { color: #C88A2E; margin-top: 2px; }
.cadence { padding: 14px 16px; border-radius: 16px; background: #fff; }
.cad-label { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.cad-cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.cad-cal i { aspect-ratio: 1; border-radius: 4px; background: var(--cream); }
.cad-cal i.on { background: var(--teal); box-shadow: 0 0 0 3px rgba(58,156,159,.2); }
.goal-banner { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 6vw, 72px); border-radius: var(--r); background: linear-gradient(135deg, var(--lilac), var(--mint)); text-align: center; }
.goal-banner h2 { max-width: 28ch; margin: 0 auto; }
.goal-apple { width: 340px; height: 340px; left: -60px; bottom: -80px; z-index: -1; opacity: .6; }

.device-card { width: min(380px, 100%); padding: 30px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); text-align: center; position: relative; }
.dev-ic { width: 76px; height: 76px; margin: -68px auto 14px; border-radius: 24px; display: grid; place-items: center; background: var(--navy); color: #fff; box-shadow: var(--shadow-m); }
.dev-ic .ic { width: 36px; height: 36px; }
.dev-name { font: 600 1.6rem/1.2 var(--serif); color: var(--deep); margin: 0; }
.dev-sub { color: var(--muted); font-size: .9rem; }
.dev-bars { display: grid; gap: 10px; text-align: left; margin-top: 18px; }
.dev-bars span { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.dev-bars em { font-style: normal; grid-row: 1; grid-column: 1; }
.dev-bars i { grid-column: 2; height: 10px; border-radius: 6px; background: var(--cream); position: relative; overflow: hidden; }
.dev-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--navy)); transform-origin: left; animation: grow 1.6s var(--ease) both .4s; }
@keyframes grow { from { transform: scaleX(0); } }

.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.why-list li { display: flex; gap: 16px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); }
.why-list li > .ic { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--mint); color: var(--teal); }
.why-list b { color: var(--deep); }
.why-list p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.prep { padding: 28px; border-radius: var(--r); background: var(--deep); color: #fff; position: sticky; top: calc(var(--hdr) + 24px); }
.prep-title { display: flex; gap: 10px; align-items: center; font: 500 1.25rem/1.3 var(--serif); }
.prep-title .ic { color: var(--aqua); }
.prep-rings { display: grid; gap: 14px; margin: 20px 0 24px; }
.ring-card { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; position: relative; }
.ring { width: 96px; height: 96px; transform: rotate(-90deg); grid-row: 1; grid-column: 1; }
.ring circle { fill: none; stroke-width: 9; stroke: rgba(255,255,255,.1); }
.ring .ring-arc { stroke: var(--aqua); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); }
.ring-card.in .ring-arc { stroke-dashoffset: calc(100 - var(--p)); }
.ring-in { grid-row: 1; grid-column: 1; display: grid; justify-items: center; align-content: center; gap: 2px; font-size: .82rem; }
.ring-in .ic { width: 18px; height: 18px; color: var(--aqua); }
.ring-card p { margin: 0; color: rgba(255,255,255,.8); font-size: .95rem; }

.body-explorer { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.be-figure { position: sticky; top: calc(var(--hdr) + 24px); padding: 28px; border-radius: var(--r); background: linear-gradient(160deg, #fff, var(--mint)); box-shadow: var(--shadow-s); text-align: center; }
.body-fig { width: min(220px, 100%); margin: 0 auto; overflow: visible; }
.body-fig g { fill: #DCE7EF; transition: fill .5s var(--ease), filter .5s; }
.body-fig g.on { fill: var(--aqua); filter: drop-shadow(0 0 12px rgba(98,195,208,.7)); }
.body-fig[data-all] g:not([data-zone="head"]) { fill: var(--aqua); }
.be-hint { margin: 16px 0 0; font: italic 500 1.1rem/1.3 var(--serif); color: var(--navy); min-height: 1.3em; }
.be-list { display: grid; gap: 10px; }
.be-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cream); color: var(--navy); flex: none; transition: background .3s, color .3s; }
.be-item[open] .be-ic { background: var(--navy); color: #fff; }
.be-item > p { padding-left: 78px; }

.orbit { position: relative; width: min(380px, 80vw); aspect-ratio: 1; }
.orbit::before, .orbit::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 1.5px dashed rgba(27,58,133,.18); }
.orbit::after { inset: 24%; border-style: solid; border-color: rgba(98,195,208,.25); }
.orbit-center { position: absolute; inset: 32%; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; font: italic 500 1rem/1.2 var(--serif); box-shadow: var(--shadow-m); z-index: 1; }
.orbit-center .ic { width: 32px; height: 32px; color: var(--aqua); }
.orb { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: #fff; box-shadow: var(--shadow-m); animation: orbit 24s linear infinite; --r: min(160px, 34vw); }
@keyframes orbit { from { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc((var(--a) + 360deg) * -1)); } }
.who-card { display: flex; gap: clamp(18px, 3vw, 36px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); }
.who-ic { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(135deg, var(--butter), var(--peach)); color: var(--navy); flex: none; }
.who-ic .ic { width: 44px; height: 44px; }
.who-card p { color: var(--muted); margin: 0; }
.goal-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.goal-cards li { position: relative; overflow: hidden; isolation: isolate; padding: 26px 20px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-s); transition: transform .5s var(--spring); }
.goal-cards li:hover { transform: translateY(-8px) rotate(-1deg); }
.gc-n { position: absolute; right: 16px; top: 12px; font: italic 500 2.4rem/1 var(--serif); color: var(--line); }
.gc-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--mint); color: var(--teal); margin-bottom: 16px; }
.goal-cards li:nth-child(2) .gc-ic { background: var(--peach); color: #B4622F; }
.goal-cards li:nth-child(3) .gc-ic { background: var(--butter); color: #A7801D; }
.goal-cards li:nth-child(4) .gc-ic { background: var(--lilac); color: #6650A8; }
.goal-cards p { margin: 0; font-weight: 700; color: var(--deep); line-height: 1.4; }

.ecg-card { width: min(400px, 100%); padding: 28px; border-radius: var(--r); background: var(--deep); color: #fff; box-shadow: var(--shadow-m); }
.ecg { width: 100%; height: auto; }
.ecg path { fill: none; stroke: var(--aqua); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) .3s forwards, ecgGlow 2.4s 2.7s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(98,195,208,.8)); }
@keyframes ecgGlow { 50% { opacity: .6; } }
.ecg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.ecg-stats span { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.07); }
.ecg-stats b { display: block; font: 600 2.2rem/1 var(--serif); color: #fff; }
.ecg-stats small { color: rgba(255,255,255,.7); }
.clin-tools { display: grid; gap: 16px; justify-items: center; margin-bottom: 30px; }
.search { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); padding: 6px 8px 6px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); border: 1.5px solid transparent; transition: border-color .25s; }
.search:focus-within { border-color: var(--aqua); }
.search .ic { color: var(--muted); }
.search input { flex: 1; border: 0; background: none; font: inherit; padding: 10px 4px; outline: none; color: var(--ink); min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; padding: .5em 1em; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--muted); transition: all .25s; }
.chip .ic { width: 16px; height: 16px; }
.chip b { padding: 0 7px; border-radius: 999px; background: var(--cream); font-size: .75rem; }
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.on b { background: rgba(255,255,255,.2); }
.clin-grid { columns: 3 300px; column-gap: 18px; }
.clin-cat { break-inside: avoid; margin-bottom: 18px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-s); }
.clin-cat[hidden] { display: none; }
.clin-cat h3 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; }
.cc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: #fff; flex: none; }
.clin-cat ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.clin-cat li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; transition: background .2s; font-size: .95rem; }
.clin-cat li:hover { background: var(--cream); }
.clin-cat li .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--teal); margin-top: 2px; }
.clin-cat li[hidden] { display: none; }
.clin-cat mark { background: var(--butter); color: inherit; border-radius: 4px; padding: 0 2px; }
.clin-empty { text-align: center; color: var(--muted); }

/* ---------- Recipes ---------- */
.r-howto { list-style: none; padding: 0; margin: 28px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.r-howto li { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); font-size: .88rem; font-weight: 700; color: var(--navy); }
.r-howto .ic { color: var(--teal); }
.r-tools { margin-bottom: 28px; }
.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.r-grid > [hidden] { display: none; }
.r-grid > div:has(.feature) { grid-column: span 2; }
.r-card.feature { display: grid; grid-template-columns: 1.1fr 1fr; }
.r-card.feature .r-art { aspect-ratio: auto; min-height: 320px; }
.r-card.feature .r-body { align-self: center; padding: 32px; }
.recipe-teaser .r-card.feature { grid-template-columns: 1fr; }
.recipe-teaser .r-card.feature .r-art { min-height: 0; aspect-ratio: 16 / 10; }
.r-soon { display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: 32px; border-radius: var(--r); border: 2px dashed rgba(27,58,133,.18); color: var(--muted); }
.r-soon > span { font-size: 3rem; }
.r-empty { text-align: center; color: var(--muted); padding: 24px; display: flex; gap: 8px; justify-content: center; }
.pantry { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 4vw, 48px); padding: clamp(24px, 4vw, 44px); border-radius: var(--r); background: linear-gradient(135deg, var(--butter), var(--peach)); }
.pantry h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.pantry p { color: #6A5A4A; }
.pantry-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pantry-art span { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: rgba(255,255,255,.7); font-size: 2.2rem; animation: bob 6s ease-in-out infinite; }
.pantry-art span:nth-child(2) { animation-delay: -2s; transform: translateY(20px); }
.pantry-art span:nth-child(3) { animation-delay: -4s; grid-column: span 2; justify-self: center; }
.disclosure { font-size: .78rem; margin: 14px 0 0; opacity: .8; }

.r-hero .ph-grid { grid-template-columns: 1.2fr .8fr; }
.r-tags { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.r-tags li { padding: 6px 14px; border-radius: 999px; background: #fff; font-size: .84rem; font-weight: 700; color: var(--navy); box-shadow: var(--shadow-s); }
.r-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.r-actions .btn { padding: .75em 1.15em; font-size: .9rem; }
[data-wake][aria-pressed="true"] { background: var(--teal); color: #fff; }
.r-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.r-facts li { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 14px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); }
.rf-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--teal); margin-bottom: 6px; }
.r-facts li:nth-child(2) .rf-ic { background: var(--butter); color: #A7801D; }
.r-facts li:nth-child(3) .rf-ic { background: var(--peach); color: #C0532F; }
.r-facts li:nth-child(4) .rf-ic { background: var(--lilac); color: #6650A8; }
.r-facts b { font: 600 1.25rem/1.2 var(--serif); color: var(--deep); }
.r-facts small { color: var(--muted); font-size: .8rem; }
.r-layout { display: grid; grid-template-columns: 400px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.r-ing { position: sticky; top: calc(var(--hdr) + 20px); padding: 26px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); }
.r-ing-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.r-ing h2, .r-steps > h2 { font-size: 1.7rem; margin: 0; }
.r-steps > h2 { margin-bottom: 22px; }
.scale-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--cream); }
.scale-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; color: var(--muted); transition: all .25s; }
.scale-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.r-progress { position: relative; height: 8px; border-radius: 6px; background: var(--cream); margin-bottom: 26px; }
.r-progress span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--teal)); transition: width .5s var(--spring); }
.r-progress small { position: absolute; right: 0; top: 12px; font-size: .75rem; color: var(--muted); font-weight: 700; }
.ing-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ing-list li { border-radius: 16px; transition: background .25s; }
.ing-list li:hover { background: var(--cream); }
.ing-list label { display: flex; align-items: center; gap: 12px; padding: 10px; cursor: pointer; }
.ing-list input { position: absolute; opacity: 0; }
.ing-check { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; transition: all .3s var(--spring); }
.ing-check .ic { width: 16px; height: 16px; }
.ing-list input:checked + .ing-check { background: var(--teal); border-color: var(--teal); color: #fff; transform: rotate(-8deg) scale(1.1); }
.ing-list input:focus-visible + .ing-check { outline: 3px solid var(--aqua); outline-offset: 2px; }
.ing-ic { font-size: 1.6rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--cream); flex: none; transition: transform .4s var(--spring); }
.ing-list li:hover .ing-ic { transform: rotate(-10deg) scale(1.08); }
.ing-txt { flex: 1; min-width: 0; }
.ing-txt b { display: block; font-weight: 700; color: var(--deep); transition: color .3s; }
.ing-txt small { display: block; font-size: .8rem; color: var(--muted); }
.qty { display: inline-block; min-width: 1ch; color: var(--teal); font-weight: 800; transition: transform .3s var(--spring); }
.qty.bump { animation: pop .4s var(--spring); }
.ing-list input:checked ~ .ing-txt b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--aqua); text-decoration-thickness: 2px; }
.opt-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: var(--lilac); color: #6650A8; }
.ing-link { display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 8px 104px; font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--teal); }
.ing-link .ic { width: 14px; height: 14px; }
.step-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; counter-reset: s; }
.step { display: flex; gap: 18px; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-s); transition: opacity .4s, box-shadow .3s, transform .4s var(--spring); }
.step.done { opacity: .55; }
.step.done h3 { text-decoration: line-through; text-decoration-color: var(--aqua); }
.step-done { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--cream); font: 600 1.2rem/1 var(--serif); color: var(--navy); position: relative; transition: background .3s, color .3s, transform .4s var(--spring); }
.step-done .ic { position: absolute; opacity: 0; transform: scale(.4); transition: all .35s var(--spring); }
.step-done span { transition: all .25s; }
.step-done:hover { transform: scale(1.08); }
.step-done[aria-pressed="true"] { background: var(--teal); color: #fff; }
.step-done[aria-pressed="true"] span { opacity: 0; transform: scale(.4); }
.step-done[aria-pressed="true"] .ic { opacity: 1; transform: none; }
.step-body { flex: 1; min-width: 0; }
.step h3 { margin: 10px 0 6px; font-size: 1.2rem; }
.step p { margin: 0; color: var(--muted); }
.timer { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, var(--mint), var(--lilac)); }
.timer-btn { position: relative; width: 104px; height: 104px; flex: none; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-m); transition: transform .4s var(--spring); }
.timer-btn:hover { transform: scale(1.05); }
.timer-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-btn circle { fill: none; stroke-width: 8; stroke: var(--cream); }
.timer-btn .t-arc { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - var(--tp, 1000)); transition: stroke-dashoffset 1s linear; }
.t-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
.t-ic .ic { width: 18px; height: 18px; }
.t-play .ic { margin-left: 3px; }
.t-pause { display: none; }
.timer.running .t-play { display: none; }
.timer.running .t-pause { display: grid; }
.timer.running .timer-btn { animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 10px rgba(98,195,208,.25), var(--shadow-m); } }
.timer-info { display: grid; gap: 2px; }
.t-time { font: 600 2.3rem/1 var(--serif); color: var(--deep); font-variant-numeric: tabular-nums; }
.timer-info small { color: var(--muted); font-weight: 700; }
.t-tools { display: flex; gap: 6px; margin-top: 8px; }
.t-tools button { border: 0; background: rgba(255,255,255,.75); padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .8rem; color: var(--navy); display: grid; place-items: center; }
.t-tools .ic { width: 16px; height: 16px; }
.timer.finished { background: linear-gradient(135deg, #FFE8B0, var(--peach)); animation: ring .5s ease-in-out 6; }
.timer.finished .t-time { color: #C0532F; }
@keyframes ring { 25% { transform: rotate(-1.2deg); } 75% { transform: rotate(1.2deg); } }
.r-extras { display: grid; gap: 12px; }
.rx-ic { font-size: 1.5rem; }
.rx-body ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.mini-timer { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--deep); color: #fff; box-shadow: var(--shadow-m); transform: translateX(-50%); animation: fadeUp .4s var(--ease); }
.mini-timer[hidden] { display: none; }
.mini-timer b { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.mini-timer button { border: 0; background: rgba(255,255,255,.15); color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); animation: ping 1.8s infinite; }
.r-cta { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); padding: clamp(24px, 4vw, 40px); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-m); }
.r-cta-e { font-size: 3.4rem; }
.r-cta h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 6px; }
.r-cta p { margin: 0; color: var(--muted); }
.r-cta .btn { margin-left: auto; }

/* ---------- Privacy ---------- */
.pp-summary { padding: 26px; border-radius: var(--r); background: linear-gradient(135deg, var(--mint), var(--lilac)); margin-bottom: 28px; }
.pp-sum-t { display: flex; gap: 10px; align-items: center; font: 500 1.3rem/1.2 var(--serif); color: var(--deep); }
.pp-summary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pp-summary li { display: flex; gap: 10px; }
.pp-summary li .ic { color: var(--teal); margin-top: 3px; }
.pp-sec { padding: 24px 26px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); margin-bottom: 14px; }
.pp-sec h2 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; }
.pp-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--navy); color: #fff; flex: none; }
.pp-sec p, .pp-list { color: var(--muted); margin: 0; }
.pp-list { padding-left: 1.1em; display: grid; gap: 8px; }
.pp-list b { color: var(--deep); }

/* 404 */
.nf-big { font: 600 clamp(6rem, 18vw, 11rem)/1 var(--serif); color: var(--navy); margin: 0 0 10px; display: flex; justify-content: center; align-items: center; gap: .05em; }
.nf-big span { font-size: .8em; animation: bob 3s ease-in-out infinite; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .hdr-cta { margin-left: auto; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .goal-cards { grid-template-columns: repeat(3, 1fr); }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .r-layout { grid-template-columns: 1fr; }
  .r-ing { position: static; }
}
@media (max-width: 860px) {
  :root { --hdr: 76px; }
  body { font-size: 16px; }
  .hero-grid, .ph-grid, .r-hero .ph-grid, .at-grid, .rt-grid, .faq-grid, .ch-grid, .ph2-grid, .why-grid, .body-explorer { grid-template-columns: 1fr; }
  .hero-art, .bio-photo { max-width: 420px; order: -1; }
  .r-hero .ph-grid > div:last-child { max-width: 340px; justify-self: center; order: -1; width: 100%; }
  .f1 { left: -2%; } .f2 { right: -2%; }
  .faq-side, .prep, .be-figure { position: static; }
  .be-figure { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; text-align: left; padding: 18px; }
  .be-figure .body-fig { width: 110px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .steps-line { display: none; }
  .svc-grid.three, .two-cards, .sessions { grid-template-columns: 1fr; }
  .session-arrow { transform: rotate(90deg); justify-self: center; }
  .sec > .wrap > .quick { grid-template-columns: 1fr; }
  .timeline::before { left: 24px; }
  .timeline li, .timeline li:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 24px 68px; }
  .timeline .tl-dot, .timeline li:nth-child(even) .tl-dot { left: 0; right: auto; }
  .r-grid > div:has(.feature) { grid-column: auto; }
  .r-card.feature { grid-template-columns: 1fr; }
  .r-card.feature .r-art { min-height: 0; aspect-ratio: 16 / 10; }
  .r-facts { grid-template-columns: 1fr 1fr; }
  .map { aspect-ratio: 4 / 3; }
  .fab { display: inline-flex; }
  .recipe-page .fab { display: none; }
  .r-cta, .who-card, .ent-card { flex-direction: column; align-items: flex-start; }
  .r-cta .btn { margin-left: 0; }
  .pantry { grid-template-columns: 1fr; }
  .pantry-art { display: none; }
  .gesy { flex-direction: column; text-align: center; }
  .clin-grid { columns: 1; }
  .goal-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap, .wrap.narrow { width: calc(100% - 32px); }
  .brand img { height: 42px; }
  .hdr .btn-sm span { display: none; }
  .hdr .btn-sm { padding: .75em; }
  .row2 { grid-template-columns: 1fr; }
  .svc-grid, .pillars, .steps, .goal-cards { grid-template-columns: 1fr; }
  .pillar:nth-child(even) { transform: none; }
  .svc-row { grid-template-columns: auto 1fr; }
  .svc-row .svc-num, .svc-row .svc-go { display: none; }
  .float { padding: 8px 12px 8px 8px; }
  .float small { display: none; }
  .f3 { display: none; }
  .ftr-grid { grid-template-columns: 1fr; }
  .rev-head { display: block; }
  .addr { flex-wrap: wrap; }
  .addr .btn { margin-left: 64px; }
  .timer { flex-direction: column; text-align: center; }
  .t-tools { justify-content: center; }
  .acc-a, .be-item > p, .rx-body { padding-left: 22px; }
  .ing-link { margin-left: 58px; }
  .marquee span { font-size: 1.05rem; }
  .hero-proof { gap: 14px 20px; }
  .seg button { padding: .75em 1.2em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .apple-line path, .hl path, .ecg path { stroke-dashoffset: 0; }
}

@media print {
  .hdr, .ftr, .fab, .mini-timer, .r-actions, .pantry, .r-cta, .blob, .crumbs, .scale-seg, .t-tools, .timer-btn, .fav, .r-art, body::before { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .page-hero { margin: 0; padding: 0; }
  .r-ing { position: static; box-shadow: none; padding: 0; }
  .step, .r-extra { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  details > :not(summary) { display: block !important; }
}

/* Grid children may shrink below their content (long emails, reCAPTCHA). */
.hero-grid > *, .ph-grid > *, .at-grid > *, .rt-grid > *, .faq-grid > *, .ch-grid > *, .ph2-grid > *, .why-grid > *, .body-explorer > *, .r-layout > *, .svc-grid > *, .two-cards > * { min-width: 0; }
.orb { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
@media (max-width: 860px) {
  .hero-art { max-width: 300px; }
  .bio-photo { max-width: 320px; }
  .hero { padding-bottom: 48px; }
}
@media (max-width: 420px) {
  .captcha { transform: scale(.86); transform-origin: left top; min-height: 68px; margin-bottom: -10px; }
  .card-form { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .scale-center span:first-child { opacity: 1; }
  .orb { animation: none; }
}

/* Hours header: the live status pill drops to its own row instead of overflowing. */
.hours-top { flex-wrap: wrap; }
.hours-top > div { flex: 1 1 160px; min-width: 0; }
@media (max-width: 560px) {
  .hours-top .status { margin-left: 0; flex-basis: 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* The scroll cue only fits beside the desktop hero; on phones it lands on the proof row. */
@media (max-width: 860px) { .scroll-cue { display: none; } }