/* ===========================================================
   Horizon Adult Day Care
   Type:  Bricolage Grotesque (display) / Karla (body)
   Color: cream + white grounds, gold accent, olive & sage
   =========================================================== */

:root{
  color-scheme:light;

  --sand:#F3EFE6;
  --sand-deep:#EBE5D6;
  --white:#FFFFFF;

  --ink:#1E2717;
  --ink-2:#3F4A34;
  --muted:#6E7462;

  --olive:#4A5D3A;
  --sage:#8A9A6E;
  --gold:#E2A63F;
  --gold-soft:#F6E7C8;
  --amber:#A96C18;

  --line:#E2DACA;
  --line-2:#D3C9B4;

  --rail:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink-2);
  font-family:Karla,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type scale ---------- */
h1,h2,h3,.display{
  font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  font-weight:600;color:var(--ink);margin:0;
  line-height:1.04;letter-spacing:-.035em;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,6.2vw,5.2rem);font-weight:700;letter-spacing:-.045em}
h2{font-size:clamp(2.1rem,4vw,3.4rem);letter-spacing:-.04em}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

.rail{width:min(100% - 2.5rem,var(--rail));margin-inline:auto}
section{scroll-margin-top:112px}
.lede{font-size:1.14rem;color:var(--muted);max-width:58ch}
.kicker{
  font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:1.05rem;font-weight:500;
  color:var(--amber);letter-spacing:-.01em;margin-bottom:1.1rem;
}

/* section head: two-column, left-aligned. Not centered, not eyebrowed. */
.shead{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem 4rem;align-items:end;
  margin-bottom:3.75rem}
.shead .lede{padding-bottom:.35rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.9rem;border-radius:999px;border:1.5px solid transparent;
  font-family:Karla,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#222C18}
.btn-gold:hover{background:#EDB253}
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--olive)}
.btn-dark{background:var(--olive);color:#F6F2E7}
.btn-dark:hover{background:#3C4D2E}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- utility + nav ---------- */
.utility{background:var(--olive);color:#CBD5B7;font-size:.855rem}
.utility .rail{display:flex;gap:1.25rem 2rem;justify-content:space-between;align-items:center;
  min-height:44px;flex-wrap:wrap}
.utility a{text-decoration:none;color:inherit}
.utility svg{flex:none;opacity:.75}
.u-addr{display:inline-flex;align-items:center;gap:.5rem}
.u-addr:hover{color:#FFFFFF}
.utility .u-right{display:flex;gap:1.5rem;align-items:center}
.u-es{position:relative;padding-right:1.5rem}
.u-es::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:rgba(203,213,183,.4)}
.u-tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#FFFFFF}
.u-tel:hover{color:var(--gold)}

.nav{position:sticky;top:0;z-index:70;background:var(--white);border-bottom:1px solid var(--line)}
.nav .rail{display:flex;align-items:center;gap:1.75rem;min-height:94px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-logo{width:auto;height:66px;display:block}
.brand-logo--stacked{height:150px}

.menu{display:flex;gap:1.9rem;align-items:center;margin-inline:auto}
.menu > a{text-decoration:none;font-weight:600;font-size:.98rem;color:var(--ink-2);
  padding:.35rem 0;border-bottom:2px solid transparent}
.menu > a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.phone-block{display:flex;flex-direction:column;text-align:right;text-decoration:none;
  line-height:1.25}
.phone-block b{font-size:1.06rem;color:var(--ink);font-weight:700;letter-spacing:-.01em;
  white-space:nowrap}
.phone-block > span{font-size:.79rem;color:var(--muted);margin-top:.12rem}
.phone-block:hover b{color:var(--amber)}
.burger{display:none;background:transparent;border:1.5px solid var(--line-2);border-radius:10px;
  padding:.55rem .6rem;cursor:pointer;color:var(--ink);line-height:0}
.burger .ic-close{display:none}
.burger[aria-expanded="true"] .ic-open{display:none}
.burger[aria-expanded="true"] .ic-close{display:block}
.menu-extra{display:none}

/* ---------- hero ---------- */
.hero{background:var(--sand);overflow:hidden;
  padding:clamp(3rem,5.5vw,4.75rem) 0 clamp(3.5rem,6vw,5.5rem)}
.hero .rail{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:center}

.hero h1{margin-bottom:1.5rem}
.hero h1 .soft{color:var(--olive)}
.hero-actions{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-top:2.4rem}
.calllink{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;
  color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:.1rem}
.calllink:hover{color:var(--amber)}
.hero-chips{display:flex;gap:.6rem 2rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.6rem;
  border-top:1px solid var(--line-2)}
.chip{display:flex;align-items:center;gap:.5rem;font-size:.94rem;font-weight:600;color:var(--muted)}
.chip svg{color:var(--olive);flex:none}

.hero-art{position:relative;align-self:center}
.hero-photo{position:relative;margin:0;overflow:hidden;width:100%;
  height:clamp(400px,44vw,610px);border-radius:14px;
  background:linear-gradient(158deg,#9DAB84,#36452A)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- photo placeholders ---------- */
.ph{
  position:relative;margin:0;overflow:hidden;border-radius:4px;
  /* shows through if the image file is missing */
  background:linear-gradient(158deg,#9DAB84 0%,var(--olive) 58%,#36452A 100%);
  display:flex;align-items:flex-end;
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* caption names the real photo that belongs in this slot; hidden with the draft notes */
.ph figcaption{position:relative;z-index:2;width:100%;padding:.8rem 1rem;color:#F7F2E6;
  font-size:.75rem;letter-spacing:.01em;
  background:linear-gradient(transparent,rgba(18,26,13,.82))}
body.hide-notes .ph figcaption{display:none}

/* ---------- sections ---------- */
.sec{padding:clamp(4rem,7vw,6.5rem) 0}
.sec--sand{background:var(--sand)}
.sec--white{background:var(--white)}
.sec--tight{padding-block:clamp(3rem,5vw,4.5rem)}

/* ---------- about: mission + values (hairline list, no cards) ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.about h2{margin-bottom:1.5rem}
.about .lede + .lede{margin-top:1.1rem}
.values{border-top:1px solid var(--line-2)}
.value{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.6rem 0;
  border-bottom:1px solid var(--line-2)}
.value .ic{color:var(--amber);margin-top:.15rem}
.value b{display:block;font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:600;
  font-size:1.14rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:.2rem}
.value p{font-size:.98rem;color:var(--muted);line-height:1.55}

/* ---------- how you pay: two panels ---------- */
.accepts{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.accept{border:1px solid var(--line-2);border-radius:12px;padding:2.4rem 2.25rem;
  display:flex;flex-direction:column;gap:.85rem;background:var(--sand)}
.accept .ic{color:var(--amber);margin-bottom:.35rem}
.accept h3{font-size:1.45rem}
.accept p{color:var(--muted);font-size:1rem;max-width:46ch}
.accept--dark{background:var(--olive);border-color:var(--olive)}
.accept--dark h3{color:#FBF8F0}
.accept--dark p{color:#CFD8BF}
.accept--dark .ic{color:var(--gold)}
.accept-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:.75rem;
  font-weight:700;text-decoration:none;color:var(--ink)}
.accept-link:hover{color:var(--amber)}
.accept-link svg{transition:transform .16s ease}
.accept-link:hover svg{transform:translateX(3px)}
.accept--dark .insurers{margin-top:auto;padding-top:.75rem}
.accept--dark .insurer{border-color:rgba(251,248,240,.35);color:#EFEBDD}

/* ---------- who we serve: photo cards (cards earn it here) ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.pcard{display:flex;flex-direction:column}
.pcard .ph{height:250px;border-radius:6px}
.pcard h3{margin:1.5rem 0 .7rem}
.pcard > p{font-size:.98rem;color:var(--muted)}
.pcard ul{display:grid;gap:.4rem;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.pcard li{display:flex;gap:.65rem;font-size:.94rem;color:var(--muted)}
.pcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  margin-top:.65rem;flex:none}

/* activities: hairline definition list, three across */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem}
.acts > div{padding:1.5rem 0;border-top:1px solid var(--line-2)}
.acts dt{display:flex;align-items:center;gap:.7rem;font-family:"Bricolage Grotesque",Arial,sans-serif;
  font-weight:600;font-size:1.1rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:.45rem}
.acts dt svg{color:var(--gold);flex:none}
.acts dd{font-size:.95rem;color:var(--muted);line-height:1.6}

/* brochure line, used as a closing pull quote */
.pull{margin-top:3.75rem;
  font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:600;
  font-size:clamp(1.4rem,2.6vw,2.15rem);letter-spacing:-.03em;line-height:1.15;
  color:var(--olive);text-align:center}

.plan .per{font-family:Karla,sans-serif;font-size:.95rem;font-weight:600;color:var(--muted);
  letter-spacing:0}
.plan.feature .per{color:#CFD8BF}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.plan{background:var(--white);border:1px solid var(--line-2);border-radius:10px;padding:2.25rem;
  display:flex;flex-direction:column}
.plan.feature{background:var(--olive);border-color:var(--olive)}
.plan.feature h3,.plan.feature .rate{color:#FBF8F0}
.plan.feature > p,.plan.feature li{color:#CFD8BF}
.plan.feature li svg{color:var(--gold)}
.plan .tag{font-size:.78rem;font-weight:700;color:var(--amber);margin-bottom:.9rem;
  letter-spacing:-.005em}
.plan.feature .tag{color:var(--gold)}
.plan .rate{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:1.55rem;font-weight:600;
  color:var(--ink);letter-spacing:-.03em;margin:.75rem 0 .3rem}
.plan > p{font-size:.96rem;color:var(--muted)}
.plan ul{display:grid;gap:.6rem;margin:1.5rem 0}
.plan li{display:flex;gap:.65rem;font-size:.95rem;color:var(--muted)}
.plan li svg{flex:none;color:var(--sage);margin-top:.32rem}
.plan .btn{margin-top:auto;width:100%}
.insurers{display:flex;flex-wrap:wrap;gap:.55rem}
.insurer{border:1px solid var(--line-2);border-radius:999px;padding:.45rem 1.15rem;
  font-size:.92rem;font-weight:600;color:var(--ink-2)}

/* ---------- reviews ---------- */
.rating{display:grid;grid-template-columns:auto 1fr auto;gap:2rem 3rem;align-items:center}
.rating-score{display:grid;justify-items:center;text-align:center}
.rating-score strong{font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:700;
  font-size:clamp(3rem,6vw,4.5rem);line-height:1;letter-spacing:-.05em;color:var(--ink)}
.stars{color:var(--gold);letter-spacing:.14em;font-size:1.1rem;margin-top:.5rem}
.rating-score span:last-child{font-size:.9rem;color:var(--muted);margin-top:.4rem}
.rating > p{font-size:1.14rem;color:var(--muted);max-width:40ch}
.rating-links{display:flex;gap:.75rem;flex-wrap:wrap}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3.5rem;
  padding-top:3rem;border-top:1px solid var(--line)}
.quote{margin:0;display:flex;flex-direction:column;gap:.9rem}
.quote blockquote{margin:0;font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:500;
  font-size:1.18rem;line-height:1.35;letter-spacing:-.022em;color:var(--ink)}
.quote figcaption{margin-top:auto;font-size:.92rem;font-weight:700;color:var(--ink-2)}
.quote figcaption span{display:block;font-weight:400;font-size:.84rem;color:var(--muted);
  margin-top:.15rem}

/* ---------- gallery ---------- */
/* one tall feature beside two stacked 4:3 photos */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.gal figure{aspect-ratio:4/3}
.gal .g-feature{grid-row:1 / span 2;aspect-ratio:auto;height:100%}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem)}
form{display:grid;gap:1.1rem;margin-top:2.25rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{display:grid;gap:.4rem;font-size:.88rem;font-weight:700;color:var(--ink-2)}
input,select,textarea{
  font-family:inherit;font-size:1rem;padding:.9rem 1rem;border-radius:8px;
  border:1.5px solid var(--line-2);background:var(--white);color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:135px;resize:vertical}
.form-note{font-size:.86rem;color:var(--muted)}
.form-note a{font-weight:700;color:var(--ink-2)}
.form-note a:hover{color:var(--amber)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-status{font-size:.95rem;font-weight:600;padding:.9rem 1.1rem;border-radius:10px;
  border:1px solid var(--line-2)}
.form-status.is-ok{background:#EEF3E4;border-color:var(--sage);color:#33422A}
.form-status.is-error{background:#FBF0DC;border-color:var(--gold);color:var(--amber)}
.btn[disabled]{opacity:.65;cursor:not-allowed;transform:none}
.info{display:grid;gap:0;align-content:start;border-top:1px solid var(--line-2)}
.info-row{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.35rem 0;
  border-bottom:1px solid var(--line-2)}
.info-row .ic{color:var(--amber);margin-top:.2rem}
.info-row b{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.15rem;font-weight:700}
.info-row a,.info-row span.v{font-size:1.06rem;font-weight:600;color:var(--ink);text-decoration:none;
  line-height:1.4}
.info-row a:hover{color:var(--amber)}
.map{position:relative;height:255px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line-2);margin-top:1.75rem;background:var(--sand)}
.map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)}
.map-link{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:1rem;text-decoration:none;background:linear-gradient(transparent 60%,rgba(30,39,23,.55))}
.map-link span{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);
  color:var(--ink);font-weight:700;font-size:.92rem;padding:.6rem 1.1rem;border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(30,39,23,.5)}
.map-link span svg{color:var(--amber)}
.map-link:hover span{color:var(--amber)}

/* ---------- closing ---------- */
.closer{background:var(--olive);color:#D9E0CB;padding:clamp(3.5rem,6.5vw,5.5rem) 0}
.closer .rail{display:flex;gap:2.5rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.closer h2{color:#FBF8F0;max-width:16ch}
.closer p{margin-top:.9rem;max-width:42ch}
.closer-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.closer .btn-line{border-color:rgba(251,248,240,.4);color:#FBF8F0}
.closer .btn-line:hover{border-color:#FBF8F0}

/* ---------- footer ---------- */
.site-footer{background:var(--sand);color:var(--muted);padding:4rem 0 2rem}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:2.5rem}
.site-footer h4{font-family:Karla,sans-serif;color:var(--ink);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 1.15rem}
.site-footer a{text-decoration:none;font-size:.97rem;color:var(--ink-2)}
.site-footer a:hover{color:var(--amber)}
.f-list{display:grid;gap:.6rem}
.f-brand p{font-size:.96rem;margin-top:1.35rem;max-width:34ch}
.socials{display:flex;gap:.55rem;margin-top:1.5rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink-2)}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:#222C18}
.f-bottom{margin-top:3.25rem;padding-top:1.5rem;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.87rem;
  align-items:center}
.f-tag{font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:600;color:var(--olive);
  font-size:1.05rem;letter-spacing:-.02em}
.f-by a{color:var(--ink-2);text-decoration:none}
.f-by a:hover{color:var(--amber)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .menu{gap:1.3rem}
  .phone-block > span{display:none}
}
@media (max-width:1000px){
  .hero .rail,.about,.contact{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-photo{height:clamp(300px,58vw,420px)}

  .shead{grid-template-columns:1fr;gap:1.25rem;align-items:start}
  .pcards,.plans{grid-template-columns:1fr}
  .acts{grid-template-columns:1fr 1fr;gap:0 2.5rem}
  .accepts{grid-template-columns:1fr}
  .rating{grid-template-columns:1fr;gap:1.5rem;justify-items:start;text-align:left}
  .rating-score{justify-items:start;text-align:left}
  .quotes{grid-template-columns:1fr;gap:2rem;margin-top:2.5rem;padding-top:2.5rem}
  .f-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr}
  .gal .g-feature{grid-row:auto;aspect-ratio:4/3;height:auto}
}
@media (max-width:780px){
  body{font-size:17px}
  /* Full-screen panel. .menu is a descendant of .nav, so its z-index is
     resolved inside the header's own stacking context — raising it above 
     the logo and burger, which are its siblings. Both are lifted above it
     here so the close button stays reachable. */
  /* Layering while the menu is open. .menu lives inside .nav, so everything
     here resolves in the header's own stacking context:
       50  the scrolling panel
       55  an opaque bar painted over it (.nav's own background sits BELOW
           its children, so scrolled links would otherwise show through)
       60  the logo and close button, above both                        */
  .brand,.nav-right{position:relative;z-index:60}
  body.nav-open .nav{position:fixed;top:0;left:0;right:0;
    background:var(--sand);border-bottom-color:transparent}
  body.nav-open .nav::before{content:"";position:absolute;inset:0;
    background:var(--sand);z-index:55}
  body.nav-open .burger{border-color:var(--line-2)}
  .menu{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--sand);overflow-y:auto;
    padding:calc(74px + 1.25rem) 1.5rem 2.5rem;overscroll-behavior:contain}
  .menu.open{display:flex}
  .menu > a{font-family:"Bricolage Grotesque",Arial,sans-serif;font-weight:700;
    font-size:1.32rem;letter-spacing:-.025em;color:var(--ink);
    padding:1.15rem 0;border-bottom:1px solid var(--line-2)}
  .menu > a:hover{border-bottom-color:var(--line-2);color:var(--amber)}

  .menu-extra{display:block;margin-top:2rem}
  .menu-cta{width:100%;padding-block:1.05rem;font-size:1.02rem}
  .menu-contact{display:grid;gap:1.15rem;margin-top:2rem}
  .menu-contact li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;
    align-items:start;font-size:.98rem;color:var(--muted);line-height:1.45}
  .menu-contact svg{color:var(--amber);margin-top:.18rem}
  .menu-contact a{text-decoration:none;color:var(--ink-2)}
  .menu-contact a:hover{color:var(--amber)}
  body.nav-open{overflow:hidden}
  .burger{display:block}
  .nav .rail{min-height:74px;gap:.75rem}
  .brand{margin-right:auto;min-width:0}
  .brand-logo{height:42px;max-width:100%}
  .brand-logo--stacked{height:130px}
  .phone-block{display:none}
  .nav-right .btn{display:none}
  .acts,.f2{grid-template-columns:1fr}
  .closer .rail{flex-direction:column;align-items:flex-start}
  .u-addr{display:none}
  .utility .rail{justify-content:center;gap:0}
  .utility .u-right{gap:1.25rem;justify-content:center}
}

@media (max-width:380px){
  .brand-logo{height:38px}
  .utility{font-size:.8rem}
}