/* scaled copy of core.css (inc/scale.php) -- edit the original */
/* core.css
 * Design tokens, base elements, buttons, reveal motion, section rhythm and keyframes. Loaded on every page.
 * Generated from the approved homepage design; edit here, not in source-index.html. */
/* Layout: full-bleed place photography, then alternating light/dark "chapters" that follow the patient's
   journey. Circle-in-square Vitruvian motif, soft brand gradients (forest -> leaf -> plum), motion tied to scroll. */
:root{
  color-scheme: light;
  --paper:#f3f6f1;
  --surface:#ffffff;
  --ink:#122019;
  --muted:#56665d;
  --soft:#8c9b92;
  --line:#dbe3d8;
  --forest:#0d5b3b;
  --forest-deep:#082f20;
  --plum:#8b2c79;
  --plum-deep:#6a1d5b;
  --leaf:#b5d35a;
  --mint:#e3f0de;
  --lilac:#f1e4ef;
  --on-dark:#f2f6f0;
  --on-dark-muted:#bfd0c5;
  --glass:rgba(255,255,255,.12);
  --glass-line:rgba(255,255,255,.26);
  --grad-brand:linear-gradient(120deg,#0d5b3b 0%,#3c8a4e 45%,#b5d35a 100%);
  --grad-plum:linear-gradient(135deg,#8b2c79 0%,#4b2a6a 55%,#0d5b3b 100%);

  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body:"Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  --s-xs:.8125rem; --s-sm:.9375rem; --s-md:1.0625rem; --s-lg:1.25rem;
  --s-xl:clamp(2.2rem,calc(4.6 * var(--dv-vw,1vw)),3.8rem);
  --radius:22px;
  --wrap:1280px;
  --gutter:clamp(16px,calc(4 * var(--dv-vw,1vw)),48px);
  --hh:80px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s-md);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.lock{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1;margin:0;text-wrap:balance;letter-spacing:-.035em;font-optical-sizing:auto}
h1 em,h2 em,h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
svg.lucide{width:1em;height:1em;stroke-width:1.75;flex:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor}
.lede{font-size:var(--s-lg);line-height:1.55;color:var(--muted);max-width:44ch}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:8px}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95em 1.5em;border-radius:999px;font-weight:600;font-size:var(--s-sm);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s;font-family:var(--f-body);white-space:nowrap}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px)}
.btn svg.lucide{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.btn:hover svg.lucide{transform:translateX(3px)}
.btn-primary{background:linear-gradient(135deg,#9b3388,#6a1d5b);color:#fff;box-shadow:0 12px 26px -12px rgba(139,44,121,.7)}
.btn-primary:hover{box-shadow:0 18px 30px -12px rgba(139,44,121,.8)}
.btn-ghost{border-color:var(--forest);color:var(--forest);background:transparent}
.btn-ghost:hover{background:var(--forest);color:#fff}
.btn-light{background:var(--on-dark);color:var(--forest-deep)}
.btn-light:hover{background:#fff}
.btn-glass{background:var(--glass);border-color:var(--glass-line);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.22)}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--forest);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.link svg.lucide{transition:transform .25s var(--ease)}
.link:hover svg.lucide{transform:translate(2px,-2px)}

/* Scroll-driven reveal (progressive enhancement: content is fully visible without support).
   The ranges end a fixed distance after the top edge comes into view, not a share of the
   element's height, so a tall block (an opened accordion, long prose) is never left half
   faded on screen. .reveal-img clips its box, so it goes on the image frame, never on a
   figure whose caption sits outside the frame. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 140px){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 140px}
    .reveal-img{animation:unclip linear both;animation-timeline:view();animation-range:entry 0% entry 220px}
    .parallax img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes reveal{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes unclip{from{clip-path:inset(14% 10% 14% 10% round 28px)}to{clip-path:inset(0 0 0 0 round var(--radius))}}
@keyframes drift{from{transform:translateY(-7%) scale(1.16)}to{transform:translateY(7%) scale(1.16)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Section rhythm */
section{padding-block:clamp(4.5rem,calc(9 * var(--dv-vw,1vw)),8rem);position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.2rem,calc(4 * var(--dv-vw,1vw)),3.4rem)}
.sec-head .t{display:flex;flex-direction:column;gap:1.1rem;max-width:46rem}
.sec-head h2{font-size:var(--s-xl)}
.sec-head .lede-col{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;max-width:30rem}
.sec-head .lede-col .j-cta{flex:none}

/* Keyframes shared by every page */
@keyframes settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:.001;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:.2}}
@keyframes float{50%{transform:translate(12px,-18px) scale(1.08)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes breathe{50%{transform:scale(1.12)}}
@keyframes fill{to{width:100%}}
@keyframes morph{50%{border-radius:60% 40% 45% 55%/40% 55% 45% 60%;transform:rotate(8deg)}}
@keyframes mesh{50%{transform:translate(5%,-4%) rotate(8deg)}100%{transform:translate(-4%,5%) rotate(-6deg)}}
@keyframes borderflow{to{background-position:300% 0}}

/* Short or zoomed screens (laptops at 125-175% zoom): the header and headings follow the window's
   height as well as its width, so a hero and the menu never fill the whole window. */
@media (min-width:1021px) and (max-height:860px) and (max-width:1120.98px),(min-width:1021px) and (max-height:860px) and (min-width:1400px),(min-width:1021px) and (max-height:860px) and (hover:none),(min-width:1021px) and (max-height:860px) and (pointer:coarse),(min-width:1021px) and (max-height:860px) and (pointer:none),(min-aspect-ratio:1400/860) and (min-width:1121px) and (max-width:1399.98px) and (hover:hover) and (pointer:fine){
  :root{--hh:68px;--s-xl:clamp(2rem,min(calc(4.6 * var(--dv-vw,1vw)),calc(7.4 * var(--dv-vh,1vh))),3.8rem)}
  .logo img{height:40px}
  .topbar .wrap{padding-block:.3rem}
}
@media (min-width:1021px) and (max-height:680px) and (max-width:1120.98px),(min-width:1021px) and (max-height:680px) and (min-width:1400px),(min-width:1021px) and (max-height:680px) and (hover:none),(min-width:1021px) and (max-height:680px) and (pointer:coarse),(min-width:1021px) and (max-height:680px) and (pointer:none),(min-aspect-ratio:1400/680) and (min-width:1121px) and (max-width:1399.98px) and (hover:hover) and (pointer:fine){
  .topbar{display:none}
}