/* ==========================================================================
   Alongside Early Years — Site Stylesheet
   Fonts: Delius (headings) / Quicksand (body) — loaded via Google Fonts
   Brand colours (refreshed palette): Purple #7314ab · Teal #459bab ·
   Yellow #e8b13c · Blue #2a47f5 · Pink #f19ed5 · Orange #ee7d3a
   ========================================================================== */

:root {
  --c-purple: #7314ab;
  --c-purple-dark: #530e7b;
  --c-purple-light: #f1e8f7;
  --c-teal: #459bab;
  --c-teal-dark: #32707b;
  --c-teal-light: #ecf5f7;
  --c-yellow: #e8b13c;
  --c-yellow-dark: #a77f2b;
  --c-yellow-light: #fdf7ec;
  --c-blue: #2a47f5;
  --c-blue-dark: #1e33b0;
  --c-blue-light: #eaedfe;
  --c-pink: #f19ed5;
  --c-pink-dark: #ae7299;
  --c-pink-light: #fef5fb;
  --c-orange: #ee7d3a;
  --c-orange-dark: #ab5a2a;
  --c-orange-light: #fdf2eb;
  --c-body: #292929;
  --c-white: #ffffff;
  --c-offwhite: #fbf9fd;
  --font-heading: "Delius", "Comic Sans MS", cursive, sans-serif;
  --font-body: "Quicksand", "Trebuchet MS", sans-serif;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 30px rgba(126, 0, 178, 0.12);
  --shadow-pop: 0 8px 20px rgba(0, 0, 0, 0.1);
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-body);
  color: var(--c-body);
  background-color: var(--c-offwhite);
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--c-purple);
  line-height: 1.25;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); }

p { margin-bottom: 1rem; }

a {
  color: var(--c-teal);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--c-purple); }

.text-purple { color: var(--c-purple) !important; }
.text-teal   { color: var(--c-teal) !important; }
.text-yellow { color: var(--c-yellow-dark) !important; }
.text-blue   { color: var(--c-blue) !important; }
.text-pink   { color: var(--c-pink-dark) !important; }
.text-orange { color: var(--c-orange-dark) !important; }
.bg-purple   { background-color: var(--c-purple) !important; }
.bg-teal     { background-color: var(--c-teal) !important; }
.bg-yellow   { background-color: var(--c-yellow) !important; }
.bg-blue     { background-color: var(--c-blue) !important; }
.bg-pink     { background-color: var(--c-pink) !important; }
.bg-orange   { background-color: var(--c-orange) !important; }
.bg-purple-light { background-color: var(--c-purple-light) !important; }
.bg-teal-light    { background-color: var(--c-teal-light) !important; }
.bg-yellow-light  { background-color: var(--c-yellow-light) !important; }
.bg-blue-light    { background-color: var(--c-blue-light) !important; }
.bg-pink-light    { background-color: var(--c-pink-light) !important; }
.bg-orange-light  { background-color: var(--c-orange-light) !important; }

.section { padding: 5.5rem 0; position: relative; }
.section-sm { padding: 3.5rem 0; }
@media (max-width: 767.98px) {
  .section { padding: 3.25rem 0; }
  .section-sm { padding: 2.25rem 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--c-teal-dark);
  margin-bottom: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--c-yellow);
  display: inline-block;
}

.squiggle-underline {
  position: relative;
  display: inline-block;
}
.squiggle-underline svg {
  position: absolute;
  left: 0;
  bottom: -0.35em;
  width: 100%;
  height: 0.4em;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 50px;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  transition: transform 0.25s var(--transition-bounce), box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease;
  position: relative;
}
.btn:active { transform: scale(0.96); }

.btn-brand-purple {
  background-color: var(--c-purple);
  color: var(--c-white);
  box-shadow: 0 6px 0 var(--c-purple-dark);
}
.btn-brand-purple:hover {
  background-color: var(--c-purple);
  color: var(--c-white);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--c-purple-dark);
}
.btn-brand-purple:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 var(--c-purple-dark);
}

.btn-brand-teal {
  background-color: var(--c-teal);
  color: var(--c-white);
  box-shadow: 0 6px 0 var(--c-teal-dark);
}
.btn-brand-teal:hover {
  background-color: var(--c-teal);
  color: var(--c-white);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--c-teal-dark);
}
.btn-brand-teal:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 var(--c-teal-dark);
}

.btn-brand-yellow {
  background-color: var(--c-yellow);
  color: var(--c-body);
  box-shadow: 0 6px 0 var(--c-yellow-dark);
}
.btn-brand-yellow:hover {
  background-color: var(--c-yellow);
  color: var(--c-body);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--c-yellow-dark);
}

.btn-outline-brand {
  background-color: transparent;
  color: var(--c-purple);
  border-color: var(--c-purple);
}
.btn-outline-brand:hover {
  background-color: var(--c-purple);
  color: var(--c-white);
  transform: translateY(-3px);
}

.btn-sm-pill {
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
}

/* Little wiggle affordance on hover for playful links */
.link-wiggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
}
.link-wiggle svg,
.link-wiggle i { transition: transform 0.3s var(--transition-bounce); }
.link-wiggle:hover svg { transform: translateX(6px) rotate(8deg); }
.link-wiggle:hover i { transform: translateX(4px); }

/* ---------- Navbar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 18px rgba(41, 41, 41, 0.06);
}
.site-header .navbar {
  padding-block: 1.5rem;
  transition: padding-block 0.35s ease;
}
.navbar-brand img {
  height: 100px;
  width: auto;
  transition: height 0.35s ease, transform 0.3s ease;
}
.navbar-brand:hover img { transform: rotate(-3deg) scale(1.04); }

/* Logo starts big and settles down once the page is scrolled */
.site-header.is-scrolled .navbar { padding-block: 0.5rem; }
.site-header.is-scrolled .navbar-brand img { height: 50px; }

@media (max-width: 575.98px) {
  .navbar-brand img { height: 74px; }
  .site-header.is-scrolled .navbar-brand img { height: 44px; }
}

.navbar-nav .nav-link {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--c-body);
  margin: 0 0.35rem;
  padding: 0.5rem 0.75rem !important;
  position: relative;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.25rem;
  height: 3px;
  border-radius: 3px;
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--c-purple);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}
.nav-cta {
  margin-left: 0.5rem;
}

/* ---------- Hero / Bubble ---------- */
.hero {
  position: relative;
  padding: 4rem 0 6rem;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.deco {
  position: absolute;
  border-radius: 50%;
  opacity: 0.85;
  will-change: transform;
  animation: float 7s ease-in-out infinite;
}
.deco-1 { width: 46px; height: 46px; background: var(--c-yellow); top: 12%; left: 8%; animation-delay: 0s; }
.deco-2 { width: 26px; height: 26px; background: var(--c-purple); top: 68%; left: 5%; animation-delay: 1.2s; }
.deco-3 { width: 60px; height: 60px; border: 6px solid var(--c-teal); background: transparent; top: 8%; right: 10%; animation-delay: 0.6s; }
.deco-4 { width: 34px; height: 34px; background: var(--c-teal); top: 78%; right: 14%; animation-delay: 1.8s; }
.deco-5 { width: 20px; height: 20px; background: var(--c-yellow); top: 40%; right: 4%; animation-delay: 0.3s; }
.deco-6 { width: 16px; height: 16px; background: var(--c-purple); top: 30%; left: 18%; animation-delay: 2.1s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, -18px) rotate(8deg); }
}

.hero-bubble-wrap {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}

.hero-bubble {
  position: relative;
  width: min(640px, 92vw);
  aspect-ratio: 4 / 3.05;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #17b3c2 0%, var(--c-teal) 62%, var(--c-teal-dark) 100%);
  border: 7px solid var(--c-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-bubble-inner {
  padding: 2.5rem 3rem;
  max-width: 480px;
  transform: translateZ(40px);
}
.hero-bubble-inner .eyebrow { color: var(--c-yellow); }
.hero-bubble-inner .eyebrow::before { background: var(--c-white); }
.hero-bubble h1 {
  color: var(--c-white);
  margin-bottom: 0.75rem;
}
.hero-bubble p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.08rem;
  margin-bottom: 1.5rem;
}

.hero-ring {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 2px solid rgba(126, 0, 178, 0.35);
  border-right-color: transparent;
  animation: spin 18s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Keep the bubble looking like a circle (not a stretched ellipse) as the
   screen narrows, by giving the text room proportionate to the shrinking
   width rather than letting it overflow the circle's natural height. */
@media (max-width: 767.98px) {
  .hero-bubble { aspect-ratio: 1 / 1.08; }
  .hero-bubble-inner { padding: 2rem 2.1rem; max-width: 380px; }
  .hero-bubble h1 { font-size: 1.7rem; margin-bottom: 0.5rem; }
  .hero-bubble p { font-size: 0.92rem; margin-bottom: 1.1rem; line-height: 1.55; }
  .hero-bubble-inner .eyebrow { font-size: 0.68rem; margin-bottom: 0.5rem; }
  .hero-bubble .btn { padding: 0.6rem 1.2rem; font-size: 0.92rem; }
}

@media (max-width: 575.98px) {
  .hero-bubble { width: 88vw; aspect-ratio: 1 / 1.02; }
  .hero-bubble-inner { padding: 1.5rem 1.35rem; max-width: 280px; }
  .hero-bubble h1 { font-size: 1.4rem; }
  .hero-bubble p { font-size: 0.85rem; margin-bottom: 0.9rem; }
  .hero-bubble-inner .eyebrow { font-size: 0.62rem; }
  .hero-bubble .btn { padding: 0.55rem 1rem; font-size: 0.85rem; }
}

.hero-sub {
  text-align: center;
  max-width: 640px;
  margin: 2.25rem auto 0;
  color: #4a4a4a;
}

@media (prefers-reduced-motion: reduce) {
  .deco, .hero-bubble, .hero-ring, .btn, .link-wiggle svg, * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Situation / service cards ---------- */
/* Each card is filled with its own solid brand colour by default (rather than
   white + a coloured border), like a set of colourful noticeboard tiles.
   Six cards, six looks -- all still drawn from the same three brand hues. */
.situation-card {
  --card-bg: var(--c-purple);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.85);
  --card-btn-text: var(--c-purple);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  height: 100%;
  box-shadow: 0 10px 26px rgba(41, 41, 41, 0.14);
  transition: transform 0.3s var(--transition-bounce), box-shadow 0.3s ease;
}
/* Card 1: Behaviour -- purple */
#situations .reveal-delay-1 .situation-card {
  --card-bg: var(--c-purple);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.85);
  --card-btn-text: var(--c-purple);
}
/* Card 2: Staffing -- teal (white title/subtext per Oliver's request; button
   text stays a dark teal for contrast on its white pill) */
#situations .reveal-delay-2 .situation-card {
  --card-bg: var(--c-teal);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-teal-dark);
}
/* Card 3: SEND -- yellow */
#situations .reveal-delay-3 .situation-card {
  --card-bg: var(--c-yellow);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-yellow-dark);
}
/* Card 4: Safeguarding -- blue */
#situations .reveal-delay-4 .situation-card {
  --card-bg: var(--c-blue);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.85);
  --card-btn-text: var(--c-blue);
}
/* Card 5: Ofsted -- pink */
#situations .reveal-delay-5 .situation-card {
  --card-bg: var(--c-pink);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-pink-dark);
}
/* Card 6: Ask Alongside -- orange */
#situations .reveal-delay-6 .situation-card {
  --card-bg: var(--c-orange);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-orange-dark);
}

/* Same six-colour treatment reused on about.php's "What matters to us" grid,
   so the colour scheme is consistent across pages, not just the homepage. */
#what-matters .reveal-delay-1 .situation-card {
  --card-bg: var(--c-purple);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.85);
  --card-btn-text: var(--c-purple);
}
#what-matters .reveal-delay-2 .situation-card {
  --card-bg: var(--c-teal);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-teal-dark);
}
#what-matters .reveal-delay-3 .situation-card {
  --card-bg: var(--c-yellow);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-yellow-dark);
}
#what-matters .reveal-delay-4 .situation-card {
  --card-bg: var(--c-blue);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.85);
  --card-btn-text: var(--c-blue);
}
#what-matters .reveal-delay-5 .situation-card {
  --card-bg: var(--c-pink);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-pink-dark);
}
#what-matters .reveal-delay-6 .situation-card {
  --card-bg: var(--c-orange);
  --card-text: var(--c-white);
  --card-text-soft: rgba(255, 255, 255, 0.88);
  --card-btn-text: var(--c-orange-dark);
}
/* Match the homepage's white-text treatment (with the same legibility shadow). */
#what-matters .situation-card h3,
#what-matters .situation-card p {
  text-shadow: 0 1px 3px rgba(20, 20, 20, 0.22);
}

/* Founder bio cards (about.php) are long-form text, not short tiles -- a
   quieter white card with a coloured accent border reads better here than
   a loud solid fill. */
.situation-card.situation-card--quiet {
  --card-bg: var(--c-white);
  --card-text: var(--c-purple);
  --card-text-soft: #4a4a4a;
  background: var(--c-white);
  border: 4px solid var(--quiet-accent, var(--c-purple-light));
  box-shadow: 0 6px 18px rgba(41, 41, 41, 0.07);
}
.situation-card--quiet p { color: var(--card-text-soft); }

.situation-card:hover {
  transform: translateY(-8px) rotate(-0.6deg);
  box-shadow: var(--shadow-pop);
}
.situation-card--quiet:hover {
  transform: translateY(-4px);
  border-color: var(--c-purple);
}
.situation-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.28) !important;
  transition: transform 0.35s var(--transition-bounce);
}
.situation-icon i { color: var(--card-text) !important; }
.situation-card:hover .situation-icon { transform: scale(1.12) rotate(-6deg); }
.situation-card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; color: var(--card-text); }
.situation-card p { font-size: 0.97rem; color: var(--card-text-soft); margin-bottom: 1.4rem; }
/* All six boxes now carry white title/subtext -- a soft shadow keeps them
   legible on the brighter yellow/teal/pink tiles. */
#situations .situation-card h3,
#situations .situation-card p {
  text-shadow: 0 1px 3px rgba(20, 20, 20, 0.22);
}

/* "Read more" / "Ask Alongside" links become chunky pill buttons that sit
   on top of the solid card colour, echoing the reference layout. */
.situation-card .link-wiggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--c-white);
  color: var(--card-btn-text);
  font-size: 0.92rem;
  padding: 0.55rem 1.3rem;
  border-radius: 50px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s var(--transition-bounce), box-shadow 0.25s ease;
}
.situation-card .link-wiggle:hover,
.situation-card .link-wiggle:focus-visible {
  color: var(--card-btn-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}
.situation-card .link-wiggle:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .situation-card, .situation-icon, .situation-card .link-wiggle { transition: none; }
}

/* ---------- Feature / highlight blocks ---------- */
.highlight-block {
  border-radius: var(--radius-lg);
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .highlight-block { padding: 2rem 1.5rem; }
}
.highlight-block .blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}

/* ---------- Service photos (services.php) ----------
   Rounded, shadowed photo frame for each service section. Images are
   deliberately oversized (scale(1.18) below) and nudged vertically by JS as
   the visitor scrolls, so there's always image left to reveal at the frame
   edges -- a simple, lightweight parallax feel without any library. */
.service-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow: 0 14px 34px rgba(41, 41, 41, 0.16);
  aspect-ratio: 4 / 3;
}
.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18) translateY(var(--parallax-y, 0px));
  transition: transform 0.05s linear;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .service-photo img { transform: none !important; transition: none; }
}

.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.why-item:hover {
  background-color: var(--c-purple-light);
  transform: translateX(4px);
}
.why-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-purple);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

/* ---------- Why Alongside: photo-backed section ---------- */
/* Tall (70vh) full-bleed photo section with the heading + cards anchored
   toward the bottom, so more of the photo shows through above them. */
.why-photo-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding-block: 3rem 4.5rem;
  background-image: url("/images/why-alongside-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  overflow: hidden;
}
.why-photo-section .container { width: 100%; }
.why-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(93, 0, 130, 0.25) 0%, rgba(93, 0, 130, 0.68) 55%, rgba(0, 110, 122, 0.82) 100%);
}
.why-grid-photo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
@media (max-width: 767.98px) {
  .why-photo-section { min-height: 0; padding-block: 3rem; }
}
.why-card-photo {
  flex: 1 1 250px;
  max-width: 280px;
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--transition-bounce), box-shadow 0.35s ease;
}
.why-card-photo:hover {
  transform: translateY(-8px) rotate(-0.7deg);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
}
.why-icon-photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  transition: transform 0.35s var(--transition-bounce);
}
.why-card-photo:hover .why-icon-photo { transform: scale(1.15) rotate(-8deg); }
.why-card-photo p { color: #4a4a4a; font-size: 0.95rem; }

@media (max-width: 575.98px) {
  .why-card-photo { flex: 1 1 100%; max-width: 360px; }
}

/* ---------- Tiers / affordable offer ---------- */
/* White card, chunky colour border, and a hand-drawn "highlighter" brush
   stroke behind the title -- on hover the card fills with the same colour
   and the brush stroke fades out into it. */
.tier-card {
  --accent: var(--c-purple);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align: center;
  height: 100%;
  box-shadow: 0 6px 18px rgba(41, 41, 41, 0.06);
  border: 4px solid var(--accent);
  transition: transform 0.3s var(--transition-bounce), box-shadow 0.3s ease;
}
.tier-card:has(.bg-teal-light) { --accent: var(--c-teal); }
.tier-card:has(.bg-yellow-light) { --accent: var(--c-yellow); }
.tier-card:has(.bg-blue-light) { --accent: var(--c-blue); }
.tier-card:has(.bg-pink-light) { --accent: var(--c-pink); }
.tier-card:has(.bg-orange-light) { --accent: var(--c-orange); }

.tier-card::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  background: var(--accent);
  border-radius: inherit;
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--transition-bounce);
}
.tier-card > * {
  position: relative;
  z-index: 1;
}
.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-pop);
}
.tier-card:hover::before { transform: scale(2.6); }
.tier-card:hover h3,
.tier-card:hover p { color: var(--c-white); }

/* Brush-stroke highlight behind the title */
.tier-card h3 {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--c-white);
  text-shadow: 0 1px 3px rgba(20, 20, 20, 0.3);
  transition: color 0.35s ease;
}
.tier-card h3::before {
  content: "";
  position: absolute;
  left: -22%;
  right: -18%;
  top: 26%;
  bottom: 4%;
  z-index: -1;
  background: var(--accent);
  opacity: 0.9;
  border-radius: 60% 40% 35% 65% / 70% 65% 35% 30%;
  transform: rotate(-2.2deg) scaleY(2.5);
  transition: opacity 0.35s ease;
}
.tier-card:hover h3::before { opacity: 0; }
.tier-card .tier-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.35s ease;
}
.tier-card:hover .tier-icon { background-color: rgba(255, 255, 255, 0.25) !important; }
.tier-card:hover .tier-icon i { color: var(--c-white) !important; }
.tier-card h3, .tier-card p { transition: color 0.35s ease; }

/* ---------- Founders / team ---------- */
.founder-avatar {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid var(--c-yellow);
  overflow: hidden;
  margin: 0 auto;
  box-shadow: var(--shadow-soft);
}
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--c-purple) 0%, #a020d6 100%);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  color: var(--c-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: var(--c-white); }
.cta-banner .btn-brand-yellow { color: var(--c-body); }

/* ---------- Talk to us: short banner with icon accents ---------- */
.talk-banner {
  background: var(--c-purple);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  color: var(--c-white);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 0;
}
.talk-banner-content { text-align: center; max-width: 420px; }
.talk-banner-content h2 { color: var(--c-white); margin-bottom: 0.35rem; }
.talk-banner-content p { color: rgba(255, 255, 255, 0.9); }
.talk-banner .btn-brand-yellow { color: var(--c-body); }
.talk-decor {
  flex: 0 0 auto;
  width: 140px;
  height: 100px;
  position: relative;
  display: none;
}
@media (min-width: 768px) {
  .talk-decor { display: block; }
}
.talk-decor-left { margin-left: -1rem; }
.talk-cord-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.talk-phone-icon {
  position: absolute;
  right: 18px;
  top: 22px;
  font-size: 2.75rem;
  color: var(--c-yellow);
  transform: rotate(-18deg);
}
.talk-decor-right { margin-right: -0.5rem; }
.chat-bubble {
  position: absolute;
  width: 74px;
  height: 60px;
  border-radius: 22px 22px 22px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.chat-bubble span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-white);
  display: inline-block;
}
.chat-bubble-yellow {
  background: var(--c-yellow);
  top: 2px;
  right: 20px;
  z-index: 1;
}
.chat-bubble-teal {
  background: var(--c-teal);
  top: 46px;
  right: 66px;
  border-radius: 22px 22px 4px 22px;
}
@media (max-width: 767.98px) {
  .talk-banner { flex-direction: column; padding: 2rem 1.5rem; }
}

/* ---------- "Let's work it out together" banner (about.php): a little
   stack of tumbled toy blocks on one side, a dashed trail to a star on the
   other -- same .talk-banner shell as the homepage, different icon set. ---------- */
.blocks-decor { width: 100px; height: 150px; }
.block {
  position: absolute;
  width: 62px;
  height: 54px;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(41, 41, 41, 0.2);
}
.block::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background: #fbead0;
}
.block-pink { background: var(--c-pink); top: -6px; left: 22px; transform: rotate(-8deg); z-index: 3; }
.block-yellow { background: var(--c-yellow); top: 42px; left: 8px; transform: rotate(5deg); z-index: 2; }
.block-teal { background: var(--c-teal); top: 90px; left: 18px; transform: rotate(-4deg); z-index: 1; }

.star-decor { width: 150px; height: 120px; }
.together-path-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.together-star-icon {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 1.85rem;
  color: var(--c-yellow);
  transform: rotate(10deg);
}

/* ---------- "Not sure which service?" banner (services.php): a compass
   badge on one side, a lightbulb + question-mark pair floating on the
   other -- again the shared .talk-banner shell, its own icon set. ---------- */
.guide-decor-left { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.guide-badge {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(41, 41, 41, 0.2);
}
.guide-badge-main {
  width: 84px;
  height: 84px;
  background: rgba(255, 255, 255, 0.14);
  border: 2px dashed rgba(255, 255, 255, 0.55);
  font-size: 2.4rem;
  color: var(--c-yellow);
}
.guide-orbit {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-teal);
  top: 2px;
  right: 6px;
}
.guide-decor-right { width: 130px; height: 110px; }
.guide-badge-yellow {
  width: 58px;
  height: 58px;
  background: var(--c-yellow);
  color: var(--c-body);
  font-size: 1.5rem;
  top: 4px;
  right: 30px;
  z-index: 1;
}
.guide-badge-teal {
  width: 50px;
  height: 50px;
  background: var(--c-teal);
  color: var(--c-white);
  font-size: 1.25rem;
  top: 54px;
  right: 0;
  z-index: 2;
}

/* ---------- Cards: resources ---------- */
.resource-card {
  background: var(--c-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(41, 41, 41, 0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.resource-card:hover { transform: translateY(-6px); }
.resource-card .resource-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-card .resource-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.badge-coming-soon {
  background: var(--c-yellow-light);
  color: var(--c-yellow-dark);
  font-weight: 700;
  border-radius: 50px;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  align-self: flex-start;
  margin-bottom: 0.6rem;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  border: 2px solid #e3ddea;
  padding: 0.75rem 1rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 0.2rem rgba(0, 157, 173, 0.18);
}
label { font-weight: 700; margin-bottom: 0.35rem; }
.contact-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 10px 28px rgba(41, 41, 41, 0.08);
}
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* honeypot field */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: #3a3542;
  color: #e2dfe6;
  padding: 3.5rem 0 1.5rem;
}
.site-footer h5 {
  color: var(--c-white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: var(--c-yellow); }
.site-footer .footer-logo img { height: 56px; margin-bottom: 1rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #9a9a9a;
}
.social-icons a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.social-icons a:hover { background: var(--c-teal); transform: translateY(-3px); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s var(--transition-bounce);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ---------- Page hero (inner pages) ---------- */
.page-header {
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-header .eyebrow { justify-content: center; display: flex; }
.page-header p.lead { max-width: 680px; margin: 0.5rem auto 0; color: #4a4a4a; }
.page-header .blob-decor {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
}

/* Breadcrumb-ish back link */
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; margin-bottom: 1rem; }

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-purple);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 2000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Anchor offset for in-page nav targets */
section[id] { scroll-margin-top: 90px; }