/* theme.css — Advent Senior Living · editorial warm-green redesign
(reference: supplied screenshot, Oct 2026). Replaces styles.css on the home page. */
:root{
--ivory:#FBF9F3; --cream:#FAF7EF; --beige:#F2ECE1;
--green:#2F4F2F; --dgreen:#25402A; --olive:#5E7145; --moss:#5A6D3F;
--gold:#B18431; --goldh:#9A7126;
--navy:#102744;
--ink:#393A35; --mut:#6D6E66; --line:#E6DFD3; --soft:#B9B2A2;
--serif:'Playfair Display',Georgia,'Iowan Old Style',serif;
--sans:'Open Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);
font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--dgreen);font-weight:500;margin:0 0 .5em;line-height:1.15}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px;margin:0 auto}
/* ---------- buttons ---------- */
.btn{display:inline-block;border:1px solid transparent;border-radius:2px;cursor:pointer;
font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.095em;
text-transform:uppercase;text-decoration:none;padding:14px 24px;line-height:1.2;
transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--goldh)}
.btn-green{background:var(--moss);color:#fff}
.btn-green:hover{background:#4C5D35}
.btn-white{background:#fff;color:var(--dgreen)}
.btn-white:hover{background:#F4EFE3}
.btn-ghost{border-color:rgba(255,255,255,.85);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-line{border-color:var(--soft);color:var(--dgreen);background:transparent}
.btn-line:hover{border-color:var(--green);background:#EFEADB}
/* ---------- demo notice ---------- */
.demobar{background:var(--beige);color:#6B5320;text-align:center;font-size:11.5px;
letter-spacing:.04em;padding:7px 14px;border-bottom:1px solid var(--line)}
.demobar b{letter-spacing:.12em}
/* ---------- header (single row bar, from the supplied reference) ---------- */
header.site{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
header.site .wrap{max-width:1280px}
.headrow{display:grid;grid-template-columns:auto 1fr;
grid-template-areas:"brand right" "brand nav";
column-gap:44px;row-gap:2px;align-items:center;padding:12px 0 10px;min-height:96px}
.brand{grid-area:brand;display:flex;align-items:center;text-decoration:none}
.brand img{height:100px;width:auto;mix-blend-mode:multiply}
/* crop the logo file's built-in white padding so the wordmark reads larger in the same bar */
header.site .brand{height:94px;overflow:hidden}
header.site .brand img{height:120px;margin:-12px 0 -17px -18px}
nav.main{grid-area:nav;justify-self:end;display:flex;gap:20px;align-items:center}
nav.main a{display:inline-flex;align-items:center;gap:8px;color:var(--dgreen);
text-decoration:none;font-family:'Montserrat',var(--sans);font-size:11.5px;
font-weight:500;letter-spacing:.09em;text-transform:uppercase;
white-space:nowrap;padding:9px 0}
nav.main a::after{content:"";flex:0 0 auto;width:0;height:0;
border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid currentColor;transform:translateY(1px)}
nav.main a:hover{color:var(--gold)}
/* the Care item: a real drop-down (memory care + personal care) */
nav.main .hasmenu{position:relative}
nav.main .hasmenu::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:18px}
nav.main .hasmenu > a::after{border-top-color:currentColor}
/* the Care item opens the drop-down but goes nowhere on its own */
nav.main .hasmenu > a.menustatic{cursor:default}
nav.main .submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
min-width:214px;background:#fff;border:1px solid var(--line);border-radius:3px;
box-shadow:0 14px 34px rgba(40,32,18,.16);padding:8px 0;display:none;z-index:65}
nav.main .hasmenu:hover .submenu,
nav.main .hasmenu:focus-within .submenu{display:block}
nav.main .submenu a{display:block;padding:11px 22px;font-size:11px;letter-spacing:.08em;
white-space:nowrap;color:var(--dgreen)}
nav.main .submenu a::after{display:none}
nav.main .submenu a:hover{background:var(--cream);color:var(--gold)}
.head-right{grid-area:right;justify-self:end;display:flex;align-items:center;flex:0 0 auto}
.head-phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;
color:var(--dgreen);text-decoration:none;white-space:nowrap;
padding-right:18px;margin-right:18px;border-right:1px solid var(--line)}
.head-phone svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6}
.head-sched{font-family:var(--serif);font-size:16px;color:var(--dgreen);text-decoration:none;
white-space:nowrap;padding-right:18px;margin-right:18px;border-right:1px solid var(--line)}
.head-sched:hover{color:var(--gold)}
.head-social{display:flex;align-items:center;gap:12px;margin-left:6px}
.head-social a{display:grid;place-items:center;width:20px;height:20px}
.head-social svg{width:18px;height:18px;stroke:var(--olive);fill:none;stroke-width:1.5}
.head-social a:hover svg{stroke:var(--gold)}
@media (min-width:1280px){ .head-social{display:flex} }
@media (max-width:1180px){
.headrow{gap:20px}
nav.main{gap:13px}
nav.main a{font-size:10.5px;letter-spacing:.045em}
.head-sched{border-right:0;padding-right:0;margin-right:0}
}
/* ---------- hero ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;
background:#22301F url('assets/hero-caregiver.jpg?v=20261024e') center 42%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,17,10,.88) 0%,rgba(6,17,10,.74) 34%,rgba(6,17,10,.28) 62%,rgba(6,17,10,0) 88%)}
.hero .wrap{position:relative;width:100%;padding-top:74px;padding-bottom:74px}
.hero-copy{max-width:560px}
.hero h1{color:#fff;font-size:54px;line-height:1.06;letter-spacing:-.01em;margin-bottom:.42em;
text-wrap:balance}
.hero p.lede{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.6;
color:#EFEADB;max-width:430px;margin-bottom:1.7em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{padding:15px 26px}
/* ---------- olive band ---------- */
.band{background:var(--olive);color:#fff}
.band .row{display:flex;align-items:center;gap:26px;padding:22px 28px;flex-wrap:wrap}
.band .cal{flex:0 0 auto;width:38px;height:38px;stroke:#fff;fill:none;stroke-width:1.3}
.band .b1{font-family:var(--serif);font-size:23px;line-height:1.1;letter-spacing:.02em;
text-transform:uppercase;white-space:nowrap}
.band .b2{font-size:12.5px;color:rgba(255,255,255,.86);margin-top:3px}
.band .div{width:1px;align-self:stretch;min-height:46px;background:rgba(255,255,255,.38)}
.band .b3{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.95);max-width:340px;margin:0}
.band .btn{margin-left:auto;white-space:nowrap;padding:12px 22px}
/* ---------- sections ---------- */
section{padding:78px 0}
.cream{background:var(--cream)}
.beige{background:var(--beige)}
h2.sec{font-size:34px;text-align:center;margin-bottom:.35em}
.rule{width:42px;height:2px;background:var(--gold);margin:0 auto 42px}
.lead{max-width:640px;margin:0 auto 42px;text-align:center;color:var(--mut);font-size:15px}
/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(6,1fr);gap:30px;text-align:center}
.feat svg{width:46px;height:46px;stroke:#43603C;fill:none;stroke-width:1.25;
stroke-linecap:round;stroke-linejoin:round;margin:0 auto 16px}
.feat h3{font-size:17.5px;margin-bottom:.45em}
.feat p{font-size:12.5px;line-height:1.6;color:var(--mut);margin:0}
/* ---------- photo strip heading (same face/size as the section titles) ---------- */
.strip-head{margin-top:70px}
.strip-head .rule{margin-bottom:0}
.strip-head + .strip{margin-top:34px}
/* ---------- photo strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;margin-top:52px}
.strip figure{margin:0}
.strip img{width:100%;height:250px;object-fit:cover;border-radius:3px;box-shadow:0 3px 12px rgba(40,32,18,.12)}
.strip figcaption{font-size:13px;text-align:center;color:var(--ink);margin-top:10px}
/* ---------- about split ---------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold);margin-bottom:14px}
.split h2{font-size:40px;line-height:1.12;max-width:11em}
.split p{font-size:15px;line-height:1.75;color:var(--mut);max-width:430px}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;box-shadow:0 10px 28px rgba(40,32,18,.13)}
/* ---------- suites ---------- */
.suites{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.suite{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden;
display:flex;flex-direction:column}
.suite .plan{background:#fff;border-bottom:1px solid var(--line);height:270px;display:flex;
align-items:center;justify-content:center;padding:10px}
.suite .plan img{width:100%;height:100%;object-fit:contain}
.suite .plan .todo{font-size:12px;color:#8A6A25;text-align:center;padding:18px;line-height:1.5}
.suite .body{padding:22px 24px 24px}
.suite .kind{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.suite h3{font-size:22px;margin:.35em 0 .4em}
.suite p{font-size:13.5px;color:var(--mut);margin:0 0 .9em;line-height:1.6}
.suite .rates2{margin:0;font-size:13px;font-weight:600;color:var(--dgreen);line-height:1.8}
.suite .rates2 span{display:block;color:var(--mut);font-weight:400;font-size:11.5px;
letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
/* ---------- pricing ---------- */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.rate{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px 32px}
.rate h3{font-size:24px;margin:.2em 0 .45em}
.rate .rnote{font-size:13.5px;color:var(--mut);line-height:1.65}
.rate table{width:100%;border-collapse:collapse;margin:1.1em 0 .4em}
.rate tr{border-top:1px solid var(--line)}
.rate tr:first-child{border-top:0}
.rate th{text-align:left;font-weight:600;font-size:14px;color:var(--ink);padding:14px 0}
.rate td{text-align:right;font-family:var(--serif);font-size:26px;color:var(--dgreen);
padding:10px 0;white-space:nowrap}
.rate td span{font-family:var(--sans);font-size:12px;color:var(--mut);margin-left:2px}
.fineprint{font-size:12px;color:var(--mut);line-height:1.6;margin-top:14px}
/* ---------- testimonial ---------- */
.quote{max-width:900px;margin:0 auto;background:var(--ivory);border-radius:4px;padding:38px 44px;
display:flex;gap:28px;align-items:flex-start}
.quote .glyph{font-family:var(--serif);font-size:62px;line-height:.8;color:var(--gold);flex:0 0 auto}
.quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:14px;margin-top:18px}
.quote .who img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.quote .who span{font-size:12.5px;color:var(--mut)}
.dots{display:flex;gap:9px;justify-content:center;margin-top:28px}
.dots i{width:7px;height:7px;border-radius:50%;background:#CFC6B6;display:block}
.dots i.on{background:var(--gold)}
/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:20px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:15.5px;color:var(--dgreen);list-style:none;
display:flex;justify-content:space-between;gap:18px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:19px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;font-size:14px;color:var(--mut);line-height:1.75;max-width:64ch}
/* ---------- schedule ---------- */
.sched{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.sched h2{font-size:34px}
.sched .pick{display:flex;flex-wrap:wrap;gap:8px;margin:.3em 0 1.1em}
.sched .pick button{border:1px solid var(--soft);background:#fff;border-radius:2px;padding:9px 16px;
font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.sched .pick button.on{background:var(--moss);color:#fff;border-color:var(--moss)}
.sched-form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:32px}
.sched-form h3{font-size:21px;margin:0 0 .5em}
.sched-form .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dgreen)}
.sched-form input{width:100%;padding:12px 14px;border:1px solid var(--soft);border-radius:2px;
font-family:var(--sans);font-size:14px;margin-bottom:12px;background:#fff;color:var(--ink)}
.sched-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sched-form .btn{width:100%;text-align:center;margin-top:4px}
.okmsg{display:none;margin-top:14px;background:#EEF5EF;border:1px solid #BFD8C4;border-radius:2px;
padding:16px;color:var(--dgreen);font-size:13.5px;font-weight:600}
/* ---------- navy CTA band ---------- */
.cta{background-color:var(--navy);color:#fff;padding:62px 0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.055' stroke-width='1.2'%3E%3Cpath d='M110 30c30 22 30 62 0 84-30-22-30-62 0-84z'/%3E%3Cpath d='M110 114v76'/%3E%3Cpath d='M40 90c22 14 24 42 4 58-18-14-22-42-4-58z'/%3E%3Cpath d='M180 96c20 16 16 44-2 58-20-16-18-44 2-58z'/%3E%3C/g%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:left center;background-size:360px auto}
.cta .row{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{color:#fff;font-size:34px;margin-bottom:.3em}
.cta p{color:#E7EAF0;font-size:14px;max-width:430px;margin-bottom:18px}
.cta .contact{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:#E7EAF0}
.cta .contact span{display:inline-flex;align-items:center;gap:8px}
.cta .contact svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6}
.cta .btns{display:flex;flex-direction:column;gap:12px;min-width:250px}
.cta .btns .btn{text-align:center}
/* ---------- footer ---------- */
footer.site{background:var(--ivory);border-top:1px solid var(--line);padding:56px 0 22px;font-size:13px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px}
footer .brand img{height:60px;margin-bottom:16px}
footer h4{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--green);margin:4px 0 14px}
footer p,footer ul{margin:0;list-style:none;padding:0;font-size:13px;line-height:1.95;color:var(--mut)}
footer a{color:var(--mut);text-decoration:none}
footer a:hover{color:var(--gold)}
footer .contact li{display:flex;gap:9px;align-items:flex-start;line-height:1.6;margin-bottom:9px}
footer .contact svg{width:14px;height:14px;margin-top:3px;stroke:var(--green);fill:none;stroke-width:1.6;flex:0 0 auto}
footer .social{display:flex;gap:12px;margin-top:6px}
footer .social a{width:26px;height:26px;display:grid;place-items:center}
footer .social svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:1.5}
.bottombar{border-top:1px solid var(--line);margin-top:38px;padding-top:18px;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:11.5px;color:var(--mut)}
.bottombar a{text-decoration:none}
.replay{cursor:pointer}
/* ---------- mobile call bar ---------- */
.mobar{display:none}
/* ---------- mid-page tour bar ---------- */
.tourbar{background:var(--dgreen);color:#fff;padding:22px 0}
.tourbar .row{display:flex;align-items:center;justify-content:space-between;
gap:26px;flex-wrap:wrap}
.tourbar .tb-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:#C9AE76;margin-bottom:5px}
.tourbar .tb-line{font-family:var(--serif);font-size:22px;line-height:1.25;color:#fff}
.tourbar .tb-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tourbar .tb-phone{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
color:#fff;text-decoration:none;white-space:nowrap}
.tourbar .tb-phone svg{width:15px;height:15px;stroke:#C9AE76;fill:none;stroke-width:1.6}
.tourbar .btn{padding:12px 24px}
@media (max-width:640px){
.tourbar{padding:20px 0}
.tourbar .tb-line{font-size:18px}
.tourbar .tb-actions{width:100%;gap:14px;justify-content:space-between}
}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.features{grid-template-columns:repeat(3,1fr);gap:34px}
.strip{grid-template-columns:repeat(3,1fr)}
.strip img{height:180px}
}
@media (max-width:900px){
.hero{min-height:0}
.hero h1{font-size:40px}
.hero .wrap{padding-top:104px;padding-bottom:56px}
.band .btn{margin-left:0}
.band .div{display:none}
.split,.sched,.rates,.calcrow{grid-template-columns:1fr;gap:30px}
.split h2{font-size:32px}
.suites{grid-template-columns:1fr}
.quote{padding:30px 26px;gap:18px}
footer .cols{grid-template-columns:1fr 1fr;gap:28px}
}
/* phone: the SETTLE IN band stacks and centres */
@media (max-width:640px){
.band .row{flex-direction:column;justify-content:center;text-align:center;gap:16px;padding:28px 22px}
.band .cal{margin:0 auto}
.band .b3{max-width:33ch;margin:0 auto}
.band .btn{margin:4px auto 0}
}
@media (min-width:821px) and (max-width:1080px){
.headrow{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand right" "brand nav";
column-gap:30px;row-gap:2px;align-items:center;padding:12px 0 10px;min-height:92px}
.brand{grid-area:brand}
nav.main{grid-area:nav;justify-self:end;margin:0;gap:14px}
nav.main a{font-size:10.5px}
.head-right{grid-area:right;justify-self:end}
.head-phone{font-size:13px;gap:7px;padding-right:14px;margin-right:14px;
border-right:1px solid var(--line)}
.head-sched{font-size:15px;border-right:0;padding-right:0;margin-right:0}
}
@media (max-width:820px){
nav.main{display:none}
.headrow{min-height:68px;gap:16px;padding:9px 18px}
.head-phone{display:none}
.head-sched{font-size:15px;padding:10px 0}
.brand img{height:72px}
/* the phone bar keeps the logo's own white margin - no negative crop, so the
arch and the left edge of the mark stay whole inside the bar */
header.site .brand{height:68px}
header.site .brand img{height:68px;margin:0}
body{padding-bottom:66px}
.mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--dgreen);
padding:9px 14px;gap:16px}
.mobar .btn{flex:1;text-align:center;padding:12px 8px}
}
@media (max-width:640px){
section{padding:56px 0}
h2.sec{font-size:27px}
.hero h1{font-size:33px}
.features{grid-template-columns:1fr 1fr;gap:26px}
.strip{grid-template-columns:1fr 1fr}
.strip img{height:132px}
.split h2{font-size:28px}
.cta h2{font-size:27px}
.cta .btns{width:100%}
footer .cols{grid-template-columns:1fr}
.quote .glyph{font-size:44px}
.quote blockquote{font-size:17px}
}
/* ---------- $1,500 community fee badge (top right on desktop, top left on the phone) ---------- */
.feebadge{position:absolute;top:14px;right:14px;z-index:30;width:178px;height:178px;
display:grid;place-items:center;text-decoration:none;
filter:drop-shadow(0 10px 20px rgba(20,14,4,.30));transition:transform .18s ease}
.feebadge:hover,.feebadge:focus-visible{transform:scale(1.04)}
/* On wide screens the hero badge rides the photo's own right edge instead of the
text column's, so it sits in the flower light and clears the resident's head.
(57px margin each side of the 1140px wrap cancels out; 3.5vw keeps it proportional.) */
@media (min-width:1141px){
.hero .feebadge{right:calc(570px - 46.5vw)}
}
/* the cream disc: one hairline gold rim and one fine inner ring */
.feebadge::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;
border:1.5px solid #B18431;
background:
radial-gradient(circle closest-side,rgba(0,0,0,0) calc(100% - 9px),rgba(177,132,49,.55) calc(100% - 9px),rgba(177,132,49,.55) calc(100% - 7px),rgba(0,0,0,0) calc(100% - 7px)),
radial-gradient(circle at 50% 30%,#FDF9EF 0%,#F3ECDF 62%,#E7DAC4 100%)}
/* the small gold heart at the top + the botanical sprig down the right side */
.feebadge::after{content:"";position:absolute;inset:-9px;z-index:3;pointer-events:none;
background:url("data:image/svg+xml,") center/contain no-repeat}
.feebadge > span{position:relative;z-index:2;width:112px;text-align:center;color:#25402A;
font-family:var(--sans);line-height:1;transform:translateY(10px)}
.feebadge b{display:block;font-family:var(--serif);font-size:27px;font-weight:600;
letter-spacing:-.005em;color:#25402A}
.feebadge i{display:block;font-style:normal;font-size:8px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:#4E6238;margin-top:5px}
.feebadge strong{display:block;width:calc(100% + 112px);margin:12px 0 9px -56px;padding:7px 0 6px;
background:linear-gradient(180deg,#CBA45C 0%,#B18431 58%,#946A22 100%);
color:#fff;font-size:13px;font-weight:700;letter-spacing:.17em;
text-transform:uppercase;
clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%)}
.feebadge em{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;
line-height:1.3;color:#3B5032;letter-spacing:0}
/* two mirrored olive sprigs, tucked BEHIND the disc rim (the small gold heart lives on the price line) */
.feebadge::after{inset:-21px;z-index:0;
background-image:url("data:image/svg+xml,")}
/* the small gold heart, sitting just above the $1,500 */
.feebadge b::before{content:"";position:absolute;left:50%;top:-27px;margin-left:-11px;
width:22px;height:19px;
background:url("data:image/svg+xml,") center/contain no-repeat}
/* sprigs v4: ONE continuous stem per side, every leaf base sits ON the stem line */
.feebadge::after{inset:-21px;z-index:0;background-position:center;background-size:contain;
background-repeat:no-repeat;
background-image:url("data:image/svg+xml,")}
@media (max-width:900px){
/* phone: the promo badge rides the TOP-RIGHT of the hero photo, exactly like
the desktop version (it used to drop down above the headline instead) */
.hero .wrap{position:static}
.feebadge{position:absolute;top:22px;right:22px;margin:0;width:104px;height:104px;
filter:drop-shadow(0 6px 14px rgba(20,14,4,.35))}
.feebadge > span{transform:translateY(7px) scale(.56)}
}
/* ---------- the $1,500 community fee line under every rate ---------- */
.feeline{display:block;font-size:12.5px;font-weight:700;color:#8A6118;margin:10px 0 0;
line-height:1.5;letter-spacing:.01em}
/* ---------- mobile menu (2026-10-25) ----------
Below 820px the six top links were hidden with nothing to open them. The
burger (built by site.js) opens the same nav as a panel under the bar, with
the Care item listing its two pages inline for touch. */
header.site .navtoggle{display:none}
@media (max-width:820px){
header.site .navtoggle{display:inline-grid;place-items:center;width:42px;height:42px;
margin-left:14px;padding:0;border:1px solid #E6DFD3;border-radius:3px;background:#fff;
color:#25402A;cursor:pointer;-webkit-tap-highlight-color:transparent}
header.site .navtoggle span{position:relative;display:block;width:20px;height:2px;background:currentColor}
header.site .navtoggle span::before,
header.site .navtoggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
header.site .navtoggle span::before{top:-6px}
header.site .navtoggle span::after{top:6px}
header.site .navtoggle[aria-expanded="true"] span{background:transparent}
header.site .navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
header.site .navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
header.site .navtoggle:focus-visible{outline:2px solid #B18431;outline-offset:2px}
header.site nav.main.open{display:block;position:absolute;grid-area:auto;justify-self:stretch;
left:0;right:0;top:100%;z-index:59;
background:#fff;border-top:1px solid #E6DFD3;border-bottom:1px solid #E6DFD3;
box-shadow:0 20px 34px rgba(40,32,18,.16);padding:4px 18px 12px;
max-height:calc(100vh - 80px);overflow:auto}
header.site nav.main.open > a,
header.site nav.main.open .hasmenu > a{display:block;padding:14px 2px;font-size:12.5px;
letter-spacing:.09em;border-bottom:1px solid #F1ECE2;color:#25402A}
header.site nav.main.open a::after{display:none}
header.site nav.main.open .hasmenu{position:static}
header.site nav.main.open .submenu{display:block;position:static;transform:none;
min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;
padding:0 0 4px;margin:0}
header.site nav.main.open .submenu a{display:block;padding:12px 2px 12px 18px;font-size:11.5px;
letter-spacing:.08em;color:#5E7145;border-bottom:1px solid #F6F2EA}
header.site nav.main.open .submenu a:last-child{border-bottom:0}
}
/* ---------- phone hero: the photo keeps a band of its own ---------- */
/* On a phone the photo no longer sits behind the headline: it gets a band at
the top (whole faces visible) and the headline starts below it on deep green. */
@media (max-width:640px){
.hero{display:block;min-height:0;background:var(--dgreen);background-image:none}
.hero::before{content:"";display:block;position:relative;inset:auto;
height:255px;
background:#22301F url('assets/hero-caregiver.jpg?v=20261024e') center 30%/cover no-repeat}
.hero .wrap{padding-top:30px;padding-bottom:42px}
/* 2026-10-25: on a phone the promo badge moves to the TOP-LEFT of the photo
band - in the top-right corner it sat across the resident's head. */
.hero .feebadge{left:22px;right:auto;top:18px}
}