:root {
  --brand-navy: #122558;
  
}

a
{
  color:#44b9d1;
}

.site-header {
  height: 330px;
  position: relative;
}

/* Logo above menu */
.brand-logo img {
  max-height: 190px;
  height: auto;
}

/* Center logo inside nav (smaller than top logo) */
.brand-logo-nav img {
  max-height: 330px;
  height: auto;
  display: block;
}

/* Place nav ~265px from top */
.site-nav {
  position: absolute;
  left: 0;
  right: 0;
}

/* Typography */
.site-nav .nav-link {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  color: var(--brand-navy);
  font-weight: 400;
  display: inline-block;
  min-width: 120px; /* pick a width that fits the longest word */
  text-align: center;
}

.site-nav .nav-link.active {
  font-weight: 700 !important;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
  color: var(--brand-navy);
  font-weight:700;
}

/* Responsive: stack neatly */
@media (max-width: 767.98px) {
  .site-header {
    height: auto;
    padding-bottom: 1rem;
  }
  .site-nav {
    position: static;
    margin-top: .5rem;
  }
  .brand-logo-nav {
    display: none; /* hide middle logo on small screens */
  }
}

.site-nav .nav-item {
  margin-top: 210px;
}



.brand-logo-nav img
{
  margin-top:-210px;
}


/* Hero sizing */
.hero {
  min-height: clamp(460px, 60vw, 700px);
  position: relative; overflow: hidden;
}

/* Make the <img> behave like a background: cover */
.hero picture,
.hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
   z-index: 0;
}

/* Subtle left-to-right gradient to match mock and improve legibility */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.00) 65%);
  z-index: 1;
}

/* Content block sits above the image */
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: clamp(2rem, 10vw, 6rem);
  padding-bottom: clamp(3.5rem, 10vw, 7.5rem); /* leaves space for the wave */
  position: relative; z-index: 3;
}

/* Typography (Manrope assumed loaded) */
.hero-title {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #ffffff;
  font-weight: 800;              /* ExtraBold */
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-top:110px;
}

.hero-title-services {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #ffffff;
  font-weight: 800;              /* ExtraBold */
  font-size: clamp(40px, 4.2vw, 72px);
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-top:70px;
}

.hero-title-contact
{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #ffffff;
  font-weight: 800;              /* ExtraBold */
  font-size: clamp(48px, 4.2vw, 72px);
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-top:100px;
}

.hero-subtitle {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #ffffff;
  font-weight: 400;              /* Regular */
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.5;
  max-width: 60ch;
}

/* Wave pinned to the bottom, stretches horizontally */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom:0px;
  z-index: 1;
  pointer-events: none;
}

/* Fine-tune spacing on very small screens */
@media (max-width: 575.98px) {
  .hero-content {
    padding-top: 2rem;
    padding-bottom: 5rem;
  }
}


.hero-content { padding-bottom: max(92px, 6rem); }

/* Shapes container spans the hero */
.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;        /* don't block clicks */
  z-index: 2; pointer-events: none;
}

/* Each shape: fixed box; size scales with viewport */
.shape {
  position: absolute;
  width: clamp(28px, 4vw, 56px);
  aspect-ratio: 1 / 1;
}

/* The image spins; box stays put */
.shape > img {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Spin-in-place animation */
@keyframes spin-in {
  0%   { transform: scale(.92) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: scale(1)   rotate(360deg); opacity: 1; }
}

/* Applied by JS on enter; runs once then stops */
.shape.is-spinning > img {
  animation: spin-in 900ms cubic-bezier(.22,.75,.18,1) both;
}

/* Prefer reduced motion: quick fade only */
@media (prefers-reduced-motion: reduce) {
  .shape.is-spinning > img { animation: none; opacity: 1; }
}

/* --- Responsive positions (percentages) ---
   Tweak these numbers to match your mock. Using left/right + top keeps
   placement proportional as the hero resizes. */
.shape--star { left: 14.3%; top: 10%; }
.shape--semi { left: 9.8%; top: 17.1%; }
.shape--square   { right: 18%; top: 22%; }
.shape--circle   { right: 8%;  top: 42%; }
.shape--triangle { right: 10%; bottom: 14%; }

/* Optional mobile adjustments (bring shapes away from edges) */
@media (max-width: 575.98px) {
  .shape--star     { left: 6%;  top: 6%;  }
  .shape--semi     { left: 3%;  top: 12%; }
  .shape--square   { right: 12%; top: 18%; }
  .shape--circle   { right: 6%;  top: 46%; }
  .shape--triangle { right: 8%;  bottom: 12%; }
}

.shape--star2 
{ 
  position:absolute;
  left: -2%; top: 5%; transform: rotate(-15deg); width:50px; height:50px; 

}
.shape--semi2 { 
  position:absolute;

  left: -3%; top: 14.1%; transform: rotate(-30deg); }
.shape--semi2 > img { width:70px; }
.shape--square2   { position:absolute; right: 18%; top: 22%; }
.shape--circle2   { position:absolute; right: 0.5%;  top: 18%; }
.shape--triangle2 { position:absolute; right: 21%; top: -5%; transform: rotate(-30deg); }


/* Placement mode visuals */
.shapes-debug .hero-shapes { pointer-events: auto; }
.shapes-debug .shape {
  cursor: move;
  outline: 1px dashed rgba(255,255,255,.7);
  outline-offset: 2px;
}
.shapes-debug .shape > img { pointer-events: none; } /* drag the box, not the img */

/* DEBUG: bring shapes above everything + allow clicks */
.shapes-debug .hero-shapes {
  z-index: 9999;              /* above text, wave, etc. */
  pointer-events: auto !important;
}
.shapes-debug .hero-content {
  pointer-events: none;       /* avoid text capturing clicks while placing */
}
.shapes-debug .hero-shapes .shape {
  cursor: move;
  outline: 1px dashed rgba(255,255,255,.85);
  outline-offset: 2px;
}

/* Paediatric OT definition section */
.ot-definition__title {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  line-height: 48px;
  color: #32adc8;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
  margin-top:40px;
}

.services__title {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  line-height: 48px;
  color: #ab75a6;
  font-weight: 800;
  margin-bottom: 1rem;
  margin-top:40px;
}

.forbrain__title
{
  color:#52b7a9;
}

.ot-definition__copy {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #25304e;
  font-weight: 400;
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  padding-top:22px;
  padding-bottom:22px;
}

.about__copy, .services__copy {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #25304e;
  font-weight: 400;  
  max-width: 70ch;
}

.services__list {
  font-size: 16px;
  line-height: 28px;
  color: #25304e;
  font-weight: 400;
  font-family: "Manrope", sans-serif;
  list-style: none;              /* remove default bullets */
  padding-left: 0;               /* reset default padding */
  margin: 0;                     /* clean reset */
}

.services__list li {
  position: relative;
  padding-left: 32px;            /* room for the custom icon */
  margin-bottom: 2rem;           /* "double white space" after each */
}

.services__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;                      /* adjust vertically to align with text */
  width: 20px;                   /* size of your custom icon */
  height: 20px;
  background: url("../img/star.webp") no-repeat center center;
  background-size: contain;      /* scale your icon properly */
}


.ot-definition__btn {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;

  background-color: #ffa60d;
  border-color: #ffa60d;
  border-radius: 19px;
  padding: 0.6rem 1.4rem;

  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.ot-definition__btn:hover,
.ot-definition__btn:focus {
  color: #ffffff;
  background-color: #f19900;
  border-color: #f19900;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

.ot-definition__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Optional: slight downscale on very small screens so it wraps nicely */
@media (max-width: 575.98px) {
  .ot-definition__title {
    font-size: 32px;
    line-height: 40px;
  }
}


/* Section base: must sit ABOVE the top wave and allow sticking out */
.areas {
  background-color: #48aa98;
  position: relative;
  z-index: 100;               /* higher than the wave */
  overflow: visible !important; /* beats the old .overflow-hidden utility */
}

.services {
  background-color: #44b9d1;
  position: relative;
  z-index: 100;               /* higher than the wave */
  overflow: visible !important; /* beats the old .overflow-hidden utility */
}

/* Waves: keep them lower than the section */
.areas__wave {
  position: relative;         /* to allow z-index */
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
}

.areas__title {
  color: #ffffff !important;
}


.areas__wave--top {
  margin-bottom: 0px;        /* snug join */
  z-index: 1;                 /* BELOW the section */
}

.areas__wave--bottom {
  margin-top: 0px;
  /* z-index can remain 0 (it's below the section) */
}

/* Kids image: child of .areas; sits on top of both */
.areas__kids-img {
  position: absolute;
  right: 20%;                          /* tweak to taste */
  top: calc(-1 * min(8vw, 90px));      /* stick out above */
  width: clamp(160px, 24vw, 320px);
  height: auto;
  pointer-events: none;
  z-index: 200;                        /* above section + wave */
}

.services__kid-img {
  position: absolute;
  
  top: calc(-1 * min(10vw, 50px));      /* stick out above */
  width: clamp(50px, 50vw, 450px);
  height: auto;
  pointer-events: none;
  z-index: 200;                        /* above section + wave */
}

.services__copy_tomatis
{
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Manrope";
}



.services__copy_tomatis a
{
  color: #ffffff;
}

/* Flip cards */
.flipcard {
  background: transparent;
  border: 0;
  width: 100%;
  height: 145px; /* adjust to taste; rows will stretch */
  perspective: 1000px;
  outline: none;
}
.flipcard__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(.22,.75,.18,1);
  font-size: 16px;
}
.flipcard__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.75rem 0.75rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  backface-visibility: hidden;

  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: #5e5e5e;
  font-weight: 700;
  text-align: center;
}
.flipcard__face--back {
  transform: rotateY(180deg);
  /* back face text may be longer → allow multi-line comfortably */
  padding: 1rem 1rem;
}

/* Back face (inner text smaller) */
.flipcard__face--back {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400; /* probably lighter than the front */
  color: #5e5e5e;   /* keep the same colour */
}


/* Trigger flip (hover, focus, or JS toggled class) */
.flipcard:hover .flipcard__inner,
.flipcard:focus .flipcard__inner,
.flipcard.is-flipped .flipcard__inner {
  transform: rotateY(180deg);
}

/* Reduced motion: fade swap */
@media (prefers-reduced-motion: reduce) {
  .flipcard__inner { transition: none; }
  .flipcard:hover .flipcard__inner,
  .flipcard:focus .flipcard__inner,
  .flipcard.is-flipped .flipcard__inner {
    transform: none;
  }
  .flipcard__face--front { opacity: 1; }
  .flipcard.is-flipped .flipcard__face--front { opacity: 0; }
  .flipcard.is-flipped .flipcard__face--back { opacity: 1; }
}

/* Grid spacing tidy on small screens */
@media (max-width: 575.98px) {
  .areas__title { font-size: 32px; line-height: 40px; }
  .flipcard { height: 145px; }
}

/* --- Meet section --- */
.meet { 
  overflow: visible; 
  position: relative;
  z-index: 1; 
} /* let photo/wave extend if needed */

.meet__title {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  line-height: 48px;
  color: #d86398;
  font-weight: 800;
}

.meet__copy {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #25304e;
  font-weight: 400;
}

/* Photo + wave layering: wave MUST be above the photo */
.meet__photo-wrap {
  position: relative;
}
.meet__photo {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.meet__wave {
  display: block;
  width: 100%;
  height: auto;
  position: relative;                /* so z-index applies */
  z-index: 5;                        /* above photo + process */
  pointer-events: none;
  top: -80px; /* pull next section up under the wave */
}


.services__wave {
  display: block;
  width: 100%;
  height: auto;
  position: relative;                /* so z-index applies */
  z-index: 5;                        /* above photo + process */
  pointer-events: none;
   /* pull next section up under the wave */
}

.services2 {
  background: #9e5c99;
  position: relative;
  z-index: 2;                        /* below the wave, above the meet bg */
  /*padding-top: var(--process-wave-h);/* content starts just under the wave */
  padding-top:80px !important;
  margin-top:0;
  /* no negative margin needed here because the wave handles the overlap */
}

/* Small screens: tighten a bit */
@media (max-width: 575.98px) {
  .meet__title { font-size: 32px; line-height: 40px; }
}

/* --- Process section (solid purple) --- */
.process {
  background: #9e5c99;
  position: relative;
  z-index: 2;                        /* below the wave, above the meet bg */
  /*padding-top: var(--process-wave-h);/* content starts just under the wave */
  padding-top:80px !important;
  margin-top:-80px;
  /* no negative margin needed here because the wave handles the overlap */
}

.process__title {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
  font-weight: 800;
}

.process__copy {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 400;
}

.process__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px; /* optional, looks nice with the design */
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* Small screens */
@media (max-width: 575.98px) {
  .process__title { font-size: 32px; line-height: 40px; }
}

.btn-cta {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  background-color: #ffa60d;
  border-color: #ffa60d;
  border-radius: 19px;
  padding: 0.6rem 1.4rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-cta:hover,
.btn-cta:focus {
  color: #ffffff;
  background-color: #f19900;
  border-color: #f19900;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}



.reviews__heading{
  font-family:"Manrope",sans-serif;
  font-size:48px; line-height:54px; color:#ef624f; font-weight:700; text-align:center;
  margin-bottom: 40px;
}
.review-card{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  padding:1rem; box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-family:"Manrope",sans-serif; color:#25304e;
}
.review-text{ font-size:16px; line-height:24px; max-height:6.5em; overflow:hidden; }

.site-footer {
    background: #f2f2f2;
    font-size: 14px;
    color:#5e5e5e;
  }
  .site-footer h6 {
    color: #48aa98;
    letter-spacing: .02em;
    margin-bottom: .75rem;
    font-weight: 600;
  }
  .site-footer a {
    text-decoration: none;
    color:#5e5e5e;
  }
  .site-footer .social a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: .5rem;
  }
  .site-footer .social a:hover {
    text-decoration: underline;
  }
  .footer-logo {
    max-width: 100%;
    height: auto;
  }
  .footer-copy {
    border-top: 1px solid rgba(0,0,0,.06);
    font-size: 13px;
  }


  .social-icons a .fa-facebook-f { background-color: #32adc8; }
  .social-icons a .fa-instagram { background-color: #d86398; }
  .social-icons a .fa-linkedin-in { background-color: #48aa98; }

  .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10%;   /* circle */
    /* brand color */
  color: #fff;          /* icon white */
  font-size: 28px;
  margin-right: 10px;
}

.social-icons a.footer-fb
{
  background-color: #32adc8;
}

.social-icons a.footer-ig
{
  background-color: #d86398;
}

.social-icons a.footer-li
{
  background-color: #48aa98;
}

.contact-card-purple {
  background:#b471a8; /* purple */
  color:#fff !important;
  border-radius:16px;
}

.contact-body-white p
{
  color:#fff !important;
}

.contact-card-purple a { color:#fff; text-decoration: underline; }
/* Create space for the “invisible heading” in column 3 to align bodies */
.spacer-heading {
  height: calc(3rem + .5rem); /* roughly h5 height + margin; tweak to match your heading */
  margin-bottom: .75rem;
}
.contact-heading {
  margin-bottom: .75rem;
  font-size: 32px;
line-height: 48px;
color: #ab75a6;
font-weight: 800;
font-family: "Manrope";
}
.contact-body p {
  margin: 0 0 .5rem 0;
  font-size: 16px;
line-height: 28px;
color: #25304e;
font-weight: 400;
font-family: "Manrope";
}

#contact-form
{
  font-size: 16px;
line-height: 28px;
color: #404040;
font-weight: 400;
font-family: "Manrope";
}

.submitbtn
{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;

  background-color: #ffa60d;
  border-color: #ffa60d;
  border-radius: 19px;
  padding: 0.6rem 1.4rem;

  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}