@charset "UTF-8";
/* ==========================================================================
   The Address Allied Services — design system
   Replaces a 1,026 KB theme bundle. Tokens taken from the live site:
   brand #5AAD9C, ink #1b1b1b, body #888, headings "Avenue", body "Open Sans".
   ========================================================================== */

/* --- Fonts (self-hosted; no external requests) ---------------------------- */

@font-face {
  font-family: "Avenue";
  src: url("/assets/fonts/Avenue-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Open Sans v44 ships as a variable font, so one file covers 300–700. */
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --brand: #5aad9c;
  --brand-dark: #4a9686;
  --brand-light: #eaf4f1;

  --ink: #1b1b1b;
  --ink-soft: #2a2a2a;
  --body: #888888;
  --muted: #666666;
  --faint: #aaaaaa;

  --white: #ffffff;
  --off-white: #f9f9f9;
  --grey-100: #f7f7f7;
  --grey-200: #ebebeb;
  --border: #e6e6e6;

  /* Ninja Forms' default required-field red, confirmed on the live site. */
  --danger: #e80000;

  --font-heading: "Avenue", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container: 1170px;
  --container-narrow: 820px;
  --gutter: 15px;

  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 2px 8px rgba(27, 27, 27, 0.06);
  --shadow: 0 8px 30px rgba(27, 27, 27, 0.1);
  --shadow-lg: 0 18px 50px rgba(27, 27, 27, 0.14);

  --transition: 0.25s ease;

  --header-h: 100px;
}

/* --- Reset ---------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--brand-dark);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Visible focus for keyboard users only — the theme it replaces had none. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* --- Typography ----------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 {
  font-size: 54px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 15px;
}

p {
  margin: 0 0 20px;
}

/* The live site keeps heading sizes fixed across desktop widths and only
   steps them down at real mobile breakpoints — not a continuously fluid
   scale, so headings never render smaller than the live site on any
   ordinary desktop window. */
@media (max-width: 600px) {
  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 22px;
  }
}

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 600;
  color: var(--muted);
}

blockquote {
  margin: 30px 0;
  padding: 20px 30px;
  border-left: 3px solid var(--brand);
  background: var(--grey-100);
  font-style: italic;
  color: var(--muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* Eyebrow label above section headings. */
.eyebrow {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}

.lead {
  font-size: 18px;
  line-height: 1.7;
}

/* Scroll reveal — applied by site.js via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.text-center {
  text-align: center;
}

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: 1400px;
}

/* Reading-width column for long-form copy — matches live's ~975px content
   box (a 10/12-column offset row on both the blog post template and the
   About page's intro section), wider than --container-narrow which is used
   for the shorter static-page copy blocks. */
.container--copy {
  max-width: 975px;
}

.section {
  padding: 90px 0;
}

.section--tight {
  padding: 60px 0;
}

.section--loose {
  padding: 120px 0;
}

.section--grey {
  background: var(--grey-100);
}

.section--dark {
  background: var(--ink);
  color: var(--faint);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}

.section__head {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}

.section__head p {
  color: var(--body);
}

.grid {
  display: grid;
  gap: 30px;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 60px 0;
  }

  .section--loose {
    padding: 70px 0;
  }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 18px 42px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}

.btn--outline:hover {
  background: var(--brand);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn--light:hover {
  background: transparent;
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn--sm {
  padding: 12px 26px;
  font-size: 11px;
}

.btn--block {
  display: block;
  width: 100%;
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(27, 27, 27, 0.07);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  padding: 12px 0;
}

.site-logo {
  display: block;
  flex-shrink: 0;
}

.site-logo img {
  width: auto;
  max-height: 74px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--transition);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width var(--transition);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--brand);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  width: 100%;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px) {
  .nav-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .main-nav[data-open="true"] {
    max-height: 70vh;
    overflow-y: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--gutter);
  }

  .main-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--grey-200);
  }

  .main-nav li:last-child a {
    border-bottom: 0;
  }

  .main-nav a::after {
    display: none;
  }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  /* Deep bottom padding: the wings block below is pulled up over this area,
     so the hero photo stays visible on both sides of it, as on the live site. */
  padding: 160px 0 420px;
  background: var(--ink) center / cover no-repeat;
  color: var(--white);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 27, 0.45);
}

.hero > .container {
  position: relative;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 24px;
}

.hero__lead {
  max-width: 760px;
  margin: 0 auto 38px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: var(--white);
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 900px) {
  .hero {
    padding: 120px 0 220px;
  }

  .hero__lead {
    font-size: 17px;
  }
}

/* Compact hero for interior pages — title + lead + breadcrumb over a photo,
   confirmed against the live site's ".t-w" page-banner component. */
.page-hero {
  position: relative;
  padding: 150px 0 180px;
  background: var(--ink) center / cover no-repeat;
  color: var(--white);
  text-align: left;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 49, 57, 0.45);
}

.page-hero > .container {
  position: relative;
}

.page-hero h1 {
  max-width: 780px;
  color: var(--white);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.page-hero p {
  max-width: 780px;
  margin: 0;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.9);
}

.page-hero__breadcrumb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.page-hero__breadcrumb a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .page-hero {
    padding: 120px 0 100px;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  .page-hero p {
    font-size: 16px;
  }

  .page-hero__breadcrumb {
    bottom: 30px;
  }
}

/* --- Split panels (Mental Health Wing / Education Wing) -------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}

.split__media {
  min-height: 420px;
  background: var(--grey-200) center / cover no-repeat;
}

.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 15% 70px;
}

/* Live-site panel type: 30px Avenue heading, 18px Avenue muted description. */
.split__body h2 {
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 1.4;
}

.split__body p {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.6;
  color: var(--faint);
}

.split__body .btn {
  margin-top: 40px;
}

.split__body--light {
  background: var(--white);
}

.split__body--dark {
  background: var(--ink);
  color: var(--faint);
}

.split__body--dark h2,
.split__body--dark h3 {
  color: var(--white);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split__media {
    min-height: 260px;
  }

  .split__body {
    padding: 60px var(--gutter);
  }
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.card__media {
  aspect-ratio: 16 / 10;
  background: var(--grey-100);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
}

.card__title {
  margin-bottom: 12px;
  font-size: 21px;
}

.card__title a {
  color: var(--ink);
}

.card__title a:hover {
  color: var(--brand);
}

.card__meta {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.card__excerpt {
  flex: 1;
  margin-bottom: 20px;
}

/* --- Testimonials ----------------------------------------------------------
   One slide visible at a time on a dark photo backdrop, matching the live
   site's carousel — not a card grid. Lives inside .blog-band, so it inherits
   that section's background photo + overlay. */

.testimonial-slider {
  position: relative;
  margin: 0 auto 20px;
  padding: 0 56px;
}

.testimonial-slider__track {
  position: relative;
  min-height: 230px;
}

.testimonial-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.testimonial-slide.is-active {
  display: flex;
}

.testimonial-slide.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-slide__avatar {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  object-fit: cover;
}

.testimonial-slide__quote {
  margin: 0 0 26px;
  padding: 0;
  border-left: 0;
  background: none;
  font-size: 21px;
  font-style: normal;
  line-height: 1.6;
  color: var(--white);
}

.testimonial-slide__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
}

.testimonial-slide__name--secondary {
  margin-top: 2px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.testimonial-slide__role {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.testimonial-slider__arrow {
  position: absolute;
  top: 46px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition), background var(--transition);
}

.testimonial-slider__arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

.testimonial-slider__arrow--prev {
  left: 0;
}

.testimonial-slider__arrow--next {
  right: 0;
}

.testimonial-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.testimonial-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.testimonial-slider__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.testimonial-slider__dot.is-active {
  background: var(--white);
  transform: scale(1.3);
}

/* --- Blog ----------------------------------------------------------------- */

.post-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 46px;
}

.post-filters a {
  padding: 9px 22px;
  border: 1px solid var(--border);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.post-filters a:hover,
.post-filters a[aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.post-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
}

.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  margin-top: 38px;
}

.post-body img {
  border-radius: var(--radius-lg);
  margin: 26px 0;
}

.post-body ul,
.post-body ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.post-body li {
  margin-bottom: 10px;
}

.post-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-header {
  margin-bottom: 30px;
  text-align: center;
}

/* Live's single-post title is a much smaller 32px — the generic 54px h1 is
   sized for hero banners, not running body copy, and was the single biggest
   contributor to the page reading tall before any article text appeared. */
.post-header h1 {
  margin-bottom: 14px;
  font-size: 32px;
  line-height: 1.4;
}

.post-header__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.post-header__meta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.post-header__divider {
  width: 1px;
  height: 14px;
  background: var(--border);
}

/* Compact share row — icon-only, so it costs almost no vertical space next
   to the post meta. Not on the live site; a new addition. */
.post-share {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-share__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.post-share__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.post-share__link svg {
  width: 14px;
  height: 14px;
}

.post-share__link:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

@media (max-width: 480px) {
  .post-header h1 {
    font-size: 26px;
  }

  /* The meta line and share icons wrap to their own rows at this width —
     the divider between them stops making sense once they're stacked. */
  .post-header__divider {
    display: none;
  }

  .post-share__link {
    width: 32px;
    height: 32px;
  }
}

.post-featured {
  margin-bottom: 44px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.post-featured img {
  width: 100%;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 55px;
}

.pagination a,
.pagination span {
  min-width: 44px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.pagination a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.pagination [aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* --- Forms ---------------------------------------------------------------- */

.form-field {
  margin-bottom: 22px;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.required {
  color: var(--danger);
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 15px;
  color: var(--muted);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(90, 173, 156, 0.15);
}

.form-control[aria-invalid="true"] {
  border-color: #d9534f;
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.form-error {
  margin-top: 6px;
  font-size: 13px;
  color: #d9534f;
}

.form-hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--faint);
}

/* Honeypot: hidden from people, reachable by naive bots. */
.form-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.alert {
  padding: 16px 20px;
  margin-bottom: 26px;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: 15px;
}

.alert--success {
  background: var(--brand-light);
  border-color: var(--brand);
  color: #2f6f61;
}

.alert--error {
  background: #fdf1f1;
  border-color: #d9534f;
  color: #a33;
}

/* --- Contact / info blocks ------------------------------------------------ */

.info-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-200);
}

.info-list li:last-child {
  border-bottom: 0;
}

.info-list dt,
.info-list__label {
  font-weight: 600;
  color: var(--ink);
}

/* --- Footer ----------------------------------------------------------------
   The live site's footer is a WHITE panel with grey body text — not a dark
   band. Confirmed from the theme's own CSS (.main-f-top{background:#fff}).
   ----------------------------------------------------------------------- */

.site-footer {
  padding: 75px 0 0;
  background: var(--white);
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
}

.site-footer h6 {
  margin-bottom: 26px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.site-footer a {
  font-family: var(--font-heading);
  color: var(--muted);
}

/* Quick Links renders larger than the Contact Us column beside it — confirmed
   against live (16px vs the footer's base 14px). */
.site-footer__links a {
  font-size: 16px;
}

.site-footer a:hover {
  color: var(--brand);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1.2fr;
  gap: 60px;
  padding-bottom: 55px;
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .site-footer__logo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__logo img {
  width: auto;
  max-height: 80px;
  margin-bottom: 22px;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer ul li {
  margin-bottom: 16px;
  line-height: 1.5;
}

.site-footer ul li a {
  text-decoration: underline;
}

.site-footer__follow {
  margin-top: 30px;
  margin-bottom: 20px;
}

.site-footer__bottom {
  padding: 22px 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}

.social {
  display: flex;
  gap: 10px;
}

.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}

.social a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* --- CTA strip ------------------------------------------------------------ */

/* --- Wings + mission statement (light-grey band) --------------------------
   The two split panels and the mission statement share one continuous
   background on the live site, so they are not separate <section>s here.
   ----------------------------------------------------------------------- */

.wings {
  display: block;
}

/* The two split panels sit in a centered, container-width block that is
   pulled up over the hero, leaving the hero photo (top) and the grey band
   (bottom) visible on both sides — not full-bleed. */
.wings__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: calc(100% - 2 * var(--gutter));
  margin: -300px auto 0;
}

@media (max-width: 900px) {
  .wings__inner {
    margin-top: -140px;
  }
}

.mission-statement {
  padding: 70px var(--gutter) 90px;
  text-align: center;
}

.mission-statement h3 {
  max-width: 1140px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 1.8;
  color: var(--ink);
}

@media (max-width: 600px) {
  .mission-statement h3 {
    font-size: 18px;
  }
}

/* --- "About Us." card on a background photo -------------------------------
   A rounded dark card, roughly half-width, overlaid on an ambient photo —
   not a full-bleed dark CTA.
   ----------------------------------------------------------------------- */

.about-band {
  padding: 150px 0;
  background: var(--ink) center / cover no-repeat;
}

.about-band__card {
  max-width: 500px;
  padding: 60px;
  background: var(--ink);
  border-radius: var(--radius-lg);
}

.about-band__title {
  margin-bottom: 20px;
  font-size: 22px;
  color: var(--brand);
}

.about-band__text1 {
  margin-bottom: 22px;
  color: var(--white);
  font-size: 16px;
}

.about-band__rule {
  width: 20px;
  height: 2px;
  margin: 0 0 22px;
  background: var(--brand);
  border: 0;
}

.about-band__text2 {
  margin-bottom: 28px;
  color: var(--faint);
}

@media (max-width: 640px) {
  .about-band {
    padding: 80px 0;
  }

  .about-band__card {
    padding: 36px 26px;
  }
}

/* --- "Our Blogs" band: photo background + dark overlay --------------------- */

/* --- Testimonials section: photo background with dark overlay --------------- */

.testimonial-band {
  position: relative;
  padding: 100px 0;
  background: var(--ink) center / cover no-repeat fixed;
}

.testimonial-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 49, 57, 0.75);
}

.testimonial-band > .container {
  position: relative;
}

/* --- Blog section: white background ----------------------------------------- */

.blog-band {
  position: relative;
  padding: 100px 0;
  background-color: var(--white);
}

.blog-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

.blog-band > .container {
  position: relative;
}

.blog-band__title {
  margin-bottom: 46px;
  color: var(--ink);
  text-align: center;
}

/* --- Contact strip: minimal, no card, no CTA button ------------------------ */

.contact-strip {
  text-align: left;
}

.contact-strip h3 {
  margin-bottom: 8px;
}

.contact-strip__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--faint);
}

.contact-strip__text a {
  color: var(--brand);
  font-weight: 600;
}

/* --- Floating WhatsApp (present on the live site) ------------------------- */

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}

.whatsapp-float:hover {
  transform: scale(1.07);
  color: var(--white);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }
}

/* --- Error pages ---------------------------------------------------------- */

.error-page {
  padding: 130px 0;
  text-align: center;
}

.error-page__code {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 96px;
  line-height: 1;
  color: var(--brand);
}

.error-page__title {
  margin-bottom: 14px;
}

.error-page__text {
  margin-bottom: 34px;
}

.error-page__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.error-page__debug {
  margin-top: 50px;
  padding: 24px;
  background: var(--grey-100);
  border-radius: var(--radius);
  text-align: left;
}

.error-page__debug pre {
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.6;
}

/* --- Utilities ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--brand);
  color: var(--white);
}

.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-30 {
  margin-bottom: 30px;
}

.stack > * + * {
  margin-top: 18px;
}

/* --- About Us page --------------------------------------------------------- */

.about-intro {
  padding: 150px 0;
}

.about-intro__lead {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 20px;
}

.about-intro__text {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.6;
  color: var(--faint);
}

.about-intro__lead p,
.about-intro__text p {
  margin: 0;
}

/* Know Your Therapist / Our Values: a photo column paired with a text column,
   both sharing the section's grey background. */
.about-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  min-height: 560px;
}

.about-split--reverse {
  grid-template-columns: 1fr 1fr;
}

.about-split--reverse .about-split__media {
  order: 2;
}

.about-split__media {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 320px;
}

.about-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 70px;
}

.about-split__body h4 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 25px;
}

.about-split__bio {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.6;
  color: var(--faint);
}

.about-split__bio p {
  margin: 0 0 16px;
}

.about-split__bio p:last-child {
  margin-bottom: 0;
}

.about-split__bio hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.about-split__bio strong {
  color: var(--ink);
}

@media (max-width: 900px) {
  .about-split,
  .about-split--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-split--reverse .about-split__media {
    order: 0;
  }

  .about-split__body {
    padding: 60px 30px;
  }

  .about-split__body h4 {
    font-size: 24px;
  }
}

/* Mental Health Wing / Education Wing centered icon cards. */
.about-cards {
  padding: 150px 0;
}

.about-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.about-card {
  display: block;
  text-align: center;
  color: inherit;
  padding: 27px 30px 0;
}

.about-card__icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  color: var(--brand);
}

.about-card__icon svg {
  width: 100%;
  height: 100%;
}

.about-card__title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 15px;
}

.about-card__desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--brand);
}

@media (max-width: 700px) {
  .about-cards {
    padding: 90px 0;
  }

  .about-cards__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

/* Closing CTA band — a light mint background, distinct from every other CTA
   on the site (confirmed against the live page; not a copy-paste error). */
.about-cta {
  padding: 150px 0;
  background: #a8d0c8;
  color: var(--white);
}

.about-cta__eyebrow {
  color: var(--white);
}

.about-cta h2 {
  color: var(--white);
  margin-bottom: 20px;
}

.about-cta p {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 30px;
}

.about-cta__btn {
  padding: 15px 30px;
  background: #00c389;
  border-color: #00c389;
  color: var(--white);
}

.about-cta__btn:hover {
  background: var(--white);
  border-color: var(--white);
  color: #485cc7;
}

/* --- Contact Us page -------------------------------------------------------- */

.contact-hero {
  display: flex;
  align-items: center;
  min-height: 90vh;
  padding: 160px 0 100px;
  background: var(--ink) center / cover no-repeat;
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.contact-hero__info h1 {
  color: var(--white);
  font-size: 48px;
  margin-bottom: 40px;
}

.contact-hero__field {
  margin-bottom: 30px;
}

.contact-hero__label {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.contact-hero__field h5 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
}

.contact-hero__field h5 a {
  color: var(--white);
}

.contact-hero__social {
  margin-top: 40px;
}

.contact-hero__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  color: var(--white);
}

.contact-hero__social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* A light, opaque form so it stays legible over the photo. */
.contact-hero__form .form-field label {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.contact-hero__form .form-control {
  background: var(--grey-100);
  border: 1px solid #c4c4c4;
  border-radius: 0;
  color: #6b6b6b;
}

.contact-hero__form .form-hint {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 900px) {
  .contact-hero {
    min-height: 0;
    padding: 120px 0 80px;
  }

  .contact-hero__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-hero__info h1 {
    font-size: 34px;
  }
}

/* Register-for-X cards below the hero — plain text, no card chrome. */
.contact-register {
  padding-top: 90px;
}

.contact-register__card h6 {
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-bottom: 15px;
}

.contact-register__card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 10px;
}

.contact-register__card a {
  font-size: 14px;
}

/* --- Mental Health Wing: alternating photo/text service rows ---------------
   Each counselling service is its own full-width band (photo ~2/3, text
   ~1/3) — confirmed against the live page, not a card grid. ------------- */

/* Text is the narrow column, the photo is the wide one — confirmed as a
   4/12 vs 8/12 split on the live page. `order` (not DOM position) decides
   left/right, so it doesn't matter which element the partial writes first. */
.service-split {
  display: grid;
  box-sizing: border-box;
  /* The live row itself is inset 15px each side before its two columns are
     even split (its own "stretch row" gutter, separate from the 15px each
     column then applies to itself below) — confirmed by the numbers: live's
     outer column widths only match a 4:8 split of (row width − 30), not of
     the full row width. */
  padding: 15px;
  /* Set per-instance by the template — live sizes each row individually
     rather than sharing one fixed ratio. The two tracks touch directly
     (no grid gap) — the visible 30px gap between the photo and text comes
     from each column's own 15px horizontal padding below, exactly like
     live's DOM (confirmed in DevTools: outer columns are adjacent, the
     inset is per-column, not a gap between them). */
  grid-template-columns: var(--text-fr, 1fr) var(--media-fr, 2fr);
  align-items: stretch;
}

.service-split__body {
  order: 1;
}

.service-split__media {
  order: 2;
}

.service-split--reverse {
  grid-template-columns: var(--media-fr, 2fr) var(--text-fr, 1fr);
}

.service-split--reverse .service-split__media {
  order: 1;
}

.service-split--reverse .service-split__body {
  order: 2;
}

/* Outer column: just the 15px-per-side gutter inset, confirmed against
   live's ".vc_column-gap-30 > .vc_column_container { padding: 15px }" —
   horizontal only, so it doesn't disturb the row's own height. */
.service-split__media,
.service-split__body {
  display: flex;
  box-sizing: border-box;
  padding: 0 15px;
}

.service-split__media-inner {
  width: 100%;
  /* Flex-stretched (default align-items) by the outer column above to
     match the row's height; this padding is what sets that height in
     the first place when the row has no taller sibling to match. */
  padding: 250px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.service-split__body-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 80px 70px;
  background: var(--grey-100);
  box-sizing: border-box;
}

.service-split__body h4 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.33;
  color: var(--brand);
  margin-bottom: 20px;
}

.service-split__summary {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 20px;
}

.service-split__specs p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--body);
  margin: 0 0 14px;
}

.service-split__cta {
  display: inline-block;
  font-size: 14px;
  color: var(--brand);
}

.service-split__rule {
  display: block;
  width: 150px;
  height: 5px;
  margin-top: 20px;
  background: var(--brand);
}

@media (max-width: 900px) {
  .service-split,
  .service-split--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Stacked single-column layout — the column-gutter inset only makes
     sense side-by-side, so it's dropped rather than left as dead margin. */
  .service-split__media,
  .service-split__body {
    padding: 0;
  }

  .service-split__media,
  .service-split--reverse .service-split__media {
    order: 1;
  }

  .service-split__body,
  .service-split--reverse .service-split__body {
    order: 2;
  }

  .service-split__body-inner {
    padding: 50px 30px;
  }
}

/* --- Workshops & Internships: "Apply Now!" ---------------------------------
   A light mint band embedded on the page itself — confirmed against live,
   distinct from every other mint/CTA background on the site. ------------- */

.workshops-apply {
  padding: 50px 0 80px;
  background: #d7ebe7;
}

.workshops-apply__title {
  margin-bottom: 30px;
  font-size: 36px;
  text-align: center;
  color: var(--ink);
}

/* --- Workshops Registration -------------------------------------------- */

.workshop-registration__form {
  max-width: 780px;
  margin: 0 auto;
}

.form-required-note {
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--body);
}

.form-checklist-label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.form-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
}

.form-checklist input[type="checkbox"] {
  margin-top: 4px;
}

.btn--dark {
  background: #333333;
  border-color: #333333;
  color: var(--grey-100);
}

.btn--dark:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* --- Blog post comments ----------------------------------------------------
   Matches the live site's "N thoughts" / "Leave a Reply" section — a plain
   avatar + name + date list, no card chrome. -------------------------- */

.comments {
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid var(--border);
}

.comments__heading {
  margin-bottom: 30px;
  font-size: 24px;
}

.comments__list {
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

.comment {
  display: flex;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--border);
}

.comment__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.comment__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.comment__author {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--ink);
}

.comment__date {
  font-size: 13px;
  color: var(--faint);
}

.comment__content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.comment-form__heading {
  margin-bottom: 30px;
  font-size: 24px;
}

/* Comment form: the site's marketing forms use a boxed input style, but the
   live blog comment form is WordPress's native underline style — reproduced
   here scoped to .comment-form so the other forms are untouched. */
.comment-form .form-field {
  margin-bottom: 26px;
}

.comment-form .form-field label {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--faint);
}

.comment-form .required {
  color: inherit;
}

.comment-form .form-control {
  padding: 8px 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 0 #eee;
}

.comment-form .form-control:focus {
  box-shadow: inset 0 -2px 0 0 var(--brand);
}

.comment-form textarea.form-control {
  min-height: 130px;
}

/* --- Post navigation (previous / next) ------------------------------------
   Matches live's post-nav: a thin top rule, an eyebrow label, then the
   neighbouring post's title, with an arrow pinned to the outer edge. -------- */

.post-nav {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.post-nav__list {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-nav__item {
  max-width: 46%;
}

.post-nav__item--next {
  margin-left: auto;
  text-align: right;
}

.post-nav__item a {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.post-nav__item--prev a {
  padding-left: 42px;
}

.post-nav__item--next a {
  padding-right: 42px;
}

.post-nav__icon {
  position: absolute;
  top: 0;
  width: 22px;
  height: 22px;
  color: var(--brand);
}

.post-nav__item--prev .post-nav__icon {
  left: 0;
}

.post-nav__item--next .post-nav__icon {
  right: 0;
}

.post-nav__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--faint);
}

.post-nav__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

.post-nav__item a:hover .post-nav__title {
  color: var(--brand);
}

@media (max-width: 640px) {
  .post-nav__list {
    flex-direction: column;
    gap: 32px;
  }

  .post-nav__item,
  .post-nav__item--next {
    max-width: 100%;
    text-align: left;
    margin-left: 0;
  }

  .post-nav__item--next a {
    padding-right: 0;
    padding-left: 42px;
  }

  .post-nav__item--next .post-nav__icon {
    left: 0;
    right: auto;
  }
}