/* =========================================================
   Eyu Adult Family Home — shared stylesheet
   Palette: dusty sky blue + muted sage + warm ivory
   Type: Fraunces (display serif) + Mulish (body sans)
   Signature: arched "doorway" frames
   ========================================================= */

:root{
  --sky:        #5c8aa6;
  --sky-deep:   #305668;
  --sky-soft:   #dbe7ee;
  --sage:       #7c9a6e;
  --sage-deep:  #4f6b44;
  --sage-soft:  #e4ecdd;
  --canvas:     #fbf8f3;
  --panel:      #ffffff;
  --panel-warm: #f4efe5;
  --ink:        #263539;
  --muted:      #55666b;
  --line:       #e7e0d3;
  --honey:      #d99a4e;

  --shadow-sm: 0 2px 10px rgba(38,53,57,.06);
  --shadow-md: 0 14px 40px rgba(38,53,57,.10);
  --radius:    18px;
  --arch:      160px 160px 20px 20px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1140px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.125rem;      /* 18px base for readability */
  line-height:1.7;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--sky-deep); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.4rem,5.2vw,3.9rem); font-weight:600; }
h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
h3{ font-size:1.4rem; }
p{ margin:0 0 1.1rem; }

.wrap{ width:min(var(--wrap),92vw); margin-inline:auto; }
.center{ text-align:center; }
.lead{ font-size:1.24rem; color:var(--muted); }

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--sky-deep); color:#fff; padding:.7rem 1.1rem;
  border-radius:10px; z-index:200; transition:top .2s ease; font-weight:700;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--honey); outline-offset:2px; box-shadow:0 0 0 5px rgba(38,53,57,.38); }
.visually-hidden{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:800; font-size:1.05rem;
  padding:.95rem 1.6rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:52px; line-height:1.2;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--sky-deep); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:#264657; box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--sage-deep); color:#fff; }
.btn-secondary:hover{ background:#41592f; }
.btn-outline{ background:transparent; color:var(--sky-deep); border-color:var(--sky); }
.btn-outline:hover{ background:var(--sky-soft); }
.btn-lg{ font-size:1.12rem; padding:1.05rem 1.9rem; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,248,243,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); }
.brand__mark{ width:46px; height:46px; flex:0 0 auto; }
.brand__name{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; line-height:1.05; }
.brand__name small{ display:block; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); }

.nav__links{ display:flex; align-items:center; gap:.2rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  text-decoration:none; color:var(--ink); font-weight:700; font-size:1rem;
  padding:.55rem .7rem; border-radius:10px; display:block;
}
.nav__links a:hover{ background:var(--sky-soft); color:var(--sky-deep); }
.nav__links a[aria-current="page"]{ color:var(--sky-deep); box-shadow:inset 0 -3px 0 var(--honey); border-radius:6px; }
.nav__cta{ margin-left:.4rem; }

.nav__toggle{
  display:none; background:var(--panel); border:2px solid var(--line);
  border-radius:12px; width:52px; height:48px; cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{
  content:""; display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; position:relative; transition:.2s;
}
.nav__toggle span::before{ position:absolute; top:-7px; }
.nav__toggle span::after{ position:absolute; top:7px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Top utility bar ---------- */
.topbar{ background:var(--sky-deep); color:#eaf2f6; font-size:.95rem; }
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:space-between; align-items:center; padding:.45rem 0; }
.topbar a{ color:#fff; text-decoration:none; font-weight:700; }
.topbar a:hover{ text-decoration:underline; }
.topbar__group{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; align-items:center; }
.topbar__item{ display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- Sections ---------- */
.section{ padding:5rem 0; }
.section--tight{ padding:3.5rem 0; }
.section--warm{ background:var(--panel-warm); }
.section--sage{ background:var(--sage-soft); }
.section--sky{ background:var(--sky-soft); }
.eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  font-size:.82rem; color:var(--sage-deep); margin-bottom:.7rem;
}
.section__head{ max-width:720px; margin:0 auto 2.8rem; }
.section__head.center{ text-align:center; }

/* ---------- Hero ---------- */
.hero{ padding:4rem 0 4.5rem; position:relative; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero__title{ margin-bottom:.6rem; }
.hero__title .accent{ color:var(--sky-deep); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.8rem; }
.hero__assurance{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; color:var(--muted); font-weight:700; font-size:.98rem; }
.hero__assurance span{ display:inline-flex; align-items:center; gap:.45rem; }
.tick{ color:var(--sage-deep); }

/* Arched media frame (signature) */
.arch{
  border-radius:var(--arch);
  overflow:hidden; position:relative;
  box-shadow:var(--shadow-md);
  border:6px solid var(--panel);
}
.arch--sm{ border-radius:110px 110px 16px 16px; }
.hero__media{ position:relative; }
.hero__media .arch{ aspect-ratio:4/5; }
.hero__badge{
  position:absolute; left:-14px; bottom:26px; background:var(--panel);
  border-radius:16px; box-shadow:var(--shadow-md); padding:.85rem 1.1rem;
  display:flex; align-items:center; gap:.7rem; max-width:230px;
}
.hero__badge .num{ font-family:var(--font-display); font-size:2rem; color:var(--sage-deep); line-height:1; }
.hero__badge .lbl{ font-size:.9rem; font-weight:700; color:var(--muted); line-height:1.25; }

/* placeholder illustration fill */
.ph{ width:100%; height:100%; display:block; }
.figure-note{ font-size:.85rem; color:var(--muted); margin-top:.5rem; text-align:center; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:1.6rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow-sm); height:100%;
}
.card h3{ margin-top:.4rem; }
.card p:last-child{ margin-bottom:0; }
.card__icon{
  width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:var(--sky-soft); color:var(--sky-deep); margin-bottom:.4rem;
}
.card--sage .card__icon{ background:var(--sage-soft); color:var(--sage-deep); }

.link-more{ font-weight:800; text-decoration:none; color:var(--sky-deep); display:inline-flex; gap:.35rem; align-items:center; }
.link-more:hover{ text-decoration:underline; }

/* ---------- Feature split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.split--reverse .split__media{ order:2; }
.split__media .arch{ aspect-ratio:5/4; }

/* ---------- Value / stats strip ---------- */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.value{ text-align:center; }
.value .value__k{ font-family:var(--font-display); font-size:2.4rem; color:var(--sky-deep); line-height:1; }
.value .value__l{ font-weight:700; color:var(--muted); }

/* ---------- Testimonials ---------- */
.quote{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.9rem; box-shadow:var(--shadow-sm); height:100%;
}
.quote__mark{ font-family:var(--font-display); font-size:3.2rem; color:var(--sage); line-height:.6; height:1.2rem; display:block; }
.quote p{ font-size:1.12rem; }
.quote__by{ font-weight:800; color:var(--ink); margin-top:.6rem; }
.quote__rel{ color:var(--muted); font-weight:600; font-size:.95rem; }
.stars{ color:var(--honey); letter-spacing:2px; font-size:1.1rem; }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(135deg,var(--sky-deep),#3f7288); color:#fff; border-radius:26px; padding:3.2rem; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#e7f0f4; font-size:1.2rem; max-width:640px; margin-inline:auto; }
.cta-band .btn-outline{ color:#fff; border-color:rgba(255,255,255,.7); }
.cta-band .btn-outline:hover{ background:rgba(255,255,255,.14); }
.cta-band .btn-secondary{ background:#fff; color:var(--sky-deep); }
.cta-band .btn-secondary:hover{ background:#eef4f7; }
.cta-band .btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* ---------- Page hero (interior) ---------- */
.page-hero{ background:var(--sage-soft); padding:3.4rem 0; border-bottom:1px solid var(--line); }
.page-hero .lead{ max-width:680px; }
.breadcrumb{ font-size:.92rem; color:var(--muted); margin-bottom:.6rem; }
.breadcrumb a{ color:var(--sage-deep); text-decoration:none; font-weight:700; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------- Lists ---------- */
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.check-list li::before{
  content:""; flex:0 0 auto; margin-top:.28rem; width:22px; height:22px; border-radius:50%;
  background:var(--sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6b44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gallery figure{ margin:0; }
.gallery .tile{
  border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  aspect-ratio:4/3; background:var(--panel-warm);
}
.gallery figcaption{ font-size:.92rem; color:var(--muted); margin-top:.5rem; font-weight:700; }

/* ---------- FAQ ---------- */
.faq{ max-width:840px; margin-inline:auto; }
.faq details{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:0 1.4rem; margin-bottom:1rem; box-shadow:var(--shadow-sm);
}
.faq summary{
  cursor:pointer; list-style:none; font-weight:800; font-size:1.14rem; color:var(--ink);
  padding:1.2rem 2.4rem 1.2rem 0; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.7rem; color:var(--sky-deep); line-height:1; font-weight:400;
}
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ color:var(--sky-deep); }
.faq details > p{ padding-bottom:1.3rem; margin:0; color:var(--muted); }

/* ---------- Forms ---------- */
.form-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem; box-shadow:var(--shadow-sm); }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-weight:800; margin-bottom:.4rem; }
.field .req{ color:#b0472f; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1.05rem; color:var(--ink);
  padding:.85rem 1rem; border:2px solid var(--line); border-radius:12px; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--sky); }
.field textarea{ min-height:140px; resize:vertical; }
.field .hint{ font-size:.9rem; color:var(--muted); margin-top:.35rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-note{ font-size:.9rem; color:var(--muted); }
.form-success{
  background:var(--sage-soft); border:1px solid var(--sage); color:var(--sage-deep);
  border-radius:12px; padding:1rem 1.2rem; font-weight:700; margin-bottom:1.2rem;
}

/* ---------- Contact info blocks ---------- */
.info-list{ list-style:none; padding:0; margin:0; display:grid; gap:1.3rem; }
.info-list li{ display:flex; gap:1rem; align-items:flex-start; }
.info-list .ic{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:var(--sky-soft); color:var(--sky-deep); display:grid; place-items:center; }
.info-list strong{ display:block; }
.info-list a{ color:var(--sky-deep); text-decoration:none; font-weight:700; }
.info-list a:hover{ text-decoration:underline; }
.map-frame{ border:0; width:100%; height:100%; min-height:340px; border-radius:var(--radius); }

/* ---------- Emergency note ---------- */
.emergency{
  background:#fbeee6; border:1px solid #e9c9b4; border-radius:14px; padding:1.1rem 1.3rem;
  display:flex; gap:.8rem; align-items:flex-start; color:#7a3d1e;
}
.emergency strong{ color:#7a3d1e; }

/* ---------- Footer ---------- */
.site-footer{ background:#22323a; color:#cdd8dc; padding:3.4rem 0 1.6rem; margin-top:2rem; }
.site-footer h4{ color:#fff; font-family:var(--font-body); font-weight:800; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:2.4rem; }
.footer-grid a{ color:#cdd8dc; text-decoration:none; }
.footer-grid a:hover{ color:#fff; text-decoration:underline; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-brand p{ color:#a9b7bc; }
.footer-brand .brand__name{ color:#fff; }
.footer-brand .brand__name small{ color:var(--sage); }
.socials{ display:flex; gap:.6rem; margin-top:1rem; }
.socials a{ width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.socials a:hover{ background:rgba(255,255,255,.18); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.9rem; color:#9fb0b5; }
.footer-bottom a{ color:#cdd8dc; }
.license-line{ font-size:.9rem; color:#a9b7bc; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.stack-sm > * + *{ margin-top:.6rem; }
.pill{ display:inline-block; background:var(--sky-soft); color:var(--sky-deep); font-weight:800; font-size:.85rem; padding:.3rem .8rem; border-radius:999px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .hero__media{ max-width:440px; margin-inline:auto; }
  .split{ grid-template-columns:1fr; gap:2rem; }
  .split--reverse .split__media{ order:0; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .values{ grid-template-columns:repeat(2,1fr); gap:2rem; }
}
@media (max-width: 820px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--canvas); border-bottom:1px solid var(--line);
    padding:.8rem 4vw 1.2rem; box-shadow:var(--shadow-md);
    display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:.85rem .8rem; font-size:1.08rem; }
  .nav__cta{ margin-left:0; margin-top:.4rem; }
  .nav{ position:relative; }
}
@media (max-width: 680px){
  body{ font-size:1.06rem; }
  .section{ padding:3.4rem 0; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:2.2rem 1.4rem; }
  .topbar .wrap{ justify-content:center; text-align:center; }
}

/* --- Real photo fills + Home "inside our home" pair --- */
.ph{ object-fit:cover; }
.photo-duo{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.photo-duo .arch{ aspect-ratio:4/3; }
.photo-card{ margin:0; }
.photo-card figcaption{ font-size:.95rem; color:var(--muted); margin-top:.75rem; text-align:center; line-height:1.45; }
@media (max-width:720px){ .photo-duo{ grid-template-columns:1fr; gap:1.5rem; } }

/* ===== Deployment polish: mobile call bar, print, perf ===== */

/* Sticky mobile call/tour bar — thumb-reachable on phones */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:.5rem; padding:.55rem .7rem;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border-top:1px solid #e7ded0; box-shadow:0 -6px 20px rgba(38,53,57,.10);
}
.callbar a{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:52px; border-radius:12px; font-weight:800; font-size:1.02rem;
  text-decoration:none; padding:.6rem .5rem;
}
.callbar .cb-call{ background:var(--sky-deep); color:#fff; }
.callbar .cb-tour{ background:var(--sage-deep); color:#fff; }
.callbar svg{ flex:0 0 auto; }
@media (max-width:820px){
  .callbar{ display:flex; }
  body{ padding-bottom:74px; }           /* keep footer clear of the bar */
}

/* Smooth in-page scrolling without breaking reduced-motion users */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Avoid layout shift while photos load (better Core Web Vitals) */
img{ background:#efe9df; }
.arch img, .tile img{ aspect-ratio:auto; }

/* Larger, comfier tap targets on small screens */
@media (max-width:820px){
  .nav__links a{ padding-block:.75rem; }
  .btn{ min-height:48px; }
}

/* ===== Print: leave families a clean, useful page ===== */
@media print{
  .topbar,.nav__toggle,.callbar,.site-header .nav__links,.hero__badge,form,iframe,.skip-link{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; padding-bottom:0; }
  .wrap{ max-width:100%; }
  .section{ padding:.6rem 0; break-inside:avoid; }
  .arch,.tile{ border:none; box-shadow:none; }
  img{ max-width:42% !important; height:auto !important; }
  a{ color:#000; text-decoration:underline; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; word-break:break-all; }
  a[href^="#"]::after,a[href^="mailto"]::after{ content:""; }
  .site-footer{ background:#fff !important; color:#000 !important; border-top:1px solid #999; }
  .site-footer a{ color:#000 !important; }
}