/* ==========================================================================
   Noel Science Tutoring — stylesheet
   --------------------------------------------------------------------------
   ONE stylesheet for the whole site. Organized top-to-bottom as:
     1. Brand tokens (colors, fonts, spacing)   <- change colors here, once
     2. Base + typography
     3. Layout helpers
     4. Header / navigation
     5. Buttons
     6. Home page sections
     7. Testimonials (hidden until switched on)
     8. Footer
     9. Small-screen + accessibility adjustments

   COLOR RULE, do not break it: Carolina blue is a LIGHT color. Never put
   white text on a Carolina-blue background — it is unreadable. Navy text on
   Carolina blue is fine (4.85:1). Buttons that need white text use navy or
   forest green.
   ========================================================================== */


/* ==========================================================================
   1. BRAND TOKENS
   ========================================================================== */

:root {
  /* Palette — from the brand brief */
  --navy:   #13294B;   /* headings, body text, footer, dark buttons */
  --blue:   #4B9CD3;   /* Carolina blue — large fills, accents, rules */
  --green:  #2C6E49;   /* forest green — primary buttons, links */
  --cream:  #F6F2EA;   /* page background (warm, not clinical) — the LIGHT step */
  --gray:   #5F5E5A;   /* secondary body text */
  --white:  #FFFFFF;   /* cards and surfaces */

  /* Two lighter tints taken from the logo's dot ring. Used sparingly for
     washes and dividers so the site and the logo feel like one system. */
  --sage:   #7FBF9B;
  --pale:   #A9D0E8;

  /* Section background ladder.
     Neighbouring sections need different LIGHTNESS, not just a different tint,
     or the edge between them disappears. These three are deliberately spaced:
       cream (light)  ->  blue wash (middle)  ->  green wash (deep)
     Measured contrast between neighbours is 1.11–1.23, up from 1.01–1.06.
     Every text colour used on them still passes WCAG AA (4.5:1).
     If you nudge one, re-check the others stay apart. */
  --pale-wash:  #D8E9F6;   /* blue wash — the MIDDLE step */
  --green-wash: #C5E3CE;   /* green wash — the DEEP step */
  --nav-bg:     #D4E6F4;   /* header band */
  --nav-border: #B7D1E8;   /* header bottom rule */
  --green-dark: #245839;   /* darker green, kept for reference */
  --navy-dark:  #0D1D36;   /* button hover */
  --hairline:   #E4E0D8;   /* warm border line */

  /* Type */
  --font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;

  /* Spacing + shape */
  --container: 1120px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(19, 41, 75, .06), 0 8px 24px rgba(19, 41, 75, .07);
}


/* ==========================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font);
  font-size: 1.125rem;       /* 18px — sized for comfortable reading, including for people who find small text hard */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Headings use weight and size for hierarchy — never a second typeface.
   clamp() lets them scale smoothly between phone and desktop. */
h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.15rem, 1.45rem + 2.9vw, 3.45rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem);  font-weight: 700; }
h3 { font-size: 1.25rem;  font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 1.02rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-dark); }

img, svg { max-width: 100%; height: auto; display: block; }

/* Browsers give <figure> 40px of side margin by default, which was quietly
   insetting the photos and the testimonial cards from their columns. */
figure { margin: 0; }

/* Email addresses are one long unbreakable word. Let them wrap anywhere
   rather than push a narrow phone layout sideways. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

strong { font-weight: 600; }

/* Secondary / muted body copy */
.muted { color: var(--gray); }

/* An intro paragraph that sits under a heading */
.lede {
  font-size: clamp(1.15rem, 1.07rem + .35vw, 1.32rem);
  color: var(--gray);
  line-height: 1.6;
}

/* Small all-caps label above a section heading */
.eyebrow {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .8rem;
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section       { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--tight{ padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }

/* Background variants for alternating sections */
.section--white { background: var(--white); }
.section--wash  { background: var(--pale-wash); }
.section--green { background: var(--green-wash); }

/* Brand green (#2C6E49) text measures 4.44:1 on the green wash — just under
   the 4.5 minimum. Text sitting directly on a green section uses the darker
   green instead (6.03:1). Buttons are unaffected: they have their own fill. */
.section--green .eyebrow,
.section--cta .eyebrow,
.section--green a:not(.btn),
.section--cta a:not(.btn) { color: var(--green-dark); }

/* On green sections the normal button hover (pale sage) is almost the same
   colour as the background and disappears. Hover to navy there instead.
   Everywhere else the sage hover stays, so the hero's two buttons still look
   different from each other on hover. */
.section--green .btn--primary:hover,
.section--cta .btn--primary:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.section--navy  { background: var(--navy); }

.section--navy,
.section--navy h2,
.section--navy h3 { color: var(--white); }
.section--navy .lede { color: #C9D6E5; }

/* Closing CTA band. Light green, matching the How This Works section, so the
   bottom of the page isn't one large block of navy running into the footer. */
.section--cta { background: var(--green-wash); color: var(--navy); }
.section--cta h2 { color: var(--navy); }
.section--cta .lede { color: var(--gray); }
.cta-note { margin-top: 1.5rem; font-size: 1rem; color: var(--gray); }

/* Centered section header */
.section-head { max-width: 44rem; margin: 0 auto clamp(2rem, 1.5rem + 1.5vw, 3rem); text-align: center; }
.section-head p { margin-bottom: 0; }

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--white);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
  z-index: 200; text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; color: var(--white); }


/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 1px 0 rgba(19, 41, 75, .04), 0 4px 14px rgba(19, 41, 75, .05);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 96px;
}

.site-logo { display: block; flex-shrink: 0; }
.site-logo img { width: 290px; }

/* --- desktop navigation --- */
.nav { display: flex; align-items: center; gap: 1.4rem; }

.nav a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.06rem;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--green); border-bottom-color: var(--blue); }

/* The current page gets a permanent underline */
.nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }

/* --- hamburger, only visible on small screens --- */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .55rem .7rem; cursor: pointer; color: var(--navy);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primary — forest green with white text (6.2:1, passes AA) */
.btn--primary { background: var(--green); color: var(--white); border-color: var(--green); }
.btn--primary:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--navy);
}

/* Secondary — navy outline */
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }

/* For use on the navy band — white fill, navy text */
.btn--onnavy { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--onnavy:hover { background: var(--pale); color: var(--navy); border-color: var(--pale); }

.btn--sm { padding: .8rem 2.1rem; font-size: .96rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* --------------------------------------------------------------------
   Buttons inside the nav.
   IMPORTANT: `.nav a` is more specific than `.btn--primary`, so without
   these rules the nav button inherits the nav's navy link colour and ends
   up as navy-on-green (about 2.3:1 — unreadable). Do not delete.
   -------------------------------------------------------------------- */
.nav a.btn--primary        { color: var(--white); border-bottom: 2px solid transparent; }

/* Padding needs the same treatment as colour: `.nav a { padding: .35rem 0 }`
   outranks `.btn--sm`, which left the button with NO horizontal padding.
   This rule restores it. */
.nav a.btn               { padding: .8rem 2rem; }
.nav a.btn--primary:hover  { color: var(--navy); background: var(--sage);
                             border-color: var(--sage); border-bottom-color: var(--sage); }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   6. HOME PAGE SECTIONS
   ========================================================================== */

/* --- Hero --- */
.hero { padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4.75rem); }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: .45em; }

/* Forced line breaks in the headline, desktop only. On phones they collapse
   so the headline wraps to the screen instead of breaking awkwardly. */
.h1-break { display: none; }
@media (min-width: 560px) { .h1-break { display: inline; } }
.hero .lede { margin-bottom: 1.9rem; max-width: 34rem; }

.hero-note {
  margin-top: 1.15rem;
  font-size: 1rem;
  color: var(--gray);
}

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  /* A fixed 4:5 frame with object-fit: cover means ANY photo works here —
     portrait, square, or landscape. The browser crops to fill the frame
     rather than letterboxing or stretching. Change the ratio on one line
     below if you'd rather have a different shape. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;   /* bias the crop toward the face */
  max-height: 620px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* --- Credibility strip --- */
/* Carolina-blue wash carrying NAVY text — never white text here. */
.cred {
  background: var(--blue);
  border-block: 1px solid rgba(19, 41, 75, .12);
}
.cred-list {
  list-style: none; margin: 0; padding: 2rem 0;
  display: grid; gap: 1.75rem 2rem;
  color: var(--navy);
}

/* Each item is a small badge: icon in a white disc, label beneath. */
.cred-list li {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .7rem;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
  max-width: 15rem; margin-inline: auto;
}
.cred-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(19, 41, 75, .10);
}
.cred-icon svg { width: 26px; height: 26px; color: var(--navy); }

/* --- Steps ("how this works") --- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }

.step {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--pale-wash);
  color: var(--navy);
  font-weight: 700; font-size: .95rem;
}
.step h3 { margin-bottom: .35em; }
.step p  { color: var(--gray); font-size: 1.0625rem; margin: 0; }

/* --- Subject chips --- */
.subjects { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.subject-chip {
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .6rem 1.25rem;
  font-size: .98rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.subject-chip:hover,
.subject-chip:focus-visible {
  background: var(--pale-wash);
  border-color: var(--blue);
  color: var(--navy);
  transform: translateY(-2px);
}
/* AP Biology is the flagship offering, so it starts already highlighted */
.subject-chip--ap {
  border-color: var(--blue);
  background: var(--pale-wash);
  font-weight: 600;
}
.subject-chip--ap:hover { background: #C6DEF1; }

/* The two lines under the chips */
.subjects-note { margin-top: 2.5rem; text-align: center; }
.subjects-note p { margin-bottom: .6rem; }
.subjects-note p:last-child { margin-bottom: 0; }

/* --- Closing CTA band --- */
.cta-band { text-align: center; }
.cta-band .lede { margin: 0 auto 2rem; max-width: 38rem; }
.cta-band .btn-row { justify-content: center; }


/* ==========================================================================
   7. TESTIMONIALS  (scaffolded, hidden at launch)
   --------------------------------------------------------------------------
   The section below is fully styled and ready. It stays hidden until
   showTestimonials is set to true in js/site-config.js. Nothing here needs
   to change to switch it on.
   ========================================================================== */

.testimonials[hidden] { display: none !important; }

.testimonial-grid { display: grid; gap: 1.5rem; }

.testimonial {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem;
}
.testimonial p { font-size: 1.125rem; color: var(--navy); }
.testimonial cite {
  display: block; margin-top: 1rem;
  font-style: normal; font-weight: 600; font-size: 1rem;
}
.testimonial .t-detail { display: block; font-weight: 400; color: var(--gray); font-size: .9375rem; }


/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: #C9D6E5;
  padding-block: 3rem 2rem;
  font-size: 1rem;
}
.footer-grid { display: grid; gap: 2.25rem; }
.footer-logo img { width: 300px; }
/* Brand tagline under the footer logo. Pale blue on navy reads at 9:1. */
.footer-slogan {
  margin: .9rem 0 0;
  color: var(--pale);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: .005em;
}

.footer-tagline { margin-top: .6rem; max-width: 26rem; color: #C9D6E5; }

.site-footer h4 { color: var(--white); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--pale); text-decoration: underline; }

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.footer-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: .38rem .85rem;
  font-size: .9rem;
  color: var(--white);
}
.footer-badge svg { width: 15px; height: 15px; flex-shrink: 0; }

.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .9375rem; color: #A9B8CC;
}


/* ==========================================================================
   9. RESPONSIVE + ACCESSIBILITY
   ========================================================================== */

/* ---- Small screens: stack the nav behind a hamburger ----
     1060px, not 768px. The larger logo (290px) plus the four links plus the
     roomier CTA button measure 1022px; below that the header overflows.
     If you ever change the logo size, nav font size, or button padding,
     re-check this number. ---- */
@media (max-width: 1060px) {
  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }

  .nav a {
    padding: .85rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .nav a:hover { border-bottom-color: var(--hairline); }
  .nav a[aria-current="page"] { border-bottom-color: var(--hairline); }

  .nav .btn { margin-top: 1rem; text-align: center; border-bottom: 2px solid transparent; }

  .site-header { position: relative; }
  .site-logo img { width: 220px; }
}

/* ---- Phones: make the hero buttons full width so they line up and give
       a bigger tap target ---- */
@media (max-width: 520px) {
  .hero .btn-row .btn { width: 100%; text-align: center; }
}

/* ---- Comfortable tablet / desktop layouts ---- */
@media (min-width: 640px) {
  .cred-list       { grid-template-columns: repeat(2, 1fr); }
  .steps           { grid-template-columns: repeat(3, 1fr); }
  .testimonial-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .hero-grid   { grid-template-columns: 1.15fr .85fr; }
  .cred-list   { grid-template-columns: repeat(4, 1fr); padding-block: 2.5rem; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
}

/* ---- Respect "reduce motion" ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Print ---- */
@media print {
  .site-header, .cta-band, .nav-toggle { display: none; }
  body { background: #fff; }
}


/* ==========================================================================
   10. BOOKING AREA (Contact page)
   --------------------------------------------------------------------------
   The Calendly widget is injected into #calendly-embed by site.js. The
   fallback below is what shows if no real Calendly URL has been set yet.
   ========================================================================== */

.booking-embed { margin-top: 2rem; }

.booking-fallback {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  text-align: center;
}
.booking-fallback h3 { margin-bottom: .5em; }
.booking-fallback p  { color: var(--gray); max-width: 34rem; margin-inline: auto; }
.booking-fallback .btn { margin-top: .75rem; }


/* ==========================================================================
   11. INTERIOR PAGES  (About, Services, Contact)
   ========================================================================== */

/* Compact page header, used instead of the home page's full hero */
.page-header { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-header .lede { max-width: 42rem; }

/* A readable column for narrative copy */
.prose { max-width: 40rem; }
.prose h2 { margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }

/* About page: portrait alongside the story */
.about-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: start; }
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Lower half of the About page: story on the right, details card on the left.
   Same column proportions as .about-grid above it, so the card lines up under
   the photo and the text lines up under the opening section. */
.about-lower { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: start; }
.about-aside .card { padding: 1.5rem 1.5rem 1.6rem; }
.about-aside .facts { gap: .8rem; font-size: 1rem; }

/* Former students, listed by name. Names are only shown with permission —
   see the comment in about.html. */
.alumni-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 1rem;
}
.alumni-list li { display: flex; flex-direction: column; gap: .1rem; }
.alumni-name { font-weight: 600; color: var(--navy); }
.alumni-role { color: var(--gray); font-size: 1rem; }

/* A student's story set inside the About page text column */
.story-quote {
  margin: 2rem 0 0;
  padding: 1.5rem 1.6rem;
  background: var(--pale-wash);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
}
.story-quote blockquote { margin: 0; color: var(--navy); font-size: 1.125rem; line-height: 1.7; }
.story-quote figcaption { margin-top: 1rem; font-weight: 600; color: var(--navy); font-size: 1rem; }
.story-quote figcaption span { display: block; font-weight: 400; color: var(--gray); font-size: .9375rem; }

/* Credential / fact list with green check marks */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.facts li { display: flex; gap: .75rem; align-items: flex-start; }
.facts svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .25rem; color: var(--green); }

/* Generic white card */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

/* Services: one block per subject. scroll-margin keeps the sticky header
   from covering the heading when you arrive from a link on the home page. */
.subject-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.subject-item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  scroll-margin-top: 120px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.subject-item h3 { margin-bottom: .4em; }
.subject-item p  { margin: 0; color: var(--gray); font-size: 1.0625rem; }

/* Hover: the card lifts slightly and its bar turns from blue to green.
   Wrapped in (hover: hover) so phones don't get a card stuck in the
   "lifted" state after a tap. The cursor is left alone on purpose — these
   cards don't link anywhere, and a pointer would suggest they do. */
@media (hover: hover) {
  .subject-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-left-color: var(--green);
  }

  /* Session tiles get the same lift and shadow. They have no side bar to
     recolour, so the green accent goes to the border and the icon instead. */
  .session-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--sage);
  }
  .session-tile:hover .session-icon { color: var(--green); }
}

/* Bundle discounts on the Services page */
.bundle-list {
  list-style: none;
  margin: .9rem 0 1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
/* Positioned dot rather than flexbox: flex would treat the bold label and
   the plain text as separate items and put an extra gap between them. */
.bundle-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--navy);
}
.bundle-list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* "How sessions work" — four tiles with an icon each */
.session-grid {
  display: grid;
  gap: 1.1rem;
  max-width: 54rem;
  margin-inline: auto;
}
.session-tile {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--pale-wash);
  border: 1px solid #BDD5EA;
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.session-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(19, 41, 75, .10);
  color: var(--navy);
  transition: color .18s ease;
}
.session-icon svg { width: 22px; height: 22px; }
.session-tile h3 { font-size: 1.125rem; margin: .45rem 0 .3rem; }
.session-tile p  { margin: 0; color: var(--gray); font-size: 1.0625rem; }

/* Pricing table */
.table-wrap { overflow-x: auto; }
.pricing {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pricing th, .pricing td {
  padding: 1.05rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.pricing thead th {
  background: var(--pale-wash);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy);
}
.pricing tbody th { font-weight: 600; }
.pricing tbody tr:last-child th,
.pricing tbody tr:last-child td { border-bottom: none; }
.pricing td.rate { font-weight: 700; white-space: nowrap; }

/* Small explanatory note */
.note { font-size: 1rem; color: var(--gray); }

/* Contact page layout */
.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
/* Grid columns otherwise refuse to shrink below their widest unbreakable content */
.contact-grid > * { min-width: 0; }

/* Definition-style detail list (hours, location, email) */
.details { margin: 0; }
.details dt { font-weight: 600; color: var(--navy); margin-top: 1.25rem; }
.details dt:first-child { margin-top: 0; }
.details dd { margin: .3rem 0 0; color: var(--gray); }

@media (min-width: 760px) {
  .subject-list { grid-template-columns: repeat(2, 1fr); }
  .session-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .about-grid   { grid-template-columns: .8fr 1.2fr; }

  /* Explicit grid placement, rather than reordering the HTML, so the phone
     layout keeps its natural reading order (story first, details after). */
  .about-lower  { grid-template-columns: .8fr 1.2fr; }
  .about-lower .prose { grid-column: 2; grid-row: 1; }
  .about-aside  {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 120px;          /* clears the 97px sticky header */
  }
  .contact-grid { grid-template-columns: 1.5fr .8fr; }
}