/* SecurePath v6 "warm hand" overlay — load AFTER site.css + site2.css.
   Intent: calm, warm, as if one person painted it with a brush. Light only: no dark theme for a scared visitor. */
:root,:root[data-theme="dark"],:root:not([data-theme="light"]){
  --bg:#FBF5EC; --paper:#F6EADA; --paper-2:#F2E3CE; --line:#E7D4BB;
  --ink:#3B2F28; --ink-2:#6B5A4D;
  --clay:#A9532F; --clay-ink:#FFFDF8;           /* terracotta, AA with cream text */
  --teal:#4C6B55; --teal-soft:#E4EBDC;          /* sage: the calm "trust" colour */
  --ochre:#D7A04A; --peach:#F5D7BF; --rose:#EBC3AF; --sky:#D9E4E6;
  --flag:#4C6B55; --flag-ink:#FFFDF8;
  --ill-wood:#C79A6B; --ill-wood-d:#A87A4E; --ill-sofa:#E2B79A; --ill-sofa-d:#CC9C7E; --ill-paper:#FFFBF4; --ill-ink-l:#A99683;
  --f-head:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-voice:"Fraunces",Georgia,serif;
  --f-num:"Fraunces",Georgia,serif;
  --f-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#FBF5EC; --paper:#F6EADA; --paper-2:#F2E3CE; --line:#E7D4BB; --ink:#3B2F28; --ink-2:#6B5A4D;
  --clay:#A9532F; --clay-ink:#FFFDF8; --teal:#4C6B55; --teal-soft:#E4EBDC; --flag:#4C6B55; --flag-ink:#FFFDF8;
  --ill-wood:#C79A6B; --ill-wood-d:#A87A4E; --ill-sofa:#E2B79A; --ill-sofa-d:#CC9C7E; --ill-paper:#FFFBF4; --ill-ink-l:#A99683; --paper-2:#F2E3CE;
  color-scheme:light }}

/* paper: faint grain + warm light, like watercolour paper */
html{background:#FBF5EC}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 700px at 8% -10%, rgba(245,215,191,.55), transparent 60%),
    radial-gradient(900px 600px at 105% 20%, rgba(228,235,220,.7), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,scroll;
  font-weight:400; line-height:1.65; overflow-x:hidden;
}

/* type: soft serif headings, rounded friendly body, no shouting caps */
h1,h2,h3{font-family:var(--f-head);font-weight:500;letter-spacing:-.01em;font-variation-settings:"SOFT" 100,"WONK" 0}
h1{font-weight:450;line-height:1.1}
.num,.phone-big{font-family:var(--f-num);font-weight:600;font-variation-settings:"SOFT" 100;letter-spacing:0}
.lede{font-family:var(--f-voice);font-style:italic;font-weight:350;color:var(--ink-2);font-variation-settings:"SOFT" 100}
.eyebrow,.door-k,.step-when,.tl-when,.tag-h,.callbox-k,.right-now h2{
  text-transform:none;letter-spacing:0;font-family:var(--f-hand);font-weight:600;font-size:24px;line-height:1.1}
.eyebrow,.door-k,.tag-h,.tl-when,.callbox-k{color:var(--teal)}
.now-h,.right-now h2{color:var(--clay)}
.step-when{color:var(--ink-2);font-size:22px}
.human-dot{background:var(--ochre);box-shadow:0 0 0 5px rgba(215,160,74,.25)}

/* a brush stroke under every page's big heading */
.h-hero h1,.m-hero h1,.hero h1{position:relative;padding-bottom:18px}
.h-hero h1::after,.m-hero h1::after,.hero h1::after{
  content:"";position:absolute;left:-4px;bottom:0;width:min(220px,60%);height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 40 4, 80 13, 120 7 S 190 5, 217 9' stroke='%23D7A04A' stroke-width='7' stroke-linecap='round' fill='none' opacity='.75'/%3E%3Cpath d='M10 12 C 60 9, 110 14, 170 9' stroke='%23D7A04A' stroke-width='3' stroke-linecap='round' fill='none' opacity='.45'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* watercolour washes behind heroes */
.h-hero,.m-hero,.hero{position:relative;isolation:isolate}
.h-hero::before,.m-hero::before,.hero::before{
  content:"";position:absolute;inset:-40px 0 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 55% at 78% 40%, rgba(245,215,191,.75), transparent 70%),
    radial-gradient(30% 45% at 92% 75%, rgba(228,235,220,.9), transparent 70%),
    radial-gradient(25% 35% at 12% 15%, rgba(235,195,175,.35), transparent 70%);
  filter:url(#sp-wash);
}

/* top bar: paper, not glass */
.topbar{background:rgba(251,245,236,.94);border-bottom:none;box-shadow:0 1px 0 var(--line)}
.mark{font-family:var(--f-head);font-weight:500}
.nav a{font-family:var(--f-body);font-weight:500}
.nav a[aria-current="page"]{border-bottom-color:var(--ochre)}

/* buttons: hand-cut pills */
.call-pill,.btn{border-radius:22px 26px 24px 20px / 24px 20px 26px 22px;box-shadow:0 2px 0 rgba(122,60,30,.25);font-family:var(--f-body);font-weight:700}
.call-pill:hover,.btn:hover{filter:brightness(1.05)}
.phone-big{border-bottom:none;background:linear-gradient(transparent 62%, rgba(215,160,74,.45) 62%, rgba(215,160,74,.45) 92%, transparent 92%);padding-inline:2px}

/* cards & tiles: soft, slightly irregular, like cut paper */
.tile,.door,.act,.callbox,.fact,.right-now,.qa{
  border-radius:18px 22px 16px 24px / 22px 16px 24px 18px;
  border:1.5px solid var(--line);background:rgba(255,251,244,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 24px -18px rgba(90,55,30,.35)}
.tile:hover,.door:hover{border-color:var(--teal);transform:translateY(-2px) rotate(-.25deg)}
.tile-talk,.callbox{background:linear-gradient(160deg,rgba(245,215,191,.55),rgba(255,251,244,.9) 60%)}
.tile-ic,.m-ic,.vstep-ic{border-radius:46% 54% 50% 50% / 55% 45% 55% 45%;background:var(--teal-soft);color:var(--teal);border:none}
.tile-talk .tile-ic{background:var(--clay);color:var(--clay-ink)}
.tile:nth-child(3n+2) .tile-ic{background:#F6E2CF;color:var(--clay)}
.tile:nth-child(3n) .tile-ic{background:#F3E6C8;color:#8A6420}
.right-now{transform:rotate(-.8deg);background:#FFFBF2}
.chips li{border-radius:999px;background:rgba(255,251,244,.8)}
.who{background:#F3E6C8;border-radius:10px 12px 9px 13px}
.note{background:var(--teal-soft);border-radius:14px 18px 12px 16px}
.step{border-top:none;padding-top:18px;position:relative}
.step::before{content:"";position:absolute;left:0;top:0;width:90px;height:6px;border-radius:6px;background:var(--ochre);opacity:.7;transform:rotate(-1deg)}
.tl-item{border-left:2px dashed var(--line)}
.tl-item::before{border-color:var(--ochre)}

/* bands: a painted wash with soft edges instead of hard grey blocks */
.band{background:linear-gradient(180deg,transparent,rgba(246,234,218,.9) 40px,rgba(246,234,218,.9) calc(100% - 40px),transparent);border-block:none}

/* illustrations: wobble the edges so they read as painted, not vector */
.ill{filter:url(#sp-brush) saturate(.92)}
.ill-wrap{position:relative}
.ill-wrap::before{content:"";position:absolute;inset:6% 4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(245,215,191,.6),transparent);filter:url(#sp-wash)}

a{color:var(--teal);text-decoration-color:rgba(76,107,85,.4);text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible{outline-color:var(--ochre)}
.preview-flag{background:var(--teal)}
footer,.foot{background:transparent}
@media (prefers-reduced-motion:reduce){.tile:hover,.door:hover{transform:none}}

/* v6.1 additions: remaining shouty labels, hero doors, plans, cards */
.callbox-or,.mom3-when,.kit-label{text-transform:none;letter-spacing:0;font-family:var(--f-hand);font-weight:600;font-size:22px}
.mom3-when{color:var(--clay)}
.door2,.plan,.role-card,.lead-card,.about-box,.care,.caregiver-strip,.price-strip,.mom3 > *,.role{
  border-radius:18px 22px 16px 24px / 22px 16px 24px 18px}
.door2{box-shadow:0 2px 0 rgba(122,60,30,.18),0 12px 26px -18px rgba(90,55,30,.4)}
.plan,.role-card,.lead-card,.about-box{background:rgba(255,251,244,.85);border-color:var(--line)}
.plan-ic,.monogram{border-radius:46% 54% 50% 50% / 55% 45% 55% 45%}
.kit-label{background:#F3E6C8;color:#7A5518;border-radius:14px 16px 12px 18px}
.foot{background:linear-gradient(180deg,transparent,rgba(228,235,220,.7));border-top:none}

/* v6.2 logo: the logo is itself a pastel watercolour; give it a clean white mount so it never melts into the warm paper */
.logo{width:54px;height:54px;padding:2px;background:#FFFFFF;border-radius:50%;object-fit:contain;
  box-shadow:0 0 0 1.5px #E7D4BB,0 6px 14px -6px rgba(90,55,30,.45)}
.foot .logo{width:40px;height:40px}
.mark{color:#3B3A78}  /* wordmark picks up the logo's own indigo */
.topbar{background:#FFFDF8}
@media (max-width:420px){.logo{width:46px;height:46px}}
