/* ==========================================================================
   Level Up Therapy Centers — site stylesheet

   Mobile-first, written with native CSS nesting. Base rules target phones;
   three breakpoints add the wider layouts:
     720px   two-column grids, tablet layouts
     900px   desktop menu, three-column grids, footer row
     1280px  brand name beside the logo
   Sizes between breakpoints scale fluidly with clamp().

   Contents
     1.  Fonts
     2.  Design tokens (colors, fonts, spacing)
     3.  Base elements
     4.  Layout helpers
     5.  Buttons
     6.  Header and navigation
     7.  Hero banners
     8.  Sections, cards and photos
     9.  Footer
     10. Background art
     11. Page-specific styles (one block per page)
     12. Utilities
   ========================================================================== */


/* 1. Fonts ------------------------------------------------------------------
   "Technically, But Not Actually" (handwritten body font) and Ribeye (display
   font) are the fonts the original site used. Josefin Sans stands in for
   Brandon Grotesque, which was licensed through Wix. */

@font-face { font-family: Technically; src: url("../fonts/technically-but-not-actually.woff2") format("woff2"); font-display: swap; }

@font-face { font-family: Ribeye; src: url("../fonts/ribeye.woff2") format("woff2"); font-display: swap; }

@font-face { font-family: "Josefin Sans"; src: url("../fonts/josefin-sans.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }


/* 2. Design tokens --------------------------------------------------------- */

:root {
  /* Fonts */
  --font-hand: "Technically", "Comic Sans MS", "Segoe Print", cursive;
  --font-display: "Ribeye", "Georgia", serif;
  --font-sans: "Josefin Sans", "Trebuchet MS", sans-serif;

  /* Blues, darkest to lightest */
  --blue-950: #1f4f7c;     /* text on light-blue fills (menu, footer, form fields, home panels) */
  --blue-900: #2b6ca3;     /* main text and heading blue */
  --blue-700: #3d78a9;     /* solid buttons, active menu item */
  --blue-600: #5c93b7;     /* service card badge */
  --blue-500: #5f98c4;     /* borders */
  --blue-300: #a9c7e0;     /* footer, form fields */
  --blue-200: #c4dbec;     /* menu buttons */
  --blue-100: #e3eef7;     /* page background */
  --panel: #b0cde4;        /* translucent title cards and panels */

  /* Greys and teals */
  --slate: #42525d;        /* dark grey-blue body text */
  --slate-500: #5f7b8c;    /* FAQ card border */
  --slate-400: #6b8197;    /* "advantage" blob border */
  --title-grey: #75899a;   /* page titles */
  --teal-grey: #55696a;    /* soft headings and captions (4.9:1 on the page background) */
  --mint-border: #7fc7bf;
  --mint: #cdeeea;
  --mint-light: #e4f7f5;
  --white: #fff;

  /* Header gradient */
  --header-top: #7aa1c2;
  --header-bottom: #a5c2da;

  /* Form status messages */
  --success: #1f7a4d;
  --error: #b3261e;

  /* Shapes and spacing */
  --radius: 18px;
  --gutter: 16px;          /* side padding on phones */
  --max: 1200px;           /* widest content column */
  --narrow: 960px;         /* reading-width column */
  --gap: clamp(18px, 3vw, 32px);

  /* Shadows and translucent fills, derived from the colors above */
  --shadow: 0 6px 18px color-mix(in srgb, var(--blue-900) 18%, transparent);
  --shadow-lg: 0 8px 24px color-mix(in srgb, var(--blue-900) 18%, transparent);
  --emboss: 1px 1px 0 #fff;                           /* light "raised" text */
  --text-shadow-dark: 2px 2px 3px rgb(0 0 0 / 35%);   /* white text on photos */
  --frame: 3px solid rgb(255 255 255 / 85%);          /* white border on photos */
}



/* 3. Base elements --------------------------------------------------------- */

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

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix -- iOS Safari only supports the prefixed form */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 1.125rem / 1.5 var(--font-hand);   /* 18px */
  color: var(--slate);
  background: var(--blue-100);
  overflow-x: hidden;      /* nothing may ever scroll sideways on a phone */
  overflow-wrap: anywhere; /* long URLs and emails wrap instead of overflowing */
}

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

a {
  color: var(--blue-900);
  &:hover { color: var(--blue-700); }
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--blue-900);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); }

p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--gutter);
  z-index: 100;
  padding: .5em 1em;
  border-radius: 8px;
  background: var(--white);
  color: var(--blue-900);
  &:focus { top: 8px; }
}


/* 4. Layout helpers -------------------------------------------------------- */

/* Centered content column with side gutters */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: var(--narrow); margin-inline: auto; }

/* Evenly spaced vertical stack of blocks */
.stack > * + * { margin-top: var(--gap); }

/* Two columns from 720px (vertically centered unless .items-start/.items-stretch);
   .grid-3 adds a third column from 900px. */
.grid-2, .grid-3 { display: grid; gap: var(--gap); }
.grid-2 { gap: clamp(18px, 3vw, 36px); align-items: center; }
.items-start { align-items: start; }
.items-stretch { align-items: stretch; }

@media (width >= 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 .md-order-last { order: 1; }  /* photo moves to the right on wider screens */
}

@media (width >= 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}


/* 5. Buttons --------------------------------------------------------------- */

.btn {
  --bg: var(--white);
  --fg: var(--blue-900);
  --line: var(--blue-900);

  display: inline-block;
  padding: .7em 1.6em;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: 1.05rem / 1.2 var(--font-display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;

  &:is(:hover, :focus-visible) {
    --bg: var(--blue-900);
    --fg: var(--white);

    transform: translateY(-1px);
  }
}

/* Filled blue button (Send, Apply Now) */
.btn-solid {
  --bg: var(--blue-700);
  --fg: var(--white);
  --line: var(--blue-700);
  &:is(:hover, :focus-visible) { --line: var(--blue-900); }
}

/* Soft mint "Read More" button on the FAQ cards */
.btn-pill {
  --bg: var(--mint-light);
  --fg: var(--teal-grey);
  --line: var(--mint-border);

  font: 1.15rem / 1.2 var(--font-hand);
  &:is(:hover, :focus-visible) { --bg: var(--mint-border); --fg: var(--white); }
}


/* 6. Header and navigation -------------------------------------------------
   Phones and tablets (< 900px): a "Menu" button opens a stacked menu, and
   the FAQ's item has its own toggle for its sub-pages (both in main.js).
   Desktop (>= 900px): one row of pill links; FAQ's sub-pages drop down on
   hover or keyboard focus. */

.site-header {
  position: relative;
  z-index: 50;
  background: linear-gradient(var(--header-top), var(--header-bottom));
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--max);
  margin-inline: auto;
  padding: 10px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font: 1rem / 1.1 var(--font-display);
  text-decoration: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  img { width: 48px; height: 48px; border-radius: 8px; }
}

/* Shared look of the menu button, the menu links and the sub-menu toggle */
.menu-toggle, .site-nav a, .sub-toggle {
  border-radius: 10px;
  background: var(--blue-200);
  color: var(--blue-950);
  font-family: var(--font-display);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 60%);
  font-size: .95rem;
  cursor: pointer;
  &::before { content: "\2630"; font-size: 1.3rem; line-height: 1; }  /* ☰ */
  &[aria-expanded="true"]::before { content: "\2715"; }               /* ✕ */
}

.sub-toggle {
  width: 44px;
  border: 0;
  cursor: pointer;
  &::before { content: "\25BE"; font-size: 1.2rem; }                   /* ▾ */
  &[aria-expanded="true"]::before { content: "\25B4"; }               /* ▴ */
}

.site-nav {
  display: none;
  width: 100%;
  &.is-open { display: block; }

  ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px 0 4px;
    list-style: none;
  }

  li { position: relative; }

  a {
    display: block;
    padding: .6em 1em;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 15%);
    &:is(:hover, :focus-visible) { background: var(--white); }
    &.is-active { background: var(--blue-700); color: var(--white); }
  }

  /* FAQ's item: link + sub-menu toggle side by side, sub-menu underneath */
  .has-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 6px;
  }

  .sub {
    display: none;
    grid-column: 1 / -1;
    gap: 4px;
    padding: 4px 0 4px 18px;

    a:not(.is-active) { background: rgb(255 255 255 / 55%); }
    a { font-family: var(--font-hand); font-size: 1.05rem; }
  }
}

@media (width < 900px) {
  .site-nav .sub.is-open { display: flex; }
}

@media (width >= 900px) {
  .header-inner { flex-wrap: nowrap; }
  .menu-toggle, .sub-toggle, .brand span { display: none; }

  .site-nav {
    display: block;
    width: auto;

    ul { flex-flow: row wrap; justify-content: flex-end; padding: 0; }
    a { padding: .5em .8em; font-size: clamp(.82rem, .37rem + .8vw, .95rem); white-space: nowrap; }
    .has-sub { display: block; }

    /* Drop-down panel */
    .sub {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 60;
      min-width: 260px;
      margin-top: 4px;
      padding: 8px;
      border-radius: 12px;
      background: var(--white);
      box-shadow: var(--shadow);

      /* Hidden with visibility (not display) so closing can wait: the panel stays open briefly after the
         pointer leaves, and a slightly diagonal move toward it doesn't close it. */
      display: flex;
      visibility: hidden;
      transition: visibility 0s .2s;

      /* Invisible strip over the 4px gap above the panel, so the pointer never leaves the menu item on its way down */
      &::before { content: ""; position: absolute; inset: -4px 0 auto; height: 4px; }

      a:not(.is-active) { background: var(--blue-100); }
      a { white-space: normal; }
    }

    .has-sub:is(:hover, :focus-within) .sub { visibility: visible; transition-delay: 0s; }
  }
}

/* Room for the "Level Up Therapy Centers" name beside the logo again */
@media (width >= 1280px) {
  .brand span { display: inline; font-size: .9rem; }
}


/* 7. Hero banners ----------------------------------------------------------
   The banner at the top of each page: background art (see section 10) with
   the page title on a translucent "title card". */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 6vw, 72px) var(--gutter);
  background: var(--blue-100) center / cover;
  text-align: center;
}

.hero-tall { padding-block: clamp(40px, 9vw, 110px); }

.title-card {
  display: inline-block;
  max-width: 100%;
  padding: clamp(14px, 3vw, 28px) clamp(18px, 4vw, 44px);
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 26px;
  background: rgb(from var(--panel) r g b / 78%);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(2px);

  h1 {
    margin: 0;
    color: var(--title-grey);
    text-shadow: var(--emboss), -1px -1px 0 rgb(0 0 0 / 15%);
    &.blue { color: var(--blue-900); }
    &.white { color: var(--white); text-shadow: var(--text-shadow-dark); }
  }
}

.tagline {
  display: inline-block;
  max-width: 640px;
  margin: 20px auto 0;
  padding: .8em 1.4em;
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 18px;
  background: rgb(130 170 205 / 80%);
  color: var(--white);
  font-size: clamp(1.15rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 1px 1px 1px rgb(255 255 255 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
}


/* 8. Sections, cards and photos -------------------------------------------- */

.section { padding-block: clamp(28px, 5vw, 64px); }

/* Section with full-bleed background art (see section 10) */
.section-bg {
  position: relative;
  background-position: center;
  background-size: cover;
  > .wrap { position: relative; }
}

/* Translucent blue panel */
.card {
  padding: var(--gap);
  border: 2px solid var(--blue-500);
  border-radius: var(--radius);
  background: rgb(from var(--panel) r g b / 92%);
  color: var(--blue-900);
  box-shadow: var(--shadow);
  :is(h2, h3) { text-align: center; }
  p:last-child { margin-bottom: 0; }
}

.card-white {
  border-color: var(--blue-300);
  background: rgb(255 255 255 / 92%);
  color: var(--slate);
}

/* Framed photo */
.photo {
  overflow: hidden;
  border: var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  img { width: 100%; height: 100%; object-fit: cover; }
}

/* Long-form text panel used on the FAQ article pages and the job page */
.article {
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 78%);
  box-shadow: var(--shadow);
  h2 { font-size: clamp(1.3rem, 1rem + 1.3vw, 1.8rem); }
  .lede { font-size: 1.15rem; }
}

/* Article set in the sans-serif font instead of the handwritten one */
.article-sans :is(p, li) {
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 1.05rem;
}

.article-bg { background-position: center top; }

/* Two-column bullet list */
.list-cols {
  display: grid;
  gap: 0 32px;
  ul { margin-top: 0; }

  @media (width >= 720px) { grid-template-columns: 1fr 1fr; }
}

.quote {
  padding: 14px 18px;
  border-left: 5px solid var(--blue-500);
  border-radius: 0 12px 12px 0;
  background: rgb(from var(--panel) r g b / 50%);
  font-style: italic;
}

/* Centered call-to-action button row below content */
.cta { margin-top: 28px; text-align: center; }


/* 9. Footer ---------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(28px, 5vw, 56px);
  padding: 28px var(--gutter) 32px;
  background: var(--blue-300);
  color: var(--blue-950);
  a { color: inherit; }

  address { font-style: normal; line-height: 1.45; }
  .footer-contact a { text-decoration: none; }
}

.footer-inner {
  display: grid;
  align-items: center;
  gap: 22px;
  max-width: var(--max);
  margin-inline: auto;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
  img { flex: none; width: 76px; height: 76px; border-radius: 10px; box-shadow: var(--shadow); }
}

@media (width >= 900px) {
  .footer-inner { grid-template-columns: 1fr auto 1fr; text-align: left; }
  .footer-brand { justify-content: flex-start; }
  .footer-contact { text-align: right; }
}


/* 10. Background art -------------------------------------------------------
   One class per background image, used on .hero banners and .section-bg
   sections. Images are in assets/img/ (the build serves them as .webp). */

.bg-about-header       { background-image: url("../img/bg-about-header.webp"); }
.bg-bubbles-foam       { background-image: url("../img/bg-bubbles-foam.webp"); }
.bg-colorful-bubbles   { background-image: url("../img/bg-colorful-bubbles.webp"); }
.bg-dark-bubbles       { background-image: url("../img/bg-dark-bubbles.webp"); }
.bg-faq-header         { background-image: url("../img/bg-faq-header.webp"); }
.bg-gradient-bubbles   { background-image: url("../img/bg-gradient-bubbles.webp"); }
.bg-gradient-clouds    { background-image: url("../img/bg-gradient-clouds.webp"); }
.bg-insurance-clouds   { background-image: url("../img/bg-insurance-clouds.webp"); }
.bg-iridescent         { background-image: url("../img/bg-iridescent.webp"); }
.bg-jobs-header        { background-image: url("../img/bg-jobs-header.webp"); }
.bg-milestones-bubbles { background-image: url("../img/bg-milestones-bubbles.webp"); }
.bg-milestones-header  { background-image: url("../img/bg-milestones-header.webp"); }
.bg-resources-bokeh    { background-image: url("../img/bg-resources-bokeh.webp"); }
.bg-services-bubbles   { background-image: url("../img/bg-services-bubbles.webp"); }
.bg-team-header        { background-image: url("../img/bg-team-header.webp"); }

/* A page's "background" metadata puts one image behind the banner and the body together
   (<main class="page-bg bg-...">): separate copies on each are sized differently and leave a seam. */
.page-bg {
  background-position: center top;
  background-size: cover;
  .hero { background: none; }
}


/* 11. Page-specific styles ------------------------------------------------- */

/* Home: sky banner, bluebonnet field, photo carousel */

.home-hero {
  background: url("../img/home-hero-clouds.webp") center / cover, linear-gradient(#cfdfee, #e9f1f8);

  .brand-title {
    margin: 0;
    color: var(--blue-900);
    font-size: clamp(2.4rem, 1.6rem + 4vw, 3.6rem);
    text-shadow: 0 0 6px #fff, 0 0 12px #fff;
  }
}

.home-body {
  padding-block: clamp(24px, 4vw, 48px);
  background: url("../img/home-bluebonnets.webp") center top / cover no-repeat;

  .card {
    background: rgb(160 195 225 / 88%);
    color: var(--blue-950);
    font-size: 1.15rem;
    text-align: center;
    p:not(:last-child) { margin-bottom: 1.1em; }
  }
}

/* Photo carousel: a horizontally scrolling, snapping row of photos.
   One photo per view on phones, two from 720px. Prev/next buttons are
   wired up in main.js; swiping and scrolling work without JavaScript. */
.gallery {
  position: relative;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.gallery-track {
  display: flex;
  gap: 14px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;  /* snap points line up with the 2px padding, so nothing snap-scrolls on load */
  scroll-behavior: smooth;
  scrollbar-width: thin;

  figure {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border: var(--frame);
    border-radius: var(--radius);
    background: #dbe7f1;
    box-shadow: var(--shadow);
    scroll-snap-align: start;

    @media (width >= 720px) { flex-basis: calc(50% - 7px); }  /* 7px = half the gap */
  }

  img { width: 100%; height: 100%; object-fit: cover; }

  figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: .4em .8em;
    background: color-mix(in srgb, var(--blue-900) 55%, transparent);
    color: var(--white);
    font-size: .95rem;
  }
}

.gallery-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue-900) 75%, transparent);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  translate: 0 -50%;
  &:hover { background: var(--blue-900); }
  &.prev { left: 8px; }
  &.next { right: 8px; }
}

/* About Us: intro panel, then photo + text bands that alternate sides */

.about-intro {
  color: var(--blue-900);
  font-size: 1.2rem;
  text-align: center;
}

.about-band {
  display: grid;
  align-items: stretch;

  .band-photo img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 520px;
    object-fit: cover;
  }

  .band-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 56px) var(--gutter);
    background: var(--blue-100);
    text-align: center;
    h2 { color: var(--title-grey); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); text-shadow: var(--emboss); }
    p { max-width: 52ch; margin-inline: auto; color: var(--teal-grey); font-family: var(--font-sans); font-size: 1.2rem; }
  }

  @media (width >= 720px) {
    grid-template-columns: 1fr 1fr;
    &.flip .band-photo { order: 1; }
  }
}

/* Getting Started: three steps, then the "Level Up Advantage" blobs */

.started-hero { background: linear-gradient(#cfe0ee, var(--blue-100)); }
.steps-bg { background-color: #d6e6f2; background-image: url("../img/bg-sea-1.webp"); }
.advantage-bg { background-color: #d6e6f2; background-image: url("../img/bg-sea-2.webp"); }

.step {
  padding: 22px 20px;
  border: 2px solid var(--blue-500);
  border-radius: var(--radius);
  background: rgb(from var(--mint) r g b / 92%);
  color: var(--blue-900);
  font-size: 1.15rem;
  text-align: center;
  box-shadow: var(--shadow);
  h2 { color: var(--teal-grey); font-size: 1.5rem; text-shadow: var(--emboss); }
}

.band-title {
  padding: 18px var(--gutter);
  background: linear-gradient(rgb(from var(--blue-300) r g b / 85%), rgb(from var(--mint) r g b / 85%));
  text-align: center;
  h2 { margin: 0; color: var(--title-grey); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); text-shadow: var(--emboss); }
}

/* Hand-drawn-looking rounded shapes; every 2nd and 3rd one is shaped differently */
.blob {
  padding: 26px 24px;
  border: 2px solid var(--slate-400);
  border-radius: 46% 54% 52% 48% / 42% 46% 54% 58%;
  background: rgb(161 190 215 / 90%);
  color: var(--slate);
  font-size: 1.1rem;
  text-align: center;
  box-shadow: var(--shadow);
  &:nth-child(2n) { border-radius: 54% 46% 44% 56% / 56% 48% 52% 44%; }
  &:nth-child(3n) { border-radius: 48% 52% 58% 42% / 50% 60% 40% 50%; }
  h3 { margin-bottom: .35em; color: var(--slate); font-size: 1.3rem; }
  p { margin: 0; }
}

/* Our Services: mint cards with a round blue badge on top */

.service {
  position: relative;
  margin-top: 36px;
  padding: 56px 24px 28px;
  border-radius: var(--radius);
  background: rgb(from var(--mint-light) r g b / 94%);
  color: var(--slate);
  font-size: 1.1rem;
  text-align: center;
  box-shadow: var(--shadow);

  &::before {
    content: "";
    position: absolute;
    top: -36px;
    left: 50%;
    width: 72px;
    aspect-ratio: 1;
    border: 4px solid rgb(255 255 255 / 80%);
    border-radius: 50%;
    background: var(--blue-600);
    translate: -50%;
  }

  h2 { color: var(--teal-grey); text-shadow: var(--emboss); }
}

/* Insurance: clouds banner, logo grid, Q&A blocks */

.insurance-hero { background-image: url("../img/bg-clouds-overlay.webp"), url("../img/bg-insurance-clouds.webp"); }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;

  @media (width >= 720px) { grid-template-columns: repeat(3, 1fr); }

  @media (width >= 900px) { grid-template-columns: repeat(4, 1fr); }

  li {
    display: grid;
    place-items: center;
    min-height: 96px;
    padding: 16px;
    border-radius: 14px;
    background: rgb(255 255 255 / 90%);
    box-shadow: var(--shadow);
  }

  img { width: auto; max-height: 60px; object-fit: contain; }
}

.faq-block {
  margin-bottom: 20px;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 72%);
  h2 { color: var(--teal-grey); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); }
  p { color: var(--slate); font-family: var(--font-sans); font-size: 1.05rem; }
}

/* FAQ's landing page: one card per article */

.faq-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 3px solid var(--slate-500);
  border-radius: 10px;
  background: rgb(228 240 250 / 95%);
  text-align: center;
  box-shadow: var(--shadow);
  h2 { margin: 0; color: var(--slate); font-family: var(--font-hand); font-size: 1.35rem; }
  img { width: 160px; height: 160px; object-fit: contain; }
  .btn { margin-top: auto; }  /* buttons line up along the bottom of each row */
}

/* Developmental Milestones: one box per age */

.milestone {
  padding: 18px;
  border: 2px solid var(--blue-300);
  border-radius: 14px;
  background: rgb(255 255 255 / 82%);
  h3 { color: var(--blue-900); font-family: var(--font-hand); font-size: 1.25rem; }
  ul { margin: 0; padding-left: 1.2em; font-family: var(--font-sans); font-size: 1rem; }
  li { margin-bottom: .3em; }
}

/* Resources and Scholarship & Grant Programs: lists of links on white tiles */

.resource-list, .scholar-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  li { padding: 14px 16px; border-radius: 12px; background: rgb(255 255 255 / 85%); }
}

.resource-list {
  h2 { margin: 0 0 .25em; color: var(--slate); font-family: var(--font-display); font-size: 1.05rem; }
  p { margin: 0; font-size: 1rem; }
  a { font-family: var(--font-sans); font-size: .98rem; word-break: break-all; }
}

.scholar-list {
  gap: 12px;

  @media (width >= 720px) { grid-template-columns: 1fr 1fr; }
  li { background: rgb(255 255 255 / 82%); color: var(--slate); font-family: var(--font-sans); }
  strong { display: block; margin-bottom: 4px; font-size: .98rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
  a { font-size: 1rem; }
}

/* Team */

.team-bg { background: var(--mint-light); }

.member {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
  img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  figcaption { flex: 1; padding: 14px 16px; background: var(--mint); }
  strong { display: block; color: var(--slate); font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; }
  span { color: var(--teal-grey); font-size: 1rem; }
}

/* Contact Us: info row, form, map */

.contact-hero { background: radial-gradient(ellipse at center, #b9d6ea 0%, #7fa8c8 100%); }

.contact-info {
  background: var(--mint-light);
  text-align: center;
  h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 1.5rem; }
  svg { width: 26px; height: 26px; }
  p { margin: 0; color: var(--blue-900); font-size: 1.25rem; line-height: 1.6; }
  a { text-decoration: none; }
}

.contact-grid {
  display: grid;
  align-items: start;
  gap: 24px;

  @media (width >= 900px) { grid-template-columns: 1fr 1fr; }
}

.form-card, .map-card {
  border-radius: var(--radius);
  background: rgb(255 255 255 / 95%);
  box-shadow: var(--shadow);
}

.form-card {
  padding: clamp(18px, 3vw, 30px);
  h2 { font-size: 1.45rem; text-align: center; }
}

.form-grid {
  display: grid;
  gap: 12px 16px;

  @media (width >= 720px) {
    grid-template-columns: 1fr 1fr;
    .full { grid-column: 1 / -1; }
  }
}

.field {
  &:is(fieldset) { margin: 0; padding: 0; border: 0; }

  :is(label, legend) {
    display: block;
    margin-bottom: 4px;
    color: var(--blue-900);
    font-size: 1.05rem;
  }

  legend { margin-bottom: 6px; }

  :is(input, select, textarea) {
    width: 100%;
    min-height: 44px;
    padding: .55em .8em;
    border: 2px solid var(--blue-500);
    border-radius: 12px;
    background: var(--blue-300);
    color: var(--blue-950);
    font: inherit;
    font-size: 1.05rem;
    &::placeholder { color: #4d7aa3; opacity: .9; }
    &:focus { outline: 3px solid color-mix(in srgb, var(--blue-900) 35%, transparent); outline-offset: 1px; }
  }

  textarea { resize: vertical; }
  textarea:not([rows]) { min-height: 130px; }
}

/* Address suggestions under the Home Address field (main.js) */
.address-field {
  position: relative;

  .suggestions {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 10;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    border: 2px solid var(--blue-500);
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow);
  }

  [role="option"] {
    padding: .5em .7em;
    border-radius: 8px;
    color: var(--blue-950);
    font-family: var(--font-sans);
    font-size: 1rem;
    cursor: pointer;
    &:is(:hover, [aria-selected="true"]) { background: var(--blue-100); }
  }
}

/* Date of birth: a typing field plus a calendar button that opens the browser's date picker (main.js).
   The real <input type="date"> sits invisibly under the button so the picker opens next to it. */
.date-field {
  position: relative;
  display: flex;
  gap: 8px;

  .calendar-btn {
    flex: none;
    width: 48px;
    border: 2px solid var(--blue-500);
    border-radius: 12px;
    background: var(--blue-300);
    color: var(--blue-950);
    cursor: pointer;
    svg { width: 24px; height: 24px; }
    &:hover { background: var(--blue-200); }
  }

  .field & .date-picker {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48px;
    min-height: 0;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* "Services Interested In" checkboxes */
.checks {
  display: grid;
  gap: 8px;
  label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--blue-900); font-size: 1.05rem; }
  input { width: 22px; height: 22px; accent-color: var(--blue-700); }
}

.form-actions { margin-top: 8px; text-align: center; }
.form-note { margin: 10px 0 0; color: var(--teal-grey); font-size: .95rem; text-align: center; }

/* Message shown after Send (set by main.js) */
.form-status {
  margin-top: 10px;
  font-size: 1.05rem;
  text-align: center;
  &.ok { color: var(--success); }
  &.err { color: var(--error); }
}

.map-card {
  padding: 10px;
  background: rgb(255 255 255 / 90%);
  iframe { display: block; width: 100%; height: 380px; border: 0; border-radius: 12px; }
  p { margin: 10px 4px 2px; text-align: center; }
}

/* Jobs: listing card and job detail page */

.jobs-hero h1 { color: var(--white); text-shadow: var(--text-shadow-dark); }

.job-card {
  display: grid;
  gap: 10px;
  padding: 24px;
  border: 2px solid var(--blue-500);
  border-radius: 20px;
  background: rgb(255 255 255 / 95%);
  box-shadow: var(--shadow);
  h2 { margin: 0; color: var(--slate); font-family: var(--font-hand); font-size: 1.5rem; }
  .loc { margin: 0; color: var(--blue-900); }
  .btn { justify-self: start; }

  /* Wider screens: title and details on the left, button on the right */
  @media (width >= 720px) {
    grid-template-columns: 1fr auto;
    align-items: center;
    :is(h2, .loc) { grid-column: 1; }
    .btn { grid-column: 2; grid-row: 1 / span 2; }
  }
}

.jobs-count {
  display: inline-block;
  margin-top: 18px;
  padding: .4em 1.2em;
  border: 2px solid var(--blue-300);
  border-radius: 999px;
  background: rgb(255 255 255 / 80%);
  color: var(--teal-grey);
}

.job-meta {
  margin-bottom: 1em;
  color: var(--blue-900);
  strong { color: var(--slate); }
}

.job .article h2 { color: var(--slate); font-family: var(--font-hand); font-size: 1.45rem; }

/* :where() keeps this low-specificity so utilities like .fine-print still apply */
:where(.job .article) :is(p, li) { font-family: var(--font-sans); font-size: 1.05rem; }

.back-link { display: inline-block; margin-bottom: 14px; text-decoration: none; }


/* 12. Utilities ------------------------------------------------------------ */

.sans { font-family: var(--font-sans); font-weight: 400; }
.text-center { text-align: center; }
.fine-print { font-size: .95rem; }
.rounded { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  html, .gallery-track { scroll-behavior: auto; }
  .btn { transition: none; }
}