/* =====================================================================
   NewStart Frisco — Church & Preschool · WatchLocal · design system
   Palette: Test#1's warm mood (cream / terracotta / sage / gold).
   Purple = Denise's color, used STRATEGICALLY (a few intentional touches),
   never as a coat of paint. Built from the client's real content + photos.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  /* Test#1 warm palette */
  --cream:#fdf8f2; --cream-2:#f5ede3; --cream-3:#e8d5c4;
  --ink:#2d2a26; --ink-soft:#5a5550; --ink-faint:#9b9189;
  --terracotta:#c8735a; --terracotta-deep:#b0573f;
  --gold:#c9a84c; --gold-deep:#a8862f;
  --sage:#7a9b7e; --sage-deep:#5e7d62; --sage-wash:#e6efe6;
  /* Denise's purple — strategic accent only */
  --purple:#9277bf; --purple-deep:#7257a3; --purple-wash:#efe9f7;
  --card:#fff; --line:rgba(45,42,38,.10);
  --shadow-sm:0 6px 18px -10px rgba(90,70,50,.28);
  --shadow:0 22px 48px -22px rgba(90,65,45,.34);
  --shadow-lg:0 40px 80px -30px rgba(80,55,40,.40);
  /* the click-affordance signal: a clearly-visible WARM glow (brighter per David) */
  --glow:0 0 0 3px rgba(146,119,191,.45), 0 0 26px 3px rgba(146,119,191,.80);
  --r:18px; --r-lg:28px; --r-pill:999px; --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Figtree',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--cream); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(1100px 520px at 100% 0%, #faf0e0 0%, transparent 55%);}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; line-height:1.08; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem); font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
p{margin:0 0 1rem}
.eyebrow{font-family:var(--body); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; color:var(--terracotta-deep)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--ink-soft); line-height:1.6}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(56px,8vw,108px) 0}
.center{text-align:center}
.muted{color:var(--ink-soft)}

/* buttons — warm; brighter glow on hover */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--body); font-weight:600; font-size:1rem;
  padding:.85em 1.5em; border-radius:var(--r-pill); border:0; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.btn-primary{background:linear-gradient(135deg,var(--terracotta),var(--terracotta-deep)); color:#fff;
  box-shadow:0 10px 22px -12px rgba(176,87,63,.75)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(176,87,63,.9), var(--glow)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff}
.btn-gold:hover{transform:translateY(-3px); box-shadow:var(--glow)}
/* strategic purple — Denise's touch, used sparingly */
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--purple-deep)); color:#fff;
  box-shadow:0 10px 22px -12px rgba(114,87,163,.7)}
.btn-purple:hover{transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(114,87,163,.9), 0 0 0 3px rgba(146,119,191,.3), 0 0 20px 2px rgba(146,119,191,.5)}
.btn-ghost{background:rgba(255,255,255,.75); color:var(--ink); border:1.5px solid var(--line); backdrop-filter:blur(6px)}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--terracotta); box-shadow:var(--glow)}

/* header — logo ONLY, prominent phone, no top CTA, compact */
.site-header{position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.3) blur(12px);
  background:rgba(253,248,242,.86); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:1rem; height:64px}
.brand{display:flex; align-items:center; padding:.5em 1.1em; border-radius:13px; border:1.5px solid var(--line);
  transition:box-shadow .35s var(--ease), border-color .25s}
.brand:hover{border-color:var(--purple); box-shadow:var(--glow)}
.brand img{height:36px; width:auto}
.nav-links{display:flex; align-items:center; gap:.2rem; margin-left:auto; flex-wrap:wrap}
.nav-links a{position:relative; padding:.5em .8em; font-weight:500; font-size:.96rem; border-radius:10px; color:var(--ink-soft); transition:color .25s}
.nav-links a::after{content:""; position:absolute; left:.8em; right:.8em; bottom:.34em; height:2px; border-radius:2px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-phone{display:inline-flex; align-items:center; gap:.45em; font-weight:700; font-size:1.12rem; color:var(--ink);
  margin-left:.6rem; padding:.4em .9em; border-radius:var(--r-pill); border:1.5px solid var(--line); transition:box-shadow .35s var(--ease), color .25s}
.nav-phone .ico{color:var(--terracotta)}
.nav-phone:hover{color:var(--terracotta-deep); box-shadow:var(--glow)}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; cursor:pointer; font-size:1.6rem; color:var(--ink)}

/* hero dual gateway */
.hero{position:relative; padding:clamp(44px,6vw,84px) 0 clamp(36px,5vw,64px)}
.hero-head{max-width:760px; margin:0 auto clamp(32px,4vw,48px); text-align:center}
.hero-head h1{margin:.5rem 0 1rem}
.hero-head h1 .accent{color:var(--terracotta); font-style:italic}
.gateway{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px)}
.lane{position:relative; min-height:clamp(320px,40vw,500px); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px,3vw,36px); color:#fff;
  box-shadow:var(--shadow); transition:transform .5s var(--ease), box-shadow .5s var(--ease); isolation:isolate}
.lane img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease)}
.lane::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,14,8,.05) 0%, rgba(20,14,8,.28) 45%, rgba(18,12,6,.82) 100%)}
.lane:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg), var(--glow)}
.lane:hover img{transform:scale(1.06)}
.lane .tag{font-family:var(--body); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px); padding:.4em .8em; border-radius:var(--r-pill); align-self:flex-start; margin-bottom:.7rem; border:1px solid rgba(255,255,255,.28)}
.lane h2{color:#fff; font-size:clamp(1.7rem,2.6vw,2.3rem); margin-bottom:.35rem}
.lane p{color:rgba(255,255,255,.92); margin-bottom:1.1rem; max-width:30ch}
.lane .lane-cta{display:inline-flex; align-items:center; gap:.5em; font-weight:600; padding:.6em 1.2em; border-radius:var(--r-pill); background:rgba(255,255,255,.94); color:var(--ink); align-self:flex-start; transition:gap .3s var(--ease), box-shadow .3s}
.lane:hover .lane-cta{gap:.95em; box-shadow:0 0 0 6px rgba(255,255,255,.2)}
.family-band{margin-top:clamp(16px,2vw,24px); text-align:center; background:var(--sage-wash); border:1px solid rgba(122,155,126,.35);
  border-radius:var(--r); padding:1rem 1.4rem; font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--sage-deep)}
.family-band b{color:var(--purple-deep)} /* the one purple touch */

/* page hero (interior) — image is CONSTRAINED, never full-bleed-huge */
.page-hero{text-align:center; max-width:840px; margin:0 auto; padding-top:clamp(40px,5vw,72px)}
.hero-photo{max-width:880px; margin:2rem auto 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); max-height:440px}
.hero-photo img{width:100%; height:100%; object-fit:cover; max-height:440px}

/* split */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.split.reverse{direction:rtl} .split.reverse>*{direction:ltr}
.media-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.media-frame img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.media-frame.tall img{aspect-ratio:3/4}
.badge{position:absolute; bottom:16px; left:16px; background:var(--terracotta); color:#fff; font-weight:600; font-size:.85rem; padding:.5em 1em; border-radius:var(--r-pill); box-shadow:var(--shadow-sm)}
.pill-list{list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem}
.pill-list li{background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:.5em 1.05em; font-weight:500; font-size:.95rem; box-shadow:var(--shadow-sm)}
.pill-list li::before{content:"✦ "; color:var(--gold-deep)}

/* feature cards (icon variant) */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow), var(--glow)}
.card .ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem; background:var(--cream-2); color:var(--terracotta-deep); margin-bottom:.9rem}
.card.faith .ico{background:var(--purple-wash); color:var(--purple-deep)} /* strategic purple */
.card h3{margin-bottom:.4rem}

/* PHOTO cards (preschool — photo attached on top, like the original site) */
.photo-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow), var(--glow)}
.pcard .top{position:relative; aspect-ratio:4/3; overflow:hidden}
.pcard .top img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.pcard:hover .top img{transform:scale(1.05)}
.pcard .body{padding:1.3rem}
.pcard h3{margin-bottom:.4rem}

/* gallery grid */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem}
.gallery .media-frame img{aspect-ratio:4/3}
.gallery .media-frame{transition:transform .4s var(--ease), box-shadow .4s}
.gallery .media-frame:hover{transform:translateY(-4px); box-shadow:var(--shadow), var(--glow)}

/* team — fixed 4 across (4x4 symmetry); tooltip on hover */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem 1.3rem; max-width:920px; margin:0 auto}
.person{position:relative; text-align:center}
.person .photo{width:150px; height:150px; margin:0 auto .7rem; border-radius:50%; overflow:hidden; box-shadow:var(--shadow-sm); border:4px solid #fff; transition:transform .4s var(--ease), box-shadow .4s}
.person .photo img{width:100%; height:100%; object-fit:cover}
.person:hover .photo,.person:focus-within .photo{transform:translateY(-4px) scale(1.03); box-shadow:var(--glow), var(--shadow)}
.person .name{font-family:var(--display); font-weight:600; font-size:1.1rem}
.person .role{color:var(--terracotta-deep); font-weight:600; font-size:.82rem}
.tooltip{position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(8px); width:min(300px,80vw);
  background:var(--ink); color:#fff; padding:1rem 1.1rem; border-radius:14px; font-size:.9rem; line-height:1.5; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:30; text-align:left; pointer-events:none}
.tooltip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:8px solid transparent; border-top-color:var(--ink)}
.person:hover .tooltip,.person:focus-within .tooltip{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

/* FAQ */
.faq{max-width:820px; margin:0 auto}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r); margin-bottom:.8rem; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .35s var(--ease)}
.faq details:hover{box-shadow:var(--glow)}
.faq summary{cursor:pointer; list-style:none; padding:1.15rem 1.4rem; font-family:var(--display); font-weight:600; font-size:1.1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--terracotta-deep); font-size:1.5rem; transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--terracotta-deep)}
.faq .answer{padding:0 1.4rem 1.3rem; color:var(--ink-soft)}

/* tuition */
.price-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem}
.price{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.5rem; text-align:center; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s}
.price:hover{transform:translateY(-6px); box-shadow:var(--shadow), var(--glow); border-color:var(--gold)}
.price .amt{font-family:var(--display); font-size:2.6rem; font-weight:600; color:var(--terracotta-deep); line-height:1}
.price .per{color:var(--ink-faint); font-size:.9rem}
.price h3{margin:.2rem 0 .6rem}
.price.feature{background:linear-gradient(160deg,var(--cream-2),#fff); border-color:var(--gold)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--terracotta),var(--gold-deep)); color:#fff; border-radius:var(--r-lg); padding:clamp(34px,5vw,60px); text-align:center; box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.92)}
.cta-band .btn-ghost{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4)}
.cta-band .phone{font-family:var(--display); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; margin:.4rem 0}

/* footer — logo only */
.site-footer{background:var(--ink); color:#e9ded0; padding:clamp(48px,6vw,78px) 0 30px; margin-top:40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem}
.site-footer h4{font-family:var(--display); color:#fff; margin-bottom:.8rem; font-size:1.15rem}
.site-footer img.flogo{height:40px; width:auto; margin-bottom:1rem}
.site-footer a{color:#e9ded0; opacity:.85; transition:opacity .2s, color .2s; line-height:2}
.site-footer a:hover{opacity:1; color:var(--gold)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; opacity:.7}

/* motion */
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.reveal{animation:rise .8s var(--ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.30s}.d4{animation-delay:.42s}

/* responsive */
@media(max-width:900px){ .photo-cards{grid-template-columns:repeat(2,1fr)} .team{grid-template-columns:repeat(4,1fr); gap:1.1rem .6rem} }
@media(max-width:760px){
  .nav-links{position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:rgba(253,248,242,.98); backdrop-filter:blur(12px); padding:.6rem 1rem 1.2rem; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .4s var(--ease); box-shadow:var(--shadow)}
  .nav-links.open{transform:none}
  .nav-links a{padding:.85em .6em} .nav-phone{margin:.6rem 0 0; justify-content:center}
  .nav-toggle{display:block}
  .gateway{grid-template-columns:1fr}
  .split,.split.reverse{grid-template-columns:1fr} .split.reverse{direction:ltr}
  .photo-cards{grid-template-columns:1fr} .team{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr} .team{grid-template-columns:repeat(2,1fr)} }
@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} .lane:hover img{transform:none} }