/* Diana Davidson, Parent Coach. "You're not alone."
   Warm, calm, restrained. For a mom who just sent her kid to college and feels
   the quiet. Empathy first. Muted clay-rose + warm linen (not pastels), big warm
   photography, generous space, soft rounded forms. The opposite of clutter. */

:root{
  --surface:   #F4EFE7;  /* warm linen */
  --surface-2: #EBE2D5;  /* soft taupe block */
  --surface-3: #E3D7C6;  /* deeper sand */
  --paper:     #FBF8F2;  /* soft card */
  --ink:       #35281E;  /* deep warm cocoa (headings) */
  --text:      #4B4034;  /* body */
  --ink-soft:  #7C6F60;  /* muted */
  --accent:    #BC7C68;  /* muted clay-rose */
  --accent-deep:#9E6151;
  --sage:      #8C9880;  /* muted eucalyptus, used sparingly */
  --line:      #DED2C0;
  --shadow:    0 30px 70px -42px rgba(53,40,30,.42);
  --shadow-soft:0 18px 44px -30px rgba(53,40,30,.34);

  --font-display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-body:    "Mulish", system-ui, -apple-system, sans-serif;
  --font-label:   "Mulish", system-ui, sans-serif;

  --wrap: 1160px;
  --measure: 60ch;
  --r: 18px;
}

*{box-sizing:border-box;}
html{font-size:18px; -webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--surface); color:var(--text);
  font-family:var(--font-body); line-height:1.7; font-size:1.06rem; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--accent-deep); text-decoration:none;}
::selection{background:var(--accent); color:#fff;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; line-height:1.1; margin:0; color:var(--ink); letter-spacing:0;}
p{margin:0 0 1.15rem;}
em,i,.ital{font-style:italic;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 30px;}
.narrow{max-width:760px; margin:0 auto; padding:0 30px;}

/* gentle section label */
.eyebrow{
  font-family:var(--font-label); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 20px;
  display:inline-flex; align-items:center; gap:11px;
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent);}
.eyebrow.center{justify-content:center;}

/* buttons: soft rounded rectangles, never pills */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-label); font-weight:700; font-size:1rem;
  padding:.92em 1.7em; border-radius:8px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn .arw{transition:transform .16s ease;}
.btn:hover .arw{transform:translateX(4px);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 14px 26px -16px rgba(158,97,81,.8);}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-2px);}
.btn-soft{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-soft:hover{border-color:var(--accent); color:var(--accent-deep);}
.tlink{
  font-family:var(--font-label); font-weight:700; color:var(--accent-deep);
  display:inline-flex; align-items:center; gap:.45em; border-bottom:2px solid transparent; padding-bottom:2px;
}
.tlink:hover{border-color:var(--accent);}
.tlink:hover .arw{transform:translateX(4px);}

/* soft photo frame */
.ph{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); background:var(--surface-2);}
.ph img{width:100%; height:100%; object-fit:cover; display:block;}

/* signature, warm and personal */
.sig{font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--accent-deep); font-size:1.7rem;}

/* ============ HEADER ============ */
.topbar{position:sticky; top:0; z-index:40; background:rgba(244,239,231,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);}
.topbar .row{display:flex; align-items:center; justify-content:space-between; gap:20px; height:84px;}
.brand img{height:40px; width:auto;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a.lk{font-family:var(--font-label); font-weight:600; font-size:.95rem; color:var(--text); padding-bottom:2px; border-bottom:2px solid transparent;}
.nav a.lk:hover, .nav a.lk.active{color:var(--accent-deep); border-color:var(--accent);}
.nav .btn{padding:.66em 1.3em;}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink);}

/* ============ HERO ============ */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px);}
.hero .grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(40px,6vw,84px); align-items:center;}
.hero .eyebrow{margin-bottom:24px;}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem); line-height:1.04; max-width:15ch; font-weight:500;}
.hero h1 .em{font-style:italic; color:var(--accent-deep);}
.hero .lede{font-size:1.28rem; line-height:1.62; color:var(--text); max-width:40ch; margin:28px 0 0;}
.hero .meet{display:flex; align-items:center; gap:14px; margin:30px 0 32px;}
.hero .meet .line{width:38px; height:1.5px; background:var(--accent);}
.hero .meet span{font-family:var(--font-display); font-style:italic; font-size:1.24rem; color:var(--ink);}
.hero .cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:20px;}
.hero-photo{position:relative;}
.hero-photo .ph{aspect-ratio:4/4.6;}
.hero-photo .note{
  position:absolute; left:-22px; bottom:30px; background:var(--paper); border-radius:14px;
  box-shadow:var(--shadow-soft); padding:16px 20px; max-width:230px;
}
.hero-photo .note p{margin:0; font-family:var(--font-display); font-style:italic; font-size:1.06rem; color:var(--ink); line-height:1.35;}

/* ============ EMPATHY PASSAGE ============ */
.passage{background:var(--surface-2); padding:clamp(72px,9vw,118px) 0;}
.passage .inner{max-width:740px; margin:0 auto; text-align:center;}
.passage .quiet{font-family:var(--font-display); font-style:italic; color:var(--accent-deep); font-size:1.25rem; margin-bottom:18px;}
.passage h2{font-size:clamp(2rem,4.2vw,3rem); line-height:1.16; margin-bottom:26px;}
.passage p{font-size:1.18rem; line-height:1.72; color:var(--text);}
.passage p + p{margin-top:0;}
.passage .signoff{margin-top:30px;}

/* ============ SECTION SHELL ============ */
.sec{padding:clamp(64px,8vw,112px) 0;}
.sec-head{max-width:var(--measure);}
.sec-head.center{margin:0 auto; text-align:center;}
.sec-head h2{font-size:clamp(2rem,4.2vw,3rem); line-height:1.14; max-width:20ch;}
.sec-head.center h2{margin:0 auto;}
.sec-head .note{font-size:1.16rem; color:var(--ink-soft); margin-top:18px; max-width:48ch;}
.sec-head.center .note{margin-left:auto; margin-right:auto;}

/* ============ WAYS I HELP (soft, gentle) ============ */
.ways{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px;}
.way{background:var(--paper); border-radius:var(--r); padding:34px 30px; box-shadow:var(--shadow-soft);}
.way .ic{width:46px; height:46px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent-deep);}
.way h3{font-size:1.45rem; margin-bottom:10px;}
.way p{color:var(--ink-soft); font-size:1rem; margin:0 0 16px;}
.way .tlink{font-size:.94rem;}

/* ============ FEATURE: Pocket Parent Coach ============ */
.feature{padding:clamp(64px,8vw,112px) 0;}
.feature .grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,6vw,80px); align-items:center;}
.feature .pic{position:relative; max-width:380px; justify-self:center;}
.feature .pic .ph{aspect-ratio:3/4;}
.feature .pic .chip{
  position:absolute; right:-16px; top:24px; background:var(--paper); border-radius:12px; box-shadow:var(--shadow-soft);
  padding:10px 16px; font-family:var(--font-label); font-weight:700; font-size:.82rem; color:var(--ink); display:flex; align-items:center; gap:8px;
}
.feature .pic .chip img{height:20px; width:auto;}
.feature ul.gives{list-style:none; margin:24px 0 30px; padding:0;}
.feature ul.gives li{position:relative; padding:0 0 18px 36px; color:var(--text);}
.feature ul.gives li::before{
  content:""; position:absolute; left:0; top:.1em; width:22px; height:22px; border-radius:50%;
  background:var(--surface-3); border:1px solid var(--line);
}
.feature ul.gives li::after{
  content:""; position:absolute; left:7px; top:.5em; width:7px; height:11px;
  border-right:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep); transform:rotate(40deg);
}
.feature ul.gives b{color:var(--ink); font-weight:700; font-family:var(--font-label);}

/* ============ VOICE (testimonial) ============ */
.voice{background:var(--surface-2); padding:clamp(70px,9vw,116px) 0;}
.voice .inner{max-width:820px; margin:0 auto; text-align:center;}
.voice blockquote{
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.34;
  margin:0; color:var(--ink);
}
.voice blockquote .em{font-style:italic; color:var(--accent-deep);}
.voice .who{font-family:var(--font-label); font-weight:700; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:26px;}

/* ============ SPEAKING ============ */
.speak .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,76px); align-items:center;}
.speak-photo .ph{aspect-ratio:5/4;}
.topics{list-style:none; margin:22px 0 28px; padding:0;}
.topics li{padding:16px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;}
.topics li:last-child{border-bottom:1px solid var(--line);}
.topics li .n{font-family:var(--font-display); font-style:italic; color:var(--accent); font-size:1.2rem;}
.topics li b{font-family:var(--font-label); font-weight:700; color:var(--ink); font-size:1.06rem;}
.topics li span{display:block; color:var(--ink-soft); font-size:.96rem; margin-top:2px;}

/* ============ INVITE (closing) ============ */
.invite{text-align:center; padding:clamp(76px,9vw,124px) 0;}
.invite h2{font-size:clamp(2.2rem,4.8vw,3.4rem); line-height:1.12; max-width:20ch; margin:0 auto 18px;}
.invite p{font-size:1.2rem; color:var(--text); max-width:46ch; margin:0 auto 32px;}
.invite .sig{margin-top:24px; display:block;}

/* ============ FOOTER (warm, light) ============ */
.foot{background:var(--surface-3); color:var(--text); padding:64px 0 30px; border-top:1px solid var(--line);}
.foot .top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(53,40,30,.14);}
.foot .logo{height:38px; width:auto; margin-bottom:18px;}
.foot .top > div:first-child p{color:var(--ink-soft); max-width:34ch; font-size:.98rem;}
.foot h4{font-family:var(--font-label); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 14px;}
.foot .col a, .foot .col span{display:block; padding:5px 0; font-size:.98rem; color:var(--text);}
.foot .col a:hover{color:var(--accent-deep);}
.foot .bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:22px; font-size:.84rem; color:var(--ink-soft);}
.foot .bottom .ital{font-family:var(--font-display); font-style:italic; font-size:1rem;}

/* ============ INNER PAGE HERO ============ */
.phero{padding:clamp(46px,7vw,86px) 0 0; text-align:center;}
.phero .eyebrow{justify-content:center;}
.phero h1{font-size:clamp(2.4rem,5vw,3.7rem); line-height:1.08; max-width:18ch; margin:0 auto; font-weight:500;}
.phero h1 .em{font-style:italic; color:var(--accent-deep);}
.phero .lede{font-size:1.24rem; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin:22px auto 0;}

/* generic two-column with media */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,76px); align-items:center;}
.duo.media-sm{grid-template-columns:.85fr 1.15fr;}
.duo .ph{aspect-ratio:4/3;}
.duo.portrait .ph{aspect-ratio:4/5;}

/* soft paper card */
.card{background:var(--paper); border-radius:var(--r); padding:clamp(28px,3vw,36px); box-shadow:var(--shadow-soft);}

/* included / benefits soft list */
.checks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 40px;}
.checks.one{grid-template-columns:1fr;}
.checks li{position:relative; padding:0 0 0 38px;}
.checks li::before{content:""; position:absolute; left:0; top:.05em; width:24px; height:24px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line);}
.checks li::after{content:""; position:absolute; left:8px; top:.42em; width:7px; height:12px; border-right:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep); transform:rotate(40deg);}
.checks b{display:block; font-family:var(--font-label); font-weight:700; color:var(--ink); margin-bottom:2px;}
.checks span{color:var(--ink-soft); font-size:.98rem;}

/* moments, the things parents hear */
.moments{columns:2; column-gap:46px; margin:0; padding:0; max-width:880px;}
.moments li{break-inside:avoid; list-style:none; padding:11px 0 11px 24px; position:relative; font-family:var(--font-display); font-style:italic; font-size:1.18rem; line-height:1.4; color:var(--ink);}
.moments li::before{content:"\201C"; position:absolute; left:0; top:.3em; color:var(--accent); font-family:var(--font-display); font-size:1.4rem;}

/* values */
.values{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.value{position:relative; background:var(--paper); border-radius:var(--r); padding:32px 30px 28px; box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease; overflow:hidden;}
.value:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
/* faint tinted flourish in the corner for texture */
.value::after{content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:var(--vwash, #EBDDD2); opacity:.5;}
.value .vic{position:relative; z-index:1; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--vink, var(--accent-deep)); background:var(--vwash, #EBDDD2);}
.value .vic svg{width:26px; height:26px;}
.value h3, .value p{position:relative; z-index:1;}
.value h3{font-size:1.45rem; margin-bottom:8px;}
.value p{color:var(--ink-soft); margin:0; font-size:1rem;}
.value:nth-child(1){--vwash:#EBDDD2; --vink:#9E6151;}  /* clay */
.value:nth-child(2){--vwash:#E1E7DA; --vink:#5E6A4F;}  /* sage */
.value:nth-child(3){--vwash:#EFE1D9; --vink:#A6604C;}  /* rose-clay */
.value:nth-child(4){--vwash:#F0E6D1; --vink:#9A6A2C;}  /* honey */

/* "things you didn't ask for" */
.didnt{margin:0; padding:0;}
.didnt li{list-style:none; padding:11px 0 11px 28px; position:relative; color:var(--text); border-bottom:1px dashed var(--line);}
.didnt li:last-child{border-bottom:0;}
.didnt li::before{content:""; position:absolute; left:3px; top:1.15em; width:8px; height:8px; border-radius:50%; background:var(--accent);}
.didnt a{color:var(--accent-deep); font-weight:700; border-bottom:1px solid var(--accent);}

/* FAQ accordion */
.faq{max-width:800px; margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 2px; position:relative; font-family:var(--font-display); font-weight:500; font-size:1.3rem; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:6px; top:14px; font-size:1.7rem; font-weight:400; color:var(--accent); font-family:var(--font-display); transition:transform .2s ease;}
.faq details[open] summary::after{content:"\2013";}
.faq .a{padding:0 2px 22px; color:var(--text);}
.faq .a p:last-child{margin-bottom:0;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,64px); align-items:start;}
.clines{list-style:none; margin:0; padding:0;}
.clines li{padding:15px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:3px;}
.clines li:first-child{border-top:0; padding-top:0;}
.clines .l{font-family:var(--font-label); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);}
.clines a, .clines .v{font-size:1.12rem; color:var(--ink); font-weight:700;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--font-label); font-weight:700; font-size:.9rem; margin-bottom:6px; color:var(--ink);}
.field input, .field textarea{width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface);}
.field textarea{min-height:130px; resize:vertical;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(188,124,104,.18);}

/* speaking topic cards */
.talk-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
.talk{background:var(--paper); border-radius:var(--r); padding:34px 30px 30px; box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease;}
.talk:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.talk .num{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:2rem; color:var(--accent); line-height:1; display:block; margin-bottom:16px;}
.talk h3{font-size:1.32rem; line-height:1.18; margin-bottom:10px;}
.talk p{color:var(--ink-soft); margin:0; font-size:.98rem;}

/* mailing list */
.mailing{background:var(--surface-2); border-radius:var(--r); padding:clamp(34px,4vw,52px); text-align:center;}
.subscribe{display:flex; gap:12px; max-width:480px; margin:22px auto 0; flex-wrap:wrap;}
.subscribe input{flex:1 1 220px; font-family:var(--font-body); font-size:1rem; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);}
.subscribe input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(188,124,104,.18);}
.subscribe .btn{flex:0 0 auto;}

/* ============ responsive ============ */
@media(max-width:900px){
  .hero .grid, .feature .grid, .speak .grid, .foot .top,
  .duo, .duo.media-sm, .contact-grid, .checks, .values{grid-template-columns:1fr; gap:40px;}
  .hero-photo{max-width:480px; margin:6px auto 0;}
  .ways{grid-template-columns:1fr;}
  .feature .pic{order:-1;}
  .duo.flip .ph-side{order:-1;}
  .talk-cards{grid-template-columns:1fr;}
  .checks{gap:20px;}
  .values{gap:22px;}
  .moments{columns:1;}
}
@media(max-width:760px){
  .nav{display:none; position:fixed; inset:84px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 30px 24px;}
  .nav.open{display:flex;}
  .nav a.lk{padding:14px 0; border-bottom:1px solid var(--line);}
  .nav .btn{margin-top:16px; justify-content:center;}
  .burger{display:inline-flex;}
}
@media(max-width:540px){
  html{font-size:17px;}
  .wrap, .narrow{padding:0 22px;}
  .hero-photo .note{left:0;}
}