/* ============================================================
   ROSEBRIAR HOME CARE (hearth), shared template stylesheet
   ------------------------------------------------------------
   ONE stylesheet, linked by every page (index / services / about /
   families / contact). Editing this file re-themes the whole site.

   THEME CONTRACT (Borg Studio): every color, font and radius reads
   a --t-* custom property declared once on :root below. Borg Studio
   re-themes the live preview by appending
   <style id="borg-overrides">:root{ --t-...: ... }</style> to the
   iframe head, which wins over these defaults, so the whole page
   recolors at once. Every tint on the page is mixed from the tokens
   with color-mix(), never typed as a hex of its own.

   Required tokens (15): --t-bg --t-surface --t-surface-2 --t-text
   --t-heading --t-muted --t-brand --t-brand-2 --t-accent
   --t-on-brand --t-border --t-grad --t-radius --t-font-head
   --t-font-body

   INK RULES, measured on the shipped palette:
   the sage (--t-brand) only ever carries --t-on-brand, a near black
   green (4.60:1); forest ink and cream both fall under 4.5:1 on it.
   The blush (--t-accent) is a fill, never a text color.
   --t-muted sits on cream and linen only.
   ============================================================ */

/* The two faces live beside the template, so an exported site carries them.
   Latin only, the same subset the main site ships. */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-serif-display-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/manrope-var.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --t-brand:#7C8C6B;
  --t-brand-2:#56664A;
  --t-accent:#E7C9C4;
  --t-bg:#FAF6F0;
  --t-surface:#F5F0E8;
  --t-surface-2:#B8B9A7;
  --t-heading:#2E4034;
  --t-text:#3B4A3F;
  --t-muted:#566052;
  --t-border:#E3D9CA;
  --t-on-brand:#16211A;
  --t-grad:linear-gradient(90deg,var(--t-brand),var(--t-brand-2));
  --t-radius:20px;
  --t-font-head:"DM Serif Display",Georgia,"Times New Roman",serif;
  --t-font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* layout, not theme */
  --hdr-h:72px;
  --band-h:128px;
  --shadow-soft:0 1px 2px color-mix(in srgb,var(--t-heading) 5%,transparent),0 22px 44px -32px color-mix(in srgb,var(--t-heading) 30%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* a paper grain made only of LIGHT specks, so it can sit on a text
     vessel and only ever raise the contrast of the ink on it */
  --grain: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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── base ────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
/* never let a browser fake a weight or an italic; a missing face falls back upright */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-synthesis:none}
body{font-family:var(--t-font-body);font-size:16px;line-height:1.65;color:var(--t-text);background:var(--t-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
p,blockquote,li{text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--t-font-head);font-weight:400;font-style:normal;color:var(--t-heading);line-height:1.1;letter-spacing:-.005em;text-wrap:balance}
:focus-visible{outline:2px solid var(--t-heading);outline-offset:3px;border-radius:6px}
/* inside a sage vessel the ring takes the vessel's own ink, 3:1 or better on every preset */
.hero-panel :focus-visible,.ph-panel :focus-visible{outline-color:var(--t-on-brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-56px;z-index:100;background:var(--t-heading);color:var(--t-bg);padding:10px 16px;border-radius:10px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

.eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--t-muted)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--t-brand);flex:none}
.center .eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:var(--t-brand);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1.2;padding:.95rem 1.6rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),background-color .25s ease,box-shadow .3s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--t-heading);color:var(--t-bg);box-shadow:0 14px 28px -16px color-mix(in srgb,var(--t-heading) 70%,transparent)}
.btn-primary:hover{background:var(--t-brand-2);transform:translateY(-2px);box-shadow:0 18px 32px -16px color-mix(in srgb,var(--t-heading) 75%,transparent)}
.link{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;color:var(--t-heading);border-bottom:1.5px solid color-mix(in srgb,currentColor 40%,transparent);padding-bottom:.15rem;transition:border-color .2s}
.link:hover{border-color:currentColor}
.link svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* reveals (IntersectionObserver adds .in) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .85s ease,transform .85s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* ── header: a solid cream bar above the hero that turns sticky ── */
.hdr{position:sticky;top:0;z-index:60;background:var(--t-bg);border-bottom:1px solid transparent;transition:box-shadow .35s ease,border-color .35s ease}
.hdr.solid{border-color:var(--t-border);box-shadow:0 12px 30px -24px color-mix(in srgb,var(--t-heading) 55%,transparent)}
.hdr .bar{display:flex;align-items:center;gap:2rem;height:var(--hdr-h);width:min(1352px,100% - 48px);margin-inline:auto}
.logo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--t-font-head);font-weight:400;font-size:1.42rem;line-height:1.1;color:var(--t-heading)}
.logo-mark{width:28px;height:28px;flex:none;color:var(--t-brand)}
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:2rem}
.hdr nav a{font-size:.94rem;font-weight:600;color:var(--t-text);position:relative;padding:.45rem 0;transition:color .2s}
.hdr nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--t-brand);transition:right .3s var(--ease)}
.hdr nav a:hover,.hdr nav a.on{color:var(--t-heading)}
.hdr nav a:hover::after,.hdr nav a.on::after{right:0}
.hdr nav .nav-cta{padding:.7rem 1.25rem;font-size:.9rem;color:var(--t-bg);background:var(--t-heading);border-radius:999px}
.hdr nav .nav-cta::after{display:none}
.hdr nav .nav-cta:hover,.hdr nav .nav-cta.on{color:var(--t-bg);background:var(--t-brand-2)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--t-border);border-radius:999px;background:transparent;color:var(--t-heading);cursor:pointer;place-items:center}
.menu-btn svg{width:20px;height:20px}
.menu-btn .x{display:none}

/* ── home hero: photo | sage panel, then the blush band ── */
.hero{display:grid;grid-template-columns:51.75% 48.25%;height:clamp(540px,calc(100svh - var(--hdr-h) - var(--band-h)),820px)}
.hero-photo{position:relative;overflow:hidden;background:var(--t-surface-2)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 62%}
.hero-panel{position:relative;display:flex;align-items:center;background:var(--t-brand);color:var(--t-on-brand);padding:3rem 8% 3rem 12%;overflow:hidden}
.hero-panel::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35;pointer-events:none}
.hero-copy{position:relative;max-width:540px}
.hero-copy .eyebrow,.page-hero .eyebrow,.page-hero .crumb,.page-hero .crumb a{color:var(--t-on-brand)}
.hero-copy .eyebrow::before,.page-hero .eyebrow::before{background:var(--t-on-brand)}
.hero h1{font-size:clamp(2.6rem,1.2rem + 3.4vw,4.15rem);line-height:1.04;letter-spacing:-.012em;color:var(--t-on-brand);max-width:11ch;margin:1rem 0 1.25rem}
.hero .lede{font-size:clamp(1rem,.94rem + .3vw,1.14rem);line-height:1.62;color:var(--t-on-brand);max-width:44ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2rem}
.on-sage .link{color:var(--t-on-brand)}

.trust{background:var(--t-accent)}
.trust ul{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;width:min(1180px,100% - 48px);min-height:var(--band-h);margin-inline:auto;padding-block:1.2rem}
.trust li{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.95rem;line-height:1.35;color:var(--t-heading)}
.trust svg{width:24px;height:24px;flex:none}

/* ── the heart divider: two stone rules and an outline heart ── */
.heart-rule{display:flex;align-items:center;justify-content:center;gap:26px;width:min(598px,80%);margin:48px auto 0;color:var(--t-border)}
.heart-rule span{flex:1;height:2px;border-radius:2px;background:currentColor}
.heart-rule .hr-l{transform-origin:100% 50%}
.heart-rule .hr-r{transform-origin:0 50%}
.heart-rule svg{width:31px;height:29px;flex:none;color:color-mix(in srgb,var(--t-border) 90%,var(--t-heading))}
.js .heart-rule span{transform:scaleX(0);transition:transform .9s var(--ease) .15s}
.js .heart-rule.in span{transform:scaleX(1)}
.js .heart-rule.in svg{animation:beat .8s ease-out .55s both}
@keyframes beat{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}70%{transform:scale(.97)}}

/* ── intro: the linen panel on cream ── */
.intro{background:var(--t-bg);padding:78px 0 62px}
.intro-panel{width:min(1192px,100% - 2 * clamp(20px,8.6vw,124px));margin-inline:auto;min-height:435px;display:grid;place-items:center;text-align:center;padding:64px clamp(24px,6vw,96px);background:var(--t-surface);border-radius:calc(var(--t-radius) - 2px);box-shadow:var(--shadow-soft)}
.intro-panel h2{font-size:clamp(1.9rem,1.2rem + 2vw,2.75rem);max-width:22ch;margin:1rem auto 1.1rem}
.intro-panel p{font-size:1.1rem;line-height:1.7;color:var(--t-text);max-width:60ch;margin-inline:auto}
.intro-panel .link{margin-top:1.6rem}
/* the welcome vessel's measured height belongs to the home guide; reused off the guide it fits its words */
.intro-panel.fit{min-height:0}

/* ── the five cards with their inner tiles ── */
.cares{background:var(--t-bg);border-top:1px solid color-mix(in srgb,var(--t-border) 55%,var(--t-bg));padding:36px 0 34px}
.care-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:42px;width:min(1350px,100% - 6.26vw);margin-inline:auto}
.care{--fill:var(--t-surface-2);display:flex;flex-direction:column;min-height:374px;padding:43px 30px 28px;background:var(--fill);border-radius:calc(var(--t-radius) - 2px);box-shadow:0 1px 1px color-mix(in srgb,var(--t-heading) 6%,transparent),0 20px 40px -34px color-mix(in srgb,var(--t-heading) 45%,transparent);transition:transform .35s var(--ease),box-shadow .35s ease}
.care:nth-child(even){--fill:var(--t-accent)}
.care:hover{transform:translateY(-4px);box-shadow:0 1px 1px color-mix(in srgb,var(--t-heading) 6%,transparent),0 28px 48px -30px color-mix(in srgb,var(--t-heading) 50%,transparent)}
.care .tile{height:166px;flex:none;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--fill) 60%,var(--t-surface));color:var(--t-heading);transition:background-color .3s ease}
.care:hover .tile{background:color-mix(in srgb,var(--fill) 78%,var(--t-surface))}
.care .tile svg{width:46px;height:46px}
.care h3{font-size:1.32rem;line-height:1.15;margin:1.25rem 0 .45rem}
.care p{font-size:.9rem;line-height:1.5;color:var(--t-text)}

/* ── split: photo | linen panel ── */
.story{display:grid;grid-template-columns:47.63% minmax(0,1fr);gap:4px;padding:3px 4px 0 0;min-height:560px}
.story-photo{position:relative;overflow:hidden;background:var(--t-surface-2);min-height:320px}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel{display:flex;flex-direction:column;justify-content:center;background:var(--t-surface);border:1px solid var(--t-border);border-radius:calc(var(--t-radius) - 6px);box-shadow:var(--shadow-soft);padding:56px 11%}
.panel h2{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.5rem);max-width:16ch;margin:1rem 0 1.1rem}
.panel p{font-size:1.03rem;line-height:1.72;color:var(--t-text);max-width:50ch}
.panel p + p{margin-top:.9rem}
.panel .link{margin-top:1.6rem;align-self:flex-start}
.sign{display:flex;align-items:center;gap:.85rem;margin-top:1.6rem}
.sign b{display:block;font-weight:700;font-size:.92rem;color:var(--t-heading)}
.sign .rl{display:block;font-size:.86rem;color:var(--t-text)}

/* ── the sage band and its three cards ── */
.voices{margin-top:3px;padding:47px 0;background:color-mix(in srgb,var(--t-surface-2) 70%,var(--t-brand))}
.voice-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;width:min(1328px,100% - 7.8vw);margin-inline:auto}
.voice{display:flex;flex-direction:column;min-height:341px;padding:36px 36px 32px;background:color-mix(in srgb,var(--t-surface-2) 75%,var(--t-surface));border-radius:calc(var(--t-radius) - 6px)}
.voice .q{font-family:var(--t-font-head);font-size:3.6rem;line-height:.62;height:1.5rem;color:var(--t-brand)}
.voice blockquote{flex:1;margin-top:1.1rem;font-size:1.04rem;line-height:1.66;color:var(--t-text)}
.voice h3{font-size:1.36rem;margin:1.1rem 0 .55rem}
.voice p{font-size:.97rem;line-height:1.62;color:var(--t-text)}
/* the guide sizes its three cards for stories; value cards off the guide size to their words */
.voice.value{min-height:0}
.voice .ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--t-surface-2) 45%,var(--t-surface));color:var(--t-heading)}
.voice .ic svg{width:26px;height:26px}
.who{display:flex;align-items:center;gap:.85rem;margin-top:1.4rem}
.who b{display:block;font-weight:700;font-size:.92rem;color:var(--t-heading)}
.who .rl{display:block;font-size:.86rem;color:var(--t-text)}
/* monogram medallion: the stand-in for a portrait */
.mono{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--t-brand);color:var(--t-on-brand);font-family:var(--t-font-head);font-size:1.08rem;letter-spacing:.03em;box-shadow:0 0 0 3px var(--t-surface),0 0 0 4px color-mix(in srgb,var(--t-brand) 45%,transparent)}

/* ── the blush closing band, dappled light at its edges ── */
.closing{position:relative;overflow:hidden;margin-top:3px;border-radius:4px;background:var(--t-accent);padding:70px 24px;text-align:center;isolation:isolate}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(34% 90% at 8% 40%,color-mix(in srgb,var(--t-bg) 55%,transparent),transparent 70%),
  radial-gradient(26% 80% at 96% 70%,color-mix(in srgb,var(--t-bg) 50%,transparent),transparent 70%)}
.leaf-light{position:absolute;inset:-8%;z-index:-1;pointer-events:none;background:url("img/leaf-shadow.webp") 20% 30%/cover no-repeat;opacity:.28;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 26%,transparent 42%,transparent 72%,#000 88%);mask-image:linear-gradient(90deg,#000 0,#000 26%,transparent 42%,transparent 72%,#000 88%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-1.2%,.8%,0) scale(1.02)}}
.closing-copy{position:relative;max-width:640px;margin-inline:auto}
.closing h2{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.5rem);max-width:26ch;margin-inline:auto}
.closing p{font-size:1.05rem;color:var(--t-text);margin:.8rem auto 0;max-width:48ch}
.closing .actions{justify-content:center}
.closing .phone{font-weight:700;color:var(--t-heading);border-bottom:1.5px solid color-mix(in srgb,var(--t-heading) 40%,transparent);padding-bottom:.1rem}
.closing .phone:hover{border-color:var(--t-heading)}
.closing .flowers{position:absolute;left:0;top:0;bottom:0;z-index:-1;height:100%;width:auto;max-width:34%;object-fit:cover;object-position:0 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.closing.has-flowers .closing-copy{padding-left:clamp(0px,14vw,210px)}
.closing.has-flowers .leaf-light{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 70%,#000 86%);mask-image:linear-gradient(90deg,transparent 0,transparent 70%,#000 86%)}

/* ── footer: woven linen, four cards, two sprigs ── */
.foot{position:relative;overflow:hidden;margin-top:3px;padding:36px 0 0;background:color-mix(in srgb,var(--t-border) 80%,var(--t-surface));color:var(--t-text);isolation:isolate}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--t-heading) 3.5%,transparent) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--t-heading) 2.5%,transparent) 0 1px,transparent 1px 4px),var(--grain)}
.foot-cards{display:grid;grid-template-columns:repeat(4,clamp(200px,14.6vw,262px));justify-content:center;gap:19px;padding-inline:24px}
.fcard{min-height:287px;padding:26px 22px;background:color-mix(in srgb,var(--t-surface) 80%,var(--t-border));border:1px solid color-mix(in srgb,var(--t-border) 70%,var(--t-heading) 8%);border-radius:13px;box-shadow:0 14px 28px -24px color-mix(in srgb,var(--t-heading) 40%,transparent)}
.fcard .logo{font-size:1.24rem;align-items:flex-start}
.fcard .logo-mark{width:24px;height:24px;margin-top:.05rem}
.fcard .about{font-size:.88rem;line-height:1.6;margin-top:1rem}
.fcard h2{font-family:var(--t-font-body);font-size:.72rem;font-weight:800;letter-spacing:.18em;line-height:1.3;text-transform:uppercase;color:var(--t-heading);margin-bottom:1rem}
.fcard li{font-size:.9rem;margin-bottom:.35rem}
.fcard li a{display:inline-block;padding-block:4px;transition:color .2s}
.fcard li a:hover{color:var(--t-heading)}
.f-contact li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.7rem;overflow-wrap:anywhere}
.f-contact svg{width:16px;height:16px;flex:none;margin-top:.25rem;color:var(--t-heading)}
.f-contact a{padding-block:1px}
/* the row keeps clear of the two sprig columns, so no word ever sits on a leaf */
.foot-bottom{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem 1.6rem;padding:22px calc(clamp(110px,15vw,216px) + 8px) 26px;font-size:.84rem;color:var(--t-text);text-align:center}
.socials{display:flex;gap:.55rem}
.socials a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--t-heading) 22%,transparent);color:var(--t-heading);transition:background-color .2s,border-color .2s}
.socials a:hover{background:color-mix(in srgb,var(--t-heading) 8%,transparent);border-color:color-mix(in srgb,var(--t-heading) 45%,transparent)}
.socials svg{width:15px;height:15px}
.sprig{position:absolute;bottom:-6px;z-index:-1;width:clamp(110px,15vw,216px);aspect-ratio:440/667;background:url("img/sprig.webp") 0 100%/contain no-repeat;pointer-events:none;
  filter:drop-shadow(10px 12px 10px color-mix(in srgb,var(--t-heading) 16%,transparent));transform-origin:22% 100%;animation:sway 7s ease-in-out infinite alternate}
.sprig-l{left:-4px}
/* mirrored about its own centre: a flip about the sway pivot would shove it 65px inward */
.sprig-r{right:-4px;scale:-1 1;transform-origin:50% 100%;animation-delay:-3.5s}
@keyframes sway{from{rotate:-1.5deg}to{rotate:1.5deg}}

/* ── interior page hero: the sunlit wall, a rimmed sage panel, a still life ── */
.page-hero{position:relative;overflow:hidden;height:clamp(470px,43.3vw,640px);background:linear-gradient(100deg,color-mix(in srgb,var(--t-bg) 84%,var(--t-border)) 0%,var(--t-bg) 55%);isolation:isolate}
.ph-photo{position:absolute;top:0;right:0;bottom:0;width:45.9%;z-index:0}
.ph-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%);mask-image:linear-gradient(90deg,transparent 0,#000 20%)}
.ph-shade{position:absolute;inset:-6%;z-index:1;pointer-events:none;background:url("img/leaf-shadow.webp") 10% 20%/cover no-repeat;opacity:.5;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 48%,transparent 60%);mask-image:linear-gradient(90deg,#000 0,#000 48%,transparent 60%);animation:drift 18s ease-in-out infinite alternate}
.ph-panel{position:absolute;left:7%;top:17.6%;width:46.9%;height:65.4%;z-index:2;display:flex;align-items:center;padding:0 9%;background:var(--t-brand);border:3px solid var(--t-bg);border-radius:calc(var(--t-radius) + 4px);box-shadow:0 30px 60px -40px color-mix(in srgb,var(--t-heading) 55%,transparent);overflow:hidden}
/* sunlight on the panel is LIGHT, never shadow, so the ink keeps its 4.5:1 */
.ph-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(40% 55% at 82% 18%,color-mix(in srgb,var(--t-bg) 16%,transparent),transparent 70%),
  radial-gradient(30% 45% at 12% 86%,color-mix(in srgb,var(--t-bg) 12%,transparent),transparent 70%),var(--grain);opacity:.9}
.ph-copy{position:relative;color:var(--t-on-brand);max-width:36rem}
.page-hero h1{font-size:clamp(2.2rem,1.1rem + 2.7vw,3.4rem);line-height:1.06;color:var(--t-on-brand);max-width:17ch;margin:.85rem 0 1rem}
.page-hero .lede{font-size:clamp(.98rem,.92rem + .25vw,1.1rem);line-height:1.6;color:var(--t-on-brand);max-width:42ch}
.page-hero .actions{margin-top:1.6rem}
.crumb{display:flex;align-items:center;gap:.55rem;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem}
.crumb a{padding-block:3px;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.ph-sprig{position:absolute;left:calc(7% - 58px);top:calc(17.6% - 60px);z-index:3;width:clamp(90px,9vw,132px);aspect-ratio:440/667;background:url("img/sprig.webp") 0 0/contain no-repeat;pointer-events:none;rotate:152deg;scale:-1 1;
  filter:drop-shadow(-6px 10px 8px color-mix(in srgb,var(--t-heading) 22%,transparent))}

/* ── services: six photo | color panel cards ── */
.svc{padding:38px 0}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:29px 24px;width:min(1274px,100% - 11.5vw);margin-inline:auto}
.svc-card{--fill:var(--t-brand);--ink:var(--t-on-brand);--ink-2:var(--t-on-brand);display:grid;grid-template-columns:minmax(0,min(45.5%,307px)) minmax(0,1fr);gap:4px;min-height:283px;padding:13px 7px;background:color-mix(in srgb,var(--t-surface) 60%,var(--t-bg));border:1px solid var(--t-border);border-radius:var(--t-radius);box-shadow:var(--shadow-soft);transition:transform .35s var(--ease),box-shadow .35s ease}
.svc-card:hover{transform:translateY(-4px)}
.svc-card.blush{--fill:var(--t-accent);--ink:var(--t-heading);--ink-2:var(--t-text)}
.svc-card .ph{position:relative;overflow:hidden;border-radius:13px;background:var(--t-surface-2)}
.svc-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc-card:hover .ph img{transform:scale(1.04)}
.svc-card .body{display:flex;flex-direction:column;justify-content:center;padding:26px 28px;background:var(--fill);border-radius:14px;color:var(--ink-2)}
.svc-card h3{font-size:1.52rem;line-height:1.12;color:var(--ink);margin-bottom:.6rem}
.svc-card p{font-size:.95rem;line-height:1.6;color:var(--ink-2)}

/* ── the four step cards and their connectors ── */
.steps{position:relative;overflow:hidden;padding:63px 0 66px;border-top:2px solid color-mix(in srgb,var(--t-bg) 40%,#fff);background:var(--t-bg);isolation:isolate}
.steps-row{--gap:63px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);width:min(1188px,100% - 17.5vw);margin-inline:auto}
.step{--fill:var(--t-brand);--ink:var(--t-on-brand);position:relative;display:grid;grid-template-columns:113px minmax(0,1fr);align-items:center;gap:14px;min-height:315px;padding:28px 12px 18px 11px;background:var(--fill);border:3px solid var(--t-bg);border-radius:calc(var(--t-radius) + 2px);box-shadow:0 18px 36px -30px color-mix(in srgb,var(--t-heading) 55%,transparent);color:var(--ink)}
.step:nth-child(even){--fill:var(--t-accent);--ink:var(--t-heading)}
.step .ph{align-self:stretch;position:relative;overflow:hidden;min-height:250px;border-radius:14px;border:2px solid var(--t-bg);background:var(--t-surface-2)}
.step .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.step .tile{align-self:stretch;display:grid;place-items:center;min-height:250px;border-radius:14px;border:2px solid var(--t-bg);background:color-mix(in srgb,var(--fill) 55%,var(--t-surface));color:var(--t-heading)}
.step .tile svg{width:40px;height:40px}
.step .num{display:block;font-family:var(--t-font-head);font-size:2.3rem;line-height:1;margin-bottom:.55rem}
.step h3{font-family:var(--t-font-body);font-weight:700;font-size:.98rem;line-height:1.3;letter-spacing:0;color:var(--ink)}
/* the connector hangs off each card and spans the gap to the next one */
.step:not(:last-child)::after{content:"";position:absolute;top:49%;left:calc(100% + 5px);width:calc(var(--gap) - 4px);height:5px;border-radius:3px;background:var(--t-grad);transform-origin:0 50%}
.js .step::after{transform:scaleX(0);transition:transform .6s var(--ease)}
.js .steps-row.in .step::after{transform:scaleX(1)}
.js .steps-row.in .step:nth-child(2)::after{transition-delay:.3s}
.js .steps-row.in .step:nth-child(3)::after{transition-delay:.6s}
.edge-sprig{position:absolute;top:-10px;z-index:-1;width:clamp(80px,9vw,130px);aspect-ratio:440/667;background:url("img/sprig.webp") 0 0/contain no-repeat;pointer-events:none;opacity:.95;filter:drop-shadow(6px 10px 8px color-mix(in srgb,var(--t-heading) 14%,transparent))}
.edge-sprig.l{left:-22px;rotate:24deg}
.edge-sprig.r{right:-22px;scale:-1 1;rotate:-24deg}

/* ── split with the wall behind the panel (interior) ── */
.split{position:relative;overflow:hidden;display:grid;grid-template-columns:50.25% minmax(0,1fr);gap:1px;min-height:515px;background:linear-gradient(100deg,var(--t-bg),color-mix(in srgb,var(--t-bg) 86%,var(--t-border)));isolation:isolate}
.split-photo{position:relative;overflow:hidden;min-height:320px;background:var(--t-surface-2)}
.split-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .panel{position:relative;margin:0 3% 24px 0;padding:56px 10%;overflow:hidden}
.split .panel::before{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;background:url("img/leaf-shadow.webp") 70% 10%/cover no-repeat;opacity:.18;mix-blend-mode:multiply;animation:drift 18s ease-in-out infinite alternate}
.split .panel > *{position:relative;z-index:1}
.split-sprig{position:absolute;right:-18px;top:-26px;z-index:2;width:clamp(90px,9vw,128px);aspect-ratio:440/667;background:url("img/sprig.webp") 0 0/contain no-repeat;pointer-events:none;rotate:200deg;filter:drop-shadow(-6px 10px 8px color-mix(in srgb,var(--t-heading) 18%,transparent))}
.checks{display:grid;gap:.85rem;margin-top:1.5rem}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.8rem;align-items:start;font-size:1rem;line-height:1.55;color:var(--t-text)}
/* the mark is ink (3:1 on every preset); the disc behind it is the sage tint */
.checks svg{width:24px;height:24px;color:var(--t-heading);margin-top:.05rem}
.checks svg circle{fill:color-mix(in srgb,var(--t-brand) 32%,transparent);stroke:none}

/* ── stats (about) ── */
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2rem;width:100%;margin-top:2.2rem}
.statrow b{display:block;font-family:var(--t-font-head);font-weight:400;font-size:clamp(2.2rem,1.6rem + 1.6vw,3rem);line-height:1;color:var(--t-heading)}
.statrow span{display:block;margin-top:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}

/* ── questions (families, contact) ── */
.faq-sec{padding:84px 0}
.head{max-width:640px;margin:0 auto 44px;text-align:center}
.head h2{font-size:clamp(1.9rem,1.2rem + 1.8vw,2.6rem);margin:.9rem 0 .8rem}
.head p{font-size:1.04rem;color:var(--t-text)}
.faq{max-width:840px;margin:0 auto;display:grid;gap:.9rem}
.faq details{background:var(--t-surface);border:1px solid var(--t-border);border-radius:calc(var(--t-radius) - 6px);overflow:hidden;transition:box-shadow .3s ease}
.faq details[open]{box-shadow:var(--shadow-soft)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 1.5rem;font-family:var(--t-font-head);font-size:1.22rem;line-height:1.3;color:var(--t-heading)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--t-heading);border-bottom:2px solid var(--t-heading);transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .a{padding:0 1.5rem 1.4rem;font-size:1rem;line-height:1.7;color:var(--t-text);max-width:68ch}

/* ── contact ── */
.contact{padding:72px 0 84px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.4rem;align-items:start;width:min(1180px,100% - 48px);margin-inline:auto}
.form-panel{padding:44px clamp(22px,4vw,48px)}
.form-panel h2{margin-top:.8rem}
.cform{display:grid;gap:1.15rem;margin-top:1.6rem}
.cform .grp{display:grid;gap:.45rem}
.cform label{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t-heading)}
.cform input,.cform select,.cform textarea{width:100%;padding:.85rem 1rem;font-size:.98rem;color:var(--t-heading);background:var(--t-bg);border:1.5px solid color-mix(in srgb,var(--t-heading) 60%,var(--t-surface));border-radius:12px;transition:border-color .2s,box-shadow .2s}
.cform input::placeholder,.cform textarea::placeholder{color:var(--t-muted);opacity:1}
.cform textarea{min-height:130px;resize:vertical}
.cform :is(input,select,textarea):focus-visible{outline:none;border-color:var(--t-heading);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-brand) 45%,transparent)}
.cform .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.cform .btn{justify-self:start;margin-top:.3rem}
.form-note{font-size:.86rem;color:var(--t-muted)}
.form-ok{display:none;padding:1rem 1.15rem;border-radius:12px;background:color-mix(in srgb,var(--t-accent) 55%,var(--t-surface));border:1px solid color-mix(in srgb,var(--t-accent) 70%,var(--t-heading) 10%);color:var(--t-heading);font-size:.96rem}
.form-ok.show{display:block}
.form-ok b{font-family:var(--t-font-head);font-weight:400;font-size:1.1rem}
.info{display:grid;gap:1.2rem}
.info .panel{padding:34px 32px}
.info h2{font-size:1.6rem;margin-bottom:1.2rem}
.info-list{display:grid;gap:1.05rem}
.info-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.9rem;align-items:start;font-size:.97rem;color:var(--t-text);overflow-wrap:anywhere}
.info-list .ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--t-surface-2) 45%,var(--t-surface));color:var(--t-heading)}
.info-list .ic svg{width:19px;height:19px}
.info-list b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t-heading);margin-bottom:.15rem}
.info-list a{padding-block:3px}
.info-list a:hover{color:var(--t-heading)}
.hours{display:grid;gap:.6rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--t-border);font-size:.95rem}
.hours li:last-child{border-bottom:0;padding-bottom:0}
.hours b{font-weight:700;color:var(--t-heading);text-align:right}
.area{padding:0 0 84px}
.area .intro-panel{min-height:0;padding:56px clamp(24px,5vw,72px)}
.map-lite{position:relative;width:100%;height:300px;margin-top:2rem;overflow:hidden;border:1px solid var(--t-border);border-radius:calc(var(--t-radius) - 6px);background:
  repeating-linear-gradient(0deg,transparent 0 38px,color-mix(in srgb,var(--t-heading) 5%,transparent) 38px 39px),
  repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--t-heading) 5%,transparent) 38px 39px),var(--t-bg)}
.map-lite::before{content:"";position:absolute;left:18%;top:0;bottom:0;width:26px;background:color-mix(in srgb,var(--t-brand) 22%,transparent);transform:skewX(-12deg)}
.map-lite::after{content:"";position:absolute;left:0;right:0;top:60%;height:28px;background:color-mix(in srgb,var(--t-accent) 60%,transparent)}
.map-pin{position:absolute;left:50%;top:46%;z-index:2;transform:translate(-50%,-100%);text-align:center}
.map-pin svg{width:40px;height:40px;color:var(--t-heading);filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--t-heading) 30%,transparent))}
.map-pin span{display:inline-block;margin-top:.35rem;padding:.3rem .75rem;border-radius:999px;background:var(--t-heading);color:var(--t-bg);font-size:.74rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.towns{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.4rem}
.towns li{padding:.45rem .95rem;border-radius:999px;background:var(--t-bg);border:1px solid var(--t-border);font-size:.88rem;font-weight:600;color:var(--t-heading)}

/* ── motion M1: the hero settles in ── */
.hero-photo img{animation:settle 1.6s var(--ease) both}
.hero-copy > *{animation:rise .9s var(--ease) both}
.hero-copy > :nth-child(2){animation-delay:.1s}
.hero-copy > :nth-child(3){animation-delay:.2s}
.hero-copy > :nth-child(4){animation-delay:.3s}
.trust li{animation:fade 1s ease .45s both}
.trust li:nth-child(2){animation-delay:.55s}.trust li:nth-child(3){animation-delay:.65s}.trust li:nth-child(4){animation-delay:.75s}
@keyframes settle{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── responsive ── */
@media (max-width:1180px){
  .hdr nav{gap:1.4rem}
  .care-row{gap:24px}
  .care{padding:34px 22px 24px}
  .voice{padding:30px 28px 28px}
  .steps-row{--gap:40px;width:min(1188px,100% - 8vw)}
}
@media (max-width:1100px){
  /* three across, and the last row of two sits centred rather than left behind */
  .care-row{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;width:min(900px,100% - 48px)}
  .care{min-height:0;width:calc((100% - 48px) / 3)}
  .steps-row{grid-template-columns:repeat(2,minmax(0,1fr));--gap:28px;width:min(640px,100% - 48px)}
  .step::after{display:none}
  .foot-cards{grid-template-columns:repeat(2,minmax(0,280px))}
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hdr nav{display:none}
  .menu-btn{display:grid}
  .hdr.open nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;padding:.5rem 24px 1.3rem;background:var(--t-surface);border-bottom:1px solid var(--t-border);box-shadow:0 30px 50px -30px color-mix(in srgb,var(--t-heading) 50%,transparent)}
  .hdr.open nav a{padding:.9rem 0;font-size:1rem;color:var(--t-heading);border-bottom:1px solid var(--t-border)}
  .hdr.open nav a::after{display:none}
  .hdr.open nav a.on{color:var(--t-heading);text-decoration:underline;text-decoration-color:var(--t-brand);text-decoration-thickness:2px;text-underline-offset:6px}
  .hdr.open nav .nav-cta{margin-top:1rem;justify-content:center;text-align:center;border-bottom:0;padding:.95rem;text-decoration:none}
  .hdr.open .menu-btn .bars{display:none}
  .hdr.open .menu-btn .x{display:block}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;height:auto}
  .hero-photo{height:clamp(300px,62vw,520px)}
  .hero-panel{padding:48px clamp(22px,7vw,64px) 52px}
  .trust ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;padding-block:1.6rem}
  .story,.split{grid-template-columns:1fr;padding:3px 0 0}
  .story-photo,.split-photo{min-height:0;aspect-ratio:16/10}
  .panel{border-radius:calc(var(--t-radius) - 6px)}
  .story .panel{margin:0 12px}
  .split .panel{margin:0 12px 24px}
  .voice-row{grid-template-columns:1fr;max-width:640px}
  .voice{min-height:0}
  .page-hero{height:auto;display:flex;flex-direction:column;padding-bottom:28px}
  .ph-photo{position:relative;width:100%;height:clamp(240px,52vw,420px)}
  .ph-photo img{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .ph-shade{-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 60%);mask-image:linear-gradient(180deg,transparent 30%,#000 60%)}
  .ph-panel{position:relative;left:auto;top:auto;width:auto;height:auto;margin:-64px 16px 0;padding:40px clamp(22px,6vw,48px)}
  /* stacked, the panel's corner sits under the heading, so the sprig would land on words */
  .ph-sprig,.split-sprig{display:none}
  .svc-grid{grid-template-columns:1fr;width:min(720px,100% - 32px)}
  .contact-grid{grid-template-columns:1fr}
  .closing.has-flowers .closing-copy{padding-left:0}
  /* centred copy would sit on the leaves; the flowers are a wide-screen ornament */
  .closing .flowers{display:none}
}
@media (max-width:760px){
  :root{--hdr-h:64px}
  .care-row{display:grid;grid-template-columns:1fr;width:min(560px,100% - 32px);gap:14px}
  .care{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;padding:16px;width:auto}
  .care .tile{grid-row:1 / 3;width:84px;height:84px;align-self:center}
  .care .tile svg{width:34px;height:34px}
  .care h3{align-self:end;margin:0 0 .25rem}
  .care p{align-self:start}
  .intro{padding:52px 0 46px}
  .intro-panel{min-height:0;padding:44px 22px}
  .panel{padding:40px 24px}
  .cform .two{grid-template-columns:1fr}
  .faq-sec{padding:64px 0}
}
@media (max-width:640px){
  .closing .flowers{display:none}
  .closing{padding:56px 20px}
  .steps-row{grid-template-columns:1fr;width:min(420px,100% - 32px)}
  .step{min-height:0}
  .step .ph,.step .tile{min-height:200px}
  .edge-sprig{display:none}
  .foot-cards{grid-template-columns:minmax(0,420px);padding-inline:16px}
  .fcard{min-height:0}
  /* phones: small sprigs in a band of their own under the words */
  .sprig{width:80px}
  .foot-bottom{padding:22px 20px 132px}
  .statrow{gap:1.4rem 1rem}
  .svc-card{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
  .svc-card .body{padding:20px 18px}
  .svc-card h3{font-size:1.28rem}
  .svc-card p{font-size:.9rem}
}
@media (max-width:420px){
  .trust ul{grid-template-columns:1fr}
  .hero-panel{padding:40px 20px 44px}
  .hero h1{font-size:2.45rem}
  .logo{font-size:1.25rem}
  .page-hero h1{font-size:2.05rem}
}

/* reduced motion: nothing moves, nothing waits to be revealed */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .heart-rule span,.js .step::after{transform:none}
}

/* Embedded previews (gallery grid + Borg Studio iframe): every motion is off
   and every reveal is shown, so a scaled preview is a still, finished page. */
html.embedded *,html.embedded *::before,html.embedded *::after{animation:none!important;transition:none!important}
html.embedded .rv{opacity:1!important;transform:none!important}
html.embedded .heart-rule span,html.embedded .step::after{transform:none!important}