/* Nest Counselling — first-pass interpretation of Kelly's mockup */
:root { --paper:#fbf7f1; --brown:#584130; --ink:#302820; --sage:#82aa90; --line:#ded4c8; }
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:var(--paper);color:var(--ink);font-family:"Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;font-size:17px;line-height:1.42}
a {color:inherit}
.shell {width:min(1100px,calc(100% - 56px));margin-inline:auto}
.site-header {background:#fcf9f3;box-shadow:0 5px 17px rgba(67,47,30,.09);position:relative;z-index:1}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:165px}
.brand {display:block;width:335px;flex-shrink:0;text-decoration:none;color:var(--brown);font-family:Georgia,serif;font-size:28px}
.brand img {display:block;width:100%;height:auto}
.primary-nav {display:flex;align-items:center;gap:35px;font-size:20px;font-weight:600}
.primary-nav a {text-decoration:none;color:var(--brown)}
.primary-nav a:hover,.primary-nav a:focus-visible {text-decoration:underline;text-underline-offset:5px}
.hero {display:grid;grid-template-columns:1.06fr .94fr;gap:54px;align-items:center;padding-top:0;padding-bottom:14px}
.hero-copy {padding:36px 0}
h1,h2 {color:var(--brown)}
h1 {font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,3.2vw,45px);letter-spacing:-.7px;line-height:1.05;margin:0 0 22px}
.hero p {font-size:19px;line-height:1.38;max-width:530px;margin:0 0 17px}
.cta {display:inline-block;margin-top:7px;background:var(--sage);color:white;text-decoration:none;font-weight:700;font-size:20px;padding:13px 24px;border-radius:7px;box-shadow:0 5px 10px rgba(80,99,73,.13);transition:background .15s}
.cta:hover,.cta:focus-visible {background:#648c72}
.hero-photo {height:390px;overflow:hidden;border-radius:5px}
.hero-photo img {width:100%;height:100%;object-fit:cover;display:block}
.highlights {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:12px;padding-bottom:26px}
.highlight {text-align:center;padding:0 22px;min-height:196px}
.highlight+.highlight {border-left:1px solid var(--line)}
.highlight img {display:block;width:51px;height:51px;object-fit:contain;margin:-2px auto 8px}
.highlight h2 {font-family:Arial,sans-serif;font-weight:600;font-size:22px;margin:4px 0 8px}
.highlight p {margin:0 0 7px;font-size:16px;line-height:1.32}
.highlight ul {display:inline-block;margin:0;text-align:left;padding-left:17px;font-size:15px;line-height:1.55}
.site-footer {background:#f6f0e7;border-top:1px solid #e7dfd3;font-size:15px}
.footer-inner {min-height:51px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:10px 0}
.site-footer a {text-decoration:none}.site-footer a:hover {text-decoration:underline}
@media (max-width:850px) {
 .header-inner {min-height:145px;gap:20px}.brand {width:285px}.primary-nav {gap:17px;font-size:17px}
 .hero {gap:26px;grid-template-columns:1fr 1fr}.hero-photo{height:350px}
 h1 {font-size:35px}.hero p{font-size:17px}.cta{font-size:17px}
 .highlight {padding:0 12px}.highlight h2 {font-size:19px}
}
@media (max-width:650px) {
 .shell {width:min(100% - 36px,520px)}
 .header-inner {flex-direction:column;gap:5px;padding:12px 0 15px}
 .brand {width:260px}.primary-nav {flex-wrap:wrap;justify-content:center;gap:12px 25px;font-size:16px}
 .hero {display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:20px}
 .hero-copy {padding:8px 0 4px}.desktop-break{display:none}
 h1 {font-size:clamp(31px,9vw,40px)}.hero p {font-size:17px}
 .cta {font-size:16px;text-align:center}
 .hero-photo{height:auto;aspect-ratio:4/3}
 .highlights {display:flex;flex-direction:column;padding:30px 0 20px;gap:24px}
 .highlight {padding:0 10px 22px;min-height:unset}.highlight+.highlight {border-left:0;border-top:1px solid var(--line);padding-top:23px}
 .footer-inner {gap:6px 10px}.footer-divider {display:none}.footer-inner>* {width:100%}
}

/* Homepage: portrait image replaces wide counselling room photograph. */
.hero-photo {
  width: 100%;
  max-width: 365px;
  height: auto;
  aspect-ratio: 4 / 5;
  justify-self: center;
  border-radius: 7px;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 850px) {
  .hero-photo { max-width: 330px; height: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 650px) {
  .hero-photo { width: min(100%, 365px); max-width: 365px; height: auto; aspect-ratio: 4 / 5; margin: 12px auto 0; }
}