/* Self-hosted fonts, latin subset only. These used to come from Google Fonts,
   which held back the first paint by ~1.3 s waiting on two third-party domains. */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/poppins-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/poppins-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/poppins-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Nunito Sans is a variable font: one file covers every weight the site uses. */
@font-face{ font-family:'Nunito Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../assets/fonts/nunito-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Integrated Life Counselling & Therapy — site stylesheet
   Rebuilt to match the live site's design (green tabbed nav, sand/photo heroes,
   olive accent bands) captured in client-supplied screenshots, Aug 2026. */

:root{
  --g1:#8fb39c; /* Hello   - lightest */
  --g2:#7ca98f;
  --g3:#6a9c81;
  --g4:#588f73;
  --g5:#4a8065;
  --g6:#43765a;
  --g7:#3d6b4f; /* Reading - darkest, brand forest green */
  --olive:#b9d2c4;
  --olive-deep:#3d6b4f;
  --cream:#fdfcf1;
  --white:#ffffff;
  --ink:#3a3a3a;
  --ink-soft:#5b5b5b;
  --footer-bg:#dcdcdc;
  --link-green:#3d6b4f;
  --border-soft:#e3e1cf;
  --sans:'Nunito Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --heading:'Poppins', 'Nunito Sans', -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:#e5e2d4; }
body{
  margin:0 auto;
  max-width:1600px;
  min-width:1280px;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  box-shadow:0 0 60px rgba(0,0,0,.08);
}
img{ max-width:100%; height:auto; display:block; }  /* height:auto keeps width/height attributes from squashing narrowed images */
a{ color:var(--link-green); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1200px; margin:0 auto; padding:0 32px; }
h1,h2,h3{ font-family:var(--heading); font-weight:500; color:var(--ink); margin:0 0 .6em; }
h1{ font-size:2.1rem; }
h2{ font-size:1.6rem; }
h3{ font-size:1.15rem; }
p{ margin:0 0 1.1em; }

/* ---------- Nav ---------- */
.site-nav{
  display:flex;
  list-style:none;
  margin:0; padding:0;
  border-bottom:3px solid #4a4a4a;
}
.site-nav li{ flex:1; }
.site-nav a{
  display:block;
  text-align:center;
  padding:1.3rem .5rem;
  font-family:var(--heading);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  color:#2f2f2f;
  text-decoration:none;
}
.site-nav li:nth-child(1) a{ background:var(--g1); }
.site-nav li:nth-child(2) a{ background:var(--g2); }
.site-nav li:nth-child(3) a{ background:var(--g3); }
.site-nav li:nth-child(4) a{ background:var(--g4); }
.site-nav li:nth-child(5) a{ background:var(--g5); }
.site-nav li:nth-child(6) a{ background:var(--g6); }
.site-nav li:nth-child(7) a{ background:var(--g7); }
.site-nav a[aria-current="page"]{
  background:var(--g1) !important;
  color:#1f1f1f;
  font-weight:700;
  position:relative;
}
.site-nav a:hover{ filter:brightness(1.08); text-decoration:none; }

/* ---------- Hero banner photo (Your Needs / Connect style full-width strip) ---------- */
.photo-strip{ width:100%; overflow:hidden; }
.photo-strip img{ width:100%; height:auto; object-fit:cover; }
.accent-band{
  background:var(--olive);
  padding:1.6rem 0;
}
.accent-band h1{ margin:0; color:#2f2f2f; }

/* ---------- Hello hero ---------- */
.hero-sand{
  padding:2.5rem 0 2rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2rem;
  /* stretch, not start: the photo column matches the card's height so the two
     line up along the bottom as well as the top */
  align-items:stretch;
}
.hero-photo-wrap{ text-align:center; display:flex; flex-direction:column; }
.hero-photo-wrap img{
  border-radius:2px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  margin-bottom:1rem;
}
/* auto pushes the button to the bottom edge; the image's own margin keeps a
   minimum gap when there is no slack to distribute */
.hero-photo-wrap .btn{ margin-top:auto; }
.btn{
  display:inline-block;
  margin-top:1rem;
  padding:.65rem 1.4rem;
  background:var(--white);
  border:1px solid #c9c9c9;
  color:#333;
  font-family:var(--heading);
  font-weight:600;
  font-size:.9rem;
  border-radius:2px;
  cursor:pointer;
}
.btn:hover{ background:#f3f3f3; text-decoration:none; }
.btn-primary{ background:#35719f; color:#fff; border:none; }
.btn-primary:hover{ background:#2d6089; }
/* Solid green button for the client-resources call to action, which sits on the
   pale olive callout — a plain text link disappeared against that background. */
/* Accreditation / affiliation logos on the Hello footer band. Labelled, so the
   row reads as education and membership rather than implied accreditation. */
.accred-row{ display:flex; align-items:center; gap:1.4rem; margin-left:auto; flex-wrap:wrap; }
.accred-label{
  font-size:.66rem; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
.accred-row img{ height:34px; width:auto; display:block; opacity:.88; transition:opacity .15s; }
.accred-row a:hover img{ opacity:1; }
/* The Psychology Today badge is wide and carries small text ("VERIFIED BY"), so it sits a little
   taller than the logos to stay legible. */
.accred-row img.accred-pt{ height:44px; opacity:1; }
/* FIND ME sits in the same centred band. .btn's margin-top:1rem dropped it 8px below the logos and
   badge, so it's removed here on desktop. On phones the band has no top padding and FIND ME wraps
   onto its own first line, so it keeps the gap there instead of touching the divider above. */
.btn-find-me{ margin-top:0; }
@media (max-width:860px){ .btn-find-me{ margin-top:1rem; } }

/* PromptAi credit mark in the footer */
.promptai-credit{ display:inline-block; vertical-align:middle; margin-left:.3rem; }
.promptai-credit img{ height:26px; width:auto; display:block; opacity:.85; transition:opacity .15s; }
.promptai-credit:hover img{ opacity:1; }

.btn-resources{ background:var(--link-green); color:#fff; border:none; }
.btn-resources:hover{ background:#33583f; color:#fff; }

.hero-card{
  background:rgba(255,255,255,.82);
  padding:1.8rem 2rem 1.2rem;
  border-radius:2px;
  /* column + auto margin on the quote drops it to the foot of the card, so it
     sits level with the appointment button in the photo column alongside */
  display:flex;
  flex-direction:column;
}
.hero-card .logo-mark{ max-width:220px; margin-bottom:1rem; }
.hero-card h1{ font-size:1.7rem; margin-bottom:.5rem; }
.hero-card .credentials{ font-size:.95rem; color:var(--ink); margin-bottom:1.2rem; }
.hero-card .credentials strong{ display:block; margin-bottom:.15rem; }
.hero-card .hero-quote{ font-style:italic; font-size:.92rem; color:var(--ink-soft); margin-top:auto; margin-bottom:0; }
.hero-card .hero-quote .attrib{ display:block; font-style:normal; margin-top:.3rem; font-size:.85rem; }

/* ---------- Service cards (Hello) ---------- */
.service-cards{ display:grid; grid-template-columns:repeat(4,1fr); }
.service-cards .s-card{ padding:2rem 1.6rem; color:#fff; min-height:230px; display:flex; flex-direction:column; }
.service-cards .s-card:nth-child(1){ background:#2f5a40; }
.service-cards .s-card:nth-child(2){ background:#3d6b4f; }
.service-cards .s-card:nth-child(3){ background:#43765a; }
.service-cards .s-card:nth-child(4){ background:#4a8065; }
.service-cards h2{ color:#fff; font-size:1.5rem; font-weight:400; margin-bottom:.4rem; }
.service-cards .sub{ font-weight:700; margin-bottom:.6rem; display:block; }
.service-cards ul{ list-style:none; margin:0 0 1.2rem; padding:0; font-size:.92rem; }
.service-cards ul li{ margin-bottom:.2rem; }
.service-cards .more{
  display:block; text-align:right; font-weight:700; font-size:.85rem;
  color:#fff; text-decoration:none; letter-spacing:.02em;
  margin-top:auto; /* keeps every MORE > level, whatever the list length */
}

/* ---------- General section ---------- */
/* A promoted page heading keeps the size of the h2 it replaced — the H1 is for
   search engines and screen readers, not a redesign. */
.page-h1{ font-size:1.6rem; }

/* Links inside running text are underlined, so they don't rely on colour alone. */
main p a:not(.btn){ text-decoration:underline; text-underline-offset:2px; }

.section{ padding:3rem 0; }
.section-tight{ padding:1.6rem 0; }
/* Spacing utilities for trimming the join between two stacked sections, where
   two full section paddings meet and read as a hole in the page. */
.pb-tight{ padding-bottom:1.5rem; }
.pt-tight{ padding-top:1.5rem; }

.eyebrow{
  display:inline-block; font-family:var(--heading); font-weight:600;
  color:var(--link-green); text-transform:uppercase; font-size:.8rem;
  letter-spacing:.06em; margin-bottom:.6rem;
}

/* ---------- Two-column layout ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
/* Relationship page intro: heading on the left, postcard opposite it on the
   right, with a generous gutter so neither side feels crowded. */
/* Scope-of-practice note: readable measure, quietly set apart from the sections
   either side without shouting like a warning box. */
.scope-note{
  max-width:52rem;
  border-left:3px solid var(--olive);
  padding-left:1.6rem;
}
.scope-note h2{ color:var(--link-green); }
.scope-note p{ margin-bottom:.9rem; }

.intro-row{
  display:grid;
  grid-template-columns:1fr 520px;
  gap:3.5rem;
  align-items:center;
  margin-bottom:2.8rem;
}
/* .check-list carries a 1.4rem top margin, so its first item sits that far
   below the top of its cell. Match it, or the video floats above the text. */
.video-col{ margin-top:1.4rem; }
.col-narrow-wide{ display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start; }
.col-wide-narrow{ display:grid; grid-template-columns:1fr 280px; gap:2rem; align-items:start; }

/* ---------- Sidebar callout box ---------- */
.callout{
  background:var(--olive);
  padding:1.8rem 2rem;
  border-radius:2px;
  color:#2c2c2c;
}
.callout h2,.callout h3{ color:#2c2c2c; }
.callout ol,.callout ul{ padding-left:1.2rem; }
.callout li{ margin-bottom:.6rem; }

/* ---------- Cards / bio blocks ---------- */
.bio-row{ display:grid; grid-template-columns:280px 1fr; gap:1.8rem; align-items:start; margin-bottom:2.2rem; }
.bio-row img{ border-radius:2px; }
.bio-list{ margin:0; }
.bio-list dt{ font-weight:700; margin-top:.9rem; }
.bio-list dt:first-child{ margin-top:0; }
.bio-list dd{ margin:.2rem 0 0; padding-left:.65rem; border-left:2px solid var(--g2); color:var(--ink-soft); }

/* ---------- Photo grid (challenges) ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem 1.4rem; margin:1.5rem 0 2.5rem; }
.photo-grid figure{ margin:0; }
.photo-grid img{ border-radius:2px; margin-bottom:.5rem; aspect-ratio:1/1; object-fit:cover; width:100%; }
.photo-grid figcaption{ font-size:.92rem; color:var(--ink-soft); }

/* ---------- Pull quote ---------- */
/* Quotes sit indented with a vertical green line on their left, to set them apart from the
   body text (Chris, 13 Sep 2026). Applies to every .pull-quote on the site. */
.pull-quote{
  font-family:var(--heading); font-style:italic; font-weight:500;
  color:var(--link-green); font-size:1.15rem; line-height:1.55;
  margin:2rem 0 2rem 1.5rem; padding:.15rem 0 .15rem 1.4rem;
  border:none; border-left:3px solid var(--g3);
}
.pull-quote cite{ display:block; font-style:normal; font-size:.85rem; color:var(--ink-soft); margin-top:.6rem; }

.emphasis-line{
  color:var(--link-green); font-weight:600;
}

/* ---------- Check lists ---------- */
.check-list{ list-style:none; margin:1.4rem 0; padding:0; }
.check-list li{
  padding-left:1.6rem; position:relative; margin-bottom:.55rem;
}
.check-list li::before{
  content:"•"; position:absolute; left:0; color:var(--link-green); font-weight:700;
}
.num-list{ padding-left:1.3rem; margin:1.2rem 0; }
.num-list li{ margin-bottom:.7rem; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
.testimonial{ margin-bottom:2.2rem; }
.testimonial p{ margin-bottom:.6rem; }
.testimonial .sig{ display:block; color:var(--ink-soft); font-size:.9rem; margin-top:.4rem; }
.testimonial hr{ border:none; border-top:1px solid var(--border-soft); margin:2rem 0; }

/* ---------- Office / wide photo ---------- */
.wide-photo{ position:relative; margin:2rem 0; }
.wide-photo img{ width:100%; border-radius:2px; box-shadow:0 6px 18px rgba(0,0,0,.15); }
.wide-photo .caption{
  position:absolute; top:1.2rem; left:1.4rem; color:#fff; font-family:var(--heading);
  font-style:italic; font-size:1.1rem; text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ---------- Inline video embed ---------- */
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:2px; box-shadow:0 4px 14px rgba(0,0,0,.12); background:#000;
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* Click-to-play still: fills the same 16:9 box the iframe would, so nothing moves
   when the player loads in its place (see assets/js/yt-facade.js). */
.yt-facade{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; margin:0;
  cursor:pointer; background:#000; display:block; }
.yt-facade img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-play{ position:absolute; left:50%; top:50%; width:68px; height:48px; transform:translate(-50%,-50%);
  background:#d91f1f; border-radius:12px; opacity:.92; transition:opacity .15s, transform .15s;
  box-shadow:0 2px 10px rgba(0,0,0,.35); }
.yt-play::after{ content:""; position:absolute; left:27px; top:14px; border-style:solid;
  border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
.yt-facade:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }

/* ---------- Media widgets (podcast / video) ---------- */
.media-row{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; margin:2rem 0; }
.media-row img{ border-radius:2px; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.media-row .btn{ margin-top:1rem; }

/* ---------- Book grid (recommended reading) ---------- */
.book-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem 1.4rem; margin:1.5rem 0 2.5rem; }
.book-tile{ margin:0; }
/* Covers show in FULL (contain, not cover): a 2:3 cover-crop was clipping titles and
   author names on taller covers. The frame is as tall as the tallest cover (~1:1.75), and
   each cover sits on its bottom edge so the captions line up. drop-shadow, unlike
   box-shadow, follows the cover itself rather than the empty space above it. */
.book-tile img{
  aspect-ratio:4/7; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.14)); width:100%; margin-bottom:.6rem;
}
.book-tile figcaption .title{ display:block; font-style:italic; font-weight:600; font-size:.95rem; }
.book-tile figcaption .author{ display:block; color:var(--ink-soft); font-size:.88rem; margin-top:.15rem; }
/* A single book under the client callout on reading.html (Letters to Sartre). Chris wanted it
   the same visible height as Ivan Denisovich beside it: that cover shows 324px tall in its
   205px grid tile on desktop. Natural proportions here (no 4:7 frame), and the 44px top margin
   puts its bottom edge, and so its caption, level with Ivan's. featured-book.js then fine-tunes
   that margin per browser. The img carries its own aspect-ratio inline: aspect-ratio:auto alone
   drops the ratio from width/height, leaving a lazy image 0px wide until it loads. */
.featured-book{ width:max-content; max-width:100%; margin:44px auto 0; }
.featured-book img{ aspect-ratio:auto; width:auto; height:324px; }
@media (max-width:860px){ .featured-book{ margin-top:1.5rem; } }

/* ---------- Forms ---------- */
.contact-form{ max-width:520px; }
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-weight:600; margin-bottom:.3rem; }
.form-field label .req{ color:#c0392b; }
.form-field input,.form-field textarea{
  width:100%; padding:.6rem .7rem; border:1px solid #c9c9c9; border-radius:2px;
  font-family:var(--sans); font-size:1rem;
}
.form-field textarea{ min-height:140px; resize:vertical; }

/* ---------- Map ---------- */
.map-embed{ border:1px solid var(--border-soft); border-radius:2px; overflow:hidden; margin:1.5rem 0; }
.map-embed iframe{ width:100%; height:340px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--footer-bg); border-top:1px solid #c9c7ba; }
.footer-wrap{
  max-width:1200px; margin:0 auto; padding:2.4rem 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;
}
.footer-wrap img{ max-width:190px; }
.footer-contact{ text-align:right; color:var(--ink); }
.footer-contact a{ color:var(--ink); }
.footer-legal{
  width:100%; display:flex; justify-content:space-between; align-items:baseline;
  font-size:.85rem; color:var(--ink-soft); border-top:1px solid #c9c7ba; padding-top:1rem;
}
.footer-legal a{ color:#33583f; text-decoration:underline; text-underline-offset:2px; }  /* darker than --link-green: 5.9:1 on the footer grey, where brand green managed 4.49 */
.footer-updated{ text-align:left; }
.footer-copyright{ text-align:right; }
.footer-base{ height:8px; background:var(--olive-deep); }

/* ---------- Page-specific size tweaks (desktop only — mobile already
   stacks these to full container width via the responsive rules below) ---------- */
@media (min-width: 861px){
  /* Desktop and laptop are shown at 90%, the same as one click of the browser's Zoom Out, which Chris
     found better balanced on a laptop screen: everything scales together and a sliver of the sand
     background frames the page. Phones and tablets (860px and below) are untouched.
     featured-book.js converts its measurements for this scale. */
  body{ zoom:.9; }
  .logo-banner-row{ grid-template-columns: 1fr 420px; } /* about.html — banner enlarged 1.5x (280px -> 420px) */
  .book-cover-row{ grid-template-columns: 418px 1fr; }  /* reading.html — cover enlarged to match the copy's height */
}

/* ---------- Close the 861–1279px gap: tablets in landscape and smaller
   laptops sat below the old min-width:1280px floor but above the 860px
   mobile breakpoint, forcing horizontal scroll. This only lifts the floor;
   the desktop grid still reflows fluidly down to 861px on its own. ---------- */
@media (max-width: 1279px){
  body{ min-width:0; }
}

/* ---------- Mobile nav toggle (hidden on desktop) ---------- */
.nav-toggle-checkbox{ display:none; }
.nav-toggle-label{ display:none; }
.mobile-brand{ display:none; }

/* About › My Counselling Philosophy: silent looping word-cloud clip (lazy-video.js).
   The clip has a white ground, so a faint shadow separates it from the cream page. */
.philosophy-video{
  display:block; width:100%; height:auto; border-radius:2px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* =====================================================================
   Responsive layout — added 2026-09-04. Most traffic is mobile, so the
   desktop grid (above) now reflows below 860px instead of forcing a
   fixed-width horizontal scroll. Desktop appearance is unchanged.
   ===================================================================== */
@media (max-width: 860px){
  body{ min-width:0; width:100%; box-shadow:none; }
  .container{ padding:0 20px; }

  /* Nav collapses into a toggle-driven drawer */
  /* Green band across the top on phones, echoing the desktop tab colours, so the page
     starts grounded rather than with a lone menu icon on cream (Chris, 12 Sep 2026).
     Starts at --g3, not --g1, so the white menu icon keeps 3:1 contrast. */
  header{
    position:relative; display:flex; flex-wrap:wrap; align-items:center;
    background:linear-gradient(90deg, var(--g3), var(--g7));
  }
  header nav{ flex-basis:100%; }
  .nav-toggle-label{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; margin:.7rem 0 .7rem 20px; cursor:pointer;
  }
  .nav-toggle-label span{ display:block; height:3px; background:#fff; border-radius:2px; }
  .mobile-brand{
    display:flex; flex-direction:column; align-items:flex-end; margin:0 20px 0 auto;
    color:#fff; line-height:1.2; text-decoration:none;
  }
  .mobile-brand:hover{ text-decoration:none; }
  .mb-name{ font-family:var(--heading); font-weight:600; font-size:1.05rem; letter-spacing:.02em; }
  .mb-sub{ font-size:.74rem; letter-spacing:.05em; }
  /* The `.container{ padding:0 20px }` rule above zeroes every section's top padding on
     phones. The old cream header hid that; against the green band the first block sat
     flush. This gives just the first block breathing room (the full-bleed photo strip on
     Your Needs is a div, not a .container, so it still meets the band edge to edge). */
  main > .container:first-child{ padding-top:1.6rem; }
  /* Quotes keep their left line on phones, with a smaller indent so the text isn't squeezed. */
  .pull-quote{ margin-left:.4rem; padding-left:1rem; }
  .site-nav{
    display:none; flex-direction:column; border-bottom:none;
  }
  .nav-toggle-checkbox:checked ~ nav .site-nav{ display:flex; }
  .site-nav li{ flex:none; }
  .site-nav a{ text-align:left; padding:1rem 1.4rem; font-size:1rem; }

  /* Grids stack to a single column */
  .hero-grid, .two-col, .col-narrow-wide, .col-wide-narrow, .bio-row, .intro-row{
    grid-template-columns:1fr; gap:1.6rem;
  }
  .service-cards{ grid-template-columns:1fr 1fr; }
  .photo-grid, .book-grid{ grid-template-columns:1fr 1fr; }
  .media-row, .testimonial-grid{ grid-template-columns:1fr; }

  .hero-photo-wrap img{ max-width:220px; margin:0 auto 1rem; }
  /* the band stacks on a phone; let the logo row start at the left edge */
  .accred-row{ margin-left:0; gap:1.1rem; }
  .accred-row img{ height:28px; }
  .video-col{ margin-top:0; }
  .hero-card{ padding:1.4rem 1.6rem; }

  .wide-photo .caption{ font-size:.95rem; }
  .map-embed iframe{ height:260px; }

  /* Footer stacks and centres */
  .footer-wrap{ flex-direction:column; text-align:center; padding:2rem 20px; }
  .footer-contact{ text-align:center; }
  .footer-legal{ flex-direction:column; text-align:center; gap:.5rem; }
  .footer-updated, .footer-copyright{ text-align:center; }
}

@media (max-width: 480px){
  h1{ font-size:1.7rem; }
  h2{ font-size:1.35rem; }
  .service-cards{ grid-template-columns:1fr; }
  .photo-grid, .book-grid{ grid-template-columns:1fr 1fr; }
  .hero-card h1{ font-size:1.4rem; }
}